Update font sizes

- Add new fluid type scale using CSS custom properties (CSS variables), generated using utopia.fyi
- Replace SCSS font size mixins with CSS variables for the new font sizes

Author: NicolaSaunders

assets-src/styles/advanced.scss

@@ -23,7 +23,6 @@
 /*------------------------------------*\
     #Mixins
 \*------------------------------------*/
-@import "sass/20-mixins/font-sizes";
 @import "sass/20-mixins/media-query";
 @import "sass/20-mixins/stack";
 

assets-src/styles/core.scss

@@ -9,6 +9,7 @@
 @import "sass/00-settings/colors";
 //@import "sass/00-settings/debug";
 @import "sass/00-settings/fonts";
+@import "sass/00-settings/font-sizes";
 @import "sass/00-settings/typesetting";
 
 
@@ -24,7 +25,6 @@
 /*------------------------------------*\
     #Mixins
 \*------------------------------------*/
-@import "sass/20-mixins/font-sizes";
 @import "sass/20-mixins/media-query";
 @import "sass/20-mixins/stack";
 

assets-src/styles/sass/00-settings/_font-sizes.scss

@@ -0,0 +1,20 @@
+/*------------------------------------*\
+    #Font sizes
+
+    Fluid type calculations generated using Utopia:
+    https://utopia.fyi/type/calculator/?c=320,16,1.125,1120,18,1.125,7,1,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
+
+    CSS custom property names have been adapted from Utopia, add namespacing, give explicit usage context and use kebab case.
+\*------------------------------------*/
+
+:root {
+    --w3c-text-01: clamp(0.8889rem, 0.8444rem + 0.2222vw, 1rem);
+    --w3c-text-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+    --w3c-text-1: clamp(1.125rem, 1.0688rem + 0.2813vw, 1.2656rem);
+    --w3c-text-2: clamp(1.2656rem, 1.2023rem + 0.3164vw, 1.4238rem);
+    --w3c-text-3: clamp(1.4238rem, 1.3526rem + 0.356vw, 1.6018rem);
+    --w3c-text-4: clamp(1.6018rem, 1.5217rem + 0.4005vw, 1.802rem);
+    --w3c-text-5: clamp(1.802rem, 1.7119rem + 0.4505vw, 2.0273rem);
+    --w3c-text-6: clamp(2.0273rem, 1.9259rem + 0.5068vw, 2.2807rem);
+    --w3c-text-7: clamp(2.2807rem, 2.1667rem + 0.5702vw, 2.5658rem);
+}

assets-src/styles/sass/30-base/_forms.scss

@@ -45,7 +45,8 @@ Group inputs to line up side-by-side
 }
 
 .field-legend {
-	@include txt-saturn;
+	//@include txt-saturn;
+	font-size: var(--w3c-text-1);
 	font-weight: bold;
 }
 
@@ -76,7 +77,8 @@ label,
 }
 
 .field-hint {
-	@include txt-pluto;
+	//@include txt-pluto;
+	font-size: var(--w3c-text-01);
 	color: $storm-gray;
 	// margin-block-end: 0.25rem;
 	max-inline-size: rem($text-measure);
@@ -597,7 +599,8 @@ Progress bar
 	}
 
 	> span {
-		@include txt-pluto;
+		//@include txt-pluto;
+		font-size: var(--w3c-text-01);
 		padding: rem(10);
 
 		@include mq($bp-tab-small) {

assets-src/styles/sass/30-base/_html-elements.scss

@@ -24,7 +24,8 @@ i {
 small,
 .small,
 .small-caps {
-	@include txt-eris;
+	//@include txt-eris;
+	font-size: var(--w3c-text-01);
 }
 
 

assets-src/styles/sass/30-base/_typography.scss

@@ -4,7 +4,7 @@
 
 body {
 	font-family: $font-family;
-	font-size: 1rem; // Equivalent to 16px browser default
+	font-size: var(--w3c-text-0);
 	font-style: $font-style;
 	font-weight: $font-weight;
 	line-height: 1.5;
@@ -25,46 +25,37 @@ h1, h2, h3, h4, h5, h6 {
 // 	margin-bottom: 1em;
 // }
 
-h1,
-.txt-venus {
-	@include txt-venus;
+:where(h1, .venus, .h1) {
+	font-size: var(--w3c-text-5);
 }
 
-h2,
-.txt-earth {
-	@include txt-earth;
+:where(h2, .txt-earth, .h2) {
+	font-size: var(--w3c-text-4);
 }
 
-h3,
-.txt-mars {
-	@include txt-mars;
+:where(h3, .txt-mars, .h3) {
+	font-size: var(--w3c-text-3);
 }
 
-h4,
-.txt-jupiter {
-	@include txt-jupiter;
+:where(h4, .txt-jupiter, .h4) {
+	font-size: var(--w3c-text-2);
 }
 
-h5,
-.txt-saturn {
-	@include txt-saturn;
+:where(h5, .txt-saturn, .h5) {
+	font-size: var(--w3c-text-1);
 }
 
-h6 {
-	font-size: 1rem;
+:where(h6, .h6) {
+	font-size: var(--w3c-text-0);
 }
 
 .lead {
 	font-size: rem(23);
 	line-height: calc(33.6 / 24);
 }
 
-.txt-pluto {
-	@include txt-pluto;
-}
-
-.txt-eris {
-	@include txt-eris;
+:where(.txt-pluto, .txt-eris, .text-sm) {
+	font-size: var(--w3c-text-01);
 }
 
 

assets-src/styles/sass/50-core-components/_breadcrumbs.scss

@@ -19,9 +19,10 @@
 
 
 .breadcrumbs a {
-	@include txt-pluto;
+	//@include txt-pluto;
 	color: $off-black;
 	display: block;
+	font-size: var(--w3c-text-01);
 	padding-block: rem(11);
 
 	&:visited,

assets-src/styles/sass/50-core-components/_cards.scss

@@ -57,7 +57,8 @@
 }
 
 .card__heading {
-	@include txt-saturn;
+	//@include txt-saturn;
+	font-size: var(--w3c-text-1);
 }
 
 .card__image img {

assets-src/styles/sass/50-core-components/_collapsibles.scss

@@ -21,12 +21,14 @@
 // }
 
 [data-heading="collapsibles"] h3 {
-	@include txt-saturn;
+	//@include txt-saturn;
+	font-size: var(--w3c-text-1);
 }
 
 [data-heading="collapsibles"] > * {
-	@include txt-pluto;
+	//@include txt-pluto;
 	display: block;
+	font-size: var(--w3c-text-01);
 	font-weight: normal;
 	// margin-block-start: 1rem;
 }

assets-src/styles/sass/50-core-components/_comments.scss

@@ -7,7 +7,8 @@
 	padding-block: rem(50);
 
 	h2 {
-		@include txt-mars;
+		//@include txt-mars;
+		font-size: var(--w3c-text-3);
 	}
 
 }
@@ -89,8 +90,9 @@
 }
 
 [data-replylink] {
-	@include txt-pluto;
+	//@include txt-pluto;
 	align-self: flex-start;
+	font-size: var(--w3c-text-01);
 	padding-block: rem(11);
 }