Support theming border width and button font weight.

cloudscape-design · Nov 15, 2024 · 2f3ec80 · 2f3ec80
1 parent d8a1a65
commit 2f3ec80
Show file tree

Hide file tree

Showing 20 changed files with 49 additions and 31 deletions.
diff --git a/src/alert/styles.scss b/src/alert/styles.scss
@@ -25,8 +25,8 @@
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
-  border-block: awsui.$border-field-width solid;
-  border-inline: awsui.$border-field-width solid;
+  border-block: awsui.$border-width-alert solid;
+  border-inline: awsui.$border-width-alert solid;
   border-start-start-radius: awsui.$border-radius-alert;
   border-start-end-radius: awsui.$border-radius-alert;
   border-end-start-radius: awsui.$border-radius-alert;
@@ -90,7 +90,7 @@
 .text {
   min-inline-size: 0;
   // To account for vertical misalignment due to button borders
-  padding-block: awsui.$border-field-width;
+  padding-block: awsui.$border-width-alert;
   padding-inline: 0;
   margin-block: awsui.$space-scaled-xxs;
   margin-inline: awsui.$space-xxs;

diff --git a/src/anchor-navigation/styles.scss b/src/anchor-navigation/styles.scss
@@ -117,7 +117,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
   margin-inline-start: awsui.$space-xs;
   @include styles.font-body-s;
   @include styles.font-smoothing;
-  font-weight: awsui.$font-button-weight;
+  font-weight: awsui.$font-weight-button;
   letter-spacing: typography.$letter-spacing-bold-link;
   color: awsui.$color-text-link-default;
 }
diff --git a/src/flashbar/collapsible.scss b/src/flashbar/collapsible.scss
@@ -85,7 +85,7 @@ the grid layout will be:
      */
     min-block-size: calc(
       #{awsui.$line-height-body-m} + (
-          #{awsui.$space-scaled-xs} + #{awsui.$border-field-width} + #{awsui.$space-scaled-xxs}
+          #{awsui.$space-scaled-xs} + #{awsui.$border-width-field} + #{awsui.$space-scaled-xxs}
         ) * 2
     );
   }
@@ -241,7 +241,7 @@ the grid layout will be:
     row-gap: 0;
 
     > .header {
-      font-weight: awsui.$font-button-weight;
+      font-weight: awsui.$font-weight-button;
       display: inline-block;
     }
 

diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss
@@ -80,7 +80,7 @@
 }
 
 .flash-text {
-  margin-block: awsui.$border-field-width;
+  margin-block: awsui.$border-width-field;
   margin-inline: 0;
   padding-block: awsui.$space-scaled-xxs;
   padding-inline: awsui.$space-xxs;

diff --git a/src/internal/styles/forms/constants.scss b/src/internal/styles/forms/constants.scss
@@ -6,7 +6,7 @@
 @use '../utils/theming' as theming;
 @use '../tokens' as awsui;
 
-$control-border-width: awsui.$border-field-width;
+$control-border-width: awsui.$border-width-field;
 $control-border-radius: awsui.$border-radius-input;
 
 // Use for options in dropdowns

diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
@@ -238,8 +238,8 @@
     inset-inline-start: 0px;
     inset-inline-end: 0px;
     background-color: transparent;
-    border-block: awsui.$border-field-width solid awsui.$color-border-dropdown-container;
-    border-inline: awsui.$border-field-width solid awsui.$color-border-dropdown-container;
+    border-block: awsui.$border-width-field solid awsui.$color-border-dropdown-container;
+    border-inline: awsui.$border-width-field solid awsui.$color-border-dropdown-container;
     border-start-start-radius: awsui.$border-radius-dropdown;
     border-start-end-radius: awsui.$border-radius-dropdown;
     border-end-start-radius: awsui.$border-radius-dropdown;

diff --git a/src/internal/styles/typography/mixins.scss b/src/internal/styles/typography/mixins.scss
@@ -94,7 +94,7 @@
 }
 
 @mixin font-button {
-  font-weight: awsui.$font-button-weight;
+  font-weight: awsui.$font-weight-button;
   @include font-smoothing;
 }
 

