implement workaround for sass-export npm

ui/package.json

@@ -13,7 +13,7 @@
         "reset": "rm -rf node_modules/ && npm install",
         "static-assets-rename": "node ./scripts/static-assets-rename",
         "static-assets-move": "node ./scripts/static-assets-move",
-        "sass-export-colors": "sass-export src/css/base/_colors.scss -o public/exported-colors.json",
+        "sass-export-colors": "sass-export src/css/base/colors-to-json.scss -o public/exported-colors.json",
         "prestart": "rm -rf .parcel-cache",
         "start:parcel": "parcel watch src/javascript/index.ts --dist-dir public --hmr-port 1234 --target app",
         "start": "npm install && npm run sass-export-colors && npm run start:parcel",

ui/src/css/base/_colors.scss

@@ -2,31 +2,31 @@
 ----------------------------------------------------------------------------
 Color settings.
 
-1. Use JSDoc comments to identify all the color 'sections'.
-2. The 'sass-export' Node package can then correctly sub-divide all the colors into appropriate groups for Storybook.
+1. Copy the CSS Custom properties below, along with their JSDoc comments, into 'base/colors-to-json.scss'.
+2. The 'sass-export' Node package then correctly exports all the colors as JSON for consumption by Storybook.
+
+TODO:
+- Write custom Node script to convert these values into JSON without the manual copy/paste step into a Sass file.
 ----------------------------------------------------------------------------
 */
 
 /**
  * @sass-export-section="main theme colours"
  */
-
-$color-brand: hsl(var(--color-brand)) !default;
-$color-text: hsl(var(--color-text)) !default;
-$color-background: hsl(var(--color-background)) !default;
+$color-brand: hsl(var(--color-brand));
+$color-text: hsl(var(--color-text));
+$color-background: hsl(var(--color-background));
 
 /**
  * @sass-export-section="neutral colours"
  */
-
-$color-neutral-900: hsl(var(--color-neutral-900)) !default;
-$color-neutral-100: hsl(var(--color-neutral-100)) !default;
+$color-neutral-900: hsl(var(--color-neutral-900));
+$color-neutral-100: hsl(var(--color-neutral-100));
 
 /**
  * @sass-export-section="other accent colours"
  */
-
-$color-success: hsl(var(--color-accent-positive)) !default;
-$color-error: hsl(var(--color-accent-negative)) !default;
-$color-notify: hsl(var(--color-accent-neutral)) !default;
-$color-focus: hsl(var(--color-focus)) !default;
+$color-success: hsl(var(--color-accent-positive));
+$color-error: hsl(var(--color-accent-negative));
+$color-notify: hsl(var(--color-accent-neutral));
+$color-focus: hsl(var(--color-focus));

ui/src/css/base/colors-to-json.scss

@@ -0,0 +1,33 @@
+/*
+----------------------------------------------------------------------------
+Color settings.
+
+1. Copied from the CSS Custom properties in 'base/colors.css', ans converted to Sass variables.
+2. The 'sass-export' Node package then correctly exports all the colors as JSON for consumption by Storybook.
+3. This file is NOT imported so is NOT part of the Parcel build.
+
+TODO:
+- Write custom Node script to convert CSS into JSON without the manual copy/paste step into this Sass file.
+----------------------------------------------------------------------------
+*/
+
+/**
+ * @sass-export-section="main theme colours"
+ */
+$color-brand: hsl(var(--color-brand));
+$color-text: hsl(var(--color-text));
+$color-background: hsl(var(--color-background));
+
+/**
+ * @sass-export-section="neutral colours"
+ */
+$color-neutral-900: hsl(var(--color-neutral-900));
+$color-neutral-100: hsl(var(--color-neutral-100));
+
+/**
+ * @sass-export-section="other accent colours"
+ */
+$color-success: hsl(var(--color-accent-positive));
+$color-error: hsl(var(--color-accent-negative));
+$color-notify: hsl(var(--color-accent-neutral));
+$color-focus: hsl(var(--color-focus));

ui/stories/2. Design System/Colours/Colours.mdx

@@ -5,7 +5,7 @@ import * as Colours from './Colours.stories';
 
 # Colour palette / swatch
 
-The default Sass colour variables get automatically exported to a JSON file when Parcel server is started with `npm start`.
+The default colour CSS custom properties get automatically exported to a JSON file when Parcel server is started with `npm start`.
 
 <Canvas of={Colours.Colours} />
 
@@ -42,4 +42,5 @@ export const Colours = (args, {loaded}) => `...`
 ```
 
 ## TODO
+- Remove dependency on `sass-export` NPM script to generate JSON colours.
 - Migrate to CSS Color 4 `oklch()`?

ui/stories/2. Design System/Colours/Colours.stories.js

@@ -65,7 +65,7 @@ ${
                                         style="background: ${color.compiledValue}">
                                     </span>
                                     <span>
-                                        ${color.name}
+                                        ${color.value.replace(/hsl\(/g, '').slice(0, -1)}
                                     </span>
                                     <span></span>
                                 </li>