css token proposal

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);
       }
 

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>;
 }

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';

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)',
     },
   },
 };

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 {

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';

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 />

src/scss/accessibility/_main.scss

@@ -0,0 +1 @@
+@use 'visibility';

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;
+}

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';

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';

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';

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';

src/scss/layout/flex/_rules.scss

@@ -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';

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;

src/scss/spacers/_main.scss

@@ -1,2 +1,2 @@
-@import 'margin';
-@import 'padding';
+@use 'margin';
+@use 'padding';

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');
+}

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;
 }

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;
+}

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;
 }

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;
 }

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;
 }

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;
+}

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';

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;
 }

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;
 }

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;
 }

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;
 }

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;
 }

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;
 }

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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';

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

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;
+}

src/scss/tokens.scss

@@ -0,0 +1 @@
+@use 'text/tokens/main' as text;