From addf8e0ef4d8162eaa37a9625faf474eb235c0e5 Mon Sep 17 00:00:00 2001
From: Prasanta Kumar Dutta <7580745+pkd2512@users.noreply.github.com>
Date: Fri, 4 Aug 2023 18:50:11 +0530
Subject: [PATCH] add font sizes and fluid spacers

---
 .../GraphicBlock/GraphicBlock.svelte          |   2 +-
 src/components/Headline/Headline.svelte       |   6 +-
 .../SimpleTimeline/SimpleTimeline.svelte      |   2 +-
 .../SiteHeadline/SiteHeadline.svelte          |  40 ++-
 src/components/Theme/themes/common.js         |  23 +-
 .../styles/tokens/layout/spacers.stories.mdx  |   8 +-
 src/scss/reset/_typography.scss               |  26 +-
 src/scss/tokens/spacers/_fluid-margin.scss    |  62 +++-
 src/scss/tokens/spacers/_fluid-padding.scss   |  50 +++
 .../tokens/spacers/mixins/_fluid-margin.scss  | 296 ++++++++++++++----
 .../tokens/spacers/mixins/_fluid-padding.scss | 281 +++++++++++++----
 src/scss/tokens/text/_font-weight.scss        |   8 +-
 src/scss/tokens/text/mixins/_font-weight.scss |   4 +-
 13 files changed, 643 insertions(+), 165 deletions(-)

diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index b2f512a0..90896b6e 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -142,7 +142,7 @@
       @include text-sm;
       @include text-primary;
       &:last-of-type {
-        @extend %fmb-1;
+        @include fmb-1;
       }
     }
     // Notes text...
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 85234b8c..8628af00 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -109,8 +109,8 @@
   header.headline {
     :global {
       h1 {
-        @extend %fmy-1;
-        @extend %fmx-auto;
+        @include fmy-1;
+        @include fmx-auto;
       }
 
       p {
@@ -129,7 +129,7 @@
     }
     .article-metadata {
       .byline-container {
-        @extend %fmb-1;
+        @include fmb-1;
       }
 
       .byline {
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
index de9235d5..8aff6eb9 100644
--- a/src/components/SimpleTimeline/SimpleTimeline.svelte
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -121,7 +121,7 @@
         }
       }
       :global(p) {
-        @extend %fmb-2;
+        @include fmb-2;
         @include leading-normal;
         @include font-light;
         @include text-sm;
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 9b917a9f..82e18c27 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -77,12 +77,6 @@
   let hedClass;
   $: {
     switch (hedSize) {
-      // case 'biggest':
-      //   hedClass = 'text-6xl';
-      //   break;
-      // case 'bigger':
-      //   hedClass = 'text-5xl';
-      //   break;
       case 'big':
         hedClass = 'text-4xl';
         break;
@@ -100,7 +94,7 @@
     <div class="title">
       {#if section}
         <p
-          class="section-title mb-2 font-subhed text-sm text-secondary font-bold"
+          class="section-title mb-0 font-subhed text-xxs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
         >
           {#if sectionUrl}
             <a class="no-underline !text-secondary" href="{sectionUrl}"
@@ -112,14 +106,18 @@
         </p>
       {/if}
       {#if hed}
-        <h1 class="my-0 font-hed text-primary leading-none {hedClass}">
+        <h1
+          class="font-hed text-primary leading-none font-medium fmt-1 fmb-3 {hedClass}"
+        >
           {hed}
         </h1>
       {/if}
     </div>
     <aside class="article-metadata mt-2 font-subhed">
       <div class="byline-container">
-        <div class="byline text-sm text-primary font-bold leading-tight">
+        <div
+          class="byline text-xs text-primary font-bold leading-tighter fmb-1"
+        >
           By
           {#if authors.length > 0}
             {#each authors as author, i}
@@ -140,7 +138,7 @@
         </div>
       </div>
       <div
-        class="dateline-container mt-1.5 text-secondary text-xxs uppercase leading-normal tracking-normal"
+        class="dateline-container fmt-0 text-secondary text-xs leading-tighter"
       >
         {#if isValidDate(publishTime)}
           <div>
@@ -176,10 +174,32 @@
 </Block>
 
 <style lang="scss">
+  @use '../../scss/mixins' as *;
   .byline a {
     text-decoration: none;
     &:hover {
       text-decoration: underline;
     }
   }
+
+  @media (max-width: $column-width-narrow) {
+    h1 {
+      @include font-semibold;
+    }
+  }
+
+  @media (min-width: $column-width-narrower) {
+    .dateline-container {
+      display: flex;
+      flex-flow: wrap;
+      div {
+        &:not(:last-child) {
+          &:after {
+            content: '·';
+            @include fmx-1;
+          }
+        }
+      }
+    }
+  }
 </style>
diff --git a/src/components/Theme/themes/common.js b/src/components/Theme/themes/common.js
index e831792c..6a2ad16f 100644
--- a/src/components/Theme/themes/common.js
+++ b/src/components/Theme/themes/common.js
@@ -1,4 +1,5 @@
 /** @type {Omit<import('../@types/component').Theme, "colour">} */
+// Generated from https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=320&minRatio=1.125&maxFontSize=22&maxWidth=1280&maxRatio=1.25&steps=xxs%2Cxs%2Csm%2Cbase%2Clg%2Cxl%2C2xl%2C3xl%2C4xl%2C5xl%2C6xl&baseStep=base&prefix=+fs&decimals=2&useRems=on&remValue=16&previewFont=Noto+Sans&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=0
 export default {
   font: {
     family: {
@@ -12,17 +13,17 @@ export default {
       note: 'var(--theme-font-family-sans-serif)',
     },
     size: {
-      xxs: 'clamp(0.79rem, -0.2vw + 0.83rem, 0.67rem)',
-      xs: 'clamp(0.89rem, -0.08vw + 0.91rem, 0.84rem)',
-      sm: 'clamp(1rem, 0.08vw + 0.98rem, 1.05rem)',
-      base: 'clamp(1.13rem, 0.31vw + 1.06rem, 1.31rem)',
-      lg: 'clamp(1.27rem, 0.63vw + 1.14rem, 1.64rem)',
-      xl: 'clamp(1.42rem, 1.04vw + 1.21rem, 2.05rem)',
-      '2xl': 'clamp(1.6rem, 1.6vw + 1.28rem, 2.56rem)',
-      '3xl': 'clamp(1.8rem, 2.34vw + 1.33rem, 3.2rem)',
-      '4xl': 'clamp(2.03rem, 3.3vw + 1.37rem, 4.01rem)',
-      '5xl': 'clamp(2.28rem, 4.54vw + 1.37rem, 5.01rem)',
-      '6xl': 'clamp(2.57rem, 6.15vw + 1.33rem, 6.26rem)',
+      xxs: 'clamp(0.79rem, -0.14vw + 0.82rem, 0.7rem)',
+      xs: 'clamp(0.89rem, -0.01vw + 0.89rem, 0.88rem)',
+      sm: 'clamp(1rem, 0.17vw + 0.97rem, 1.1rem)',
+      base: 'clamp(1.13rem, 0.42vw + 1.04rem, 1.38rem)',
+      lg: 'clamp(1.27rem, 0.76vw + 1.11rem, 1.72rem)',
+      xl: 'clamp(1.42rem, 1.21vw + 1.18rem, 2.15rem)',
+      '2xl': 'clamp(1.6rem, 1.81vw + 1.24rem, 2.69rem)',
+      '3xl': 'clamp(1.8rem, 2.59vw + 1.28rem, 3.36rem)',
+      '4xl': 'clamp(2.03rem, 3.61vw + 1.3rem, 4.2rem)',
+      '5xl': 'clamp(2.28rem, 4.94vw + 1.29rem, 5.25rem)',
+      '6xl': 'clamp(2.57rem, 6.65vw + 1.24rem, 6.56rem)',
     },
   },
 };
diff --git a/src/docs/styles/tokens/layout/spacers.stories.mdx b/src/docs/styles/tokens/layout/spacers.stories.mdx
index f4059c5e..2486314c 100644
--- a/src/docs/styles/tokens/layout/spacers.stories.mdx
+++ b/src/docs/styles/tokens/layout/spacers.stories.mdx
@@ -52,15 +52,15 @@ As a rule of thumb, if you're setting space between or adjacent to _text element
 <CopyTable
   title="Fluid margin"
   mdnLink="margin"
-  header={['Class', 'Extend', 'Properties']}
+  header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(fluidMargin, true)}
-  copyable={[true, (t) => `@extend %${t};`, false]}
+  copyable={[true, (t) => `@include ${t};`, false]}
 />
 
 <CopyTable
   title="Fluid padding"
   mdnLink="margin"
-  header={['Class', 'Extend', 'Properties']}
+  header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(fluidPadding, true)}
-  copyable={[true, (t) => `@extend %${t};`, false]}
+  copyable={[true, (t) => `@include ${t};`, false]}
 />
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
index 87312e4c..85b1c2bd 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/scss/reset/_typography.scss
@@ -3,13 +3,26 @@
 body {
   font-size: 1rem;
   @include font-sans;
-  @include font-normal;
+  @include font-regular;
   @include leading-normal;
   // Font-smoothing
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+// SIZE RANGE REFERENCE //
+// xxs: 12.64px
+// xs: 14.22px
+// sm: 16.00px → 17.60px
+// base: 18.00px → 22.00px
+// lg: 20.25px → 27.50px
+// xl: 22.78px → 34.38px
+// 2xl: 25.63px → 42.97px
+// 3xl: 28.83px → 53.71px
+// 4xl: 32.44px → 67.14px
+// 5xl: 36.49px → 83.92px
+// 6xl: 41.05px → 104.90px
+
 /////////////
 // HEADINGS
 /////////////
@@ -25,6 +38,7 @@ h1 {
   @include font-hed;
   @include text-3xl;
   @include leading-none;
+
   margin-block-start: calc(var(--theme-font-size-base) * 1.5);
   margin-block-end: calc(var(--theme-font-size-base) * 0.75);
 }
@@ -58,7 +72,7 @@ h5 {
 }
 h6 {
   @include text-sm;
-  @include font-normal;
+  @include font-regular;
   text-transform: uppercase;
   margin-block-end: calc(var(--theme-font-size-base) * 0.375);
 }
@@ -75,7 +89,7 @@ h6 {
   margin-inline-end: 0px;
   @include font-body;
   @include text-base;
-  @include font-normal;
+  @include font-regular;
   @include leading-normal;
   @include text-primary;
 }
@@ -108,7 +122,7 @@ strong {
 
 figcaption {
   @include text-sm;
-  @include font-normal;
+  @include font-regular;
   @include leading-normal;
   @include text-secondary;
   @include font-note;
@@ -118,12 +132,12 @@ blockquote {
   margin-inline: 0;
   padding-left: 1rem;
   border-left: 1px solid $theme-colour-brand-rules;
-  @extend %fmy-6;
+  @include fmy-6;
   p {
     @include font-body;
     @include text-lg;
     &:last-of-type {
-      @extend %fmb-2;
+      @include fmb-2;
     }
   }
   blockquote {
diff --git a/src/scss/tokens/spacers/_fluid-margin.scss b/src/scss/tokens/spacers/_fluid-margin.scss
index f9f8b487..bebb5973 100644
--- a/src/scss/tokens/spacers/_fluid-margin.scss
+++ b/src/scss/tokens/spacers/_fluid-margin.scss
@@ -1,5 +1,55 @@
 @use 'mixins/fluid-margin' as *;
 
+@each $level, $value in $fluid-margin-levels {
+  %fm-#{$level} {
+    margin: $value;
+  }
+  %fmt-#{$level} {
+    margin-top: $value;
+  }
+  %fmr-#{$level} {
+    margin-right: $value;
+  }
+  %fmb-#{$level} {
+    margin-bottom: $value;
+  }
+  %fml-#{$level} {
+    margin-left: $value;
+  }
+  %fmx-#{$level} {
+    margin-right: $value;
+    margin-left: $value;
+  }
+  %fmy-#{$level} {
+    margin-top: $value;
+    margin-bottom: $value;
+  }
+
+  %\!fm-#{$level} {
+    margin: $value !important;
+  }
+  %\!fmt-#{$level} {
+    margin-top: $value !important;
+  }
+  %\!fmr-#{$level} {
+    margin-right: $value !important;
+  }
+  %\!fmb-#{$level} {
+    margin-bottom: $value !important;
+  }
+  %\!fml-#{$level} {
+    margin-left: $value !important;
+  }
+  %\!fmx-#{$level} {
+    margin-right: $value !important;
+    margin-left: $value !important;
+  }
+  %\!fmy-#{$level} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+}
+
 $fluid-margin-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
 
 @each $level, $value in $fluid-margin-placeholder-levels {
@@ -49,20 +99,20 @@ $fluid-margin-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
 }
 
 .fm-auto {
-  @extend %fm-auto;
+  @include fm-auto;
 }
 .fmx-auto {
-  @extend %fmx-auto;
+  @include fmx-auto;
 }
 .fmy-auto {
-  @extend %fmy-auto;
+  @include fmy-auto;
 }
 .\!fm-auto {
-  @extend %\!fm-auto;
+  @include \!fm-auto;
 }
 .\!fmx-auto {
-  @extend %\!fmx-auto;
+  @include \!fmx-auto;
 }
 .\!fmy-auto {
-  @extend %\!fmy-auto;
+  @include \!fmy-auto;
 }
diff --git a/src/scss/tokens/spacers/_fluid-padding.scss b/src/scss/tokens/spacers/_fluid-padding.scss
index 5403452c..9a0f0306 100644
--- a/src/scss/tokens/spacers/_fluid-padding.scss
+++ b/src/scss/tokens/spacers/_fluid-padding.scss
@@ -1,5 +1,55 @@
 @use 'mixins/fluid-padding' as *;
 
+@each $level, $value in $fluid-padding-levels {
+  %fp-#{$level} {
+    padding: $value;
+  }
+  %fpt-#{$level} {
+    padding-top: $value;
+  }
+  %fpr-#{$level} {
+    padding-right: $value;
+  }
+  %fpb-#{$level} {
+    padding-bottom: $value;
+  }
+  %fpl-#{$level} {
+    padding-left: $value;
+  }
+  %fpx-#{$level} {
+    padding-right: $value;
+    padding-left: $value;
+  }
+  %fpy-#{$level} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
+
+  %\!fp-#{$level} {
+    padding: $value !important;
+  }
+  %\!fpt-#{$level} {
+    padding-top: $value !important;
+  }
+  %\!fpr-#{$level} {
+    padding-right: $value !important;
+  }
+  %\!fpb-#{$level} {
+    padding-bottom: $value !important;
+  }
+  %\!fpl-#{$level} {
+    padding-left: $value !important;
+  }
+  %\!fpx-#{$level} {
+    padding-right: $value !important;
+    padding-left: $value !important;
+  }
+  %\!fpy-#{$level} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+}
+
 $fluid-padding-placeholder-levels: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9;
 
 @each $level, $value in $fluid-padding-placeholder-levels {
diff --git a/src/scss/tokens/spacers/mixins/_fluid-margin.scss b/src/scss/tokens/spacers/mixins/_fluid-margin.scss
index 0ab820df..e16b0188 100644
--- a/src/scss/tokens/spacers/mixins/_fluid-margin.scss
+++ b/src/scss/tokens/spacers/mixins/_fluid-margin.scss
@@ -1,85 +1,257 @@
+// Generated from https://utopia.fyi/space/calculator?c=320,18,1.125,1280,22,1.25,7,3,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
+@use 'sass:map';
 $fluid-margin-levels: (
   '0': 0,
-  '1': clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem),
+  '1': clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem),
   '2': clamp(0.56rem, calc(0.52rem + 0.21vw), 0.69rem),
