Custom variable

[marijang]

Hey I added to heading

• attribute: "headingUseBorder"
• .heading { margin: 0; font-weight: var(--heading-font-weight, bold); color: var(--heading-color, var(--global-colors-black, currentColor)); font-size: var(--heading-font-size, 1.5rem); line-height: var(--heading-line-height, 1.25); overflow-wrap: anywhere; &::after{ content: ""; position: absolute; font-weight: var(--heading-font-weight, bold); background-color: var(--heading-border-color, red); height: 4px; bottom: 0; left: 50%; transform: translateX(-50%); } }

So my problem is that after element doesn't see variable --heading-border-color

[iruzevic]

please copy you heading manifest.json here so I can review it

[marijang]

{
	"$schema": "https://raw.githubusercontent.com/infinum/eightshift-frontend-libs/develop/schemas/component.json",
	"componentName": "heading",
	"title": "Heading",
	"componentClass": "heading",
	"example": {
		"attributes": {
			"headingContent": "This is heading",
			"headingLevel": 2,
			"headingSize": "regular",
			"headingColor": "black",
			"headingUse": true
		}
	},
	"attributes": {
		"headingContent": {
			"type": "string"
		},
		"headingLevel": {
			"type": "integer",
			"default": 2
		},
		"headingSize": {
			"type": "string",
			"default": "regular"
		},
		"headingColor": {
			"type": "string",
			"default": "black"
		},
		"headingUseBorder": {
			"type": "boolean",
			"default": true
		},
		"headingUse": {
			"type": "boolean",
			"default": true
		}
	},
	"options": {
		"headingSize": [
			{
				"label": "Tiny (14)",
				"value": "tiny"
			},
			{
				"label": "Small (18)",
				"value": "small"
			},
			{
				"label": "Regular (24)",
				"value": "regular"
			},
			{
				"label": "Big (40)",
				"value": "big"
			},
			{
				"label": "Huge (68)",
				"value": "huge"
			}
		],
		"headingColor": [
			"primary",
			"black",
			"white",
			"green",
			"ocean",
			"yellow",
			"blue",
			"red",
			"cream",
			"mist",
			"dew",
			"eightshift"
		]
	},
	"variables": {
		"headingUseBorder": {
			"true":[
				{
					"variable": {
						"heading-border-color": "var(--global-colors-primary)"
					}
				}
			]
		},
		"headingSize": {
			"tiny": [
				{
					"variable": {
						"heading-font-size": "0.875rem",
						"heading-line-height": "1"
					}
				}
			],
			"small": [
				{
					"variable": {
						"heading-font-size": "1.1rem",
						"heading-line-height": "1"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"heading-font-size": "1.125rem"
					}
				}
			],
			"regular": [
				{
					"variable": {
						"heading-font-size": "1rem",
						"heading-line-height": "1"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"heading-font-size": "1.5rem"
					}
				}
			],
			"big": [
				{
					"variable": {
						"heading-font-size": "1.5rem",
						"heading-line-height": "1"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"heading-font-size": "2.5rem"
					}
				}
			],
			"huge": [
				{
					"variable": {
						"heading-font-size": "1.5rem",
						"heading-line-height": "1"
					}
				},
				{
					"breakpoint": "tablet",
					"variable": {
						"heading-font-size": "4.25rem"
					}
				}
			]
		},
		"headingColor": [
			{
				"variable": {
					"heading-color": "var(--global-colors-%value%)"
				}
			}
		]
	}
}

[goranalkovic-infinum]

You don't have width defined on your ::after element, so it's technically invisible (width is 0px). Also, the heading should have position: relative, so the ::after element has a reference to its position.

Keep, in Chrome dev tools, the variables on pseudoelements might look like they're not defined, but they still work.