From e89408ccb067b5a40b857d82db14518a927f3036 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Tue, 25 Jul 2023 18:48:09 +0100
Subject: [PATCH] style siteheadline as example

---
 .storybook/preview.scss                       |  31 ++++-
 bin/css-to-js/index.js                        |  10 +-
 src/components/Framer/Typeahead/index.svelte  |   8 +-
 src/components/Headline/Headline.svelte       |  19 ++-
 .../ReferralBlock/ReferralBlock.svelte        |  18 +--
 src/components/SiteFooter/CompanyLinks.svelte |   4 +-
 src/components/SiteFooter/LegalLinks.svelte   |   6 +-
 src/components/SiteFooter/QuickLinks.svelte   |   4 +-
 .../SiteFooter/Referrals/Link.svelte          |   4 +-
 .../SiteFooter/Referrals/index.svelte         |   1 -
 src/components/SiteFooter/SiteFooter.svelte   |   1 +
 .../SiteHeader/MobileMenu/index.svelte        |   4 +-
 .../NavBar/NavDropdown/StoryCard/index.svelte |   6 +-
 src/components/SiteHeader/NavBar/index.svelte |   6 +-
 src/components/SiteHeader/SiteHeader.svelte   |   1 +
 .../SiteHeadline/SiteHeadline.stories.svelte  |   5 +-
 .../SiteHeadline/SiteHeadline.svelte          | 115 +++---------------
 src/components/Theme/@types/component.ts      |   4 +
 src/components/Theme/themes/common.js         |   4 +
 .../texts/_body.scss}                         |  27 ++--
 .../texts}/_graphic.scss                      |   0
 .../texts/_note.scss}                         |   0
 src/scss/reset/_main.scss                     |   4 +
 src/scss/tokens/spacers/_margin.scss          |  41 +++++--
 src/scss/tokens/spacers/_padding.scss         |  41 +++++--
 src/scss/tokens/text/_font-family.scss        |  24 ++++
 src/scss/tokens/text/mixins/_font-family.scss |  24 ++++
 27 files changed, 232 insertions(+), 180 deletions(-)
 rename src/scss/{_TO-DEPRECATE/_body-text.scss => mixins/texts/_body.scss} (78%)
 rename src/scss/{_TO-DEPRECATE => mixins/texts}/_graphic.scss (100%)
 rename src/scss/{_TO-DEPRECATE/_note-text.scss => mixins/texts/_note.scss} (100%)

