From d6240e249739071270ab660557ea314e7447305c Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Mon, 24 Jul 2023 22:25:39 +0100
Subject: [PATCH] better scss token convention

---
 .storybook/preview.scss                       |  10 +-
 src/components/Headline/Headline.svelte       |   2 +-
 src/docs/styles/typography/main.stories.mdx   |  20 +--
 src/docs/styles/typography/styles.scss        |   3 -
 src/scss/_mixins.scss                         |   6 -
 src/scss/_variables.scss                      |   2 -
 src/scss/components/_hero-title.scss          | 118 --------------
 src/scss/extenders.scss                       |   2 +
 src/scss/fonts/_font-faces.scss               |  84 +++++-----
 src/scss/fonts/_mixins.scss                   |  25 ---
 src/scss/fonts/_rules.scss                    |  19 ---
 src/scss/fonts/_variables.scss                |  26 ---
 src/scss/main.scss                            |   5 +-
 src/scss/text/_font-faces.scss                | 117 --------------
 src/scss/tokens.scss                          |   3 +-
 src/scss/{ => tokens}/spacers/_main.scss      |   0
 src/scss/tokens/spacers/_margin.scss          |  66 ++++++++
 src/scss/tokens/spacers/_padding.scss         |  47 ++++++
 src/scss/tokens/spacers/extenders/_main.scss  |   2 +
 .../spacers/extenders}/_margin.scss           |  42 ++---
 .../spacers/extenders}/_padding.scss          |  30 ++--
 src/scss/{ => tokens}/text/_font-family.scss  |   2 +-
 src/scss/{ => tokens}/text/_font-size.scss    |   2 +-
 src/scss/{ => tokens}/text/_font-style.scss   |   2 +-
 src/scss/{ => tokens}/text/_font-weight.scss  |   2 +-
 .../{ => tokens}/text/_letter-spacing.scss    |   2 +-
 src/scss/{ => tokens}/text/_line-height.scss  |   2 +-
 .../{text/tokens => tokens/text}/_main.scss   |   0
 src/scss/{ => tokens}/text/_text-align.scss   |   2 +-
 .../{ => tokens}/text/_text-decoration.scss   |   2 +-
 .../{ => tokens}/text/_text-transform.scss    |   2 +-
 .../{ => tokens}/text/_vertical-align.scss    |   2 +-
 src/scss/{ => tokens}/text/_white-space.scss  |   2 +-
 src/scss/{ => tokens}/text/_word-break.scss   |   2 +-
 .../text/extenders}/_font-family.scss         |   0
 .../text/extenders}/_font-size.scss           |   0
 .../text/extenders}/_font-style.scss          |   0
 .../text/extenders}/_font-weight.scss         |   0
 .../text/extenders}/_letter-spacing.scss      |   0
 .../text/extenders}/_line-height.scss         |   0
 .../text/extenders}/_main.scss                |   1 -
 .../text/extenders}/_text-align.scss          |   0
 .../text/extenders}/_text-decoration.scss     |   0
 .../text/extenders}/_text-transform.scss      |   0
 .../text/extenders}/_vertical-align.scss      |   0
 .../text/extenders}/_white-space.scss         |   0
 .../text/extenders}/_word-break.scss          |   0
 src/scss/typography/_font-faces.scss          | 117 --------------
 src/scss/typography/_main.scss                |  14 --
 src/scss/typography/_mixins.scss              | 125 ---------------
 src/scss/typography/_rules.scss               | 150 ------------------
 src/scss/typography_old/_box-shadow.scss      |  11 --
 src/scss/typography_old/_font-size.scss       |  81 ----------
 src/scss/typography_old/_letter-spacing.scss  |  15 --
 src/scss/typography_old/_main.scss            |   5 -
 src/scss/typography_old/_mixins.scss          |  47 ------
 src/scss/typography_old/_rules.scss           |  82 ----------
 src/scss/typography_old/_text-shadow.scss     |  13 --
 src/scss/typography_old/_transform.scss       |   7 -
 src/scss/typography_old/_variables.scss       |  39 -----
 60 files changed, 221 insertions(+), 1139 deletions(-)
 delete mode 100644 src/scss/_mixins.scss
 delete mode 100644 src/scss/_variables.scss
 delete mode 100644 src/scss/components/_hero-title.scss
 create mode 100644 src/scss/extenders.scss
 delete mode 100644 src/scss/fonts/_mixins.scss
 delete mode 100644 src/scss/fonts/_rules.scss
 delete mode 100644 src/scss/fonts/_variables.scss
 delete mode 100644 src/scss/text/_font-faces.scss
 rename src/scss/{ => tokens}/spacers/_main.scss (100%)
 create mode 100644 src/scss/tokens/spacers/_margin.scss
 create mode 100644 src/scss/tokens/spacers/_padding.scss
 create mode 100644 src/scss/tokens/spacers/extenders/_main.scss
 rename src/scss/{spacers => tokens/spacers/extenders}/_margin.scss (75%)
 rename src/scss/{spacers => tokens/spacers/extenders}/_padding.scss (74%)
 rename src/scss/{ => tokens}/text/_font-family.scss (87%)
 rename src/scss/{ => tokens}/text/_font-size.scss (96%)
 rename src/scss/{ => tokens}/text/_font-style.scss (83%)
 rename src/scss/{ => tokens}/text/_font-weight.scss (96%)
 rename src/scss/{ => tokens}/text/_letter-spacing.scss (94%)
 rename src/scss/{ => tokens}/text/_line-height.scss (95%)
 rename src/scss/{text/tokens => tokens/text}/_main.scss (100%)
 rename src/scss/{ => tokens}/text/_text-align.scss (94%)
 rename src/scss/{ => tokens}/text/_text-decoration.scss (90%)
 rename src/scss/{ => tokens}/text/_text-transform.scss (82%)
 rename src/scss/{ => tokens}/text/_vertical-align.scss (95%)
 rename src/scss/{ => tokens}/text/_white-space.scss (88%)
 rename src/scss/{ => tokens}/text/_word-break.scss (85%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_font-family.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_font-size.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_font-style.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_font-weight.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_letter-spacing.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_line-height.scss (100%)
 rename src/scss/{text => tokens/text/extenders}/_main.scss (92%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_text-align.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_text-decoration.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_text-transform.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_vertical-align.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_white-space.scss (100%)
 rename src/scss/{text/tokens => tokens/text/extenders}/_word-break.scss (100%)
 delete mode 100644 src/scss/typography/_font-faces.scss
 delete mode 100644 src/scss/typography/_main.scss
 delete mode 100644 src/scss/typography/_mixins.scss
 delete mode 100644 src/scss/typography/_rules.scss
 delete mode 100644 src/scss/typography_old/_box-shadow.scss
 delete mode 100644 src/scss/typography_old/_font-size.scss
 delete mode 100644 src/scss/typography_old/_letter-spacing.scss
 delete mode 100644 src/scss/typography_old/_main.scss
 delete mode 100644 src/scss/typography_old/_mixins.scss
 delete mode 100644 src/scss/typography_old/_rules.scss
 delete mode 100644 src/scss/typography_old/_text-shadow.scss
 delete mode 100644 src/scss/typography_old/_transform.scss
 delete mode 100644 src/scss/typography_old/_variables.scss

diff --git a/.storybook/preview.scss b/.storybook/preview.scss
index 3dc7f82b..267cf6da 100644
--- a/.storybook/preview.scss
+++ b/.storybook/preview.scss
@@ -1,5 +1,3 @@
-@import "../src/scss/mixins";
-
 table.docblock-argstable {
   p {
     font-family: inherit;
@@ -39,16 +37,16 @@ div.sbdocs-content {
 }
 
 .sbdocs {
-  @include font-display;
+  font-family: 'Knowledge', sans-serif;
 
   h1 {
-    @include font-display;
+    font-family: 'Knowledge', sans-serif;
   }
 
   p, ul, li {
     font-size: 18px;
     line-height: 29px;
-    @include font-display;
+    font-family: 'Knowledge', sans-serif;
   
     .highlight {
       background-color: rgb(254, 254, 160);
@@ -60,7 +58,7 @@ div.sbdocs-content {
   }
 
   a {
-    @include font-display;
+    font-family: 'Knowledge', sans-serif;
     color: #0071a1;
     text-decoration: none;
     text-underline-offset: 2px;
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 3fdcadae..c73e8e82 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -69,7 +69,7 @@
 </Block>
 
 <style lang="scss">
-  @use '../../scss/tokens';
+  @use '../../scss/extenders';
   @import '../../scss/fonts/variables';
 
   header.headline {
diff --git a/src/docs/styles/typography/main.stories.mdx b/src/docs/styles/typography/main.stories.mdx
index cb721d4f..8e08dde9 100644
--- a/src/docs/styles/typography/main.stories.mdx
+++ b/src/docs/styles/typography/main.stories.mdx
@@ -4,34 +4,34 @@ import CopyTable from '../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../utils/parseCss';
 
 {/* @ts-ignore */}
-import fontFamily from '$lib/scss/text/\_font-family.scss?inline';
+import fontFamily from '$lib/scss/tokens/text/\_font-family.scss?inline';
 
 {/* @ts-ignore */}
-import fontStyle from '$lib/scss/text/\_font-style.scss?raw';
+import fontStyle from '$lib/scss/tokens/text/\_font-style.scss?inline';
 
 {/* @ts-ignore */}
-import fontWeight from '$lib/scss/text/\_font-weight.scss?raw';
+import fontWeight from '$lib/scss/tokens/text/\_font-weight.scss?inline';
 
 {/* @ts-ignore */}
-import letterSpacing from '$lib/scss/text/\_letter-spacing.scss?raw';
+import letterSpacing from '$lib/scss/tokens/text/\_letter-spacing.scss?inline';
 
 {/* @ts-ignore */}
-import textAlign from '$lib/scss/text/\_text-align.scss?raw';
+import textAlign from '$lib/scss/tokens/text/\_text-align.scss?inline';
 
 {/* @ts-ignore */}
-import textDecoration from '$lib/scss/text/\_text-decoration.scss?raw';
+import textDecoration from '$lib/scss/tokens/text/\_text-decoration.scss?inline';
 
 {/* @ts-ignore */}
-import textTransform from '$lib/scss/text/\_text-transform.scss?raw';
+import textTransform from '$lib/scss/tokens/text/\_text-transform.scss?inline';
 
 {/* @ts-ignore */}
-import verticalAlign from '$lib/scss/text/\_vertical-align.scss?raw';
+import verticalAlign from '$lib/scss/tokens/text/\_vertical-align.scss?inline';
 
 {/* @ts-ignore */}
-import whiteSpace from '$lib/scss/text/\_white-space.scss?raw';
+import whiteSpace from '$lib/scss/tokens/text/\_white-space.scss?inline';
 
 {/* @ts-ignore */}
-import wordBreak from '$lib/scss/text/\_word-break.scss?raw';
+import wordBreak from '$lib/scss/tokens/text/\_word-break.scss?inline';
 
 import './styles.scss';
 
diff --git a/src/docs/styles/typography/styles.scss b/src/docs/styles/typography/styles.scss
index fe79e529..a273c183 100644
--- a/src/docs/styles/typography/styles.scss
+++ b/src/docs/styles/typography/styles.scss
@@ -1,7 +1,4 @@
 div.type-system-demo {
-  @import '../../../scss/typography/mixins';
-  @import '../../../scss/typography/rules';
-
   *:first-child {
     margin-top: 0;
   }
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
deleted file mode 100644
index d34ea92f..00000000
--- a/src/scss/_mixins.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import 'mixins/block';
-@import 'mixins/body-text';
-@import 'typography/mixins';
-@import 'mixins/graphic';
-@import 'mixins/note-text';
-@import 'mixins/visually-hidden';
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
deleted file mode 100644
index 10db5bc1..00000000
--- a/src/scss/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'fonts/variables';
-@import 'typography_old/variables';
diff --git a/src/scss/components/_hero-title.scss b/src/scss/components/_hero-title.scss
deleted file mode 100644
index 2654406d..00000000
--- a/src/scss/components/_hero-title.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-// TO BE DELETED...
-
-@import '~@reuters-graphics/style-color/scss/categorical/base';
-
-section.hero-title {
-  @extend .clearfix;
-  @extend .well, .widest;
-
-  position: relative;
-
-  figure {
-    position: relative;
-    margin-left: -15px;
-    width: 100vw;
-    height: calc(100vh - 60px);
-    max-height: 150vw;
-
-    @include media-breakpoint-down(sm) {
-      height: calc(70vh);
-    }
-
-    img {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-
-      &.crop-left {
-        object-position: 100% 0;
-      }
-
-      &.crop-right {
-        object-position: 0 0;
-      }
-    }
-
-    .overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.1);
-
-      &.darker {
-        background-color: rgba(0, 0, 0, 0.25);
-      }
-
-      &.darkest {
-        background-color: rgba(0, 0, 0, 0.5);
-      }
-
-      &.light {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-
-      &.lighter {
-        background-color: rgba(255, 255, 255, 0.4);
-      }
-
-      &.lightest {
-        background-color: rgba(255, 255, 255, 0.6);
-      }
-    }
-  }
-
-  .title {
-    width: 100%;
-    position: absolute;
-    top: calc(50% - 60px);
-    text-align: center;
-
-    &.top {
-      top: 20px;
-    }
-
-    &.bottom {
-      top: auto;
-      bottom: 20px;
-    }
-
-    &.left {
-      text-align: left;
-    }
-
-    &.right {
-      text-align: right;
-    }
-
-    h2,
-    p {
-      @extend .font-sans;
-    }
-
-    h2 {
-      margin: 0;
-      font-size: 4rem;
-      line-height: 4rem;
-
-      @include media-breakpoint-down(sm) {
-        font-size: 2.5rem;
-        line-height: 2.5rem;
-      }
-    }
-
-    p.section-title {
-      @extend .spaced-least;
-      @extend .uppercase;
-
-      margin: 0 0 2px;
-      font-weight: 600;
-      font-size: 0.8rem;
-    }
-  }
-}
diff --git a/src/scss/extenders.scss b/src/scss/extenders.scss
new file mode 100644
index 00000000..80efe8af
--- /dev/null
+++ b/src/scss/extenders.scss
@@ -0,0 +1,2 @@
+@use 'tokens/text/extenders/main' as text;
+@use 'tokens/spacers/extenders/main' as spacers;
diff --git a/src/scss/fonts/_font-faces.scss b/src/scss/fonts/_font-faces.scss
index bfa539b4..4f65e4a5 100644
--- a/src/scss/fonts/_font-faces.scss
+++ b/src/scss/fonts/_font-faces.scss
@@ -3,59 +3,52 @@
   font-family: 'Knowledge';
   font-style: normal;
   font-weight: 100;
-  src:
-    local('Knowledge Ultra Light'),
-    local('KnowledgeUltraLight'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeUltraLight.woff') format('woff');
+  src: local('Knowledge Ultra Light'), local('KnowledgeUltraLight'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeUltraLight.woff')
+      format('woff');
 }
 
 @font-face {
   font-family: 'Knowledge';
   font-style: normal;
   font-weight: 300;
-  src:
-    local('Knowledge Light'),
-    local('KnowledgeLight'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeLight.woff') format('woff');
+  src: local('Knowledge Light'), local('KnowledgeLight'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeLight.woff')
+      format('woff');
 }
 
 @font-face {
   font-family: 'Knowledge';
   font-style: normal;
   font-weight: 400;
-  src:
-    local('Knowledge Regular'),
-    local('KnowledgeRegular'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegular.woff') format('woff');
+  src: local('Knowledge Regular'), local('KnowledgeRegular'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegular.woff')
+      format('woff');
 }
 
 @font-face {
   font-family: 'Knowledge';
   font-style: italic;
   font-weight: 400;
-  src:
-    local('Knowledge Regular Italic'),
-    local('KnowledgeRegularItalic'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegularItalic.woff') format('woff');
+  src: local('Knowledge Regular Italic'), local('KnowledgeRegularItalic'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegularItalic.woff')
+      format('woff');
 }
 
 @font-face {
   font-family: 'Knowledge';
   font-style: normal;
   font-weight: 500;
-  src:
-    local('Knowledge Medium'),
-    local('KnowledgeMedium'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeMedium.woff') format('woff');
+  src: local('Knowledge Medium'), local('KnowledgeMedium'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeMedium.woff')
+      format('woff');
 }
 
 @font-face {
   font-family: 'Knowledge';
   font-style: normal;
   font-weight: 700;
-  src:
-    local('Knowledge Bold'),
-    local('KnowledgeBold'),
+  src: local('Knowledge Bold'), local('KnowledgeBold'),
     url('//graphics.thomsonreuters.com/fonts/KnowledgeBold.woff') format('woff');
 }
 
@@ -63,10 +56,9 @@
   font-family: 'Knowledge';
   font-style: italic;
   font-weight: 700;
-  src:
-    local('Knowledge Bold Italic'),
-    local('KnowledgeBoldItalic'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeBoldItalic.woff') format('woff');
+  src: local('Knowledge Bold Italic'), local('KnowledgeBoldItalic'),
+    url('//graphics.thomsonreuters.com/fonts/KnowledgeBoldItalic.woff')
+      format('woff');
 }
 
 /* SOURCE SANS PRO */
@@ -74,50 +66,45 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src:
-    local('Source Sans Pro'),
-    local('SourceSansPro-Regular'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Regular.woff') format('woff');
+  src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Regular.woff')
+      format('woff');
 }
 
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 600;
-  src:
-    local('Source Sans Pro Semibold'),
-    local('SourceSansPro-Semibold'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Semibold.woff') format('woff');
+  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Semibold.woff')
+      format('woff');
 }
 
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 700;
-  src:
-    local('Source Sans Pro Bold'),
-    local('SourceSansPro-Bold'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Bold.woff') format('woff');
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Bold.woff')
+      format('woff');
 }
 
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: italic;
   font-weight: 400;
-  src:
-    local('Source Sans Pro Italic'),
-    local('SourceSansPro-It'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Italic.woff') format('woff');
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Italic.woff')
+      format('woff');
 }
 
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 300;
-  src:
-    local('Source Sans Pro Light'),
-    local('SourceSansPro-Light'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Light.woff') format('woff');
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
+    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Light.woff')
+      format('woff');
 }
 
 /* FREIGHT BOOK */
@@ -125,5 +112,6 @@
   font-family: 'freight-book';
   font-style: normal;
   font-weight: normal;
-  src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff') format('woff');
+  src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff')
+    format('woff');
 }
diff --git a/src/scss/fonts/_mixins.scss b/src/scss/fonts/_mixins.scss
deleted file mode 100644
index 3749755d..00000000
--- a/src/scss/fonts/_mixins.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import '../fonts/variables';
-
-@mixin font-sans($i: false) {
-  $important: if($i, '!important', '');
-
-  font-family: $font-family-sans-serif #{$important};
-}
-
-@mixin font-serif($i: false) {
-  $important: if($i, '!important', '');
-
-  font-family: $font-family-serif #{$important};
-}
-
-@mixin font-monospace($i: false) {
-  $important: if($i, '!important', '');
-
-  font-family: $font-family-monospace #{$important};
-}
-
-@mixin font-display($i: false) {
-  $important: if($i, '!important', '');
-
-  font-family: $font-family-display #{$important};
-}
diff --git a/src/scss/fonts/_rules.scss b/src/scss/fonts/_rules.scss
deleted file mode 100644
index 1f581f00..00000000
--- a/src/scss/fonts/_rules.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@import 'variables';
-
-.font-sans {
-  font-family: var(
-    --theme-font-family-sans-serif,
-    $font-family-display
-  ) !important;
-}
-
-.font-serif {
-  font-family: var(--theme-font-family-serif, $font-family-serif) !important;
-}
-
-.font-monospace {
-  font-family: var(
-    --theme-font-family-monospace,
-    $font-family-monospace
-  ) !important;
-}
diff --git a/src/scss/fonts/_variables.scss b/src/scss/fonts/_variables.scss
deleted file mode 100644
index 422a9c96..00000000
--- a/src/scss/fonts/_variables.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-$font-family-serif: var(--theme-font-family-serif, 'freight-book', serif);
-
-$font-family-sans-serif: var(
-  --theme-font-family-sans-serif,
-  'Source Sans Pro',
-  -apple-system,
-  BlinkMacSystemFont,
-  'Segoe UI',
-  Roboto,
-  'Helvetica Neue',
-  Helvetica,
-  Arial,
-  sans-serif
-);
-
-$font-family-monospace: var(
-  --theme-font-family-monspace,
-  Menlo,
-  Monaco,
-  Consolas,
-  'Liberation Mono',
-  'Courier New',
-  monospace
-);
-
-$font-family-display: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 6b8f23ef..7f333eb2 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -9,10 +9,11 @@
 // Reset
 @use 'reset/main' as reset;
 
+// Font-faces
+@use 'fonts/font-faces' as font-faces;
+
 // Style rules
 @use 'accessibility/main' as accessibility;
 @use 'borders/main' as borders;
 @use 'colours/main' as colours;
 @use 'layout/main' as layout;
-@use 'spacers/main' as spacers;
-@use 'text/main' as text;
diff --git a/src/scss/text/_font-faces.scss b/src/scss/text/_font-faces.scss
deleted file mode 100644
index 4f65e4a5..00000000
--- a/src/scss/text/_font-faces.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-/* REUTERS KNOWLEDGE */
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Knowledge Ultra Light'), local('KnowledgeUltraLight'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeUltraLight.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Knowledge Light'), local('KnowledgeLight'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeLight.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Knowledge Regular'), local('KnowledgeRegular'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegular.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Knowledge Regular Italic'), local('KnowledgeRegularItalic'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegularItalic.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Knowledge Medium'), local('KnowledgeMedium'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeMedium.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Knowledge Bold'), local('KnowledgeBold'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeBold.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Knowledge Bold Italic'), local('KnowledgeBoldItalic'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeBoldItalic.woff')
-      format('woff');
-}
-
-/* SOURCE SANS PRO */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Regular.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Semibold.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Bold.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Italic.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Light.woff')
-      format('woff');
-}
-
-/* FREIGHT BOOK */
-@font-face {
-  font-family: 'freight-book';
-  font-style: normal;
-  font-weight: normal;
-  src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff')
-    format('woff');
-}
diff --git a/src/scss/tokens.scss b/src/scss/tokens.scss
index d58df5cb..0c5b3e2d 100644
--- a/src/scss/tokens.scss
+++ b/src/scss/tokens.scss
@@ -1 +1,2 @@
-@use 'text/tokens/main' as text;
+@use 'tokens/text/main' as text;
+@use 'tokens/spacers/main' as spacers;
diff --git a/src/scss/spacers/_main.scss b/src/scss/tokens/spacers/_main.scss
similarity index 100%
rename from src/scss/spacers/_main.scss
rename to src/scss/tokens/spacers/_main.scss
diff --git a/src/scss/tokens/spacers/_margin.scss b/src/scss/tokens/spacers/_margin.scss
new file mode 100644
index 00000000..5d37d841
--- /dev/null
+++ b/src/scss/tokens/spacers/_margin.scss
@@ -0,0 +1,66 @@
+@use 'extenders/margin';
+
+@each $level, $value in $margin-levels {
+  .m-#{$level} {
+    @extend %m-#{$level};
+  }
+  .mt-#{$level} {
+    @extend %mt-#{$level};
+  }
+  .mr-#{$level} {
+    @extend %mr-#{$level};
+  }
+  .mb-#{$level} {
+    @extend %mb-#{$level};
+  }
+  .ml-#{$level} {
+    @extend %ml-#{$level};
+  }
+  .mx-#{$level} {
+    @extend %mx-#{$level};
+  }
+  .my-#{$level} {
+    @extend %my-#{$level};
+  }
+
+  .\!m-#{$level} {
+    @extend %\!m-#{$level};
+  }
+  .\!mt-#{$level} {
+    @extend %\!mt-#{$level};
+  }
+  .\!mr-#{$level} {
+    @extend %\!mr-#{$level};
+  }
+  .\!mb-#{$level} {
+    @extend %\!mb-#{$level};
+  }
+  .\!ml-#{$level} {
+    @extend %\!ml-#{$level};
+  }
+  .\!mx-#{$level} {
+    @extend %\!mx-#{$level};
+  }
+  .\!my-#{$level} {
+    @extend %\!my-#{$level};
+  }
+}
+
+.m-auto {
+  @extend %m-auto;
+}
+.mx-auto {
+  @extend %mx-auto;
+}
+.my-auto {
+  @extend %my-auto;
+}
+.\!m-auto {
+  @extend %\!m-auto;
+}
+.\!mx-auto {
+  @extend %\!mx-auto;
+}
+.\!my-auto {
+  @extend %\!my-auto;
+}
diff --git a/src/scss/tokens/spacers/_padding.scss b/src/scss/tokens/spacers/_padding.scss
new file mode 100644
index 00000000..d7bf432f
--- /dev/null
+++ b/src/scss/tokens/spacers/_padding.scss
@@ -0,0 +1,47 @@
+@use 'extenders/padding';
+
+@each $level, $value in $padding-levels {
+  .p-#{$level} {
+    @extend %p-#{$level};
+  }
+  .pt-#{$level} {
+    @extend %pt-#{$level};
+  }
+  .pr-#{$level} {
+    @extend %pr-#{$level};
+  }
+  .pb-#{$level} {
+    @extend %pb-#{$level};
+  }
+  .pl-#{$level} {
+    @extend %pl-#{$level};
+  }
+  .px-#{$level} {
+    @extend %px-#{$level};
+  }
+  .py-#{$level} {
+    @extend %py-#{$level};
+  }
+
+  .\!p-#{$level} {
+    @extend %\!p-#{$level};
+  }
+  .\!pt-#{$level} {
+    @extend %\!pt-#{$level};
+  }
+  .\!pr-#{$level} {
+    @extend %\!pr-#{$level};
+  }
+  .\!pb-#{$level} {
+    @extend %\!pb-#{$level};
+  }
+  .\!pl-#{$level} {
+    @extend %\!pl-#{$level};
+  }
+  .\!px-#{$level} {
+    @extend %\!px-#{$level};
+  }
+  .\!py-#{$level} {
+    @extend %\!py-#{$level};
+  }
+}
diff --git a/src/scss/tokens/spacers/extenders/_main.scss b/src/scss/tokens/spacers/extenders/_main.scss
new file mode 100644
index 00000000..aee9fb8e
--- /dev/null
+++ b/src/scss/tokens/spacers/extenders/_main.scss
@@ -0,0 +1,2 @@
+@use 'margin';
+@use 'padding';
diff --git a/src/scss/spacers/_margin.scss b/src/scss/tokens/spacers/extenders/_margin.scss
similarity index 75%
rename from src/scss/spacers/_margin.scss
rename to src/scss/tokens/spacers/extenders/_margin.scss
index fbc7bd9f..5a076201 100644
--- a/src/scss/spacers/_margin.scss
+++ b/src/scss/tokens/spacers/extenders/_margin.scss
@@ -8,77 +8,77 @@ $margin-levels: (
   '6': 6rem,
   '7': 7rem,
   '8': 8rem,
-) !default;
+);
 
 @each $level, $value in $margin-levels {
-  .m-#{$level} {
+  %m-#{$level} {
     margin: $value;
   }
