Refactor all stylesheets to use CSS variables

Co-authored-by: Scott Cranfill <scott@scottcranfill.com>

client/scss/components/_bulk_actions.scss

@@ -85,7 +85,7 @@
     }
 
     .num-objects-in-listing {
-      color: $color-teal-light;
+      color: theme('colors.secondary.100');
       background-color: transparent;
       border: 0;
       font-family: $font-sans;

client/scss/components/_button-select.scss

@@ -4,13 +4,13 @@
     width: 100%;
     margin-bottom: 10px;
 
-    background-color: #fff;
+    background-color: $color-white;
     border-color: $color-teal;
-    color: #262626;
+    color: $color-grey-1;
 
     &--selected {
       background-color: $color-teal;
-      color: #fff;
+      color: $color-white;
     }
   }
 }

client/scss/components/_button.scss

@@ -46,7 +46,7 @@
     &:hover {
       color: $color-white;
       border-color: transparent;
-      background-color: $color-button-yes-hover;
+      background-color: $color-button-yes;
     }
   }
 
@@ -63,7 +63,7 @@
     &:hover {
       color: $color-white;
       border-color: transparent;
-      background-color: $color-button-warning-hover;
+      background-color: $color-button-warning;
     }
   }
 
@@ -81,7 +81,7 @@
     &:hover {
       color: $color-white;
       border-color: transparent;
-      background-color: $color-button-no-hover;
+      background-color: $color-button-no;
     }
   }
 
@@ -99,7 +99,7 @@
       line-height: 1.85em;
       height: 100%;
       text-align: center;
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: theme('colors.black-20');
       display: block;
       // Remove once we drop support for Safari 14.
       // stylelint-disable-next-line property-disallowed-list
@@ -112,7 +112,7 @@
     }
 
     .icon-wrapper {
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: theme('colors.black-20');
       display: flex;
       align-items: center;
       justify-content: center;
@@ -145,7 +145,7 @@
     }
 
     &.button-secondary {
-      border: 1px solid rgba(0, 0, 0, 0.2);
+      border: 1px solid theme('colors.black-20');
     }
   }
 
@@ -422,7 +422,7 @@ button.button.bicolor .icon-wrapper {
   &:hover {
     color: $color-white;
     border-color: transparent;
-    background-color: $color-button-yes-hover;
+    background-color: $color-button-yes;
   }
 }
 
@@ -440,7 +440,7 @@ button.button.bicolor .icon-wrapper {
   &:hover {
     color: $color-white;
     border-color: transparent;
-    background-color: $color-button-no-hover;
+    background-color: $color-button-no;
   }
 }
 
@@ -457,7 +457,7 @@ button.button.bicolor .icon-wrapper {
     line-height: 1.85em;
     height: 100%;
     text-align: center;
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: theme('colors.black-20');
     display: block;
   }
 }