-  '3': clamp(0.88rem, calc(0.83rem + 0.21vw), 1rem),
-  '4': clamp(1.13rem, calc(1.06rem + 0.31vw), 1.31rem),
-  '5': clamp(1.69rem, calc(1.58rem + 0.52vw), 2rem),
-  '6': clamp(2.25rem, calc(2.13rem + 0.63vw), 2.63rem),
-  '7': clamp(3.38rem, calc(3.19rem + 0.94vw), 3.94rem),
-  '8': clamp(4.5rem, calc(4.25rem + 1.25vw), 5.25rem),
-  '9': clamp(6.75rem, calc(6.38rem + 1.88vw), 7.88rem),
+  '3': clamp(0.88rem, calc(0.81rem + 0.31vw), 1.06rem),
+  '4': clamp(1.13rem, calc(1.04rem + 0.42vw), 1.38rem),
+  '5': clamp(1.69rem, calc(1.56rem + 0.63vw), 2.06rem),
+  '6': clamp(2.25rem, calc(2.08rem + 0.83vw), 2.75rem),
+  '7': clamp(3.38rem, calc(3.13rem + 1.25vw), 4.13rem),
+  '8': clamp(4.5rem, calc(4.17rem + 1.67vw), 5.5rem),
+  '9': clamp(6.75rem, calc(6.25rem + 2.5vw), 8.25rem),
 );
 
