From 9fc392ded0709c63abf830755d46e3081f26de29 Mon Sep 17 00:00:00 2001 From: at-susie Date: Tue, 19 May 2026 16:59:22 +0200 Subject: [PATCH 1/3] chore: Add token for kvp value --- src/key-value-pairs/styles.scss | 1 + style-dictionary/utils/token-names.ts | 1 + style-dictionary/visual-refresh/colors.ts | 1 + style-dictionary/visual-refresh/metadata/colors.ts | 5 +++++ 4 files changed, 8 insertions(+) diff --git a/src/key-value-pairs/styles.scss b/src/key-value-pairs/styles.scss index dc0c91140c..ed6ea96394 100644 --- a/src/key-value-pairs/styles.scss +++ b/src/key-value-pairs/styles.scss @@ -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 { diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 5f0a74ba41..925a190d4e 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -753,6 +753,7 @@ export type ColorsTokenName = | 'colorTextInteractiveInvertedHover' | 'colorTextInverted' | 'colorTextLabel' + | 'colorTextKeyValuePairsValue' | 'colorTextLabelGenAi' | 'colorTextLayoutToggle' | 'colorTextLayoutToggleActive' diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index f9e8a45150..cc54f6c456 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -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}' }, diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 4ae45906cc..be6dd05d04 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -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: true, + themeable: true, + }, colorTextLinkDefault: { description: 'The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.', From 349f0b4b37596bd07e9bbce4949abf4bb10adeb9 Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 20 May 2026 11:03:43 +0200 Subject: [PATCH 2/3] chore: Mark colorTextKeyValuePairsValue token as internal --- style-dictionary/visual-refresh/metadata/colors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index be6dd05d04..0bb55e0ef4 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -865,7 +865,7 @@ const metadata: StyleDictionary.MetadataIndex = { }, colorTextKeyValuePairsValue: { description: 'The text color of the value in key-value pairs.', - public: true, + public: false, themeable: true, }, colorTextLinkDefault: { From 0932fdb3cbd8fed1da3f366acae9313e916bb080 Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 20 May 2026 11:27:22 +0200 Subject: [PATCH 3/3] chore: Update integration test snapshot --- src/__integ__/__snapshots__/themes.test.ts.snap | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index d369271406..613edf6873 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -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", @@ -1419,6 +1420,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", @@ -2275,6 +2277,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", @@ -3131,6 +3134,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", @@ -3987,6 +3991,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", @@ -4843,6 +4848,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", @@ -5699,6 +5705,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", @@ -6555,6 +6562,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",