Skip to content

Commit d19ae0d

Browse files
SpyZzeySpyZzey
committed
feat: Make card design tokens public
1 parent bab5716 commit d19ae0d

File tree

10 files changed

+88
-14
lines changed

10 files changed

+88
-14
lines changed

‎src/item-card/styles.scss‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,18 @@
1313

1414
// Variant configuration maps — adjust values here for easy customization
1515
$variant-border-radius: (
16-
'embedded': awsui.$border-radius-card-embedded,
17-
'default': awsui.$border-radius-card-default,
16+
'embedded': awsui.$border-radius-item-card-embedded,
17+
'default': awsui.$border-radius-item-card-default,
1818
);
1919

2020
$variant-padding-block: (
21-
'embedded': awsui.$space-card-vertical-embedded,
22-
'default': awsui.$space-card-vertical-default,
21+
'embedded': awsui.$space-item-card-vertical-embedded,
22+
'default': awsui.$space-item-card-vertical-default,
2323
);
2424

2525
$variant-padding-inline: (
26-
'embedded': awsui.$space-card-horizontal-embedded,
27-
'default': awsui.$space-card-horizontal-default,
26+
'embedded': awsui.$space-item-card-horizontal-embedded,
27+
'default': awsui.$space-item-card-horizontal-default,
2828
);
2929