diff --git a/.storybook/preview.scss b/.storybook/preview.scss
index 267cf6da..a6699f37 100644
--- a/.storybook/preview.scss
+++ b/.storybook/preview.scss
@@ -10,6 +10,9 @@ table.docblock-argstable {
 }
 
 div.sbdocs-content {
+  h1 {
+    font-family: 'Knowledge', sans-serif;
+  }
   & > h2, & > div > div > h2 {
     margin-top: 4rem;
     margin-bottom: 2rem;
@@ -34,15 +37,38 @@ div.sbdocs-content {
       line-height: 22px;
     }
   }
+
+  & > div > :where(p, ul, ol),
+  .sb-anchor > div > :where(p, ul, ol) {
+    font-size: 18px;
+    line-height: 29px;
+    font-family: 'Knowledge', sans-serif;
+  
+    .highlight {
+      background-color: rgb(254, 254, 160);
+      padding: 0 4px;
+    }
+    .bold {
+      font-weight: bold;
+    }
+    a {
+      font-family: 'Knowledge', sans-serif;
+      color: #0071a1;
+      text-decoration: none;
+      text-underline-offset: 2px;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
 }
 
-.sbdocs {
+.sbdocs-content div.sbdocs:not(.sb-unstyled) {
   font-family: 'Knowledge', sans-serif;
 
   h1 {
     font-family: 'Knowledge', sans-serif;
   }
-
   p, ul, li {
     font-size: 18px;
     line-height: 29px;
@@ -56,7 +82,6 @@ div.sbdocs-content {
       font-weight: bold;
     }
   }
-
   a {
     font-family: 'Knowledge', sans-serif;
     color: #0071a1;
diff --git a/bin/css-to-js/index.js b/bin/css-to-js/index.js
index 4b35ce5f..835aebfb 100644
--- a/bin/css-to-js/index.js
+++ b/bin/css-to-js/index.js
@@ -131,7 +131,15 @@ const capitalize = function capitalize(str) {
 };
 
 const sanitize = function sanitize(name) {
-  return name.replace(/\*/g, 'all-children').replace(/#/g, '$').replace(/\s\s+/g, ' ').replace(/[^a-zA-Z0-9$]/g, '_').replace(/^_+/g, '').replace(/_+$/g, '');
+  return name
+    .replace(/\*/g, 'all-children')
+    .replace(/#/g, '$')
+    .replace(/\s\s+/g, ' ')
+    .replace(/(\d)\\\.(\d)/g, '$1|$2') // Added for escaped dots like ".mb-0\.5"
+    .replace(/[^a-zA-Z0-9$|]/g, '_')
+    .replace(/^_+/g, '')
+    .replace(/_+$/g, '')
+    .replace('|', '.');
 };
 
 const fontface = function fontface(rule, result) {
diff --git a/src/components/Framer/Typeahead/index.svelte b/src/components/Framer/Typeahead/index.svelte
index 0031124f..e746d1dc 100644
--- a/src/components/Framer/Typeahead/index.svelte
+++ b/src/components/Framer/Typeahead/index.svelte
@@ -188,7 +188,7 @@
     results.length > 0
       ? `${id}-result-${selectedIndex}`
       : null}"
-    bind:value
+    bind:value="{value}"
     on:type
     on:input
     on:change
@@ -265,7 +265,7 @@
 </div>
 
 <style lang="scss">
-  @import '../../../scss/fonts/mixins';
+  @import '../../../scss/mixins';
 
   [data-svelte-typeahead] {
     position: relative;
@@ -292,7 +292,7 @@
   li,
   li.no-results {
     padding: 0.25rem 1rem;
-    @include font-display;
+    @include font-sans;
     color: #333;
   }
   li.no-results {
@@ -335,7 +335,7 @@
     display: inline-flex;
     font-size: 0.75rem;
     color: #aaa;
-    @include font-display;
+    @include font-sans;
   }
 
   :global([data-svelte-search] input) {
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index ac89abf2..18f3a1ea 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -76,35 +76,34 @@
     text-align: center;
     margin-top: 4rem;
     margin-bottom: 0;
-    color: var(--theme-colour-text-primary);
+    @include text-primary;
 
     :global {
       h1 {
         font-size: 4rem;
         margin: 5px 0;
         line-height: 1.2;
-        // font-family: var(--theme-font-family-hed, $font-family-display);
         @include font-sans;
-        color: var(--theme-colour-text-primary);
+        @include text-primary;
       }
 
       p {
-        font-family: var(--theme-font-family-subhed);
-        color: var(--theme-colour-text-primary);
+        @include font-sans;
+        @include text-primary;
         margin: 0;
         font-weight: 200;
 
         &.section-title {
           font-size: 1rem;
           font-weight: 800;
-          color: var(--theme-colour-accent);
+          @include text-accent;
         }
       }
     }
     .article-metadata {
       padding: 40px 0;
-      font-family: var(--theme-font-family-note);
-      color: var(--theme-colour-text-primary);
+      @include font-sans;
+      @include text-primary;
 
       text-align: center;
 
@@ -115,7 +114,7 @@
       .byline {
         :global {
           a {
-            color: var(--theme-colour-text-primary);
+            @include text-primary;
             text-decoration: none;
           }
         }
@@ -124,7 +123,7 @@
       .dateline-container {
         text-transform: uppercase;
 
-        color: var(--theme-colour-text-secondary);
+        @include text-secondary;
         font-size: 0.8rem;
         line-height: 1.2rem;
         letter-spacing: 0.2px;
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index e99cc9f7..f6b16080 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -128,11 +128,11 @@
 {/if}
 
 <style lang="scss">
-  @import '../../scss/fonts/mixins';
+  @import '../../scss/mixins';
 
   h4 {
-    font-family: var(--theme-font-family-subhed);
-    color: var(--theme-colour-text-primary, #404040);
+    @include font-sans;
+    @include text-primary;
     font-size: 1.1rem;
     margin: 0 0 5px;
     font-weight: bold;
@@ -194,23 +194,23 @@
           }
         }
         .kicker {
-          font-family: var(--theme-font-family-subhed);
-          color: var(--theme-colour-text-secondary, #666666);
+          @include font-sans;
+          @include text-secondary;
           font-size: 0.9rem;
           margin: 0;
           font-weight: 400;
         }
         .title {
-          font-family: var(--theme-font-family-subhed);
-          color: var(--theme-colour-text-primary, #404040);
+          @include font-sans;
+          @include text-primary;
           font-size: 0.95rem;
           line-height: 1.15rem;
           font-weight: bold;
           margin: 0;
         }
         .publish-time {
-          font-family: var(--theme-font-family-subhed);
-          color: var(--theme-colour-text-secondary, #666666);
+          @include font-sans;
+          @include text-secondary;
           font-size: 0.75rem;
           margin: 2px 0 0;
           font-weight: 400;
diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte
index 118667bd..0b7b6270 100644
--- a/src/components/SiteFooter/CompanyLinks.svelte
+++ b/src/components/SiteFooter/CompanyLinks.svelte
@@ -50,7 +50,7 @@
   @import '../SiteHeader/scss/_breakpoints.scss';
   @import '../SiteHeader/scss/_grids.scss';
 
-  @import '../../scss/fonts/mixins';
+  @import '../../scss/mixins';
   .content-container {
     @include max-width;
 
@@ -149,7 +149,7 @@
       }
     }
     p {
-      @include font-display;
+      @include font-sans;
       line-height: 1.43;
       font-size: 14px;
       color: var(--nav-primary);
diff --git a/src/components/SiteFooter/LegalLinks.svelte b/src/components/SiteFooter/LegalLinks.svelte
index f6e69813..0e545e61 100644
--- a/src/components/SiteFooter/LegalLinks.svelte
+++ b/src/components/SiteFooter/LegalLinks.svelte
@@ -47,7 +47,7 @@
   @import '../SiteHeader/scss/_breakpoints.scss';
   @import '../SiteHeader/scss/_grids.scss';
 
-  @import '../../scss/fonts/mixins';
+  @import '../../scss/mixins';
 
   .content-container {
     @include max-width;
@@ -140,7 +140,7 @@
       list-style: none;
       align-items: center;
       a {
-        @include font-display;
+        @include font-sans;
         color: var(--nav-primary);
         font-size: 14px;
         font-weight: 500;
@@ -156,7 +156,7 @@
   p.copyright,
   p.disclaimer {
     margin: 0;
-    @include font-display;
+    @include font-sans;
     font-size: 14px;
     color: var(--nav-primary);
     a {
diff --git a/src/components/SiteFooter/QuickLinks.svelte b/src/components/SiteFooter/QuickLinks.svelte
index cbb90c22..5acde59b 100644
--- a/src/components/SiteFooter/QuickLinks.svelte
+++ b/src/components/SiteFooter/QuickLinks.svelte
@@ -121,7 +121,7 @@
   @import '../SiteHeader/scss/_breakpoints.scss';
   @import '../SiteHeader/scss/_grids.scss';
 
-  @import '../../scss/fonts/mixins';
+  @import '../../scss/mixins';
 
   .content-container {
     @include max-width;
@@ -147,7 +147,7 @@
         display: flex;
         align-items: center;
         margin: 8px 0;
-        @include font-display;
+        @include font-sans;
         a {
           color: var(--nav-primary);
           font-weight: 500;
diff --git a/src/components/SiteFooter/Referrals/Link.svelte b/src/components/SiteFooter/Referrals/Link.svelte
index b04128a0..5eb1c00e 100644
--- a/src/components/SiteFooter/Referrals/Link.svelte
+++ b/src/components/SiteFooter/Referrals/Link.svelte
@@ -25,7 +25,7 @@
 
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
-  @import '../../../scss/fonts/mixins';
+  @import '../../../scss/mixins';
 
   a {
     text-decoration: none;
@@ -53,7 +53,7 @@
     }
 
     p {
-      @include font-display;
+      @include font-sans;
 
       color: var(--nav-primary, #666);
       font-size: 0.9rem;
diff --git a/src/components/SiteFooter/Referrals/index.svelte b/src/components/SiteFooter/Referrals/index.svelte
index fe9a599d..d736da1e 100644
--- a/src/components/SiteFooter/Referrals/index.svelte
+++ b/src/components/SiteFooter/Referrals/index.svelte
@@ -19,7 +19,6 @@
 </IntersectionObserver>
 
 <style lang="scss">
-  @import '../../../scss/fonts/mixins';
   @import '../../SiteHeader/scss/_breakpoints.scss';
   @import '../../SiteHeader/scss/_grids.scss';
 
diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
index 7fc45e6f..f3654ac7 100644
--- a/src/components/SiteFooter/SiteFooter.svelte
+++ b/src/components/SiteFooter/SiteFooter.svelte
@@ -47,6 +47,7 @@
     --nav-background: var(--theme-colour-background, #fff);
     --nav-primary: var(--theme-colour-text-primary, #404040);
     --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
+    --theme-font-family-sans-serif: Knowledge, sans-serif;
   `}"
 >
   <div>
diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte
index 8dfaceaa..0b9c5536 100644
--- a/src/components/SiteHeader/MobileMenu/index.svelte
+++ b/src/components/SiteHeader/MobileMenu/index.svelte
@@ -58,7 +58,7 @@
   @import '../scss/_grids.scss';
   @import '../scss/_colors.scss';
   @import '../scss/_z-indexes.scss';
-  @import '../../../scss/fonts/mixins';
+  @import '../../../scss/mixins';
 
   $mobile-nav-height: 56px;
 
@@ -157,7 +157,7 @@
 
     .section-link,
     .subsection-link {
-      @include font-display;
+      @include font-sans;
       text-decoration: none;
       line-height: 1.2;
       color: var(--nav-primary);
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
index 6f98711b..5bba1afc 100644
--- a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
+++ b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
@@ -35,7 +35,7 @@
 </div>
 
 <style lang="scss">
-  @import '../../../../../scss/fonts/mixins';
+  @import '../../../../../scss/mixins';
 
   .story-card a {
     display: flex;
@@ -66,7 +66,7 @@
         color: var(--nav-primary, var(--tr-dark-grey));
         font-size: 16px;
         font-weight: 500;
-        @include font-display;
+        @include font-sans;
         @media (min-width: 1300px) {
           font-size: 18px;
         }
@@ -81,7 +81,7 @@
       }
 
       time {
-        @include font-display;
+        @include font-sans;
         margin-top: 8px;
         display: block;
         font-size: 12px;
diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte
index e8cc7d43..0b1df751 100644
--- a/src/components/SiteHeader/NavBar/index.svelte
+++ b/src/components/SiteHeader/NavBar/index.svelte
@@ -124,7 +124,7 @@
   @import './../scss/_colors.scss';
   @import './../scss/_breakpoints.scss';
   @import './../scss/_z-indexes.scss';
-  @import '../../../scss/fonts/mixins';
+  @import '../../../scss/mixins';
 
   $nav-height: 64px;
   $mobile-nav-height: 56px;
@@ -146,7 +146,7 @@
   .nav-item {
     display: inline-flex;
     padding: 0 10px;
-    @include font-display;
+    @include font-sans;
     font-weight: 500;
     font-size: 16px;
 
@@ -219,7 +219,7 @@
     background-color: unset;
     appearance: none;
     cursor: pointer;
-    @include font-display;
+    @include font-sans;
     font-weight: 500;
     font-size: 16px;
     color: var(--nav-primary, var(--tr-dark-grey));
diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte
index c447a7c5..5dabb421 100644
--- a/src/components/SiteHeader/SiteHeader.svelte
+++ b/src/components/SiteHeader/SiteHeader.svelte
@@ -42,6 +42,7 @@
     --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
     --nav-accent: var(--theme-colour-brand-logo, #fa6400);
     --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
+    --theme-font-family-sans-serif: Knowledge, sans-serif;
   `}"
 >
   <div class="nav-container show-nav">
diff --git a/src/components/SiteHeadline/SiteHeadline.stories.svelte b/src/components/SiteHeadline/SiteHeadline.stories.svelte
index d3f1b379..828b82da 100644
--- a/src/components/SiteHeadline/SiteHeadline.stories.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.stories.svelte
@@ -38,7 +38,7 @@
   args="{{
     section: 'Graphics',
     sectionUrl: 'https://graphics.reuters.com',
-    hed: 'Ukraine makes surprising gains in swift counteroffensive',
+    hed: 'Ukraine makes surprising gains in counteroffensive',
     authors: [
       'Dea Bankova',
       'Michael Ovaska',
@@ -59,6 +59,3 @@
     publishTime="{content.Published}"
   />
 </Story>
-
-<style lang="scss">
-</style>
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 2b9598c6..605f77c7 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -64,29 +64,34 @@
     first.getDate() === second.getDate();
 </script>
 
-<Block id="{id}" class="headline-container {cls}" width="normal">
+<Block id="{id}" class="headline-container !my-16 {cls}" width="normal">
   <header class="headline">
     <div class="title">
       {#if section}
-        <p class="section-title">
+        <p
+          class="section-title mb-2 font-subhed text-sm text-secondary font-bold"
+        >
           {#if sectionUrl}
-            <a href="{sectionUrl}">{section}</a>
+            <a class="no-underline !text-secondary" href="{sectionUrl}"
+              >{section}</a
+            >
           {:else}
             {section}
           {/if}
         </p>
       {/if}
       {#if hed}
-        <h1>{hed}</h1>
+        <h1 class="my-0 font-hed text-primary leading-none text-3xl">{hed}</h1>
       {/if}
     </div>
-    <aside class="article-metadata">
+    <aside class="article-metadata mt-2 font-subhed">
       <div class="byline-container">
-        <div class="byline">
+        <div class="byline text-primary font-bold leading-tight">
           By
           {#if authors.length > 0}
             {#each authors as author, i}
               <a
+                class="no-underline"
                 href="https://www.reuters.com/authors/{slugify(author.trim(), {
                   lower: true,
                 })}/"
@@ -101,7 +106,9 @@
           {/if}
         </div>
       </div>
-      <div class="dateline-container">
+      <div
+        class="dateline-container mt-1.5 text-secondary text-xxs uppercase leading-normal tracking-normal"
+      >
         {#if isValidDate(publishTime)}
           <div>
             Published
@@ -136,96 +143,10 @@
 </Block>
 
 <style lang="scss">
-  @import '../../scss/fonts/variables';
-
-  :global(div.article-block.headline-container) {
-    margin: 4rem auto;
-  }
-
-  // Official styles
-  header.headline {
-    text-align: center;
-    color: var(--theme-colour-text-primary, var(--tr-dark-grey));
-
-    h1 {
-      text-align: left;
-      font-size: 3rem;
-      line-height: 1.14;
-      margin: 0.6rem 0;
-      font-family: var(--theme-font-family-hed, $font-family-display);
-      color: var(--theme-colour-text-primary, var(--tr-dark-grey));
-      @media (max-width: 900px) {
-        font-size: 2.6rem;
-      }
-      @media (max-width: 600px) {
-        font-size: 2.1rem;
-        font-weight: 500;
-      }
-    }
-
-    p {
-      font-family: var(--theme-font-family-subhed, $font-family-display);
-      color: var(--theme-colour-text-primary, var(--tr-dark-grey));
-      margin: 0;
-      font-weight: 200;
-
-      &.section-title {
-        font-weight: 800;
-        color: var(--theme-colour-text-secondary, var(--tr-light-grey));
-        text-align: left;
-        font-size: 1.2rem;
-        opacity: 0.8;
-        @media (max-width: 600px) {
-          font-size: 1rem;
-        }
-        a {
-          color: var(--theme-colour-text-secondary, var(--tr-light-grey));
-          text-decoration: none;
-        }
-      }
-    }
-    .article-metadata {
-      padding: 40px 0 0;
-      padding-top: 0;
-      font-family: var(--theme-font-family-note, $font-family-display);
-      color: var(--theme-colour-text-primary, var(--tr-dark-grey));
-      text-align: left;
-
-      .byline-container {
-        margin-bottom: 0px;
-      }
-
-      .byline {
-        font-weight: bold;
-        font-weight: 600;
-        font-size: 1rem;
-        line-height: 1.4rem;
-        @media (max-width: 600px) {
-          font-size: 0.9rem;
-          line-height: 1.2rem;
-        }
-        a {
-          color: var(--theme-colour-text-primary, var(--tr-dark-grey));
-          text-decoration: none;
-          white-space: nowrap;
-          &:hover {
-            text-decoration: underline;
-          }
-        }
-      }
-
-      .dateline-container {
-        text-transform: uppercase;
-        color: var(--theme-colour-text-secondary, var(--tr-medium-grey));
-        font-size: 0.8rem;
-        line-height: 1.1rem;
-        letter-spacing: 0.3px;
-        margin-top: 0.5rem;
-        @media (max-width: 600px) {
-          font-size: 0.75rem;
-          line-height: 1.05rem;
-        }
-      }
+  .byline a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
     }
   }
 </style>
diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts
index adeff911..1a961fbf 100644
--- a/src/components/Theme/@types/component.ts
+++ b/src/components/Theme/@types/component.ts
@@ -12,6 +12,10 @@ interface FontFamily {
   'serif': string,
   'sans-serif': string,
   'monospace': string,
+  hed: string,
+  subhed: string,
+  body: string,
+  note: string,
 }
 
 interface FontSize {
diff --git a/src/components/Theme/themes/common.js b/src/components/Theme/themes/common.js
index 5696fb71..cd5ff952 100644
--- a/src/components/Theme/themes/common.js
+++ b/src/components/Theme/themes/common.js
@@ -6,6 +6,10 @@ export default {
       'sans-serif': 'Knowledge, sans-serif',
       monospace:
         'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      hed: 'var(--theme-font-family-sans-serif)',
+      subhed: 'var(--theme-font-family-sans-serif)',
+      body: 'var(--theme-font-family-serif)',
+      note: 'var(--theme-font-family-sans-serif)',
     },
     size: {
       xxs: 'clamp(0.79rem, -0.2vw + 0.83rem, 0.67rem)',
diff --git a/src/scss/_TO-DEPRECATE/_body-text.scss b/src/scss/mixins/texts/_body.scss
similarity index 78%
rename from src/scss/_TO-DEPRECATE/_body-text.scss
rename to src/scss/mixins/texts/_body.scss
index d89e3006..3121db3b 100644
--- a/src/scss/_TO-DEPRECATE/_body-text.scss
+++ b/src/scss/mixins/texts/_body.scss
@@ -1,7 +1,8 @@
-@import '../fonts/mixins';
-@import '../fonts/variables';
-@import '../typography_old/font-size';
-@import '../colours/thematic/tr';
+// @import '../fonts/mixins';
+// @import '../fonts/variables';
+// @import '../typography_old/font-size';
+// @import '../colours/thematic/tr';
+@use '../../mixins' as *;
 
 @mixin body-text {
   h2,
@@ -12,7 +13,7 @@
   p,
   li,
   blockquote {
-    color: var(--theme-colour-text-primary, var(--tr-dark-grey));
+    @include text-primary;
   }
 
   p,
@@ -21,10 +22,9 @@
   ol li,
   ol li p {
     -webkit-font-smoothing: antialiased;
-    font-family: var(--theme-font-family-body, $font-family-serif);
-    color: var(--theme-colour-text-primary, var(--tr-dark-grey));
-
-    @extend .paragraph-size;
+    @include font-serif;
+    @include text-primary;
+    @include text-base;
 
     a {
       color: currentColor;
@@ -53,15 +53,6 @@
     margin: 4rem 0 2rem;
     text-align: center;
     font-weight: 600;
-
-    &::after {
-      display: block;
-      content: '';
-      background: var(--theme-colour-text-secondary, var(--tr-medium-grey));
-      height: 3px;
-      width: 100px;
-      margin: 10px auto 2rem;
-    }
   }
 
   ul {
diff --git a/src/scss/_TO-DEPRECATE/_graphic.scss b/src/scss/mixins/texts/_graphic.scss
similarity index 100%
rename from src/scss/_TO-DEPRECATE/_graphic.scss
rename to src/scss/mixins/texts/_graphic.scss
diff --git a/src/scss/_TO-DEPRECATE/_note-text.scss b/src/scss/mixins/texts/_note.scss
similarity index 100%
rename from src/scss/_TO-DEPRECATE/_note-text.scss
rename to src/scss/mixins/texts/_note.scss
diff --git a/src/scss/reset/_main.scss b/src/scss/reset/_main.scss
index 401a9fef..cc958be6 100644
--- a/src/scss/reset/_main.scss
+++ b/src/scss/reset/_main.scss
@@ -40,3 +40,7 @@ ol ul,
 ul ol {
   margin-bottom: 0;
 }
+
+a {
+  color: inherit;
+}
diff --git a/src/scss/tokens/spacers/_margin.scss b/src/scss/tokens/spacers/_margin.scss
index c78ca8e5..77ddd2b2 100644
--- a/src/scss/tokens/spacers/_margin.scss
+++ b/src/scss/tokens/spacers/_margin.scss
@@ -1,13 +1,38 @@
 $margin-levels: (
   '0': 0,
-  '1': 1rem,
-  '2': 2rem,
-  '3': 3rem,
-  '4': 4rem,
-  '5': 5rem,
-  '6': 6rem,
-  '7': 7rem,
-  '8': 8rem,
+  '0\\.5': 0.125rem,
+  '1': 0.25rem,
+  '1\\.5': 0.375rem,
+  '2': 0.5rem,
+  '2\\.5': 0.625rem,
+  '3': 0.75rem,
+  '3\\.5': 0.875rem,
+  '4': 1rem,
+  '5': 1.25rem,
+  '6': 1.5rem,
+  '7': 1.75rem,
+  '8': 2rem,
+  '9': 2.25rem,
+  '10': 2.5rem,
+  '11': 2.75rem,
+  '12': 3rem,
+  '14': 3.5rem,
+  '16': 4rem,
+  '20': 5rem,
+  '24': 6rem,
+  '28': 7rem,
+  '32': 8rem,
+  '36': 9rem,
+  '40': 10rem,
+  '44': 11rem,
+  '48': 12rem,
+  '52': 13rem,
+  '56': 14rem,
+  '60': 15rem,
+  '64': 16rem,
+  '72': 18rem,
+  '80': 20rem,
+  '96': 24rem,
 );
 
 @each $level, $value in $margin-levels {
diff --git a/src/scss/tokens/spacers/_padding.scss b/src/scss/tokens/spacers/_padding.scss
index 8d80255f..6d1a94c7 100644
--- a/src/scss/tokens/spacers/_padding.scss
+++ b/src/scss/tokens/spacers/_padding.scss
@@ -1,13 +1,38 @@
 $padding-levels: (
   '0': 0,
-  '1': 0.5rem,
-  '2': 1rem,
-  '3': 1.75rem,
-  '4': 2.25rem,
-  '5': 3rem,
-  '6': 4rem,
-  '7': 5rem,
-  '8': 6rem,
+  '0\\.5': 0.125rem,
+  '1': 0.25rem,
+  '1\\.5': 0.375rem,
+  '2': 0.5rem,
+  '2\\.5': 0.625rem,
+  '3': 0.75rem,
+  '3\\.5': 0.875rem,
+  '4': 1rem,
+  '5': 1.25rem,
+  '6': 1.5rem,
+  '7': 1.75rem,
+  '8': 2rem,
+  '9': 2.25rem,
+  '10': 2.5rem,
+  '11': 2.75rem,
+  '12': 3rem,
+  '14': 3.5rem,
+  '16': 4rem,
+  '20': 5rem,
+  '24': 6rem,
+  '28': 7rem,
+  '32': 8rem,
+  '36': 9rem,
+  '40': 10rem,
+  '44': 11rem,
+  '48': 12rem,
+  '52': 13rem,
+  '56': 14rem,
+  '60': 15rem,
+  '64': 16rem,
+  '72': 18rem,
+  '80': 20rem,
+  '96': 24rem,
 );
 
 @each $level, $value in $padding-levels {
diff --git a/src/scss/tokens/text/_font-family.scss b/src/scss/tokens/text/_font-family.scss
index ba9ce421..9abc2bbd 100644
--- a/src/scss/tokens/text/_font-family.scss
+++ b/src/scss/tokens/text/_font-family.scss
@@ -9,6 +9,18 @@
 .font-mono {
   @include font-mono;
 }
+.font-hed {
+  @include font-hed;
+}
+.font-subhed {
+  @include font-subhed;
+}
+.font-body {
+  @include font-body;
+}
+.font-note {
+  @include font-note;
+}
 .\!font-serif {
   @include \!font-serif;
 }
@@ -18,3 +30,15 @@
 .\!font-mono {
   @include \!font-mono;
 }
+.\!font-hed {
+  @include \!font-hed;
+}
+.\!font-subhed {
+  @include \!font-subhed;
+}
+.\!font-body {
+  @include \!font-body;
+}
+.\!font-note {
+  @include \!font-note;
+}
diff --git a/src/scss/tokens/text/mixins/_font-family.scss b/src/scss/tokens/text/mixins/_font-family.scss
index 61c3ebac..d76132ec 100644
--- a/src/scss/tokens/text/mixins/_font-family.scss
+++ b/src/scss/tokens/text/mixins/_font-family.scss
@@ -7,6 +7,18 @@
 @mixin font-mono {
   font-family: var(--theme-font-family-monospace);
 }
+@mixin font-hed {
+  font-family: var(--theme-font-family-hed);
+}
+@mixin font-subhed {
+  font-family: var(--theme-font-family-subhed);
+}
+@mixin font-body {
+  font-family: var(--theme-font-family-body);
+}
+@mixin font-note {
+  font-family: var(--theme-font-family-note);
+}
 @mixin \!font-serif {
   font-family: var(--theme-font-family-serif) !important;
 }
@@ -16,3 +28,15 @@
 @mixin \!font-mono {
   font-family: var(--theme-font-family-monospace) !important;
 }
+@mixin \!font-hed {
+  font-family: var(--theme-font-family-hed) !important;
+}
+@mixin \!font-subhed {
+  font-family: var(--theme-font-family-subhed) !important;
+}
+@mixin \!font-body {
+  font-family: var(--theme-font-family-body) !important;
+}
+@mixin \!font-note {
+  font-family: var(--theme-font-family-note) !important;
+}