update fonts

src/components/Theme/themes/common.js

@@ -2,7 +2,7 @@
 export default {
   font: {
     family: {
-      serif: 'freight-book, serif',
+      serif: 'FreightText, serif',
       'sans-serif': 'Knowledge, sans-serif',
       monospace:
         'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',

src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx

@@ -7,15 +7,20 @@ import darkTheme from '../../../../components/Theme/themes/dark';
 import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import lightTheme from '../../../../components/Theme/themes/light';
 import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 import svelteSyntax from '../../../../../.storybook/svelte-highlighting';
 import { updatedDiff } from 'deep-object-diff';
 
 SyntaxHighlighter.registerLanguage('svelte', svelteSyntax);
+SyntaxHighlighter.registerLanguage('scss', scss);
 
 const NewTheme = ({ theme, themeName }) => {
   console.log('rerenders NewTheme');
   const originalTheme = themeName === 'light' ? lightTheme : darkTheme;
   const updates = updatedDiff(originalTheme, theme);
+
+  const bgChanged = theme.colour.background !== lightTheme.colour.background;
+
   return (
     <div className={classes.newtheme}>
       <p>Use the code below to adapt the <code>Theme</code> component for your new design:</p>
@@ -24,10 +29,18 @@ const NewTheme = ({ theme, themeName }) => {
   base="${themeName}"
   theme={${JSON.stringify(updates, null, 2).replaceAll('"', '\'')}}
 >
-  {/*...*/}
+  <!-- ... -->
 </Theme>
       `}
     </SyntaxHighlighter>
+    {bgChanged && (
+      <SyntaxHighlighter language="scss" style={prism} customStyle={{ maxHeight: '140px' }}>
+        {`// global.scss
+body {
+  background-color: ${theme.colour.background};
+}`}
+      </SyntaxHighlighter>
+    )}
     </div>
   );
 }

src/docs/styles/tokens/interactivity/_main.stories.mdx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
+import { cssStringToTableArray } from '../../../utils/parseCss';
+
+{/* @ts-ignore */}
+import cursor from '$lib/scss/tokens/interactivity/\_cursor.scss?raw';
+
+{/* @ts-ignore */}
+import pointerEvents from '$lib/scss/tokens/interactivity/\_pointer-events.scss?raw';
+
+<Meta title="Styles/Tokens/Interactivity" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Interactivity tokens
+
+<CopyTable
+  title="Cursor"
+  mdnLink="cursor"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(cursor)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Pointer events"
+  mdnLink="pointer-events"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(pointerEvents)}
+  copyable={[true, false]}
+/>

src/docs/styles/tokens/layout/main.stories.mdx

@@ -4,7 +4,7 @@ import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
 import { cssStringToTableArray } from '../../../utils/parseCss';
 
 {/* @ts-ignore */}
-import boxSizine from '$lib/scss/tokens/layout/\_box-sizing.scss?raw';
+import boxSizing from '$lib/scss/tokens/layout/\_box-sizing.scss?raw';
 
 {/* @ts-ignore */}
 import display from '$lib/scss/tokens/layout/\_display.scss?raw';
@@ -12,6 +12,9 @@ import display from '$lib/scss/tokens/layout/\_display.scss?raw';
 {/* @ts-ignore */}
 import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
 
+{/* @ts-ignore */}
+import position from '$lib/scss/tokens/layout/\_position.scss?raw';
+
 <Meta title="Styles/Tokens/Layout/Main" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
@@ -26,6 +29,14 @@ import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
   copyable={[true, false]}
 />
 
+<CopyTable
+  title="Position"
+  mdnLink="position"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(position)}
+  copyable={[true, false]}
+/>
+
 <CopyTable
   title="Float"
   mdnLink="float"
@@ -38,6 +49,6 @@ import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
   title="Box sizing"
   mdnLink="box-sizing"
   header={['Class', 'Properties']}
-  body={cssStringToTableArray(boxSizine)}
+  body={cssStringToTableArray(boxSizing)}
   copyable={[true, false]}
 />

src/docs/styles/tokens/typography/main.stories.mdx

@@ -30,6 +30,9 @@ import textAlign from '$lib/scss/tokens/text/\_text-align.scss?inline';
 {/* @ts-ignore */}
 import textDecoration from '$lib/scss/tokens/text/\_text-decoration.scss?inline';
 
+{/* @ts-ignore */}
+import textStroke from '$lib/scss/tokens/text/\_text-stroke.scss?inline';
+
 {/* @ts-ignore */}
 import textTransform from '$lib/scss/tokens/text/\_text-transform.scss?inline';
 
@@ -122,6 +125,14 @@ import './styles.scss';
   copyable={[true, false]}
 />
 
+<CopyTable
+  title="Text stroke"
+  mdnLink="text-stroke"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(textStroke)}
+  copyable={[true, false]}
+/>
+
 <CopyTable
   title="Text transform"
   mdnLink="text-transform"

src/docs/theme-builder/theme-builder.stories.mdx

@@ -5,6 +5,8 @@ import ThemeBuilder from './../docs-components/ThemeBuilder/ThemeBuilder.jsx';
 
 <Meta title="Theming/Theme builder" parameters={{ ...parameters }} />
 
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
 # Theme builder
 
 Use this tool to create a custom theme for your page then update the `Theme` component in your project.

src/scss/fonts/_font-faces.scss

@@ -1,117 +1,245 @@
 /* REUTERS KNOWLEDGE */
 @font-face {
   font-family: 'Knowledge';
-  font-style: normal;
+  src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-RegularItalic.woff2')
-  font-weight: 100;
+      format('woff2'),
-  src: local('Knowledge Ultra Light'), local('KnowledgeUltraLight'),
+    url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-RegularItalic.woff')
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeUltraLight.woff')
       format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Knowledge';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Black.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Black.woff')
+      format('woff');
+  font-weight: 900;
   font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Light.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Light.woff')
+      format('woff');
   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;
+  font-display: swap;
-  src: local('Knowledge Regular'), local('KnowledgeRegular'),
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegular.woff')
-      format('woff');
 }
 
 @font-face {
   font-family: 'Knowledge';
-  font-style: italic;
+  src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Regular.woff2')
-  font-weight: 400;
+      format('woff2'),
-  src: local('Knowledge Regular Italic'), local('KnowledgeRegularItalic'),
+    url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Regular.woff')
-    url('//graphics.thomsonreuters.com/fonts/KnowledgeRegularItalic.woff')
       format('woff');
-}
+  font-weight: normal;
-
-@font-face {
-  font-family: 'Knowledge';
   font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-UltraLight.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-UltraLight.woff')
+      format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Bold.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Bold.woff')
+      format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Knowledge';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Medium.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/Knowledge2017-Medium.woff')
+      format('woff');
   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;
+  font-display: swap;
-  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;
+  src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Light.woff2')
-  font-weight: 400;
+      format('woff2'),
-  src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
+    url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Light.woff')
-    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'),
+  font-style: normal;
-    url('//graphics.thomsonreuters.com/fonts/SourceSansPro-Light.woff')
+  font-display: swap;
-      format('woff');
 }
 
-/* FREIGHT BOOK */
 @font-face {
-  font-family: 'freight-book';
+  font-family: 'Source Sans Pro';
-  font-style: normal;
+  src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Italic.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Italic.woff')
+      format('woff');
   font-weight: normal;
-  src: url('//graphics.thomsonreuters.com/fonts/freight-book.woff')
+  font-style: italic;
-    format('woff');
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Bold.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Bold.woff')
+      format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-SemiBold.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-SemiBold.woff')
+      format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Regular.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/SourceSansPro-Regular.woff')
+      format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* FREIGHT TEXT */
+@font-face {
+  font-family: 'FreightText';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBold.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBold.woff')
+      format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'FreightText';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBook.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBook.woff')
+      format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'FreightText';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBookItalic.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/FreightTextBookItalic.woff')
+      format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'FreightText';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextLight.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/FreightTextLight.woff')
+      format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'FreightText';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/FreightTextMedium.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/FreightTextMedium.woff')
+      format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* NOTO SANS JAPANESE */
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Bold.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Bold.woff')
+      format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Light.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Light.woff')
+      format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-ExtraLight.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-ExtraLight.woff')
+      format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Medium.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Medium.woff')
+      format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Noto Sans JP';
+  src: url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Regular.woff2')
+      format('woff2'),
+    url('//graphics.thomsonreuters.com/fonts/v1/NotoSansJP-Regular.woff')
+      format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }

src/scss/token-classes.scss

@@ -1,6 +1,7 @@
 @use 'tokens/accessibility/main' as *;
 @use 'tokens/backgrounds/main' as *;
 @use 'tokens/borders/main' as *;
+@use 'tokens/interactivity/main' as *;
 @use 'tokens/layout/main' as *;
 @use 'tokens/spacers/main' as *;
 @use 'tokens/text/main' as *;

src/scss/tokens/interactivity/_cursor.scss

@@ -0,0 +1,72 @@
+.cursor-auto {
+  cursor: auto;
+}
+.cursor-default {
+  cursor: default;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.cursor-crosshair {
+  cursor: crosshair;
+}
+.cursor-text {
+  cursor: text;
+}
+.cursor-move {
+  cursor: move;
+}
+.cursor-grab {
+  cursor: grab;
+}
+.cursor-grabbing {
+  cursor: grabbing;
+}
+.cursor-col-resize {
+  cursor: col-resize;
+}
+.cursor-row-resize {
+  cursor: row-resize;
+}
+.cursor-zoom-in {
+  cursor: zoom-in;
+}
+.cursor-zoom-out {
+  cursor: zoom-out;
+}
+.\!cursor-auto {
+  cursor: auto !important;
+}
+.\!cursor-default {
+  cursor: default !important;
+}
+.\!cursor-pointer {
+  cursor: pointer !important;
+}
+.\!cursor-crosshair {
+  cursor: crosshair !important;
+}
+.\!cursor-text {
+  cursor: text !important;
+}
+.\!cursor-move {
+  cursor: move !important;
+}
+.\!cursor-grab {
+  cursor: grab !important;
+}
+.\!cursor-grabbing {
+  cursor: grabbing !important;
+}
+.\!cursor-col-resize {
+  cursor: col-resize !important;
+}
+.\!cursor-row-resize {
+  cursor: row-resize !important;
+}
+.\!cursor-zoom-in {
+  cursor: zoom-in !important;
+}
+.\!cursor-zoom-out {
+  cursor: zoom-out !important;
+}

src/scss/tokens/interactivity/_main.scss

@@ -0,0 +1,2 @@
+@forward 'cursor';
+@forward 'pointer-events';

src/scss/tokens/interactivity/_pointer-events.scss

@@ -0,0 +1,12 @@
+.pointer-events-none {
+  pointer-events: none;
+}
+.pointer-events-auto {
+  pointer-events: auto;
+}
+.\!pointer-events-none {
+  pointer-events: none !important;
+}
+.\!pointer-events-auto {
+  pointer-events: auto !important;
+}

src/scss/tokens/layout/_main.scss

@@ -2,3 +2,4 @@
 @forward 'box-sizing';
 @forward 'display';
 @forward 'floats';
+@forward 'position';

src/scss/tokens/layout/_position.scss

@@ -0,0 +1,30 @@
+.static {
+  position: static;
+}
+.fixed {
+  position: fixed;
+}
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.sticky {
+  position: sticky;
+}
+.\!static {
+  position: static;
+}
+.\!fixed {
+  position: fixed;
+}
+.\!absolute {
+  position: absolute;
+}
+.\!relative {
+  position: relative;
+}
+.\!sticky {
+  position: sticky;
+}

src/scss/tokens/text/_font-family.scss

@@ -21,6 +21,18 @@
 .font-note {
   @include font-note;
 }
+.font-source-sans-pro {
+  @include font-source-sans-pro;
+}
+.font-knowledge {
+  @include font-knowledge;
+}
+.font-freight-book {
+  @include font-freight-book;
+}
+.font-noto-sans-jp {
+  @include font-noto-sans-jp;
+}
 .\!font-serif {
   @include \!font-serif;
 }
@@ -42,3 +54,15 @@
 .\!font-note {
   @include \!font-note;
 }
+.\!font-source-sans-pro {
+  @include \!font-source-sans-pro;
+}
+.\!font-knowledge {
+  @include \!font-knowledge;
+}
+.\!font-freight-book {
+  @include \!font-freight-book;
+}
+.\!font-noto-sans-jp {
+  @include \!font-noto-sans-jp;
+}

src/scss/tokens/text/_main.scss

@@ -7,6 +7,7 @@
 @forward 'line-height';
 @forward 'text-align';
 @forward 'text-decoration';
+@forward 'text-stroke';
 @forward 'text-transform';
 @forward 'vertical-align';
 @forward 'white-space';

src/scss/tokens/text/_text-stroke.scss

@@ -0,0 +1,74 @@
+@use 'mixins/text-stroke' as *;
+
+.text-stroke-black {
+  @include text-stroke(1px, #000);
+}
+.text-stroke-black-2 {
+  @include text-stroke(2px, #000);
+}
+.text-stroke-black-3 {
+  @include text-stroke(3px, #000);
+}
+.text-stroke-black-4 {
+  @include text-stroke(4px, #000);
+}
+.text-stroke-black-6 {
+  @include text-stroke(6px, #000);
+}
+.text-stroke-black-8 {
+  @include text-stroke(8px, #000);
+}
+.\!text-stroke-black {
+  @include text-stroke(1px, #000);
+}
+.\!text-stroke-black-2 {
+  @include \!text-stroke(2px, #000);
+}
+.\!text-stroke-black-3 {
+  @include \!text-stroke(3px, #000);
+}
+.\!text-stroke-black-4 {
+  @include \!text-stroke(4px, #000);
+}
+.\!text-stroke-black-6 {
+  @include \!text-stroke(6px, #000);
+}
+.\!text-stroke-black-8 {
+  @include \!text-stroke(8px, #000);
+}
+.text-stroke-white {
+  @include text-stroke(1px, #fff);
+}
+.text-stroke-white-2 {
+  @include text-stroke(2px, #fff);
+}
+.text-stroke-white-3 {
+  @include text-stroke(3px, #fff);
+}
+.text-stroke-white-4 {
+  @include text-stroke(4px, #fff);
+}
+.text-stroke-white-6 {
+  @include text-stroke(6px, #fff);
+}
+.text-stroke-white-8 {
+  @include text-stroke(8px, #fff);
+}
+.\!text-stroke-white {
+  @include text-stroke(1px, #fff);
+}
+.\!text-stroke-white-2 {
+  @include \!text-stroke(2px, #fff);
+}
+.\!text-stroke-white-3 {
+  @include \!text-stroke(3px, #fff);
+}
+.\!text-stroke-white-4 {
+  @include \!text-stroke(4px, #fff);
+}
+.\!text-stroke-white-6 {
+  @include \!text-stroke(6px, #fff);
+}
+.\!text-stroke-white-8 {
+  @include \!text-stroke(8px, #fff);
+}

src/scss/tokens/text/mixins/_font-family.scss

@@ -19,6 +19,18 @@
 @mixin font-note {
   font-family: var(--theme-font-family-note);
 }
+@mixin font-source-sans-pro {
+  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+}
+@mixin font-knowledge {
+  font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif;
+}
+@mixin font-freight-book {
+  font-family: 'FreightText', serif;
+}
+@mixin font-noto-sans-jp {
+  font-family: 'Noto Sans JP';
+}
 @mixin \!font-serif {
   font-family: var(--theme-font-family-serif) !important;
 }
@@ -40,3 +52,15 @@
 @mixin \!font-note {
   font-family: var(--theme-font-family-note) !important;
 }
+@mixin \!font-source-sans-pro {
+  font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif !important;
+}
+@mixin \!font-knowledge {
+  font-family: 'Knowledge', 'Source Sans Pro', Arial, Helvetica, sans-serif !important;
+}
+@mixin \!font-freight-book {
+  font-family: 'FreightText', serif !important;
+}
+@mixin \!font-noto-sans-jp {
+  font-family: 'Noto Sans JP' !important;
+}

src/scss/tokens/text/mixins/_main.scss

@@ -4,3 +4,4 @@
 @forward 'font-weight';
 @forward 'letter-spacing';
 @forward 'line-height';
+@forward 'text-stroke';

src/scss/tokens/text/mixins/_text-stroke.scss

@@ -0,0 +1,8 @@
+@mixin text-stroke($size: 1px, $colour: #ffffff) {
+  -webkit-text-stroke: $size $colour;
+  text-stroke: $size $colour;
+}
+@mixin \!text-stroke($size: 1px, $colour: #ffffff) {
+  -webkit-text-stroke: $size $colour !important;
+  text-stroke: $size $colour !important;
+}