Themeing the Button Component

[masonkieth]

I can't seem to get the Button component to update it's background color with my custom theme (or any other method I've tried). My project was started from the React Tutorial, I followed the migration docs to update to V11 and cut out / commented out a lot of content to make troubleshooting more straightforward.

Basically, everything under the //button section of the app.scss file doesn't affect the app. But the text update does work inside the button component (and everywhere else). I changed all of the sections to a separate, obvious, color so that I could see what was changing and what wasn't.

The index.js is basic, . All styling is happening on App.js and App.scss. I also have a MainHeader.js without any additional styling. All of the components in the main header are accepting styling from app.scss too.

The contents of my app.scss file:

Condensed:

$my-theme: ('
// Button
button-primary: aqua,
button-primary-active: aqua,
button-primary-hover: aqua,
button-secondary: aqua, )

@use '@carbon/react/scss/themes' as *;
@use '@carbon/react/scss/theme' with ($theme: $my-theme);
@use '@carbon/react';

Full File:
app-scss.txt

And the Contents of my App.js:

App.txt

###Screenshot
Here is a screen shot of the page, with the button text showing up in pink, the background remaining IBM blue, and the rest of the components updating too:

[joaodfmota]

Seems like the button tokens was removed from the theme. 🤔

You can "fix" by adding it to the root.

:root {
  --cds-button-primary: aqua;
} 

[lidongyangLeo]

need add !important

:root {
  --cds-button-primary: aqua !important;
} 

but I think it's not correct.
I think the carbon need support to change it. and the doc wirte how to change component tokens
https://github.com/carbon-design-system/carbon/blob/main/packages/styles/docs/sass.md#components

@use '@carbon/styles/scss/components/button' with (
  $button-separator: #e4e4e4
);

but now use this has errors, I thinks it's bug.
#11853

[stanley-regnard]

Same problem here, our custom colors for the Button component are being reverted to their default values after applying a theme.

The "fix" works if we would use only one single color for all themes, in our case we need different colors depending on the theme, how could we achieve that?

[stanley-regnard]

Nevermind, found a solution in the meantime, for those interested:

// Vanilla carbon themes
[data-theme="carbon-light"] {
    color-scheme: light;
    @include theme($g10);
}
[data-theme="carbon-dark"] {
    color-scheme: dark;
    @include theme($g90);
}

// Custom themes
[data-theme="light"] {
    color-scheme: light;
    @include theme($light);
    --cds-button-primary: aqua;
    ...
}
[data-theme="dark"] {
    color-scheme: dark;
    @include theme($dark);
    --cds-button-primary: pink;
    ...
}

[tay1orjones]

Hey there! Thanks for your patience and sorry for this lack of clear docs. We've updated the documentation covering component tokens here

Copying an example from those docs here, this is what it would look like to configure button component tokens per theme:

@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/components/button/tokens' with (
  $button-primary: (
    fallback: #3f51b5,
    values: (
      (theme: themes.$white, value: #3f51b5),
      (theme: themes.$g10, value: #d55bff),
      (theme: themes.$g90, value: #d0b2ff),
      (theme: themes.$g100, value: #cfd2ff),
    ),
  )
);

@use '@carbon/react/scss/reset';
@use '@carbon/react/scss/components/button';

You can also change the component token definition for each theme for multiple tokens at the same time via the theme mixin:

@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme';
@use '@carbon/react/scss/components/button/tokens' as button-tokens;
@use '@carbon/themes/scss/utilities';
@use '@carbon/react';

// Set new token values. Follow this format, each theme has a specification
$button-token-overrides: (
  button-primary: (
    fallback: #3f51b5,
    values: (
      (
        theme: themes.$white,
        value: #3f51b5,
      ),
      (
        theme: themes.$g10,
        value: #3fb557,
      ),
      (
        theme: themes.$g90,
        value: #3f9ab5,
      ),
      (
        theme: themes.$g100,
        value: #ab3fb5,
      ),
    ),
  ),
);

// The new tokens must be merged into the existing tokens
$button-tokens: utilities.merge(
  button-tokens.$button-tokens,
  $button-token-overrides
);

// Add the new component tokens which will be included any time the theme mixin is called
@include theme.add-component-tokens($button-tokens);

// Ensure that the theme() mixin is called to set the new token values
// You can override the existing `.cds--{theme}` classes for each theme
:root {
  @include theme.theme();
}

.cds--g10 {
  @include theme.theme(themes.$g10);
}

.cds--g90 {
  @include theme.theme(themes.$g90);
}

.cds--g100 {
  @include theme.theme(themes.$g100);
}