From 75ac9889cf3ede4a93d9b80d8733d7483a39850b Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Wed, 26 Jul 2023 19:42:37 +0100
Subject: [PATCH] variables

---
 src/components/Headline/Headline.svelte       |  1 -
 .../PhotoCarousel/PhotoCarousel.svelte        | 12 +++----
 src/components/PhotoPack/PhotoPack.svelte     |  8 ++---
 src/components/Table/Pagination.svelte        | 12 +++----
 src/components/Table/Select.svelte            |  8 ++---
 src/components/Table/Table.svelte             | 31 ++++++++---------
 .../docs-components/CopyColourTable/Table.jsx |  6 ++--
 .../CopyColourTable/styles.module.scss        |  1 +
 src/docs/docs-components/CopyTable/Table.jsx  |  8 ++---
 .../styles/tokens/layout/spacers.stories.mdx  |  8 ++---
 .../styles/tokens/variables/main.stories.mdx  | 20 +++++++++++
 src/docs/utils/parseCss.js                    |  8 +++++
 src/scss/_mixins.scss                         |  1 +
 src/scss/mixins/texts/_note.scss              | 34 -------------------
 src/scss/tokens/variables/_main.scss          |  1 +
 src/scss/tokens/variables/_theme.scss         |  8 +++++
 16 files changed, 85 insertions(+), 82 deletions(-)
 create mode 100644 src/docs/styles/tokens/variables/main.stories.mdx
 delete mode 100644 src/scss/mixins/texts/_note.scss
 create mode 100644 src/scss/tokens/variables/_main.scss
 create mode 100644 src/scss/tokens/variables/_theme.scss

diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 18f3a1ea..39837c39 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -70,7 +70,6 @@
 
 <style lang="scss">
   @use '../../scss/mixins' as *;
