chore: Add themeable tokens for button by at-susie · Pull Request #4395 · cloudscape-design/components

at-susie · 2026-03-30T12:24:53Z

Description

This PR adds independently themeable design tokens for the button component. Specifically it introduces dedicated color tokens for the link button variant to achieve parity with normal and primary variants, and adds a new spaceButtonVertical spacing token so button padding is themeable in both directions. No visual changes — all new tokens default to the previous values.

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-03-30T12:36:19Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.45%. Comparing base (59a24c5) to head (446feff).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4395   +/-   ##
=======================================
  Coverage   97.45%   97.45%           
=======================================
  Files         909      909           
  Lines       26638    26638           
  Branches     9615     9616    +1     
=======================================
  Hits        25959    25959           
+ Misses        673      636   -37     
- Partials        6       43   +37

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

pages/theming/themed-stroke-width.page.tsx

src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss

jkuelz · 2026-03-31T14:37:27Z

style-dictionary/visual-refresh/metadata/colors.ts

+  colorTextButtonInlineIconDefault: {
+    description: 'The default color of inline button icons.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonInlineIconDisabled: {
+    description: 'The color of inline button icons in disabled state.',
+    themeable: true,
+    public: true,
+  },
+  colorTextButtonInlineIconHover: {
+    description: 'The color of inline button icons in hover state.',
+    themeable: true,
+    public: true,
+  },


These weren't explicitly mentioned in the PR description, so just making sure they are supposed to be here.

These existing tokens currently defaults to colorTextLinkXxx, which are currently not themeable, but need to be individually themeable.

pages/theming/themed-stroke-width.page.tsx

jkuelz · 2026-03-31T14:55:31Z

