[Bug]: button hover tokens not working

[claireramming]

Package

@carbon/themes

Browser

Chrome

Package version

11.12.0

React version

svelte3

Description

I'm trying to use the $button-primary-hover token to style the hover color of something and I'm getting the following error:

This happens for every button-[kind]-hover token (except ghost since that doesn't have a hover token). I can clearly see there are values there but for some reason it's not keying into my set theme like it's doing for every other token I've used (in the same component, $background, $text-primary, and $text-secondary work just fine.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Reproduction/example

n/a

Steps to reproduce

Try to use $button-primary-hover token for any color-based css variable.

Code of Conduct

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

[tw15egan]

I believe it's because Button Tag and Notification have their own component tokens. You'll need to pull those in as well:

@use '@carbon/styles/scss/components/button/tokens';

There is a little bit more info here (scroll down a bit to component tokens). Hope that helps!

[claireramming]

Aha, it looks like I need to also install @carbon/styles and then put that @use statement above my @use "@carbon/themes"; statement (below causes an error).

We're in business! Thanks @tw15egan

I'd like to request that the documentation be updated so that it is clear for non-reaect code-bases that other imports other than carbon/themes is needed for some of these other tokens. Maybe link to that handy section of the repo in this part of the docs, with an example? I've been visiting this page a lot to figure out which tokens to use, so it may be good to have some mention of the imports needed there too.

[tw15egan]

@claireramming definitely; thanks for pointing out some areas where documentation could be improved!

Looking at the code, you may be able to pull it directly from the @carbon/theme package if you are only using that

https://github.com/carbon-design-system/carbon/blob/main/packages/themes/scss/_component-tokens.scss

@use '@carbon/themes/scss/component-tokens'

[claireramming]

Looking at the code, you may be able to pull it directly from the @carbon/theme package if you are only using that

https://github.com/carbon-design-system/carbon/blob/main/packages/themes/scss/_component-tokens.scss

@use '@carbon/themes/scss/component-tokens'

If I try that, I'm getting the same error as before:

unless I'm missing some token directive that I need to get it to successfully key into the theme? In the error I can see it has the colors there, it just doesn't seem to know which theme I want.

This is my relevant code block:

<style lang='scss'>
    @use '@carbon/themes/scss/component-tokens';

    .some-class:hover {
            background-color: component-tokens.$button-secondary-hover;
        }
</style>