-  // @import '../../scss/fonts/variables';
 
   header.headline {
     text-align: center;
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index f9996891..dfd6be0a 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -175,7 +175,7 @@
 </Block>
 
 <style lang="scss">
-  @import '../../scss/fonts/variables';
+  @import '../../scss/mixins';
 
   .carousel-container {
     margin-bottom: 10px;
@@ -201,7 +201,7 @@
           letter-spacing: 0.75px;
           text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333,
             1px 1px 0 #333;
-          font-family: var(--theme-font-family-note);
+          @include font-note;
           &.contain-fit {
             left: 50%;
             transform: translate(-50%, 0%);
@@ -232,12 +232,12 @@
           border: 1px solid transparent;
           border-radius: 50%;
           background-color: transparent;
-          color: var(--theme-colour-text-secondary);
+          @include text-secondary;
           opacity: 0.4;
           &:hover {
             opacity: 1;
             border-color: var(--theme-colour-text-secondary);
-            color: var(--theme-colour-text-secondary);
+            @include text-secondary;
           }
           &:disabled {
             opacity: 0.4;
@@ -274,8 +274,8 @@
     }
     p.caption {
       margin: 5px 0 0;
-      font-family: var(--theme-font-family-note, $font-family-display);
-      color: var(--theme-colour-text-secondary);
+      @include font-note;
+      @include text-secondary;
       font-size: 0.85rem;
       line-height: 1.1rem;
       font-weight: 300;
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index adfdd335..f2381627 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -130,7 +130,7 @@
 </Block>
 
 <style lang="scss">
-  @import '../../scss/fonts/variables';
+  @import '../../scss/mixins';
 
   div.photopack-container {
     display: block;
@@ -151,7 +151,7 @@
           object-fit: cover;
         }
         div.alt-warning {
-          font-family: $font-family-display;
+          @include font-sans;
           padding: 5px 10px;
           background-color: red;
           color: white;
@@ -174,8 +174,8 @@
       :global(p) {
         font-size: 0.85rem;
         line-height: 1.1rem;
-        font-family: var(--theme-font-family-note, $font-family-display);
-        color: var(--theme-colour-text-secondary);
+        @include font-sans;
+        @include text-secondary;
         margin: 0;
         font-weight: 300;
       }
diff --git a/src/components/Table/Pagination.svelte b/src/components/Table/Pagination.svelte
index 628a0983..fa90aaa7 100644
--- a/src/components/Table/Pagination.svelte
+++ b/src/components/Table/Pagination.svelte
@@ -65,7 +65,7 @@
 </nav>
 
 <style lang="scss">
-  @import '../../scss/fonts/variables';
+  @import '../../scss/mixins';
 
   nav.pagination {
     display: flex;
@@ -75,8 +75,8 @@
     button {
       border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));
       border-radius: 50%;
-      background: var(--theme-color-background);
-      color: var(--theme-colour-text-secondary, var(--tr-light-grey));
+      @include bg;
+      @include text-secondary;
       cursor: pointer;
       width: 35px;
       height: 35px;
@@ -95,7 +95,7 @@
         justify-content: center;
         white-space: nowrap;
         &:hover {
-          color: var(--theme-colour-text-primary, var(--tr-medium-grey));
+          @include text-primary;
           border-color: var(--theme-colour-text-primary, var(--tr-medium-grey));
         }
       }
@@ -109,10 +109,10 @@
       margin: 0 0.5rem;
       .records {
         font-size: 0.8rem;
-        font-family: var(--theme-font-family-hed, $font-family-display);
+        @include font-sans;
         font-weight: 300;
         margin: 0 1rem;
-        color: var(--theme-colour-text-primary, var(--tr-medium-grey));
+        @include text-primary;
       }
     }
   }
diff --git a/src/components/Table/Select.svelte b/src/components/Table/Select.svelte
index 8cf1dbf3..2f3dee17 100644
--- a/src/components/Table/Select.svelte
+++ b/src/components/Table/Select.svelte
@@ -39,16 +39,16 @@
 </div>
 
 <style lang="scss">
-  @import '../../scss/fonts/variables';
+  @import '../../scss/mixins';
 
   .select {
     width: 256px;
-    font-family: var(--theme-font-family-hed, $font-family-display);
+    @include font-sans;
     label {
       display: block;
       font-size: 0.8rem;
       font-weight: 300;
-      color: var(--theme-colour-text-primary, var(--tr-dark-grey));
+      @include text-primary;
       padding: 0 0 0.125rem 0;
     }
     .select--input {
@@ -58,7 +58,7 @@
       line-height: 1;
       height: 33px;
       border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
-      color: var(--theme-colour-text-primary, var(--tr-dark-grey));
+      @include text-primary;
       border-radius: 6px;
       width: 100%;
       padding: 0.5rem;
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 23a78930..01c07509 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -204,7 +204,7 @@
 
   /** Boot it up. */
   onMount(() => {
-    data.forEach((d) => {
+    data.forEach((d: any) => {
       // Compose the string we will allow users to search
       d.searchStr = includedFields
         .map((field) => d[field])
@@ -340,26 +340,26 @@
 </Block>
 
 <style lang="scss">
-  @import '../../scss/fonts/variables';
+  @import '../../scss/mixins';
 
   .table-wrapper {
     font-size: 1rem;
-    font-family: var(--theme-font-family-hed, $font-family-display);
-    color: var(--theme-colour-text-primary, var(--tr-dark-grey));
+    @include font-sans;
+    @include text-primary;
   }
 
   .table--header {
     width: 100%;
     h2.table--header--title {
       font-weight: 500;
-      color: var(--theme-colour-text-primary, var(--tr-dark-grey));
+      @include text-primary;
       font-size: 1.33rem;
       padding: 0;
       margin: 0.5rem 0;
     }
     p.table--header--dek {
-      font-family: var(--theme-font-family-hed, $font-family-display);
-      color: var(--theme-colour-text-primary, var(--tr-dark-grey));
+      @include font-sans;
+      @include text-primary;
       font-size: 1rem;
       font-weight: 300;
       line-height: 1.4;
@@ -379,10 +379,9 @@
     thead {
       tr {
         th {
-          border-bottom: 1px solid
-            var(--theme-colour-text-primary, var(--tr-medium-grey));
-          color: var(--theme-colour-text-primary, var(--tr-medium-grey));
-          background-color: var(--theme-colour-background, #fff);
+          border-bottom: 1px solid var(--theme-colour-text-primary);
+          @include text-primary;
+          @include bg;
           font-size: 0.85rem;
           font-weight: 500;
           text-align: inherit;
@@ -409,7 +408,7 @@
         border-bottom: 1px solid
           var(--theme-colour-brand-rules, var(--tr-muted-grey));
         &.no-results {
-          color: var(--theme-colour-text-secondary, var(--tr-muted-grey));
+          @include text-secondary;
         }
       }
     }
@@ -420,7 +419,7 @@
       }
       td {
         font-weight: 300;
-        color: var(--theme-colour-text-primary, var(--tr-dark-grey));
+        @include text-primary;
         font-size: 0.8rem;
         padding: 0.5rem 0 0 0;
       }
@@ -465,14 +464,14 @@
     margin-top: 1rem;
     button {
       font-size: 0.8rem;
-      font-family: var(--theme-font-family-hed, $font-family-display);
+      @include font-sans;
       font-weight: 500;
       min-width: 175px;
       padding: 0.33rem 0.5rem;
       border: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
       border-radius: 4px;
-      background: var(--theme-colour-background);
-      color: var(--theme-colour-text-primary, var(--tr-medium-grey));
+      @include bg;
+      @include text-primary;
       cursor: pointer;
     }
   }
diff --git a/src/docs/docs-components/CopyColourTable/Table.jsx b/src/docs/docs-components/CopyColourTable/Table.jsx
index 49514b3e..b826816f 100644
--- a/src/docs/docs-components/CopyColourTable/Table.jsx
+++ b/src/docs/docs-components/CopyColourTable/Table.jsx
@@ -47,7 +47,7 @@ const Cell = (props) => {
 }
 
   const TD = (props) => <td><Cell {...props}>{props.children}</Cell></td>
-const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i}>{c}</TD>))}</tr>
+const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i} key={i}>{c}</TD>))}</tr>
 const TH = (props) => <th>{props.children}</th>;
 
 const CopyTable = ({ title = null, body, copyable, mdnLink = null, included = false, partial }) => {
@@ -61,11 +61,11 @@ const CopyTable = ({ title = null, body, copyable, mdnLink = null, included = fa
       <table className={classes.table}>
         <thead>
           <tr>
-            {header.map(h => (<TH>{h}</TH>))}
+            {header.map(h => (<TH key={h}>{h}</TH>))}
           </tr>
         </thead>
         <tbody>
-          {body.map(b => (<TR {...{ title, header, body, copyable, mdnLink}}>{b}</TR>))}
+          {body.map((b, i) => (<TR {...{ title, header, body, copyable, mdnLink}} key={i}>{b}</TR>))}
         </tbody>
       </table>
     </Unstyled>
diff --git a/src/docs/docs-components/CopyColourTable/styles.module.scss b/src/docs/docs-components/CopyColourTable/styles.module.scss
index f46ad8ff..26ab1e64 100644
--- a/src/docs/docs-components/CopyColourTable/styles.module.scss
+++ b/src/docs/docs-components/CopyColourTable/styles.module.scss
@@ -6,6 +6,7 @@ $header: #5e81ac;
   color: #666;
   margin-bottom: 0;
   font-weight: 400;
+  margin-top: 2rem;
   a span {
     font-size: 18px;
     line-height: 18px;
diff --git a/src/docs/docs-components/CopyTable/Table.jsx b/src/docs/docs-components/CopyTable/Table.jsx
index 79bd229c..a23ddb52 100644
--- a/src/docs/docs-components/CopyTable/Table.jsx
+++ b/src/docs/docs-components/CopyTable/Table.jsx
@@ -4,7 +4,7 @@ import { Unstyled } from '@storybook/blocks';
 // @ts-ignore
 import classes from './styles.module.scss';
 
-const MultiLine = (props) => props.children.split('\n').map(t => (<div>{t}</div>))
+const MultiLine = (props) => props.children.split('\n').map(t => (<div key={t}>{t}</div>))
 
 const Copyable = (props) => {
   const handleClick = async(props) => {
@@ -32,7 +32,7 @@ const Copyable = (props) => {
 }
 
   const TD = (props) => <td><Copyable {...props}>{props.children}</Copyable></td>
-const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i}>{c}</TD>))}</tr>
+const TR = (props) => <tr>{props.children.map((c, i) => (<TD {...props} column={i} key={i}>{c}</TD>))}</tr>
 const TH = (props) => <th>{props.children}</th>;
 
 const CopyTable = ({ title = null, header, body, copyable, mdnLink = null }) => {
@@ -49,11 +49,11 @@ const CopyTable = ({ title = null, header, body, copyable, mdnLink = null }) =>
       <table className={classes.table}>
         <thead>
           <tr>
-            {header.map(h => (<TH>{h}</TH>))}
+            {header.map(h => (<TH key={h}>{h}</TH>))}
           </tr>
         </thead>
         <tbody>
-          {body.map(b => (<TR {...{ title, header, body, copyable, mdnLink}}>{b}</TR>))}
+          {body.map((b, i) => (<TR {...{ title, header, body, copyable, mdnLink}} key={i}>{b}</TR>))}
         </tbody>
       </table>
     </Unstyled>
diff --git a/src/docs/styles/tokens/layout/spacers.stories.mdx b/src/docs/styles/tokens/layout/spacers.stories.mdx
index 5b133d5a..e1d81ac6 100644
--- a/src/docs/styles/tokens/layout/spacers.stories.mdx
+++ b/src/docs/styles/tokens/layout/spacers.stories.mdx
@@ -27,9 +27,9 @@ Spacers include tokens that control static and fluid margins and paddings.
 
 **Static** margin/padding tokens set values that don't change with the size of the viewport. These tokens are best for creating space between block-like elements — divs, pictures, videos, graphics, etc. The tables below contain dozens of levels so you can finely tune spacing, but their values also are at intervals that help you maintain consistent balance on your page.
 
-**Fluid** token values _do change_ depending on the size of the device and are specifically designed to pair with our fluid font sizes. These tokes have fewer available levels to help make sure our typography is consistent.
+**Fluid** token values _do change_ depending on the size of the device and are specifically designed to pair with our fluid font sizes. These tokens have fewer available levels to help make sure our typography is consistent.
 
-As a rule of thumb, if you're setting space between or adjacent to _text elements_, you'll likely want to use **fluid tokens** (`Fluid margin`/`Fluid padding` tables). If you're setting space between _block-like elements_, you probably want **static tokens** (`Margin`/`Padding` tables).
+As a rule of thumb, if you're setting space between or adjacent to _text elements_, you'll likely want to use **fluid tokens** (`Fluid margin`/`Fluid padding` tables). If you're setting space between _block-like elements_, you probably want **static tokens** (`Margin`/`Padding`).
 
 ---
 
@@ -54,7 +54,7 @@ As a rule of thumb, if you're setting space between or adjacent to _text element
   mdnLink="margin"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(fluidMargin, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include %${t};`, false]}
 />
 
 <CopyTable
@@ -62,5 +62,5 @@ As a rule of thumb, if you're setting space between or adjacent to _text element
   mdnLink="margin"
   header={['Class', 'Include', 'Properties']}
   body={cssStringToTableArray(fluidPadding, true)}
-  copyable={[true, (t) => `@include ${t};`, false]}
+  copyable={[true, (t) => `@include %${t};`, false]}
 />
diff --git a/src/docs/styles/tokens/variables/main.stories.mdx b/src/docs/styles/tokens/variables/main.stories.mdx
new file mode 100644
index 00000000..d7724e5a
--- /dev/null
+++ b/src/docs/styles/tokens/variables/main.stories.mdx
@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+import CopyTable from '../../../docs-components/CopyTable/Table.jsx';
+import { scssVariablesToTableArray } from '../../../utils/parseCss';
+
+{/* @ts-ignore */}
+import theme from '$lib/scss/tokens/variables/\_theme.scss?raw';
+
+<Meta title="Styles/Tokens/Variables" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Token variables
+
+<CopyTable
+  title="Theme"
+  header={['Variable', 'Properties']}
+  body={scssVariablesToTableArray(theme)}
+  copyable={[true, false]}
+/>
diff --git a/src/docs/utils/parseCss.js b/src/docs/utils/parseCss.js
index 13658a5d..2952ceb6 100644
--- a/src/docs/utils/parseCss.js
+++ b/src/docs/utils/parseCss.js
@@ -20,6 +20,14 @@ export const cssStringToTableArray = (cssString, withInclude = false) => {
   });
 };
 
+export const scssVariablesToTableArray = (scssString) => {
+  const regExp = /^(\$[a-zA-Z0-9-_]+):\s*(.+)$/gm;
+  const matches = scssString.matchAll(regExp);
+  return Array.from(matches).map((match) => {
+    return [match[1], match[2]];
+  });
+};
+
 export const extractCssColourVariables = (cssString) => {
   const variableRegexp = /(--[a-zA-Z][a-zA-Z0-9-]+):\s*(.+);/g;
   const cssVariables = [...cssString.matchAll(variableRegexp)].map(
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 5f23bbc9..3b07d004 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -3,3 +3,4 @@
 @forward 'tokens/backgrounds/mixins/main';
 @forward 'tokens/spacers/mixins/main';
 @forward 'tokens/text/mixins/main';
+@forward 'tokens/variables/main';
diff --git a/src/scss/mixins/texts/_note.scss b/src/scss/mixins/texts/_note.scss
deleted file mode 100644
index d5493756..00000000
--- a/src/scss/mixins/texts/_note.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import '../fonts/variables';
-
-@mixin note-text {
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-family: var(--theme-font-family-note, $font-family-display);
-    color: var(--theme-colour-text-primary);
-    margin: 1rem 0 0;
-    font-size: 1rem;
-    letter-spacing: 0.5px;
-  }
-
-  p {
-    font-family: var(--theme-font-family-note, $font-family-display);
-    font-size: 1rem;
-    font-weight: 200;
-    color: var(--theme-colour-text-primary);
-    a {
-      color: currentColor;
-      background-size: 1px 1px;
-      background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" stroke="rgba(0, 0, 0, 0.8)" /></svg>');
-      background-position: 0 1.1rem;
-      background-repeat: repeat-x;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-}
diff --git a/src/scss/tokens/variables/_main.scss b/src/scss/tokens/variables/_main.scss
new file mode 100644
index 00000000..65f9c53b
--- /dev/null
+++ b/src/scss/tokens/variables/_main.scss
@@ -0,0 +1 @@
+@forward 'theme';
diff --git a/src/scss/tokens/variables/_theme.scss b/src/scss/tokens/variables/_theme.scss
new file mode 100644
index 00000000..550cb835
--- /dev/null
+++ b/src/scss/tokens/variables/_theme.scss
@@ -0,0 +1,8 @@
+// SCSS mirrors for theme CSS variables
+$theme-colour-background: var(--theme-colour-background);
+$theme-colour-text-primary: var(--theme-colour-text-primary);
+$theme-colour-text-secondary: var(--theme-colour-text-secondary);
+$theme-colour-accent: var(--theme-colour-accent);
+$theme-colour-brand-logo: var(--theme-colour-brand-logo);
+$theme-colour-brand-rules: var(--theme-colour-brand-rules);
+$theme-colour-brand-shadow: var(--theme-colour-brand-shadow);