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..b5f01f2e0a 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,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -229,6 +233,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 +653,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#d5dbdb", + "light": "#545b64", + }, + }, "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 +2658,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 +2679,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 +2962,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -3029,6 +3086,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 +3506,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#414750", + "light": "#eaeded", + }, + }, "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 +5511,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 +5532,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 +5815,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -5829,6 +5939,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 +6359,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#414750", + "light": "#eaeded", + }, + }, "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 +8364,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 +8385,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 +8668,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -8629,6 +8792,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 +9212,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#fafafa", + "light": "#fafafa", + }, + }, "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 +11217,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 +11238,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 +11521,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -11429,6 +11645,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 +12065,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#16191f", + "light": "#16191f", + }, + }, "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 +14070,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 +14091,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 +14374,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -14229,6 +14498,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 +14918,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#414750", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#414750", + "light": "#414750", + }, + }, "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 +16923,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 +16944,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 +17227,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "1px", @@ -17029,6 +17351,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 +17771,13 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap "light": "#d5dbdb", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#414750", + "light": "#eaeded", + }, + }, "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 +19776,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 +19797,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 +20085,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -19834,6 +20209,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 +20629,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#dedee3", + "light": "#424650", + }, + }, "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 +22634,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 +22655,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 +22938,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -22634,6 +23062,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 +23482,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#232b37", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#dedee3", + "light": "#dedee3", + }, + }, "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 +25487,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 +25508,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 +25791,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -25434,6 +25915,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 +26335,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#424650", + "light": "#c6c6cd", + }, + }, "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 +28340,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 +28361,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 +28644,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -28234,6 +28768,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 +29188,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#424650", + "light": "#c6c6cd", + }, + }, "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 +31193,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 +31214,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 +31497,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -31034,6 +31621,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 +32041,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#f9f9fa", + "light": "#f9f9fa", + }, + }, "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 +34046,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 +34067,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 +34350,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -33834,6 +34474,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 +34894,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#0f141a", + "light": "#0f141a", + }, + }, "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 +36899,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 +36920,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 +37203,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -36634,6 +37327,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 +37747,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#232b37", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#424650", + "light": "#424650", + }, + }, "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 +39752,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 +39773,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 +40056,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -39434,6 +40180,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 +40600,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#232b37", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#424650", + "light": "#424650", + }, + }, "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 +42605,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 +42626,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 +42909,10 @@ 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-dropdown": { "$description": "The border width of dropdowns.", "$value": "2px", @@ -42234,6 +43033,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 +43453,13 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t "light": "#ebebf0", }, }, + "color-border-card": { + "$description": "The border color of a card.", + "$value": { + "dark": "#424650", + "light": "#c6c6cd", + }, + }, "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 +45458,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 +45479,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": { 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..79a26cae9b 100644 --- a/style-dictionary/visual-refresh/metadata/borders.ts +++ b/style-dictionary/visual-refresh/metadata/borders.ts @@ -134,6 +134,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + borderWidthCard: { + description: 'The border width of a 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..74d2977de0 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,11 @@ const metadata: StyleDictionary.MetadataIndex = { public: true, themeable: true, }, + colorBorderCard: { + description: 'The border color of a card.', + 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}',