@@ -512,7 +512,7 @@ button {
     background-color: $color-white;
     padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls
     margin-bottom: 1em;
-    border: 1px solid color.adjust($color-grey-4, $lightness: 3%); // really trying to avoid creating more greys, but this one is better than grey 4 or 5
+    border: 1px solid theme('colors.grey.100');
   }
 
   &.moving {

client/scss/components/_dropdown.legacy.scss

@@ -39,7 +39,7 @@
 
     li {
       float: none;
-      border-color: rgba(255, 255, 255, 0.2);
+      border-color: theme('colors.white-15');
       border-style: solid;
       border-width: 1px 0 0;
       overflow: hidden;
@@ -72,7 +72,7 @@
       li button:focus {
         background-color: $color-black;
         forced-color-adjust: none;
-        border: 4px solid #0ff;
+        border: 4px solid currentColor;
         color: $color-white;
       }
     }
@@ -126,12 +126,12 @@
       inset-inline-end: 1em;
       font-weight: 600;
       font-size: 0.8em;
-      color: rgba(0, 0, 0, 0.3);
+      color: theme('colors.black-20');
     }
   }
 
   &.open ul {
-    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 3px 3px 0 theme('colors.black-20');
     opacity: 1;
     inset-inline-start: 0;
     display: block;
@@ -147,7 +147,7 @@
   }
 
   &.dropup ul {
-    box-shadow: 0 -3px 3px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 -3px 3px 0 theme('colors.black-20');
     top: auto;
     bottom: 100%;
 
@@ -162,7 +162,7 @@
     line-height: 2.8em;
     cursor: pointer;
     height: 100%;
-    border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
+    border-inline-start: 1px solid theme('colors.white-15');
     position: absolute;
     inset-inline-end: 0;
     padding: 0 0.5em;
@@ -299,7 +299,7 @@
     background-color: $color-white;
 
     li {
-      border-top: 1px solid rgba(0, 0, 0, 0.1);
+      border-top: 1px solid theme('colors.black-10');
     }
 
     a {
@@ -319,10 +319,6 @@
 
   .dropdown-toggle {
     background-color: $color-button-warning;
-
-    &:hover {
-      background-color: $color-button-warning-hover;
-    }
   }
 }
 

client/scss/components/_footer.scss

@@ -29,7 +29,7 @@
 
     &:first-child {
       margin-top: 0;
-      box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
+      box-shadow: 0 0 2px theme('colors.white-50');
     }
 
     &.footer__container--hidden {
@@ -57,7 +57,7 @@
   }
 
   &__emphasise-span-tags span {
-    color: $color-orange;
+    color: theme('colors.warning.100');
   }
 
   .actions {

client/scss/components/_forms.scss

@@ -122,11 +122,10 @@
 .error-message {
   font-size: 1em;
   font-weight: bold;
-  color: $color-text-error;
+  color: theme('colors.critical.200');
 
   @media (forced-colors: $media-forced-colours) {
     forced-color-adjust: none;
-    color: $color-text-error-forced-color;
   }
 
   // UI-Redesign: to be added via js and styled here
@@ -152,7 +151,7 @@ li.focused > .help {
 .required .field > label:after,
 label.required:after {
   content: '*';
-  color: $color-red;
+  color: theme('colors.critical.200');
   font-weight: bold;
   display: inline-block;
   margin-inline-start: 0.5em;
@@ -164,7 +163,7 @@ label.required:after {
 .error textarea,
 .error select,
 .error .tagit {
-  border-color: $color-red;
+  border-color: theme('colors.critical.200');
   background-color: $color-input-error-bg;
 }
 

client/scss/components/_header.scss

@@ -94,6 +94,7 @@
     background-color: $color-teal-darker;
 
     &:hover {
+      color: $color-white;
       background-color: $color-teal-dark;
     }
   }

client/scss/components/_help-block.scss

@@ -36,26 +36,26 @@
 }
 
 .help-info {
-  background-color: color.adjust($color-blue, $lightness: 30%);
+  background-color: theme('colors.info.50');
 
   .icon-help {
-    color: $color-blue;
+    color: theme('colors.info.100');
   }
 }
 
 .help-warning {
-  background-color: color.adjust($color-orange, $lightness: 30%);
+  background-color: theme('colors.warning.50');
 
   .icon-warning {
-    color: $color-orange;
+    color: theme('colors.warning.100');
   }
 }
 
 .help-critical {
-  background-color: color.adjust($color-red, $lightness: 40%);
+  background-color: theme('colors.critical.50');
 
   .icon-warning {
-    color: $color-red;
+    color: theme('colors.critical.200');
   }
 }
 

client/scss/components/_icons.scss

@@ -1,7 +1,7 @@
 @use 'sass:string';
 
 @font-face {
-  font-family: 'wagtail';
+  font-family: $font-wagtail-icons;
   src: url('../fonts/wagtail.woff') format('woff');
   font-weight: normal;
   font-style: normal;
@@ -15,11 +15,11 @@
 }
 
 .icon.teal {
-  color: $color-teal;
+  color: $color-teal-darker;
 }
 
 .icon.white {
-  color: #fff;
+  color: $color-white;
 }
 
 .icon:before,
@@ -163,5 +163,5 @@ svg.icon-spinner {
   margin-inline-end: 0.5em;
   width: 1.5em;
   height: 1.5em;
-  color: $color-red;
+  color: theme('colors.critical.200');
 }

client/scss/components/_listing.scss

@@ -60,7 +60,6 @@ ul.listing {
       position: relative;
 
       &.icon:after {
-        opacity: 0.5;
         inset-inline-end: 0;
       }
     }
@@ -90,16 +89,12 @@ ul.listing {
       }
 
       &:hover {
-        background-color: #fcfcfc;
+        background-color: theme('colors.grey.50');
       }
     }
 
     tr.selected {
-      background-color: #c8eae9;
-
-      &:hover {
-        background-color: #b5e3e2;
-      }
+      background-color: theme('colors.secondary.100');
     }
   }
 
@@ -245,12 +240,12 @@ ul.listing {
   }
 
   .button-secondary {
-    border-color: $color-grey-3;
+    border-color: $color-grey-4;
     background: $color-white;
 
     &.no:hover {
-      border-color: $color-button-no-hover;
-      background-color: $color-button-no-hover;
+      border-color: $color-button-no;
+      background-color: $color-button-no;
       color: $color-white;
     }
 
@@ -471,7 +466,7 @@ table.listing {
 
 .listing.full-width + .pagination {
   margin-top: 3em;
-  border-top: 1px dashed #d9d9d9;
+  border-top: 1px dashed theme('colors.grey.100');
   padding: 2em 50px 0;
 }
 
@@ -560,8 +555,6 @@ table.listing {
         }
 
         &:hover {
-          background-color: #fdfdfd;
-
           img {
             border-color: $color-teal;
           }

client/scss/components/_loading-mask.scss

@@ -17,7 +17,7 @@
       bottom: -5px;
       inset-inline-end: -5px;
       z-index: 1;
-      background-color: rgba(255, 255, 255, 0.5);
+      background-color: theme('colors.white-50');
     }
 
     &:after {

client/scss/components/_messages.capability.scss

@@ -1,6 +1,6 @@
 .capabilitymessage {
   display: block;
-  background-color: $color-red;
+  background-color: theme('colors.critical.200');
   color: $color-white;
   padding: 1em 2em;
   margin: 0;

client/scss/components/_messages.scss

@@ -37,15 +37,16 @@
   }
 
   .error {
-    background-color: $color-red-dark;
+    background-color: theme('colors.critical.200');
   }
 
   .warning {
-    background-color: $color-orange-dark;
+    color: $color-grey-1;
+    background-color: theme('colors.warning.100');
   }
 
   .success {
-    background-color: $color-green-dark;
+    background-color: theme('colors.positive.100');
   }
 
   .success .button:hover {
@@ -53,11 +54,12 @@
   }
 
   .button-secondary {
-    border-color: rgba(255, 255, 255, 0.5);
-    color: $color-white;
+    border-color: currentColor;
+    color: inherit;
 
     &:hover {
       border-color: transparent;
+      color: $color-white;
     }
   }
 

client/scss/components/_messages.status.scss

@@ -1,13 +1,13 @@
 .status-msg {
   &.success {
-    color: $color-green-dark;
+    color: theme('colors.positive.100');
   }
 
   &.failure {
-    color: $color-red-dark;
+    color: theme('colors.critical.200');
   }
 
   &.warning {
-    color: $color-orange-dark;
+    color: theme('colors.warning.100');
   }
 }

client/scss/components/_progressbar.scss

@@ -1,6 +1,6 @@
 .progress {
   border-radius: 1.2em;
-  background-color: $color-teal-dark;
+  background-color: $color-teal-darker;
   border: 1px solid $color-teal;
   opacity: 0;
 

client/scss/components/_skiplink.scss

@@ -10,7 +10,7 @@
   }
 
   &.button {
-    background: $color-green-darker;
-    border: $color-green-darker;
+    background: theme('colors.positive.100');
+    border: theme('colors.positive.100');
   }
 }

client/scss/components/_status-tag.scss

@@ -7,18 +7,18 @@
   // stylelint-disable-next-line property-disallowed-list
   text-transform: uppercase;
   padding: 0 0.5em;
-  border: 1px solid color.adjust($color-grey-2, $lightness: 30%);
-  color: color.adjust($color-grey-2, $lightness: 30%);
+  border: 1px solid theme('colors.grey.200');
+  color: theme('colors.grey.400');
   -webkit-font-smoothing: auto;
   line-height: 19px;
   font-size: 0.8em;
   margin: 0 0.5em 0.5em;
-  background: #fff url('#{$images-root}bg-dark-diag.svg');
+  background: $color-white url('#{$images-root}bg-dark-diag.svg');
 
   &.primary {
     color: $color-grey-2;
     border: 1px solid $color-grey-2;
-    background: #fff;
+    background: $color-white;
   }
 
   &.disabled {

client/scss/components/_tag.scss

@@ -45,7 +45,7 @@ a.tag:hover {
     }
 
     font-weight: 700;
-    color: #333;
+    color: $color-grey-1;
     font-size: 1.1em;
     display: block;
     padding: 0 0 0.8em;

client/scss/components/_tooltips.scss

@@ -32,10 +32,10 @@
 .tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
-  color: #fff;
+  color: $color-white;
   text-align: center;
   text-decoration: none;
-  background-color: #000;
+  background-color: $color-black;
   border-radius: 4px;
 }
 
@@ -51,21 +51,21 @@
   bottom: 0;
   inset-inline-start: 50%;
   margin-inline-start: -5px;
-  border-top-color: #000;
+  border-top-color: $color-black;
   border-width: 5px 5px 0;
 }
 
 .tooltip.top-left .tooltip-arrow {
   bottom: 0;
   inset-inline-start: 5px;
-  border-top-color: #000;
+  border-top-color: $color-black;
   border-width: 5px 5px 0;
 }
 
 .tooltip.top-right .tooltip-arrow {
   inset-inline-end: 5px;
   bottom: 0;
-  border-top-color: #000;
+  border-top-color: $color-black;
   border-width: 5px 5px 0;
 }
 
@@ -73,7 +73,7 @@
   top: 50%;
   inset-inline-start: 0;
   margin-top: -5px;
-  border-inline-end-color: #000;
+  border-inline-end-color: $color-black;
   border-width: 5px 5px 5px 0;
 }
 
@@ -81,7 +81,7 @@
   top: 50%;
   inset-inline-end: 0;
   margin-top: -5px;
-  border-inline-start-color: #000;
+  border-inline-start-color: $color-black;
   border-width: 5px 0 5px 5px;
 }
 
@@ -89,20 +89,20 @@
   top: 0;
   inset-inline-start: 50%;
   margin-inline-start: -5px;
-  border-bottom-color: #000;
+  border-bottom-color: $color-black;
   border-width: 0 5px 5px;
 }
 
 .tooltip.bottom-left .tooltip-arrow {
   top: 0;
   inset-inline-start: 5px;
-  border-bottom-color: #000;
+  border-bottom-color: $color-black;
   border-width: 0 5px 5px;
 }
 
 .tooltip.bottom-right .tooltip-arrow {
   top: 0;
   inset-inline-end: 5px;
-  border-bottom-color: #000;
+  border-bottom-color: $color-black;
   border-width: 0 5px 5px;
 }