-  .mt-#{$level} {
+  %mt-#{$level} {
     margin-top: $value;
   }
-  .mr-#{$level} {
+  %mr-#{$level} {
     margin-right: $value;
   }
-  .mb-#{$level} {
+  %mb-#{$level} {
     margin-bottom: $value;
   }
-  .ml-#{$level} {
+  %ml-#{$level} {
     margin-left: $value;
   }
-  .mx-#{$level} {
+  %mx-#{$level} {
     margin-right: $value;
     margin-left: $value;
   }
-  .my-#{$level} {
+  %my-#{$level} {
     margin-top: $value;
     margin-bottom: $value;
   }
 
-  .\!m-#{$level} {
+  %\!m-#{$level} {
     margin: $value !important;
   }
-  .\!mt-#{$level} {
+  %\!mt-#{$level} {
     margin-top: $value !important;
   }
-  .\!mr-#{$level} {
+  %\!mr-#{$level} {
     margin-right: $value !important;
   }
-  .\!mb-#{$level} {
+  %\!mb-#{$level} {
     margin-bottom: $value !important;
   }
-  .\!ml-#{$level} {
+  %\!ml-#{$level} {
     margin-left: $value !important;
   }
-  .\!mx-#{$level} {
+  %\!mx-#{$level} {
     margin-right: $value !important;
     margin-left: $value !important;
   }
