Customized theme tokens getting reset by inline-notifications mixin

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Theme tokens that I have specified a custom color for are being reset by the inline-notifications mixin. For example, say I set the base theme to Gray 10 and set $focus to red (#ff0000). When the inline-notifications mixin sets the __action-button class it uses the carbon--theme mixin to borrow $hover-secondary from the Gray 100 theme. Upon doing so, the current theme gets reset to the base Gray 10 theme, overriding the custom value for $focus in the process. Every subsequent component import in styles.scss then uses the base theme’s $focus rather than my custom value.

Is this issue related to a specific component?

Related to inline-notification component (__action-button class).

What did you expect to happen? What happened instead? What would you like to see changed?

I expected all of the components to use the $focus value I defined. Instead, my $focus value was used in all the components leading up to inline-notification and then was reset. I would like the per-token customizations to persist.

What browser are you working in?

Chrome, although the issue is happening during the scss compilation.

What version of the Carbon Design System are you using?

10.4.1, and @carbon/themes 10.4.0

Steps to reproduce the issue

1. In the main scss file, import @carbon/themes/scss/theme (bug also present with themes package in vendors folder of carbon-components)
2. Set $carbon--theme to $carbon--theme--g10
3. Call carbon--theme mixin
4. Import carbon-components/scss/globals/scss/styles
5. Compile scss (I used debug statements to check the value of $focus at different stages)

[shixiedesign]

Values for $inverse-hover-ui token:

White	Gray 10	Gray 90	Gray 100
Gray80 hover #4C4C4C	Gray80 hover #4C4C4C	Gray 10 hover #e5e5e5	Gray 10 hover #e5e5e5

I’ve created an $inverse-hover-ui token with what I think are working values. It needs a bit more thinking so we are not going to publish to the site right now. FYI @aagonzales Ideally we can fix inline theming to work correctly so we don’t have to create so many tokens with repeated values. We will see what @mattrosno thinks when he gets to give this a look.

[tw15egan]

I agree I was under the assumption that those theme calls were scoped and could be used as “inline theming”. Adding a temporary theme variable for this situation will fix this, but it seems like there is a bug with these theme calls that need to be addressed as well.