carbon-design-system / carbon-design-kit

A versioned, comprehensive kit of the Carbon Design System visual assets (components, icons, pictograms, text styles, color styles, grid templates).
Apache License 2.0
1.07k stars 153 forks source link

Discrepancy between disabled tags code <-> figma #798

Open janhassel opened 7 months ago

janhassel commented 7 months ago

Detailed description

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.

Tag

Is this issue being filed based on a discrepancy between the website/code and the kit? If so what is the inconsistency?

When the Tag component is set to use the disabled state, the coded component uses $layer as the background token whereas Figma uses tag-background-disabled. This leads to the problem where a disabled tag on a layer in Figma will appear as if it wouldn't have a background at all.

Additional information

Left side is the current Figma component, right side is the expected design (according to the current code implementation).

image

laurenmrice commented 5 months ago

It looks like the $tag-background-disabled variable is using the correct color tokens per theme, which is $layer, however it is not changing to the proper layer token in the set when placed on a layer container. Need to investigate further how to make it contextual.