From 04cbeb65a9912e2a54853531a9bed15cfe760e42 Mon Sep 17 00:00:00 2001 From: basher Date: Thu, 7 Nov 2024 14:55:22 +0000 Subject: [PATCH] replace typography sass vars with css custom props --- ui/src/css/_root-css-vars.scss | 24 ++++----- ui/src/css/base/_type.scss | 72 +++++++-------------------- ui/src/css/components/_accordion.scss | 6 +-- ui/src/css/components/_button.scss | 2 +- ui/src/css/form/_label.scss | 2 +- ui/src/css/global/_typography.scss | 44 ++++++++-------- ui/src/css/utilities/_layout.scss | 2 +- 7 files changed, 58 insertions(+), 94 deletions(-) diff --git a/ui/src/css/_root-css-vars.scss b/ui/src/css/_root-css-vars.scss index 9c3afb8..e330ea1 100644 --- 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 index 071d1c4..7a8a709 100644 --- a/ui/src/css/base/_type.scss +++ b/ui/src/css/base/_type.scss @@ -26,15 +26,25 @@ 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; +} /* ---------------------------------------------------------------------------- @@ -42,47 +52,3 @@ 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 index 61bfe47..1247604 100644 --- 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 index 884185c..3d76acb 100644 --- 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 index 5d34a53..6a8c186 100644 --- 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 index b223e83..02dbee5 100644 --- 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 index e6b165f..8bdaef6 100644 --- 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; }