Carbon Tab component does not use tokens listed on Carbon website and cannot be themed correctly

What package(s) are you using?

• [ x] carbon-components
• [ x] carbon-components-react

Detailed description

Describe in detail the issue you’re having. Is this a feature request (new component, new icon), a bug, or a general issue?

Is this issue related to a specific component? Yes, the Tabs component.

What did you expect to happen? What happened instead? What would you like to see changed? I expected that if I override the color for the tokens $ui-04 and $text-04 that the Tab component would update accordingly (according to the spec: https://www.carbondesignsystem.com/components/tabs/style/). Unfortunately, this documentation looks to be out of sync with the actual code and there doesn’t appear to be a relationship between the specified tokens and the component’s scss. I have screenshots below.

What browser are you working in? Chrome

What version of the Carbon Design System are you using? 10.5.1

What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Marketplace

Steps to reproduce the issue

It’s pretty straightforward to modify the theme at http://themes.carbondesignsystem.com/?nav=tabs and see that the new theme colors don’t apply to the Tabs.

1. Override $ui-04 or $text-04 with custom colors
2. Check the tab component and see the colors haven’t updated.
3. To confirm that theming does indeed work, you can override $focus or $interactive-01

Additional information

Ping me on Slack if there’s anything I can help debug.

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized. This will help us to better understand and address your issue.

[tw15egan]

Thanks for clarifying @laurenmrice. So looks like we’ll just need to update the color token for the hover text color on the website, and I’ll make these other updates here in the code 👍

[laurenmrice]

the text color on hover should be text-01 the hover border-bottom color should be ui-04 (Gray 50)

As for the other values they should have tokens: tab-underline-color should be ui-03 (Gray 20) tab-text-disabled should be disabled-02 tab-underline-disabled should be disabled-01