Cloudscape Theming - Visual Context Question

[jwwheeleriv]

I have created a custom cloudscape theme and I am updating the visual context for the header. I changed the colorBackgroundLayoutMain to the appropriate color I wanted and that worked great, however, I cannot seem to change the color of the app layout toggle buttons for navigation, split, and tool panel, nor am I able to change the Header Action button backgrounds. When I look at the css I get the sense that it is using colorBackgroundButtonNormal[Default/Active/Hover] which is not a valid/theme token to change. I tried changing colorBackgroundButtonPrimary[Default/Active/Hover] to no avail. I also looked at the TypeOverride Interface and couldn't find one that looked right either ... Any thoughts on what I am missing would be appreciated.

Notice in the image below the darker colored buttons. Note that if I set the buttons to a variant of primary I can style them in the theme file under context and header, however, cannot style a button with a variant of normal. Thinking this might be a bug.

[gethinwebster]

This isn't currently possible, but we're looking into how/whether we can expose it. Will update here with any progress.

[hiimnhan]

I got same issue here. I feel like everything goes with [Default/Active/Hover] is not working outside of the visual context

[fralongo]

@jwwheeleriv, @hiimnhan 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.

To theme the app layout toggle buttons, you can use tokens color[Text|Background]LayoutToggle[State], available starting from version 3.0.288.