replace sass colors with css custom props

basher · Nov 11, 2024 · 684eef9 · 684eef9
1 parent ccc5f75
commit 684eef9
Show file tree

Hide file tree

Showing 25 changed files with 102 additions and 104 deletions.
diff --git a/ui/src/css/_root-css-vars.scss b/ui/src/css/_root-css-vars.scss
@@ -7,14 +7,14 @@ CSS custom properties (e.g. from "design tokens") for dynamic theming.
     // Colors. Values are specified as a space-separated list of HSL values so they can be used in the CSS 'hsl()' function.
     // e.g. color: hsl(var(--color-brand) / 50%);
     --color-brand: 270 50% 40%; // rebeccapurple
-    --color-text: 0 0% 20%;
-    --color-background: 0 0% 100%;
+    --color-neutral-100: 0 0% 100%;
+    --color-neutral-200: 0 0% 95%;
+    --color-neutral-700: 0 0% 20%;
     --color-neutral-900: 0 0% 0%;
-    --color-neutral-100: 0 0% 95%;
     --color-accent-positive: 116 44% 60%;
     --color-accent-negative: 358 75% 39%;
     --color-accent-neutral: 51 100% 45%;
-    --color-focus: 193 100% 45%;
+    --color-focused: 193 100% 45%;
 
     // Typography.
     --type-font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
@@ -49,9 +49,9 @@ CSS custom properties (e.g. from "design tokens") for dynamic theming.
 @media (prefers-color-scheme: dark) {
     :root {
         --color-brand: 270 50% 50%;
-        --color-text: 0 0% 95%;
-        --color-background: 0 0% 13%;
+        --color-neutral-100: 0 0% 13%;
+        --color-neutral-200: 0 0% 95%;
+        --color-neutral-700: 0 0% 95%;
         --color-neutral-900: 0 0% 13%;
-        --color-neutral-100: 0 0% 95%;
     }
 }
diff --git a/ui/src/css/base/_colors.scss b/ui/src/css/base/_colors.scss
@@ -2,31 +2,33 @@
 ----------------------------------------------------------------------------
 Color settings.
 
-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.
+1. Copy the CSS custom properties inside the ':root {}' ruleset, along with their JSDoc comments, into 'base/colors-to-json.scss'.
+2. Replace '--' with '$'.
+3. 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.
 ----------------------------------------------------------------------------
 */
+:root {
+    /**
+    * @sass-export-section="main theme colours"
+    */
+    --color-primary: hsl(var(--color-brand));
 
-/**
- * @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-background: hsl(var(--color-neutral-100));
+    --color-text: hsl(var(--color-neutral-700));
+    --color-neutral-light: hsl(var(--color-neutral-200));
+    --color-neutral-dark: hsl(var(--color-neutral-900));
 
-/**
- * @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));
+    /**
+    * @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-focused));
+}
diff --git a/ui/src/css/base/_config.scss b/ui/src/css/base/_config.scss
@@ -19,7 +19,7 @@ Config settings.
         - Uses transparent outline so high contrast mode works.
         - See https://css-tricks.com/the-focus-visible-trick/.
     */
-    --focus-shadow: 0 0 0 var(--border-width-l) #{$color-focus};
+    --focus-shadow: 0 0 0 var(--border-width-l) var(--color-focus);
     --focus-outline: var(--border-width-l) solid transparent;
 
     /* :hover and :active */

diff --git a/ui/src/css/base/_type.scss b/ui/src/css/base/_type.scss
@@ -56,6 +56,3 @@ Font-face rules.
     /* Max line-length (aka measure) to improve readability of editorial content */
     --type-max-line-length: 65ch;
 }
-
-/* TODO - Base font settings. */
-$base-color: $color-text !default;
diff --git a/ui/src/css/base/colors-to-json.scss b/ui/src/css/base/colors-to-json.scss
@@ -2,32 +2,31 @@
 ----------------------------------------------------------------------------
 Color settings.
 
