From 4547d46ef10abb956ab5db6b3f45503a563f2dec Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Mon, 24 Jul 2023 21:10:12 +0100
Subject: [PATCH] css token proposal

---
 src/components/Headline/Headline.svelte       |   6 +-
 src/components/Theme/@types/component.ts      |  48 +++----
 .../Theme/stories/docs/component.md           |   2 +
 src/components/Theme/themes/common.js         |  44 +++----
 .../ThemeSwitch/styles.module.scss            |   3 +-
 src/docs/styles/typography/main.stories.mdx   |   2 +-
 .../theme-builder/theme-builder.stories.mdx   |   2 +-
 src/scss/accessibility/_main.scss             |   1 +
 src/scss/accessibility/_visibility.scss       |  11 ++
 src/scss/borders/_main.scss                   |   6 +-
 src/scss/colours/_main.scss                   |   5 +-
 src/scss/layout/_main.scss                    |   8 +-
 src/scss/layout/flex/_main.scss               |  11 ++
 src/scss/layout/flex/_rules.scss              |  11 --
 src/scss/main.scss                            |  24 ++--
 src/scss/spacers/_main.scss                   |   4 +-
 src/scss/text/_font-faces.scss                | 117 ++++++++++++++++++
 src/scss/text/_font-family.scss               |  14 ++-
 src/scss/text/_font-size.scss                 |  68 ++++++++++
 src/scss/text/_font-style.scss                |  10 +-
 src/scss/text/_font-weight.scss               |  38 +++---
 src/scss/text/_letter-spacing.scss            |  26 ++--
 src/scss/text/_line-height.scss               |  38 ++++++
 src/scss/text/_main.scss                      |  23 ++--
 src/scss/text/_text-align.scss                |  26 ++--
 src/scss/text/_text-decoration.scss           |  18 +--
 src/scss/text/_text-transform.scss            |  10 +-
 src/scss/text/_vertical-align.scss            |  34 ++---
 src/scss/text/_white-space.scss               |  10 +-
 src/scss/text/_word-break.scss                |  12 +-
 src/scss/text/tokens/_font-family.scss        |  18 +++
 src/scss/text/tokens/_font-size.scss          |  66 ++++++++++
 src/scss/text/tokens/_font-style.scss         |  12 ++
 src/scss/text/tokens/_font-weight.scss        |  54 ++++++++
 src/scss/text/tokens/_letter-spacing.scss     |  36 ++++++
 src/scss/text/tokens/_line-height.scss        |  36 ++++++
 src/scss/text/tokens/_main.scss               |  12 ++
 src/scss/text/tokens/_text-align.scss         |  36 ++++++
 src/scss/text/tokens/_text-decoration.scss    |  24 ++++
 src/scss/text/tokens/_text-transform.scss     |  12 ++
 src/scss/text/tokens/_vertical-align.scss     |  48 +++++++
 src/scss/text/tokens/_white-space.scss        |  12 ++
 src/scss/text/tokens/_word-break.scss         |  14 +++
 src/scss/tokens.scss                          |   1 +
 44 files changed, 807 insertions(+), 206 deletions(-)
 create mode 100644 src/scss/accessibility/_main.scss
 create mode 100644 src/scss/accessibility/_visibility.scss
 create mode 100644 src/scss/layout/flex/_main.scss
 delete mode 100644 src/scss/layout/flex/_rules.scss
 create mode 100644 src/scss/text/_font-faces.scss
 create mode 100644 src/scss/text/_font-size.scss
 create mode 100644 src/scss/text/_line-height.scss
 create mode 100644 src/scss/text/tokens/_font-family.scss
 create mode 100644 src/scss/text/tokens/_font-size.scss
 create mode 100644 src/scss/text/tokens/_font-style.scss
 create mode 100644 src/scss/text/tokens/_font-weight.scss
 create mode 100644 src/scss/text/tokens/_letter-spacing.scss
 create mode 100644 src/scss/text/tokens/_line-height.scss
 create mode 100644 src/scss/text/tokens/_main.scss
 create mode 100644 src/scss/text/tokens/_text-align.scss
 create mode 100644 src/scss/text/tokens/_text-decoration.scss
 create mode 100644 src/scss/text/tokens/_text-transform.scss
 create mode 100644 src/scss/text/tokens/_vertical-align.scss
 create mode 100644 src/scss/text/tokens/_white-space.scss
 create mode 100644 src/scss/text/tokens/_word-break.scss
 create mode 100644 src/scss/tokens.scss

diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 79119685..3fdcadae 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -69,6 +69,7 @@
 </Block>
 
 <style lang="scss">
