colour tables

.storybook/preview.ts

@@ -54,13 +54,13 @@ export const parameters = {
         [
           'Intro',
           'Typography', [
-            'Classes',
+            'Main',
             'Intro',
             'Using the type system',
             '*',
           ],
           'Layout', [
-            'Classes',
+            'Main',
             'Spacers',
             'Flexbox',
             '*',

src/docs/docs-components/CopyColourTable/Table.jsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+
+import { Unstyled } from '@storybook/blocks';
+// @ts-ignore
+import classes from './styles.module.scss';
+
+const Copyable = (props) => {
+  const handleClick = async(props) => {
+    const copyText = props.wrap ? `var(${props.children})` : props.children;
+    await navigator.clipboard.writeText(copyText);
+    props.setCopied(true);
+  }
+
+  return (
+    <button className="copy-btn" onClick={() => handleClick(props)}>
+      <span className="material-symbols-outlined">content_copy</span>{props.children}
+      {props.copied && <div className="copy-tag">Copied</div>}
+    </button>
+  );
+}
+
+const Cell = (props) => {
+  const [copied, setCopied] = useState(false);
+
+  let timeout;
+
+  useEffect(() => {
+    if(timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => { setCopied(false); }, 1000);
+  }, [copied]);
+
+  const copyProps = {...props, ...{ copied, setCopied } };
+
+  return props.column === 0 ?
+    <div className="swatch-container">
+      <div className="swatch" style={{ backgroundColor: props.children }}></div>
+      <span>
+        <Copyable {...copyProps}>{props.children}</Copyable>
+      </span>
+    </div>
+  : props.children.map(css => (
+    <div key={css}>
+      <Copyable {...copyProps} wrap>{css}</Copyable>
+    </div>
+  ));
+}
+
+  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 TH = (props) => <th>{props.children}</th>;
+
+const CopyTable = ({ title = null, header, body, copyable, mdnLink = null }) => {
+  return (
+    <Unstyled>
+      <div className={classes.title}>
+        {title}
+      </div>
+      <table className={classes.table}>
+        <thead>
+          <tr>
+            {header.map(h => (<TH>{h}</TH>))}
+          </tr>
+        </thead>
+        <tbody>
+          {body.map(b => (<TR {...{ title, header, body, copyable, mdnLink}}>{b}</TR>))}
+        </tbody>
+      </table>
+    </Unstyled>
+  )
+};
+
+export default CopyTable;

src/docs/docs-components/CopyColourTable/styles.module.scss

@@ -0,0 +1,131 @@
+$copyable: #0071a1;
+$header: #5e81ac;
+
+.title {
+  font-size: 18px;
+  color: #666;
+  margin-bottom: 5px;
+  font-weight: 400;
+  a span {
+    font-size: 18px;
+    line-height: 18px;
+    margin-left: 2px;
+    vertical-align: middle;
+    font-weight: bold;
+    opacity: 0.6;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.table :global {
+  min-height: 100px;
+  margin: 0 0 3rem;
+  width: 100%;
+  max-width: 600px;
+  border-collapse: collapse;
+  border-radius: 4px;
+  overflow: hidden;
+  th,
+  td {
+    padding: 6px 13px;
+    font-family: 'Nunito Sans', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+  }
+  thead tr {
+    // background-color: #5e81ac;
+    color: #333;
+    text-align: left;
+    th {
+      font-weight: bold;
+      color: #2e3438;
+      border: 1px solid hsla(203, 50%, 30%, 0.15);
+      margin: 0;
+
+      border-collapse: collapse;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+  thead {
+    display: block;
+    width: 100%;
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+    }
+  }
+  tbody {
+    display: block;
+    max-height: 605px;
+    overflow-y: scroll;
+    border-bottom: 1px solid hsla(203, 50%, 30%, 0.15);
+  }
+  tbody tr {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+    border: 1px solid hsla(203, 50%, 30%, 0.15);
+    border-radius: 4px;
+    font-size: 0.9rem;
+    font-weight: 400;
+    color: #404040;
+    td {
+      border-right: 1px solid #eee;
+      vertical-align: middle;
+      color: #2e3438;
+      position: relative;
+      button {
+        text-align: left;
+        padding: 0;
+        border: 0;
+        background-color: transparent;
+        cursor: pointer;
+        color: $copyable;
+
+        span {
+          font-size: 1rem;
+          color: inherit;
+          margin-right: 5px;
+          vertical-align: bottom;
+        }
+        div.copy-tag {
+          position: absolute;
+          right: 4px;
+          top: 50%;
+          transform: translate(0, -50%);
+          background-color: #333;
+          pointer-events: none;
+          color: white;
+          padding: 4px 6px;
+          border-radius: 4px;
+          font-size: 12px;
+        }
+        &:active {
+          transform: translate(1px, 1px);
+        }
+      }
+    }
+  }
+
+  tbody tr:nth-of-type(even) {
+    background-color: #f7fafc;
+  }
+
+  div.swatch-container {
+    display: flex;
+    align-items: center;
+  }
+
+  div.swatch {
+    width: 40px;
+    height: 40px;
+    border: 1px solid hsla(203, 50%, 30%, 0.15);
+    border-radius: 10px;
+    display: inline-block;
+    margin-right: 10px;
+  }
+}

src/docs/styles/borders/main.stories.mdx

@@ -15,7 +15,7 @@ import borderStyle from '$lib/scss/borders/\_border-style.scss?raw';
 {/* @ts-ignore */}
 import borderWidth from '$lib/scss/borders/\_border-width.scss?raw';
 
-<Meta title="Styles/Borders/Classes" parameters={{ ...parameters }} />
+<Meta title="Styles/Borders/Main" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 

src/docs/styles/colours/thematic.stories.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/addon-docs';
+import { parameters } from '$docs/utils/docsPage.js';
+import CopyColourTable from '../../docs-components/CopyColourTable/Table.jsx';
+import { extractCssColourVariables } from '../../utils/parseCss';
+
+{/* @ts-ignore */}
+import greyScheme from '$lib/scss/colours/thematic/\_grey.scss?raw';
+
+{/* @ts-ignore */}
+import trScheme from '$lib/scss/colours/thematic/\_tr.scss?raw';
+
+{/* @ts-ignore */}
+import nordScheme from '$lib/scss/colours/thematic/\_nord.scss?raw';
+
+<Meta title="Styles/Colours/Thematic" parameters={{ ...parameters }} />
+
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# Colours
+
+Several colour schemes are accessible through CSS variables in the tables below.
+
+<CopyColourTable
+  title="Grey"
+  header={['Colour', 'CSS variable']}
+  body={extractCssColourVariables(greyScheme)}
+/>
+
+<CopyColourTable
+  title="Thomson Reuters"
+  header={['Colour', 'CSS variable']}
+  body={extractCssColourVariables(trScheme)}
+/>
+
+<CopyColourTable
+  title="Nord"
+  header={['Colour', 'CSS variable']}
+  body={extractCssColourVariables(nordScheme)}
+/>

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

@@ -12,7 +12,7 @@ import display from '$lib/scss/layout/\_display.scss?raw';
 {/* @ts-ignore */}
 import floats from '$lib/scss/layout/\_floats.scss?raw';
 
-<Meta title="Styles/Layout/Classes" parameters={{ ...parameters }} />
+<Meta title="Styles/Layout/Main" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 

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

@@ -35,7 +35,7 @@ import wordBreak from '$lib/scss/text/\_word-break.scss?raw';
 
 import './styles.scss';
 
-<Meta title="Styles/Typography/Classes" parameters={{ ...parameters }} />
+<Meta title="Styles/Typography/Main" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
 

src/docs/utils/parseCss.js

@@ -17,3 +17,20 @@ export const cssStringToTableArray = (cssString) => {
     return [className, properties];
   });
 };
+
+export const extractCssColourVariables = (cssString) => {
+  const variableRegexp = /(--[a-zA-Z][a-zA-Z0-9-]+):\s*(.+);/g;
+  const cssVariables = [...cssString.matchAll(variableRegexp)].map(
+    ([all, g1, g2]) => [g2, g1]
+  );
+  const colours = {};
+  for (const variable of cssVariables) {
+    const [colour, css] = variable;
+    if (colours[colour]) {
+      colours[colour].push(css);
+    } else {
+      colours[colour] = [css];
+    }
+  }
+  return Object.keys(colours).map((key) => [key, colours[key]]);
+};

src/scss/colours/thematic/_grey.scss

@@ -0,0 +1,13 @@
+:root {
+  --grey-50: #f9fafb;
+  --grey-100: #f3f4f6;
+  --grey-200: #e5e7eb;
+  --grey-300: #d1d5db;
+  --grey-400: #9ca3af;
+  --grey-500: #6b7280;
+  --grey-600: #4b5563;
+  --grey-700: #374151;
+  --grey-800: #1f2937;
+  --grey-900: #111827;
+  --grey-950: #030712;
+}