-1. Copied from the CSS Custom properties in 'base/colors.css', ans converted to Sass variables.
+1. Copied from the CSS Custom properties in 'base/colors.css', and 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.
+3. This file is NOT imported and 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="main theme colours"
+*/
+$color-primary: hsl(var(--color-brand));
 
 /**
- * @sass-export-section="neutral colours"
- */
-$color-neutral-900: hsl(var(--color-neutral-900));
-$color-neutral-100: hsl(var(--color-neutral-100));
+* @sass-export-section="neutral colours"
+*/
+$color-background: hsl(var(--color-neutral-100));
+$color-text: hsl(var(--color-neutral-700));
+$color-neutral-light: hsl(var(--color-neutral-200));
+$color-neutral-dark: hsl(var(--color-neutral-900));
 
 /**
- * @sass-export-section="other accent colours"
- */
+* @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));
+$color-focus: hsl(var(--color-focused));
diff --git a/ui/src/css/components/_ajax.scss b/ui/src/css/components/_ajax.scss
@@ -7,6 +7,6 @@ Dependencies.
 
 .ajax {
     &__error {
-        color: $color-error;
+        color: var(--color-error);
     }
 }
diff --git a/ui/src/css/components/_banner.scss b/ui/src/css/components/_banner.scss
@@ -22,7 +22,7 @@ Dependencies.
     }
 
     &__content {
-        color: $color-text;
+        color: var(--color-text);
     }
 
     &--fullwidth {
@@ -44,7 +44,7 @@ Dependencies.
             .banner__content {
                 /* stylelint-disable-next-line max-nesting-depth */
                 @media (prefers-color-scheme: dark) {
-                    --color-text: 0 0% 20%;
+                    --color-neutral-700: 0 0% 20%;
                 }
 
                 // Example, so text is legible above image.
@@ -74,7 +74,7 @@ Dependencies.
             @media (width > 48em) {
                 /* stylelint-disable-next-line max-nesting-depth */
                 @media (prefers-color-scheme: dark) {
-                    --color-text: 0 0% 20%;
+                    --color-neutral-700: 0 0% 20%;
                 }
 
                 background: none;

diff --git a/ui/src/css/components/_button.scss b/ui/src/css/components/_button.scss
@@ -47,19 +47,19 @@ Dependencies.
 
     // Apply colours to button variants.
     &--primary {
-        background-color: $color-brand;
-        color: $color-neutral-100;
+        background-color: var(--color-primary);
+        color: var(--color-neutral-light);
 
         &[class*='text'] {
-            border-color: $color-brand;
+            border-color: var(--color-primary);
         }
     }
 
     &--secondary {
-        color: $color-brand;
+        color: var(--color-primary);
 
         &[class*='text'] {
-            border-color: $color-brand;
+            border-color: var(--color-primary);
         }
 
         /* stylelint-disable-next-line order/order */
@@ -69,24 +69,24 @@ Dependencies.
     }
 
     &--positive {
-        background-color: $color-success;
+        background-color: var(--color-success);
 
         &[class*='text'] {
-            border-color: $color-success;
+            border-color: var(--color-success);
         }
 
         /* stylelint-disable-next-line order/order */
         @media (prefers-color-scheme: dark) {
-            color: $color-neutral-900;
+            color: var(--color-neutral-dark);
         }
     }
 
     &--negative {
-        background-color: $color-error;
-        color: $color-neutral-100;
+        background-color: var(--color-error);
+        color: var(--color-neutral-light);
 
         &[class*='text'] {
-            border-color: $color-error;
+            border-color: var(--color-error);
         }
     }
 

diff --git a/ui/src/css/components/_nav.scss b/ui/src/css/components/_nav.scss
@@ -22,7 +22,7 @@ Dependencies.
     }
 
     [aria-current] {
-        color: $color-brand;
+        color: var(--color-primary);
         font-weight: bold;
     }
 
@@ -38,7 +38,7 @@ Dependencies.
     }
 
     .nav__list--dropdown {
-        background-color: $color-background;
+        background-color: var(--color-background);
         border: var(--border-width-s) solid;
         flex-direction: column;
         inset-block-start: 100%;
@@ -86,7 +86,7 @@ Dependencies.
         // Using <webui-disclosure> custom element.
         webui-disclosure:defined {
             .nav__list {
-                background-color: $color-background;
+                background-color: var(--color-background);
                 border: var(--border-width-s) solid;
                 inset-block-start: 100%;
                 padding: var(--gutter-m);

diff --git a/ui/src/css/components/_skin.scss b/ui/src/css/components/_skin.scss
@@ -26,8 +26,8 @@ Dependencies.
         }
 
         &-2 {
-            background-color: $color-brand;
-            color: $color-neutral-100;
+            background-color: var(--color-primary);
+            color: var(--color-neutral-light);
             padding: var(--gutter-m);
         }
 

diff --git a/ui/src/css/components/_skiplinks.scss b/ui/src/css/components/_skiplinks.scss
@@ -9,8 +9,8 @@ Dependencies.
     position: absolute;
 
     &__link {
-        background-color: $color-brand;
-        color: $color-neutral-100;
+        background-color: var(--color-primary);
+        color: var(--color-neutral-light);
         display: inline-block;
         left: var(--gutter-m);
         min-inline-size: 10vw;

diff --git a/ui/src/css/form/_checkbox.scss b/ui/src/css/form/_checkbox.scss
@@ -15,7 +15,7 @@ Dependencies.
         inline-size: 1.5em;
 
         &:invalid:required:focus {
-            box-shadow: 0 0 0 var(--border-width-m) $color-error;
+            box-shadow: 0 0 0 var(--border-width-m) --color-error;
         }
     }
 }
diff --git a/ui/src/css/form/_form.scss b/ui/src/css/form/_form.scss
@@ -25,7 +25,7 @@ Dependencies.
 
                 /* stylelint-disable-next-line max-nesting-depth, no-descending-specificity */
                 &::after {
-                    color: $color-error;
+                    color: var(--color-error);
                     content: '!';
                     display: block;
                     font-size: 1em;
@@ -41,7 +41,7 @@ Dependencies.
             :is(.label, .checkbox__label, .radio__label) {
                 /* stylelint-disable-next-line max-nesting-depth */
                 &::after {
-                    color: $color-success;
+                    color: var(--color-success);
                     content: '✓';
                 }
             }
@@ -50,7 +50,7 @@ Dependencies.
 
     // Errors rendered directly in HTML, or via JavaScript.
     &__error {
-        color: $color-error;
+        color: var(--color-error);
     }
 
     &__field--has-error {
@@ -83,20 +83,20 @@ Dependencies.
     // Native HTML5 validation.
     &:valid:required {
         background-color: hsl(var(--color-accent-positive) / 10%);
-        border-color: $color-success;
+        border-color: var(--color-success);
         border-width: var(--border-width-m);
     }
 
     &:user-invalid:required {
         background-color: hsl(var(--color-accent-negative) / 10%);
-        border-color: $color-error;
+        border-color: var(--color-error);
         border-width: var(--border-width-m);
     }
 
     // ARIA.
     &[aria-invalid='true'] {
         background-color: hsl(var(--color-accent-negative) / 10%);
-        border-color: $color-error;
+        border-color: var(--color-error);
         border-width: var(--border-width-m);
     }
 }

diff --git a/ui/src/css/form/_radio.scss b/ui/src/css/form/_radio.scss
@@ -15,7 +15,7 @@ Dependencies.
         inline-size: 1.5em;
 
         &:invalid:required:focus {
-            box-shadow: 0 0 0 var(--border-width-m) $color-error;
+            box-shadow: 0 0 0 var(--border-width-m) --color-error;
         }
     }
 }
diff --git a/ui/src/css/form/_select.scss b/ui/src/css/form/_select.scss
@@ -8,7 +8,7 @@ Basic component styles are in "form.css".
 .select {
     @media (prefers-color-scheme: dark) {
         option {
-            color: $color-neutral-900;
+            color: var(--color-neutral-dark);
         }
     }
 }
diff --git a/ui/src/css/global/_reset.scss b/ui/src/css/global/_reset.scss
@@ -18,7 +18,7 @@ Dependencies.
 @use '../base' as *;
 
 html {
-    accent-color: $color-brand;
+    accent-color: var(--color-primary);
     color-scheme: light dark;
     /* stylelint-disable-next-line property-no-unknown */
     interpolate-size: allow-keywords;
@@ -43,8 +43,8 @@ html {
     @media (prefers-reduced-motion: no-preference) {
         scroll-behavior: smooth;
     }
-    background-color: $color-background;
-    color: $base-color;
+    background-color: var(--color-background);
+    color: var(--color-text);
     min-block-size: 100vh; // 100dvb might have performance implications.
 }