Set colours as css vars directly. Set all colours in oklch().

.stylelintrc.yaml

@@ -1,9 +1,11 @@
 extends:
   - stylelint-config-standard-scss
 rules:
+  alpha-value-notation: number
   block-no-empty: null
   declaration-block-no-redundant-longhand-properties: null
   declaration-empty-line-before: null
+  hue-degree-notation: number
   no-descending-specificity: null
   selector-class-pattern:
     - "^[a-z0-9\\-]+$"

assets/sass/_colors.scss

@@ -1,95 +1,96 @@
-@use "sass:color";
-
 // stylelint-disable scss/dollar-variable-colon-space-after, scss/dollar-variable-empty-line-before
 
-// Base colors.
-$black:                 #000;
-$nearblack:             color.adjust($black, $lightness: 20%); // #333
-$grey-dark:             color.adjust($black, $lightness: 40%); // #666
-$grey:                  color.adjust($black, $lightness: 60%); // #999
-$grey-light:            color.adjust($black, $lightness: 80%); // #ccc
-$grey-extra-light:      color.adjust($black, $lightness: 93.33%); // #eee
-$nearwhite:             color.adjust($black, $lightness: 97%); // #f7f7f7
-$white:                 #fff;
-
-$blue:                  #0072b9;
-$red:                   #c00;
-$green:                 #43a808;
-$yellow:                #fd0;
-
-$brand:                 $nearblack;
-$brand-alt:             $grey;
-$brand-light:           $grey-light;
-$brand-dark:            $grey-dark;
-
-// Colour map.
-$colors: (
-  brand:                  $brand,
-  brand-alt:              $brand-alt,
-  brand-light:            $brand-light,
-  brand-dark:             $brand-dark,
-
-  text:                   $black,
-  text-bg:                $white,
-  text-meta:              $grey-dark,
-
-  link:                   $brand,
-  link-visited:           $brand,
-  link-hover:             $brand-alt,
-  link-active:            $red,
-
-  link-inverted:          $white,
-  link-visited-inverted:  $white,
-  link-hover-inverted:    $white,
-  link-active-inverted:   $red,
-
-  border:                 $brand,
-  border-light:           $brand-light,
-  border-dark:            $brand-dark,
-
-  autocomplete:           $black,
-  autocomplete-bg:        $white,
-  autocomplete-select:    $white,
-  autocomplete-select-bg: $blue,
-
-  body-bg:                $white,
-  header-bg:              $white,
-  footer-bg:              $white,
-  backdrop:               $grey-extra-light,
-
-  mobile-menu:            $brand,
-  mobile-menu-cover:      rgba($black, .2),
-
-  button:                 $brand,
-  button-hover:           $brand-dark,
-  button-text:            $white,
-  button-text-hover:      $white,
-  button-disabled:        $grey,
-
-  mark-highlight:         $red,
-  mark-bg:                $yellow,
-
-  menu-active:            $black,
-
-  preview-bg:             color.adjust($yellow, $lightness: 43%),
-
-  row-header:             transparent,
-  row-odd:                $nearwhite,
-  row-even:               transparent,
-
-  status:                 $green,
-  status-bg:              color.adjust($green, $lightness: 62%),
-  warning:                $black,
-  warning-bg:             color.adjust($yellow, $lightness: 45%),
-  warning-border:         $yellow,
-  error:                  $red,
-  error-bg:               color.adjust($red, $lightness: 57%),
-
-  watermark:              $grey-extra-light,
-
-  headings:               $nearblack,
-
-  code:                   $nearblack,
-
-  highlight:              $brand-alt,
-);
+:root {
+  // Base colours.
+  --color-black:                  oklch(0% 0 0);
+  --color-nearblack:              oklch(32% 0 0);
+  --color-grey-dark:              oklch(51% 0 0);
+  --color-grey:                   oklch(68% 0 0);
+  --color-grey-light:             oklch(84% 0 0);
+  --color-grey-extra-light:       oklch(95% 0 0);
+  --color-nearwhite:              oklch(98% 0 0);
+  --color-white:                  oklch(100% 0 0);
+  --color-red:                    oklch(53% 0.3 29);
+  --color-yellow:                 oklch(90% 0.3 99);
+  --color-green:                  oklch(64% 0.3 138);
+  --color-blue:                   oklch(54% 0.3 247);
+
+  // Transparent colours.
+  --color-black-60:               oklch(0% 0 0 / 0.6);
+  --color-black-40:               oklch(0% 0 0 / 0.4);
+  --color-black-20:               oklch(0% 0 0 / 0.2);
+  --color-black-10:               oklch(0% 0 0 / 0.1);
+  --color-white-20:               oklch(100% 0 0 / 0.2);
+  --color-white-10:               oklch(100% 0 0 / 0.1);
+
+
+  // Brand colours.
+  --color-brand:                  var(--color-nearblack);
+  --color-brand-alt:              var(--color-grey);
+  --color-brand-light:            var(--color-grey-light);
+  --color-brand-dark:             var(--color-grey-dark);
+
+  // Text colours.
+  --color-text:                   var(--color-black);
+  --color-text-bg:                var(--color-white);
+  --color-text-meta:              var(--color-grey-dark);
+  --color-headings:               var(--color-nearblack);
+  --color-code:                   var(--color-nearblack);
+
+  // Link colours.
+  --color-link:                   var(--color-brand);
+  --color-link-visited:           var(--color-brand);
+  --color-link-hover:             var(--color-brand-alt);
+  --color-link-active:            var(--color-red);
+  --color-link-inverted:          var(--color-white);
+  --color-link-visited-inverted:  var(--color-white);
+  --color-link-hover-inverted:    var(--color-white);
+  --color-link-active-inverted:   var(--color-red);
+
+  // Border colours.
+  --color-border:                 var(--color-brand);
+  --color-border-light:           var(--color-brand-light);
+  --color-border-dark:            var(--color-brand-dark);
+
+  // Background colours.
+  --color-header-bg:              var(--color-white);
+  --color-body-bg:                var(--color-white);
+  --color-footer-bg:              var(--color-white);
+  --color-backdrop:               var(--color-grey-extra-light);
+
+  // Mobil menu colours.
+  --color-mobile-menu:            var(--color-brand);
+  --color-mobile-menu-cover:      var(--color-black-20);
+
+  // Button colours.
+  --color-button:                 var(--color-brand);
+  --color-button-hover:           var(--color-brand-dark);
+  --color-button-text:            var(--color-white);
+  --color-button-text-hover:      var(--color-white);
+  --color-button-disabled:        var(--color-grey);
+
+  // Row (e.g. in table) colours.
+  --color-row-header:             transparent;
+  --color-row-odd:                var(--color-nearwhite);
+  --color-row-even:               transparent;
+
+  // Status colours.
+  --color-info:                   var(--color-blue);
+  --color-info-bg:                oklch(from var(--color-blue) 100% 0.01 h);
+  --color-status:                 var(--color-green);
+  --color-status-bg:              oklch(from var(--color-green) 100% 0.05 h);
+  --color-warning:                var(--color-black);
+  --color-warning-bg:             oklch(from var(--color-yellow) 100% 0.05 h);
+  --color-warning-border:         var(--color-yellow);
+  --color-error:                  var(--color-red);
+  --color-error-bg:               oklch(from var(--color-red) 100% 0.05 h);
+
+  // Highlight colours.
+  --color-highlight:              var(--color-brand-alt);
+  --color-mark-highlight:         var(--color-red);
+  --color-mark-bg:                var(--color-yellow);
+
+  // Misc colours.
+  --color-watermark:              var(--color-grey-extra-light);
+  --color-debug-color:            var(--color-grey-extra-light);
+}

