replace typography sass vars with css custom props

basher · Nov 7, 2024 · 04cbeb6 · 04cbeb6
1 parent 40f12c9
commit 04cbeb6
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 94 deletions.
diff --git a/ui/src/css/_root-css-vars.scss b/ui/src/css/_root-css-vars.scss
@@ -28,23 +28,21 @@ CSS custom properties for dynamic theming.
         'Courier New', monospace;
 
     // Type scale.
-    /* @link https://utopia.fyi/type/calculator?c=480,16,1.25,1440,20,1.414,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
-    --step--1: clamp(0.8333rem, 0.7811rem + 0.174vw, 0.9377rem);
-    --step-0: clamp(1rem, 0.875rem + 0.4167vw, 1.25rem);
-    --step-1: clamp(1.2rem, 0.9669rem + 0.7771vw, 1.6663rem);
-    --step-2: clamp(1.44rem, 1.0494rem + 1.3019vw, 2.2211rem);
-    --step-3: clamp(1.728rem, 1.1116rem + 2.0546vw, 2.9607rem);
-    --step-4: clamp(2.0736rem, 1.1371rem + 3.1218vw, 3.9467rem);
-    --step-5: clamp(2.4883rem, 1.102rem + 4.621vw, 5.2609rem);
-    --step-6: clamp(2.986rem, 0.9726rem + 6.7113vw, 7.0128rem);
+    /* @link https://utopia.fyi/type/calculator?c=480,16,1.25,1440,20,1.333,6,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+    --type-step--1: clamp(0.8rem, 0.7311rem + 0.2296vw, 0.9377rem);
+    --type-step-0: clamp(1rem, 0.875rem + 0.4167vw, 1.25rem);
+    --type-step-1: clamp(1.25rem, 1.0419rem + 0.6938vw, 1.6663rem);
+    --type-step-2: clamp(1.5625rem, 1.2332rem + 1.0977vw, 2.2211rem);
+    --type-step-3: clamp(1.9531rem, 1.4493rem + 1.6794vw, 2.9607rem);
+    --type-step-4: clamp(2.4414rem, 1.6888rem + 2.5088vw, 3.9467rem);
+    --type-step-5: clamp(3.0518rem, 1.9472rem + 3.6819vw, 5.2609rem);
+    --type-step-6: clamp(3.8147rem, 2.2157rem + 5.3302vw, 7.0128rem);
 
-    // NOTE:
-    // Can't use this --type-scale in fluid typography calculations & mixin.
-    // Need to use $type-scale instead, with same value.
-    --type-scale: 1.414;
+    /* Max line-length (aka measure) to improve readability of editorial content */
     --type-max-line-length: 65ch;
 
     // Layout.
+    --type-scale: 1.414;
     --gutter: 1.25rem;
     --gutter-xs: calc(var(--gutter-s) / var(--type-scale));
     --gutter-s: calc(var(--gutter) / var(--type-scale));

diff --git a/ui/src/css/base/_type.scss b/ui/src/css/base/_type.scss
@@ -26,63 +26,29 @@ Font-face rules.
     src: url('../fonts/roboto-light/roboto-light.woff') format('woff');
 }
 
-/*
-----------------------------------------------------------------------------
-Typefaces.
-----------------------------------------------------------------------------
-*/
-$base-font-family: var(--type-font-family), var(--type-font-fallback) !default;
-$base-font-family-title: var(--type-font-family-title),
-    var(--type-font-fallback) !default;
-$base-font-family-monospace: var(--type-font-family-monospace) !default;
+:root {
+    --base-font-family: var(--type-font-family), var(--type-font-fallback);
+    --base-font-family-title: var(--type-font-family-title),
+        var(--type-font-fallback);
+    --base-font-family-monospace: var(--type-font-family-monospace);
+
+    --base-font-size: 100%;
+    --base-font-size-2k: 110%; /* 2K screens */
+    --base-font-size-4k: 200%; /* 4K screens */
+
+    --base-line-height: 1.5;
+
+    /* Only adjust line-height when fonts get large */
+    --line-height-step-2: 1.3;
+    --line-height-step-3: 1.3;
+    --line-height-step-4: 1.2;
+    --line-height-step-5: 1.2;
+    --line-height-step-6: 1.2;
+}
 
 /*
 ----------------------------------------------------------------------------
 Base font settings.
 ----------------------------------------------------------------------------
 */
 $base-color: $color-text !default;
-$base-line-height: 1.5 !default;
-
-/*
-----------------------------------------------------------------------------
-Font sizes.
-----------------------------------------------------------------------------
-*/
-$base-font-size: 1rem !default;
-$base-font-size-2k: 110% !default; // 2K screens
-$base-font-size-4k: 200% !default; // 4K screens
-
-// Sizes below based on augmented 4th scale = 1.414.
-// NOTE:
-// Can't use --type-scale in fluid typography calculations & mixin.
-// Need to use this $type-scale instead, with same value.
-$type-scale: 1.414 !default;
-$font-size-s: 0.875rem !default;
-$font-size-h6: $base-font-size !default;
-$font-size-h5: $base-font-size * $type-scale !default;
-$font-size-h4: $font-size-h5 * $type-scale !default;
-$font-size-h3: $font-size-h4 * $type-scale !default;
-$font-size-h2: $font-size-h3 * $type-scale !default;
-$font-size-h1: $font-size-h2 * $type-scale !default;
-$font-size-xl: $font-size-h1 * $type-scale !default;
-
-/*
-----------------------------------------------------------------------------
-Line heights.
-
-Only adjust values when fonts get large.
-----------------------------------------------------------------------------
-*/
-$line-height-h4: 1.3 !default;
-$line-height-h3: 1.3 !default;
-$line-height-h2: 1.2 !default;
-$line-height-h1: 1.2 !default;
-$line-height-xl: 1.2 !default;
-
-/*
-----------------------------------------------------------------------------
-Max line-length (aka measure) to improve readability of editorial content.
-----------------------------------------------------------------------------
-*/
-$max-line-length: var(--type-max-line-length) !default;
diff --git a/ui/src/css/components/_accordion.scss b/ui/src/css/components/_accordion.scss
@@ -31,9 +31,9 @@ Dependencies.
 
     &__summary {
         @include focus;
-        font-family: $base-font-family-title;
-        font-size: var(--step-2);
-        line-height: $line-height-h4;
+        font-family: var(--base-font-family-title);
+        font-size: var(--type-step-2);
+        line-height: var(--line-height-step-2);
         margin-block-end: $gutter-s;
     }
 

