[Bug]: On a custom theme, the buttons and tags tokens gets override by the default theme

[mgaseta]

Package

@carbon/react

Browser

Chrome

Package version

1.14

React version

18.2.0

Description

Hello folks!

I've created a new custom theme for the application I'm working on, I override the tokens values with the colors of the system and everything is being applied as expected, except for the tags and buttons tokens, which remains with the colors of the "default" carbon theme.

Here is my code:

@use './theme/light-theme.scss' as light;
@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme' with (
  $fallback: themes.$white,
  $theme: light.$light-theme
);

@use '@carbon/react';

@use '@carbon/grid';

// Emit the flex-grid styles
@include grid.flex-grid();

:root {
  @include theme.theme();
}

Where the "light-theme.scss" is where I override all the necessary tokens:

@use './colors.scss' as colors;
$light-theme: (
  /////////////////////////////
  // Background Tokens
  /////////////////////////////
  background: colors.$white,
  background-active: rgba(colors.$gray-50, 0.5),
  background-hover: rgba(colors.$gray-50, 0.12),
  .
  .
  .
  /////////////////////////////
  // Button Tokens
  /////////////////////////////
  button-primary: colors.$blue-60,
  button-primary-hover: colors.$blue-65,
  button-primary-active: colors.$blue-80,
  button-secondary: colors.$gray-80,
  button-secondary-hover: colors.$gray-75,
  button-secondary-active: colors.$gray-70,
  button-tertiary: colors.$blue-70,
  button-tertiary-hover: colors.$blue-75,
  button-tertiary-active: colors.$blue-80,
  button-danger-primary: colors.$red-60,
  button-danger-secondary: colors.$red-70,
  button-danger-hover: colors.$red-70,
  button-danger-active: colors.$red-80,
  button-separator: colors.$gray-20,
  button-disabled: colors.$gray-30,

  /////////////////////////////
  // Tag Tokens
  /////////////////////////////
  tag-background-blue: colors.$blue-10,
  tag-color-blue: colors.$blue-80,
  tag-hover-blue: colors.$blue-15,
  tag-background-cyan: colors.$cyan-20,
  tag-color-cyan: colors.$cyan-100,
  tag-hover-cyan: colors.$cyan-30,
  tag-background-green: colors.$green-10,
  tag-color-green: colors.$green-90,
  tag-hover-green: colors.$green-20,
  tag-background-magenta: colors.$pink-10,
  tag-color-magenta: colors.$pink-80,
  tag-hover-magenta: colors.$pink-20,
  tag-background-purple: colors.$violet-10,
  tag-color-purple: colors.$violet-80,
  tag-hover-purple: colors.$violet-20,
  tag-background-red: colors.$red-20,
  tag-color-red: colors.$red-80,
  tag-hover-red: colors.$red-30,
  tag-background-teal: colors.$teal-20,
  tag-color-teal: colors.$teal-90,
  tag-hover-teal: colors.$teal-30,
  tag-background-gray: colors.$gray-20,
  tag-color-gray: colors.$gray-100,
  tag-hover-gray: colors.$gray-25,
);

And colors.scss is where I define the variable for each color on our theme.

I've tried a workaround defining the tokens directly on the component. like this:

@use '@carbon/react/scss/components/button/tokens' as button-tokens with (
    $button-primary: colors.$blue-60,
    $button-primary-hover: colors.$blue-65,
    $button-primary-active: colors.$blue-80,
    $button-secondary: colors.$gray-80,
    $button-secondary-hover: colors.$gray-75,
    $button-secondary-active: colors.$gray-70,
    $button-tertiary: colors.$blue-70,
    $button-tertiary-hover: colors.$blue-75,
    $button-tertiary-active: colors.$blue-80,
  );

But I got the following error:

Failed to compile.

SassError: $map: #005CB8 is not a map.
   ╷
Failed to compile.

SassError: $map: #005CB8 is not a map.
   ╷
66 │   @each $theme-value in map.get($token-map, values) {
   │                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@carbon\styles\scss\utilities\_component-tokens.scss 66:25      get-inverse-theme-values()
  node_modules\@carbon\styles\scss\components\notification\_tokens.scss 131:5  @use
  node_modules\@carbon\styles\scss\_zone.scss 18:1                             @forward
  node_modules\@carbon\styles\index.scss 20:1                                  @forward
  node_modules\@carbon\react\index.scss 9:1                                    @use
  src\custom.scss 21:1                                                         root stylesheet

Just a detail, the #005CB8 is the color from the tertiary button (colors.$blue-70).

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Reproduction/example

https://stackblitz.com/edit/github-x1lfjl?file=src/index.scss

Steps to reproduce

1. Create a custom theme, overriding the buttons and tag tokens
2. Use @carbon/react/scss/theme to apply the new theme
3. Include the new theme on root
4. Look at the button or tag component and new color is not applied

Code of Conduct

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

[mgaseta]

I found an similar issue that helped me get unblocked ( #11668 ) and the documentation related to it, I'll close this issue.