From 4e154ffee891e22178a22e20bbe52b23a40cda03 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sat, 22 Jul 2023 13:56:02 +0100
Subject: [PATCH] couple primary colour scales

---
 .storybook/preview.ts                        |  5 +++
 src/docs/styles/colours/primary.stories.mdx  | 41 ++++++++++++++++++++
 src/docs/styles/colours/thematic.stories.mdx | 15 +------
 src/scss/colours/primary/_blue.scss          | 13 +++++++
 src/scss/colours/primary/_grey.scss          | 13 +++++++
 src/scss/colours/primary/_red.scss           | 13 +++++++
 6 files changed, 86 insertions(+), 14 deletions(-)
 create mode 100644 src/docs/styles/colours/primary.stories.mdx
 create mode 100644 src/scss/colours/primary/_blue.scss
 create mode 100644 src/scss/colours/primary/_grey.scss
 create mode 100644 src/scss/colours/primary/_red.scss

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index adf18fe4..869a9e5b 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -66,6 +66,11 @@ export const parameters = {
             '*',
           ],
           'Borders',
+          'Colours', [
+            'Primary',
+            'Thematic',
+            '*',
+          ]
         ],
         'Actions',
         ['Intro', '*'],
diff --git a/src/docs/styles/colours/primary.stories.mdx b/src/docs/styles/colours/primary.stories.mdx
new file mode 100644
index 00000000..7585a530
--- /dev/null
+++ b/src/docs/styles/colours/primary.stories.mdx
@@ -0,0 +1,41 @@
+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/primary/\_grey.scss?raw';
+
+{/* @ts-ignore */}
+import redScheme from '$lib/scss/colours/primary/\_red.scss?raw';
+
+{/* @ts-ignore */}
+import blueScheme from '$lib/scss/colours/primary/\_blue.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)
+
+# Primary colours
+
+<CopyColourTable
+  title="Grey"
+  header={['Colour', 'CSS variable']}
+  body={extractCssColourVariables(greyScheme)}
+  included
+  partial="primary/_grey.scss"
+/>
+
+<CopyColourTable
+  title="Red"
+  header={['Colour', 'CSS variable']}
+  body={extractCssColourVariables(redScheme)}
+  partial="primary/_red.scss"
+/>
+
+<CopyColourTable
+  title="Blue"
+  header={['Colour', 'CSS variable']}
+  body={extractCssColourVariables(blueScheme)}
+  partial="primary/_blue.scss"
+/>
diff --git a/src/docs/styles/colours/thematic.stories.mdx b/src/docs/styles/colours/thematic.stories.mdx
index f95aa9ec..3551bc41 100644
--- a/src/docs/styles/colours/thematic.stories.mdx
+++ b/src/docs/styles/colours/thematic.stories.mdx
@@ -3,9 +3,6 @@ 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';
 
@@ -16,17 +13,7 @@ import nordScheme from '$lib/scss/colours/thematic/\_nord.scss?raw';
 
 ![](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)}
-  included
-  partial="thematic/_grey.scss"
-/>
+# Thematic colours
 
 <CopyColourTable
   title="Thomson Reuters"
diff --git a/src/scss/colours/primary/_blue.scss b/src/scss/colours/primary/_blue.scss
new file mode 100644
index 00000000..9743d3fc
--- /dev/null
+++ b/src/scss/colours/primary/_blue.scss
@@ -0,0 +1,13 @@
+:root {
+  --blue-50: #eff6ff;
+  --blue-100: #dbeafe;
+  --blue-200: #bfdbfe;
+  --blue-300: #93c5fd;
+  --blue-400: #60a5fa;
+  --blue-500: #3b82f6;
+  --blue-600: #2563eb;
+  --blue-700: #1d4ed8;
+  --blue-800: #1e40af;
+  --blue-900: #1e3a8a;
+  --blue-950: #172554;
+}
diff --git a/src/scss/colours/primary/_grey.scss b/src/scss/colours/primary/_grey.scss
new file mode 100644
index 00000000..91ed365b
--- /dev/null
+++ b/src/scss/colours/primary/_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;
+}
diff --git a/src/scss/colours/primary/_red.scss b/src/scss/colours/primary/_red.scss
new file mode 100644
index 00000000..36185208
--- /dev/null
+++ b/src/scss/colours/primary/_red.scss
@@ -0,0 +1,13 @@
+:root {
+  --red-50: #fef2f2;
+  --red-100: #fee2e2;
+  --red-200: #fecaca;
+  --red-300: #fca5a5;
+  --red-400: #f87171;
+  --red-500: #ef4444;
+  --red-600: #dc2626;
+  --red-700: #b91c1c;
+  --red-800: #991b1b;
+  --red-900: #7f1d1d;
+  --red-950: #450a0a;
+}