feat: Make card design tokens public (#4404)

Author: SpyZzey

src/__integ__/__snapshots__/themes.test.ts.snap

@@ -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;
     }
   }
 

src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap

@@ -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'

src/item-card/styles.scss

@@ -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}',

style-dictionary/utils/token-names.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}',

style-dictionary/visual-refresh/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,

style-dictionary/visual-refresh/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.',

style-dictionary/visual-refresh/metadata/borders.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: {

style-dictionary/visual-refresh/metadata/colors.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,