From d19ae0d3a8e8601e5c6e794ffac348719cbc9d9e Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Thu, 2 Apr 2026 14:45:20 +0200 Subject: [PATCH 1/5] feat: Make card design tokens public --- src/item-card/styles.scss | 28 +++++++++---------- style-dictionary/utils/token-names.ts | 12 ++++++++ style-dictionary/visual-refresh/borders.ts | 4 +++ style-dictionary/visual-refresh/colors.ts | 3 ++ .../visual-refresh/metadata/borders.ts | 10 +++++++ .../visual-refresh/metadata/colors.ts | 15 ++++++++++ .../visual-refresh/metadata/shadows.ts | 5 ++++ .../visual-refresh/metadata/spacing.ts | 20 +++++++++++++ style-dictionary/visual-refresh/shadows.ts | 1 + style-dictionary/visual-refresh/spacing.ts | 4 +++ 10 files changed, 88 insertions(+), 14 deletions(-) diff --git a/src/item-card/styles.scss b/src/item-card/styles.scss index 7226f944e1..0a26e4d5df 100644 --- a/src/item-card/styles.scss +++ b/src/item-card/styles.scss @@ -13,18 +13,18 @@ // Variant configuration maps — adjust values here for easy customization $variant-border-radius: ( - 'embedded': awsui.$border-radius-card-embedded, - 'default': awsui.$border-radius-card-default, + 'embedded': awsui.$border-radius-item-card-embedded, + 'default': awsui.$border-radius-item-card-default, ); $variant-padding-block: ( - 'embedded': awsui.$space-card-vertical-embedded, - 'default': awsui.$space-card-vertical-default, + 'embedded': awsui.$space-item-card-vertical-embedded, + 'default': awsui.$space-item-card-vertical-default, ); $variant-padding-inline: ( - 'embedded': awsui.$space-card-horizontal-embedded, - 'default': awsui.$space-card-horizontal-default, + 'embedded': awsui.$space-item-card-horizontal-embedded, + 'default': awsui.$space-item-card-horizontal-default, ); $action-padding-vertical: styles.$control-padding-vertical; @@ -61,18 +61,18 @@ $action-padding-horizontal: awsui.$space-xxs; @include styles.styles-reset(); box-sizing: border-box; position: relative; - background-color: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-card); + background-color: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-item-card); min-inline-size: 0; - box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-card); + box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-item-card); &:before { @include styles.base-pseudo-element; box-shadow: none; border-color: transparent; - border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) - var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); - border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card) - var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card); + border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-item-card) + var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-item-card); + border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-item-card) + var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-item-card); } &::after { @@ -88,8 +88,8 @@ $action-padding-horizontal: awsui.$space-xxs; background-color: awsui.$color-background-item-selected; &:before { - border-block: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted; - border-inline: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted; + border-block: solid awsui.$border-width-item-card-highlighted awsui.$color-border-item-card-highlighted; + border-inline: solid awsui.$border-width-item-card-highlighted awsui.$color-border-item-card-highlighted; } } diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts index 08f65cb073..882666205d 100644 --- a/style-dictionary/utils/token-names.ts +++ b/style-dictionary/utils/token-names.ts @@ -524,6 +524,7 @@ export type ColorsTokenName = | 'colorBackgroundCodeEditorPaneItemHover' | 'colorBackgroundCodeEditorStatusBar' | 'colorBackgroundCard' + | 'colorBackgroundItemCard' | 'colorBackgroundContainerContent' | 'colorBackgroundContainerHeader' | 'colorBackgroundControlChecked' @@ -615,6 +616,8 @@ export type ColorsTokenName = | 'colorBorderCodeEditorPaneItemHover' | 'colorBorderCard' | 'colorBorderCardHighlighted' + | 'colorBorderItemCard' + | 'colorBorderItemCardHighlighted' | 'colorBorderContainerDivider' | 'colorBorderContainerTop' | 'colorBorderControlChecked' @@ -852,6 +855,8 @@ export type BordersTokenName = | 'borderRadiusCalendarDayFocusRing' | 'borderRadiusCardDefault' | 'borderRadiusCardEmbedded' + | 'borderRadiusItemCardDefault' + | 'borderRadiusItemCardEmbedded' | 'borderRadiusCodeEditor' | 'borderRadiusContainer' | 'borderRadiusControlCircularFocusRing' @@ -877,6 +882,8 @@ export type BordersTokenName = | 'borderWidthAlertInlineEnd' | 'borderWidthCard' | 'borderWidthCardHighlighted' + | 'borderWidthItemCard' + | 'borderWidthItemCardHighlighted' | 'borderWidthButton' | 'borderWidthDropdown' | 'borderWidthField' @@ -957,6 +964,10 @@ export type SpacingTokenName = | 'spaceCardHorizontalEmbedded' | 'spaceCardVerticalDefault' | 'spaceCardVerticalEmbedded' + | 'spaceItemCardHorizontalDefault' + | 'spaceItemCardHorizontalEmbedded' + | 'spaceItemCardVerticalDefault' + | 'spaceItemCardVerticalEmbedded' | 'spaceCodeEditorStatusFocusOutlineGutter' | 'spaceContainerContentTop' | 'spaceContainerHeaderTop' @@ -1044,6 +1055,7 @@ export type SpacingTokenName = | 'spaceXxxs'; export type ShadowsTokenName = | 'shadowCard' + | 'shadowItemCard' | 'shadowContainer' | 'shadowContainerActive' | 'shadowDropdown' diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts index cff2c242dc..3c209a42f6 100644 --- a/style-dictionary/visual-refresh/borders.ts +++ b/style-dictionary/visual-refresh/borders.ts @@ -26,6 +26,8 @@ export const tokens: StyleDictionary.BordersDictionary = { borderRadiusCodeEditor: '{borderRadiusInput}', borderRadiusCardDefault: '{borderRadiusContainer}', borderRadiusCardEmbedded: '{borderRadiusChatBubble}', + borderRadiusItemCardDefault: '{borderRadiusCardDefault}', + borderRadiusItemCardEmbedded: '{borderRadiusCardEmbedded}', borderRadiusContainer: '16px', borderRadiusControlCircularFocusRing: '4px', borderRadiusControlDefaultFocusRing: '4px', @@ -45,6 +47,8 @@ export const tokens: StyleDictionary.BordersDictionary = { borderLinkFocusRingShadowSpread: '2px', borderWidthCard: '{borderDividerSectionWidth}', borderWidthCardHighlighted: '{borderItemWidth}', + borderWidthItemCard: '{borderWidthCard}', + borderWidthItemCardHighlighted: '{borderWidthCardHighlighted}', borderWidthAlert: '2px', borderWidthAlertBlockStart: '{borderWidthAlert}', borderWidthAlertBlockEnd: '{borderWidthAlert}', diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts index ec7adff6a6..99126c3f67 100644 --- a/style-dictionary/visual-refresh/colors.ts +++ b/style-dictionary/visual-refresh/colors.ts @@ -41,6 +41,7 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBackgroundCodeEditorPaneItemHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' }, colorBackgroundCodeEditorStatusBar: { light: '{colorNeutral200}', dark: '{colorNeutral800}' }, colorBackgroundCard: '{colorBackgroundContainerContent}', + colorBackgroundItemCard: '{colorBackgroundCard}', colorBackgroundContainerContent: { light: '{colorWhite}', dark: '{colorNeutral850}' }, colorBackgroundContainerHeader: { light: '{colorWhite}', dark: '{colorNeutral850}' }, colorBackgroundControlChecked: { light: '{colorPrimary600}', dark: '{colorPrimary400}' }, @@ -135,6 +136,8 @@ const tokens: StyleDictionary.ColorsDictionary = { colorBorderCodeEditorPaneItemHover: '{colorBorderDropdownItemHover}', colorBorderCard: '{colorBorderDividerDefault}', colorBorderCardHighlighted: '{colorBorderItemSelected}', + colorBorderItemCard: '{colorBorderCard}', + colorBorderItemCardHighlighted: '{colorBorderCardHighlighted}', colorBorderContainerDivider: 'transparent', colorBorderContainerTop: 'transparent', colorBorderControlChecked: '{colorBackgroundControlChecked}', diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index 8e88baa8bb..9d7787ce46 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -134,6 +134,16 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + borderWidthCard: { + description: 'The border width of a card.', + public: true, + themeable: true, + }, + borderWidthCardHighlighted: { + description: 'The border width of a highlighted card.', + public: true, + themeable: true, + }, borderWidthButton: { description: 'The border width of buttons.', public: true, diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 0214a71179..bcbdf60e5e 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -63,6 +63,11 @@ const metadata: StyleDictionary.MetadataIndex = { themeable: true, public: true, }, + colorBackgroundCard: { + description: 'The background color of a card.', + public: true, + themeable: true, + }, colorBackgroundContainerContent: { description: 'The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.', @@ -384,6 +389,16 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBorderCard: { + description: 'The border color of cards.', + public: true, + themeable: true, + }, + colorBorderCardHighlighted: { + description: 'The border color of highlighted cards.', + public: true, + themeable: true, + }, colorBorderContainerTop: { description: 'The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.', diff --git a/style-dictionary/visual-refresh/metadata/shadows.ts b/style-dictionary/visual-refresh/metadata/shadows.ts index 5448994f1d..9b9c0ebe37 100644 --- a/style-dictionary/visual-refresh/metadata/shadows.ts +++ b/style-dictionary/visual-refresh/metadata/shadows.ts @@ -3,6 +3,11 @@ import { StyleDictionary } from '../../utils/interfaces.js'; const metadata: StyleDictionary.MetadataIndex = { + shadowCard: { + description: 'The shadow of a card.', + public: true, + themeable: true, + }, shadowContainer: { description: 'Shadow for containers and cards.' }, shadowContainerActive: { description: 'Shadow for containers and cards in active state.', public: true }, shadowDropup: { diff --git a/style-dictionary/visual-refresh/metadata/spacing.ts b/style-dictionary/visual-refresh/metadata/spacing.ts index 826c999f2f..db64ef6575 100644 --- a/style-dictionary/visual-refresh/metadata/spacing.ts +++ b/style-dictionary/visual-refresh/metadata/spacing.ts @@ -114,6 +114,26 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: false, }, + spaceCardHorizontalDefault: { + description: 'The default horizontal padding inside a card.', + public: true, + themeable: true, + }, + spaceCardHorizontalEmbedded: { + description: 'The horizontal padding inside embedded a card.', + public: true, + themeable: true, + }, + spaceCardVerticalDefault: { + description: 'The default vertical padding inside a card.', + public: true, + themeable: true, + }, + spaceCardVerticalEmbedded: { + description: 'The vertical padding inside embedded a card.', + public: true, + themeable: true, + }, spaceContainerHorizontal: { description: 'The horizontal padding inside a container.', public: true, diff --git a/style-dictionary/visual-refresh/shadows.ts b/style-dictionary/visual-refresh/shadows.ts index 32ec398448..7ae686037d 100644 --- a/style-dictionary/visual-refresh/shadows.ts +++ b/style-dictionary/visual-refresh/shadows.ts @@ -5,6 +5,7 @@ import { StyleDictionary } from '../utils/interfaces.js'; const tokens: StyleDictionary.ShadowsDictionary = { shadowCard: 'none', + shadowItemCard: '{shadowCard}', shadowContainer: { light: '0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)', // 1px grey-200 faux border dark: '0px 1px 8px 2px rgba(0, 7, 22, 0.6)', diff --git a/style-dictionary/visual-refresh/spacing.ts b/style-dictionary/visual-refresh/spacing.ts index 76c306aacb..122419d2a8 100644 --- a/style-dictionary/visual-refresh/spacing.ts +++ b/style-dictionary/visual-refresh/spacing.ts @@ -21,6 +21,10 @@ const tokens: StyleDictionary.SpacingDictionary = { spaceCardHorizontalEmbedded: { comfortable: '{spaceS}', compact: '10px' }, spaceCardVerticalDefault: '{spaceScaledM}', spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' }, + spaceItemCardHorizontalDefault: '{spaceCardHorizontalDefault}', + spaceItemCardHorizontalEmbedded: '{spaceCardHorizontalEmbedded}', + spaceItemCardVerticalDefault: '{spaceCardVerticalDefault}', + spaceItemCardVerticalEmbedded: '{spaceCardVerticalEmbedded}', spaceCodeEditorStatusFocusOutlineGutter: '-7px', spaceContainerContentTop: '{spaceXxs}', spaceContainerHeaderTop: '{spaceS}', From 061257dc9d5ac2e1a415bfb4dc0b29da3d882f0b Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Thu, 2 Apr 2026 14:53:54 +0200 Subject: [PATCH 2/5] chore: Update snapshots --- .../__snapshots__/themes.test.ts.snap | 96 ++ .../__snapshots__/design-tokens.test.ts.snap | 1024 +++++++++++++++++ 2 files changed, 1120 insertions(+) diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap index 20ce82f6d8..96299f6266 100644 --- a/src/__integ__/__snapshots__/themes.test.ts.snap +++ b/src/__integ__/__snapshots__/themes.test.ts.snap @@ -37,6 +37,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-radius-flashbar": "0px", "border-radius-input": "2px", "border-radius-item": "0px", + "border-radius-item-card-default": "0px", + "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", @@ -58,6 +60,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "border-width-icon-medium": "2px", "border-width-icon-normal": "2px", "border-width-icon-small": "2px", + "border-width-item-card": "0px", + "border-width-item-card-highlighted": "1px", "border-width-popover": "1px", "border-width-token": "1px", "color-aws-squid-ink": "#232f3e", @@ -104,6 +108,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#eaeded", + "color-background-item-card": "#ffffff", "color-background-item-selected": "#f1faff", "color-background-layout-main": "#f2f3f3", "color-background-layout-mobile-panel": "#ffffff", @@ -202,6 +207,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "color-border-input-default": "#687078", "color-border-input-disabled": "#eaeded", "color-border-input-focused": "#0073bb", + "color-border-item-card": "#eaeded", + "color-border-item-card-highlighted": "#0073bb", "color-border-item-focused": "#0073bb", "color-border-item-placeholder": "transparent", "color-border-item-selected": "#0073bb", @@ -664,6 +671,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "shadow-dropup": "0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)", "shadow-flash-sticky": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-item-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-modal": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-panel": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-panel-toggle": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", @@ -717,6 +725,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] = "space-flashbar-horizontal": "12px", "space-flashbar-vertical": "4px", "space-grid-gutter": "16px", + "space-item-card-horizontal-default": "20px", + "space-item-card-horizontal-embedded": "10px", + "space-item-card-vertical-default": "16px", + "space-item-card-vertical-embedded": "8px", "space-key-value-gap": "0px", "space-l": "20px", "space-layout-content-bottom": "16px", @@ -820,6 +832,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-radius-flashbar": "0px", "border-radius-input": "2px", "border-radius-item": "0px", + "border-radius-item-card-default": "0px", + "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", @@ -841,6 +855,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "border-width-icon-medium": "2px", "border-width-icon-normal": "2px", "border-width-icon-small": "2px", + "border-width-item-card": "0px", + "border-width-item-card-highlighted": "1px", "border-width-popover": "1px", "border-width-token": "1px", "color-aws-squid-ink": "#232f3e", @@ -887,6 +903,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-background-inline-code": "rgba(255, 255, 255, 0.1)", "color-background-input-default": "#1a2029", "color-background-input-disabled": "#414750", + "color-background-item-card": "#2a2e33", "color-background-item-selected": "#12293b", "color-background-layout-main": "#16191f", "color-background-layout-mobile-panel": "#2a2e33", @@ -985,6 +1002,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "color-border-input-default": "#879596", "color-border-input-disabled": "#414750", "color-border-input-focused": "#00a1c9", + "color-border-item-card": "#414750", + "color-border-item-card-highlighted": "#00a1c9", "color-border-item-focused": "#00a1c9", "color-border-item-placeholder": "transparent", "color-border-item-selected": "#00a1c9", @@ -1447,6 +1466,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "shadow-dropup": "0 -1px 1px 0 rgba(0, 0, 0, 0.3), 1px -1px 1px 0 rgba(0, 0, 0, 0.3), -1px -1px 1px 0 rgba(0, 0, 0, 0.3)", "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)", "shadow-flash-sticky": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", + "shadow-item-card": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", "shadow-modal": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", "shadow-panel": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", "shadow-panel-toggle": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", @@ -1500,6 +1520,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = ` "space-flashbar-horizontal": "12px", "space-flashbar-vertical": "8px", "space-grid-gutter": "20px", + "space-item-card-horizontal-default": "20px", + "space-item-card-horizontal-embedded": "12px", + "space-item-card-vertical-default": "20px", + "space-item-card-vertical-embedded": "10px", "space-key-value-gap": "2px", "space-l": "20px", "space-layout-content-bottom": "20px", @@ -1603,6 +1627,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-radius-flashbar": "0px", "border-radius-input": "2px", "border-radius-item": "0px", + "border-radius-item-card-default": "0px", + "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", @@ -1624,6 +1650,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "border-width-icon-medium": "2px", "border-width-icon-normal": "2px", "border-width-icon-small": "2px", + "border-width-item-card": "0px", + "border-width-item-card-highlighted": "1px", "border-width-popover": "1px", "border-width-token": "1px", "color-aws-squid-ink": "#232f3e", @@ -1670,6 +1698,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#eaeded", + "color-background-item-card": "#ffffff", "color-background-item-selected": "#f1faff", "color-background-layout-main": "#f2f3f3", "color-background-layout-mobile-panel": "#ffffff", @@ -1768,6 +1797,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "color-border-input-default": "#687078", "color-border-input-disabled": "#eaeded", "color-border-input-focused": "#0073bb", + "color-border-item-card": "#eaeded", + "color-border-item-card-highlighted": "#0073bb", "color-border-item-focused": "#0073bb", "color-border-item-placeholder": "transparent", "color-border-item-selected": "#0073bb", @@ -2230,6 +2261,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "shadow-dropup": "0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)", "shadow-flash-sticky": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-item-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-modal": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-panel": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-panel-toggle": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", @@ -2283,6 +2315,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = ` "space-flashbar-horizontal": "12px", "space-flashbar-vertical": "8px", "space-grid-gutter": "20px", + "space-item-card-horizontal-default": "20px", + "space-item-card-horizontal-embedded": "12px", + "space-item-card-vertical-default": "20px", + "space-item-card-vertical-embedded": "10px", "space-key-value-gap": "2px", "space-l": "20px", "space-layout-content-bottom": "20px", @@ -2386,6 +2422,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-radius-flashbar": "0px", "border-radius-input": "2px", "border-radius-item": "0px", + "border-radius-item-card-default": "0px", + "border-radius-item-card-embedded": "2px", "border-radius-popover": "2px", "border-radius-tabs-focus-ring": "0px", "border-radius-tiles": "2px", @@ -2407,6 +2445,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "border-width-icon-medium": "2px", "border-width-icon-normal": "2px", "border-width-icon-small": "2px", + "border-width-item-card": "0px", + "border-width-item-card-highlighted": "1px", "border-width-popover": "1px", "border-width-token": "1px", "color-aws-squid-ink": "#232f3e", @@ -2453,6 +2493,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#eaeded", + "color-background-item-card": "#ffffff", "color-background-item-selected": "#f1faff", "color-background-layout-main": "#f2f3f3", "color-background-layout-mobile-panel": "#ffffff", @@ -2551,6 +2592,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "color-border-input-default": "#687078", "color-border-input-disabled": "#eaeded", "color-border-input-focused": "#0073bb", + "color-border-item-card": "#eaeded", + "color-border-item-card-highlighted": "#0073bb", "color-border-item-focused": "#0073bb", "color-border-item-placeholder": "transparent", "color-border-item-selected": "#0073bb", @@ -3013,6 +3056,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "shadow-dropup": "0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-flash-collapsed": "0px 2px 2px rgba(0, 0, 0, 0.15)", "shadow-flash-sticky": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + "shadow-item-card": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-modal": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-panel": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", "shadow-panel-toggle": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", @@ -3066,6 +3110,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion" "space-flashbar-horizontal": "12px", "space-flashbar-vertical": "8px", "space-grid-gutter": "20px", + "space-item-card-horizontal-default": "20px", + "space-item-card-horizontal-embedded": "12px", + "space-item-card-vertical-default": "20px", + "space-item-card-vertical-embedded": "10px", "space-key-value-gap": "2px", "space-l": "20px", "space-layout-content-bottom": "20px", @@ -3169,6 +3217,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-radius-flashbar": "12px", "border-radius-input": "8px", "border-radius-item": "8px", + "border-radius-item-card-default": "16px", + "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", @@ -3190,6 +3240,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "border-width-icon-medium": "2px", "border-width-icon-normal": "2px", "border-width-icon-small": "2px", + "border-width-item-card": "1px", + "border-width-item-card-highlighted": "2px", "border-width-popover": "2px", "border-width-token": "2px", "color-aws-squid-ink": "#232f3e", @@ -3236,6 +3288,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#ebebf0", + "color-background-item-card": "#ffffff", "color-background-item-selected": "#f0fbff", "color-background-layout-main": "#ffffff", "color-background-layout-mobile-panel": "#0f141a", @@ -3334,6 +3387,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "color-border-input-default": "#8c8c94", "color-border-input-disabled": "#ebebf0", "color-border-input-focused": "#006ce0", + "color-border-item-card": "#c6c6cd", + "color-border-item-card-highlighted": "#006ce0", "color-border-item-focused": "#006ce0", "color-border-item-placeholder": "#006ce0", "color-border-item-selected": "#006ce0", @@ -3796,6 +3851,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "shadow-dropup": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)", "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)", "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.1)", + "shadow-item-card": "none", "shadow-modal": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)", "shadow-panel": "0px 0px 0px 1px #b6bec9", "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 0.12)", @@ -3849,6 +3905,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh" "space-flashbar-horizontal": "16px", "space-flashbar-vertical": "8px", "space-grid-gutter": "20px", + "space-item-card-horizontal-default": "20px", + "space-item-card-horizontal-embedded": "12px", + "space-item-card-vertical-default": "16px", + "space-item-card-vertical-embedded": "10px", "space-key-value-gap": "0px", "space-l": "20px", "space-layout-content-bottom": "40px", @@ -3952,6 +4012,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-flashbar": "12px", "border-radius-input": "8px", "border-radius-item": "8px", + "border-radius-item-card-default": "16px", + "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", @@ -3973,6 +4035,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-icon-medium": "2px", "border-width-icon-normal": "2px", "border-width-icon-small": "2px", + "border-width-item-card": "1px", + "border-width-item-card-highlighted": "2px", "border-width-popover": "2px", "border-width-token": "2px", "color-aws-squid-ink": "#232f3e", @@ -4019,6 +4083,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-inline-code": "rgba(0, 0, 0, 0.1)", "color-background-input-default": "#ffffff", "color-background-input-disabled": "#ebebf0", + "color-background-item-card": "#ffffff", "color-background-item-selected": "#f0fbff", "color-background-layout-main": "#ffffff", "color-background-layout-mobile-panel": "#0f141a", @@ -4117,6 +4182,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-input-default": "#8c8c94", "color-border-input-disabled": "#ebebf0", "color-border-input-focused": "#006ce0", + "color-border-item-card": "#c6c6cd", + "color-border-item-card-highlighted": "#006ce0", "color-border-item-focused": "#006ce0", "color-border-item-placeholder": "#006ce0", "color-border-item-selected": "#006ce0", @@ -4579,6 +4646,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "shadow-dropup": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)", "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)", "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.1)", + "shadow-item-card": "none", "shadow-modal": "0px 4px 20px 1px rgba(0, 7, 22, 0.1)", "shadow-panel": "0px 0px 0px 1px #b6bec9", "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 0.12)", @@ -4632,6 +4700,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-flashbar-horizontal": "16px", "space-flashbar-vertical": "4px", "space-grid-gutter": "16px", + "space-item-card-horizontal-default": "20px", + "space-item-card-horizontal-embedded": "10px", + "space-item-card-vertical-default": "12px", + "space-item-card-vertical-embedded": "8px", "space-key-value-gap": "0px", "space-l": "20px", "space-layout-content-bottom": "24px", @@ -4735,6 +4807,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-flashbar": "12px", "border-radius-input": "8px", "border-radius-item": "8px", + "border-radius-item-card-default": "16px", + "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", @@ -4756,6 +4830,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-icon-medium": "2px", "border-width-icon-normal": "2px", "border-width-icon-small": "2px", + "border-width-item-card": "1px", + "border-width-item-card-highlighted": "2px", "border-width-popover": "2px", "border-width-token": "2px", "color-aws-squid-ink": "#232f3e", @@ -4802,6 +4878,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-inline-code": "rgba(255, 255, 255, 0.1)", "color-background-input-default": "#0f141a", "color-background-input-disabled": "#1b232d", + "color-background-item-card": "#161d26", "color-background-item-selected": "#001129", "color-background-layout-main": "#0f141a", "color-background-layout-mobile-panel": "#0f141a", @@ -4900,6 +4977,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-input-default": "#656871", "color-border-input-disabled": "#1b232d", "color-border-input-focused": "#42b4ff", + "color-border-item-card": "#424650", + "color-border-item-card-highlighted": "#42b4ff", "color-border-item-focused": "#42b4ff", "color-border-item-placeholder": "#42b4ff", "color-border-item-selected": "#42b4ff", @@ -5362,6 +5441,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "shadow-dropup": "0px 4px 20px 1px rgba(0, 4, 12, 1)", "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)", "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.1)", + "shadow-item-card": "none", "shadow-modal": "0px 4px 20px 1px rgba(0, 4, 12, 1)", "shadow-panel": "0px 0px 0px 1px #b6bec9", "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 0.12)", @@ -5415,6 +5495,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-flashbar-horizontal": "16px", "space-flashbar-vertical": "8px", "space-grid-gutter": "20px", + "space-item-card-horizontal-default": "20px", + "space-item-card-horizontal-embedded": "12px", + "space-item-card-vertical-default": "16px", + "space-item-card-vertical-embedded": "10px", "space-key-value-gap": "0px", "space-l": "20px", "space-layout-content-bottom": "40px", @@ -5518,6 +5602,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-radius-flashbar": "12px", "border-radius-input": "8px", "border-radius-item": "8px", + "border-radius-item-card-default": "16px", + "border-radius-item-card-embedded": "8px", "border-radius-popover": "8px", "border-radius-tabs-focus-ring": "20px", "border-radius-tiles": "8px", @@ -5539,6 +5625,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "border-width-icon-medium": "2px", "border-width-icon-normal": "2px", "border-width-icon-small": "2px", + "border-width-item-card": "1px", + "border-width-item-card-highlighted": "2px", "border-width-popover": "2px", "border-width-token": "2px", "color-aws-squid-ink": "#232f3e", @@ -5585,6 +5673,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-background-inline-code": "rgba(255, 255, 255, 0.1)", "color-background-input-default": "#161d26", "color-background-input-disabled": "#1b232d", + "color-background-item-card": "#161d26", "color-background-item-selected": "#001129", "color-background-layout-main": "#161d26", "color-background-layout-mobile-panel": "#0f141a", @@ -5683,6 +5772,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "color-border-input-default": "#656871", "color-border-input-disabled": "#1b232d", "color-border-input-focused": "#42b4ff", + "color-border-item-card": "#424650", + "color-border-item-card-highlighted": "#42b4ff", "color-border-item-focused": "#42b4ff", "color-border-item-placeholder": "#42b4ff", "color-border-item-selected": "#42b4ff", @@ -6145,6 +6236,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "shadow-dropup": "0px 4px 20px 1px rgba(0, 4, 12, 1)", "shadow-flash-collapsed": "0px 4px 4px rgba(0, 0, 0, 0.25)", "shadow-flash-sticky": "0px 4px 8px rgba(0, 7, 22, 0.5)", + "shadow-item-card": "none", "shadow-modal": "0px 4px 20px 1px rgba(0, 4, 12, 1)", "shadow-panel": "0px 0px 0px 1px #414d5c", "shadow-panel-toggle": "0px 6px 12px 1px rgba(0, 7, 22, 1)", @@ -6198,6 +6290,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh- "space-flashbar-horizontal": "16px", "space-flashbar-vertical": "8px", "space-grid-gutter": "20px", + "space-item-card-horizontal-default": "20px", + "space-item-card-horizontal-embedded": "12px", + "space-item-card-vertical-default": "16px", + "space-item-card-vertical-embedded": "10px", "space-key-value-gap": "0px", "space-l": "20px", "space-layout-content-bottom": "40px", diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 8b3b9b764f..b74dc79dbd 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -109,6 +109,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of buttons.", "$value": "1px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "0px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "1px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -229,6 +237,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#0a4a74", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -642,6 +657,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#d5dbdb", + "light": "#545b64", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -2640,6 +2669,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "awsui-none-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", + "light": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -2654,6 +2690,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "8px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "16px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -2909,6 +2973,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of buttons.", "$value": "1px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "0px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "1px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -3029,6 +3101,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#0a4a74", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -3442,6 +3521,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#414750", + "light": "#eaeded", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -5440,6 +5533,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "awsui-none-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", + "light": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -5454,6 +5554,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "8px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "16px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -5709,6 +5837,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of buttons.", "$value": "1px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "0px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "1px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -5829,6 +5965,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#0a4a74", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -6242,6 +6385,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#414750", + "light": "#eaeded", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -8240,6 +8397,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "awsui-none-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", + "light": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -8254,6 +8418,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "8px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "16px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -8509,6 +8701,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of buttons.", "$value": "1px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "0px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "1px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -8629,6 +8829,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#0a4a74", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -9042,6 +9249,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#fafafa", + "light": "#fafafa", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -11040,6 +11261,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "awsui-none-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", + "light": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -11054,6 +11282,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "8px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "16px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -11309,6 +11565,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of buttons.", "$value": "1px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "0px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "1px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -11429,6 +11693,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#0a4a74", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -11842,6 +12113,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#16191f", + "light": "#16191f", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -13840,6 +14125,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "awsui-none-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", + "light": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -13854,6 +14146,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "8px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "16px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -14109,6 +14429,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of buttons.", "$value": "1px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "0px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "1px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -14229,6 +14557,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#00a1c9", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#232f3e", + "light": "#232f3e", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -14642,6 +14977,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#414750", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#414750", + "light": "#414750", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#00a1c9", + "light": "#00a1c9", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -16640,6 +16989,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "awsui-none-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", + "light": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -16654,6 +17010,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "8px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "16px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -16909,6 +17293,14 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of buttons.", "$value": "1px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "0px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "1px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -17029,6 +17421,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#0a4a74", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#2a2e33", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -17442,6 +17841,20 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#414750", + "light": "#eaeded", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#00a1c9", + "light": "#0073bb", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -19440,6 +19853,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "disabled": "awsui-none-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3)", + "light": "0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15)", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -19454,6 +19874,34 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "compact": "8px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "16px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -19714,6 +20162,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of buttons.", "$value": "2px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "2px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -19834,6 +20290,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#0f141a", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -20247,6 +20710,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#dedee3", + "light": "#424650", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -22245,6 +22722,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "awsui-status-icon-error-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -22259,6 +22743,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "4px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -22514,6 +23026,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of buttons.", "$value": "2px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "2px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -22634,6 +23154,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -23047,6 +23574,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#232b37", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -25045,6 +25586,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "awsui-status-icon-error-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -25059,6 +25607,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "4px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -25314,6 +25890,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of buttons.", "$value": "2px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "2px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -25434,6 +26018,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#002b66", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -25847,6 +26438,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#424650", + "light": "#c6c6cd", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -27845,6 +28450,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "awsui-status-icon-error-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -27859,6 +28471,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "4px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -28114,6 +28754,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of buttons.", "$value": "2px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "2px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -28234,6 +28882,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#002b66", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -28647,6 +29302,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#424650", + "light": "#c6c6cd", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -30645,6 +31314,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "awsui-status-icon-error-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -30659,6 +31335,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "4px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "12px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -30914,6 +31618,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of buttons.", "$value": "2px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "2px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -31034,6 +31746,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ffffff", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -31447,6 +32166,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -33445,6 +34178,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "awsui-status-icon-error-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -33459,6 +34199,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "4px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -33714,6 +34482,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of buttons.", "$value": "2px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "2px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -33834,6 +34610,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#0f141a", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -34247,6 +35030,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -36245,6 +37042,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "awsui-status-icon-error-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -36259,6 +37063,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "4px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -36514,6 +37346,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of buttons.", "$value": "2px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "2px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -36634,6 +37474,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#75cfff", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -37047,6 +37894,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#232b37", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#424650", + "light": "#424650", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -39045,6 +39906,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "awsui-status-icon-error-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -39059,6 +39927,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "4px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -39314,6 +40210,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of buttons.", "$value": "2px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "2px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -39434,6 +40338,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#75cfff", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#161d26", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -39847,6 +40758,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#232b37", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#424650", + "light": "#424650", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#42b4ff", + "light": "#42b4ff", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -41845,6 +42770,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "awsui-status-icon-error-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -41859,6 +42791,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "4px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { @@ -42114,6 +43074,14 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of buttons.", "$value": "2px", }, + "border-width-card": { + "$description": "The border width of a card.", + "$value": "1px", + }, + "border-width-card-highlighted": { + "$description": "The border width of a highlighted card.", + "$value": "2px", + }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -42234,6 +43202,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#002b66", }, }, + "color-background-card": { + "$description": "The background color of a card.", + "$value": { + "dark": "#161d26", + "light": "#ffffff", + }, + }, "color-background-cell-shaded": { "$description": "The background color of shaded table cells.", "$value": { @@ -42647,6 +43622,20 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of cards.", + "$value": { + "dark": "#424650", + "light": "#c6c6cd", + }, + }, + "color-border-card-highlighted": { + "$description": "The border color of highlighted cards.", + "$value": { + "dark": "#42b4ff", + "light": "#006ce0", + }, + }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -44645,6 +45634,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "disabled": "awsui-status-icon-error-35003c", }, }, + "shadow-card": { + "$description": "The shadow of a card.", + "$value": { + "dark": "none", + "light": "none", + }, + }, "shadow-container-active": { "$description": "Shadow for containers and cards in active state.", "$value": { @@ -44659,6 +45655,34 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "compact": "4px", }, }, + "space-card-horizontal-default": { + "$description": "The default horizontal padding inside a card.", + "$value": { + "comfortable": "20px", + "compact": "20px", + }, + }, + "space-card-horizontal-embedded": { + "$description": "The horizontal padding inside embedded a card.", + "$value": { + "comfortable": "12px", + "compact": "10px", + }, + }, + "space-card-vertical-default": { + "$description": "The default vertical padding inside a card.", + "$value": { + "comfortable": "16px", + "compact": "12px", + }, + }, + "space-card-vertical-embedded": { + "$description": "The vertical padding inside embedded a card.", + "$value": { + "comfortable": "10px", + "compact": "8px", + }, + }, "space-container-horizontal": { "$description": "The horizontal padding inside a container.", "$value": { From 05b22a9b401dbc4d5c5b8deb8cbf33185f222939 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Thu, 2 Apr 2026 16:00:49 +0200 Subject: [PATCH 3/5] fix: Remove colorBorderCardHighlighted from colors design tokens --- .../__snapshots__/design-tokens.test.ts.snap | 112 ------------------ .../visual-refresh/metadata/colors.ts | 5 - 2 files changed, 117 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index b74dc79dbd..8277a333a0 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -664,13 +664,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#545b64", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#00a1c9", - "light": "#0073bb", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -3528,13 +3521,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#eaeded", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#00a1c9", - "light": "#0073bb", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -6392,13 +6378,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#eaeded", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#00a1c9", - "light": "#0073bb", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -9256,13 +9235,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#fafafa", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#00a1c9", - "light": "#0073bb", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -12120,13 +12092,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#16191f", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#00a1c9", - "light": "#0073bb", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -14984,13 +14949,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#414750", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#00a1c9", - "light": "#00a1c9", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -17848,13 +17806,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#eaeded", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#00a1c9", - "light": "#0073bb", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -20717,13 +20668,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#424650", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#42b4ff", - "light": "#006ce0", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -23581,13 +23525,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#dedee3", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#42b4ff", - "light": "#42b4ff", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -26445,13 +26382,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#c6c6cd", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#42b4ff", - "light": "#006ce0", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -29309,13 +29239,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#c6c6cd", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#42b4ff", - "light": "#006ce0", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -32173,13 +32096,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#f9f9fa", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#42b4ff", - "light": "#006ce0", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -35037,13 +34953,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#0f141a", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#42b4ff", - "light": "#006ce0", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -37901,13 +37810,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#424650", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#42b4ff", - "light": "#42b4ff", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -40765,13 +40667,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#424650", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#42b4ff", - "light": "#42b4ff", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { @@ -43629,13 +43524,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#c6c6cd", }, }, - "color-border-card-highlighted": { - "$description": "The border color of highlighted cards.", - "$value": { - "dark": "#42b4ff", - "light": "#006ce0", - }, - }, "color-border-container-top": { "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.", "$value": { diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index bcbdf60e5e..6f4c84a404 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -394,11 +394,6 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, - colorBorderCardHighlighted: { - description: 'The border color of highlighted cards.', - public: true, - themeable: true, - }, colorBorderContainerTop: { description: 'The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.', From 17e435224ecd3512435635886401917a45a5dba5 Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Thu, 2 Apr 2026 16:06:35 +0200 Subject: [PATCH 4/5] chore: Change design token description to prevent confusion --- .../__snapshots__/design-tokens.test.ts.snap | 32 +++++++++---------- .../visual-refresh/metadata/colors.ts | 2 +- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index 8277a333a0..aeae55d22e 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -658,7 +658,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#d5dbdb", "light": "#545b64", @@ -3515,7 +3515,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#414750", "light": "#eaeded", @@ -6372,7 +6372,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#414750", "light": "#eaeded", @@ -9229,7 +9229,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#fafafa", "light": "#fafafa", @@ -12086,7 +12086,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#16191f", "light": "#16191f", @@ -14943,7 +14943,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#414750", "light": "#414750", @@ -17800,7 +17800,7 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#414750", "light": "#eaeded", @@ -20662,7 +20662,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#dedee3", "light": "#424650", @@ -23519,7 +23519,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#dedee3", "light": "#dedee3", @@ -26376,7 +26376,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#424650", "light": "#c6c6cd", @@ -29233,7 +29233,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#424650", "light": "#c6c6cd", @@ -32090,7 +32090,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#f9f9fa", "light": "#f9f9fa", @@ -34947,7 +34947,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#0f141a", "light": "#0f141a", @@ -37804,7 +37804,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#424650", "light": "#424650", @@ -40661,7 +40661,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#424650", "light": "#424650", @@ -43518,7 +43518,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t }, }, "color-border-card": { - "$description": "The border color of cards.", + "$description": "The border color of a card.", "$value": { "dark": "#424650", "light": "#c6c6cd", diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts index 6f4c84a404..74d2977de0 100644 --- a/style-dictionary/visual-refresh/metadata/colors.ts +++ b/style-dictionary/visual-refresh/metadata/colors.ts @@ -390,7 +390,7 @@ const metadata: StyleDictionary.MetadataIndex = { themeable: true, }, colorBorderCard: { - description: 'The border color of cards.', + description: 'The border color of a card.', public: true, themeable: true, }, From 16d0e146411451d42ea8e538d61220da43a76adf Mon Sep 17 00:00:00 2001 From: Simon Brebeck Date: Thu, 2 Apr 2026 16:27:55 +0200 Subject: [PATCH 5/5] chore: Remove card design token from metadata --- .../__snapshots__/design-tokens.test.ts.snap | 64 ------------------- .../visual-refresh/metadata/borders.ts | 5 -- 2 files changed, 69 deletions(-) diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap index aeae55d22e..b5f01f2e0a 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap @@ -113,10 +113,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of a card.", "$value": "0px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "1px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -2970,10 +2966,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of a card.", "$value": "0px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "1px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -5827,10 +5819,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of a card.", "$value": "0px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "1px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -8684,10 +8672,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of a card.", "$value": "0px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "1px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -11541,10 +11525,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of a card.", "$value": "0px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "1px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -14398,10 +14378,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of a card.", "$value": "0px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "1px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -17255,10 +17231,6 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "$description": "The border width of a card.", "$value": "0px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "1px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -20117,10 +20089,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of a card.", "$value": "1px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "2px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -22974,10 +22942,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of a card.", "$value": "1px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "2px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -25831,10 +25795,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of a card.", "$value": "1px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "2px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -28688,10 +28648,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of a card.", "$value": "1px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "2px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -31545,10 +31501,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of a card.", "$value": "1px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "2px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -34402,10 +34354,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of a card.", "$value": "1px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "2px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -37259,10 +37207,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of a card.", "$value": "1px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "2px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -40116,10 +40060,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of a card.", "$value": "1px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "2px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -42973,10 +42913,6 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "$description": "The border width of a card.", "$value": "1px", }, - "border-width-card-highlighted": { - "$description": "The border width of a highlighted card.", - "$value": "2px", - }, "border-width-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts index 9d7787ce46..79a26cae9b 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -139,11 +139,6 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, - borderWidthCardHighlighted: { - description: 'The border width of a highlighted card.', - public: true, - themeable: true, - }, borderWidthButton: { description: 'The border width of buttons.', public: true,