From fcc2693515d29fcae21edcd7b5394a8a6d1221d5 Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Mon, 18 May 2026 21:18:51 +0200 Subject: [PATCH 1/4] feat: introduce status indicator tokens --- src/status-indicator/styles.scss | 22 ++++++++++++++++ style-dictionary/utils/token-names.ts | 9 ++++++- style-dictionary/visual-refresh/borders.ts | 1 + style-dictionary/visual-refresh/colors.ts | 5 ++++ .../visual-refresh/metadata/borders.ts | 5 ++++ .../visual-refresh/metadata/colors.ts | 26 +++++++++++++++++++ .../visual-refresh/metadata/spacing.ts | 6 +++++ style-dictionary/visual-refresh/spacing.ts | 1 + 8 files changed, 74 insertions(+), 1 deletion(-) diff --git a/src/status-indicator/styles.scss b/src/status-indicator/styles.scss index 644d9ea84f..2afb09c111 100644 --- a/src/status-indicator/styles.scss +++ b/src/status-indicator/styles.scss @@ -29,6 +29,18 @@ $_color-overrides: ( 'yellow': awsui.$color-text-status-warning, ); +$_status-backgrounds: ( + 'error': awsui.$color-background-status-indicator-error, + 'warning': awsui.$color-background-status-indicator-warning, + 'success': awsui.$color-background-status-indicator-success, + 'info': awsui.$color-background-status-indicator-info, + 'stopped': awsui.$color-background-status-indicator-neutral, + 'pending': awsui.$color-background-status-indicator-neutral, + 'in-progress': awsui.$color-background-status-indicator-neutral, + 'loading': awsui.$color-background-status-indicator-neutral, + 'not-started': awsui.$color-background-status-indicator-neutral, +); + .root { @include styles.default-text-style; @each $status in map.keys($_status-colors) { @@ -41,9 +53,19 @@ $_color-overrides: ( color: #{map.get($_color-overrides, $color)}; } } + @each $status in map.keys($_status-backgrounds) { + &.status-#{$status} > .container { + background: #{map.get($_status-backgrounds, $status)}; + } + } } .container { + padding-inline: awsui.$space-status-indicator-padding-inline; + border-start-start-radius: awsui.$border-radius-status-indicator; + border-start-end-radius: awsui.$border-radius-status-indicator; + border-end-start-radius: awsui.$border-radius-status-indicator; + border-end-end-radius: awsui.$border-radius-status-indicator; &.display-inline { @include styles.text-wrapping; display: inline; diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 3c244c7c0c..8e390ecb2b 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -741,6 +741,11 @@ export type ColorsTokenName = | 'colorTextHomeHeaderSecondary' | 'colorTextIconCaret' | 'colorTextIconSubtle' + | 'colorBackgroundStatusIndicatorError' + | 'colorBackgroundStatusIndicatorWarning' + | 'colorBackgroundStatusIndicatorSuccess' + | 'colorBackgroundStatusIndicatorInfo' + | 'colorBackgroundStatusIndicatorNeutral' | 'colorTextInputDisabled' | 'colorTextInputPlaceholder' | 'colorTextInputPlaceholderDisabled' @@ -900,6 +905,7 @@ export type BordersTokenName = | 'borderPanelTopWidth' | 'borderRadiusAlert' | 'borderRadiusBadge' + | 'borderRadiusStatusIndicator' | 'borderRadiusButton' | 'borderRadiusCalendarDayFocusRing' | 'borderRadiusCardDefault' @@ -1121,7 +1127,8 @@ export type SpacingTokenName = | 'spaceActionCardDescriptionPaddingTop' | 'spaceActionCardContentPaddingTop' | 'spaceOptionPaddingVertical' - | 'spaceOptionPaddingHorizontal'; + | 'spaceOptionPaddingHorizontal' + | 'spaceStatusIndicatorPaddingInline'; export type ShadowsTokenName = | 'shadowCard' | 'shadowItemCard' diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index fb7cb43c82..50013fe3de 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -21,6 +21,7 @@ export const tokens: StyleDictionary.BordersDictionary = { borderPanelTopWidth: '1px', borderRadiusAlert: '{borderRadiusFlashbar}', borderRadiusBadge: '4px', + borderRadiusStatusIndicator: '{borderRadiusBadge}', borderRadiusButton: '20px', borderRadiusCalendarDayFocusRing: '3px', borderRadiusCodeEditor: '{borderRadiusInput}', diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index c6e5c2c6f7..dcec434b92 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -118,6 +118,11 @@ const tokens: StyleDictionary.ColorsDictionary = { colorTextAvatar: '{colorWhite}', colorBackgroundLoadingBarGenAi: 'linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)', + colorBackgroundStatusIndicatorError: 'transparent', + colorBackgroundStatusIndicatorWarning: 'transparent', + colorBackgroundStatusIndicatorSuccess: 'transparent', + colorBackgroundStatusIndicatorInfo: 'transparent', + colorBackgroundStatusIndicatorNeutral: 'transparent', colorBackgroundChatBubbleOutgoing: 'transparent', colorBackgroundChatBubbleIncoming: { light: '{colorNeutral150}', dark: '{colorNeutral950}' }, colorTextChatBubbleOutgoing: '{colorTextBodyDefault}', diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index f3d95c3a07..c4f7121faa 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -27,6 +27,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + borderRadiusStatusIndicator: { + description: 'The border radius of status indicators.', + public: false, + themeable: true, + }, borderRadiusButton: { description: "The border radius of buttons and segmented control's segments.", public: true, diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 8de8172788..b65e4e49b0 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -1063,6 +1063,32 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBackgroundStatusIndicatorError: { + description: 'The background color of the status indicator in error state.', + public: false, + themeable: true, + }, + colorBackgroundStatusIndicatorWarning: { + description: 'The background color of the status indicator in warning state.', + public: false, + themeable: true, + }, + colorBackgroundStatusIndicatorSuccess: { + description: 'The background color of the status indicator in success state.', + public: false, + themeable: true, + }, + colorBackgroundStatusIndicatorInfo: { + description: 'The background color of the status indicator in info state.', + public: false, + themeable: true, + }, + colorBackgroundStatusIndicatorNeutral: { + description: + 'The background color of the status indicator in neutral state. For example: stopped, pending, in-progress, loading, and not-started statuses.', + public: false, + themeable: true, + }, }; export default metadata; diff --git a/style-dictionary/visual-refresh/metadata/spacing.ts b/style-dictionary/visual-refresh/metadata/spacing.ts index 5af406f891..823ece6e27 100644 --- a/style-dictionary/visual-refresh/metadata/spacing.ts +++ b/style-dictionary/visual-refresh/metadata/spacing.ts @@ -204,6 +204,12 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: false, }, + spaceStatusIndicatorPaddingInline: { + description: + 'The inline padding inside the status indicator container. Applied when the status indicator background is themed.', + public: false, + themeable: true, + }, }; export default metadata; diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts index ba27185bbb..d6ca09f4c0 100644 --- a/style-dictionary/visual-refresh/spacing.ts +++ b/style-dictionary/visual-refresh/spacing.ts @@ -84,6 +84,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceOptionPaddingVertical: '{spaceXxs}', spaceOptionPaddingHorizontal: '{spaceL}', + spaceStatusIndicatorPaddingInline: '{spaceNone}', spaceScaled2xNone: '{spaceNone}', spaceScaled2xXxxs: { comfortable: '{spaceXxxs}', compact: '{spaceNone}' }, From 538631048d1aed0b8c27be097847eb7ade8ea6c4 Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Mon, 18 May 2026 21:46:39 +0200 Subject: [PATCH 2/4] chore: update jest snapshots --- .../__snapshots__/themes.test.ts.snap | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 15a12f5214..af0bd2ff81 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -43,6 +43,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-skeleton": "8px", + "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", "border-radius-token": "2px", @@ -176,6 +177,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-slider-range-warning-default": "#906806", "color-background-slider-track-default": "#879596", "color-background-status-error": "#fdf3f1", + "color-background-status-indicator-error": "transparent", + "color-background-status-indicator-info": "transparent", + "color-background-status-indicator-neutral": "transparent", + "color-background-status-indicator-success": "transparent", + "color-background-status-indicator-warning": "transparent", "color-background-status-info": "#f1faff", "color-background-status-success": "#f2f8f0", "color-background-status-warning": "#fffef0", @@ -838,6 +844,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", + "space-status-indicator-padding-inline": "0px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "8px", "space-table-footer-horizontal": "20px", @@ -904,6 +911,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-skeleton": "8px", + "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", "border-radius-token": "2px", @@ -1037,6 +1045,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-slider-range-warning-default": "#fbd332", "color-background-slider-track-default": "#687078", "color-background-status-error": "#270a11", + "color-background-status-indicator-error": "transparent", + "color-background-status-indicator-info": "transparent", + "color-background-status-indicator-neutral": "transparent", + "color-background-status-indicator-success": "transparent", + "color-background-status-indicator-warning": "transparent", "color-background-status-info": "#12293b", "color-background-status-success": "#172211", "color-background-status-warning": "#191100", @@ -1699,6 +1712,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", + "space-status-indicator-padding-inline": "0px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "12px", "space-table-footer-horizontal": "20px", @@ -1765,6 +1779,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-skeleton": "8px", + "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", "border-radius-token": "2px", @@ -1898,6 +1913,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-slider-range-warning-default": "#906806", "color-background-slider-track-default": "#879596", "color-background-status-error": "#fdf3f1", + "color-background-status-indicator-error": "transparent", + "color-background-status-indicator-info": "transparent", + "color-background-status-indicator-neutral": "transparent", + "color-background-status-indicator-success": "transparent", + "color-background-status-indicator-warning": "transparent", "color-background-status-info": "#f1faff", "color-background-status-success": "#f2f8f0", "color-background-status-warning": "#fffef0", @@ -2560,6 +2580,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", + "space-status-indicator-padding-inline": "0px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "12px", "space-table-footer-horizontal": "20px", @@ -2626,6 +2647,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-skeleton": "8px", + "border-radius-status-indicator": "16px", "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", "border-radius-token": "2px", @@ -2759,6 +2781,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-slider-range-warning-default": "#906806", "color-background-slider-track-default": "#879596", "color-background-status-error": "#fdf3f1", + "color-background-status-indicator-error": "transparent", + "color-background-status-indicator-info": "transparent", + "color-background-status-indicator-neutral": "transparent", + "color-background-status-indicator-success": "transparent", + "color-background-status-indicator-warning": "transparent", "color-background-status-info": "#f1faff", "color-background-status-success": "#f2f8f0", "color-background-status-warning": "#fffef0", @@ -3421,6 +3448,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", + "space-status-indicator-padding-inline": "0px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "12px", "space-table-footer-horizontal": "20px", @@ -3487,6 +3515,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-skeleton": "8px", + "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", "border-radius-token": "8px", @@ -3620,6 +3649,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-slider-range-warning-default": "#855900", "color-background-slider-track-default": "#8c8c94", "color-background-status-error": "#fff5f5", + "color-background-status-indicator-error": "transparent", + "color-background-status-indicator-info": "transparent", + "color-background-status-indicator-neutral": "transparent", + "color-background-status-indicator-success": "transparent", + "color-background-status-indicator-warning": "transparent", "color-background-status-info": "#f0fbff", "color-background-status-success": "#effff1", "color-background-status-warning": "#fffef0", @@ -4282,6 +4316,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", + "space-status-indicator-padding-inline": "0px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", @@ -4348,6 +4383,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-skeleton": "8px", + "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", "border-radius-token": "8px", @@ -4481,6 +4517,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-slider-range-warning-default": "#855900", "color-background-slider-track-default": "#8c8c94", "color-background-status-error": "#fff5f5", + "color-background-status-indicator-error": "transparent", + "color-background-status-indicator-info": "transparent", + "color-background-status-indicator-neutral": "transparent", + "color-background-status-indicator-success": "transparent", + "color-background-status-indicator-warning": "transparent", "color-background-status-info": "#f0fbff", "color-background-status-success": "#effff1", "color-background-status-warning": "#fffef0", @@ -5143,6 +5184,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", + "space-status-indicator-padding-inline": "0px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", @@ -5209,6 +5251,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-skeleton": "8px", + "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", "border-radius-token": "8px", @@ -5342,6 +5385,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-slider-range-warning-default": "#fbd332", "color-background-slider-track-default": "#656871", "color-background-status-error": "#1f0000", + "color-background-status-indicator-error": "transparent", + "color-background-status-indicator-info": "transparent", + "color-background-status-indicator-neutral": "transparent", + "color-background-status-indicator-success": "transparent", + "color-background-status-indicator-warning": "transparent", "color-background-status-info": "#001129", "color-background-status-success": "#001401", "color-background-status-warning": "#191100", @@ -6004,6 +6052,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", + "space-status-indicator-padding-inline": "0px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", @@ -6070,6 +6119,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-skeleton": "8px", + "border-radius-status-indicator": "4px", "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", "border-radius-token": "8px", @@ -6203,6 +6253,11 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-slider-range-warning-default": "#fbd332", "color-background-slider-track-default": "#656871", "color-background-status-error": "#1f0000", + "color-background-status-indicator-error": "transparent", + "color-background-status-indicator-info": "transparent", + "color-background-status-indicator-neutral": "transparent", + "color-background-status-indicator-success": "transparent", + "color-background-status-indicator-warning": "transparent", "color-background-status-info": "#001129", "color-background-status-success": "#001401", "color-background-status-warning": "#191100", @@ -6865,6 +6920,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", + "space-status-indicator-padding-inline": "0px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", From b653d6a6ca82ae1c9f4afda042a7decbb349d51b Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Wed, 20 May 2026 11:19:18 +0200 Subject: [PATCH 3/4] chore: sort tokens --- style-dictionary/visual-refresh/borders.ts | 54 +++++++++++----------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index 50013fe3de..3d98d9498c 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -17,60 +17,60 @@ export const tokens: StyleDictionary.BordersDictionary = { borderLineChartDashArray: '3 5', borderLineChartLineJoin: 'round', borderLineChartWidth: '2px', + borderLinkFocusRingOutline: '0', + borderLinkFocusRingShadowSpread: '2px', borderPanelHeaderWidth: '1px', borderPanelTopWidth: '1px', + borderRadiusActionCardDefault: '{borderRadiusCardDefault}', + borderRadiusActionCardEmbedded: '{borderRadiusCardEmbedded}', borderRadiusAlert: '{borderRadiusFlashbar}', borderRadiusBadge: '4px', - borderRadiusStatusIndicator: '{borderRadiusBadge}', borderRadiusButton: '20px', borderRadiusCalendarDayFocusRing: '3px', - borderRadiusCodeEditor: '{borderRadiusInput}', borderRadiusCardDefault: '{borderRadiusContainer}', borderRadiusCardEmbedded: '{borderRadiusChatBubble}', - borderRadiusItemCardDefault: '{borderRadiusCardDefault}', - borderRadiusItemCardEmbedded: '{borderRadiusCardEmbedded}', + borderRadiusChatBubble: '8px', + borderRadiusCodeEditor: '{borderRadiusInput}', borderRadiusContainer: '16px', borderRadiusControlCircularFocusRing: '4px', borderRadiusControlDefaultFocusRing: '4px', borderRadiusDropdown: '{borderRadiusItem}', borderRadiusDropzone: '12px', borderRadiusFlashbar: '12px', - borderRadiusItem: '8px', borderRadiusInput: '8px', + borderRadiusItem: '8px', + borderRadiusItemCardDefault: '{borderRadiusCardDefault}', + borderRadiusItemCardEmbedded: '{borderRadiusCardEmbedded}', borderRadiusPopover: '{borderRadiusInput}', + borderRadiusSkeleton: '8px', + borderRadiusStatusIndicator: '{borderRadiusBadge}', borderRadiusTabsFocusRing: '20px', borderRadiusTiles: '{borderRadiusInput}', borderRadiusToken: '{borderRadiusInput}', - borderRadiusChatBubble: '8px', borderRadiusTutorialPanelItem: '{borderRadiusInput}', borderTableStickyWidth: '1px', - borderLinkFocusRingOutline: '0', - borderLinkFocusRingShadowSpread: '2px', - borderWidthCard: '{borderDividerSectionWidth}', - borderWidthCardSelected: '{borderItemWidth}', - borderWidthItemCard: '{borderWidthCard}', - borderWidthItemCardHighlighted: '{borderWidthCardSelected}', - borderWidthItemSelected: '2px', + borderWidthActionCardActive: '{borderWidthCard}', + borderWidthActionCardDefault: '{borderWidthCard}', + borderWidthActionCardDisabled: '{borderWidthCard}', + borderWidthActionCardHover: '{borderWidthCard}', borderWidthAlert: '2px', - borderWidthAlertBlockStart: '{borderWidthAlert}', borderWidthAlertBlockEnd: '{borderWidthAlert}', - borderWidthAlertInlineStart: '{borderWidthAlert}', + borderWidthAlertBlockStart: '{borderWidthAlert}', borderWidthAlertInlineEnd: '{borderWidthAlert}', + borderWidthAlertInlineStart: '{borderWidthAlert}', borderWidthButton: '2px', + borderWidthCard: '{borderDividerSectionWidth}', + borderWidthCardSelected: '{borderItemWidth}', borderWidthDropdown: '2px', borderWidthField: '1px', - borderWidthPopover: '2px', - borderWidthToken: '2px', - borderWidthIconSmall: '2px', - borderWidthIconNormal: '2px', - borderWidthIconMedium: '2px', borderWidthIconBig: '3px', borderWidthIconLarge: '4px', - borderRadiusActionCardDefault: '{borderRadiusCardDefault}', - borderRadiusActionCardEmbedded: '{borderRadiusCardEmbedded}', - borderWidthActionCardDefault: '{borderWidthCard}', - borderWidthActionCardHover: '{borderWidthCard}', - borderWidthActionCardActive: '{borderWidthCard}', - borderWidthActionCardDisabled: '{borderWidthCard}', - borderRadiusSkeleton: '8px', + borderWidthIconMedium: '2px', + borderWidthIconNormal: '2px', + borderWidthIconSmall: '2px', + borderWidthItemCard: '{borderWidthCard}', + borderWidthItemCardHighlighted: '{borderWidthCardSelected}', + borderWidthItemSelected: '2px', + borderWidthPopover: '2px', + borderWidthToken: '2px', }; From b2f7ecdde51b63dde399f1d333977aebe3529948 Mon Sep 17 00:00:00 2001 From: Maximilian Schoell Date: Wed, 20 May 2026 14:14:42 +0200 Subject: [PATCH 4/4] chore: rename status indicator token --- src/__integ__/__snapshots__/themes.test.ts.snap | 16 ++++++++-------- src/status-indicator/styles.scss | 2 +- style-dictionary/utils/token-names.ts | 2 +- .../visual-refresh/metadata/spacing.ts | 2 +- style-dictionary/visual-refresh/spacing.ts | 2 +- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index af0bd2ff81..f75c7fdcf1 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -844,7 +844,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", - "space-status-indicator-padding-inline": "0px", + "space-status-indicator-padding-horizontal": "0px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "8px", "space-table-footer-horizontal": "20px", @@ -1712,7 +1712,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", - "space-status-indicator-padding-inline": "0px", + "space-status-indicator-padding-horizontal": "0px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "12px", "space-table-footer-horizontal": "20px", @@ -2580,7 +2580,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", - "space-status-indicator-padding-inline": "0px", + "space-status-indicator-padding-horizontal": "0px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "12px", "space-table-footer-horizontal": "20px", @@ -3448,7 +3448,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", - "space-status-indicator-padding-inline": "0px", + "space-status-indicator-padding-horizontal": "0px", "space-table-content-bottom": "0px", "space-table-embedded-header-top": "12px", "space-table-footer-horizontal": "20px", @@ -4316,7 +4316,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", - "space-status-indicator-padding-inline": "0px", + "space-status-indicator-padding-horizontal": "0px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", @@ -5184,7 +5184,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", - "space-status-indicator-padding-inline": "0px", + "space-status-indicator-padding-horizontal": "0px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", @@ -6052,7 +6052,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", - "space-status-indicator-padding-inline": "0px", + "space-status-indicator-padding-horizontal": "0px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", @@ -6920,7 +6920,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-static-xxs": "4px", "space-static-xxxl": "40px", "space-static-xxxs": "2px", - "space-status-indicator-padding-inline": "0px", + "space-status-indicator-padding-horizontal": "0px", "space-table-content-bottom": "4px", "space-table-embedded-header-top": "0px", "space-table-footer-horizontal": "0px", diff --git a/src/status-indicator/styles.scss b/src/status-indicator/styles.scss index 2afb09c111..e2039c69fb 100644 --- a/src/status-indicator/styles.scss +++ b/src/status-indicator/styles.scss @@ -61,7 +61,7 @@ $_status-backgrounds: ( } .container { - padding-inline: awsui.$space-status-indicator-padding-inline; + padding-inline: awsui.$space-status-indicator-padding-horizontal; border-start-start-radius: awsui.$border-radius-status-indicator; border-start-end-radius: awsui.$border-radius-status-indicator; border-end-start-radius: awsui.$border-radius-status-indicator; diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 8e390ecb2b..b5ca2b7739 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -1128,7 +1128,7 @@ export type SpacingTokenName = | 'spaceActionCardContentPaddingTop' | 'spaceOptionPaddingVertical' | 'spaceOptionPaddingHorizontal' - | 'spaceStatusIndicatorPaddingInline'; + | 'spaceStatusIndicatorPaddingHorizontal'; export type ShadowsTokenName = | 'shadowCard' | 'shadowItemCard' diff --git a/style-dictionary/visual-refresh/metadata/spacing.ts b/style-dictionary/visual-refresh/metadata/spacing.ts index 823ece6e27..8b68212714 100644 --- a/style-dictionary/visual-refresh/metadata/spacing.ts +++ b/style-dictionary/visual-refresh/metadata/spacing.ts @@ -204,7 +204,7 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: false, }, - spaceStatusIndicatorPaddingInline: { + spaceStatusIndicatorPaddingHorizontal: { description: 'The inline padding inside the status indicator container. Applied when the status indicator background is themed.', public: false, diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts index d6ca09f4c0..2dae31ea8b 100644 --- a/style-dictionary/visual-refresh/spacing.ts +++ b/style-dictionary/visual-refresh/spacing.ts @@ -84,7 +84,7 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceOptionPaddingVertical: '{spaceXxs}', spaceOptionPaddingHorizontal: '{spaceL}', - spaceStatusIndicatorPaddingInline: '{spaceNone}', + spaceStatusIndicatorPaddingHorizontal: '{spaceNone}', spaceScaled2xNone: '{spaceNone}', spaceScaled2xXxxs: { comfortable: '{spaceXxxs}', compact: '{spaceNone}' },