assets/sass/_custom.scss

@@ -1 +1 @@
-// Site custom styles. This file loads last.
+// Site custom styles and colours. This file loads last.

assets/sass/_extra.scss

@@ -1,6 +1,6 @@
 @use "variables";
 
-// Add and override variables. This file loads last during init.
+// Override site sass variables. This file loads first.
 
 // Overrride a variable like this.
 // variables.$font-size: variables.$font-size-fluid;

assets/sass/_root.scss

@@ -1,12 +1,8 @@
-@use "colors";
 @use "variables";
 
 :root {
   // Convert sass variables to css4 variables.
-  // Use like this: var(--color-brand).
-  @each $name, $color in colors.$colors {
-    --color-#{$name}: #{$color};
-  }
+  // Use like this: var(--gutters).
 
   @each $name, $size in variables.$font-size {
     --fs-#{$name}: #{$size};

assets/sass/_variables.scss

@@ -1,5 +1,3 @@
-@use "colors";
-
 // stylelint-disable scss/dollar-variable-colon-space-after, value-keyword-case
 // stylelint-disable scss/double-slash-comment-empty-line-before
 
@@ -177,4 +175,3 @@ $include-rtl: false;
 
 // Show horizontal grid to help with debugging typography.
 $debug: false;
-$debug-color: colors.$grey-extra-light;

assets/sass/components/messages/_messages.scss

@@ -7,6 +7,12 @@
   outline-style: solid;
   width: 95%;
 
+  &.info {
+    background-color: var(--color-info-bg);
+    color: var(--color-info);
+    outline-color: var(--color-info);
+  }
+
   &.status {
     background-color: var(--color-status-bg);
     color: var(--color-status);

assets/sass/mixins/debug/_debug.scss

@@ -7,7 +7,7 @@
 
     position: relative;
     // stylelint-disable-next-line  max-line-length
-    background-image: repeating-linear-gradient(180deg, variables.$debug-color, variables.$debug-color 1px, transparent 1px, transparent $grid-height);
+    background-image: repeating-linear-gradient(180deg, var(--color-debug-color), var(--color-debug-color) 1px, transparent 1px, transparent $grid-height);
 
     &::after {
       content: '';
@@ -16,7 +16,7 @@
       left: 0;
       height: 1px;
       width: 100%;
-      background-color: variables.$debug-color;
+      background-color: var(--color-debug-color);
     }
   }
 }

assets/sass/styles.scss

@@ -8,6 +8,10 @@
 
 @use 'root';
 
+// Theme colours.
+
+@use 'colors';
+
 // Ensure fonts get loaded early to minimize front-end performance impact.
 
 @use 'fonts';