-  .\!my-#{$level} {
+  %\!my-#{$level} {
     margin-top: $value !important;
     margin-bottom: $value !important;
   }
 }
 
-.m-auto {
+%m-auto {
   margin: auto;
 }
-.mx-auto {
+%mx-auto {
   margin-right: auto;
   margin-left: auto;
 }
-.my-auto {
+%my-auto {
   margin-top: auto;
   margin-bottom: auto;
 }
-.\!m-auto {
+%\!m-auto {
   margin: auto !important;
 }
-.\!mx-auto {
+%\!mx-auto {
   margin-right: auto !important;
   margin-left: auto !important;
 }
-.\!my-auto {
+%\!my-auto {
   margin-top: auto !important;
   margin-bottom: auto !important;
 }
diff --git a/src/scss/spacers/_padding.scss b/src/scss/tokens/spacers/extenders/_padding.scss
similarity index 74%
rename from src/scss/spacers/_padding.scss
rename to src/scss/tokens/spacers/extenders/_padding.scss
index 5f575c46..7b2e4bc6 100644
--- a/src/scss/spacers/_padding.scss
+++ b/src/scss/tokens/spacers/extenders/_padding.scss
@@ -8,53 +8,53 @@ $padding-levels: (
   '6': 4rem,
   '7': 5rem,
   '8': 6rem,
-) !default;
+);
 
 @each $level, $value in $padding-levels {
-  .p-#{$level} {
+  %p-#{$level} {
     padding: $value;
   }
-  .pt-#{$level} {
+  %pt-#{$level} {
     padding-top: $value;
   }
-  .pr-#{$level} {
+  %pr-#{$level} {
     padding-right: $value;
   }
-  .pb-#{$level} {
+  %pb-#{$level} {
     padding-bottom: $value;
   }
-  .pl-#{$level} {
+  %pl-#{$level} {
     padding-left: $value;
   }
-  .px-#{$level} {
+  %px-#{$level} {
     padding-right: $value;
     padding-left: $value;
   }