-@each $level, $value in $fluid-margin-levels {
-  %fm-#{$level} {
-    margin: $value;
-  }
-  %fmt-#{$level} {
-    margin-top: $value;
-  }
-  %fmr-#{$level} {
-    margin-right: $value;
-  }
-  %fmb-#{$level} {
-    margin-bottom: $value;
-  }
-  %fml-#{$level} {
-    margin-left: $value;
-  }
-  %fmx-#{$level} {
-    margin-right: $value;
-    margin-left: $value;
-  }
-  %fmy-#{$level} {
-    margin-top: $value;
-    margin-bottom: $value;
-  }
-
-  %\!fm-#{$level} {
-    margin: $value !important;
-  }
-  %\!fmt-#{$level} {
-    margin-top: $value !important;
-  }
-  %\!fmr-#{$level} {
-    margin-right: $value !important;
-  }
-  %\!fmb-#{$level} {
-    margin-bottom: $value !important;
-  }
-  %\!fml-#{$level} {
-    margin-left: $value !important;
-  }
-  %\!fmx-#{$level} {
-    margin-right: $value !important;
-    margin-left: $value !important;
-  }
-  %\!fmy-#{$level} {
-    margin-top: $value !important;
-    margin-bottom: $value !important;
-  }
+@mixin fm-0 {
+  margin: map.get($fluid-margin-levels, '0');
+}
+@mixin fmx-0 {
+  margin-inline: map.get($fluid-margin-levels, '0');
+}
+@mixin fmy-0 {
+  margin-block: map.get($fluid-margin-levels, '0');
+}
+@mixin fmt-0 {
+  margin-top: map.get($fluid-margin-levels, '0');
+}
+@mixin fmb-0 {
+  margin-bottom: map.get($fluid-margin-levels, '0');
+}
+@mixin fml-0 {
+  margin-left: map.get($fluid-margin-levels, '0');
+}
+@mixin fmr-0 {
+  margin-right: map.get($fluid-margin-levels, '0');
 }
 