diff --git a/ui/src/css/components/_button.scss b/ui/src/css/components/_button.scss
@@ -81,7 +81,7 @@ Dependencies.
 
     // Text (and text + icons) buttons only. Icon button sizes are determined by the context of their parent container font-size (or their icon size overrides).
     &--small {
-        font-size: $font-size-s;
+        font-size: var(--type-step--1);
         padding: $gutter-xs;
     }
 }
diff --git a/ui/src/css/form/_label.scss b/ui/src/css/form/_label.scss
@@ -11,6 +11,6 @@ Dependencies.
 
     &__hint {
         display: block;
-        font-size: $font-size-s;
+        font-size: var(--type-step--1);
     }
 }
diff --git a/ui/src/css/global/_typography.scss b/ui/src/css/global/_typography.scss
@@ -16,62 +16,62 @@ No need for font smoothing - see https://ui.dev/rwd/articles/font-smoothing
 
 html {
     @include bp-2k {
-        font-size: $base-font-size-2k;
+        font-size: var(--base-font-size-2k);
     }
     @include bp-4k {
-        font-size: $base-font-size-4k;
+        font-size: var(--base-font-size-4k);
     }
 
-    font-size: $base-font-size;
+    font-size: var(--base-font-size);
 }
 
 body {
-    font-family: $base-font-family;
-    font-size: var(--step-0);
-    line-height: $base-line-height;
+    font-family: var(--base-font-family);
+    font-size: var(--type-step-0);
+    line-height: var(--base-line-height);
 }
 
 :where(h1, h2, h3, h4, h5, h6, [class*='h--']) {
-    font-family: $base-font-family-title;
+    font-family: var(--base-font-family-title);
 }
 
 .h--xl {
-    font-size: var(--step-6);
-    line-height: $line-height-xl;
+    font-size: var(--type-step-6);
+    line-height: var(--line-height-step-6);
     margin-block-end: $gutter-clamp-xl;
 }
 
 :where(h1, .h--1) {
-    font-size: var(--step-5);
-    line-height: $line-height-h1;
+    font-size: var(--type-step-5);
+    line-height: var(--line-height-step-5);
     margin-block-end: $gutter-clamp-l;
 }
 
 :where(h2, .h--2) {
-    font-size: var(--step-4);
-    line-height: $line-height-h2;
+    font-size: var(--type-step-4);
+    line-height: var(--line-height-step-4);
     margin-block-end: $gutter-m;
 }
 
 :where(h3, .h--3) {
-    font-size: var(--step-3);
-    line-height: $line-height-h3;
+    font-size: var(--type-step-3);
+    line-height: var(--line-height-step-3);
     margin-block-end: $gutter-m;
 }
 
 :where(h4, .h--4) {
-    font-size: var(--step-2);
-    line-height: $line-height-h4;
+    font-size: var(--type-step-2);
+    line-height: var(--line-height-step-2);
     margin-block-end: $gutter-s;
 }
 
 :where(h5, .h--5) {
-    font-size: var(--step-1);
+    font-size: var(--type-step-1);
     margin-block-end: $gutter-xs;
 }
 
 :where(h6, .h--6) {
-    font-size: var(--step-0);
+    font-size: var(--type-step-0);
     margin-block-end: $gutter-xs;
 }
 
@@ -103,7 +103,7 @@ Miscellaneous styles.
 ----------------------------------------------------------------------------
 */
 :where(:is(p, li):not([class]), dd, small) {
-    max-inline-size: $max-line-length;
+    max-inline-size: var(--type-max-line-length);
 }
 
 :is(button, input, select, textarea, datalist, datalist > option) {
@@ -121,9 +121,9 @@ address {
 }
 
 small {
-    font-size: $font-size-s;
+    font-size: var(--type-step--1);
 }
 
 code {
-    font-family: $base-font-family-monospace;
+    font-family: var(--base-font-family-monospace);
 }
diff --git a/ui/src/css/utilities/_layout.scss b/ui/src/css/utilities/_layout.scss
@@ -14,7 +14,7 @@ Center content.
 .u-center {
     text-align: center;
 
-    // Setting auto margins on direct children without a CSS classname ensures that typographic elements whose max width is constrained by "$max-line-length" will be correctly centered.
+    // Setting auto margins on direct children without a CSS classname ensures that typographic elements whose max width is constrained by "--type-max-line-length" will be correctly centered.
     > :not([class]) {
         margin-inline: auto;
     }