-  .py-#{$level} {
+  %py-#{$level} {
     padding-top: $value;
     padding-bottom: $value;
   }
 
-  .\!p-#{$level} {
+  %\!p-#{$level} {
     padding: $value !important;
   }
-  .\!pt-#{$level} {
+  %\!pt-#{$level} {
     padding-top: $value !important;
   }
-  .\!pr-#{$level} {
+  %\!pr-#{$level} {
     padding-right: $value !important;
   }
-  .\!pb-#{$level} {
+  %\!pb-#{$level} {
     padding-bottom: $value !important;
   }
-  .\!pl-#{$level} {
+  %\!pl-#{$level} {
     padding-left: $value !important;
   }
-  .\!px-#{$level} {
+  %\!px-#{$level} {
     padding-right: $value !important;
     padding-left: $value !important;
   }
-  .\!py-#{$level} {
+  %\!py-#{$level} {
     padding-top: $value !important;
     padding-bottom: $value !important;
   }
diff --git a/src/scss/text/_font-family.scss b/src/scss/tokens/text/_font-family.scss
similarity index 87%
rename from src/scss/text/_font-family.scss
rename to src/scss/tokens/text/_font-family.scss
index fcc4e038..0d638079 100644
--- a/src/scss/text/_font-family.scss
+++ b/src/scss/tokens/text/_font-family.scss
@@ -1,4 +1,4 @@
-@import 'tokens/font-family';
+@import 'extenders/font-family';
 
 .font-serif {
   @extend %font-serif;
diff --git a/src/scss/text/_font-size.scss b/src/scss/tokens/text/_font-size.scss
similarity index 96%
rename from src/scss/text/_font-size.scss
rename to src/scss/tokens/text/_font-size.scss
index f3253355..77d11475 100644
--- a/src/scss/text/_font-size.scss
+++ b/src/scss/tokens/text/_font-size.scss
@@ -1,4 +1,4 @@
-@use 'tokens/font-size';
+@use 'extenders/font-size';
 
 .text-xxs {
   @extend %text-xxs;
diff --git a/src/scss/text/_font-style.scss b/src/scss/tokens/text/_font-style.scss
similarity index 83%
rename from src/scss/text/_font-style.scss
rename to src/scss/tokens/text/_font-style.scss
index 3c04bb57..310bdacc 100644
--- a/src/scss/text/_font-style.scss
+++ b/src/scss/tokens/text/_font-style.scss
@@ -1,4 +1,4 @@
-@use 'tokens/font-style';
+@use 'extenders/font-style';
 
 .italic {
   @extend %italic;
diff --git a/src/scss/text/_font-weight.scss b/src/scss/tokens/text/_font-weight.scss
similarity index 96%
rename from src/scss/text/_font-weight.scss
rename to src/scss/tokens/text/_font-weight.scss
index 44b45fd1..012424e1 100644
--- a/src/scss/text/_font-weight.scss
+++ b/src/scss/tokens/text/_font-weight.scss
@@ -1,4 +1,4 @@
-@use 'tokens/font-weight';
+@use 'extenders/font-weight';
 
 .font-thin {
   @extend %font-thin;
diff --git a/src/scss/text/_letter-spacing.scss b/src/scss/tokens/text/_letter-spacing.scss
similarity index 94%
rename from src/scss/text/_letter-spacing.scss
rename to src/scss/tokens/text/_letter-spacing.scss
index c21dd476..475d4e29 100644
--- a/src/scss/text/_letter-spacing.scss
+++ b/src/scss/tokens/text/_letter-spacing.scss
@@ -1,4 +1,4 @@
-@use 'tokens/letter-spacing';
+@use 'extenders/letter-spacing';
 
 .tracking-tighter {
   @extend %tracking-tighter;
diff --git a/src/scss/text/_line-height.scss b/src/scss/tokens/text/_line-height.scss
similarity index 95%
rename from src/scss/text/_line-height.scss
rename to src/scss/tokens/text/_line-height.scss
index a34d157a..9c836f7b 100644
--- a/src/scss/text/_line-height.scss
+++ b/src/scss/tokens/text/_line-height.scss
@@ -1,4 +1,4 @@
-@use 'tokens/line-height';
+@use 'extenders/line-height';
 
 .leading-none {
   @extend %leading-none;
diff --git a/src/scss/text/tokens/_main.scss b/src/scss/tokens/text/_main.scss
similarity index 100%
rename from src/scss/text/tokens/_main.scss
rename to src/scss/tokens/text/_main.scss
diff --git a/src/scss/text/_text-align.scss b/src/scss/tokens/text/_text-align.scss
similarity index 94%
rename from src/scss/text/_text-align.scss
rename to src/scss/tokens/text/_text-align.scss
index 76033cdc..3e614b9b 100644
--- a/src/scss/text/_text-align.scss
+++ b/src/scss/tokens/text/_text-align.scss
@@ -1,4 +1,4 @@
-@use 'tokens/text-align';
+@use 'extenders/text-align';
 
 .text-left {
   @extend %text-left;
diff --git a/src/scss/text/_text-decoration.scss b/src/scss/tokens/text/_text-decoration.scss
similarity index 90%
rename from src/scss/text/_text-decoration.scss
rename to src/scss/tokens/text/_text-decoration.scss
index 733f8d70..dcb33242 100644
--- a/src/scss/text/_text-decoration.scss
+++ b/src/scss/tokens/text/_text-decoration.scss
@@ -1,4 +1,4 @@
-@use 'tokens/text-decoration';
+@use 'extenders/text-decoration';
 
 .underline {
   @extend %underline;
diff --git a/src/scss/text/_text-transform.scss b/src/scss/tokens/text/_text-transform.scss
similarity index 82%
rename from src/scss/text/_text-transform.scss
rename to src/scss/tokens/text/_text-transform.scss
index bdb6bb84..92cc1c01 100644
--- a/src/scss/text/_text-transform.scss
+++ b/src/scss/tokens/text/_text-transform.scss
@@ -1,4 +1,4 @@
-@use 'tokens/text-transform';
+@use 'extenders/text-transform';
 
 .uppercase {
   @extend %uppercase;
diff --git a/src/scss/text/_vertical-align.scss b/src/scss/tokens/text/_vertical-align.scss
similarity index 95%
rename from src/scss/text/_vertical-align.scss
rename to src/scss/tokens/text/_vertical-align.scss
index 8f45ef92..ffa71ba8 100644
--- a/src/scss/text/_vertical-align.scss
+++ b/src/scss/tokens/text/_vertical-align.scss
@@ -1,4 +1,4 @@
-@use 'tokens/vertical-align';
+@use 'extenders/vertical-align';
 
 .align-baseline {
   @extend %align-baseline;
diff --git a/src/scss/text/_white-space.scss b/src/scss/tokens/text/_white-space.scss
similarity index 88%
rename from src/scss/text/_white-space.scss
rename to src/scss/tokens/text/_white-space.scss
index 1f54cf75..32ff7ac9 100644
--- a/src/scss/text/_white-space.scss
+++ b/src/scss/tokens/text/_white-space.scss
@@ -1,4 +1,4 @@
-@use 'tokens/white-space';
+@use 'extenders/white-space';
 
 .whitespace-normal {
   @extend %whitespace-normal;
diff --git a/src/scss/text/_word-break.scss b/src/scss/tokens/text/_word-break.scss
similarity index 85%
rename from src/scss/text/_word-break.scss
rename to src/scss/tokens/text/_word-break.scss
index 470b1a3e..7510813c 100644
--- a/src/scss/text/_word-break.scss
+++ b/src/scss/tokens/text/_word-break.scss
@@ -1,4 +1,4 @@
-@use 'tokens/word-break';
+@use 'extenders/word-break';
 
 .break-normal {
   @extend %break-normal;
diff --git a/src/scss/text/tokens/_font-family.scss b/src/scss/tokens/text/extenders/_font-family.scss
similarity index 100%
rename from src/scss/text/tokens/_font-family.scss
rename to src/scss/tokens/text/extenders/_font-family.scss
diff --git a/src/scss/text/tokens/_font-size.scss b/src/scss/tokens/text/extenders/_font-size.scss
similarity index 100%
rename from src/scss/text/tokens/_font-size.scss
rename to src/scss/tokens/text/extenders/_font-size.scss
diff --git a/src/scss/text/tokens/_font-style.scss b/src/scss/tokens/text/extenders/_font-style.scss
similarity index 100%
rename from src/scss/text/tokens/_font-style.scss
rename to src/scss/tokens/text/extenders/_font-style.scss
diff --git a/src/scss/text/tokens/_font-weight.scss b/src/scss/tokens/text/extenders/_font-weight.scss
similarity index 100%
rename from src/scss/text/tokens/_font-weight.scss
rename to src/scss/tokens/text/extenders/_font-weight.scss
diff --git a/src/scss/text/tokens/_letter-spacing.scss b/src/scss/tokens/text/extenders/_letter-spacing.scss
similarity index 100%
rename from src/scss/text/tokens/_letter-spacing.scss
rename to src/scss/tokens/text/extenders/_letter-spacing.scss
diff --git a/src/scss/text/tokens/_line-height.scss b/src/scss/tokens/text/extenders/_line-height.scss
similarity index 100%
rename from src/scss/text/tokens/_line-height.scss
rename to src/scss/tokens/text/extenders/_line-height.scss
diff --git a/src/scss/text/_main.scss b/src/scss/tokens/text/extenders/_main.scss
similarity index 92%
rename from src/scss/text/_main.scss
rename to src/scss/tokens/text/extenders/_main.scss
index 65e3f69e..da925cb1 100644
--- a/src/scss/text/_main.scss
+++ b/src/scss/tokens/text/extenders/_main.scss
@@ -1,4 +1,3 @@
-@use 'font-faces';
 @use 'font-family';
 @use 'font-size';
 @use 'font-style';
diff --git a/src/scss/text/tokens/_text-align.scss b/src/scss/tokens/text/extenders/_text-align.scss
similarity index 100%
rename from src/scss/text/tokens/_text-align.scss
rename to src/scss/tokens/text/extenders/_text-align.scss
diff --git a/src/scss/text/tokens/_text-decoration.scss b/src/scss/tokens/text/extenders/_text-decoration.scss
similarity index 100%
rename from src/scss/text/tokens/_text-decoration.scss
rename to src/scss/tokens/text/extenders/_text-decoration.scss
diff --git a/src/scss/text/tokens/_text-transform.scss b/src/scss/tokens/text/extenders/_text-transform.scss
similarity index 100%
rename from src/scss/text/tokens/_text-transform.scss
rename to src/scss/tokens/text/extenders/_text-transform.scss
diff --git a/src/scss/text/tokens/_vertical-align.scss b/src/scss/tokens/text/extenders/_vertical-align.scss
similarity index 100%
rename from src/scss/text/tokens/_vertical-align.scss
rename to src/scss/tokens/text/extenders/_vertical-align.scss
diff --git a/src/scss/text/tokens/_white-space.scss b/src/scss/tokens/text/extenders/_white-space.scss
similarity index 100%
rename from src/scss/text/tokens/_white-space.scss
rename to src/scss/tokens/text/extenders/_white-space.scss
diff --git a/src/scss/text/tokens/_word-break.scss b/src/scss/tokens/text/extenders/_word-break.scss
similarity index 100%
rename from src/scss/text/tokens/_word-break.scss
rename to src/scss/tokens/text/extenders/_word-break.scss
diff --git a/src/scss/typography/_font-faces.scss b/src/scss/typography/_font-faces.scss
deleted file mode 100644
index 4f65e4a5..00000000
--- a/src/scss/typography/_font-faces.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-/* REUTERS KNOWLEDGE */
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Knowledge Ultra Light'), local('KnowledgeUltraLight'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeUltraLight.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Knowledge Light'), local('KnowledgeLight'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeLight.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Knowledge Regular'), local('KnowledgeRegular'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegular.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Knowledge Regular Italic'), local('KnowledgeRegularItalic'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegularItalic.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Knowledge Medium'), local('KnowledgeMedium'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeMedium.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Knowledge Bold'), local('KnowledgeBold'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeBold.woff') format('woff');
-}
-
-@font-face {
-  font-family: 'Knowledge';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Knowledge Bold Italic'), local('KnowledgeBoldItalic'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeBoldItalic.woff')
-      format('woff');
-}
-
-/* SOURCE SANS PRO */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Regular.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Semibold.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Bold.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-It'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Italic.woff')
-      format('woff');
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Light.woff')
-      format('woff');
-}
-
-/* FREIGHT BOOK */
-@font-face {
-  font-family: 'freight-book';
-  font-style: normal;
-  font-weight: normal;
-  src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff')
-    format('woff');
-}
diff --git a/src/scss/typography/_main.scss b/src/scss/typography/_main.scss
deleted file mode 100644
index 8815796c..00000000
--- a/src/scss/typography/_main.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/** 
- * Default typography styles for Reuters Graphics projects
- * Uses sizes and typeface declarations from CSS variables defined in the Theme
- * Knowlege, Source Sans Pro and Freight Book font declarations
- * Includes Font size levels from 1 to 6
- * Includes Font families for display, serif, sans-serif and monospace text
- * Includes predefined responsive style tokens for hed, subheads(3), body and note(3) text
- * 🄯2023 Reuters Graphics
- */
-
-@import 'font-faces';
-@import 'mixins';
-@import 'classes';
-@import 'rules';
diff --git a/src/scss/typography/_mixins.scss b/src/scss/typography/_mixins.scss
deleted file mode 100644
index c1216a2c..00000000
--- a/src/scss/typography/_mixins.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-/* FONT SIZE MIXINS */
-@mixin font-size-1($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-scale-size-1) #{$important};
-}
-
-@mixin font-size-2($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-scale-size-2) #{$important};
-}
-
-@mixin font-size-3($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-scale-size-3) #{$important};
-}
-
-@mixin font-size-4($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-scale-size-4) #{$important};
-}
-
-@mixin font-size-5($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-scale-size-5) #{$important};
-}
-
-@mixin font-size-6($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-scale-size-6) #{$important};
-}
-
-/* TYPEFACE MIXINS */
-@mixin typeface-display($i: false) {
-  $important: if($i, '!important', '');
-  font-family: var(--theme-typeface-display) #{$important};
-}
-
-@mixin typeface-serif($i: false) {
-  $important: if($i, '!important', '');
-  font-family: var(--theme-typeface-serif) #{$important};
-}
-
-@mixin typeface-sans-serif($i: false) {
-  $important: if($i, '!important', '');
-  font-family: var(--theme-typeface-sans-serif) #{$important};
-}
-
-@mixin typeface-monospace($i: false) {
-  $important: if($i, '!important', '');
-  font-family: var(--theme-typeface-monospace) #{$important};
-}
-
-/* FONT STYLE TOKEN MIXINS */
-@mixin font-hed($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-font-size-hed) #{$important};
-  font-family: var(--theme-font-family-hed) #{$important};
-  font-weight: 500 #{$important};
-  line-height: 1.14 #{$important};
-  color: var(--theme-colour-text-primary) #{$important};
-}
-
-@mixin font-subhed-1($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-font-size-subhed-1) #{$important};
-  font-family: var(--theme-font-family-subhed) #{$important};
-  font-weight: 700 #{$important};
-  line-height: 1.14 #{$important};
-  color: var(--theme-colour-text-primary) #{$important};
-}
-
-@mixin font-subhed-2($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-font-size-subhed-2) #{$important};
-  font-family: var(--theme-font-family-subhed) #{$important};
-  font-weight: 700 #{$important};
-  line-height: 1.28 #{$important};
-  color: var(--theme-colour-text-primary) #{$important};
-}
-
-@mixin font-subhed-3($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-font-size-subhed-3) #{$important};
-  font-family: var(--theme-font-family-subhed) #{$important};
-  font-weight: 500 #{$important};
-  line-height: 1.4 #{$important};
-  text-transform: uppercase #{$important};
-  color: var(--theme-colour-text-secondary) #{$important};
-}
-
-@mixin font-body($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-font-size-body) #{$important};
-  font-family: var(--theme-font-family-body) #{$important};
-  font-weight: 400 #{$important};
-  line-height: 1.5 #{$important};
-  color: var(--theme-colour-text-primary) #{$important};
-}
-
-@mixin font-note-1($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-font-size-note-1) #{$important};
-  font-family: var(--theme-font-family-note) #{$important};
-  font-weight: 300 #{$important};
-  line-height: 1.4 #{$important};
-  color: var(--theme-colour-text-primary) #{$important};
-}
-
-@mixin font-note-2($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-font-size-note-2) #{$important};
-  font-family: var(--theme-font-family-note) #{$important};
-  font-weight: 300 #{$important};
-  line-height: 1.4 #{$important};
-  color: var(--theme-colour-text-secondary) #{$important};
-}
-
-@mixin font-note-3($i: false) {
-  $important: if($i, '!important', '');
-  font-size: var(--theme-font-size-note-3) #{$important};
-  font-family: var(--theme-font-family-note) #{$important};
-  font-weight: 400 #{$important};
-  line-height: 1.4 #{$important};
-  color: var(--theme-colour-text-secondary) #{$important};
-}
diff --git a/src/scss/typography/_rules.scss b/src/scss/typography/_rules.scss
deleted file mode 100644
index 9d3e2eab..00000000
--- a/src/scss/typography/_rules.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-@import 'mixins';
-
-/* RESPONSIVE SCALING */
-// TODO: Talk to Prasanta. This needs to be handled in the component, I think.
-// @media (max-width: 510px) {
-//   div.theme {
-//     // --theme-scale-size-base: var(--theme-scale-size-base-mobile) !important;
-//     --theme-scale-size-1: calc(
-//       var(--theme-scale-size-base-mobile) * 2.25rem
-//     ) !important;
-//     --theme-scale-size-2: calc(
-//       var(--theme-scale-size-base-mobile) * 1.5rem
-//     ) !important;
-//     --theme-scale-size-3: calc(
-//       var(--theme-scale-size-base-mobile) * 1rem
-//     ) !important;
-//     --theme-scale-size-4: calc(
-//       var(--theme-scale-size-base-mobile) * 0.9rem
-//     ) !important;
-//   }
-// }
-
-/* SET DEFAULT STYLES */
-
-h1 {
-  @include font-hed;
-}
-
-h2 {
-  @include font-subhed-1;
-}
-
-h3 {
-  @include font-subhed-2;
-}
-
-h4,
-h5,
-h6 {
-  @include font-subhed-3;
-}
-
-p {
-  @include font-body;
-}
-
-.body-text {
-  p {
-    @include font-body;
-  }
-}
-
-.body-note {
-  @include font-note-1;
-
-  p {
-    @include font-note-1;
-  }
-}
-
-.end-note {
-  @include font-note-2;
-
-  p {
-    @include font-note-2;
-  }
-}
-
-.foot-note {
-  @include font-note-3;
-
-  p {
-    @include font-note-3;
-  }
-}
-
-/* FONT SIZE CLASSES */
-.font-size-1 {
-  @include font-size-1($i: false);
-}
-
-.font-size-2 {
-  @include font-size-2($i: false);
-}
-
-.font-size-3 {
-  @include font-size-3($i: false);
-}
-
-.font-size-4 {
-  @include font-size-4($i: false);
-}
-
-.font-size-5 {
-  @include font-size-5($i: false);
-}
-
-.font-size-6 {
-  @include font-size-6($i: false);
-}
-
-/* TYPEFACE CLASSES */
-.typeface-display {
-  @include typeface-display($i: false);
-}
-
-.typeface-serif {
-  @include typeface-serif($i: false);
-}
-
-.typeface-sans-serif {
-  @include typeface-sans-serif($i: false);
-}
-
-.typeface-monospace {
-  @include typeface-monospace($i: false);
-}
-
-/* FONT STYLE TOKEN CLASSES */
-.font-hed {
-  @include font-hed($i: false);
-}
-
-.font-subhed-1 {
-  @include font-subhed-1($i: false);
-}
-
-.font-subhed-2 {
-  @include font-subhed-2($i: false);
-}
-
-.font-subhed-3 {
-  @include font-subhed-3($i: false);
-}
-
-.font-body {
-  @include font-body($i: false);
-}
-
-.font-note-1 {
-  @include font-note-1($i: false);
-}
-
-.font-note-2 {
-  @include font-note-2($i: false);
-}
-
-.font-note-3 {
-  @include font-note-3($i: false);
-}
diff --git a/src/scss/typography_old/_box-shadow.scss b/src/scss/typography_old/_box-shadow.scss
deleted file mode 100644
index 11eb5563..00000000
--- a/src/scss/typography_old/_box-shadow.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.box-shadow-low {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.16) !important;
-}
-
-.box-shadow {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.24) !important;
-}
-
-.box-shadow-high {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 6px 6px rgba(0, 0, 0, 0.24) !important;
-}
diff --git a/src/scss/typography_old/_font-size.scss b/src/scss/typography_old/_font-size.scss
deleted file mode 100644
index 9d4d7a4e..00000000
--- a/src/scss/typography_old/_font-size.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-.paragraph-size {
-  font-size: 1.3rem;
-  line-height: 2.1rem;
-
-  // slightly smaller in sans...
-  &.font-sans {
-    font-size: 1.1rem;
-    line-height: 1.75rem;
-  }
-
-  @media (max-width: 540px) {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-
-    // slightly smaller in sans...
-    &.font-sans {
-      font-size: 1rem;
-      line-height: 1.6rem;
-    }
-  }
-
-  &.important {
-    font-size: 1.3rem !important;
-    line-height: 2.1rem !important;
-
-    &.font-sans {
-      font-size: 1.1rem !important;
-      line-height: 1.8rem !important;
-    }
-
-    @media (max-width: 540px) {
-      font-size: 1.1rem !important;
-      line-height: 1.8rem !important;
-
-      &.font-sans {
-        font-size: 1rem !important;
-        line-height: 1.6rem !important;
-      }
-    }
-  }
-}
-
-.small-size {
-  font-size: 0.9rem;
-  line-height: 1.2rem;
-
-  @media (max-width: 540px) {
-    font-size: 0.8rem;
-    line-height: 1.1rem;
-  }
-
-  &.important {
-    font-size: 0.9rem !important;
-    line-height: 1.2rem !important;
-
-    @media (max-width: 540px) {
-      font-size: 0.8rem !important;
-      line-height: 1.1rem !important;
-    }
-  }
-}
-
-.blockquote-size {
-  font-size: 1.6rem;
-  line-height: 2.1rem;
-
-  @media (max-width: 540px) {
-    font-size: 1.3rem;
-    line-height: 1.9rem;
-  }
-
-  &.important {
-    font-size: 1.6rem !important;
-    line-height: 2rem !important;
-
-    @media (max-width: 540px) {
-      font-size: 1.3rem !important;
-      line-height: 1.8rem !important;
-    }
-  }
-}
diff --git a/src/scss/typography_old/_letter-spacing.scss b/src/scss/typography_old/_letter-spacing.scss
deleted file mode 100644
index 2bec4a67..00000000
--- a/src/scss/typography_old/_letter-spacing.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.spaced-least {
-  letter-spacing: 0.1rem !important;
-}
-.spaced-less {
-  letter-spacing: 0.25rem !important;
-}
-.spaced {
-  letter-spacing: 0.5rem !important;
-}
-.spaced-more {
-  letter-spacing: 0.75rem !important;
-}
-.spaced-most {
-  letter-spacing: 1rem !important;
-}
diff --git a/src/scss/typography_old/_main.scss b/src/scss/typography_old/_main.scss
deleted file mode 100644
index 23460388..00000000
--- a/src/scss/typography_old/_main.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'box-shadow';
-@import 'font-size';
-@import 'letter-spacing';
-@import 'text-shadow';
-@import 'transform';
diff --git a/src/scss/typography_old/_mixins.scss b/src/scss/typography_old/_mixins.scss
deleted file mode 100644
index 460a3cb4..00000000
--- a/src/scss/typography_old/_mixins.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import 'variables';
-
-// Font sizes
-@mixin font-size-xs {
-  font-size: $font-size-xs;
-}
-
-@mixin font-size-sm {
-  font-size: $font-size-sm;
-}
-
-@mixin font-size-base {
-  font-size: $font-size-base;
-}
-
-@mixin font-size-article {
-  font-size: $font-size-article;
-}
-
-@mixin font-size-lg {
-  font-size: $font-size-lg;
-}
-
-@mixin font-size-xl {
-  font-size: $font-size-xl;
-}
-
-@mixin font-size-2xl {
-  font-size: $font-size-2xl;
-}
-
-@mixin font-size-3xl {
-  font-size: $font-size-3xl;
-}
-
-// Font weights
-@mixin font-weight-light {
-  font-weight: $font-weight-light;
-}
-
-@mixin font-weight-normal {
-  font-weight: $font-weight-normal;
-}
-
-@mixin font-weight-bold {
-  font-weight: $font-weight-bold;
-}
diff --git a/src/scss/typography_old/_rules.scss b/src/scss/typography_old/_rules.scss
deleted file mode 100644
index 0e9e176e..00000000
--- a/src/scss/typography_old/_rules.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-@use 'sass:math';
-@import 'variables';
-@import 'mixins';
-@import '../mixins';
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @include font-display;
-
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: $headings-color;
-}
-
-h1 {
-  font-size: $h1-font-size;
-  margin-bottom: math.div($h1-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h1-font-size;
-  }
-}
-
-h2 {
-  font-size: $h2-font-size;
-  margin-bottom: math.div($h2-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h2-font-size;
-  }
-}
-
-h3 {
-  font-size: $h3-font-size;
-  margin-bottom: math.div($h3-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h3-font-size;
-  }
-}
-
-h4 {
-  font-size: $h4-font-size;
-  margin-bottom: math.div($h4-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h4-font-size;
-  }
-}
-
-h5 {
-  font-size: $h5-font-size;
-  margin-bottom: math.div($h5-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h5-font-size;
-  }
-}
-
-h6 {
-  font-size: $h6-font-size;
-  margin-bottom: math.div($h6-font-size, 2);
-
-  &:not(:first-child) {
-    margin-top: $h6-font-size;
-  }
-}
-
-p {
-  @include font-serif;
-
-  font-size: $font-size-article;
-  margin-bottom: $font-size-article;
-}
-
-small {
-  font-size: $font-size-sm;
-}
diff --git a/src/scss/typography_old/_text-shadow.scss b/src/scss/typography_old/_text-shadow.scss
deleted file mode 100644
index e2211514..00000000
--- a/src/scss/typography_old/_text-shadow.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import '../colours/thematic/tr';
-
-.text-shadow {
-  text-shadow: 2px 2px 4px var(--tr-light-grey) !important;
-}
-
-.text-shadow-darker {
-  text-shadow: 2px 2px 4px var(--tr-medium-grey) !important;
-}
-
-.text-shadow-darkest {
-  text-shadow: 2px 2px 4px var(--tr-dark-grey) !important;
-}
diff --git a/src/scss/typography_old/_transform.scss b/src/scss/typography_old/_transform.scss
deleted file mode 100644
index 53e90ee9..00000000
--- a/src/scss/typography_old/_transform.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.uppercase {
-  text-transform: uppercase;
-}
-
-.lowercase {
-  text-transform: lowercase !important;
-}
diff --git a/src/scss/typography_old/_variables.scss b/src/scss/typography_old/_variables.scss
deleted file mode 100644
index 697877e0..00000000
--- a/src/scss/typography_old/_variables.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '../fonts/variables';
-@import '../colours/thematic/tr';
-
-// Font sizes
-$font-size-xs: 0.8rem !default;
-$font-size-sm: 0.875rem !default;
-$font-size-base: 1rem !default;
-$font-size-article: 1.2rem !default;
-$font-size-lg: 1.3rem !default;
-$font-size-xl: 1.5rem !default;
-$font-size-2xl: 2.4rem !default;
-$font-size-3xl: 2.8rem !default;
-
-$lead-font-size: ($font-size-base * 1.25) !default;
-$small-font-size: 80% !default;
-$blockquote-font-size: ($font-size-base * 1.5) !default;
-
-$line-height-base: 1.5 !default;
-
-$text-muted: var(--colour-tr-medium-grey);
-
-$blockquote-small-color: var(--colour-tr-medium-grey);
-
-$blockquote-border-color: var(--colour-tr-dark-grey) !default;
-$blockquote-border-width: 0.25rem !default;
-
-$hr-border-color: rgba(var(--colour-tr-black), 0.1) !default;
-
-// Headings
-$headings-font-family: $font-family-display;
-$headings-font-weight: 700 !default;
-$headings-color: var(--colour-tr-dark-grey);
-
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;