Open claireramming opened 1 year ago
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!
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.
@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'
Looking at the code, you may be able to pull it directly from the
@carbon/theme
package if you are only using thathttps://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>
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:![image](https://user-images.githubusercontent.com/30480096/202574244-a905b175-c86c-4ada-a4b0-3d8dc1fa80e5.png)
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