feat: Add font smoothing to heavy font weights in VR (#590)

cloudscape-design · Dec 21, 2022 · 015b28e · 015b28e
1 parent c5f6ca8
commit 015b28e
Show file tree

Hide file tree

Showing 21 changed files with 85 additions and 17 deletions.
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -434,6 +434,8 @@ Object {
   "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
+  "font-smoothing-moz-osx": "auto",
+  "font-smoothing-webkit": "auto",
   "font-tabs-disabled-weight": "400",
   "font-tabs-line-height": "22px",
   "font-tabs-size": "14px",
@@ -1013,6 +1015,8 @@ Object {
   "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
+  "font-smoothing-moz-osx": "auto",
+  "font-smoothing-webkit": "auto",
   "font-tabs-disabled-weight": "400",
   "font-tabs-line-height": "22px",
   "font-tabs-size": "14px",
@@ -1592,6 +1596,8 @@ Object {
   "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
+  "font-smoothing-moz-osx": "auto",
+  "font-smoothing-webkit": "auto",
   "font-tabs-disabled-weight": "400",
   "font-tabs-line-height": "22px",
   "font-tabs-size": "14px",
@@ -2171,6 +2177,8 @@ Object {
   "font-link-primary-weight": "700",
   "font-panel-header-line-height": "22px",
   "font-panel-header-size": "18px",
+  "font-smoothing-moz-osx": "auto",
+  "font-smoothing-webkit": "auto",
   "font-tabs-disabled-weight": "400",
   "font-tabs-line-height": "22px",
   "font-tabs-size": "14px",
@@ -2750,6 +2758,8 @@ Object {
   "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "24px",
   "font-panel-header-size": "20px",
+  "font-smoothing-moz-osx": "grayscale",
+  "font-smoothing-webkit": "antialiased",
   "font-tabs-disabled-weight": "800",
   "font-tabs-line-height": "20px",
   "font-tabs-size": "16px",
@@ -3329,6 +3339,8 @@ Object {
   "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "24px",
   "font-panel-header-size": "20px",
+  "font-smoothing-moz-osx": "grayscale",
+  "font-smoothing-webkit": "antialiased",
   "font-tabs-disabled-weight": "800",
   "font-tabs-line-height": "20px",
   "font-tabs-size": "16px",
@@ -3908,6 +3920,8 @@ Object {
   "font-link-primary-weight": "\\"inherit\\"",
   "font-panel-header-line-height": "24px",
   "font-panel-header-size": "20px",
+  "font-smoothing-moz-osx": "grayscale",
+  "font-smoothing-webkit": "antialiased",
   "font-tabs-disabled-weight": "800",
   "font-tabs-line-height": "20px",
   "font-tabs-size": "16px",

diff --git a/src/box/text.scss b/src/box/text.scss
@@ -39,7 +39,7 @@
       @include base-styles.code-extra-defaults;
     }
     &.key-label-variant {
-      font-weight: awsui.$font-display-label-weight;
+      @include styles.font-label;
       color: awsui.$color-text-label;
       margin-bottom: awsui.$space-scaled-xxxs;
     }
@@ -48,6 +48,15 @@
       font-weight: awsui.$font-box-value-large-weight;
       color: inherit;
     }
+    &.h1-variant.font-weight-default,
+    &.h2-variant.font-weight-default,
+    &.h3-variant.font-weight-default,
+    &.h4-variant.font-weight-default,
+    &.h5-variant.font-weight-default,
+    &.value-large-variant.font-weight-default,
+    &.font-weight-heavy {
+      @include styles.font-smoothing;
+    }
   }
 }
 

diff --git a/src/button/styles.scss b/src/button/styles.scss
@@ -76,11 +76,11 @@
 .button {
   @include styles.styles-reset;
   @include styles.text-wrapping;
+  @include styles.font-button;
+  letter-spacing: awsui.$font-button-letter-spacing;
   border-radius: awsui.$border-radius-button;
   border: styles.$control-border-width solid;
   padding: styles.$control-padding-vertical awsui.$space-l;
-  font-weight: awsui.$font-button-weight;
-  letter-spacing: awsui.$font-button-letter-spacing;
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;

diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
@@ -63,6 +63,7 @@
   &-footer {
     color: awsui.$color-text-expandable-section-default;
     font-weight: awsui.$font-heading-s-weight;
+    @include styles.font-smoothing;
     font-size: awsui.$font-expandable-heading-size;
     letter-spacing: awsui.$font-heading-s-letter-spacing;
 

diff --git a/src/header/internal.tsx b/src/header/internal.tsx
@@ -61,7 +61,9 @@ export default function InternalHeader({
           )}
         >
           <HeadingTag className={clsx(styles.heading, styles[`heading-variant-${variantOverride}`])}>
-            <span className={styles['heading-text']}>{children}</span>
+            <span className={clsx(styles['heading-text'], styles[`heading-text-variant-${variantOverride}`])}>
+              {children}
+            </span>
             {counter !== undefined && <span className={styles.counter}> {counter}</span>}
           </HeadingTag>
           {info && <span className={styles.info}>{info}</span>}

diff --git a/src/header/styles.scss b/src/header/styles.scss
@@ -106,18 +106,21 @@
   @include styles.text-wrapping;
   color: awsui.$color-text-heading-default;
 
+  &-variant-h1 {
+    font-size: awsui.$font-heading-xl-size;
+  }
   &-variant-h2,
   &-variant-h3 {
     padding: awsui.$space-scaled-xxs 0;
   }
   &-variant-h2 {
-    @include styles.font-heading-l;
+    font-size: awsui.$font-heading-l-size;
     &-refresh {
       padding-top: awsui.$space-scaled-2x-xxs;
     }
   }
   &-variant-h3 {
-    @include styles.font-heading-m;
+    font-size: awsui.$font-heading-m-size;
   }
 }
 
@@ -161,20 +164,27 @@
   @include styles.info-link-spacing();
 
   &-variant-h1 {
-    @include styles.font-heading-xl;
+    @include styles.font(heading-xl);
   }
   &-variant-h2 {
-    font-weight: awsui.$font-heading-l-weight;
-    line-height: awsui.$font-heading-l-line-height;
+    @include styles.font(heading-l);
   }
   &-variant-h3 {
-    font-weight: awsui.$font-heading-m-weight;
-    line-height: awsui.$font-heading-m-line-height;
+    @include styles.font(heading-m);
   }
 }
 
 .heading-text {
   /* used in test-utils */
+  &-variant-h1 {
+    @include styles.font-heading-xl;
+  }
+  &-variant-h2 {
+    @include styles.font-heading-l;
+  }
+  &-variant-h3 {
+    @include styles.font-heading-m;
+  }
 }
 
 .counter {

diff --git a/src/internal/components/menu-dropdown/styles.scss b/src/internal/components/menu-dropdown/styles.scss
@@ -10,6 +10,7 @@
 .button {
   @include styles.styles-reset;
   @include styles.text-wrapping;
+  @include styles.font-button;
 
   display: flex;
   flex-wrap: nowrap;
@@ -24,7 +25,6 @@
 
   border: transparent;
   background: transparent;
-  font-weight: awsui.$font-button-weight;
   color: awsui.$color-text-interactive-default;
 
   &:hover {

diff --git a/src/internal/styles/links.scss b/src/internal/styles/links.scss
@@ -59,5 +59,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
 
 // Need style as a mixin for tag editor only, because it needs special keyup/keydown behavior and thus cannot use the Link component
 @mixin link-recovery {
+  @include typography.font-smoothing;
   @include link-style(map.get(constants.$link-variants, 'recovery'));
 }
diff --git a/src/internal/styles/typography/mixins.scss b/src/internal/styles/typography/mixins.scss
@@ -6,6 +6,12 @@
 @use '../tokens' as awsui;
 @use './constants' as constants;
 
+// To reduce bluriness of heavy font weight on MacOS
+@mixin font-smoothing {
+  -webkit-font-smoothing: awsui.$font-smoothing-webkit;
+  -moz-osx-font-smoothing: awsui.$font-smoothing-moz-osx;
+}
+
 @mixin default-text-style {
   @include font-body-m;
   color: awsui.$color-text-body-default;
@@ -29,6 +35,7 @@
   line-height: awsui.$font-heading-xs-line-height;
   @if $weight {
     font-weight: awsui.$font-heading-xs-weight;
+    @include font-smoothing;
   }
 }
 
@@ -38,6 +45,7 @@
   letter-spacing: awsui.$font-heading-s-letter-spacing;
   @if $weight {
     font-weight: awsui.$font-heading-s-weight;
+    @include font-smoothing;
   }
 }
 
@@ -47,6 +55,7 @@
   letter-spacing: awsui.$font-heading-m-letter-spacing;
   @if $weight {
     font-weight: awsui.$font-heading-m-weight;
+    @include font-smoothing;
   }
 }
 
@@ -56,6 +65,7 @@
   letter-spacing: awsui.$font-heading-l-letter-spacing;
   @if $weight {
     font-weight: awsui.$font-heading-l-weight;
+    @include font-smoothing;
   }
 }
 
@@ -65,6 +75,7 @@
   letter-spacing: awsui.$font-heading-xl-letter-spacing;
   @if $weight {
     font-weight: awsui.$font-heading-xl-weight;
+    @include font-smoothing;
   }
 }
 
@@ -80,6 +91,11 @@
   letter-spacing: inherit;
 }
 
+@mixin font-button {
+  font-weight: awsui.$font-button-weight;
+  @include font-smoothing;
+}
+
 @mixin font-label {
   @include font-body-m();
   font-weight: awsui.$font-display-label-weight;
@@ -89,6 +105,7 @@
   font-size: awsui.$font-panel-header-size;
   line-height: awsui.$font-panel-header-line-height;
   font-weight: awsui.$font-heading-l-weight;
+  @include font-smoothing;
 }
 
 @mixin font-code-inline {

diff --git a/src/link/styles.scss b/src/link/styles.scss
@@ -29,11 +29,15 @@ $font-sizes: (
 
   @each $variant in map.keys(constants.$link-variants) {
     &.variant-#{$variant} {
+      @if $variant == 'info' {
+        @include styles.font-smoothing;
+      }
       @include styles.link-style(map.get(constants.$link-variants, $variant));
     }
   }
 
   &.button {
+    @include styles.font-smoothing;
     @include styles.link-style(map.get(constants.$link-styles, 'button'));
   }
 

diff --git a/src/pagination/styles.scss b/src/pagination/styles.scss
@@ -64,6 +64,7 @@
   }
   &.button-current {
     font-weight: awsui.$font-wayfinding-link-active-weight;
+    @include styles.font-smoothing;
     color: awsui.$color-text-interactive-active;
     &.button-disabled {
       color: awsui.$color-text-pagination-page-number-active-disabled;

diff --git a/src/pie-chart/styles.scss b/src/pie-chart/styles.scss
@@ -131,7 +131,7 @@
 
 /* stylelint-disable-next-line selector-max-type */
 .label-text > text {
-  font-weight: awsui.$font-display-label-weight;
+  @include styles.font-label;
   fill: awsui.$color-text-heading-default;
   dominant-baseline: middle;
 }

diff --git a/src/progress-bar/styles.scss b/src/progress-bar/styles.scss
@@ -40,7 +40,7 @@
     font-weight: styles.$font-weight-bold;
   }
   &-key-value {
-    font-weight: awsui.$font-display-label-weight;
+    @include styles.font-label;
     color: awsui.$color-text-label;
     margin-bottom: awsui.$space-scaled-xxxs;
   }

diff --git a/src/segmented-control/segment.scss b/src/segmented-control/segment.scss
@@ -36,11 +36,11 @@ $selected-color: awsui.$color-text-segment-active;
 .segment {
   @include styles.font-body-m;
   @include styles.text-flex-wrapping;
+  @include styles.font-button;
+  letter-spacing: 0.25px;
   border: styles.$control-border-width solid $default-border-color;
   padding: styles.$control-padding-vertical awsui.$space-l;
   border-right-width: 0;
-  font-weight: awsui.$font-button-weight;
-  letter-spacing: 0.25px;
   background: $default-background;
   color: $default-color;
   overflow: visible;

diff --git a/src/side-navigation/styles.scss b/src/side-navigation/styles.scss
@@ -99,6 +99,7 @@
 
 .link-active {
   font-weight: awsui.$font-wayfinding-link-active-weight;
+  @include styles.font-smoothing;
   color: awsui.$color-text-accent;
 }
 

diff --git a/src/table/header-cell/styles.scss b/src/table/header-cell/styles.scss
@@ -15,6 +15,7 @@
   background: awsui.$color-background-table-header;
   color: awsui.$color-text-column-header;
   font-weight: awsui.$font-heading-s-weight;
+  @include styles.font-smoothing;
   padding: awsui.$space-scaled-xxs awsui.$space-scaled-xs;
   &-sticky {
     border-bottom: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;

diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss
@@ -100,6 +100,7 @@ $label-horizontal-spacing: awsui.$space-l;
   font-size: awsui.$font-tabs-size;
   line-height: awsui.$font-tabs-line-height;
   font-weight: awsui.$font-wayfinding-link-active-weight;
+  @include styles.font-smoothing;
   color: awsui.$color-text-interactive-default;
 
   &:hover {

diff --git a/src/top-navigation/styles.scss b/src/top-navigation/styles.scss
@@ -313,7 +313,7 @@
   }
 
   &-utility {
-    font-weight: awsui.$font-button-weight;
+    @include styles.font-button;
     border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
   }
 

diff --git a/style-dictionary/classic/typography.ts b/style-dictionary/classic/typography.ts
@@ -41,6 +41,8 @@ const tokens: StyleDictionary.TypographyDictionary = {
   fontLinkPrimaryWeight: '700',
   fontPanelHeaderLineHeight: '{fontHeadingLLineHeight}',
   fontPanelHeaderSize: '{fontHeadingLSize}',
+  fontSmoothingWebkit: 'auto',
+  fontSmoothingMozOsx: 'auto',
   fontTabsDisabledWeight: '400',
   fontTabsLineHeight: '{fontBodyMLineHeight}',
   fontTabsSize: '{fontBodyMSize}',

diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
@@ -460,6 +460,8 @@ export type TypographyTokenName =
   | 'fontLinkPrimaryWeight'
   | 'fontPanelHeaderLineHeight'
   | 'fontPanelHeaderSize'
+  | 'fontSmoothingWebkit'
+  | 'fontSmoothingMozOsx'
   | 'fontTabsDisabledWeight'
   | 'fontTabsLineHeight'
   | 'fontTabsSize'

diff --git a/style-dictionary/visual-refresh/typography.ts b/style-dictionary/visual-refresh/typography.ts
@@ -47,6 +47,8 @@ export const tokens: StyleDictionary.TypographyDictionary = {
   fontLinkPrimaryWeight: '"inherit"',
   fontPanelHeaderLineHeight: '{fontHeadingMLineHeight}',
   fontPanelHeaderSize: '{fontHeadingMSize}',
+  fontSmoothingWebkit: 'antialiased',
+  fontSmoothingMozOsx: 'grayscale',
   fontTabsDisabledWeight: '{fontWayfindingLinkActiveWeight}',
   fontTabsLineHeight: '{fontHeadingSLineHeight}',
   fontTabsSize: '{fontHeadingSSize}',