Carbon Design CUSTOM tokens ERROR, Unable to find token!

[DenisCor]

https://github.com/carbon-design-system/carbon/blob/main/examples/custom-theme/src/index.scss followed this example to the teeth plus few others and nothing seem to work.

@use '@carbon/react/scss/themes' as *;
@use '@carbon/react/scss/theme' with (
  $theme: (text-primary: #a235aa, // <-- text-primary is a Carbon token
   custom-token: #3f51b5) // <-- my custom token I want to use 
);

say I want to use these tokens in other scss files, I add @use '@carbon/react/scss/theme'; to the top

Example:

 .some-class {
color: theme.$text-primary;  // <-- all carbon default tokens work great, no problem here
}

BUT if I want to use my custom-token I get an error

Example:

.some-class {
color: theme.get('custom-token');  // <-- ERROR: 
}

Module build failed (from ./node_modules.. etc etc)
SassError: "unable to find token: custom-token in current $theme.

[tay1orjones]

@DenisCor Are you bringing in the second file via @use? Here's an example of it working.

If you're importing the second file via javascript, sass will be executed against the files individually and they will not share an execution context.

[tay1orjones]

Im suspecting that in your example you used vite.

Yes. What are you using? If webpack, what version of webpack (or react-scripts), sass, and sass-loader are you using?

[pakeecbala]

I have the same issue. Im using Next.js 13.4.8 and sass 1.51. Any solution?

[tay1orjones]

Could you provide a link to a reproduction? It's hard to know what's going wrong without seeing it firsthand

[pakeecbala]

Sure, here you go :)

https://stackblitz.com/edit/stackblitz-starters-xwnxzu?file=app%2Fabout%2Fabout.module.scss

[DenisCor]

use this instead - @use '@carbon/styles/scss/utilities/custom-property' as theme; then in your styles - background-color: theme.get-var('your-custom-token-name');