style-dictionary/visual-refresh/metadata/spacing.ts

    public: true,
    themeable: false,
  },
  spaceFieldHorizontal: {


Do we need a vertical one for this as well since buttons and fields should be the same height?

Changing vertical padding doesn't change the height of inputs, since the height of inputs is specified using the token sizeVerticalInput, so we might need to make it themeable. I'll look into it.

Update:

I made the sizeVerticalInput token themeable

I introduced spaceControlVertical token to be able to individually theme

With the switch from 'inline-sizetomin-inline-sizechange, is thesizeVerticalInput` token redundant?

The sizeVerticalInput is still needed as min-block-size. We can also change from sizeVerticalInput to something like sizeMinVerticalInput to be explicit. WDYT?

pages/theming/themed-components.page.tsx

jkuelz · 2026-04-08T19:30:58Z

src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss

-  inset-block-start: 1px;
+  inset-block-start: -1px;
  inset-inline-end: -1px;
+  outline: solid 2px awsui.$color-background-layout-panel-content;


perhaps this deserves its own token for toolbar-background?

It can, but that feels a bit out of scope for this PR. Happy to revisit whenever needed.

pages/theming/themed-components.page.tsx

jkuelz · 2026-04-08T19:52:42Z

style-dictionary/visual-refresh/spacing.ts

  spaceAlertVertical: '{spaceFlashbarVertical}',
  spaceButtonFocusOutlineGutter: '4px',
  spaceButtonHorizontal: '{spaceScaledL}',
+  spaceButtonVertical: '{spaceScaledXxs}',


should this default to spaceControlVertical? Like spaceButtonVertical: '{spaceControlVertical}' since they should be the same most of the time?

I would rather keep it separated from spaceControlVertical as button can have different stroke-widths And depending on that they need to adjust vertical padding independently. So they are different.

jkuelz · 2026-04-08T20:01:18Z

src/internal/styles/forms/constants.scss

+$control-padding-vertical: awsui.$space-control-vertical;
 $control-padding-horizontal: awsui.$space-field-horizontal;


I know these are kinda inconsistent in general, but since the horizontal token uses "field" naming, should we keep it consistent? awsui.$space-field-vertical?

Updated to be space-field-vertical

jkuelz · 2026-04-08T20:09:22Z

src/input/styles.scss


  @include styles.font-body-m;
-  block-size: awsui.$size-vertical-input;
+  min-block-size: awsui.$size-vertical-input;


Doesn't this change make the field respect awsui.$space-control-vertical when themed? If so, do we need to expose both? I would also double check that this change doesn't have any adverse effects across browsers or on fields that have multiple lines of text (e.g. dropdowns with additional metadata). IIRC, this used to cause issues in Safari, but it could be fixed by now.

If we keep the block-size, it will not respect the awsui.$space-control-vertical when themed. That's why we need to make it min-block-size. This way, the min-block-size works as a guardrail while the awsui.$space-control-vertical is themeable.

But it makes sense to double-check different examples.

jkuelz · 2026-04-08T20:10:50Z

src/property-filter/styles.scss

  &-multiselect-wrapper {
    position: relative;
-    block-size: awsui.$size-vertical-input;
+    min-block-size: awsui.$size-vertical-input;


Same comment here about the cross-browser behavior and redundant tokens.

As mentioned in the above reply, we would rather need to make it min-block-size

jkuelz · 2026-04-08T20:13:48Z

style-dictionary/visual-refresh/metadata/spacing.ts

    public: true,
    themeable: false,
  },
  spaceFieldHorizontal: {


With the switch from 'inline-sizetomin-inline-sizechange, is thesizeVerticalInput` token redundant?

at-susie changed the title ~~Feat/theme button~~ chore: Add themeable tokens for button Mar 30, 2026

at-susie deployed to dev-pages-react18 March 30, 2026 12:36 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 March 30, 2026 12:36 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react18 March 30, 2026 14:11 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 March 30, 2026 14:11 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 March 30, 2026 16:07 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react18 March 30, 2026 16:07 — with GitHub Actions View deployment

at-susie marked this pull request as ready for review March 30, 2026 16:21

at-susie requested a review from a team as a code owner March 30, 2026 16:21

at-susie requested review from srungta08 and removed request for a team March 30, 2026 16:21

at-susie deployed to dev-pages-react18 March 30, 2026 18:58 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 March 30, 2026 18:58 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 March 31, 2026 06:59 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react18 March 31, 2026 06:59 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react18 March 31, 2026 10:54 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 March 31, 2026 10:54 — with GitHub Actions View deployment

at-susie requested review from jkuelz and removed request for srungta08 March 31, 2026 11:02

jkuelz reviewed Mar 31, 2026

View reviewed changes

at-susie deployed to dev-pages-react18 March 31, 2026 14:57 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 March 31, 2026 14:57 — with GitHub Actions View deployment

at-susie force-pushed the feat/theme-button branch from ddf6da3 to 08b615a Compare April 1, 2026 07:40

at-susie marked this pull request as draft April 1, 2026 07:51

at-susie added 5 commits April 7, 2026 17:37

chore: Add themeable color tokens for link button

9667e7b

chore: Add themeable button spacing tokens

dfd9706

chore: Update snapshot

f58fd4b

chore: Update snapshot

2153a33

chore: Add themeable color tokens for inline button icons

07c9642

at-susie deployed to dev-pages-react18 April 7, 2026 16:20 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 April 7, 2026 16:20 — with GitHub Actions View deployment

chore: Remove applayout example

65c2cfc

at-susie deployed to dev-pages-react18 April 7, 2026 19:27 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 April 7, 2026 19:27 — with GitHub Actions View deployment

chore: Remove unncecessary className

a49d687

at-susie deployed to dev-pages-react16 April 7, 2026 19:58 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react18 April 7, 2026 19:58 — with GitHub Actions View deployment

chore: Add deselectAriaLabel to multiselect examples

311d27c

at-susie deployed to dev-pages-react18 April 7, 2026 20:38 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 April 7, 2026 20:38 — with GitHub Actions View deployment

chore: Simplify example

237a90c

at-susie deployed to dev-pages-react18 April 8, 2026 06:01 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 April 8, 2026 06:01 — with GitHub Actions View deployment

chore: Add AppLayoutToolbar example

201c83e

at-susie deployed to dev-pages-react18 April 8, 2026 08:33 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 April 8, 2026 08:33 — with GitHub Actions View deployment

chore: Simplify component example

5e3ddbb

at-susie deployed to dev-pages-react16 April 8, 2026 09:16 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react18 April 8, 2026 09:16 — with GitHub Actions View deployment

chore: Add themed-components to a11y test skip list

446feff

at-susie deployed to dev-pages-react18 April 8, 2026 09:55 — with GitHub Actions View deployment

at-susie deployed to dev-pages-react16 April 8, 2026 09:55 — with GitHub Actions View deployment

at-susie marked this pull request as ready for review April 8, 2026 10:42

at-susie requested a review from jkuelz April 8, 2026 10:42

jkuelz reviewed Apr 8, 2026

View reviewed changes

at-susie requested a review from jkuelz April 8, 2026 20:18

at-susie added 3 commits April 9, 2026 11:44

chore: Rename spaceControlVertical to spaceFieldVertical

06480d9

chore: Update snapshot

97ee6f3

Merge branch 'main' into feat/theme-button

4658328

		$control-padding-vertical: awsui.$space-control-vertical;
		$control-padding-horizontal: awsui.$space-field-horizontal;

Conversation

at-susie commented Mar 30, 2026

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

at-susie Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

at-susie Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

at-susie Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

codecov bot commented Mar 30, 2026 •

edited

Loading

at-susie Apr 8, 2026 •

edited

Loading

at-susie Mar 31, 2026 •

edited

Loading

at-susie Apr 9, 2026 •

edited

Loading