2

I'm trying to use carbon design system V11 (https://www.npmjs.com/package/@carbon/react) with React (app started using create-react-app) and I am unable to figure out how to customize separate tokens for global theme overrides. So far in App.scss I'm defining the global theme with

@use '@carbon/react/scss/themes';

@use '@carbon/react/scss/theme' with (
  $theme: themes.$g100,
);

@use '@carbon/react';

This works, the theme is set to g100.

From here I'd like to change $interactive-01 or $button-primary token so that it applies to the whole theme. It's completely unclear from documentation how to do that, although documentation here specifies that per token overrides are possible (https://v11.carbondesignsystem.com/guidelines/themes/overview/#customizing-a-theme) I'm assuming I am having trouble because documentation is not React specific.

If someone ran into this and knows the answer, any help would be appreciated!

Thanks.

user19746536
  • 21
  • 2

1 Answers1

0

See this example here / docs

@use '@carbon/react/scss/components/button/tokens' as button-tokens with (
  $button-primary: #f00
);
deskoh
  • 31
  • 2