Skip to content

chore: Add themeable text color token for the key-value pairs value #4537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
at-susie wants to merge 6 commits into from
Open

chore: Add themeable text color token for the key-value pairs value #4537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9fc392d
chore: Add token for kvp value
at-susie May 19, 2026
349f0b4
chore: Mark colorTextKeyValuePairsValue token as internal
at-susie May 20, 2026
0932fdb
chore: Update integration test snapshot
at-susie May 20, 2026
37119c3
Merge branch 'main' into feat/add-kvp-token
at-susie May 20, 2026
35a9f41
Merge branch 'main' into feat/add-kvp-token
at-susie May 20, 2026
32f7172
Merge branch 'main' into feat/add-kvp-token
at-susie May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/__integ__/__snapshots__/themes.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,6 +563,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
"color-text-interactive-inverted-default": "#d5dbdb",
"color-text-interactive-inverted-hover": "#fafafa",
"color-text-inverted": "#ffffff",
"color-text-key-value-pairs-value": "#16191f",
"color-text-label": "#545b64",
"color-text-label-gen-ai": "#7300e5",
"color-text-layout-toggle": "#545b64",
Expand Down Expand Up @@ -1424,6 +1425,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
"color-text-interactive-inverted-default": "#d5dbdb",
"color-text-interactive-inverted-hover": "#fafafa",
"color-text-inverted": "#16191f",
"color-text-key-value-pairs-value": "#d5dbdb",
"color-text-label": "#95a5a6",
"color-text-label-gen-ai": "#bf80ff",
"color-text-layout-toggle": "#d5dbdb",
Expand Down Expand Up @@ -2285,6 +2287,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
"color-text-interactive-inverted-default": "#d5dbdb",
"color-text-interactive-inverted-hover": "#fafafa",
"color-text-inverted": "#ffffff",
"color-text-key-value-pairs-value": "#16191f",
"color-text-label": "#545b64",
"color-text-label-gen-ai": "#7300e5",
"color-text-layout-toggle": "#545b64",
Expand Down Expand Up @@ -3146,6 +3149,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
"color-text-interactive-inverted-default": "#d5dbdb",
"color-text-interactive-inverted-hover": "#fafafa",
"color-text-inverted": "#ffffff",
"color-text-key-value-pairs-value": "#16191f",
"color-text-label": "#545b64",
"color-text-label-gen-ai": "#7300e5",
"color-text-layout-toggle": "#545b64",
Expand Down Expand Up @@ -4007,6 +4011,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
"color-text-interactive-inverted-default": "#dedee3",
"color-text-interactive-inverted-hover": "#f9f9fa",
"color-text-inverted": "#ffffff",
"color-text-key-value-pairs-value": "#0f141a",
"color-text-label": "#0f141a",
"color-text-label-gen-ai": "#7300e5",
"color-text-layout-toggle": "#ffffff",
Expand Down Expand Up @@ -4868,6 +4873,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-interactive-inverted-default": "#dedee3",
"color-text-interactive-inverted-hover": "#f9f9fa",
"color-text-inverted": "#ffffff",
"color-text-key-value-pairs-value": "#0f141a",
"color-text-label": "#0f141a",
"color-text-label-gen-ai": "#7300e5",
"color-text-layout-toggle": "#ffffff",
Expand Down Expand Up @@ -5729,6 +5735,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-interactive-inverted-default": "#dedee3",
"color-text-interactive-inverted-hover": "#f9f9fa",
"color-text-inverted": "#0f141a",
"color-text-key-value-pairs-value": "#c6c6cd",
"color-text-label": "#dedee3",
"color-text-label-gen-ai": "#bf80ff",
"color-text-layout-toggle": "#ffffff",
Expand Down Expand Up @@ -6590,6 +6597,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-interactive-inverted-default": "#dedee3",
"color-text-interactive-inverted-hover": "#f9f9fa",
"color-text-inverted": "#0f141a",
"color-text-key-value-pairs-value": "#c6c6cd",
"color-text-label": "#dedee3",
"color-text-label-gen-ai": "#bf80ff",
"color-text-layout-toggle": "#ffffff",
Expand Down
1 change: 1 addition & 0 deletions src/key-value-pairs/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
margin-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
color: awsui.$color-text-key-value-pairs-value;
}

.info {
Expand Down
1 change: 1 addition & 0 deletions style-dictionary/utils/token-names.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -753,6 +753,7 @@ export type ColorsTokenName =
| 'colorTextInteractiveInvertedHover'
| 'colorTextInverted'
| 'colorTextLabel'
| 'colorTextKeyValuePairsValue'
| 'colorTextLabelGenAi'
| 'colorTextLayoutToggle'
| 'colorTextLayoutToggleActive'
Expand Down
1 change: 1 addition & 0 deletions style-dictionary/visual-refresh/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorTextInteractiveInvertedHover: '{colorNeutral100}',
colorTextInverted: { light: '{colorWhite}', dark: '{colorNeutral950}' },
colorTextLabel: '{colorTextFormLabel}',
colorTextKeyValuePairsValue: '{colorTextBodyDefault}',
colorTextLayoutToggle: '{colorWhite}',
colorTextLayoutToggleActive: { light: '{colorWhite}', dark: '{colorNeutral850}' },
colorTextLayoutToggleHover: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
Expand Down
5 changes: 5 additions & 0 deletions style-dictionary/visual-refresh/metadata/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -863,6 +863,11 @@ const metadata: StyleDictionary.MetadataIndex = {
public: true,
themeable: true,
},
colorTextKeyValuePairsValue: {
description: 'The text color of the value in key-value pairs.',
public: false,
themeable: true,
},
colorTextLinkDefault: {
description:
'The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.',
Expand Down
Loading