3030
$action-padding-vertical: styles.$control-padding-vertical;
@@ -61,18 +61,18 @@ $action-padding-horizontal: awsui.$space-xxs;
6161
@include styles.styles-reset();
6262
box-sizing: border-box;
6363
position: relative;
64-
background-color: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-card);
64+
background-color: var(#{custom-props.$styleItemCardBackgroundDefault}, awsui.$color-background-item-card);
6565
min-inline-size: 0;
66-
box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-card);
66+
box-shadow: var(#{custom-props.$styleItemCardBoxShadowDefault}, awsui.$shadow-item-card);
6767

6868
&:before {
6969
@include styles.base-pseudo-element;
7070
box-shadow: none;
7171
border-color: transparent;
72-
border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card)
73-
var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card);
74-
border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-card)
75-
var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-card);
72+
border-block: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-item-card)
73+
var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-item-card);
74+
border-inline: solid var(#{custom-props.$styleItemCardBorderWidthDefault}, awsui.$border-width-item-card)
75+
var(#{custom-props.$styleItemCardBorderColorDefault}, awsui.$color-border-item-card);
7676
}
7777

7878
&::after {
@@ -88,8 +88,8 @@ $action-padding-horizontal: awsui.$space-xxs;
8888
background-color: awsui.$color-background-item-selected;
8989

9090
&:before {
91-
border-block: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted;
92-
border-inline: solid awsui.$border-width-card-highlighted awsui.$color-border-card-highlighted;
91+
border-block: solid awsui.$border-width-item-card-highlighted awsui.$color-border-item-card-highlighted;
92+
border-inline: solid awsui.$border-width-item-card-highlighted awsui.$color-border-item-card-highlighted;
9393
}
9494
}
9595

‎style-dictionary/utils/token-names.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -524,6 +524,7 @@ export type ColorsTokenName =
524524
| 'colorBackgroundCodeEditorPaneItemHover'
525525
| 'colorBackgroundCodeEditorStatusBar'
526526
| 'colorBackgroundCard'
527+
| 'colorBackgroundItemCard'
527528
| 'colorBackgroundContainerContent'
528529
| 'colorBackgroundContainerHeader'
529530
| 'colorBackgroundControlChecked'
@@ -615,6 +616,8 @@ export type ColorsTokenName =
615616
| 'colorBorderCodeEditorPaneItemHover'
616617
| 'colorBorderCard'
617618
| 'colorBorderCardHighlighted'
619+
| 'colorBorderItemCard'
620+
| 'colorBorderItemCardHighlighted'
618621
| 'colorBorderContainerDivider'
619622
| 'colorBorderContainerTop'
620623
| 'colorBorderControlChecked'
@@ -852,6 +855,8 @@ export type BordersTokenName =
852855
| 'borderRadiusCalendarDayFocusRing'
853856
| 'borderRadiusCardDefault'
854857
| 'borderRadiusCardEmbedded'
858+
| 'borderRadiusItemCardDefault'
859+
| 'borderRadiusItemCardEmbedded'
855860
| 'borderRadiusCodeEditor'
856861
| 'borderRadiusContainer'
857862
| 'borderRadiusControlCircularFocusRing'
@@ -877,6 +882,8 @@ export type BordersTokenName =
877882
| 'borderWidthAlertInlineEnd'
878883
| 'borderWidthCard'
879884
| 'borderWidthCardHighlighted'
885+
| 'borderWidthItemCard'
886+
| 'borderWidthItemCardHighlighted'
880887
| 'borderWidthButton'
881888
| 'borderWidthDropdown'
882889
| 'borderWidthField'
@@ -957,6 +964,10 @@ export type SpacingTokenName =
957964
| 'spaceCardHorizontalEmbedded'
958965
| 'spaceCardVerticalDefault'
959966
| 'spaceCardVerticalEmbedded'
967+
| 'spaceItemCardHorizontalDefault'
968+
| 'spaceItemCardHorizontalEmbedded'
969+
| 'spaceItemCardVerticalDefault'
970+
| 'spaceItemCardVerticalEmbedded'
960971
| 'spaceCodeEditorStatusFocusOutlineGutter'
961972
| 'spaceContainerContentTop'
962973
| 'spaceContainerHeaderTop'
@@ -1044,6 +1055,7 @@ export type SpacingTokenName =
10441055
| 'spaceXxxs';
10451056
export type ShadowsTokenName =
10461057
| 'shadowCard'
1058+
| 'shadowItemCard'
10471059
| 'shadowContainer'
10481060
| 'shadowContainerActive'
10491061
| 'shadowDropdown'

‎style-dictionary/visual-refresh/borders.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export const tokens: StyleDictionary.BordersDictionary = {
2626
borderRadiusCodeEditor: '{borderRadiusInput}',
2727
borderRadiusCardDefault: '{borderRadiusContainer}',
2828
borderRadiusCardEmbedded: '{borderRadiusChatBubble}',
29+
borderRadiusItemCardDefault: '{borderRadiusCardDefault}',
30+
borderRadiusItemCardEmbedded: '{borderRadiusCardEmbedded}',
2931
borderRadiusContainer: '16px',
3032
borderRadiusControlCircularFocusRing: '4px',
3133
borderRadiusControlDefaultFocusRing: '4px',
@@ -45,6 +47,8 @@ export const tokens: StyleDictionary.BordersDictionary = {
4547
borderLinkFocusRingShadowSpread: '2px',
4648
borderWidthCard: '{borderDividerSectionWidth}',
4749
borderWidthCardHighlighted: '{borderItemWidth}',
50+
borderWidthItemCard: '{borderWidthCard}',
51+
borderWidthItemCardHighlighted: '{borderWidthCardHighlighted}',
4852
borderWidthAlert: '2px',
4953
borderWidthAlertBlockStart: '{borderWidthAlert}',
5054
borderWidthAlertBlockEnd: '{borderWidthAlert}',

‎style-dictionary/visual-refresh/colors.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
4141
colorBackgroundCodeEditorPaneItemHover: { light: '{colorNeutral250}', dark: '{colorNeutral700}' },
4242
colorBackgroundCodeEditorStatusBar: { light: '{colorNeutral200}', dark: '{colorNeutral800}' },
4343
colorBackgroundCard: '{colorBackgroundContainerContent}',
44+
colorBackgroundItemCard: '{colorBackgroundCard}',
4445
colorBackgroundContainerContent: { light: '{colorWhite}', dark: '{colorNeutral850}' },
4546
colorBackgroundContainerHeader: { light: '{colorWhite}', dark: '{colorNeutral850}' },
4647
colorBackgroundControlChecked: { light: '{colorPrimary600}', dark: '{colorPrimary400}' },
@@ -135,6 +136,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
135136
colorBorderCodeEditorPaneItemHover: '{colorBorderDropdownItemHover}',
136137
colorBorderCard: '{colorBorderDividerDefault}',
137138
colorBorderCardHighlighted: '{colorBorderItemSelected}',
139+
colorBorderItemCard: '{colorBorderCard}',
140+
colorBorderItemCardHighlighted: '{colorBorderCardHighlighted}',
138141
colorBorderContainerDivider: 'transparent',
139142
colorBorderContainerTop: 'transparent',
140143
colorBorderControlChecked: '{colorBackgroundControlChecked}',

‎style-dictionary/visual-refresh/metadata/borders.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,16 @@ const metadata: StyleDictionary.MetadataIndex = {
134134
public: true,
135135
themeable: true,
136136
},
137+
borderWidthCard: {
138+
description: 'The border width of a card.',
139+
public: true,
140+
themeable: true,
141+
},
142+
borderWidthCardHighlighted: {
143+
description: 'The border width of a highlighted card.',
144+
public: true,
145+
themeable: true,
146+
},
137147
borderWidthButton: {
138148
description: 'The border width of buttons.',
139149
public: true,

‎style-dictionary/visual-refresh/metadata/colors.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ const metadata: StyleDictionary.MetadataIndex = {
6363
themeable: true,
6464
public: true,
6565
},
66+
colorBackgroundCard: {
67+
description: 'The background color of a card.',
68+
public: true,
69+
themeable: true,
70+
},
6671
colorBackgroundContainerContent: {
6772
description:
6873
'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 = {
384389
public: true,
385390
themeable: true,
386391
},
392+
colorBorderCard: {
393+
description: 'The border color of cards.',
394+
public: true,
395+
themeable: true,
396+
},
397+
colorBorderCardHighlighted: {
398+
description: 'The border color of highlighted cards.',
399+
public: true,
400+
themeable: true,
401+
},
387402
colorBorderContainerTop: {
388403
description:
389404
'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/shadows.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
import { StyleDictionary } from '../../utils/interfaces.js';
44

55
const metadata: StyleDictionary.MetadataIndex = {
6+
shadowCard: {
7+
description: 'The shadow of a card.',
8+
public: true,
9+
themeable: true,
10+
},
611
shadowContainer: { description: 'Shadow for containers and cards.' },
712
shadowContainerActive: { description: 'Shadow for containers and cards in active state.', public: true },
813
shadowDropup: {

‎style-dictionary/visual-refresh/metadata/spacing.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,26 @@ const metadata: StyleDictionary.MetadataIndex = {
114114
public: true,
115115
themeable: false,
116116
},
117+
spaceCardHorizontalDefault: {
118+
description: 'The default horizontal padding inside a card.',
119+
public: true,
120+
themeable: true,
121+
},
122+
spaceCardHorizontalEmbedded: {
123+
description: 'The horizontal padding inside embedded a card.',
124+
public: true,
125+
themeable: true,
126+
},
127+
spaceCardVerticalDefault: {
128+
description: 'The default vertical padding inside a card.',
129+
public: true,
130+
themeable: true,
131+
},
132+
spaceCardVerticalEmbedded: {
133+
description: 'The vertical padding inside embedded a card.',
134+
public: true,
135+
themeable: true,
136+
},
117137
spaceContainerHorizontal: {
118138
description: 'The horizontal padding inside a container.',
119139
public: true,

‎style-dictionary/visual-refresh/shadows.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { StyleDictionary } from '../utils/interfaces.js';
55

66
const tokens: StyleDictionary.ShadowsDictionary = {
77
shadowCard: 'none',
8+
shadowItemCard: '{shadowCard}',
89
shadowContainer: {
910
light: '0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12)', // 1px grey-200 faux border
1011
dark: '0px 1px 8px 2px rgba(0, 7, 22, 0.6)',

‎style-dictionary/visual-refresh/spacing.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ const tokens: StyleDictionary.SpacingDictionary = {
2121
spaceCardHorizontalEmbedded: { comfortable: '{spaceS}', compact: '10px' },
2222
spaceCardVerticalDefault: '{spaceScaledM}',
2323
spaceCardVerticalEmbedded: { comfortable: '10px', compact: '{spaceXs}' },
24+
spaceItemCardHorizontalDefault: '{spaceCardHorizontalDefault}',
25+
spaceItemCardHorizontalEmbedded: '{spaceCardHorizontalEmbedded}',
26+
spaceItemCardVerticalDefault: '{spaceCardVerticalDefault}',
27+
spaceItemCardVerticalEmbedded: '{spaceCardVerticalEmbedded}',
2428
spaceCodeEditorStatusFocusOutlineGutter: '-7px',
2529
spaceContainerContentTop: '{spaceXxs}',
2630
spaceContainerHeaderTop: '{spaceS}',

0 commit comments

Comments
 (0)