Convert typography to use rem units with px fallbacks (#2302)

* add temp vars * base styles * lint * cleanup * lint * Create nervous-experts-camp.md * lint * Stylelint auto-fixes * Update nervous-experts-camp.md Co-authored-by: Actions Auto Build <actions@github.com>
primer · Nov 21, 2022 · 412d782 · 412d782
1 parent 3b397d9
commit 412d782
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 88 deletions.
diff --git a/.changeset/nervous-experts-camp.md b/.changeset/nervous-experts-camp.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Convert typography to use `rem` units with `px` fallbacks 
diff --git a/src/base/base.scss b/src/base/base.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type, selector-no-qualifying-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type, primer/typography
 * {
   box-sizing: border-box;
 }
@@ -14,7 +14,7 @@ button {
 
 body {
   font-family: $body-font;
-  font-size: $body-font-size;
+  font-size: var(--body-font-size, $body-font-size);
   line-height: $body-line-height;
   color: var(--color-fg-default);
   background-color: var(--color-canvas-default);

diff --git a/src/primitives/index.scss b/src/primitives/index.scss
@@ -7,3 +7,4 @@
 @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css';
 @import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css';
 @import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css';
+@import './temp-typography-tokens.scss';
diff --git a/src/primitives/temp-typography-tokens.scss b/src/primitives/temp-typography-tokens.scss
@@ -0,0 +1,22 @@
+// Temporary typography vars in rem units variables
+:root {
+  // Heading sizes - mobile
+  // h4-h6 remain the same size on both mobile & desktop
+  --h00-size-mobile: 2.5rem;
+  --h0-size-mobile: 2rem;
+  --h1-size-mobile: 1.625rem;
+  --h2-size-mobile: 1.375rem;
+  --h3-size-mobile: 1.125rem;
+
+  // Heading sizes - desktop
+  --h00-size: 3rem;
+  --h0-size: 2.5rem;
+  --h1-size: 2rem;
+  --h2-size: 1.5rem;
+  --h3-size: 1.25rem;
+  --h4-size: 1rem;
+  --h5-size: 0.875rem;
+  --h6-size: 0.75rem;
+  --body-font-size: 0.875rem;
+  --font-size-small: 0.75rem;
+}
diff --git a/src/support/mixins/typography.scss b/src/support/mixins/typography.scss
@@ -10,57 +10,63 @@
 // Heading mixins for use within components
 // These match heading utilities in utilities/typography
 @mixin h1 {
-  font-size: $h1-size;
+  font-size: var(--h1-size, $h1-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h2 {
-  font-size: $h2-size;
+  font-size: var(--h2-size, $h2-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h3 {
-  font-size: $h3-size;
+  font-size: var(--h3-size, $h3-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h4 {
-  font-size: $h4-size;
+  font-size: var(--h4-size, $h4-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h5 {
-  font-size: $h5-size;
+  font-size: var(--h5-size, $h5-size);
   font-weight: $font-weight-bold;
 }
 
 @mixin h6 {
-  font-size: $h6-size;
+  font-size: var(--h6-size, $h6-size);
   font-weight: $font-weight-bold;
 }
 
 // Responsive heading mixins
 // There are no responsive mixins for h4-h6 because they are small
 // and don't need to be smaller on mobile.
 @mixin f1-responsive {
-  font-size: $h1-size-mobile;
+  font-size: var(--h1-size-mobile, $h1-size-mobile);
 
   // 32px on desktop
-  @include breakpoint(md) { font-size: $h1-size; }
+  @include breakpoint(md) {
+    font-size: var(--h1-size, $h1-size);
+  }
 }
 
 @mixin f2-responsive {
-  font-size: $h2-size-mobile;
+  font-size: var(--h2-size-mobile, $h2-size-mobile);
 
   // 24px on desktop
-  @include breakpoint(md) { font-size: $h2-size; }
+  @include breakpoint(md) {
+    font-size: var(--h2-size, $h2-size);
+  }
 }
 
 @mixin f3-responsive {
-  font-size: $h3-size-mobile;
+  font-size: var(--h3-size-mobile, $h3-size-mobile);
 
   // 20px on desktop
-  @include breakpoint(md) { font-size: $h3-size; }
+  @include breakpoint(md) {
+    font-size: var(--h3-size, $h3-size);
+  }
 }
 
 // These use the mixins from above for responsive heading sizes.

diff --git a/src/support/variables/typography.scss b/src/support/variables/typography.scss
@@ -21,10 +21,10 @@ $h6-size: 12px !default;
 $font-size-small: 12px !default;
 
 // Font weights
-$font-weight-bold: 600 !default;
-$font-weight-semibold: 500 !default;
-$font-weight-normal: 400 !default;
-$font-weight-light: 300 !default;
+$font-weight-bold: var(--base-text-weight-medium, 600) !default;
+$font-weight-semibold: var(--base-text-weight-semibold, 500) !default;
+$font-weight-normal: var(--base-text-weight-normal, 400) !default;
+$font-weight-light: var(--base-text-weight-light, 300) !default;
 
 // Line heights
 $lh-condensed-ultra: 1 !default;