client/scss/components/_workflow-tasks.scss

@@ -6,10 +6,10 @@
 
   &__task {
     display: inline-block;
-    background-color: #f8ffff;
-    border: 2px solid #7ebebe;
+    background-color: theme('colors.secondary.50');
+    border: 2px solid theme('colors.secondary.100');
     border-radius: 5px;
-    color: #007d7e;
+    color: $color-teal;
     box-sizing: border-box;
     width: $task-width;
     height: $task-height;

client/scss/components/_workflow-timeline.scss

@@ -66,11 +66,11 @@
   &__footer-link {
     @include transition(color 0.15s ease);
     font-size: theme('fontSize.14');
-    color: theme('colors.teal.200');
+    color: theme('colors.secondary.DEFAULT');
     text-decoration: none;
 
     &:hover {
-      color: theme('colors.teal.600');
+      color: theme('colors.secondary.600');
     }
   }
 }

client/scss/elements/_elements.scss

@@ -11,7 +11,7 @@ body {
     content: '';
     position: fixed;
     transition: visibility 0s linear 0s, opacity 0.2s ease-out;
-    background: rgba(255, 255, 255, 0.5);
+    background: theme('colors.white-50');
     width: 100%;
     height: 100%;
     top: 0;

client/scss/elements/_typography.scss

@@ -47,8 +47,8 @@ a {
 }
 
 code {
-  box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.2);
-  background-color: $color-fieldset-hover;
+  box-shadow: inset 0 0 4px 0 theme('colors.black-20');
+  background-color: $color-white;
   font-family: $font-mono;
   padding: 2px 5px;
 }
@@ -57,7 +57,7 @@ kbd {
   border-radius: 3px;
   font-family: $font-sans;
   border: 1px solid $color-grey-2;
-  border-color: rgba(0, 0, 0, 0.2);
+  border-color: theme('colors.black-20');
   padding: 0.3em 0.5em;
 }
 

client/scss/generic/_normalize.scss

