other primary colours

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

@@ -1,14 +1,9 @@
 import React, { useEffect, useState } from 'react';
 
 import ImportSnippet from './ImportSnippet';
-import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 import { Unstyled } from '@storybook/blocks';
 // @ts-ignore
 import classes from './styles.module.scss';
-import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';
-import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
-
-SyntaxHighlighter.registerLanguage('scss', scss);
 
 const Copyable = (props) => {
   const handleClick = async(props) => {
@@ -55,7 +50,8 @@ const Cell = (props) => {
 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, included = false, partial }) => {
+const CopyTable = ({ title = null, body, copyable, mdnLink = null, included = false, partial }) => {
+  const header=['Colour', 'CSS variable'];
   return (
     <Unstyled>
       <div className={classes.title}>

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

@@ -6,12 +6,69 @@ import { extractCssColourVariables } from '../../utils/parseCss';
 {/* @ts-ignore */}
 import greyScheme from '$lib/scss/colours/primary/\_grey.scss?raw';
 
+{/* @ts-ignore */}
+import slateScheme from '$lib/scss/colours/primary/\_slate.scss?raw';
+
+{/* @ts-ignore */}
+import zincScheme from '$lib/scss/colours/primary/\_zinc.scss?raw';
+
+{/* @ts-ignore */}
+import neutralScheme from '$lib/scss/colours/primary/\_neutral.scss?raw';
+
+{/* @ts-ignore */}
+import stoneScheme from '$lib/scss/colours/primary/\_stone.scss?raw';
+
 {/* @ts-ignore */}
 import redScheme from '$lib/scss/colours/primary/\_red.scss?raw';
 
+{/* @ts-ignore */}
+import orangeScheme from '$lib/scss/colours/primary/\_orange.scss?raw';
+
+{/* @ts-ignore */}
+import amberScheme from '$lib/scss/colours/primary/\_amber.scss?raw';
+
+{/* @ts-ignore */}
+import yellowScheme from '$lib/scss/colours/primary/\_yellow.scss?raw';
+
+{/* @ts-ignore */}
+import limeScheme from '$lib/scss/colours/primary/\_lime.scss?raw';
+
+{/* @ts-ignore */}
+import greenScheme from '$lib/scss/colours/primary/\_green.scss?raw';
+
+{/* @ts-ignore */}
+import emeraldScheme from '$lib/scss/colours/primary/\_emerald.scss?raw';
+
+{/* @ts-ignore */}
+import tealScheme from '$lib/scss/colours/primary/\_teal.scss?raw';
+
+{/* @ts-ignore */}
+import cyanScheme from '$lib/scss/colours/primary/\_cyan.scss?raw';
+
+{/* @ts-ignore */}
+import skyScheme from '$lib/scss/colours/primary/\_sky.scss?raw';
+
 {/* @ts-ignore */}
 import blueScheme from '$lib/scss/colours/primary/\_blue.scss?raw';
 
+{/* @ts-ignore */}
+import indigoScheme from '$lib/scss/colours/primary/\_indigo.scss?raw';
+
+{/* @ts-ignore */}
+import violetScheme from '$lib/scss/colours/primary/\_violet.scss?raw';
+
+{/* @ts-ignore */}
+import purpleScheme from '$lib/scss/colours/primary/\_purple.scss?raw';
+
+{/* @ts-ignore */}
+import fuchsiaScheme from '$lib/scss/colours/primary/\_fuchsia.scss?raw';
+
+{/* @ts-ignore */}
+import pinkScheme from '$lib/scss/colours/primary/\_pink.scss?raw';
+
+{/* @ts-ignore */}
+import roseScheme from '$lib/scss/colours/primary/\_rose.scss?raw';
+
 <Meta title="Styles/Colours/Primary" parameters={{ ...parameters }} />
 
 ![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
@@ -20,22 +77,133 @@ import blueScheme from '$lib/scss/colours/primary/\_blue.scss?raw';
 
 <CopyColourTable
   title="Grey"
-  header={['Colour', 'CSS variable']}
   body={extractCssColourVariables(greyScheme)}
   included
   partial="primary/_grey.scss"
 />
 
+<CopyColourTable
+  title="Slate"
+  body={extractCssColourVariables(slateScheme)}
+  partial="primary/_slate.scss"
+/>
+
+<CopyColourTable
+  title="Zinc"
+  body={extractCssColourVariables(zincScheme)}
+  partial="primary/_zinc.scss"
+/>
+
+<CopyColourTable
+  title="Neutral"
+  body={extractCssColourVariables(neutralScheme)}
+  partial="primary/_neutral.scss"
+/>
+
+<CopyColourTable
+  title="Stone"
+  body={extractCssColourVariables(stoneScheme)}
+  partial="primary/_stone.scss"
+/>
+
 <CopyColourTable
   title="Red"
-  header={['Colour', 'CSS variable']}
   body={extractCssColourVariables(redScheme)}
   partial="primary/_red.scss"
 />
 
+<CopyColourTable
+  title="Orange"
+  body={extractCssColourVariables(orangeScheme)}
+  partial="primary/_orange.scss"
+/>
+
+<CopyColourTable
+  title="Amber"
+  body={extractCssColourVariables(amberScheme)}
+  partial="primary/_amber.scss"
+/>
+
+<CopyColourTable
+  title="Yellow"
+  body={extractCssColourVariables(yellowScheme)}
+  partial="primary/_yellow.scss"
+/>
+
+<CopyColourTable
+  title="Lime"
+  body={extractCssColourVariables(limeScheme)}
+  partial="primary/_lime.scss"
+/>
+
+<CopyColourTable
+  title="Green"
+  body={extractCssColourVariables(greenScheme)}
+  partial="primary/_green.scss"
+/>
+
+<CopyColourTable
+  title="Emerald"
+  body={extractCssColourVariables(emeraldScheme)}
+  partial="primary/_emerald.scss"
+/>
+
+<CopyColourTable
+  title="Teal"
+  body={extractCssColourVariables(tealScheme)}
+  partial="primary/_teal.scss"
+/>
+
+<CopyColourTable
+  title="Cyan"
+  body={extractCssColourVariables(cyanScheme)}
+  partial="primary/_cyan.scss"
+/>
+
+<CopyColourTable
+  title="Sky"
+  body={extractCssColourVariables(skyScheme)}
+  partial="primary/_sky.scss"
+/>
+
 <CopyColourTable
   title="Blue"
-  header={['Colour', 'CSS variable']}
   body={extractCssColourVariables(blueScheme)}
   partial="primary/_blue.scss"
 />
+
+<CopyColourTable
+  title="Indigo"
+  body={extractCssColourVariables(indigoScheme)}
+  partial="primary/_indigo.scss"
+/>
+
+<CopyColourTable
+  title="Violet"
+  body={extractCssColourVariables(violetScheme)}
+  partial="primary/_violet.scss"
+/>
+
+<CopyColourTable
+  title="Purple"
+  body={extractCssColourVariables(purpleScheme)}
+  partial="primary/_purple.scss"
+/>
+
+<CopyColourTable
+  title="Fuchsia"
+  body={extractCssColourVariables(fuchsiaScheme)}
+  partial="primary/_fuchsia.scss"
+/>
+
+<CopyColourTable
+  title="Pink"
+  body={extractCssColourVariables(pinkScheme)}
+  partial="primary/_pink.scss"
+/>
+
+<CopyColourTable
+  title="Rose"
+  body={extractCssColourVariables(roseScheme)}
+  partial="primary/_rose.scss"
+/>

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

@@ -17,7 +17,6 @@ import nordScheme from '$lib/scss/colours/thematic/\_nord.scss?raw';
 
 <CopyColourTable
   title="Thomson Reuters"
-  header={['Colour', 'CSS variable']}
   body={extractCssColourVariables(trScheme)}
   included
   partial="thematic/_tr.scss"
@@ -25,7 +24,6 @@ import nordScheme from '$lib/scss/colours/thematic/\_nord.scss?raw';
 
 <CopyColourTable
   title="Nord"
-  header={['Colour', 'CSS variable']}
   body={extractCssColourVariables(nordScheme)}
   partial="thematic/_nord.scss"
 />

src/scss/colours/primary/_amber.scss

@@ -0,0 +1,13 @@
+:root {
+  --amber-50: #fffbeb;
+  --amber-100: #fef3c7;
+  --amber-200: #fde68a;
+  --amber-300: #fcd34d;
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --amber-900: #78350f;
+  --amber-950: #451a03;
+}

src/scss/colours/primary/_cyan.scss

@@ -0,0 +1,13 @@
+:root {
+  --cyan-50: #ecfeff;
+  --cyan-100: #cffafe;
+  --cyan-200: #a5f3fc;
+  --cyan-300: #67e8f9;
+  --cyan-400: #22d3ee;
+  --cyan-500: #06b6d4;
+  --cyan-600: #0891b2;
+  --cyan-700: #0e7490;
+  --cyan-800: #155e75;
+  --cyan-900: #164e63;
+  --cyan-950: #083344;
+}

src/scss/colours/primary/_emerald.scss

@@ -0,0 +1,13 @@
+:root {
+  --emerald-50: #ecfdf5;
+  --emerald-100: #d1fae5;
+  --emerald-200: #a7f3d0;
+  --emerald-300: #6ee7b7;
+  --emerald-400: #34d399;
+  --emerald-500: #10b981;
+  --emerald-600: #059669;
+  --emerald-700: #047857;
+  --emerald-800: #065f46;
+  --emerald-900: #064e3b;
+  --emerald-950: #022c22;
+}

src/scss/colours/primary/_fuchsia.scss

@@ -0,0 +1,13 @@
+:root {
+  --fuchsia-50: #fdf4ff;
+  --fuchsia-100: #fae8ff;
+  --fuchsia-200: #f5d0fe;
+  --fuchsia-300: #f0abfc;
+  --fuchsia-400: #e879f9;
+  --fuchsia-500: #d946ef;
+  --fuchsia-600: #c026d3;
+  --fuchsia-700: #a21caf;
+  --fuchsia-800: #86198f;
+  --fuchsia-900: #701a75;
+  --fuchsia-950: #4a044e;
+}

src/scss/colours/primary/_green.scss

@@ -0,0 +1,13 @@
+:root {
+  --green-50: #f0fdf4;
+  --green-100: #dcfce7;
+  --green-200: #bbf7d0;
+  --green-300: #86efac;
+  --green-400: #4ade80;
+  --green-500: #22c55e;
+  --green-600: #16a34a;
+  --green-700: #15803d;
+  --green-800: #166534;
+  --green-900: #14532d;
+  --green-950: #052e16;
+}

src/scss/colours/primary/_indigo.scss

@@ -0,0 +1,13 @@
+:root {
+  --indigo-50: #eef2ff;
+  --indigo-100: #e0e7ff;
+  --indigo-200: #c7d2fe;
+  --indigo-300: #a5b4fc;
+  --indigo-400: #818cf8;
+  --indigo-500: #6366f1;
+  --indigo-600: #4f46e5;
+  --indigo-700: #4338ca;
+  --indigo-800: #3730a3;
+  --indigo-900: #312e81;
+  --indigo-950: #1e1b4b;
+}

src/scss/colours/primary/_lime.scss

@@ -0,0 +1,13 @@
+:root {
+  --lime-50: #f7fee7;
+  --lime-100: #ecfccb;
+  --lime-200: #d9f99d;
+  --lime-300: #bef264;
+  --lime-400: #a3e635;
+  --lime-500: #84cc16;
+  --lime-600: #65a30d;
+  --lime-700: #4d7c0f;
+  --lime-800: #3f6212;
+  --lime-900: #365314;
+  --lime-950: #1a2e05;
+}

src/scss/colours/primary/_neutral.scss

@@ -0,0 +1,13 @@
+:root {
+  --neutral-50: #fafafa;
+  --neutral-100: #f5f5f5;
+  --neutral-200: #e5e5e5;
+  --neutral-300: #d4d4d4;
+  --neutral-400: #a3a3a3;
+  --neutral-500: #737373;
+  --neutral-600: #525252;
+  --neutral-700: #404040;
+  --neutral-800: #262626;
+  --neutral-900: #171717;
+  --neutral-950: #0a0a0a;
+}

src/scss/colours/primary/_orange.scss

@@ -0,0 +1,13 @@
+:root {
+  --orange-50: #fff7ed;
+  --orange-100: #ffedd5;
+  --orange-200: #fed7aa;
+  --orange-300: #fdba74;
+  --orange-400: #fb923c;
+  --orange-500: #f97316;
+  --orange-600: #ea580c;
+  --orange-700: #c2410c;
+  --orange-800: #9a3412;
+  --orange-900: #7c2d12;
+  --orange-950: #431407;
+}

src/scss/colours/primary/_pink.scss

@@ -0,0 +1,13 @@
+:root {
+  --pink-50: #fdf2f8;
+  --pink-100: #fce7f3;
+  --pink-200: #fbcfe8;
+  --pink-300: #f9a8d4;
+  --pink-400: #f472b6;
+  --pink-500: #ec4899;
+  --pink-600: #db2777;
+  --pink-700: #be185d;
+  --pink-800: #9d174d;
+  --pink-900: #831843;
+  --pink-950: #500724;
+}

src/scss/colours/primary/_purple.scss

@@ -0,0 +1,13 @@
+:root {
+  --purple-50: #faf5ff;
+  --purple-100: #f3e8ff;
+  --purple-200: #e9d5ff;
+  --purple-300: #d8b4fe;
+  --purple-400: #c084fc;
+  --purple-500: #a855f7;
+  --purple-600: #9333ea;
+  --purple-700: #7e22ce;
+  --purple-800: #6b21a8;
+  --purple-900: #581c87;
+  --purple-950: #3b0764;
+}

src/scss/colours/primary/_rose.scss

@@ -0,0 +1,13 @@
+:root {
+  --rose-50: #fff1f2;
+  --rose-100: #ffe4e6;
+  --rose-200: #fecdd3;
+  --rose-300: #fda4af;
+  --rose-400: #fb7185;
+  --rose-500: #f43f5e;
+  --rose-600: #e11d48;
+  --rose-700: #be123c;
+  --rose-800: #9f1239;
+  --rose-900: #881337;
+  --rose-950: #4c0519;
+}

src/scss/colours/primary/_sky.scss

@@ -0,0 +1,13 @@
+:root {
+  --sky-50: #f0f9ff;
+  --sky-100: #e0f2fe;
+  --sky-200: #bae6fd;
+  --sky-300: #7dd3fc;
+  --sky-400: #38bdf8;
+  --sky-500: #0ea5e9;
+  --sky-600: #0284c7;
+  --sky-700: #0369a1;
+  --sky-800: #075985;
+  --sky-900: #0c4a6e;
+  --sky-950: #082f49;
+}

src/scss/colours/primary/_slate.scss

@@ -0,0 +1,13 @@
+:root {
+  --slate-50: #f8fafc;
+  --slate-100: #f1f5f9;
+  --slate-200: #e2e8f0;
+  --slate-300: #cbd5e1;
+  --slate-400: #94a3b8;
+  --slate-500: #64748b;
+  --slate-600: #475569;
+  --slate-700: #334155;
+  --slate-800: #1e293b;
+  --slate-900: #0f172a;
+  --slate-950: #020617;
+}

src/scss/colours/primary/_stone.scss

@@ -0,0 +1,13 @@
+:root {
+  --stone-50: #fafaf9;
+  --stone-100: #f5f5f4;
+  --stone-200: #e7e5e4;
+  --stone-300: #d6d3d1;
+  --stone-400: #a8a29e;
+  --stone-500: #78716c;
+  --stone-600: #57534e;
+  --stone-700: #44403c;
+  --stone-800: #292524;
+  --stone-900: #1c1917;
+  --stone-950: #0c0a09;
+}

src/scss/colours/primary/_teal.scss

@@ -0,0 +1,13 @@
+:root {
+  --teal-50: #f0fdfa;
+  --teal-100: #ccfbf1;
+  --teal-200: #99f6e4;
+  --teal-300: #5eead4;
+  --teal-400: #2dd4bf;
+  --teal-500: #14b8a6;
+  --teal-600: #0d9488;
+  --teal-700: #0f766e;
+  --teal-800: #115e59;
+  --teal-900: #134e4a;
+  --teal-950: #042f2e;
+}

src/scss/colours/primary/_violet.scss

@@ -0,0 +1,13 @@
+:root {
+  --violet-50: #f5f3ff;
+  --violet-100: #ede9fe;
+  --violet-200: #ddd6fe;
+  --violet-300: #c4b5fd;
+  --violet-400: #a78bfa;
+  --violet-500: #8b5cf6;
+  --violet-600: #7c3aed;
+  --violet-700: #6d28d9;
+  --violet-800: #5b21b6;
+  --violet-900: #4c1d95;
+  --violet-950: #2e1065;
+}

src/scss/colours/primary/_yellow.scss

@@ -0,0 +1,13 @@
+:root {
+  --yellow-50: #fefce8;
+  --yellow-100: #fef9c3;
+  --yellow-200: #fef08a;
+  --yellow-300: #fde047;
+  --yellow-400: #facc15;
+  --yellow-500: #eab308;
+  --yellow-600: #ca8a04;
+  --yellow-700: #a16207;
+  --yellow-800: #854d0e;
+  --yellow-900: #713f12;
+  --yellow-950: #422006;
+}

src/scss/colours/primary/_zinc.scss

@@ -0,0 +1,13 @@
+:root {
+  --zinc-50: #fafafa;
+  --zinc-100: #f4f4f5;
+  --zinc-200: #e4e4e7;
+  --zinc-300: #d4d4d8;
+  --zinc-400: #a1a1aa;
+  --zinc-500: #71717a;
+  --zinc-600: #52525b;
+  --zinc-700: #3f3f46;
+  --zinc-800: #27272a;
+  --zinc-900: #18181b;
+  --zinc-950: #09090b;
+}