-%fm-auto {
+@mixin fm-1 {
+  margin: map.get($fluid-margin-levels, '1');
+}
+@mixin fmx-1 {
+  margin-inline: map.get($fluid-margin-levels, '1');
+}
+@mixin fmy-1 {
+  margin-block: map.get($fluid-margin-levels, '1');
+}
+@mixin fmt-1 {
+  margin-top: map.get($fluid-margin-levels, '1');
+}
+@mixin fmb-1 {
+  margin-bottom: map.get($fluid-margin-levels, '1');
+}
+@mixin fml-1 {
+  margin-left: map.get($fluid-margin-levels, '1');
+}
+@mixin fmr-1 {
+  margin-right: map.get($fluid-margin-levels, '1');
+}
+
+@mixin fm-2 {
+  margin: map.get($fluid-margin-levels, '2');
+}
+@mixin fmx-2 {
+  margin-inline: map.get($fluid-margin-levels, '2');
+}
+@mixin fmy-2 {
+  margin-block: map.get($fluid-margin-levels, '2');
+}
+@mixin fmt-2 {
+  margin-top: map.get($fluid-margin-levels, '2');
+}
+@mixin fmb-2 {
+  margin-bottom: map.get($fluid-margin-levels, '2');
+}
+@mixin fml-2 {
+  margin-left: map.get($fluid-margin-levels, '2');
+}
+@mixin fmr-2 {
+  margin-right: map.get($fluid-margin-levels, '2');
+}
+
+@mixin fm-3 {
+  margin: map.get($fluid-margin-levels, '3');
+}
+@mixin fmx-3 {
+  margin-inline: map.get($fluid-margin-levels, '3');
+}
+@mixin fmy-3 {
+  margin-block: map.get($fluid-margin-levels, '3');
+}
+@mixin fmt-3 {
+  margin-top: map.get($fluid-margin-levels, '3');
+}
+@mixin fmb-3 {
+  margin-bottom: map.get($fluid-margin-levels, '3');
+}
+@mixin fml-3 {
+  margin-left: map.get($fluid-margin-levels, '3');
+}
+@mixin fmr-3 {
+  margin-right: map.get($fluid-margin-levels, '3');
+}
+
+@mixin fm-4 {
+  margin: map.get($fluid-margin-levels, '4');
+}
+@mixin fmx-4 {
+  margin-inline: map.get($fluid-margin-levels, '4');
+}
+@mixin fmy-4 {
+  margin-block: map.get($fluid-margin-levels, '4');
+}
+@mixin fmt-4 {
+  margin-top: map.get($fluid-margin-levels, '4');
+}
+@mixin fmb-4 {
+  margin-bottom: map.get($fluid-margin-levels, '4');
+}
+@mixin fml-4 {
+  margin-left: map.get($fluid-margin-levels, '4');
+}
+@mixin fmr-4 {
+  margin-right: map.get($fluid-margin-levels, '4');
+}
+
+@mixin fm-5 {
+  margin: map.get($fluid-margin-levels, '5');
+}
+@mixin fmx-5 {
+  margin-inline: map.get($fluid-margin-levels, '5');
+}
+@mixin fmy-5 {
+  margin-block: map.get($fluid-margin-levels, '5');
+}
+@mixin fmt-5 {
+  margin-top: map.get($fluid-margin-levels, '5');
+}
+@mixin fmb-5 {
+  margin-bottom: map.get($fluid-margin-levels, '5');
+}
+@mixin fml-5 {
+  margin-left: map.get($fluid-margin-levels, '5');
+}
+@mixin fmr-5 {
+  margin-right: map.get($fluid-margin-levels, '5');
+}
+
+@mixin fm-6 {
+  margin: map.get($fluid-margin-levels, '6');
+}
+@mixin fmx-6 {
+  margin-inline: map.get($fluid-margin-levels, '6');
+}
+@mixin fmy-6 {
+  margin-block: map.get($fluid-margin-levels, '6');
+}
+@mixin fmt-6 {
+  margin-top: map.get($fluid-margin-levels, '6');
+}
+@mixin fmb-6 {
+  margin-bottom: map.get($fluid-margin-levels, '6');
+}
+@mixin fml-6 {
+  margin-left: map.get($fluid-margin-levels, '6');
+}
+@mixin fmr-6 {
+  margin-right: map.get($fluid-margin-levels, '6');
+}
+
+@mixin fm-7 {
+  margin: map.get($fluid-margin-levels, '7');
+}
+@mixin fmx-7 {
+  margin-inline: map.get($fluid-margin-levels, '7');
+}
+@mixin fmy-7 {
+  margin-block: map.get($fluid-margin-levels, '7');
+}
+@mixin fmt-7 {
+  margin-top: map.get($fluid-margin-levels, '7');
+}
+@mixin fmb-7 {
+  margin-bottom: map.get($fluid-margin-levels, '7');
+}
+@mixin fml-7 {
+  margin-left: map.get($fluid-margin-levels, '7');
+}
+@mixin fmr-7 {
+  margin-right: map.get($fluid-margin-levels, '7');
+}
+
+@mixin fm-8 {
+  margin: map.get($fluid-margin-levels, '8');
+}
+@mixin fmx-8 {
+  margin-inline: map.get($fluid-margin-levels, '8');
+}
+@mixin fmy-8 {
+  margin-block: map.get($fluid-margin-levels, '8');
+}
+@mixin fmt-8 {
+  margin-top: map.get($fluid-margin-levels, '8');
+}
+@mixin fmb-8 {
+  margin-bottom: map.get($fluid-margin-levels, '8');
+}
+@mixin fml-8 {
+  margin-left: map.get($fluid-margin-levels, '8');
+}
+@mixin fmr-8 {
+  margin-right: map.get($fluid-margin-levels, '8');
+}
+
+@mixin fm-9 {
+  margin: map.get($fluid-margin-levels, '9');
+}
+@mixin fmx-9 {
+  margin-inline: map.get($fluid-margin-levels, '9');
+}
+@mixin fmy-9 {
+  margin-block: map.get($fluid-margin-levels, '9');
+}
+@mixin fmt-9 {
+  margin-top: map.get($fluid-margin-levels, '9');
+}
+@mixin fmb-9 {
+  margin-bottom: map.get($fluid-margin-levels, '9');
+}
+@mixin fml-9 {
+  margin-left: map.get($fluid-margin-levels, '9');
+}
+@mixin fmr-9 {
+  margin-right: map.get($fluid-margin-levels, '9');
+}
+
+@mixin fm-auto {
   margin: auto;
 }
-%fmx-auto {
+@mixin fmx-auto {
   margin-right: auto;
   margin-left: auto;
 }
-%fmy-auto {
+@mixin fmy-auto {
   margin-top: auto;
   margin-bottom: auto;
 }
-%\!fm-auto {
+@mixin \!fm-auto {
   margin: auto !important;
 }
-%\!fmx-auto {
+@mixin \!fmx-auto {
   margin-right: auto !important;
   margin-left: auto !important;
 }
-%\!fmy-auto {
+@mixin \!fmy-auto {
   margin-top: auto !important;
   margin-bottom: auto !important;
 }
diff --git a/src/scss/tokens/spacers/mixins/_fluid-padding.scss b/src/scss/tokens/spacers/mixins/_fluid-padding.scss
index c16722b5..2f973566 100644
--- a/src/scss/tokens/spacers/mixins/_fluid-padding.scss
+++ b/src/scss/tokens/spacers/mixins/_fluid-padding.scss
@@ -1,64 +1,235 @@
+// Generated from https://utopia.fyi/space/calculator?c=320,18,1.125,1280,22,1.25,7,3,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12
 $fluid-padding-levels: (
   '0': 0,
-  '1': clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem),
+  '1': clamp(0.31rem, calc(0.29rem + 0.1vw), 0.38rem),
   '2': clamp(0.56rem, calc(0.52rem + 0.21vw), 0.69rem),
-  '3': clamp(0.88rem, calc(0.83rem + 0.21vw), 1rem),
-  '4': clamp(1.13rem, calc(1.06rem + 0.31vw), 1.31rem),
-  '5': clamp(1.69rem, calc(1.58rem + 0.52vw), 2rem),
-  '6': clamp(2.25rem, calc(2.13rem + 0.63vw), 2.63rem),
-  '7': clamp(3.38rem, calc(3.19rem + 0.94vw), 3.94rem),
-  '8': clamp(4.5rem, calc(4.25rem + 1.25vw), 5.25rem),
-  '9': clamp(6.75rem, calc(6.38rem + 1.88vw), 7.88rem),
+  '3': clamp(0.88rem, calc(0.81rem + 0.31vw), 1.06rem),
+  '4': clamp(1.13rem, calc(1.04rem + 0.42vw), 1.38rem),
+  '5': clamp(1.69rem, calc(1.56rem + 0.63vw), 2.06rem),
+  '6': clamp(2.25rem, calc(2.08rem + 0.83vw), 2.75rem),
+  '7': clamp(3.38rem, calc(3.13rem + 1.25vw), 4.13rem),
+  '8': clamp(4.5rem, calc(4.17rem + 1.67vw), 5.5rem),
+  '9': clamp(6.75rem, calc(6.25rem + 2.5vw), 8.25rem),
 );
 
-@each $level, $value in $fluid-padding-levels {
-  %fp-#{$level} {
-    padding: $value;
-  }
-  %fpt-#{$level} {
-    padding-top: $value;
-  }
-  %fpr-#{$level} {
-    padding-right: $value;
-  }
-  %fpb-#{$level} {
-    padding-bottom: $value;
-  }
-  %fpl-#{$level} {
-    padding-left: $value;
-  }
-  %fpx-#{$level} {
-    padding-right: $value;
-    padding-left: $value;
-  }
-  %fpy-#{$level} {
-    padding-top: $value;
-    padding-bottom: $value;
-  }
+@mixin fp-0 {
+  padding: map.get($fluid-padding-levels, '0');
+}
+@mixin fpx-0 {
+  padding-inline: map.get($fluid-padding-levels, '0');
+}
+@mixin fpy-0 {
+  padding-block: map.get($fluid-padding-levels, '0');
+}
+@mixin fpt-0 {
+  padding-top: map.get($fluid-padding-levels, '0');
+}
+@mixin fpb-0 {
+  padding-bottom: map.get($fluid-padding-levels, '0');
+}
+@mixin fpl-0 {
+  padding-left: map.get($fluid-padding-levels, '0');
+}
+@mixin fpr-0 {
+  padding-right: map.get($fluid-padding-levels, '0');
+}
 
