[Bug]: Component Tag colors does not have expected hex value

[rohitrajmishra]

Package

@carbon/themes

Browser

No response

Package version

v11.39.0

React version

v16.14.0

Description

As per color guide/documentation

https://carbondesignsystem.com/elements/color/tokens/#tag

the color for token $tag-color-magenta we expect color magenta70 -- #9f1853,

But in practice the resulting color is magenta80 -- #740937.

Similar is the case with other tag colors also. E.g.

$tag-color-purple,
$tag-color-blue,

...
and so on

This results in darker shade of colors applied to app then design intended.

Reproduction/example

https://stackblitz.com/edit/github-sxced5-yboywq?file=src%2Fmain.jsx

Steps to reproduce

1. Setup Scss/Css code snippet to reproduce the issue,

@use '@carbon/styles/scss/components/tag';

<your-css-selector> {

color: tag.$tag-color-magenta;

}

2. Compare resulting color(magenta80 with what is mentioned in white/g10 theme(magenta70) https://carbondesignsystem.com/elements/color/tokens/#tag

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[rohitrajmishra]

[rohitrajmishra]

We tried to investigate a bit, It seems below is suspected code in repo,

https://github.com/carbon-design-system/carbon/blob/7e6ec8e89df9caf3f27e167cdf8be42783e93682/packages/themes/src/component-tokens/tag/tokens.js#L105

Code in this file mentions magenta80and 80 shade for other colors for white/g10 theme, which is different from documentation which mentions magenta70 or 70 shade for such color tokens.

[aagonzales]

Yes, I am seeing the same thing. I've found this PR https://github.com/carbon-design-system/carbon/pull/10287 where we updated the dark theme tag tokens to the 70 scale but not the light theme ones. I'm trying to figure out if we've since decided to update the light values as well and which assets have the bug.

Update: The code is wrong, the token $tag-color-magenta (used for the text) in the light theme tags should be using the 70 scale. I see this in design specs as far back as v10. Update needed across tag suite color. Design kit and website do not need edits

tag token	White theme	Gray 10	Gray 90	Gray 100
$tag-color-magenta	Magenta ~80~ 70	Magenta ~80~ 70	Magenta 20	Magenta 20