rename type variables

basher · Nov 8, 2024 · e711068 · e711068
1 parent a8cbee6
commit e711068
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 26 deletions.
diff --git a/ui/src/css/base/_type.scss b/ui/src/css/base/_type.scss
@@ -36,14 +36,22 @@ Font-face rules.
     --base-font-size-2k: 110%; /* 2K screens */
     --base-font-size-4k: 200%; /* 4K screens */
 
-    --base-line-height: 1.5;
+    --font-size-body: var(--type-step-0);
+    --font-size-s: var(--type-step--1);
+    --font-size-h5: var(--type-step-1);
+    --font-size-h4: var(--type-step-2);
+    --font-size-h3: var(--type-step-3);
+    --font-size-h2: var(--type-step-4);
+    --font-size-h1: var(--type-step-5);
+    --font-size-xl: var(--type-step-6);
 
     /* 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-line-height: 1.5;
+    --line-height-h4: 1.3;
+    --line-height-h3: 1.3;
+    --line-height-h2: 1.2;
+    --line-height-h1: 1.2;
+    --line-height-xl: 1.2;
 }
 
 /*

diff --git a/ui/src/css/components/_accordion.scss b/ui/src/css/components/_accordion.scss
@@ -33,7 +33,7 @@ Dependencies.
         @include focus;
         font-family: var(--base-font-family-title);
         font-size: var(--type-step-2);
-        line-height: var(--line-height-step-2);
+        line-height: var(--line-height-h4);
         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: var(--type-step--1);
+        font-size: var(--font-size-s);
         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: var(--type-step--1);
+        font-size: var(--font-size-s);
     }
 }
diff --git a/ui/src/css/global/_typography.scss b/ui/src/css/global/_typography.scss
@@ -27,7 +27,7 @@ html {
 
 body {
     font-family: var(--base-font-family);
-    font-size: var(--type-step-0);
+    font-size: var(--font-size-body);
     line-height: var(--base-line-height);
 }
 
@@ -36,42 +36,42 @@ body {
 }
 
 .h--xl {
-    font-size: var(--type-step-6);
-    line-height: var(--line-height-step-6);
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
     margin-block-end: $gutter-clamp-xl;
 }
 
 :where(h1, .h--1) {
-    font-size: var(--type-step-5);
-    line-height: var(--line-height-step-5);
+    font-size: var(--font-size-h1);
+    line-height: var(--line-height-h1);
     margin-block-end: $gutter-clamp-l;
 }
 
 :where(h2, .h--2) {
-    font-size: var(--type-step-4);
-    line-height: var(--line-height-step-4);
+    font-size: var(--font-size-h2);
+    line-height: var(--line-height-h2);
     margin-block-end: $gutter-m;
 }
 
 :where(h3, .h--3) {
-    font-size: var(--type-step-3);
-    line-height: var(--line-height-step-3);
+    font-size: var(--font-size-h3);
+    line-height: var(--line-height-h3);
     margin-block-end: $gutter-m;
 }
 
 :where(h4, .h--4) {
-    font-size: var(--type-step-2);
-    line-height: var(--line-height-step-2);
+    font-size: var(--font-size-h4);
+    line-height: var(--line-height-h4);
     margin-block-end: $gutter-s;
 }
 
 :where(h5, .h--5) {
-    font-size: var(--type-step-1);
+    font-size: var(--font-size-h5);
     margin-block-end: $gutter-xs;
 }
 
 :where(h6, .h--6) {
-    font-size: var(--type-step-0);
+    font-size: var(--font-size-body);
     margin-block-end: $gutter-xs;
 }
 
@@ -121,7 +121,7 @@ address {
 }
 
 small {
-    font-size: var(--type-step--1);
+    font-size: var(--font-size-s);
 }
 
 code {

diff --git a/ui/stories/2. Design System/Typography/Typography.mdx b/ui/stories/2. Design System/Typography/Typography.mdx
@@ -8,10 +8,19 @@ import * as Typography from './Typography.stories';
 - [Fluid typography](https://piccalil.li/tutorial/fluid-typography-with-css-clamp) has been implemented by leveraging [CSS clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp), resulting in
     - minimal usage of `font-size` declarations,
     - zero media queries.
-- The Sass `fluid-type` mixin outputs the **minimum**, **maximum** and **ideal** font sizes for specific elements, and an appropriate line-height. For example:
+- Uses the [Utopia fluid type calculator](https://utopia.fyi/) to output the **minimum**, **maximum** and **ideal** font sizes.
+
+For example:
+```
+body { font-size: var(--font-size-body); }
+```
+maps to:
+```
+:root { --font-size-body: var(--type-step-0); }
+```
+which equates to:
 ```
-body { @include fluid-type; }
-h1 { @include fluid-type($font-size-h2, $font-size-h1, $line-height-h1); }
+:root { --type-step-0: clamp(1rem, 0.875rem + 0.4167vw, 1.25rem); }
 ```
 
 ## Prose content (e.g. from CMS editor)