+  @use '../../scss/tokens';
   @import '../../scss/fonts/variables';
 
   header.headline {
@@ -81,8 +82,9 @@
       h1 {
         font-size: 4rem;
         margin: 5px 0;
-        line-height: 1.1;
-        font-family: var(--theme-font-family-hed, $font-family-display);
+        line-height: 1.2;
+        // font-family: var(--theme-font-family-hed, $font-family-display);
+        @extend %font-sans;
         color: var(--theme-colour-text-primary);
       }
 
diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts
index 6bf72f0a..adeff911 100644
--- a/src/components/Theme/@types/component.ts
+++ b/src/components/Theme/@types/component.ts
@@ -1,21 +1,3 @@
-interface Scale {
-  'size-base': number,
-  'size-base-mobile': number;
-  'size-1': string,
-  'size-2': string,
-  'size-3': string,
-  'size-4': string,
-  'size-5': string,
-  'size-6': string,
-}
-
-interface Typeface {
-  'display': string,
-  'serif': string,
-  'sans-serif': string,
-  'monospace': string,
-}
-
 interface Colour {
   background: string;
   'text-primary': string;
@@ -27,21 +9,23 @@ interface Colour {
 };
 
 interface FontFamily {
-  'hed': string;
-  'subhed': string;
-  'body': string;
-  'note': string;
+  'serif': string,
+  'sans-serif': string,
+  'monospace': string,
 }
 
 interface FontSize {
-  'hed': string;
-  'subhed-1': string;
-  'subhed-2': string;
-  'subhed-3': string;
-  'body': string;
-  'note-1': string;
-  'note-2': string;
-  'note-3': string;
+  'xxs': string;
+  'xs': string;
+  'sm': string;
+  'base': string;
+  'lg': string;
+  'xl': string;
+  '2xl': string;
+  '3xl': string;
+  '4xl': string;
+  '5xl': string;
+  '6xl': string;
 }
 
 interface Font {
@@ -55,15 +39,11 @@ interface CustomFont {
 }
 
 export interface Theme {
-  scale: Scale;
-  typeface: Typeface;
   colour: Colour;
   font: Font;
 };
 
 export interface CustomTheme {
-  scale?: Partial<Scale>;
-  typeface?: Partial<Typeface>;
   colour?: Partial<Colour>;
   font?: Partial<CustomFont>;
 }
diff --git a/src/components/Theme/stories/docs/component.md b/src/components/Theme/stories/docs/component.md
index 9082324c..8ab19009 100644
--- a/src/components/Theme/stories/docs/component.md
+++ b/src/components/Theme/stories/docs/component.md
@@ -1,5 +1,7 @@
 The `Theme` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All of the components in this library will use those CSS variables for styling by default.
 
+Use our [theme builder](../?path=/docs/theming-theme-builder--docs) to customise your page's theme.
+
 ```svelte
 <script>
   import { Theme } from '@reuters-graphics/graphics-components';
diff --git a/src/components/Theme/themes/common.js b/src/components/Theme/themes/common.js
index 3c2cf027..5696fb71 100644
--- a/src/components/Theme/themes/common.js
+++ b/src/components/Theme/themes/common.js
@@ -1,38 +1,24 @@
 /** @type {Omit<import('../@types/component').Theme, "colour">} */
 export default {
-  scale: {
-    'size-base': 1.375,
-    'size-base-mobile': 1.125,
-    'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)',
-    'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)',
-    'size-3': 'calc(var(--theme-scale-size-base) * 1rem)',
-    'size-4': 'calc(var(--theme-scale-size-base) * 0.9rem)',
-    'size-5': 'calc(var(--theme-scale-size-base) * 0.72rem)',
-    'size-6': 'calc(var(--theme-scale-size-base) * 0.66rem)',
-  },
-  typeface: {
-    display: 'Knowledge, sans-serif',
-    serif: 'freight-book, serif',
-    'sans-serif': 'Knowledge, sans-serif',
-    monospace:
-      'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-  },
   font: {
     family: {
-      hed: 'var(--theme-typeface-display)',
-      subhed: 'var(--theme-typeface-sans-serif)',
-      body: 'var(--theme-typeface-serif)',
-      note: 'var(--theme-typeface-sans-serif)',
+      serif: 'freight-book, serif',
+      'sans-serif': 'Knowledge, sans-serif',
+      monospace:
+        'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     },
     size: {
-      hed: 'var(--theme-scale-size-1)',
-      'subhed-1': 'var(--theme-scale-size-2)',
-      'subhed-2': 'var(--theme-scale-size-3)',
-      'subhed-3': 'var(--theme-scale-size-6)',
-      body: 'var(--theme-scale-size-3)',
-      'note-1': 'var(--theme-scale-size-4)',
-      'note-2': 'var(--theme-scale-size-5)',
-      'note-3': 'var(--theme-scale-size-6)',
+      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)',
     },
   },
 };
diff --git a/src/docs/docs-components/ThemeBuilder/ThemeSwitch/styles.module.scss b/src/docs/docs-components/ThemeBuilder/ThemeSwitch/styles.module.scss
index f82d6f99..e6731350 100644
--- a/src/docs/docs-components/ThemeBuilder/ThemeSwitch/styles.module.scss
+++ b/src/docs/docs-components/ThemeBuilder/ThemeSwitch/styles.module.scss
@@ -29,7 +29,8 @@
     }
     &.active {
       background-color: #fff;
-      color: blue;
+      color: rgb(0, 119, 170);
+      font-weight: bold;
     }
 
     &:first-child {
diff --git a/src/docs/styles/typography/main.stories.mdx b/src/docs/styles/typography/main.stories.mdx
index b31968bb..cb721d4f 100644
--- a/src/docs/styles/typography/main.stories.mdx
+++ b/src/docs/styles/typography/main.stories.mdx
@@ -4,7 +4,7 @@ import CopyTable from '../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../utils/parseCss';
 
 {/* @ts-ignore */}
-import fontFamily from '$lib/scss/text/\_font-family.scss?raw';
+import fontFamily from '$lib/scss/text/\_font-family.scss?inline';
 
 {/* @ts-ignore */}
 import fontStyle from '$lib/scss/text/\_font-style.scss?raw';
diff --git a/src/docs/theme-builder/theme-builder.stories.mdx b/src/docs/theme-builder/theme-builder.stories.mdx
index d25b3031..20f91ef5 100644
--- a/src/docs/theme-builder/theme-builder.stories.mdx
+++ b/src/docs/theme-builder/theme-builder.stories.mdx
@@ -7,6 +7,6 @@ import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
 
 # Theme builder
 
-Use this tool to customise your page's theme using the `Theme` component.
+Use this tool to create a custom theme for your page then update the `Theme` component in your project.
 
 <ThemeBuilder />
diff --git a/src/scss/accessibility/_main.scss b/src/scss/accessibility/_main.scss
new file mode 100644
index 00000000..dfc210a9
--- /dev/null
+++ b/src/scss/accessibility/_main.scss
@@ -0,0 +1 @@
+@use 'visibility';
diff --git a/src/scss/accessibility/_visibility.scss b/src/scss/accessibility/_visibility.scss
new file mode 100644
index 00000000..e7d7092b
--- /dev/null
+++ b/src/scss/accessibility/_visibility.scss
@@ -0,0 +1,11 @@
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  white-space: nowrap !important;
+  border: 0 !important;
+}
diff --git a/src/scss/borders/_main.scss b/src/scss/borders/_main.scss
index 5cd92750..7878edc4 100644
--- a/src/scss/borders/_main.scss
+++ b/src/scss/borders/_main.scss
@@ -1,3 +1,3 @@
-@import 'border-radius';
-@import 'border-style';
-@import 'border-width';
+@use 'border-radius';
+@use 'border-style';
+@use 'border-width';
diff --git a/src/scss/colours/_main.scss b/src/scss/colours/_main.scss
index e45c2cf9..5ec4bef3 100644
--- a/src/scss/colours/_main.scss
+++ b/src/scss/colours/_main.scss
@@ -1,2 +1,3 @@
-@import 'primary/grey';
-@import 'thematic/tr';
+// Palettes included by default
+@use 'primary/grey';
+@use 'thematic/tr';
diff --git a/src/scss/layout/_main.scss b/src/scss/layout/_main.scss
index 4ea881ec..3167f571 100644
--- a/src/scss/layout/_main.scss
+++ b/src/scss/layout/_main.scss
@@ -1,4 +1,4 @@
-@import 'flex/rules';
-@import 'box-sizing';
-@import 'display';
-@import 'floats';
+@use 'flex/main';
+@use 'box-sizing';
+@use 'display';
+@use 'floats';
diff --git a/src/scss/layout/flex/_main.scss b/src/scss/layout/flex/_main.scss
new file mode 100644
index 00000000..50f0fcab
--- /dev/null
+++ b/src/scss/layout/flex/_main.scss
@@ -0,0 +1,11 @@
+@use 'align-content';
+@use 'align-items';
+@use 'align-self';
+@use 'flex-direction';
+@use 'flex-grow';
+@use 'flex-shrink';
+@use 'flex-wrap';
+@use 'flex';
+@use 'justify-content';
+@use 'justify-items';
+@use 'justify-self';
diff --git a/src/scss/layout/flex/_rules.scss b/src/scss/layout/flex/_rules.scss
deleted file mode 100644
index 0c9bcd71..00000000
--- a/src/scss/layout/flex/_rules.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import 'align-content';
-@import 'align-items';
-@import 'align-self';
-@import 'flex-direction';
-@import 'flex-grow';
-@import 'flex-shrink';
-@import 'flex-wrap';
-@import 'flex';
-@import 'justify-content';
-@import 'justify-items';
-@import 'justify-self';
diff --git a/src/scss/main.scss b/src/scss/main.scss
index f6a5c365..6b8f23ef 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -3,24 +3,16 @@
  * Custom grid system
  * Colour and typography systems using CSS variable from Theme
  * Utility classes for quick styling
- * 🄯2023 Reuters Graphics Style Guide
+ * Copyright 2023 Reuters Graphics Style Guide
  */
 
 // Reset
-@import 'reset/main';
-
-@import 'fonts/font-faces';
-
-// Variables
-@import 'variables';
-
-// Mixins
-@import 'mixins';
+@use 'reset/main' as reset;
 
 // Style rules
-@import 'colours/main';
-@import 'borders/main';
-@import 'spacers/main';
-@import 'typography/rules';
-@import 'text/main';
-@import 'layout/main';
+@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/spacers/_main.scss b/src/scss/spacers/_main.scss
index fc93cc64..aee9fb8e 100644
--- a/src/scss/spacers/_main.scss
+++ b/src/scss/spacers/_main.scss
@@ -1,2 +1,2 @@
-@import 'margin';
-@import 'padding';
+@use 'margin';
+@use 'padding';
diff --git a/src/scss/text/_font-faces.scss b/src/scss/text/_font-faces.scss
new file mode 100644
index 00000000..4f65e4a5
--- /dev/null
+++ b/src/scss/text/_font-faces.scss
@@ -0,0 +1,117 @@
+/* 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/text/_font-family.scss b/src/scss/text/_font-family.scss
index 2935a668..fcc4e038 100644
--- a/src/scss/text/_font-family.scss
+++ b/src/scss/text/_font-family.scss
@@ -1,18 +1,20 @@
+@import 'tokens/font-family';
+
 .font-serif {
-  font-family: var(--theme-typeface-serif);
+  @extend %font-serif;
 }
 .font-sans {
-  font-family: var(--theme-typeface-sans-serif);
+  @extend %font-sans;
 }
 .font-mono {
-  font-family: var(--theme-typeface-monospace);
+  @extend %font-mono;
 }
 .\!font-serif {
-  font-family: var(--theme-typeface-serif) !important;
+  @extend %\!font-serif;
 }
 .\!font-sans {
-  font-family: var(--theme-typeface-sans-serif) !important;
+  @extend %\!font-sans;
 }
 .\!font-mono {
-  font-family: var(--theme-typeface-monospace) !important;
+  @extend %\!font-mono;
 }
diff --git a/src/scss/text/_font-size.scss b/src/scss/text/_font-size.scss
new file mode 100644
index 00000000..f3253355
--- /dev/null
+++ b/src/scss/text/_font-size.scss
@@ -0,0 +1,68 @@
+@use 'tokens/font-size';
+
+.text-xxs {
+  @extend %text-xxs;
+}
+.text-xs {
+  @extend %text-xs;
+}
+.text-sm {
+  @extend %text-sm;
+}
+.text-base {
+  @extend %text-base;
+}
+.text-lg {
+  @extend %text-lg;
+}
+.text-xl {
+  @extend %text-xl;
+}
+.text-2xl {
+  @extend %text-2xl;
+}
+.text-3xl {
+  @extend %text-3xl;
+}
+.text-4xl {
+  @extend %text-4xl;
+}
+.text-5xl {
+  @extend %text-5xl;
+}
+.text-6xl {
+  @extend %text-6xl;
+}
+.\!text-xxs {
+  @extend %\!text-xxs;
+}
+.\!text-xs {
+  @extend %\!text-xs;
+}
+.\!text-sm {
+  @extend %\!text-sm;
+}
+.\!text-base {
+  @extend %\!text-base;
+}
+.\!text-lg {
+  @extend %\!text-lg;
+}
+.\!text-xl {
+  @extend %\!text-xl;
+}
+.\!text-2xl {
+  @extend %\!text-2xl;
+}
+.\!text-3xl {
+  @extend %\!text-3xl;
+}
+.\!text-4xl {
+  @extend %\!text-4xl;
+}
+.\!text-5xl {
+  @extend %\!text-5xl;
+}
+.\!text-6xl {
+  @extend %\!text-6xl;
+}
diff --git a/src/scss/text/_font-style.scss b/src/scss/text/_font-style.scss
index 4023cf52..3c04bb57 100644
--- a/src/scss/text/_font-style.scss
+++ b/src/scss/text/_font-style.scss
@@ -1,12 +1,14 @@
+@use 'tokens/font-style';
+
 .italic {
-  font-style: italic;
+  @extend %italic;
 }
 .not-italic {
-  font-style: normal;
+  @extend %not-italic;
 }
 .\!italic {
-  font-style: italic !important;
+  @extend %\!italic;
 }
 .\!not-italic {
-  font-style: normal !important;
+  @extend %\!not-italic;
 }
diff --git a/src/scss/text/_font-weight.scss b/src/scss/text/_font-weight.scss
index 4b34892f..44b45fd1 100644
--- a/src/scss/text/_font-weight.scss
+++ b/src/scss/text/_font-weight.scss
@@ -1,54 +1,56 @@
+@use 'tokens/font-weight';
+
 .font-thin {
-  font-weight: 100;
+  @extend %font-thin;
 }
 .font-extralight {
-  font-weight: 200;
+  @extend %font-extralight;
 }
 .font-light {
-  font-weight: 300;
+  @extend %font-light;
 }
 .font-normal {
-  font-weight: 400;
+  @extend %font-normal;
 }
 .font-medium {
-  font-weight: 500;
+  @extend %font-medium;
 }
 .font-semibold {
-  font-weight: 600;
+  @extend %font-semibold;
 }
 .font-bold {
-  font-weight: 700;
+  @extend %font-bold;
 }
 .font-extrabold {
-  font-weight: 800;
+  @extend %font-extrabold;
 }
 .font-black {
-  font-weight: 900;
+  @extend %font-black;
 }
 .\!font-thin {
-  font-weight: 100 !important;
+  @extend %\!font-thin;
 }
 .\!font-extralight {
-  font-weight: 200 !important;
+  @extend %\!font-extralight;
 }
 .\!font-light {
-  font-weight: 300 !important;
+  @extend %\!font-light;
 }
 .\!font-normal {
-  font-weight: 400 !important;
+  @extend %\!font-normal;
 }
 .\!font-medium {
-  font-weight: 500 !important;
+  @extend %\!font-medium;
 }
 .\!font-semibold {
-  font-weight: 600 !important;
+  @extend %\!font-semibold;
 }
 .\!font-bold {
-  font-weight: 700 !important;
+  @extend %\!font-bold;
 }
 .\!font-extrabold {
-  font-weight: 800 !important;
+  @extend %\!font-extrabold;
 }
 .\!font-black {
-  font-weight: 900 !important;
+  @extend %\!font-black;
 }
diff --git a/src/scss/text/_letter-spacing.scss b/src/scss/text/_letter-spacing.scss
index 6cea9dd6..c21dd476 100644
--- a/src/scss/text/_letter-spacing.scss
+++ b/src/scss/text/_letter-spacing.scss
@@ -1,36 +1,38 @@
+@use 'tokens/letter-spacing';
+
 .tracking-tighter {
-  letter-spacing: -0.05em;
+  @extend %tracking-tighter;
 }
 .tracking-tight {
-  letter-spacing: -0.025em;
+  @extend %tracking-tight;
 }
 .tracking-normal {
-  letter-spacing: 0em;
+  @extend %tracking-normal;
 }
 .tracking-wide {
-  letter-spacing: 0.025em;
+  @extend %tracking-wide;
 }
 .tracking-wider {
-  letter-spacing: 0.05em;
+  @extend %tracking-wider;
 }
 .tracking-widest {
-  letter-spacing: 0.1em;
+  @extend %tracking-widest;
 }
 .\!tracking-tighter {
-  letter-spacing: -0.05em !important;
+  @extend %\!tracking-tighter;
 }
 .\!tracking-tight {
-  letter-spacing: -0.025em !important;
+  @extend %\!tracking-tight;
 }
 .\!tracking-normal {
-  letter-spacing: 0em !important;
+  @extend %\!tracking-normal;
 }
 .\!tracking-wide {
-  letter-spacing: 0.025em !important;
+  @extend %\!tracking-wide;
 }
 .\!tracking-wider {
-  letter-spacing: 0.05em !important;
+  @extend %\!tracking-wider;
 }
 .\!tracking-widest {
-  letter-spacing: 0.1em !important;
+  @extend %\!tracking-widest;
 }
diff --git a/src/scss/text/_line-height.scss b/src/scss/text/_line-height.scss
new file mode 100644
index 00000000..a34d157a
--- /dev/null
+++ b/src/scss/text/_line-height.scss
@@ -0,0 +1,38 @@
+@use 'tokens/line-height';
+
+.leading-none {
+  @extend %leading-none;
+}
+.leading-tighter {
+  @extend %leading-tighter;
+}
+.leading-tight {
+  @extend %leading-tight;
+}
+.leading-normal {
+  @extend %leading-normal;
+}
+.leading-loose {
+  @extend %leading-loose;
+}
+.leading-looser {
+  @extend %leading-looser;
+}
+.\!leading-none {
+  @extend %\!leading-none;
+}
+.\!leading-tighter {
+  @extend %\!leading-tighter;
+}
+.\!leading-tight {
+  @extend %\!leading-tight;
+}
+.\!leading-normal {
+  @extend %\!leading-normal;
+}
+.\!leading-loose {
+  @extend %\!leading-loose;
+}
+.\!leading-looser {
+  @extend %\!leading-looser;
+}
diff --git a/src/scss/text/_main.scss b/src/scss/text/_main.scss
index 4b8e2098..65e3f69e 100644
--- a/src/scss/text/_main.scss
+++ b/src/scss/text/_main.scss
@@ -1,10 +1,13 @@
-@import 'font-family';
-@import 'font-style';
-@import 'font-weight';
-@import 'letter-spacing';
-@import 'text-align';
-@import 'text-decoration';
-@import 'text-transform';
-@import 'vertical-align';
-@import 'white-space';
-@import 'word-break';
+@use 'font-faces';
+@use 'font-family';
+@use 'font-size';
+@use 'font-style';
+@use 'font-weight';
+@use 'letter-spacing';
+@use 'line-height';
+@use 'text-align';
+@use 'text-decoration';
+@use 'text-transform';
+@use 'vertical-align';
+@use 'white-space';
+@use 'word-break';
diff --git a/src/scss/text/_text-align.scss b/src/scss/text/_text-align.scss
index fd0d92a6..76033cdc 100644
--- a/src/scss/text/_text-align.scss
+++ b/src/scss/text/_text-align.scss
@@ -1,36 +1,38 @@
+@use 'tokens/text-align';
+
 .text-left {
-  text-align: left;
+  @extend %text-left;
 }
 .text-center {
-  text-align: center;
+  @extend %text-center;
 }
 .text-right {
-  text-align: right;
+  @extend %text-right;
 }
 .text-justify {
-  text-align: justify;
+  @extend %text-justify;
 }
 .text-start {
-  text-align: start;
+  @extend %text-start;
 }
 .text-end {
-  text-align: end !important;
+  @extend %text-end;
 }
 .\!text-left {
-  text-align: left !important;
+  @extend %\!text-left;
 }
 .\!text-center {
-  text-align: center !important;
+  @extend %\!text-center;
 }
 .\!text-right {
-  text-align: right !important;
+  @extend %\!text-right;
 }
 .\!text-justify {
-  text-align: justify !important;
+  @extend %\!text-justify;
 }
 .\!text-start {
-  text-align: start !important;
+  @extend %\!text-start;
 }
 .\!text-end {
-  text-align: end !important;
+  @extend %\!text-end;
 }
diff --git a/src/scss/text/_text-decoration.scss b/src/scss/text/_text-decoration.scss
index 8d5ea5f4..733f8d70 100644
--- a/src/scss/text/_text-decoration.scss
+++ b/src/scss/text/_text-decoration.scss
@@ -1,24 +1,26 @@
+@use 'tokens/text-decoration';
+
 .underline {
-  text-decoration-line: underline;
+  @extend %underline;
 }
 .overline {
-  text-decoration-line: overline;
+  @extend %overline;
 }
 .line-through {
-  text-decoration-line: line-through;
+  @extend %line-through;
 }
 .no-underline {
-  text-decoration-line: none;
+  @extend %no-underline;
 }
 .\!underline {
-  text-decoration-line: underline !important;
+  @extend %\!underline;
 }
 .\!overline {
-  text-decoration-line: overline !important;
+  @extend %\!overline;
 }
 .\!line-through {
-  text-decoration-line: line-through !important;
+  @extend %\!line-through;
 }
 .\!no-underline {
-  text-decoration-line: none !important;
+  @extend %\!no-underline;
 }
diff --git a/src/scss/text/_text-transform.scss b/src/scss/text/_text-transform.scss
index d16628eb..bdb6bb84 100644
--- a/src/scss/text/_text-transform.scss
+++ b/src/scss/text/_text-transform.scss
@@ -1,12 +1,14 @@
+@use 'tokens/text-transform';
+
 .uppercase {
-  text-transform: uppercase;
+  @extend %uppercase;
 }
 .lowercase {
-  text-transform: lowercase;
+  @extend %lowercase;
 }
 .\!uppercase {
-  text-transform: uppercase !important;
+  @extend %\!uppercase;
 }
 .\!lowercase {
-  text-transform: lowercase !important;
+  @extend %\!lowercase;
 }
diff --git a/src/scss/text/_vertical-align.scss b/src/scss/text/_vertical-align.scss
index d2b67ae7..8f45ef92 100644
--- a/src/scss/text/_vertical-align.scss
+++ b/src/scss/text/_vertical-align.scss
@@ -1,48 +1,50 @@
+@use 'tokens/vertical-align';
+
 .align-baseline {
-  vertical-align: baseline;
+  @extend %align-baseline;
 }
 .align-top {
-  vertical-align: top;
+  @extend %align-top;
 }
 .align-middle {
-  vertical-align: middle;
+  @extend %align-middle;
 }
 .align-bottom {
-  vertical-align: bottom;
+  @extend %align-bottom;
 }
 .align-text-top {
-  vertical-align: text-top;
+  @extend %align-text-top;
 }
 .align-text-bottom {
-  vertical-align: text-bottom;
+  @extend %align-text-bottom;
 }
 .align-sub {
-  vertical-align: sub;
+  @extend %align-sub;
 }
 .align-super {
-  vertical-align: super;
+  @extend %align-super;
 }
 .\!align-baseline {
-  vertical-align: baseline !important;
+  @extend %\!align-baseline;
 }
 .\!align-top {
-  vertical-align: top !important;
+  @extend %\!align-top;
 }
 .\!align-middle {
-  vertical-align: middle !important;
+  @extend %\!align-middle;
 }
 .\!align-bottom {
-  vertical-align: bottom !important;
+  @extend %\!align-bottom;
 }
 .\!align-text-top {
-  vertical-align: text-top !important;
+  @extend %\!align-text-top;
 }
 .\!align-text-bottom {
-  vertical-align: text-bottom !important;
+  @extend %\!align-text-bottom;
 }
 .\!align-sub {
-  vertical-align: sub !important;
+  @extend %\!align-sub;
 }
 .\!align-super {
-  vertical-align: super !important;
+  @extend %\!align-super;
 }
diff --git a/src/scss/text/_white-space.scss b/src/scss/text/_white-space.scss
index 1556cff3..1f54cf75 100644
--- a/src/scss/text/_white-space.scss
+++ b/src/scss/text/_white-space.scss
@@ -1,12 +1,14 @@
+@use 'tokens/white-space';
+
 .whitespace-normal {
-  white-space: normal;
+  @extend %whitespace-normal;
 }
 .whitespace-nowrap {
-  white-space: nowrap;
+  @extend %whitespace-nowrap;
 }
 .\!whitespace-normal {
-  white-space: normal !important;
+  @extend %\!whitespace-normal;
 }
 .\!whitespace-nowrap {
-  white-space: nowrap !important;
+  @extend %\!whitespace-nowrap;
 }
diff --git a/src/scss/text/_word-break.scss b/src/scss/text/_word-break.scss
index 7240a18a..470b1a3e 100644
--- a/src/scss/text/_word-break.scss
+++ b/src/scss/text/_word-break.scss
@@ -1,14 +1,14 @@
+@use 'tokens/word-break';
+
 .break-normal {
-  overflow-wrap: normal;
-  word-break: normal;
+  @extend %break-normal;
 }
 .break-words {
-  overflow-wrap: break-word;
+  @extend %break-words;
 }
 .\!break-normal {
-  overflow-wrap: normal !important;
-  word-break: normal !important;
+  @extend %\!break-normal;
 }
 .\!break-words {
-  overflow-wrap: break-word !important;
+  @extend %\!break-words;
 }
diff --git a/src/scss/text/tokens/_font-family.scss b/src/scss/text/tokens/_font-family.scss
new file mode 100644
index 00000000..79c1e70b
--- /dev/null
+++ b/src/scss/text/tokens/_font-family.scss
@@ -0,0 +1,18 @@
+%font-serif {
+  font-family: var(--theme-font-family-serif);
+}
+%font-sans {
+  font-family: var(--theme-font-family-sans-serif);
+}
+%font-mono {
+  font-family: var(--theme-font-family-monospace);
+}
+%\!font-serif {
+  font-family: var(--theme-font-family-serif) !important;
+}
+%\!font-sans {
+  font-family: var(--theme-font-family-sans-serif) !important;
+}
+%\!font-mono {
+  font-family: var(--theme-font-family-monospace) !important;
+}
diff --git a/src/scss/text/tokens/_font-size.scss b/src/scss/text/tokens/_font-size.scss
new file mode 100644
index 00000000..2bf83a98
--- /dev/null
+++ b/src/scss/text/tokens/_font-size.scss
@@ -0,0 +1,66 @@
+%text-xxs {
+  font-size: var(--theme-font-size-xxs);
+}
+%text-xs {
+  font-size: var(--theme-font-size-xs);
+}
+%text-sm {
+  font-size: var(--theme-font-size-sm);
+}
+%text-base {
+  font-size: var(--theme-font-size-base);
+}
+%text-lg {
+  font-size: var(--theme-font-size-lg);
+}
+%text-xl {
+  font-size: var(--theme-font-size-xl);
+}
+%text-2xl {
+  font-size: var(--theme-font-size-2xl);
+}
+%text-3xl {
+  font-size: var(--theme-font-size-3xl);
+}
+%text-4xl {
+  font-size: var(--theme-font-size-4xl);
+}
+%text-5xl {
+  font-size: var(--theme-font-size-5xl);
+}
+%text-6xl {
+  font-size: var(--theme-font-size-6xl);
+}
+%\!text-xxs {
+  font-size: var(--theme-font-size-xxs) !important;
+}
+%\!text-xs {
+  font-size: var(--theme-font-size-xs) !important;
+}
+%\!text-sm {
+  font-size: var(--theme-font-size-sm) !important;
+}
+%\!text-base {
+  font-size: var(--theme-font-size-base) !important;
+}
+%\!text-lg {
+  font-size: var(--theme-font-size-lg) !important;
+}
+%\!text-xl {
+  font-size: var(--theme-font-size-xl) !important;
+}
+%\!text-2xl {
+  font-size: var(--theme-font-size-2xl) !important;
+}
+%\!text-3xl {
+  font-size: var(--theme-font-size-3xl) !important;
+}
+%\!text-4xl {
+  font-size: var(--theme-font-size-4xl) !important;
+}
+%\!text-5xl {
+  font-size: var(--theme-font-size-5xl) !important;
+}
+%\!text-6xl {
+  font-size: var(--theme-font-size-6xl) !important;
+}
diff --git a/src/scss/text/tokens/_font-style.scss b/src/scss/text/tokens/_font-style.scss
new file mode 100644
index 00000000..8b297a8b
--- /dev/null
+++ b/src/scss/text/tokens/_font-style.scss
@@ -0,0 +1,12 @@
+%italic {
+  font-style: italic;
+}
+%not-italic {
+  font-style: normal;
+}
+%\!italic {
+  font-style: italic !important;
+}
+%\!not-italic {
+  font-style: normal !important;
+}
diff --git a/src/scss/text/tokens/_font-weight.scss b/src/scss/text/tokens/_font-weight.scss
new file mode 100644
index 00000000..03440fe1
--- /dev/null
+++ b/src/scss/text/tokens/_font-weight.scss
@@ -0,0 +1,54 @@
+%font-thin {
+  font-weight: 100;
+}
+%font-extralight {
+  font-weight: 200;
+}
+%font-light {
+  font-weight: 300;
+}
+%font-normal {
+  font-weight: 400;
+}
+%font-medium {
+  font-weight: 500;
+}
+%font-semibold {
+  font-weight: 600;
+}
+%font-bold {
+  font-weight: 700;
+}
+%font-extrabold {
+  font-weight: 800;
+}
+%font-black {
+  font-weight: 900;
+}
+%\!font-thin {
+  font-weight: 100 !important;
+}
+%\!font-extralight {
+  font-weight: 200 !important;
+}
+%\!font-light {
+  font-weight: 300 !important;
+}
+%\!font-normal {
+  font-weight: 400 !important;
+}
+%\!font-medium {
+  font-weight: 500 !important;
+}
+%\!font-semibold {
+  font-weight: 600 !important;
+}
+%\!font-bold {
+  font-weight: 700 !important;
+}
+%\!font-extrabold {
+  font-weight: 800 !important;
+}
+%\!font-black {
+  font-weight: 900 !important;
+}
diff --git a/src/scss/text/tokens/_letter-spacing.scss b/src/scss/text/tokens/_letter-spacing.scss
new file mode 100644
index 00000000..1867b471
--- /dev/null
+++ b/src/scss/text/tokens/_letter-spacing.scss
@@ -0,0 +1,36 @@
+%tracking-tighter {
+  letter-spacing: -0.05em;
+}
+%tracking-tight {
+  letter-spacing: -0.025em;
+}
+%tracking-normal {
+  letter-spacing: 0em;
+}
+%tracking-wide {
+  letter-spacing: 0.025em;
+}
+%tracking-wider {
+  letter-spacing: 0.05em;
+}
+%tracking-widest {
+  letter-spacing: 0.1em;
+}
+%\!tracking-tighter {
+  letter-spacing: -0.05em !important;
+}
+%\!tracking-tight {
+  letter-spacing: -0.025em !important;
+}
+%\!tracking-normal {
+  letter-spacing: 0em !important;
+}
+%\!tracking-wide {
+  letter-spacing: 0.025em !important;
+}
+%\!tracking-wider {
+  letter-spacing: 0.05em !important;
+}
+%\!tracking-widest {
+  letter-spacing: 0.1em !important;
+}
diff --git a/src/scss/text/tokens/_line-height.scss b/src/scss/text/tokens/_line-height.scss
new file mode 100644
index 00000000..637c4dd7
--- /dev/null
+++ b/src/scss/text/tokens/_line-height.scss
@@ -0,0 +1,36 @@
+%leading-none {
+  line-height: 1;
+}
+%leading-tighter {
+  line-height: 1.125;
+}
+%leading-tight {
+  line-height: 1.25;
+}
+%leading-normal {
+  line-height: 1.5;
+}
+%leading-loose {
+  line-height: 1.75;
+}
+%leading-looser {
+  line-height: 1.875;
+}
+%\!leading-none {
+  line-height: 1 !important;
+}
+%\!leading-tighter {
+  line-height: 1.125 !important;
+}
+%\!leading-tight {
+  line-height: 1.25 !important;
+}
+%\!leading-normal {
+  line-height: 1.5 !important;
+}
+%\!leading-loose {
+  line-height: 1.75 !important;
+}
+%\!leading-looser {
+  line-height: 1.875 !important;
+}
diff --git a/src/scss/text/tokens/_main.scss b/src/scss/text/tokens/_main.scss
new file mode 100644
index 00000000..da925cb1
--- /dev/null
+++ b/src/scss/text/tokens/_main.scss
@@ -0,0 +1,12 @@
+@use 'font-family';
+@use 'font-size';
+@use 'font-style';
+@use 'font-weight';
+@use 'letter-spacing';
+@use 'line-height';
+@use 'text-align';
+@use 'text-decoration';
+@use 'text-transform';
+@use 'vertical-align';
+@use 'white-space';
+@use 'word-break';
diff --git a/src/scss/text/tokens/_text-align.scss b/src/scss/text/tokens/_text-align.scss
new file mode 100644
index 00000000..3f2666ee
--- /dev/null
+++ b/src/scss/text/tokens/_text-align.scss
@@ -0,0 +1,36 @@
+%text-left {
+  text-align: left;
+}
+%text-center {
+  text-align: center;
+}
+%text-right {
+  text-align: right;
+}
+%text-justify {
+  text-align: justify;
+}
+%text-start {
+  text-align: start;
+}
+%text-end {
+  text-align: end !important;
+}
+%\!text-left {
+  text-align: left !important;
+}
+%\!text-center {
+  text-align: center !important;
+}
+%\!text-right {
+  text-align: right !important;
+}
+%\!text-justify {
+  text-align: justify !important;
+}
+%\!text-start {
+  text-align: start !important;
+}
+%\!text-end {
+  text-align: end !important;
+}
diff --git a/src/scss/text/tokens/_text-decoration.scss b/src/scss/text/tokens/_text-decoration.scss
new file mode 100644
index 00000000..f1b6cdfd
--- /dev/null
+++ b/src/scss/text/tokens/_text-decoration.scss
@@ -0,0 +1,24 @@
+%underline {
+  text-decoration-line: underline;
+}
+%overline {
+  text-decoration-line: overline;
+}
+%line-through {
+  text-decoration-line: line-through;
+}
+%no-underline {
+  text-decoration-line: none;
+}
+%\!underline {
+  text-decoration-line: underline !important;
+}
+%\!overline {
+  text-decoration-line: overline !important;
+}
+%\!line-through {
+  text-decoration-line: line-through !important;
+}
+%\!no-underline {
+  text-decoration-line: none !important;
+}
diff --git a/src/scss/text/tokens/_text-transform.scss b/src/scss/text/tokens/_text-transform.scss
new file mode 100644
index 00000000..60e10251
--- /dev/null
+++ b/src/scss/text/tokens/_text-transform.scss
@@ -0,0 +1,12 @@
+%uppercase {
+  text-transform: uppercase;
+}
+%lowercase {
+  text-transform: lowercase;
+}
+%\!uppercase {
+  text-transform: uppercase !important;
+}
+%\!lowercase {
+  text-transform: lowercase !important;
+}
diff --git a/src/scss/text/tokens/_vertical-align.scss b/src/scss/text/tokens/_vertical-align.scss
new file mode 100644
index 00000000..17121aa6
--- /dev/null
+++ b/src/scss/text/tokens/_vertical-align.scss
@@ -0,0 +1,48 @@
+%align-baseline {
+  vertical-align: baseline;
+}
+%align-top {
+  vertical-align: top;
+}
+%align-middle {
+  vertical-align: middle;
+}
+%align-bottom {
+  vertical-align: bottom;
+}
+%align-text-top {
+  vertical-align: text-top;
+}
+%align-text-bottom {
+  vertical-align: text-bottom;
+}
+%align-sub {
+  vertical-align: sub;
+}
+%align-super {
+  vertical-align: super;
+}
+%\!align-baseline {
+  vertical-align: baseline !important;
+}
+%\!align-top {
+  vertical-align: top !important;
+}
+%\!align-middle {
+  vertical-align: middle !important;
+}
+%\!align-bottom {
+  vertical-align: bottom !important;
+}
+%\!align-text-top {
+  vertical-align: text-top !important;
+}
+%\!align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+%\!align-sub {
+  vertical-align: sub !important;
+}
+%\!align-super {
+  vertical-align: super !important;
+}
diff --git a/src/scss/text/tokens/_white-space.scss b/src/scss/text/tokens/_white-space.scss
new file mode 100644
index 00000000..9409404a
--- /dev/null
+++ b/src/scss/text/tokens/_white-space.scss
@@ -0,0 +1,12 @@
+%whitespace-normal {
+  white-space: normal;
+}
+%whitespace-nowrap {
+  white-space: nowrap;
+}
+%\!whitespace-normal {
+  white-space: normal !important;
+}
+%\!whitespace-nowrap {
+  white-space: nowrap !important;
+}
diff --git a/src/scss/text/tokens/_word-break.scss b/src/scss/text/tokens/_word-break.scss
new file mode 100644
index 00000000..8b8ab330
--- /dev/null
+++ b/src/scss/text/tokens/_word-break.scss
@@ -0,0 +1,14 @@
+%break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+%break-words {
+  overflow-wrap: break-word;
+}
+%\!break-normal {
+  overflow-wrap: normal !important;
+  word-break: normal !important;
+}
+%\!break-words {
+  overflow-wrap: break-word !important;
+}
diff --git a/src/scss/tokens.scss b/src/scss/tokens.scss
new file mode 100644
index 00000000..d58df5cb
--- /dev/null
+++ b/src/scss/tokens.scss
@@ -0,0 +1 @@
+@use 'text/tokens/main' as text;