Skip to content

Commit

Permalink
Add new border with popover token.
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaemonCahill
DaemonCahill committed Nov 18, 2024
1 parent ee73c4b commit a5625a1
Show file tree
Hide file tree
Showing 8 changed files with 73 additions and 5 deletions.
60 changes: 60 additions & 0 deletions src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"$description": "The border width of form fields.",
"$value": "1px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "1px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -2602,6 +2606,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"$description": "The border width of form fields.",
"$value": "1px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "1px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -5123,6 +5131,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"$description": "The border width of form fields.",
"$value": "1px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "1px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -7644,6 +7656,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"$description": "The border width of form fields.",
"$value": "1px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "1px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -10165,6 +10181,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"$description": "The border width of form fields.",
"$value": "1px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "1px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -12686,6 +12706,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"$description": "The border width of form fields.",
"$value": "1px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "1px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -15207,6 +15231,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
"$description": "The border width of form fields.",
"$value": "1px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "1px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -17733,6 +17761,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"$description": "The border width of form fields.",
"$value": "2px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "2px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -20254,6 +20286,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"$description": "The border width of form fields.",
"$value": "2px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "2px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -22775,6 +22811,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"$description": "The border width of form fields.",
"$value": "2px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "2px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -25296,6 +25336,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"$description": "The border width of form fields.",
"$value": "2px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "2px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -27817,6 +27861,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"$description": "The border width of form fields.",
"$value": "2px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "2px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -30338,6 +30386,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"$description": "The border width of form fields.",
"$value": "2px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "2px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -32859,6 +32911,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"$description": "The border width of form fields.",
"$value": "2px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "2px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down Expand Up @@ -35380,6 +35436,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
"$description": "The border width of form fields.",
"$value": "2px",
},
"border-width-popover": {
"$description": "The border width of popovers.",
"$value": "2px",
},
"color-background-avatar-default": {
"$description": "The default background color of avatars.",
"$value": {
Expand Down
2 changes: 1 addition & 1 deletion src/popover/arrow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
}

&-inner {
inset-block-start: calc(awsui.$border-width-field + 1px);
inset-block-start: calc(awsui.$border-width-popover + 1px);

&::after {
border-start-start-radius: 1px;
Expand Down
2 changes: 1 addition & 1 deletion src/popover/body.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ $header-row-margin-block-end: awsui.$space-xs;
.dismiss {
margin-block: calc(-1 * $header-row-margin-block-end);
margin-inline-start: 0;
margin-inline-end: calc(-1 * (#{awsui.$space-xxs} + #{awsui.$border-width-field}));
margin-inline-end: calc(-1 * (#{awsui.$space-xxs} + #{awsui.$border-width-popover}));
flex: 0 0 auto;
order: 1;
}
Expand Down
4 changes: 2 additions & 2 deletions src/popover/container.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
border-end-end-radius: awsui.$border-radius-popover;
background-color: awsui.$color-background-popover;
box-shadow: awsui.$shadow-popover;
border-block: awsui.$border-width-field solid awsui.$color-border-popover;
border-inline: awsui.$border-width-field solid awsui.$color-border-popover;
border-block: awsui.$border-width-popover solid awsui.$color-border-popover;
border-inline: awsui.$border-width-popover solid awsui.$color-border-popover;
}

.container-body-variant-annotation {
Expand Down
1 change: 1 addition & 0 deletions style-dictionary/classic/borders.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const tokens: StyleDictionary.BordersDictionary = {
borderLinkFocusRingShadowSpread: '0px',
borderWidthAlert: '1px',
borderWidthField: '1px',
borderWidthPopover: '1px',
};

const expandedTokens: StyleDictionary.ExpandedGlobalScopeDictionary = merge({}, parentTokens, tokens);
Expand Down
3 changes: 2 additions & 1 deletion style-dictionary/utils/token-names.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -578,7 +578,8 @@ export type BordersTokenName =
| 'borderLinkFocusRingOutline'
| 'borderLinkFocusRingShadowSpread'
| 'borderWidthAlert'
| 'borderWidthField';
| 'borderWidthField'
| 'borderWidthPopover';
export type MotionTokenName =
| 'motionDurationExtraFast'
| 'motionDurationExtraSlow'
Expand Down
1 change: 1 addition & 0 deletions style-dictionary/visual-refresh/borders.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,5 @@ export const tokens: StyleDictionary.BordersDictionary = {
borderLinkFocusRingShadowSpread: '2px',
borderWidthAlert: '2px',
borderWidthField: '2px',
borderWidthPopover: '2px',
};
5 changes: 5 additions & 0 deletions style-dictionary/visual-refresh/metadata/borders.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,11 @@ const metadata: StyleDictionary.MetadataIndex = {
public: true,
themeable: true,
},
borderWidthPopover: {
description: 'The border width of popovers.',
public: true,
themeable: true,
},
};

export default metadata;

0 comments on commit a5625a1

Please sign in to comment.