@@ -1,4 +1,4 @@
-/* stylelint-disable declaration-block-no-duplicate-properties, property-no-vendor-prefix */
+/* stylelint-disable declaration-block-no-duplicate-properties, property-no-vendor-prefix, scale-unlimited/declaration-strict-value */
 /*! normalize.css v1.1.1 | MIT License | git.io/normalize */
 
 /* ==========================================================================

client/scss/layouts/_add-multiple.scss

@@ -61,7 +61,7 @@
   }
 
   .progress {
-    box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4);
+    box-shadow: 0 0 5px 2px theme('colors.white-50');
     z-index: 4;
     top: 60%;
     inset-inline-start: 20%;
@@ -94,7 +94,7 @@
     width: 1em;
     font-size: 10em;
     line-height: 1.4em;
-    color: color.adjust($color-grey-4, $lightness: 4%);
+    color: theme('colors.grey.100');
   }
 
   canvas,
@@ -134,7 +134,7 @@
   }
 
   .upload-failure {
-    border-color: $color-red;
+    border-color: theme('colors.critical.200');
 
     .preview {
       display: none;
@@ -146,7 +146,7 @@
   }
 
   .upload-server-error {
-    border-color: $color-red;
+    border-color: theme('colors.critical.200');
 
     .preview {
       display: none;

client/scss/layouts/_focal-point-chooser.scss

@@ -4,7 +4,7 @@
 
   .current-focal-point-indicator {
     @include transition(opacity 0.2s ease);
-    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 1);
+    box-shadow: 1px 1px 10px 0 $color-black;
     position: absolute;
     border: 3px solid $color-teal;
     opacity: 0.7;

client/scss/layouts/_modeladmin.scss

@@ -54,12 +54,12 @@
     padding: 0 15px;
 
     h2 {
-      background-color: #fafafa;
+      background-color: $color-grey-5;
       font-size: 13px;
       line-height: 31px;
       margin-top: 0;
       padding-inline-start: 8px;
-      border-bottom: 1px solid #e6e6e6;
+      border-bottom: 1px solid $color-grey-4;
     }
 
     h3 {
@@ -88,7 +88,7 @@
       font-weight: normal;
       vertical-align: middle;
       display: block;
-      background-color: #fff;
+      background-color: $color-white;
       border: 1px solid $color-teal;
       color: $color-teal;
       text-decoration: none;
@@ -102,13 +102,13 @@
       &:hover {
         background-color: $color-teal-dark;
         border-color: $color-teal-dark;
-        color: #fff;
+        color: $color-white;
       }
     }
 
     li.selected a {
       // stylelint-disable-next-line declaration-no-important
-      color: #fff !important;
+      color: $color-white !important;
       // stylelint-disable-next-line declaration-no-important
       border-color: $color-teal !important;
       background-color: $color-teal;
@@ -132,7 +132,7 @@
 
   .pagination {
     margin-top: 3em;
-    border-top: 1px dashed #d9d9d9;
+    border-top: 1px dashed theme('colors.grey.100');
     padding: 2em 1em 0;
 
     ul {

client/scss/layouts/_page-editor.scss

@@ -64,7 +64,7 @@
     height: $object-title-height;
     -webkit-font-smoothing: auto;
     background: $color-salmon-light;
-    color: #200200;
+    color: $color-text-base;
     padding: 0.9em 0 0.9em 5em;
     font-size: 0.95em;
     margin: 0;
@@ -111,7 +111,7 @@
   &.required {
     > .title-wrapper label:after {
       content: '*';
-      color: $color-red;
+      color: theme('colors.critical.200');
       font-weight: bold;
       display: inline-block;
       margin-inline-start: 0.5em;
@@ -233,10 +233,6 @@
           width: 1.8em;
           background-color: $color-salmon;
         }
-
-        &:hover:before {
-          background-color: color.adjust($color-salmon, $lightness: -5%);
-        }
       }
     }
 
@@ -322,13 +318,8 @@ footer .preview {
       height: 3em;
     }
 
-    background-color: color.adjust($color-grey-2, $lightness: 10%);
-    border-color: color.adjust($color-grey-2, $lightness: 10%);
-
-    &:hover {
-      background-color: $color-grey-2;
-      border-color: $color-grey-2;
-    }
+    background-color: $color-grey-2;
+    border-color: $color-grey-2;
   }
 
   .dropdown {
@@ -336,21 +327,15 @@ footer .preview {
     input[type='submit'],
     button,
     .button {
-      background-color: color.adjust($color-grey-2, $lightness: 10%);
-      border-color: color.adjust($color-grey-2, $lightness: 10%);
-
-      &:hover {
-        background-color: $color-grey-2;
-        border-color: $color-grey-2;
-      }
+      background-color: $color-grey-2;
+      border-color: $color-grey-2;
     }
 
     ul,
     .dropdown-toggle {
-      background-color: color.adjust($color-grey-2, $lightness: 10%);
+      background-color: $color-grey-2;
     }
 
-    .dropdown-toggle:hover,
     &.open > .button + .dropdown-toggle {
       background-color: $color-grey-2;
     }

client/scss/layouts/_workflow-progress.scss

@@ -5,8 +5,8 @@
 
 .workflow-progress-table {
   width: 100%;
-  border-top: 1px solid rgb(229, 229, 229);
-  border-bottom: 1px solid rgb(229, 229, 229);
+  border-top: 1px solid $color-grey-3;
+  border-bottom: 1px solid $color-grey-3;
   font-size: 0.8em;
 
   td,
@@ -21,18 +21,18 @@
   &__left-column {
     font-size: 1.2em;
     font-weight: bold;
-    color: #555;
+    color: $color-text-base;
   }
 
   &--tasks {
-    background-color: rgb(250, 250, 250);
+    background-color: $color-grey-5;
 
     .workflow-progress-table__left-column {
-      background-color: rgb(245, 245, 245);
+      background-color: $color-grey-4;
     }
   }
 
   &--timeline tr {
-    border-bottom: 1px solid rgb(229, 229, 229);
+    border-bottom: 1px solid $color-grey-3;
   }
 }

client/scss/overrides/_utilities.dropdowns.scss

@@ -26,76 +26,44 @@
 
 // }
 .t-default .u-btn-current {
-  border-color: rgba(0, 0, 0, 0.15);
+  border-color: $color-grey-4;
   color: $color-teal;
 }
 
 .t-default .u-btn-current:hover {
   background: $color-teal;
-  color: #fff;
+  color: $color-white;
   border-color: $color-teal;
 }
 
-.t-default .u-btn-current:active {
-  background: #333;
-  color: #fff;
-  border-color: #333;
-}
-
 .t-inverted .u-btn-current {
   background-color: $color-teal-darker;
-  border-color: rgba(0, 0, 0, 0.35);
-  color: #fff;
+  border-color: theme('colors.black-35');
+  color: $color-white;
 }
 
 .t-inverted .u-btn-current:hover {
   background-color: $color-teal-dark;
-  border-color: rgba(0, 0, 0, 0.35);
-}
-
-.t-inverted .u-btn-current:active {
-  border-color: rgba(0, 0, 0, 0.35);
-  background: #333;
-  color: #fff;
+  border-color: theme('colors.black-35');
 }
 
 // =============================================================================
 // Dark theme
 // =============================================================================
 .t-dark .u-link {
-  color: #fff;
+  color: $color-white;
 }
 
 .t-dark .u-link:hover {
-  color: #aaa;
+  color: $color-white;
 }
 
 .t-dark .u-background {
-  background: #333;
+  background: $color-grey-1;
 }
 
 .t-dark .u-arrow:before {
-  border-bottom-color: #333;
-}
-
-// =============================================================================
-// Light theme
-// =============================================================================
-.t-light .u-link {
-  color: #333;
-}
-
-.t-light .u-link:hover {
-  color: #aaa;
-}
-
-.t-light .u-background {
-  background: #fff;
-  border-color: #ccc;
-}
-
-.t-light .u-arrow:before {
-  border-bottom-color: #fff;
+  border-bottom-color: $color-grey-1;
 }
 
 // =============================================================================

client/scss/overrides/_vendor.datetimepicker.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 
 .xdsoft_datetimepicker {
-  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 5px 10px -5px theme('colors.black-35');
   background: $color-white;
   border: 1px solid $color-input-focus-border;
   padding: 8px;
@@ -137,15 +137,14 @@
 
     .xdsoft_time_box {
       position: relative;
-      border: 1px solid #ccc;
+      border: 1px solid $color-grey-4;
       height: 170px;
       overflow: hidden;
-      border-bottom: 1px solid #ddd;
 
       > div > div {
-        background: #f5f5f5;
-        border-top: 1px solid #ddd;
-        color: #666;
+        background: $color-grey-5;
+        border-top: 1px solid $color-grey-4;
+        color: $color-grey-1;
         font-size: 1em;
         text-align: center;
         border-collapse: collapse;
@@ -184,7 +183,7 @@
     }
 
     > .xdsoft_select {
-      border: 1px solid #ccc;
+      border: 1px solid $color-grey-4;
       position: absolute;
       inset-inline-end: 0;
       top: 30px;
@@ -204,18 +203,12 @@
 
       > div > .xdsoft_option:hover {
         color: $color-white;
-        background: #ff8000;
+        background: $color-salmon;
       }
 
       > div > .xdsoft_option {
         padding: 2px 15px 2px 5px;
       }
-
-      > div > .xdsoft_option.xdsoft_current {
-        background: #3af;
-        color: $color-white;
-        font-weight: 700;
-      }
     }
   }
 
@@ -242,8 +235,8 @@
     td,
     th {
       width: 14.285%;
-      border: 1px solid #ddd;
-      color: #666;
+      border: 1px solid $color-grey-4;
+      color: $color-grey-1;
       font-size: 12px;
       text-align: end;
       padding: 5px 7px;
@@ -257,7 +250,7 @@
     }
 
     th {
-      background: #f1f1f1;
+      background: $color-grey-5;
       font-weight: 700;
       font-size: 0.85em;
       text-align: center;
@@ -327,7 +320,7 @@
 
   > .xdsoft_scroller {
     // stylelint-disable-next-line declaration-no-important
-    background: #ccc !important;
+    background: $color-grey-3 !important;
     height: 20px;
     border-radius: 3px;
   }

client/scss/overrides/_vendor.tagit.scss

@@ -42,6 +42,6 @@
   }
 
   .ui-icon-close:hover:before {
-    color: $color-red;
+    color: theme('colors.critical.200');
   }
 }

client/scss/settings/_variables.scss

@@ -31,57 +31,35 @@ $breakpoints: (
 );
 
 // colours
-$color-teal-light: var(--color-primary-light);
-$color-teal-lighter: var(--color-primary-lighter);
-$color-teal: var(--color-primary);
-$color-teal-darker: var(--color-primary-darker);
-$color-teal-dark: var(--color-primary-dark);
-
-$color-blue: #71b2d4;
-$color-red: #cd3238;
-$color-red-dark: #b4191f;
-$color-orange: #e9b04d;
-$color-orange-dark: #bb5b03;
-$color-green: #189370;
-$color-green-dark: #157b57;
-$color-green-darker: #105d42; // White has AAA compatibility when this is used in bgd.
+$color-teal: theme('colors.secondary.DEFAULT');
+$color-teal-darker: theme('colors.secondary.400');
+$color-teal-dark: theme('colors.secondary.600');
+
 $color-salmon: #f37e77;
 $color-salmon-light: #fcf2f2;
-$color-white: #fff;
-$color-black: #000;
+$color-white: theme('colors.white.DEFAULT');
+$color-black: theme('colors.black.DEFAULT');
 
 // darker to lighter
-$color-grey-1: color.adjust($color-white, $lightness: -80%);
-$color-grey-2: color.adjust($color-white, $lightness: -70%);
-$color-grey-3: color.adjust($color-white, $lightness: -15%);
-$color-grey-4: color.adjust($color-white, $lightness: -10%);
-$color-grey-5: color.adjust($color-white, $lightness: -2%);
-
-$color-menu-text: color.adjust($color-white, $lightness: -20%);
+$color-grey-1: theme('colors.grey.600');
+$color-grey-2: theme('colors.grey.400');
+$color-grey-3: theme('colors.grey.200');
+$color-grey-4: theme('colors.grey.100');
+$color-grey-5: theme('colors.grey.50');
 
-$color-thead-bg: $color-grey-5;
-$color-header-bg: $color-teal;
+$color-menu-text: theme('colors.white-80');
 
-$color-fieldset-hover: $color-grey-5;
+$color-fieldset-hover: $color-white;
 $color-input-border: $color-grey-4;
-$color-input-focus: var(--color-input-focus);
-$color-input-focus-border: var(--color-input-focus-border);
-$color-input-error-bg: color.adjust(
-  color.adjust($color-red, $saturation: 28%),
-  $lightness: 45%
-);
+$color-input-focus: theme('colors.secondary.50');
+$color-input-focus-border: theme('colors.secondary.100');
+$color-input-error-bg: theme('colors.critical.50');
 
 $color-button: $color-teal;
 $color-button-hover: $color-teal-darker;
-$color-button-yes: $color-green-dark;
-$color-button-yes-hover: color.adjust($color-button-yes, $lightness: -8%);
-$color-button-no: $color-red-dark;
-$color-button-no-hover: color.adjust($color-button-no, $lightness: -20%);
-$color-button-warning: $color-orange-dark;
-$color-button-warning-hover: color.adjust(
-  $color-button-warning,
-  $lightness: -20%
-);
+$color-button-yes: theme('colors.positive.100');
+$color-button-no: theme('colors.critical.200');
+$color-button-warning: theme('colors.warning.100');
 
 $color-link: $color-teal-darker;
 $color-link-hover: $color-teal-dark;
@@ -90,8 +68,8 @@ $color-link-hover: $color-teal-dark;
 // because it shouldn’t be reused for anything else in the UI.
 $color-focus-outline: #ffbf47;
 
-$color-text-base: color.adjust($color-white, $lightness: -85%);
-$color-text-input: color.adjust($color-white, $lightness: -90%);
+$color-text-base: theme('colors.grey.600');
+$color-text-input: theme('colors.grey.600');
 
 // System Colors
 $media-forced-colours: active;
@@ -127,16 +105,3 @@ $menu-transition-duration: 150ms;
 $focus-outline-width: 3px;
 
 $object-title-height: 40px;
-
-// Form Errors
-$color-text-error: color.change($color-red, $saturation: 69%, $lightness: 52%);
-$color-text-error-forced-color: color.change(
-  $color-red,
-  $saturation: 100%,
-  $lightness: 50%
-);
-$color-text-warning-forced-color: color.change(
-  $color-orange,
-  $saturation: 100%,
-  $lightness: 70%
-);

client/src/components/CommentApp/components/Comment/style.scss

@@ -110,7 +110,7 @@
 
   &__error {
     color: $color-white;
-    background-color: $color-red-dark;
+    background-color: theme('colors.critical.200');
     border-radius: 3px;
     padding: 5px;
     padding-inline-start: 10px;
@@ -123,8 +123,8 @@
       float: right;
       margin-inline-start: 5px;
       color: $color-white;
-      background-color: $color-red-very-dark;
-      border-color: $color-red-very-dark;
+      background-color: theme('colors.critical.200');
+      border-color: $color-white;
       padding: 2px;
       padding-inline-start: 10px;
       padding-inline-end: 10px;

client/src/components/CommentApp/components/CommentHeader/style.scss

@@ -21,7 +21,7 @@
   }
 
   &__date {
-    color: $color-grey-25;
+    color: theme('colors.grey.400');
   }
 
   &__actions {
@@ -36,10 +36,6 @@
     width: 30px;
     height: 30px;
 
-    &:hover {
-      background-color: $color-grey-7;
-    }
-
     > button,
     > details > summary {
       // Hides triangle on Firefox
@@ -82,18 +78,13 @@
     &--more {
       > button,
       > details > summary {
-        color: #767676;
-
-        // stylelint-disable-next-line max-nesting-depth
-        &:hover {
-          color: $color-grey-25;
-        }
+        color: theme('colors.grey.400');
       }
     }
   }
 
   &__more-actions {
-    background-color: #333;
+    background-color: $color-grey-1;
     color: $color-grey-5;
     position: absolute;
     z-index: 1000;
@@ -104,7 +95,7 @@
     &:before {
       content: '';
       border: 6px solid transparent;
-      border-bottom-color: #333;
+      border-bottom-color: $color-grey-1;
       display: block;
       position: absolute;
       bottom: 100%;
@@ -115,16 +106,12 @@
       display: block;
       background: none;
       border: 0;
-      color: #fff;
+      color: $color-white;
       padding: 5px 10px;
       font-size: 13px;
       width: 100px;
       text-align: start;
-
-      &:hover {
-        color: #aaa;
-        cursor: pointer;
-      }
+      cursor: pointer;
     }
   }
 }

client/src/components/CommentApp/components/CommentReply/style.scss

@@ -78,7 +78,7 @@
 
   &__error {
     color: $color-white;
-    background-color: $color-red-dark;
+    background-color: theme('colors.critical.200');
     border-radius: 3px;
     padding: 5px;
     padding-inline-start: 10px;
@@ -91,8 +91,8 @@
       float: right;
       margin-inline-start: 5px;
       color: $color-white;
-      background-color: $color-red-very-dark;
-      border-color: $color-red-very-dark;
+      background-color: theme('colors.critical.200');
+      border-color: $color-white;
       padding: 2px;
       padding-inline-start: 10px;
       padding-inline-end: 10px;

client/src/components/CommentApp/main.scss

@@ -1,23 +1,15 @@
 @import '../../../scss/settings/variables';
 
-$color-red-very-dark: #901419;
-$color-amber-0: #e9b04d;
-$color-amber-1: #faecd5;
-
-$color-grey-25: #626262;
-$color-grey-7: #f2f2f2;
-$color-grey-8: #fbfbfb;
-
-$color-comment-separator: #e6e6e6;
+$color-comment-separator: theme('colors.grey.100');
 
 $color-box-background: $color-white;
 $color-box-border: $color-grey-3;
 $color-box-border-focused: $color-grey-2;
 $color-box-text: $color-black;
-$color-textarea-background: $color-grey-8;
-$color-textarea-background-focused: #f2fcfc;
-$color-textarea-border: #ccc;
-$color-textarea-border-focused: #00b0b1;
+$color-textarea-background: theme('colors.grey.50');
+$color-textarea-background-focused: $color-input-focus;
+$color-textarea-border: $color-input-border;
+$color-textarea-border-focused: $color-input-focus-border;
 $color-textarea-placeholder-text: $color-grey-2;
 $box-border-radius: 5px;
 $box-padding: 10px;
@@ -35,8 +27,7 @@ $box-padding: 10px;
   color: $color-box-text;
 
   &--focused {
-    border-color: #bbb;
-    box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
+    box-shadow: 3px 2px 3px -1px theme('colors.black-10');
   }
 
   textarea {
@@ -72,7 +63,7 @@ $box-padding: 10px;
   }
 
   &__notice {
-    background-color: $color-amber-1;
+    background-color: theme('colors.warning.50');
     position: absolute;
     inset-inline-start: -$box-padding;
     bottom: 0;
@@ -81,7 +72,7 @@ $box-padding: 10px;
     box-sizing: border-box;
 
     svg.icon {
-      color: $color-amber-0;
+      color: theme('colors.warning.100');
       width: 14px;
       height: 14px;
       margin-inline-end: 10px;
@@ -123,8 +114,8 @@ $box-padding: 10px;
 
   &--red {
     color: $color-white;
-    border: 1px solid $color-red-very-dark;
-    background-color: $color-red-very-dark;
+    border: 1px solid theme('colors.critical.200');
+    background-color: theme('colors.critical.200');
   }
 
   &:disabled {

client/src/components/Draftail/CommentableEditor/CommentableEditor.scss

@@ -1,5 +1,5 @@
 .Draftail-CommentControl .Draftail-ToolbarButton {
-  color: theme('colors.teal.100');
+  color: theme('colors.secondary.100');
 
   .icon {
     width: 1.875rem;

client/src/components/Draftail/Draftail.scss

@@ -1,7 +1,9 @@
 $draftail-editor-text: $color-text-input;
 $draftail-editor-chrome: theme('colors.primary.DEFAULT');
 $draftail-editor-chrome-text: $color-white;
-$draftail-editor-chrome-active: $color-white;
+// This needs to remain a Sass value due to a limitation in Draftail.
+// $draftail-editor-chrome-active: $color-white;
+$draftail-editor-chrome-active: #fff;
 $draftail-editor-chrome-accent: transparent;
 
 $draftail-base-spacing: 0.375rem;

client/src/components/Draftail/Tooltip/Tooltip.scss

@@ -8,7 +8,7 @@ $tooltip-chrome-text: $draftail-tooltip-chrome-text;
 
 $tooltip-z-index: $draftail-tooltip-z-index;
 
-$tooltip-color-no: #f48880;
+$tooltip-color-no: theme('colors.critical.100');
 
 @mixin arrow--top {
   margin-top: $tooltip-arrow-spacing;
@@ -51,7 +51,7 @@ $tooltip-color-no: #f48880;
   color: $tooltip-chrome-text;
   z-index: $tooltip-z-index;
   border-radius: $tooltip-radius;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 5px theme('colors.black-35');
 
   &::before {
     content: '';

client/src/components/Draftail/blocks/ImageBlock.scss

@@ -25,7 +25,7 @@
   color: $color-text-base;
 
   &[readonly] {
-    color: color.adjust($color-text-base, $alpha: -0.5);
+    color: $color-grey-3;
   }
 }
 

client/src/components/Draftail/decorators/TooltipEntity.scss

@@ -8,7 +8,7 @@ $icon-size: 1em;
   }
 
   .icon-warning {
-    color: $color-red;
+    color: theme('colors.critical.200');
   }
 
   .icon {

client/src/components/PageExplorer/PageExplorer.scss

@@ -1,5 +1,4 @@
-$c-page-explorer-bg-active: rgba(0, 0, 0, 0.425);
-$c-page-explorer-secondary: #a5a5a5;
+$c-page-explorer-bg-active: theme('colors.black-50');
 $c-page-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
 $menu-footer-height: 50px;
 
@@ -41,7 +40,7 @@ $menu-footer-height: 50px;
 $explorer-header-horizontal-padding: 10px;
 
 .c-page-explorer__header {
-  @apply w-bg-primary-200 w-text-white/85 w-border-b w-border-primary;
+  @apply w-bg-primary-200 w-text-white-80 w-border-b w-border-primary;
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
@@ -67,13 +66,13 @@ $explorer-header-horizontal-padding: 10px;
   white-space: nowrap;
 
   .icon {
-    @apply w-text-white/85;
+    @apply w-text-white-80;
     margin-inline-end: 0.25rem;
     font-size: 1rem;
   }
 
   .icon--explorer-header {
-    @apply w-text-white/85 w-mr-2;
+    @apply w-text-white-80 w-mr-2;
     width: 1.25em;
     height: 1.25em;
     margin-inline-end: 0.25rem;
@@ -92,7 +91,6 @@ $explorer-header-horizontal-padding: 10px;
 
   > select {
     padding: 5px 30px 5px 10px;
-    border-color: #4c4e4d;
     font-size: 0.875rem;
 
     &:disabled {
@@ -138,11 +136,11 @@ $explorer-header-horizontal-padding: 10px;
 .c-page-explorer__see-more {
   display: block;
   padding: 1em;
-  background: rgba(0, 0, 0, 0.3);
+  background: theme('colors.black-35');
   color: $color-white;
 
   &:focus {
-    color: $c-page-explorer-secondary;
+    color: theme('colors.white-80');
     background: $c-page-explorer-bg-active;
   }
 

client/src/components/PageExplorer/PageExplorerItem.scss

@@ -12,7 +12,7 @@
 }
 
 .c-page-explorer__item__link .icon {
-  @apply w-text-white/85;
+  @apply w-text-white-80;
   width: 2em;
   height: 2em;
   margin-inline-end: 0.75rem;
@@ -25,7 +25,7 @@
 }
 
 .c-page-explorer__item__action {
-  @apply w-text-white/85 w-transition hover:w-bg-primary hover:w-text-white focus:w-bg-primary focus:w-text-white;
+  @apply w-text-white-80 w-transition hover:w-bg-primary hover:w-text-white focus:w-bg-primary focus:w-text-white;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -51,6 +51,6 @@
 }
 
 .c-page-explorer__meta {
-  @apply w-flex w-gap-2 w-text-white/85;
+  @apply w-flex w-gap-2 w-text-white-80;
   font-size: 12px;
 }

client/src/components/PublicationStatus/PublicationStatus.scss

@@ -1,5 +1,5 @@
 .c-status {
-  @apply w-bg-black/50 w-tracking-tight w-text-white/85;
+  @apply w-bg-black-50 w-tracking-tight w-text-white-80;
   // stylelint-disable-next-line property-disallowed-list
   text-transform: uppercase;
   font-size: 10px;

client/src/components/Sidebar/SidebarPanel.scss

@@ -27,7 +27,7 @@
 
   &--visible {
     visibility: visible;
-    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.35);
+    box-shadow: 2px 0 2px theme('colors.black-35');
   }
 
   // Showing the submenu options panel in mobile mode

client/src/components/Sidebar/menu/MenuItem.scss

@@ -34,7 +34,7 @@
     &:hover,
     &:focus {
       color: $color-white;
-      text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+      text-shadow: -1px -1px 0 theme('colors.black-35');
     }
 
     &:before {
@@ -68,7 +68,7 @@
 
   &--active {
     @apply w-bg-primary-200;
-    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+    text-shadow: -1px -1px 0 theme('colors.black-35');
 
     > a {
       border-inline-start-color: $color-salmon;

client/src/components/Sidebar/menu/SubMenuItem.scss

@@ -75,7 +75,7 @@
 
   &--visible {
     visibility: visible;
-    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.35);
+    box-shadow: 2px 0 2px theme('colors.black-35');
   }
 
   // Don't apply this to nested submenus though
@@ -102,7 +102,7 @@
 .sidebar-sub-menu-item {
   &--open {
     > a {
-      text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+      text-shadow: -1px -1px 0 theme('colors.black-35');
     }
   }
 }

client/src/components/Sidebar/modules/WagtailBranding.scss

@@ -17,7 +17,6 @@ $logo-size: 110px;
   position: relative;
   display: block;
   align-items: center;
-  color: #aaa;
   -webkit-font-smoothing: auto;
   margin: 4rem auto;
   text-align: center;
@@ -68,7 +67,7 @@ $logo-size: 110px;
 
   // Bird wrapper
   &__icon-wrapper {
-    @apply w-bg-white/15 w-relative w-overflow-hidden hover:w-overflow-visible;
+    @apply w-bg-white-15 w-relative w-overflow-hidden hover:w-overflow-visible;
     margin: auto;
     width: $logo-size;
     height: $logo-size;
@@ -90,7 +89,6 @@ $logo-size: 110px;
 .sidebar-custom-branding {
   display: block;
   align-items: center;
-  color: #aaa;
   -webkit-font-smoothing: auto;
   position: relative;
   margin: 2em auto;

client/src/components/StreamField/StreamField.scss

@@ -1,5 +1,32 @@
-@use './scss/index' with (
-  $teal: $color-teal,
-  $error-color: $color-red,
-  $font-sans: $font-sans
-);
+$grid-gutter-width: 30px;
+$header-padding-horizontal: 4px;
+$header-padding-vertical: 6px;
+$header-gutter: 8px;
+$header-background: $color-grey-5;
+$block-margin-vertical: 4px;
+$block-margin-horizontal: 0;
+$add-button-size: 34px;
+$add-button-font-size: 1.5rem;
+$type-button-padding-vertical: 10px;
+$type-button-padding-horizontal: 10px;
+$children-container-padding: $add-button-size * 0.5;
+$content-padding-horizontal: 24px;
+$content-padding-vertical: 16px;
+$action-font-size: 1.125rem;
+$add-transition-duration: 0.3s;
+$hover-transition-duration: 0.3s;
+$bounce-transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+$border-radius: 3px;
+$header-text-color: $color-grey-2;
+$block-border-color: $color-grey-4;
+$block-border-color-focus: $color-grey-3;
+$block-hover-background: $color-grey-5;
+$error-border-color: theme('colors.critical.100');
+$error-background-color: $color-input-error-bg;
+$add-panel-gutter: 8px;
+
+@import 'scss/components/c-sf-add-button';
+@import 'scss/components/c-sf-add-panel';
+@import 'scss/components/c-sf-button';
+@import 'scss/components/c-sf-block';
+@import 'scss/components/c-sf-container';

client/src/components/StreamField/scss/_variables.scss

@@ -1,37 +0,0 @@
-@use 'sass:math';
-
-$grid-gutter-width: 30px !default;
-$header-padding-horizontal: 4px !default;
-$header-padding-vertical: 6px;
-$header-gutter: 8px !default;
-$header-background: #fbfbfb;
-$block-margin-vertical: 4px !default;
-$block-margin-horizontal: 0 !default;
-$add-button-size: 34px !default;
-$add-button-font-size: 24px !default;
-$type-button-padding-vertical: 10px !default;
-$type-button-padding-horizontal: 10px !default;
-$children-container-padding: math.div($add-button-size, 2) !default;
-$content-padding-horizontal: 24px !default;
-$content-padding-vertical: 16px !default;
-$action-font-size: 18px;
-$add-transition-duration: 0.3s !default;
-$hover-transition-duration: 0.3s !default;
-$bounce-transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275) !default;
-$border-radius: 3px !default;
-$teal: #007d7e !default;
-$header-text-color-focus: #4d4d4d !default;
-$header-text-color: #585858 !default;
-$block-border-color: #e6e6e6 !default;
-$block-border-color-focus: #bbb !default;
-$block-hover-background: #f5f5f5 !default;
-$error-color: #cd3238 !default;
-$error-border-color: #dbc7c8 !default;
-$error-border-color-focus: #cdb2b3 !default;
-$error-background-color: #fbefef !default;
-$screen-xs-max: 799px !default;
-$screen-sm-min: 800px !default;
-$screen-l-min: 1075px !default;
-$add-panel-gutter: 8px !default;
-$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-  sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji' !default;

client/src/components/StreamField/scss/components/c-sf-add-button.scss

@@ -3,7 +3,7 @@
   height: $add-button-size;
   appearance: none;
   border: 0 none;
-  color: $teal;
+  color: $color-teal;
   font-weight: bold;
   background: none;
   padding: 0;

client/src/components/StreamField/scss/components/c-sf-add-panel.scss

@@ -6,7 +6,7 @@
   border-radius: $border-radius;
   user-select: none;
 
-  @media (min-width: $screen-l-min) {
+  @include media-breakpoint-up(lg) {
     padding: $grid-gutter-width * 0.25 $grid-gutter-width * 2 $add-button-size -
       math.div($grid-gutter-width, 2);
   }

client/src/components/StreamField/scss/components/c-sf-block.scss

@@ -13,7 +13,7 @@
   margin: $block-margin-vertical $block-margin-horizontal;
   border: 1px solid $block-border-color;
   border-radius: $border-radius;
-  background: #fff;
+  background: $color-white;
   transition: border-color $hover-transition-duration ease-in-out;
   transition-property: border-color, box-shadow;
 
@@ -36,7 +36,7 @@
     min-height: 30px;
     background: $header-background;
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       padding-inline-start: $content-padding-horizontal - $header-gutter;
     }
 
@@ -108,8 +108,8 @@
 
       &:focus,
       &:hover {
-        color: #333;
-        background-color: rgba(0, 0, 0, 0.05);
+        color: $color-grey-1;
+        background-color: $color-grey-4;
       }
 
       svg.icon {
@@ -145,7 +145,7 @@
 
     &:hover,
     &:focus {
-      border-color: $error-border-color-focus;
+      border-color: $error-border-color;
 
       > .c-sf-block__header {
         background: $error-background-color;
@@ -155,7 +155,7 @@
     // Duplicated because of
     // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16651302/
     &:focus-within {
-      border-color: $error-border-color-focus;
+      border-color: $error-border-color;
 
       > .c-sf-block__header {
         background: $error-background-color;
@@ -166,15 +166,10 @@
   &:hover,
   &:focus {
     border-color: $block-border-color-focus;
-    box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
+    box-shadow: 3px 2px 3px -1px theme('colors.black-10');
 
     > .c-sf-block__header {
       background: $block-hover-background;
-
-      .c-sf-block__header__title,
-      .c-sf-block__actions__single {
-        color: $header-text-color-focus;
-      }
     }
   }
 
@@ -182,15 +177,10 @@
   // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16651302/
   &:focus-within {
     border-color: $block-border-color-focus;
-    box-shadow: 3px 2px 3px -1px rgba(0, 0, 0, 0.1);
+    box-shadow: 3px 2px 3px -1px theme('colors.black-10');
 
     > .c-sf-block__header {
       background: $block-hover-background;
-
-      .c-sf-block__header__title,
-      .c-sf-block__actions__single {
-        color: $header-text-color-focus;
-      }
     }
   }
 }

client/src/components/StreamField/scss/components/c-sf-button.scss

@@ -2,15 +2,15 @@
   flex: 1 1 200px;
   margin: $add-panel-gutter;
   appearance: none;
-  color: #333;
+  color: $color-grey-1;
   line-height: 1.833;
   font-weight: 600;
   font-size: 12px;
   font-family: $font-sans;
   text-align: start;
-  background: #eee;
+  background: $color-grey-5;
   padding: $type-button-padding-vertical $type-button-padding-horizontal;
-  border: 1px solid #e6e6e6;
+  border: 1px solid $color-grey-4;
   border-radius: $border-radius;
   outline: none;
   cursor: pointer;
@@ -20,8 +20,8 @@
 
   &:hover,
   &:focus {
-    color: #fff;
-    background-color: $teal;
+    color: $color-white;
+    background-color: $color-teal;
   }
 
   &[disabled] {

client/src/components/StreamField/scss/components/c-sf-container.scss

@@ -22,7 +22,7 @@
   }
 
   &--add-in-gutter {
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       padding-inline-start: $add-button-size;
 
       .c-sf-add-button {
@@ -72,7 +72,7 @@
 
     &.required > label::after {
       content: '*';
-      color: #cd3238;
+      color: theme('colors.critical.200');
       font-weight: 700;
       display: inline-block;
       margin-inline-start: 0.5em;

client/src/components/StreamField/scss/index.scss

@@ -1,7 +0,0 @@
-@import 'variables';
-
-@import 'components/c-sf-add-button';
-@import 'components/c-sf-add-panel';
-@import 'components/c-sf-button';
-@import 'components/c-sf-block';
-@import 'components/c-sf-container';

client/tailwind.config.js

@@ -57,7 +57,6 @@ module.exports = {
       'white-15': 'rgba(255, 255, 255, 0.15)',
       'white-50': 'rgba(255, 255, 255, 0.50)',
       'white-80': 'rgba(255, 255, 255, 0.80)',
-      'white-85': 'rgba(255, 255, 255, 0.85)',
       'black-10': 'rgba(0, 0, 0, 0.10)',
       'black-20': 'rgba(0, 0, 0, 0.20)',
       'black-35': 'rgba(0, 0, 0, 0.35)',
@@ -86,10 +85,6 @@ module.exports = {
     },
     spacing,
     extend: {
-      opacity: {
-        15: '0.15',
-        85: '0.85',
-      },
       outlineOffset: {
         inside: '-3px',
       },

docs/advanced_topics/customisation/admin_templates.md

@@ -108,40 +108,39 @@ To customise the primary colour used in the admin user interface, inject a CSS f
 
 ```css
 :root {
-    --color-primary-hue: 25;
+    --w-color-primary-hue: 25;
 }
 ```
 
-`color-primary` is an [hsl colour](https://en.wikipedia.org/wiki/HSL_and_HSV) composed of 3 CSS variables - `--color-primary-hue` (0-360 with no unit), `--color-primary-saturation` (a percentage), and `--color-primary-lightness` (also a percentage). Separating the colour into 3 allows us to calculate variations on the colour to use alongside the primary colour. If needed, you can also control those variations manually by setting `hue`, `saturation`, and `lightness` variables for the following colours: `color-primary-darker`, `color-primary-dark`, `color-primary-lighter`, `color-primary-light`, `color-input-focus`, and `color-input-focus-border`:
+`w-color-primary` is an [HSL colour](https://en.wikipedia.org/wiki/HSL_and_HSV) composed of 3 CSS variables - `--w-color-primary-hue` (0-360 with no unit), `--w-color-primary-saturation` (a percentage), and `--w-color-primary-lightness` (also a percentage). Separating the colour into 3 allows us to calculate variations on the colour to use alongside the primary colour. If needed, you can also control those variations manually by setting `hue`, `saturation`, and `lightness` variables:
 
 ```css
 :root {
-    --color-primary-hue: 25;
-    --color-primary-saturation: 100%;
-    --color-primary-lightness: 25%;
-    --color-primary-darker-hue: 24;
-    --color-primary-darker-saturation: 100%;
-    --color-primary-darker-lightness: 20%;
-    --color-primary-dark-hue: 23;
-    --color-primary-dark-saturation: 100%;
-    --color-primary-dark-lightness: 15%;
+    --w-color-primary-hue: 25;
+    --w-color-primary-saturation: 100%;
+    --w-color-primary-lightness: 25%;
+    --w-color-primary-darker-hue: 24;
+    --w-color-primary-darker-saturation: 100%;
+    --w-color-primary-darker-lightness: 20%;
+    --w-color-primary-dark-hue: 23;
+    --w-color-primary-dark-saturation: 100%;
+    --w-color-primary-dark-lightness: 15%;
 }
 ```
 
-If instead you intend to set all available colours, you can use any valid css colours:
+If instead you intend to set all available colours within a given hue, you can use any valid css colours:
 
 ```css
 :root {
-    --color-primary: mediumaquamarine;
-    --color-primary-darker: rebeccapurple;
-    --color-primary-dark: hsl(330, 100%, 70%);
-    --color-primary-lighter: azure;
-    --color-primary-light: aliceblue;
-    --color-input-focus: rgb(204, 0, 102);
-    --color-input-focus-border: #4d0026;
+    --w-color-primary: mediumaquamarine;
+    --w-color-primary-200: rebeccapurple;
 }
 ```
 
+Color customisation is available for the following colors:
+
+
+
 ## Specifying a site or page in the branding
 
 The admin interface has a number of variables available to the renderer context that can be used to customise the branding in the admin page. These can be useful for customising the dashboard on a multitenanted Wagtail installation: