I want to change colorBackgroundButtonNormal

[s-uchikawa]

Why can I only change the primary button color?

"color-background-button-primary" can be set, but "color-background-button-normal" cannot be set

const theme = {
  tokens: {},
  contexts: {
    header: {
      tokens: {
        colorBackgroundLayoutMain: {light:"#ffffff"},
        colorBackgroundButtonNormalDefault: {light:"#ffffff"}, // <- not working
      }, 
    }
  }
};

[YueyingLu]

Hi @s-uchikawa ,
thanks for reaching out. Could you share why you want to change background color of a normal button? Why not use primary button in this case?

[s-uchikawa]

I refer to demo samples and patterns

• https://cloudscape.design/examples/react/table.html
• https://cloudscape.design/patterns/resource-management/view/table-view/

The create button is primary but the delete button is normal

[YueyingLu]

I see. Could you also share your use case to change the background colour of the delete button? I would like to know this information in order to better understand and support the needs.

[s-uchikawa]

For example, I would like to change the colorBackgroundLayoutMain to a color closer to the product's brand color.

Here, for example, let's set the header's colorBackgroundLayoutMain to '#b5d6f4'.
In that case you can't change the color-background-button-normal from black and it's unbalanced.

[YueyingLu]

Thanks for sharing. I will bring it to our team and post here if we have any updates.

[fralongo]

@s-uchikawa We have just published 4 additional design tokens that you can use to theme normal buttons:

• colorBackgroundButtonNormalActive,
• colorBackgroundButtonNormalDefault,
• colorBackgroundButtonNormalDisabled,
• colorBackgroundButtonNormalHover.

They are available starting from version 3.0.303