diff --git a/src/link/constants.scss b/src/link/constants.scss
@@ -71,7 +71,7 @@ $link-variants: (
     'text-color-default': awsui.$color-text-link-default,
     'text-color-hover': awsui.$color-text-link-hover,
     'text-color-active': awsui.$color-text-link-hover,
-    'font-weight': awsui.$font-button-weight,
+    'font-weight': awsui.$font-weight-button,
     'decoration-line': none,
     'decoration-color': transparent,
     'decoration-color-hover': awsui.$color-text-link-button-underline-hover,
@@ -118,7 +118,7 @@ $link-styles: (
       'text-color-default': awsui.$color-text-link-button-normal-default,
       'text-color-hover': awsui.$color-text-link-button-normal-hover,
       'text-color-active': awsui.$color-text-link-button-normal-active,
-      'font-weight': awsui.$font-button-weight,
+      'font-weight': awsui.$font-weight-button,
       'decoration-line': none,
       'decoration-color': transparent,
       'decoration-color-hover': transparent,

diff --git a/src/popover/arrow.scss b/src/popover/arrow.scss
@@ -71,10 +71,10 @@
   }
 
   &-inner {
-    inset-block-start: 2px;
+    inset-block-start: awsui.$border-width-field;
 
     &.refresh {
-      inset-block-start: 3px;
+      inset-block-start: calc(awsui.$border-width-field + 1px);
     }
 
     &::after {

diff --git a/src/popover/body.scss b/src/popover/body.scss
@@ -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-field-width}));
+  margin-inline-end: calc(-1 * (#{awsui.$space-xxs} + #{awsui.$border-width-field}));
   flex: 0 0 auto;
   order: 1;
 }

diff --git a/src/popover/container.scss b/src/popover/container.scss
@@ -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-field-width solid awsui.$color-border-popover;
-  border-inline: awsui.$border-field-width solid awsui.$color-border-popover;
+  border-block: awsui.$border-width-field solid awsui.$color-border-popover;
+  border-inline: awsui.$border-width-field solid awsui.$color-border-popover;
 }
 
 .container-body-variant-annotation {

diff --git a/src/property-filter/filtering-token/styles.scss b/src/property-filter/filtering-token/styles.scss
@@ -40,8 +40,8 @@ $border-radius-inner-token: calc(#{awsui.$border-radius-token} / 2);
 
 .token,
 .inner-token {
-  border-block: awsui.$border-field-width solid constants.$token-border-color;
-  border-inline: awsui.$border-field-width solid constants.$token-border-color;
+  border-block: awsui.$border-width-field solid constants.$token-border-color;
+  border-inline: awsui.$border-width-field solid constants.$token-border-color;
   display: flex;
   align-items: stretch;
   background: constants.$token-background;

diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
@@ -88,8 +88,8 @@ $inlineLabel-border-radius: 2px;
     min-inline-size: max-content;
     block-size: 18px;
 
-    border-block: awsui.$border-field-width solid awsui.$color-border-item-selected;
-    border-inline: awsui.$border-field-width solid awsui.$color-border-item-selected;
+    border-block: awsui.$border-width-field solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-width-field solid awsui.$color-border-item-selected;
     padding-block: 0;
     padding-inline: awsui.$space-xxs;
     background: awsui.$color-background-item-selected;
@@ -135,7 +135,7 @@ $inlineLabel-border-radius: 2px;
   // Stepped gradient background for inline label overlap between input and background.
   background-image: linear-gradient(
     to bottom,
-    transparent calc(100% - (awsui.$border-field-width + awsui.$border-control-focus-ring-shadow-spread + 5px)),
+    transparent calc(100% - (awsui.$border-width-field + awsui.$border-control-focus-ring-shadow-spread + 5px)),
     awsui.$color-background-input-default 1px
   );
   background-position: bottom;

diff --git a/src/token-group/mixins.scss b/src/token-group/mixins.scss
@@ -9,8 +9,8 @@
 @mixin token-box-styles {
   position: relative;
   block-size: 100%;
-  border-block: awsui.$border-field-width solid constants.$token-border-color;
-  border-inline: awsui.$border-field-width solid constants.$token-border-color;
+  border-block: awsui.$border-width-field solid constants.$token-border-color;
+  border-inline: awsui.$border-width-field solid constants.$token-border-color;
   padding-block-start: styles.$control-padding-vertical;
   padding-block-end: styles.$control-padding-vertical;
   padding-inline-start: styles.$control-padding-horizontal;

diff --git a/style-dictionary/classic/borders.ts b/style-dictionary/classic/borders.ts
@@ -37,6 +37,8 @@ const tokens: StyleDictionary.BordersDictionary = {
   borderTableStickyWidth: '0px',
   borderLinkFocusRingOutline: '5px auto Highlight',
   borderLinkFocusRingShadowSpread: '0px',
+  borderWidthAlert: '1px',
+  borderWidthField: '1px',
 };
 
 const expandedTokens: StyleDictionary.ExpandedGlobalScopeDictionary = merge({}, parentTokens, tokens);

diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
@@ -486,7 +486,6 @@ export type ColorsTokenName =
 export type TypographyTokenName =
   | 'fontBoxValueLargeWeight'
   | 'fontButtonLetterSpacing'
-  | 'fontButtonWeight'
   | 'fontChartDetailSize'
   | 'fontDisplayLabelWeight'
   | 'fontExpandableHeadingSize'
@@ -512,6 +511,7 @@ export type TypographyTokenName =
   | 'fontTabsLineHeight'
   | 'fontTabsSize'
   | 'fontWayfindingLinkActiveWeight'
+  | 'fontWeightButton'
   | 'fontWeightHeadingXl'
   | 'fontWeightHeadingL'
   | 'fontWeightHeadingM'
@@ -571,7 +571,9 @@ export type BordersTokenName =
   | 'borderRadiusTutorialPanelItem'
   | 'borderTableStickyWidth'
   | 'borderLinkFocusRingOutline'
-  | 'borderLinkFocusRingShadowSpread';
+  | 'borderLinkFocusRingShadowSpread'
+  | 'borderWidthAlert'
+  | 'borderWidthField';
 export type MotionTokenName =
   | 'motionDurationExtraFast'
   | 'motionDurationExtraSlow'

diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
@@ -42,4 +42,6 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderTableStickyWidth: '1px',
   borderLinkFocusRingOutline: '0',
   borderLinkFocusRingShadowSpread: '2px',
+  borderWidthAlert: '1px',
+  borderWidthField: '1px',
 };
diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts
@@ -109,6 +109,16 @@ const metadata: StyleDictionary.MetadataIndex = {
     public: true,
     themeable: true,
   },
+  borderWidthAlert: {
+    description: 'The border width of alerts.',
+    public: true,
+    themeable: true,
+  },
+  borderWidthField: {
+    description: 'The border width of fields.',
+    public: true,
+    themeable: true,
+  },
 };
 
 export default metadata;
diff --git a/style-dictionary/visual-refresh/metadata/typography.ts b/style-dictionary/visual-refresh/metadata/typography.ts
@@ -6,9 +6,6 @@ const metadata: StyleDictionary.MetadataIndex = {
   fontButtonLetterSpacing: {
     description: 'The default letter spacing for button text.',
   },
-  fontButtonWeight: {
-    description: 'The default font weight for button text.',
-  },
   fontChartDetailSize: {
     description: 'Used for secondary chart text, e.g. mixed chart axes and pie chart label descriptions.',
   },
@@ -67,6 +64,11 @@ const metadata: StyleDictionary.MetadataIndex = {
     themeable: true,
     public: true,
   },
+  fontWeightButton: {
+    description: 'The default font weight for button text.',
+    themeable: true,
+    public: true,
+  },
   fontWeightHeadingXl: {
     description: 'The default font weight for h1s.',
     themeable: true,

diff --git a/style-dictionary/visual-refresh/typography.ts b/style-dictionary/visual-refresh/typography.ts
@@ -5,7 +5,6 @@ import { StyleDictionary } from '../utils/interfaces';
 export const tokens: StyleDictionary.TypographyDictionary = {
   fontBoxValueLargeWeight: '700',
   fontButtonLetterSpacing: '0.005em',
-  fontButtonWeight: '700',
   fontChartDetailSize: '{fontSizeBodyS}',
   fontDisplayLabelWeight: '700',
   fontExpandableHeadingSize: '{fontSizeHeadingS}',
@@ -31,6 +30,7 @@ export const tokens: StyleDictionary.TypographyDictionary = {
   fontTabsLineHeight: '{lineHeightHeadingS}',
   fontTabsSize: '{fontSizeHeadingS}',
   fontWayfindingLinkActiveWeight: '700',
+  fontWeightButton: '700',
   fontWeightHeadingXl: '700',
   fontWeightHeadingL: '700',
   fontWeightHeadingM: '700',