-  %\!fp-#{$level} {
-    padding: $value !important;
-  }
-  %\!fpt-#{$level} {
-    padding-top: $value !important;
-  }
-  %\!fpr-#{$level} {
-    padding-right: $value !important;
-  }
-  %\!fpb-#{$level} {
-    padding-bottom: $value !important;
-  }
-  %\!fpl-#{$level} {
-    padding-left: $value !important;
-  }
-  %\!fpx-#{$level} {
-    padding-right: $value !important;
-    padding-left: $value !important;
-  }
-  %\!fpy-#{$level} {
-    padding-top: $value !important;
-    padding-bottom: $value !important;
-  }
+@mixin fp-1 {
+  padding: map.get($fluid-padding-levels, '1');
+}
+@mixin fpx-1 {
+  padding-inline: map.get($fluid-padding-levels, '1');
+}
+@mixin fpy-1 {
+  padding-block: map.get($fluid-padding-levels, '1');
+}
+@mixin fpt-1 {
+  padding-top: map.get($fluid-padding-levels, '1');
+}
+@mixin fpb-1 {
+  padding-bottom: map.get($fluid-padding-levels, '1');
+}
+@mixin fpl-1 {
+  padding-left: map.get($fluid-padding-levels, '1');
+}
+@mixin fpr-1 {
+  padding-right: map.get($fluid-padding-levels, '1');
+}
+
+@mixin fp-2 {
+  padding: map.get($fluid-padding-levels, '2');
+}
+@mixin fpx-2 {
+  padding-inline: map.get($fluid-padding-levels, '2');
+}
+@mixin fpy-2 {
+  padding-block: map.get($fluid-padding-levels, '2');
+}
+@mixin fpt-2 {
+  padding-top: map.get($fluid-padding-levels, '2');
+}
+@mixin fpb-2 {
+  padding-bottom: map.get($fluid-padding-levels, '2');
+}
+@mixin fpl-2 {
+  padding-left: map.get($fluid-padding-levels, '2');
+}
+@mixin fpr-2 {
+  padding-right: map.get($fluid-padding-levels, '2');
+}
+
+@mixin fp-3 {
+  padding: map.get($fluid-padding-levels, '3');
+}
+@mixin fpx-3 {
+  padding-inline: map.get($fluid-padding-levels, '3');
+}
+@mixin fpy-3 {
+  padding-block: map.get($fluid-padding-levels, '3');
+}
+@mixin fpt-3 {
+  padding-top: map.get($fluid-padding-levels, '3');
+}
+@mixin fpb-3 {
+  padding-bottom: map.get($fluid-padding-levels, '3');
+}
+@mixin fpl-3 {
+  padding-left: map.get($fluid-padding-levels, '3');
+}
+@mixin fpr-3 {
+  padding-right: map.get($fluid-padding-levels, '3');
+}
+
+@mixin fp-4 {
+  padding: map.get($fluid-padding-levels, '4');
+}
+@mixin fpx-4 {
+  padding-inline: map.get($fluid-padding-levels, '4');
+}
+@mixin fpy-4 {
+  padding-block: map.get($fluid-padding-levels, '4');
+}
+@mixin fpt-4 {
+  padding-top: map.get($fluid-padding-levels, '4');
+}
+@mixin fpb-4 {
+  padding-bottom: map.get($fluid-padding-levels, '4');
+}
+@mixin fpl-4 {
+  padding-left: map.get($fluid-padding-levels, '4');
+}
+@mixin fpr-4 {
+  padding-right: map.get($fluid-padding-levels, '4');
+}
+
+@mixin fp-5 {
+  padding: map.get($fluid-padding-levels, '5');
+}
+@mixin fpx-5 {
+  padding-inline: map.get($fluid-padding-levels, '5');
+}
+@mixin fpy-5 {
+  padding-block: map.get($fluid-padding-levels, '5');
+}
+@mixin fpt-5 {
+  padding-top: map.get($fluid-padding-levels, '5');
+}
+@mixin fpb-5 {
+  padding-bottom: map.get($fluid-padding-levels, '5');
+}
+@mixin fpl-5 {
+  padding-left: map.get($fluid-padding-levels, '5');
+}
+@mixin fpr-5 {
+  padding-right: map.get($fluid-padding-levels, '5');
+}
+
+@mixin fp-6 {
+  padding: map.get($fluid-padding-levels, '6');
+}
+@mixin fpx-6 {
+  padding-inline: map.get($fluid-padding-levels, '6');
+}
+@mixin fpy-6 {
+  padding-block: map.get($fluid-padding-levels, '6');
+}
+@mixin fpt-6 {
+  padding-top: map.get($fluid-padding-levels, '6');
+}
+@mixin fpb-6 {
+  padding-bottom: map.get($fluid-padding-levels, '6');
+}
+@mixin fpl-6 {
+  padding-left: map.get($fluid-padding-levels, '6');
+}
+@mixin fpr-6 {
+  padding-right: map.get($fluid-padding-levels, '6');
+}
+
+@mixin fp-7 {
+  padding: map.get($fluid-padding-levels, '7');
+}
+@mixin fpx-7 {
+  padding-inline: map.get($fluid-padding-levels, '7');
+}
+@mixin fpy-7 {
+  padding-block: map.get($fluid-padding-levels, '7');
+}
+@mixin fpt-7 {
+  padding-top: map.get($fluid-padding-levels, '7');
+}
+@mixin fpb-7 {
+  padding-bottom: map.get($fluid-padding-levels, '7');
+}
+@mixin fpl-7 {
+  padding-left: map.get($fluid-padding-levels, '7');
+}
+@mixin fpr-7 {
+  padding-right: map.get($fluid-padding-levels, '7');
+}
+
+@mixin fp-8 {
+  padding: map.get($fluid-padding-levels, '8');
+}
+@mixin fpx-8 {
+  padding-inline: map.get($fluid-padding-levels, '8');
+}
+@mixin fpy-8 {
+  padding-block: map.get($fluid-padding-levels, '8');
+}
+@mixin fpt-8 {
+  padding-top: map.get($fluid-padding-levels, '8');
+}
+@mixin fpb-8 {
+  padding-bottom: map.get($fluid-padding-levels, '8');
+}
+@mixin fpl-8 {
+  padding-left: map.get($fluid-padding-levels, '8');
+}
+@mixin fpr-8 {
+  padding-right: map.get($fluid-padding-levels, '8');
+}
+
+@mixin fp-9 {
+  padding: map.get($fluid-padding-levels, '9');
+}
+@mixin fpx-9 {
+  padding-inline: map.get($fluid-padding-levels, '9');
+}
+@mixin fpy-9 {
+  padding-block: map.get($fluid-padding-levels, '9');
+}
+@mixin fpt-9 {
+  padding-top: map.get($fluid-padding-levels, '9');
+}
+@mixin fpb-9 {
+  padding-bottom: map.get($fluid-padding-levels, '9');
+}
+@mixin fpl-9 {
+  padding-left: map.get($fluid-padding-levels, '9');
+}
+@mixin fpr-9 {
+  padding-right: map.get($fluid-padding-levels, '9');
 }
 
 %fp-auto {
diff --git a/src/scss/tokens/text/_font-weight.scss b/src/scss/tokens/text/_font-weight.scss
index 1718739d..5b25bc5a 100644
--- a/src/scss/tokens/text/_font-weight.scss
+++ b/src/scss/tokens/text/_font-weight.scss
@@ -9,8 +9,8 @@
 .font-light {
   @include font-light;
 }
-.font-normal {
-  @include font-normal;
+.font-regular {
+  @include font-regular;
 }
 .font-medium {
   @include font-medium;
@@ -36,8 +36,8 @@
 .\!font-light {
   @include \!font-light;
 }
-.\!font-normal {
-  @include \!font-normal;
+.\!font-regular {
+  @include \!font-regular;
 }
 .\!font-medium {
   @include \!font-medium;
diff --git a/src/scss/tokens/text/mixins/_font-weight.scss b/src/scss/tokens/text/mixins/_font-weight.scss
index 0a76f723..0a1781dc 100644
--- a/src/scss/tokens/text/mixins/_font-weight.scss
+++ b/src/scss/tokens/text/mixins/_font-weight.scss
@@ -7,7 +7,7 @@
 @mixin font-light {
   font-weight: 300;
 }
-@mixin font-normal {
+@mixin font-regular {
   font-weight: 400;
 }
 @mixin font-medium {
@@ -34,7 +34,7 @@
 @mixin \!font-light {
   font-weight: 300 !important;
 }
-@mixin \!font-normal {
+@mixin \!font-regular {
   font-weight: 400 !important;
 }
 @mixin \!font-medium {