Update relevant color declarations to use theme-agnostic color tokens

client/scss/components/_bulk_actions.scss

@@ -58,7 +58,7 @@
       }
 
       .button:not(:hover) {
-        color: $color-teal;
+        color: theme('colors.surface-button-default');
       }
 
       .c-dropdown__menu {
@@ -88,7 +88,7 @@
     }
 
     .bulk-actions-buttons {
-      border-inline-start: 1px solid $color-grey-2;
+      border-inline-start: 1px solid theme('colors.icon-secondary');
       padding-inline-start: 1.5em;
 
       .bulk-action-btn {
@@ -103,7 +103,7 @@
     }
 
     .num-objects-in-listing {
-      color: theme('colors.secondary.100');
+      color: theme('colors.text-link-default');
       background-color: transparent;
       border: 0;
       font-family: $font-sans;
@@ -111,7 +111,7 @@
     }
 
     .button:not(:hover) {
-      background-color: $color-white;
+      background-color: theme('colors.surface-page');
     }
   }
 }

client/scss/components/_button.scss

@@ -14,10 +14,10 @@
   line-height: calc(2.25em - 2px); // account for border
   vertical-align: middle;
   display: inline-block;
-  background-color: $color-button;
-  border: 1px solid $color-button;
+  background-color: theme('colors.surface-button-default');
+  border: 1px solid theme('colors.surface-button-default');
   outline-offset: $focus-outline-width;
-  color: $color-white;
+  color: theme('colors.text-button');
   text-decoration: none;
   white-space: nowrap;
   position: relative;
@@ -46,43 +46,43 @@
   }
 
   &.button-secondary {
-    color: $color-button;
+    color: theme('colors.text-button-outline-default');
     background-color: transparent;
 
     &:hover {
-      background-color: theme('colors.secondary.50');
+      background-color: theme('colors.text-button');
       border-color: currentColor;
-      color: $color-button;
+      color: theme('colors.surface-button-default');
     }
   }
 
   &.warning {
-    background-color: $color-button-warning;
-    border-color: $color-button-warning;
+    background-color: theme('colors.surface-alert-warning');
+    border-color: theme('colors.surface-alert-warning');
 
     &.button-secondary {
-      border-color: $color-button-warning;
-      color: $color-button-warning;
+      border-color: theme('colors.surface-alert-warning');
+      color: theme('colors.surface-alert-warning');
       background-color: transparent;
     }
 
     &:hover {
-      color: $color-white;
+      color: theme('colors.text-button');
       border-color: transparent;
-      background-color: $color-button-warning;
+      background-color: theme('colors.surface-alert-warning');
     }
   }
 
   // no/serious is not compatible with the button-secondary class
   &.no,
   &.serious {
-    background-color: $color-white;
-    border: 1px solid $color-button-no;
-    color: $color-button-no;
+    background-color: theme('colors.surface-page');
+    border: 1px solid theme('colors.surface-alert-danger');
+    color: theme('colors.surface-alert-danger');
 
     &:hover {
-      color: $color-button-no;
-      border-color: $color-button-no;
+      color: theme('colors.surface-alert-danger');
+      border-color: theme('colors.surface-alert-danger');
       background-color: theme('colors.critical.50');
     }
   }
@@ -152,19 +152,19 @@
 
     &.button-secondary {
       .icon-wrapper {
-        border-inline-end: 1px solid $color-button;
+        border-inline-end: 1px solid theme('colors.surface-button-default');
         background-color: transparent;
       }
 
       &:hover {
-        background-color: theme('colors.secondary.50');
+        background-color: theme('colors.text-button');
       }
 
       &:disabled,
       &[disabled],
       &.disabled {
         .icon-wrapper {
-          border-color: $color-grey-4;
+          border-color: theme('colors.surface-button-inactive');
         }
       }
     }
@@ -186,7 +186,7 @@
         padding-inline-start: 2.2em;
 
         .icon-wrapper {
-          border: 1px solid $color-button;
+          border: 1px solid theme('colors.surface-button-default');
           border-radius: 50%;
           height: fit-content;
           width: fit-content;
@@ -196,8 +196,8 @@
           background-color: transparent;
 
           .icon-wrapper {
-            background-color: $color-button;
-            color: $color-white;
+            background-color: theme('colors.surface-button-default');
+            color: theme('colors.text-button');
           }
         }
 
@@ -277,8 +277,8 @@
 
   // Base hover state
   &:hover {
-    background-color: $color-button-hover;
-    color: $color-white;
+    background-color: theme('colors.surface-button-hover');
+    color: theme('colors.text-button');
     border-color: transparent;
   }
 
@@ -286,20 +286,20 @@
   &:disabled,
   &[disabled],
   &.disabled {
-    background-color: $color-grey-3;
-    border-color: $color-grey-3;
-    color: $color-white;
+    background-color: theme('colors.surface-button-inactive');
+    border-color: theme('colors.surface-button-inactive');
+    color: theme('colors.text-button');
     cursor: default;
     pointer-events: none;
 
     &:hover {
-      background-color: $color-grey-3;
-      border-color: $color-grey-3;
-      color: $color-white;
+      background-color: theme('colors.surface-button-inactive');
+      border-color: theme('colors.surface-button-inactive');
+      color: theme('colors.text-button');
       cursor: default;
     }
 
-    @media (forced-colors: $media-forced-colours) {
+    @media (forced-colors: active) {
       color: GrayText;
       border-color: GrayText;
       border-style: dashed;
@@ -309,9 +309,9 @@
   &.button-secondary:disabled,
   &.button-secondary[disabled],
   &.button-secondary.disabled {
-    background-color: $color-white;
-    border-color: $color-grey-4;
-    color: $color-grey-3;
+    background-color: theme('colors.surface-page');
+    border-color: theme('colors.surface-button-inactive');
+    color: theme('colors.text-placeholder');
   }
 
   // Buttons which are only an icon
@@ -330,7 +330,7 @@
 
     &.button--icon {
       background-color: transparent;
-      color: $color-grey-2;
+      color: theme('colors.icon-secondary');
       border-color: transparent;
       font-size: 0;
       text-align: center;
@@ -338,7 +338,7 @@
       width: inherit;
 
       &:hover {
-        color: $color-grey-1;
+        color: theme('colors.icon-secondary-hover');
       }
 
       .icon {
@@ -404,7 +404,7 @@
 
   // Ensure visual consistency between button and a elements in WHCM
 
-  @media (forced-colors: $media-forced-colours) {
+  @media (forced-colors: active) {
     &:not(:disabled):not(.disabled):not([disabled]) {
       color: ButtonText;
       border-color: ButtonText;

client/scss/components/_chooser.scss

@@ -30,8 +30,8 @@
 
   &:hover,
   &:focus {
-    color: $color-button-hover;
-    background-color: $color-white;
+    color: theme('colors.surface-button-hover');
+    background-color: theme('colors.surface-page');
   }
 }
 
@@ -49,8 +49,8 @@
   height: 60px;
   // Prevent this item from getting smaller if the title is long.
   flex-shrink: 0;
-  background-color: theme('colors.grey.150');
-  color: $color-white;
+  background-color: theme('colors.border-button-small-outline-default');
+  color: theme('colors.text-button');
   border-radius: theme('borderRadius.sm');
 
   @media (forced-colors: active) {
@@ -74,7 +74,7 @@
 
   .button {
     // Subdued border as there can be a lot of chooser action buttons on a page.
-    border-color: theme('colors.grey.150');
+    border-color: theme('colors.border-button-small-outline-default');
   }
 
   // Hiding for devices capable of hover states only,

client/scss/components/_dialog.scss

@@ -18,8 +18,8 @@
     inset-inline-end: 0;
     bottom: 0;
     top: 0;
-    opacity: theme('opacity.40');
-    background: theme('colors.black.DEFAULT');
+    opacity: theme('opacity.80');
+    background: theme('colors.black-50');
   }
 
   &__box {
@@ -28,7 +28,7 @@
     margin: auto;
     max-width: theme('maxWidth.2xl');
     z-index: theme('zIndex.dialog');
-    background: theme('colors.white.DEFAULT');
+    background: theme('colors.surface-page');
     box-shadow: theme('boxShadow.DEFAULT');
     border-radius: theme('borderRadius.md');
     animation: theme('animation.fade-in');
@@ -36,7 +36,7 @@
     @include media-breakpoint-up(sm) {
       width: 600px;
     }
-    @media (forced-colors: $media-forced-colours) {
+    @media (forced-colors: active) {
       border: 5px solid currentColor;
     }
   }
@@ -57,7 +57,7 @@
   &__close-icon {
     width: theme('spacing.4');
     height: theme('spacing.4');
-    color: theme('colors.grey.600');
+    color: theme('colors.text-context');
   }
 
   &__content {
@@ -82,7 +82,7 @@
     display: none;
     width: theme('spacing.5');
     height: theme('spacing.5');
-    color: theme('colors.primary.DEFAULT');
+    color: theme('colors.icon-primary');
     top: theme('spacing.[0.5]');
     transform: translateY(theme('spacing.2'));
     inset-inline-start: calc(0 - theme('spacing.10'));
@@ -109,7 +109,7 @@
     border-start-start-radius: theme('borderRadius.md');
     border-start-end-radius: theme('borderRadius.md');
 
-    @media (forced-colors: $media-forced-colours) {
+    @media (forced-colors: active) {
       border-bottom: 1px solid currentColor;
     }
 

client/scss/components/_dismissible.scss

@@ -43,7 +43,7 @@
   }
 
   &--count {
-    color: theme('colors.primary.DEFAULT');
+    color: theme('colors.surface-menus');
     text-align: center;
     font-size: 0.625rem;
     font-weight: theme('fontWeight.bold');

client/scss/components/_dropdown.legacy.scss

@@ -29,7 +29,7 @@
 
   ul {
     @include unlist();
-    background-color: $color-teal;
+    background-color: theme('colors.surface-button-default');
     position: absolute;
     overflow: hidden;
     top: 100%;
@@ -46,12 +46,12 @@
 
       a:focus,
       button:focus {
-        border: 3px solid $color-focus-outline;
+        border: 3px solid theme('colors.focus');
       }
     }
 
     // Media for Windows High Contrast
-    @media (forced-colors: $media-forced-colours) {
+    @media (forced-colors: active) {
       li {
         border-width: 1px;
       }
@@ -62,16 +62,14 @@
 
       li a,
       li button {
-        border-color: $color-white;
-        color: $color-white;
+        border-color: theme('colors.text-button');
+        color: theme('colors.text-button');
       }
 
       li a:focus,
       li button:focus {
-        background-color: $color-black;
-        forced-color-adjust: none;
         border: 4px solid currentColor;
-        color: $color-white;
+        color: theme('colors.text-button');
       }
     }
 
@@ -80,12 +78,12 @@
       position: relative;
       text-decoration: none;
       display: block;
-      color: $color-white;
+      color: theme('colors.text-button');
       padding: 1em;
       font-weight: normal;
 
       &:hover {
-        background-color: $color-teal-darker;
+        background-color: theme('colors.surface-button-hover');
       }
 
       &.icon {
@@ -153,8 +151,8 @@
   }
 
   .dropdown-toggle {
-    color: $color-white;
-    background-color: $color-teal;
+    color: theme('colors.text-button');
+    background-color: theme('colors.surface-button-default');
     line-height: 2.8em;
     cursor: pointer;
     height: 100%;
@@ -175,7 +173,7 @@
     }
 
     &:hover {
-      background-color: $color-teal-darker;
+      background-color: theme('colors.surface-button-hover');
     }
 
     svg.icon {
@@ -185,25 +183,21 @@
   }
 
   .bicolor + .dropdown-toggle {
-    background-color: $color-teal-darker;
-
-    &:hover {
-      background-color: $color-teal-dark;
-    }
+    background-color: theme('colors.surface-button-hover');
   }
 
   &.open .dropdown-toggle {
-    background-color: $color-teal-darker;
+    background-color: theme('colors.surface-button-hover');
   }
 
   .bicolor:hover {
-    background-color: $color-teal-dark;
+    background-color: theme('colors.surface-button-hover');
   }
 
   // Styles for dropdowns which are also buttons e.g page editor
   &.dropdown-button {
     // Media for Windows High Contrast
-    @media (forced-colors: $media-forced-colours) {
+    @media (forced-colors: active) {
       button {
         border-color: ActiveText;
       }
@@ -220,7 +214,7 @@
     .dropdown-toggle {
       border-radius: 0 3px 3px 0;
       // Media for Windows High Contrast
-      @media (forced-colors: $media-forced-colours) {
+      @media (forced-colors: active) {
         background: transparent;
         border: 1px solid ActiveText;
       }
@@ -228,7 +222,7 @@
 
     .dropdown-toggle:hover {
       // Media for Windows High Contrast
-      @media (forced-colors: $media-forced-colours) {
+      @media (forced-colors: active) {
         background-color: transparent;
         border: 1px solid Highlight;
       }
@@ -248,32 +242,6 @@
     }
   }
 
-  &.dropdown-button--white {
-    ul {
-      background-color: $color-grey-3;
-    }
-
-    li a,
-    li .button {
-      background-color: $color-white;
-      color: $color-button;
-      outline-offset: $focus-outline-width;
-      border: 0;
-
-      &:hover {
-        background-color: $color-grey-4;
-      }
-
-      &.no {
-        color: $color-button-no;
-      }
-
-      &.warning {
-        color: $color-button-warning;
-      }
-    }
-  }
-
   &.dropup.dropdown-button {
     &.open {
       > input[type='button'],
@@ -292,17 +260,17 @@
 
 .dropdown.white {
   ul {
-    background-color: $color-white;
+    background-color: theme('colors.surface-page');
 
     li {
       border-top: 1px solid theme('colors.black-10');
     }
 
     a {
-      color: $color-grey-2;
+      color: theme('colors.text-meta');
 
       &:hover {
-        background-color: $color-grey-3;
+        background-color: theme('colors.text-context');
       }
     }
   }
@@ -310,11 +278,11 @@
 
 .dropdown.warning {
   ul {
-    background-color: $color-button-warning;
+    background-color: theme('colors.surface-alert-warning');
   }
 
   .dropdown-toggle {
-    background-color: $color-button-warning;
+    background-color: theme('colors.surface-alert-warning');
   }
 }
 

client/scss/components/_footer.scss

@@ -23,8 +23,8 @@
 
   &__container {
     border-radius: $border-curvature $border-curvature 0 0;
-    background: theme('colors.primary.DEFAULT');
-    color: $color-white;
+    background: theme('colors.surface-menus');
+    color: theme('colors.text-label-menus-default');
     margin-top: 0;
     margin-inline-end: 0;
     transition: transform 1s;
@@ -100,7 +100,7 @@
       color: inherit;
 
       &:hover {
-        color: $color-link;
+        color: theme('colors.text-link-default');
       }
     }
   }
@@ -188,39 +188,3 @@ footer .actions {
     white-space: initial;
   }
 }
-
-footer .preview {
-  button,
-  .button {
-    padding: 0 1em;
-
-    @include media-breakpoint-down(xs) {
-      width: 100%;
-      margin-top: 2px;
-      margin-bottom: 2px;
-      height: 3em;
-    }
-
-    background-color: $color-grey-2;
-    border-color: $color-grey-2;
-  }
-
-  .dropdown {
-    input[type='button'],
-    input[type='submit'],
-    button,
-    .button {
-      background-color: $color-grey-2;
-      border-color: $color-grey-2;
-    }
-
-    ul,
-    .dropdown-toggle {
-      background-color: $color-grey-2;
-    }
-
-    &.open > .button + .dropdown-toggle {
-      background-color: $color-grey-2;
-    }
-  }
-}

client/scss/components/_form-side.scss

@@ -22,13 +22,13 @@
       w-transform
       w-translate-x-full
       rtl:-w-translate-x-full
-      w-bg-white
+      w-bg-surface-page
       w-box-border
       w-transition-all
       motion-reduce:w-transition-none
       w-duration-300
       w-border-l
-      w-border-grey-100
+      w-border-border-furniture
       w-min-w-full
       md:w-min-w-[22.875rem]
       w-max-w-full
@@ -56,7 +56,7 @@
   }
 
   &__close-button {
-    @apply w-text-primary w-absolute w-left-3 w-top-3 hover:w-text-primary-200 w-bg-white w-p-3 w-transition;
+    @apply w-text-icon-primary w-absolute w-left-3 w-top-3 hover:w-text-icon-primary-hover w-bg-surface-page w-p-3 w-transition;
 
     .icon {
       @apply w-w-4 w-h-4;
@@ -64,7 +64,7 @@
   }
 
   &:has(.form-side__resize-grip:is(:hover, :focus-within)) {
-    @apply w-border-grey-150;
+    @apply w-text-icon-secondary-hover;
   }
 
   &__resize-grip-container {
@@ -74,7 +74,7 @@
   }
 
   &__resize-grip {
-    @apply w-text-grey-150 hover:w-text-grey-200 w-border w-border-transparent w-rounded w-bg-white w-p-2.5 w-hidden w-touch-pinch-zoom w-cursor-ew-resize;
+    @apply w-text-icon-secondary hover:w-text-icon-secondary-hover w-border w-border-transparent w-rounded w-bg-surface-page w-p-2.5 w-hidden w-touch-pinch-zoom w-cursor-ew-resize;
 
     .form-side--open & {
       @apply w-flex;

client/scss/components/_grid.legacy.scss

@@ -34,13 +34,13 @@
   height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action
   float: left;
   position: relative;
-  border-bottom: 1px solid $color-grey-3;
+  border-bottom: 1px solid theme('colors.border-furniture');
 }
 
 .content {
   @include row();
-  background: $color-white;
-  border-top: 0 solid $color-grey-5; // this top border provides space for the floating logo to toggle the menu
+  background: theme('colors.surface-page');
+  border-top: 0 solid transparent; // this top border provides space for the floating logo to toggle the menu
   min-height: 100%;
   position: relative; // yuk. necessary for positions for jquery ui widgets
 

client/scss/components/_header.scss

@@ -2,12 +2,12 @@
 @use 'sass:color';
 
 .w-header {
-  @apply w-text-primary;
+  @apply w-text-text-label;
   margin-bottom: theme('spacing.8');
 
   h1,
   h2 {
-    @apply w-text-primary;
+    @apply w-text-text-label;
     margin: 0;
   }
 

client/scss/components/_help-block.scss

@@ -5,7 +5,7 @@
   padding: 1em;
   margin: 1em 0;
   clear: both;
-  color: $color-text-base;
+  color: theme('colors.grey.600');
 
   p {
     margin-top: 0;
@@ -16,12 +16,13 @@
   }
 
   a {
-    color: theme('colors.secondary.400');
+    color: theme('colors.secondary.DEFAULT');
     text-decoration: underline;
     text-decoration-thickness: 2px;
     text-underline-offset: 3px;
 
     &:hover {
+      color: theme('colors.secondary.400');
       text-decoration: none;
     }
   }

client/scss/components/_icons.scss

@@ -15,11 +15,11 @@
 }
 
 .icon.teal {
-  color: $color-teal-darker;
+  color: theme('colors.text-button-outline-default');
 }
 
 .icon.white {
-  color: $color-white;
+  color: theme('colors.surface-page');
 }
 
 .icon:before,

client/scss/components/_indicator.scss

@@ -31,9 +31,11 @@
 
   &.indicator--is-inverse {
     .icon {
-      border-color: $color-white; // ensure border is available for high contrast mode
-      background-color: $color-grey-1;
-      color: $color-white;
+      border-color: theme(
+        'colors.surface-page'
+      ); // ensure border is available for high contrast mode
+      background-color: theme('colors.text-context');
+      color: theme('colors.surface-page');
     }
   }
 }

client/scss/components/_link.legacy.scss

@@ -1,12 +1,12 @@
 // makes a link look like regular text
 .nolink {
-  color: $color-text-base;
+  color: theme('colors.text-context');
 
   &:hover {
-    color: $color-teal;
+    color: theme('colors.text-link-hover');
   }
 
-  @media (forced-colors: $media-forced-colours) {
+  @media (forced-colors: active) {
     color: GrayText;
   }
 }

client/scss/components/_listing.scss

@@ -5,7 +5,7 @@ ul.listing {
 
 .listing {
   margin-bottom: 2em;
-  color: $color-text-base;
+  color: theme('colors.text-context');
   font-size: 0.95em;
 
   ul {
@@ -15,7 +15,7 @@ ul.listing {
 
   > li {
     padding: 1em 0;
-    border-bottom: 1px dashed $color-input-border;
+    border-bottom: 1px dashed theme('colors.border-field-default');
   }
 
   h3 {
@@ -39,8 +39,8 @@ ul.listing {
 
   thead {
     font-size: 1.1em;
-    color: $color-text-base;
-    border-bottom: 1px solid $color-grey-4;
+    color: theme('colors.text-context');
+    border-bottom: 1px solid theme('colors.border-furniture');
 
     th {
       font-size: 0.9em;
@@ -79,26 +79,26 @@ ul.listing {
   }
 
   .table-headers {
-    border-bottom: 1px solid $color-grey-4;
+    border-bottom: 1px solid theme('colors.border-furniture');
   }
 
   tbody {
-    border-bottom: 1px dashed $color-input-border;
+    border-bottom: 1px dashed theme('colors.border-field-default');
 
     tr {
-      border-top: 1px dashed $color-input-border;
+      border-top: 1px dashed theme('colors.border-field-default');
 
       &:first-child {
-        border-top: 1px dashed $color-input-border;
+        border-top: 1px dashed theme('colors.border-field-default');
       }
 
       &:hover {
-        background-color: theme('colors.grey.50');
+        background-color: theme('colors.white-10');
       }
     }
 
     tr.selected {
-      background-color: theme('colors.secondary.100');
+      background-color: theme('colors.text-highlight');
     }
   }
 
@@ -109,7 +109,7 @@ ul.listing {
   &.chooser {
     tbody .parent-page {
       font-size: 1.15em;
-      background-color: $color-grey-4;
+      background-color: theme('colors.border-furniture');
     }
 
     tbody .parent-page .title {
@@ -128,21 +128,21 @@ ul.listing {
     }
 
     tbody tr:hover {
-      background-color: $color-teal;
-      color: $color-white;
+      background-color: theme('colors.surface-button-hover');
+      color: theme('colors.surface-page');
 
       .title a,
       .title a:hover,
       .title label {
-        color: $color-white;
+        color: theme('colors.surface-page');
       }
 
       .parent a {
-        color: $color-white;
+        color: theme('colors.surface-page');
       }
 
       .w-status {
-        border-color: $color-white;
+        border-color: theme('colors.surface-page');
       }
     }
 
@@ -210,7 +210,7 @@ ul.listing {
 
         // stylelint-disable max-nesting-depth
         &:hover {
-          color: $color-link;
+          color: theme('colors.text-link-default');
         }
       }
     }
@@ -274,7 +274,7 @@ ul.listing {
     padding: 0;
 
     &:hover {
-      background-color: $color-grey-5;
+      background-color: theme('colors.white-10');
     }
 
     a {
@@ -284,7 +284,7 @@ ul.listing {
   }
 
   .children a {
-    color: $color-teal;
+    color: theme('colors.text-button-outline-default');
     display: block;
     text-align: center;
 
@@ -295,7 +295,7 @@ ul.listing {
   }
 
   .no-children a {
-    color: $color-grey-3;
+    color: theme('colors.text-button-outline-default');
     display: block;
     text-align: center;
 
@@ -306,7 +306,7 @@ ul.listing {
 
     &:hover,
     &:focus {
-      color: $color-teal;
+      color: theme('colors.text-button-outline-default');
     }
 
     &:focus {
@@ -331,22 +331,22 @@ ul.listing {
 
     &--active a,
     a:hover {
-      color: $color-teal;
+      color: theme('colors.text-button-outline-default');
     }
   }
 
   .handle {
     cursor: move;
     width: 20px;
-    color: $color-grey-3;
+    color: theme('colors.icon-secondary');
 
     &:hover {
-      color: $color-text-base;
+      color: theme('colors.icon-secondary-hover');
     }
   }
 
   .ui-sortable-helper {
-    border: 1px dashed $color-input-border;
+    border: 1px dashed theme('colors.border-field-default');
     border-width: 1px 0;
 
     td {
@@ -374,7 +374,7 @@ ul.listing {
 
   &.images img {
     @include transition(border-color 0.2s ease);
-    border: 3px solid $color-white;
+    border: 3px solid theme('colors.surface-page');
   }
 }
 
@@ -388,7 +388,7 @@ ul.listing {
 
 // stylelint-disable-next-line no-duplicate-selectors
 ul.listing {
-  border-top: 1px dashed $color-input-border;
+  border-top: 1px dashed theme('colors.border-field-default');
   margin-bottom: 2em;
 }
 
@@ -460,14 +460,14 @@ table.listing {
 
 .listing.full-width + .pagination {
   margin-top: 3em;
-  border-top: 1px dashed theme('colors.grey.100');
+  border-top: 1px dashed theme('colors.border-furniture');
   padding: 2em 50px 0;
 }
 
 // listing filters
 .listing-filter {
   @include clearfix();
-  background-color: $color-grey-5;
+  background-color: theme('colors.surface-header');
   border-width: 1px 0;
   margin: 3em 0;
 }
@@ -477,7 +477,7 @@ table.listing {
   font-size: 0.95em;
   padding: 1em;
   margin: 0 1em 0 0;
-  background-color: $color-grey-4;
+  background-color: theme('colors.border-furniture');
 }
 
 .filter-options {
@@ -550,7 +550,7 @@ table.listing {
 
         &:hover {
           img {
-            border-color: $color-teal;
+            border-color: theme('colors.border-button-outline-default');
           }
         }
       }
@@ -603,15 +603,15 @@ table.listing {
     }
 
     tr:hover .children {
-      background-color: $color-teal;
+      background-color: theme('colors.text-button-outline-default');
 
       .icon {
-        color: $color-white;
+        color: theme('colors.surface-page');
       }
     }
 
     td.children:hover {
-      background-color: $color-teal-darker;
+      background-color: theme('colors.text-button-outline-default');
     }
 
     table .no-results-message {
@@ -676,6 +676,6 @@ td.ord {
 
 table.listing {
   th.ordered {
-    color: $color-teal;
+    color: theme('colors.text-link-default');
   }
 }

client/scss/components/_loading-mask.scss

@@ -31,7 +31,7 @@
       mask-image: url('#{$images-root}icons/spinner.svg');
       mask-repeat: no-repeat;
       z-index: 2;
-      background: $color-teal;
+      background: theme('colors.surface-button-default');
     }
   }
 }

client/scss/components/_messages.capability.scss

@@ -1,14 +1,14 @@
 .capabilitymessage {
   display: block;
   background-color: theme('colors.critical.200');
-  color: $color-white;
+  color: theme('colors.white.DEFAULT');
   padding: 1em 2em;
   margin: 0;
   position: relative;
   text-align: center;
 
   a {
-    color: $color-white;
+    color: theme('colors.white.DEFAULT');
     text-decoration: underline;
   }
 }

client/scss/components/_messages.scss

@@ -3,7 +3,7 @@
 // For inline help text, see typography.scss
 .messages {
   position: relative;
-  background-color: $color-grey-1;
+  background-color: theme('colors.surface-page');
 
   .buttons {
     margin-inline-start: 1em;
@@ -19,7 +19,7 @@
   > ul > li {
     // @include nice-padding;
     padding: 1.6em 3em 1.6em 1.6em;
-    color: $color-white;
+    color: theme('colors.text-button');
     border-bottom: 1px solid transparent;
   }
 
@@ -43,33 +43,32 @@
 
     &:hover {
       background-color: transparent;
-      color: $color-white;
+      color: theme('colors.text-button');
     }
   }
 
   .error {
     background-color: theme('colors.critical.200');
+    color: theme('colors.white.DEFAULT');
 
     .button:hover {
-      color: $color-grey-1;
+      color: theme('colors.white.DEFAULT');
     }
   }
 
   .warning {
-    color: $color-grey-1;
     background-color: theme('colors.warning.100');
+    color: theme('colors.grey.600');
   }
 
   .info {
     background-color: theme('colors.info.100');
+    color: theme('colors.white.DEFAULT');
   }
 
   .success {
     background-color: theme('colors.positive.100');
-
-    .button:hover {
-      background-color: $color-teal-dark;
-    }
+    color: theme('colors.white.DEFAULT');
   }
 
   .errorlist {

client/scss/components/_modals.scss

@@ -54,7 +54,7 @@ $zindex-modal-background: 500;
   border-radius: 3px;
   width: 98.7%;
   position: relative;
-  background-color: $color-white;
+  background-color: theme('colors.surface-page');
   margin-top: 2em;
   padding-bottom: 3em;
   display: inline-block;
@@ -70,7 +70,7 @@ $zindex-modal-background: 500;
   bottom: 0;
   inset-inline-start: 0;
   z-index: ($zindex-modal-background - 10);
-  background-color: $color-black;
+  background-color: theme('colors.black-50');
 
   // Fade for backdrop
   &.fade {
@@ -78,7 +78,7 @@ $zindex-modal-background: 500;
   }
 
   &.in {
-    opacity: 0.5;
+    opacity: 1;
   }
 }
 
@@ -93,12 +93,12 @@ $zindex-modal-background: 500;
   inset-inline-end: theme('spacing.3');
   width: theme('spacing.8');
   height: theme('spacing.8');
-  color: theme('colors.white.DEFAULT');
+  color: theme('colors.surface-page');
   z-index: 1;
 
   &:hover {
-    background-color: theme('colors.black.DEFAULT');
-    color: theme('colors.grey.50');
+    background-color: theme('colors.surface-menu-item-active');
+    color: theme('colors.text-label-menus-active');
   }
 }
 
@@ -108,8 +108,8 @@ $zindex-modal-background: 500;
   padding-bottom: 2em;
 
   .w-header {
-    color: theme('colors.white.DEFAULT');
-    background-color: theme('colors.primary.DEFAULT');
+    color: theme('colors.text-label-menus-default');
+    background-color: theme('colors.surface-menus');
 
     > .row {
       // reset inline padding added to w-header for sidebar offset

client/scss/components/_panel.scss

@@ -63,7 +63,7 @@ $header-button-size: theme('spacing.6');
   display: inline-grid;
   justify-content: center;
   align-content: center;
-  color: theme('colors.primary.DEFAULT');
+  color: theme('colors.icon-primary');
   border-radius: theme('borderRadius.full');
   margin: 0;
   padding: 0;
@@ -72,7 +72,7 @@ $header-button-size: theme('spacing.6');
 
   &:focus-visible,
   &:hover {
-    background-color: $color-grey-5;
+    background-color: theme('colors.white-10');
 
     @media (forced-colors: active) {
       border: 1px solid currentColor;
@@ -80,7 +80,7 @@ $header-button-size: theme('spacing.6');
   }
 
   &[disabled] {
-    color: $color-grey-3;
+    color: theme('colors.text-placeholder');
     cursor: not-allowed;
     // Counter hover styles.
     background-color: transparent;

client/scss/components/_preview-error.scss

@@ -1,5 +1,5 @@
 .preview-error {
-  @apply w-bg-white;
+  @apply w-bg-surface-page;
   position: absolute;
   inset-inline-start: 0;
   width: 100%;
@@ -13,7 +13,7 @@
   }
 
   &__title {
-    @apply w-h4 w-text-grey-600;
+    @apply w-h4 w-text-text-context;
   }
 
   &__details {

client/scss/components/_preview-panel.scss

@@ -40,7 +40,7 @@
   }
 
   &__sizes {
-    @apply w-border-grey-100 w-border-b;
+    @apply w-border-border-furniture w-border-b;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -50,7 +50,7 @@
   }
 
   &__size-button {
-    @apply w-text-grey-400 w-transition hover:w-transform hover:w-scale-110 hover:w-text-primary focus:w-text-primary;
+    @apply w-text-text-meta w-transition hover:w-transform hover:w-scale-110 hover:w-text-text-label focus:w-text-text-label;
 
     width: 2rem;
     height: 2rem;
@@ -108,7 +108,7 @@
   &--mobile &__size-button--mobile,
   &--tablet &__size-button--tablet,
   &--desktop &__size-button--desktop {
-    @apply w-bg-primary w-text-white w-transform-none w-border w-border-transparent;
+    @apply w-bg-surface-menus w-text-text-button w-transform-none w-border w-border-transparent;
   }
 
   &__controls {
@@ -121,14 +121,14 @@
     // but always show it if there are multiple preview modes
     .preview-panel--has-errors &:not(&--multiple),
     &--multiple {
-      @apply w-border-grey-100 w-border-t;
+      @apply w-border-border-furniture w-border-t;
       padding-top: 1rem;
       margin-top: 1rem;
     }
   }
 
   &__error-banner {
-    @apply w-text-grey-600 w-duration-1000 w-ease-in-out w-translate-y-20;
+    @apply w-text-text-context w-duration-1000 w-ease-in-out w-translate-y-20;
     transition-property: max-height, transform, visibility;
     visibility: hidden;
     max-height: 0;
@@ -166,7 +166,7 @@
     justify-content: center;
     gap: 1rem;
     margin-bottom: 0;
-    background-color: theme('colors.white.DEFAULT');
+    background-color: theme('colors.surface-page');
 
     .w-field__label {
       margin-bottom: 0;

client/scss/components/_progressbar.scss

@@ -1,7 +1,7 @@
 .progress {
   border-radius: 1.2em;
-  background-color: $color-teal-darker;
-  border: 1px solid $color-teal;
+  background-color: theme('colors.surface-button-hover');
+  border: 1px solid theme('colors.surface-button-default');
   opacity: 0;
 
   &.active {
@@ -15,9 +15,9 @@
     overflow: hidden;
     text-align: end;
     line-height: 1.2em;
-    color: $color-white;
+    color: theme('colors.text-button');
     font-size: 0.85em;
-    background-color: $color-teal;
+    background-color: theme('colors.surface-button-default');
     height: 1.2em;
     padding-inline-end: 1em;
 

client/scss/components/_skiplink.scss

@@ -10,7 +10,7 @@
   }
 
   &.button {
-    background: theme('colors.secondary.DEFAULT');
-    border: theme('colors.secondary.DEFAULT');
+    background: theme('colors.surface-button-default');
+    border: theme('colors.surface-button-default');
   }
 }

client/scss/components/_status-tag.scss

@@ -7,18 +7,19 @@
   // stylelint-disable-next-line property-disallowed-list
   text-transform: uppercase;
   padding: 0 0.5em;
-  border: 1px solid theme('colors.grey.200');
-  color: theme('colors.grey.400');
+  border: 1px solid theme('colors.border-furniture');
+  color: theme('colors.text-context');
   -webkit-font-smoothing: auto;
   line-height: 19px;
   font-size: 0.8em;
   margin: 0 0.5em 0.5em;
-  background: $color-white url('#{$images-root}bg-dark-diag.svg');
+  background: theme('colors.surface-page')
+    url('#{$images-root}bg-dark-diag.svg');
 
   &.w-status--primary {
-    color: $color-grey-2;
-    border: 1px solid $color-grey-2;
-    background: $color-white;
+    color: theme('colors.text-meta');
+    border: 1px solid theme('colors.text-meta');
+    background: theme('colors.surface-page');
   }
 
   &.w-status--disabled,
@@ -27,9 +28,9 @@
   }
 
   &--label {
-    color: $color-grey-2;
-    background: $color-grey-4;
-    border: $color-grey-4;
+    color: theme('colors.text-context');
+    background: theme('colors.border-button-small-outline-default');
+    border: theme('colors.border-button-small-outline-default');
     font-weight: 500;
   }
 }
@@ -41,14 +42,14 @@
 button.w-status:hover,
 a.w-status:hover,
 a.w-status.w-status--primary:hover {
-  border-color: $color-teal;
-  color: $color-teal;
+  border-color: theme('colors.border-button-outline-default');
+  color: theme('colors.text-button-outline-default');
 }
 
 button.w-status:hover {
-  border-color: $color-teal-dark;
-  background-color: $color-teal-darker;
-  color: $color-white;
+  border-color: theme('colors.border-button-outline-default');
+  background-color: theme('colors.surface-button-hover');
+  color: theme('colors.surface-page');
 }
 
 // Special case for text-transform: uppercase.

client/scss/components/_summary.scss

@@ -6,7 +6,7 @@
     calc(theme('fontSize.30') * 3)
   );
 
-  color: theme('colors.secondary.DEFAULT');
+  color: theme('colors.text-link-default');
   margin-bottom: theme('spacing.8');
   padding-top: theme('spacing.8');
 
@@ -59,10 +59,10 @@
 }
 
 // Media for Windows High Contrast Mode
-@media (forced-colors: $media-forced-colours) {
+@media (forced-colors: active) {
   .w-summary {
     .icon {
-      color: $system-color-link-text;
+      color: LinkText;
       opacity: 1;
     }
   }

client/scss/components/_tabs.scss

@@ -4,15 +4,15 @@
   }
 
   &__list {
-    @apply w-flex w-pr-0 w-my-[3px] w-space-x-6 w-border-b w-border-grey-100 w-w-fit;
+    @apply w-flex w-pr-0 w-my-[3px] w-space-x-6 w-border-b w-border-border-furniture w-w-fit;
   }
 
   &__tab {
     @apply w-label-3
     w-box-border
     w-inline-flex
-    w-text-grey-400
-    hover:w-text-primary
+    w-text-text-meta
+    hover:w-text-text-label
     w-whitespace-nowrap
     w-py-4
     w-font-medium
@@ -20,7 +20,7 @@
     after:w-block
     after:w-w-0
     after:w-h-[2px]
-    after:w-bg-primary
+    after:w-bg-icon-primary
     after:w-absolute
     after:w-left-0
     after:-w-bottom-px
@@ -32,7 +32,7 @@
     motion-reduce:after:w-transition-none;
 
     &[aria-selected='true'] {
-      @apply after:w-w-full w-text-primary after:forced-colors:w-w-full;
+      @apply after:w-w-full w-text-text-label after:forced-colors:w-w-full;
     }
   }
 
@@ -49,7 +49,7 @@
     w-bg-critical-200
     w-text-white
     w-border
-    w-border-grey-50
+    w-border-surface-page
     w-rounded-[1rem];
   }
 

client/scss/components/_tag.scss

@@ -2,16 +2,16 @@
 // free tagging tags from taggit
 .tag {
   border-radius: 2px;
-  background-color: $color-teal;
+  background-color: theme('colors.surface-button-default');
   padding: 0.2em 0.5em;
-  color: $color-white;
+  color: theme('colors.text-button');
   line-height: 2em;
   white-space: nowrap;
 
   &:before {
     content: '';
     display: inline-block;
-    background: $color-white;
+    background: theme('colors.text-button');
     padding-inline-end: 0.5rem;
     width: 16px;
     height: 16px;
@@ -26,8 +26,8 @@
 }
 
 a.tag:hover {
-  background-color: $color-teal-darker;
-  color: $color-white;
+  background-color: theme('colors.surface-button-hover');
+  color: theme('colors.text-button');
 }
 
 .taglist {
@@ -43,7 +43,7 @@ a.tag:hover {
     }
 
     font-weight: 700;
-    color: $color-grey-1;
+    color: theme('colors.text-context');
     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: $color-white;
+  color: theme('colors.text-button');
   text-align: center;
   text-decoration: none;
-  background-color: $color-black;
+  background-color: theme('colors.surface-tooltip');
   border-radius: 4px;
 }
 
@@ -51,21 +51,21 @@
   bottom: 0;
   inset-inline-start: 50%;
   margin-inline-start: -5px;
-  border-top-color: $color-black;
+  border-top-color: theme('colors.surface-tooltip');
   border-width: 5px 5px 0;
 }
 
 .tooltip.top-left .tooltip-arrow {
   bottom: 0;
   inset-inline-start: 5px;
-  border-top-color: $color-black;
+  border-top-color: theme('colors.surface-tooltip');
   border-width: 5px 5px 0;
 }
 
 .tooltip.top-right .tooltip-arrow {
   inset-inline-end: 5px;
   bottom: 0;
-  border-top-color: $color-black;
+  border-top-color: theme('colors.surface-tooltip');
   border-width: 5px 5px 0;
 }
 
@@ -73,7 +73,7 @@
   top: 50%;
   inset-inline-start: 0;
   margin-top: -5px;
-  border-inline-end-color: $color-black;
+  border-inline-end-color: theme('colors.surface-tooltip');
   border-width: 5px 5px 5px 0;
 }
 
@@ -81,7 +81,7 @@
   top: 50%;
   inset-inline-end: 0;
   margin-top: -5px;
-  border-inline-start-color: $color-black;
+  border-inline-start-color: theme('colors.surface-tooltip');
   border-width: 5px 0 5px 5px;
 }
 
@@ -89,20 +89,20 @@
   top: 0;
   inset-inline-start: 50%;
   margin-inline-start: -5px;
-  border-bottom-color: $color-black;
+  border-bottom-color: theme('colors.surface-tooltip');
   border-width: 0 5px 5px;
 }
 
 .tooltip.bottom-left .tooltip-arrow {
   top: 0;
   inset-inline-start: 5px;
-  border-bottom-color: $color-black;
+  border-bottom-color: theme('colors.surface-tooltip');
   border-width: 0 5px 5px;
 }
 
 .tooltip.bottom-right .tooltip-arrow {
   top: 0;
   inset-inline-end: 5px;
-  border-bottom-color: $color-black;
+  border-bottom-color: theme('colors.surface-tooltip');
   border-width: 0 5px 5px;
 }

client/scss/components/_userbar.scss

@@ -69,10 +69,9 @@ $positions: (
   width: $size-home-button;
   height: $size-home-button;
   margin: 0;
-  background-color: $color-white;
+  background-color: theme('colors.surface-page');
   border: 2px solid transparent;
   border-radius: 50%;
-  color: $color-black;
   padding: 0;
   cursor: pointer;
   box-shadow: $box-shadow-props;
@@ -94,7 +93,7 @@ $positions: (
     align-items: center;
     background-color: theme('colors.critical.200');
     border-radius: theme('borderRadius.full');
-    color: $color-white;
+    color: theme('colors.text-button');
     font-size: theme('fontSize.14');
     line-height: theme('lineHeight.none');
     height: theme('spacing.5');
@@ -103,13 +102,13 @@ $positions: (
     inset-inline-end: -5px;
     top: -5px;
 
-    @media (forced-colors: $media-forced-colours) {
+    @media (forced-colors: active) {
       border: theme('spacing.px') solid ButtonText;
     }
   }
 
   &:focus {
-    outline: $color-focus-outline solid 3px;
+    outline: theme('colors.focus') solid 3px;
   }
 }
 
@@ -143,7 +142,7 @@ $positions: (
 
 .w-userbar__item {
   margin: 0;
-  background-color: theme('colors.primary.DEFAULT');
+  background-color: theme('colors.surface-menus');
   opacity: 0;
   overflow: hidden;
   transition-duration: 0.125s;
@@ -184,7 +183,7 @@ $positions: (
   a,
   .w-action,
   button {
-    color: $color-white;
+    color: theme('colors.text-label-menus-default');
     display: block;
     text-decoration: none;
     transform: none;
@@ -194,12 +193,12 @@ $positions: (
 
     &:hover,
     &:focus {
-      color: $color-white;
-      background-color: rgba(100, 100, 100, 0.15);
+      color: theme('colors.text-label-menus-default');
+      background-color: theme('colors.surface-menu-item-active');
     }
 
     &:focus {
-      outline: $color-focus-outline solid 3px;
+      outline: theme('colors.focus') solid 3px;
     }
 
     &-icon {
@@ -255,8 +254,8 @@ $positions: (
     top: calc(-1 * $size / 2);
     inset-inline-end: calc(-1 * $size / 2);
     border-radius: theme('borderRadius.full');
-    border: 2px solid theme('colors.primary.DEFAULT');
-    background: theme('colors.white.DEFAULT');
+    border: 2px solid theme('colors.icon-primary');
+    background: theme('colors.surface-page');
   }
 
   .w-dialog__content {
@@ -287,7 +286,7 @@ $positions: (
   }
 
   .w-a11y-result__row {
-    border-top: 1px solid theme('colors.grey.100');
+    border-top: 1px solid theme('colors.border-furniture');
   }
 
   .w-a11y-result__header {
@@ -302,7 +301,7 @@ $positions: (
   }
 
   .w-a11y-result__name {
-    color: theme('colors.primary.200');
+    color: theme('colors.text-label');
   }
 
   .w-a11y-result__container {
@@ -312,7 +311,7 @@ $positions: (
   }
 
   .w-a11y-result__subtotal_count {
-    color: theme('colors.grey.600');
+    color: theme('colors.text-context');
     width: theme('spacing.5');
     text-align: center;
   }
@@ -320,8 +319,8 @@ $positions: (
   .w-a11y-result__selector {
     display: flex;
     align-items: center;
-    background: theme('colors.grey.50');
-    color: theme('colors.grey.600');
+    background: theme('colors.surface-header');
+    color: theme('colors.text-context');
     border-radius: theme('borderRadius.DEFAULT');
     margin-inline-end: theme('spacing.[2.5]');
     margin-bottom: theme('spacing.[2.5]');
@@ -329,22 +328,22 @@ $positions: (
 
     &:hover,
     &:focus {
-      background: theme('colors.secondary.DEFAULT');
-      color: theme('colors.white.DEFAULT');
+      background: theme('colors.surface-button-default');
+      color: theme('colors.text-button');
 
       .w-a11y-result__icon {
-        fill: theme('colors.white.DEFAULT');
+        fill: theme('colors.text-button');
       }
     }
 
-    @media (forced-colors: $media-forced-colours) {
+    @media (forced-colors: active) {
       border: theme('spacing.px') solid ButtonText;
     }
   }
 
   .w-a11y-result__icon {
     flex-shrink: 0;
-    fill: theme('colors.secondary.DEFAULT');
+    fill: theme('colors.surface-button-default');
     height: theme('spacing.[3.5]');
     width: theme('spacing.[3.5]');
     margin-inline-end: theme('spacing.[2.5]');
@@ -362,26 +361,26 @@ $positions: (
   line-height: theme('lineHeight.none');
   height: theme('spacing.5');
   width: theme('spacing.5');
-  color: theme('colors.white.DEFAULT');
+  color: theme('colors.text-button');
 
   &.has-errors {
     background-color: theme('colors.critical.200');
   }
 
-  @media (forced-colors: $media-forced-colours) {
+  @media (forced-colors: active) {
     border: theme('spacing.px') solid ButtonText;
   }
 }
 
 //Media for Windows High Contrast
 
-@media (forced-colors: $media-forced-colours) {
+@media (forced-colors: active) {
   .w-userbar-icon {
-    fill: $system-color-link-text;
+    fill: LinkText;
   }
 
   .w-userbar__item {
-    border: 1px solid $system-color-button-text;
+    border: 1px solid ButtonText;
   }
 }
 

client/scss/components/_whats-new.scss

@@ -11,6 +11,7 @@
     align-items: center;
     border-radius: theme('borderRadius.md');
     padding: theme('spacing.6');
+    color: theme('colors.grey.600');
     background-color: theme('colors.warning.50');
     border: 5px solid transparent;
   }
@@ -47,6 +48,10 @@
     text-decoration: underline;
     text-decoration-thickness: 2px;
     text-underline-offset: 3px;
+
+    &:hover {
+      color: theme('colors.secondary.600');
+    }
   }
 
   &__dismiss {
@@ -59,8 +64,8 @@
       border-radius: theme('borderRadius.full');
       width: theme('spacing.6');
       height: theme('spacing.6');
-      background-color: theme('colors.white.DEFAULT');
-      color: theme('colors.primary.DEFAULT');
+      background-color: theme('colors.surface-page');
+      color: theme('colors.icon-primary');
 
       @media (forced-colors: active) {
         background-color: Canvas;

client/scss/components/_workflow-tasks.scss

@@ -6,10 +6,10 @@
 
   &__task {
     display: inline-block;
-    background-color: theme('colors.secondary.50');
-    border: 2px solid theme('colors.secondary.100');
+    background-color: theme('colors.surface-page');
+    border: 2px solid theme('colors.border-button-outline-default');
     border-radius: 5px;
-    color: $color-teal;
+    color: theme('colors.text-link-default');
     min-width: $task-width;
     height: $task-height;
     margin: 7px;

client/scss/components/_workflow-timeline.scss

@@ -29,10 +29,10 @@
     }
 
     &--pending {
-      color: theme('colors.grey.400');
+      color: theme('colors.text-meta');
 
       .icon {
-        color: theme('colors.grey.200');
+        opacity: theme('opacity.80');
       }
     }
   }
@@ -40,7 +40,7 @@
   &__icon {
     position: relative;
     flex-shrink: 0;
-    background: theme('colors.white.DEFAULT');
+    background: theme('colors.surface-page');
     @media (forced-colors: active) {
       background: Canvas;
     }
@@ -57,7 +57,7 @@
     top: theme('spacing.4');
     inset-inline-start: theme('spacing.[2.5]');
     border-inline-start: theme('borderWidth.DEFAULT') dashed
-      theme('colors.grey.200');
+      theme('colors.text-meta');
   }
 
   &__footer {
@@ -69,11 +69,11 @@
   &__footer-link {
     @include transition(color 0.15s ease);
     font-size: theme('fontSize.14');
-    color: theme('colors.secondary.DEFAULT');
+    color: theme('colors.text-link-default');
     text-decoration: none;
 
     &:hover {
-      color: theme('colors.secondary.600');
+      color: theme('colors.text-link-hover');
     }
   }
 }

client/scss/components/forms/_drop-zone.scss

@@ -1,9 +1,9 @@
 // file drop zones
 .drop-zone {
   border-radius: 5px;
-  border: 2px dashed $color-grey-4;
+  border: 2px dashed theme('colors.border-furniture');
   padding: $mobile-nice-padding;
-  background-color: $color-grey-5;
+  background-color: theme('colors.surface-header');
   margin-bottom: 1em;
   text-align: center;
 
@@ -12,6 +12,6 @@
   }
 
   &.hovered {
-    border-color: $color-teal;
+    border-color: theme('colors.surface-button-default');
   }
 }

client/scss/components/forms/_error-message.scss

@@ -7,7 +7,7 @@
   font-weight: bold;
   color: theme('colors.critical.200');
 
-  @media (forced-colors: $media-forced-colours) {
+  @media (forced-colors: active) {
     forced-color-adjust: none;
   }
 

client/scss/components/forms/_field-comment-control.scss

@@ -3,7 +3,7 @@
 
   @include transition(opacity 0.2s ease);
   position: absolute;
-  color: $color-teal;
+  color: theme('colors.text-button-outline-default');
   background: none;
   border: 0;
   padding: 0;

client/scss/components/forms/_field.scss

@@ -77,7 +77,7 @@
   $offset: calc($text-input-height / 2 - $size / 2);
   width: $size;
   height: $size;
-  color: theme('colors.primary.DEFAULT');
+  color: theme('colors.icon-primary');
   position: absolute;
   // Top padding of text input and half of text size.
   top: $offset;

client/scss/components/forms/_input-base.scss

@@ -5,19 +5,19 @@
 @mixin input-base() {
   appearance: none;
   border-radius: theme('borderRadius.DEFAULT');
-  color: $color-input-text;
-  background-color: $color-input-bg;
-  border: 1px solid $color-input-border;
+  color: theme('colors.text-context');
+  background-color: theme('colors.surface-field');
+  border: 1px solid theme('colors.border-field-default');
 
   &:hover {
-    border-color: $color-input-hover-border;
+    border-color: theme('colors.border-field-hover');
   }
 
   &[disabled],
   &[disabled]:hover {
-    color: $color-input-disabled-text;
-    background-color: $color-input-disabled-bg;
-    border-color: $color-input-disabled-border;
+    color: theme('colors.text-placeholder');
+    background-color: theme('colors.surface-field-inactive');
+    border-color: theme('colors.border-field-inactive');
     cursor: not-allowed;
   }
 
@@ -27,10 +27,10 @@
   .w-field--error > .w-field__input > * > &,
   // Ideally, individual widgets should show they are in error state with aria-invalid.
   &[aria-invalid='true'] {
-    border-color: $color-input-error-border;
+    border-color: theme('colors.critical.200');
   }
 
   &::placeholder {
-    color: $color-input-disabled-text;
+    color: theme('colors.text-placeholder');
   }
 }

client/scss/components/forms/_nested-panel.scss

@@ -36,7 +36,7 @@ $guide-line-bottom-margin: calc($form-field-spacing / 3);
 
   .w-panel__anchor {
     // Mask the overlap with the parent panel’s guide line.
-    background-color: $color-white;
+    background-color: theme('colors.surface-page');
   }
 
   .w-field__wrapper {

client/scss/components/forms/_radio-checkbox-multiple.scss

@@ -14,7 +14,7 @@
 
   label {
     @apply w-body-text;
-    color: theme('colors.grey.600');
+    color: theme('colors.text-context');
     display: inline-flex;
     align-items: center;
     line-height: normal;

client/scss/components/forms/_radio-checkbox.scss

@@ -29,7 +29,7 @@ $radio-checkbox-label-gap: theme('spacing.[2.5]');
   }
 
   &:checked::before {
-    background: $color-teal;
+    background: theme('colors.border-button-outline-default');
 
     @media (forced-colors: active) {
       background: Highlight;

client/scss/components/forms/_select.scss

@@ -2,17 +2,31 @@
 @use 'sass:math';
 
 $select-size: $text-input-height;
-$chevron-width: 1rem;
-$chevron-height: 1rem;
+$chevron-width: 0.375rem;
+$chevron-height: 0.375rem;
 $chevron-top-offset: math.div($select-size - $chevron-height, 2);
 $chevron-inline-end-offset: math.div($select-size - $chevron-width, 2);
 
 @mixin select-arrow() {
-  background-image: url('#{$images-root}icons/arrow-down.svg');
+  background-image: linear-gradient(
+      45deg,
+      transparent 50%,
+      theme('colors.text-label') 33%,
+      theme('colors.text-label') 66%,
+      transparent 66%
+    ),
+    linear-gradient(
+      -45deg,
+      transparent 50%,
+      theme('colors.text-label') 33%,
+      theme('colors.text-label') 66%,
+      transparent 66%
+    );
+  background-position: calc(100% - $chevron-top-offset - $chevron-width)
+      $chevron-top-offset,
+    calc(100% - $chevron-inline-end-offset) $chevron-top-offset;
+  background-size: $chevron-width $chevron-width, $chevron-width $chevron-width;
   background-repeat: no-repeat;
-  background-size: $chevron-width;
-  background-position-x: calc(100% - $chevron-inline-end-offset);
-  background-position-y: $chevron-top-offset;
 }
 
 select {

client/scss/components/forms/_switch.scss

@@ -23,7 +23,7 @@ $switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
     position: absolute;
     top: 50%;
     transform: translate(calc(var(--w-direction-factor) * 5px), -50%);
-    color: $color-white;
+    color: theme('colors.text-button');
 
     @media (forced-colors: active) {
       color: SelectedItemText;
@@ -45,8 +45,8 @@ $switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
       height: $switch-height + $switch-border * 2;
       width: $switch-width + $switch-border * 2;
       border-radius: $switch-border-radius;
-      background: theme('colors.grey.400');
-      border: $switch-border solid theme('colors.grey.400');
+      background: theme('colors.icon-secondary');
+      border: $switch-border solid theme('colors.icon-secondary');
     }
 
     &::after {
@@ -58,15 +58,15 @@ $switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
       );
       height: $switch-height;
       width: $switch-height;
-      border: $switch-border solid $color-white;
+      border: $switch-border solid theme('colors.text-button');
       border-radius: theme('borderRadius.full');
-      background-color: $color-white;
+      background-color: theme('colors.surface-page');
     }
   }
 
   [type='checkbox']:checked + &__toggle::before {
-    background: $color-teal;
-    border-color: $color-teal;
+    background: theme('colors.text-button-outline-default');
+    border-color: theme('colors.text-button-outline-default');
 
     @media (forced-colors: active) {
       background: SelectedItem;
@@ -90,12 +90,12 @@ $switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
   }
 
   [type='checkbox']:focus-visible + &__toggle {
-    outline: $color-focus-outline solid $switch-outline;
+    outline: theme('colors.focus') solid $switch-outline;
   }
 
   @supports not selector(:focus-visible) {
     [type='checkbox']:focus + &__toggle {
-      outline: $color-focus-outline solid $switch-outline;
+      outline: theme('colors.focus') solid $switch-outline;
     }
   }
 

client/scss/components/forms/_tagit.scss

@@ -6,18 +6,18 @@
   }
 }
 
-@media (forced-colors: $media-forced-colours) {
+@media (forced-colors: active) {
   .tagit {
     .tag {
       border: 1px solid;
 
       &::before {
-        background: $system-color-button-text;
+        background: ButtonText;
       }
     }
   }
 
   .tagit-close .ui-icon.ui-icon-close:before {
-    background: $system-color-button-text;
+    background: ButtonText;
   }
 }

client/scss/components/forms/_title.scss

@@ -6,7 +6,7 @@
   textarea,
   .Draftail-Editor .public-DraftEditor-content {
     @apply w-h2;
-    color: $color-input-text;
+    color: theme('colors.text-context');
   }
 }
 
@@ -36,7 +36,7 @@
   textarea,
   .Draftail-Editor .public-DraftEditor-content {
     @apply w-h1;
-    color: $color-input-text;
+    color: theme('colors.text-context');
     // Slightly out-dented so the field’s is horizontally aligned.
     padding-inline-start: theme('spacing[1.5]');
     margin-inline-start: calc(-1 * theme('spacing[1.5]'));

client/scss/elements/_elements.scss

@@ -30,6 +30,8 @@ html {
   height: 100%;
   // Set the whole admin to border-box by default.
   box-sizing: border-box;
+  // Display viewport overscroll areas in a theme-appropriate color.
+  background-color: theme('colors.surface-page');
 }
 
 body {
@@ -52,7 +54,7 @@ body {
 }
 
 hr {
-  border: 1px solid $color-grey-4;
+  border: 1px solid theme('colors.border-furniture');
   border-width: 1px 0 0;
   margin: 1.5em 0;
 }

client/scss/elements/_typography.scss

@@ -3,7 +3,7 @@ body {
   font-family: $font-sans;
   font-size: 85%;
   line-height: 1.5em;
-  color: $color-text-base;
+  color: theme('colors.text-context');
 }
 
 h1,
@@ -14,7 +14,7 @@ h5,
 h6 {
   font-weight: normal;
   line-height: theme('lineHeight.tight');
-  color: theme('colors.primary.DEFAULT');
+  color: theme('colors.text-label');
 }
 
 h1 {
@@ -32,17 +32,18 @@ p {
 }
 
 a {
-  color: $color-link;
+  color: theme('colors.text-link-default');
   text-decoration: none;
 
   &:hover {
-    color: $color-link-hover;
+    color: theme('colors.text-link-hover');
   }
 }
 
 code {
   box-shadow: inset 0 0 4px 0 theme('colors.black-20');
-  background-color: $color-white;
+  background-color: theme('colors.surface-page');
+  color: theme('colors.text-context');
   font-family: $font-mono;
   padding: 2px 5px;
 }
@@ -50,8 +51,9 @@ code {
 kbd {
   border-radius: 3px;
   font-family: $font-sans;
-  border: 1px solid $color-grey-2;
+  border: 1px solid currentColor;
   border-color: theme('colors.black-20');
+  color: theme('colors.text-meta');
   padding: 0.3em 0.5em;
 }
 
@@ -71,7 +73,7 @@ dl {
 }
 
 dt {
-  color: $color-grey-2;
+  color: theme('colors.text-meta');
   font-size: 0.9em;
 }
 

client/scss/layouts/_404.scss

@@ -4,9 +4,9 @@
   inset-inline-start: 0;
   width: 100vw;
   height: 100vh;
-  background-color: $color-teal-darker;
+  background-color: theme('colors.secondary.400');
   font-family: $font-sans;
-  color: $color-white;
+  color: theme('colors.white.DEFAULT');
 }
 
 .page404__logo {
@@ -14,8 +14,8 @@
   height: 500px;
 
   // Media for Windows High Contrast mode
-  @media (forced-colors: $media-forced-colours) {
-    background-color: $system-color-link-text;
+  @media (forced-colors: active) {
+    background-color: LinkText;
   }
 }
 
@@ -44,12 +44,12 @@ a.button.page404__button {
   line-height: 2em;
   height: 2.5em;
   padding: 0 0.5em;
-  background-color: $color-teal-darker;
-  border: 4px solid $color-teal;
+  background-color: theme('colors.secondary.400');
+  border: 4px solid theme('colors.secondary.DEFAULT');
   color: inherit;
 
   &:hover {
-    background-color: $color-teal;
+    background-color: theme('colors.secondary.DEFAULT');
   }
 }
 

client/scss/layouts/_add-multiple.scss

@@ -26,7 +26,7 @@
     cursor: pointer;
 
     button {
-      background-color: $color-teal-darker;
+      background-color: theme('colors.surface-button-hover');
     }
   }
 }
@@ -94,7 +94,7 @@
     width: 1em;
     font-size: 10em;
     line-height: 1.4em;
-    color: theme('colors.grey.100');
+    color: theme('colors.icon-secondary');
   }
 
   canvas,

client/scss/layouts/_compare-revisions.scss

@@ -5,7 +5,7 @@ $color-deletion-light: #ffebeb;
 
 .comparison {
   &__child-object {
-    border-top: 1px dashed $color-grey-4;
+    border-top: 1px dashed theme('colors.border-furniture');
     padding: 1em;
 
     dd {

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

@@ -4,9 +4,9 @@
 
   .current-focal-point-indicator {
     @include transition(opacity 0.2s ease);
-    box-shadow: 1px 1px 10px 0 $color-black;
+    box-shadow: 1px 1px 10px 0 theme('colors.black-50');
     position: absolute;
-    border: 3px solid $color-teal;
+    border: 3px solid theme('colors.border-button-outline-default');
     opacity: 0.7;
 
     &.hidden {

client/scss/layouts/_login.scss

@@ -13,7 +13,7 @@
   }
 
   // support older browsers that do not support radial gradient 'at' usage
-  background: theme('colors.primary.DEFAULT');
+  background: theme('colors.surface-menus');
   /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
   background: var(
     --w-login-fullscreen-background,
@@ -24,7 +24,7 @@
 .login {
   @include login-fullscreen-background;
 
-  color: theme('colors.primary.DEFAULT');
+  color: theme('colors.text-label');
 
   .wrapper {
     align-items: center;
@@ -56,7 +56,7 @@
     height: auto;
     float: none;
     padding: theme('spacing.10') theme('spacing.12');
-    background: theme('colors.white.DEFAULT');
+    background: theme('colors.surface-page');
     box-shadow: theme('boxShadow.md');
     border-radius: theme('borderRadius.md');
     margin-bottom: 15vh; // should appear slightly above centre
@@ -127,7 +127,7 @@
     width: theme('spacing.8');
   }
 
-  @media (forced-colors: $media-forced-colours) and (prefers-color-scheme: dark) {
+  @media (forced-colors: active) and (prefers-color-scheme: dark) {
     .login-logo-img {
       filter: invert(100%);
     }

client/scss/layouts/_modeladmin.scss

@@ -28,7 +28,7 @@
     }
 
     thead th.sorted a {
-      color: $color-teal;
+      color: theme('colors.text-link-default');
     }
 
     tbody {
@@ -54,12 +54,12 @@
     padding: 0 15px;
 
     h2 {
-      background-color: $color-grey-5;
+      background-color: theme('colors.surface-header');
       font-size: 13px;
       line-height: 31px;
       margin-top: 0;
       padding-inline-start: 8px;
-      border-bottom: 1px solid $color-grey-4;
+      border-bottom: 1px solid theme('colors.border-furniture');
     }
 
     h3 {
@@ -88,9 +88,9 @@
       font-weight: normal;
       vertical-align: middle;
       display: block;
-      background-color: $color-white;
-      border: 1px solid $color-teal;
-      color: $color-teal;
+      background-color: theme('colors.surface-page');
+      border: 1px solid theme('colors.text-button-outline-default');
+      color: theme('colors.text-button-outline-default');
       text-decoration: none;
       position: relative;
       overflow: hidden;
@@ -99,18 +99,18 @@
       -moz-appearance: none;
 
       &:hover {
-        background-color: $color-teal-dark;
-        border-color: $color-teal-dark;
-        color: $color-white;
+        background-color: theme('colors.text-button-outline-default');
+        border-color: theme('colors.text-button-outline-default');
+        color: theme('colors.surface-page');
       }
     }
 
     li.selected a {
       // stylelint-disable-next-line declaration-no-important
-      color: $color-white !important;
+      color: theme('colors.surface-page') !important;
       // stylelint-disable-next-line declaration-no-important
-      border-color: $color-teal !important;
-      background-color: $color-teal;
+      border-color: theme('colors.text-link-default') !important;
+      background-color: theme('colors.text-link-default');
     }
   }
 
@@ -131,7 +131,7 @@
 
   .pagination {
     margin-top: 3em;
-    border-top: 1px dashed theme('colors.grey.100');
+    border-top: 1px dashed theme('colors.border-furniture');
     padding: 2em 1em 0;
 
     ul {

client/scss/layouts/_workflow-progress.scss

@@ -5,8 +5,8 @@
 
 .workflow-progress-table {
   width: 100%;
-  border-top: 1px solid $color-grey-3;
-  border-bottom: 1px solid $color-grey-3;
+  border-top: 1px solid theme('colors.border-field-default');
+  border-bottom: 1px solid theme('colors.border-field-default');
   font-size: 0.8em;
 
   td,
@@ -21,18 +21,18 @@
   &__left-column {
     font-size: 1.2em;
     font-weight: bold;
-    color: $color-text-base;
+    color: theme('colors.text-context');
   }
 
   &--tasks {
-    background-color: $color-grey-5;
+    background-color: theme('colors.surface-header');
 
     .workflow-progress-table__left-column {
-      background-color: $color-grey-4;
+      background-color: theme('colors.border-furniture');
     }
   }
 
   &--timeline tr {
-    border-bottom: 1px solid $color-grey-3;
+    border-bottom: 1px solid theme('colors.border-field-default');
   }
 }

client/scss/overrides/_utilities.dropdowns.scss

@@ -25,24 +25,23 @@
 //  Default dropdown theme
 // =============================================================================
 .t-default .u-btn-current {
-  border-color: $color-grey-4;
-  color: $color-teal;
+  border-color: theme('colors.border-button-small-outline-default');
+  color: theme('colors.text-button-outline-default');
 }
 
 .t-default .u-btn-current:hover {
-  background: $color-teal;
-  color: $color-white;
-  border-color: $color-teal;
+  background: theme('colors.text-button');
+  border-color: theme('colors.border-button-outline-default');
 }
 
 .t-inverted .u-btn-current {
-  background-color: $color-teal-darker;
+  background-color: theme('colors.text-button-outline-default');
   border-color: theme('colors.black-35');
-  color: $color-white;
+  color: theme('colors.text-button');
 }
 
 .t-inverted .u-btn-current:hover {
-  background-color: $color-teal-dark;
+  background-color: theme('colors.surface-button-hover');
   border-color: theme('colors.black-35');
 }
 
@@ -50,19 +49,19 @@
 // Dark theme
 // =============================================================================
 .t-dark .u-link {
-  color: $color-white;
+  color: theme('colors.text-label-menus-default');
 }
 
 .t-dark .u-link:hover {
-  color: $color-white;
+  color: theme('colors.text-label-menus-active');
 }
 
 .t-dark .u-background {
-  background: $color-grey-1;
+  background: theme('colors.surface-tooltip');
 }
 
 .t-dark .u-arrow:before {
-  background-color: $color-grey-1;
+  background-color: theme('colors.surface-tooltip');
 
   @media (forced-colors: active) {
     background-color: ButtonText;

client/scss/overrides/_utilities.focus.scss

@@ -4,7 +4,7 @@
 // Using !important because we want to enforce only one style is used across the UI.
 // Remove :focus selectors once we stop supporting Safari 15.4.
 *:focus {
-  outline: $focus-outline-width solid $color-focus-outline !important;
+  outline: $focus-outline-width solid theme('colors.focus') !important;
 }
 
 *:focus:not(:focus-visible) {
@@ -12,5 +12,5 @@
 }
 
 *:focus-visible {
-  outline: $focus-outline-width solid $color-focus-outline !important;
+  outline: $focus-outline-width solid theme('colors.focus') !important;
 }

client/scss/overrides/_utilities.legacy.scss

@@ -19,7 +19,7 @@
 
 @include media-breakpoint-up(sm) {
   .divider-before {
-    border-inline-start: 1px solid $color-grey-4;
+    border-inline-start: 1px solid theme('colors.border-furniture');
   }
 }
 

client/scss/overrides/_vendor.datetimepicker.scss

@@ -2,8 +2,8 @@
 
 .xdsoft_datetimepicker {
   box-shadow: 0 5px 10px -5px theme('colors.black-35');
-  background: $color-white;
-  border: 1px solid $color-input-border;
+  background: theme('colors.surface-field');
+  border: 1px solid theme('colors.border-field-default');
   padding: 8px;
   padding-inline-start: 0;
   padding-top: 2px;
@@ -66,7 +66,7 @@
     position: relative;
     white-space: nowrap;
     width: 2em;
-    color: $color-teal;
+    color: theme('colors.text-button-outline-default');
     text-align: center;
 
     &:before {
@@ -84,7 +84,7 @@
     }
 
     &:hover {
-      color: $color-teal-darker;
+      color: theme('colors.surface-button-hover');
     }
   }
 
@@ -140,14 +140,14 @@
 
     .xdsoft_time_box {
       position: relative;
-      border: 1px solid $color-grey-4;
+      border: 1px solid theme('colors.border-furniture');
       height: 170px;
       overflow: hidden;
 
       > div > div {
-        background: $color-grey-5;
-        border-top: 1px solid $color-grey-4;
-        color: $color-grey-1;
+        background: theme('colors.surface-header');
+        border-top: 1px solid theme('colors.border-furniture');
+        color: theme('colors.border-furniture');
         font-size: 1em;
         text-align: center;
         border-collapse: collapse;
@@ -175,7 +175,7 @@
     font-size: 14px;
     line-height: 20px;
     font-weight: bold;
-    background-color: $color-white;
+    background-color: theme('colors.surface-page');
     float: left;
     width: 182px;
     text-align: center;
@@ -186,13 +186,13 @@
     }
 
     > .xdsoft_select {
-      border: 1px solid $color-grey-4;
+      border: 1px solid theme('colors.border-furniture');
       position: absolute;
       inset-inline-end: 0;
       top: 30px;
       z-index: 101;
       display: none;
-      background: $color-white;
+      background: theme('colors.surface-field');
       max-height: 160px;
       overflow-y: hidden;
 
@@ -205,7 +205,7 @@
       }
 
       > div > .xdsoft_option:hover {
-        background: theme('colors.secondary.75');
+        background: theme('colors.text-highlight');
 
         // stylelint-disable-next-line max-nesting-depth
         @media (forced-colors: active) {
@@ -242,8 +242,8 @@
     td,
     th {
       width: 14.285%;
-      border: 1px solid $color-grey-4;
-      color: $color-grey-1;
+      border: 1px solid theme('colors.border-furniture');
+      color: theme('colors.text-context');
       font-size: 12px;
       text-align: end;
       padding: 5px 7px;
@@ -253,11 +253,11 @@
     }
 
     td {
-      background-color: $color-white;
+      background-color: theme('colors.surface-page');
     }
 
     th {
-      background: $color-grey-5;
+      background: theme('colors.surface-header');
       font-weight: 700;
       font-size: 0.85em;
       text-align: center;
@@ -268,7 +268,7 @@
   .xdsoft_calendar td.xdsoft_default,
   .xdsoft_calendar td.xdsoft_current,
   .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
-    background: theme('colors.secondary.75');
+    background: theme('colors.text-highlight');
     font-weight: 700;
 
     @media (forced-colors: active) {
@@ -280,7 +280,7 @@
   .xdsoft_calendar td.xdsoft_disabled,
   .xdsoft_time_box > div > div.xdsoft_disabled {
     opacity: 0.5;
-    background: $color-grey-3;
+    background: theme('colors.border-furniture');
 
     @media (forced-colors: active) {
       opacity: 1;
@@ -299,8 +299,8 @@
 
   .xdsoft_calendar td:hover,
   .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
-    color: $color-white;
-    background: $color-teal;
+    color: theme('colors.text-button');
+    background: theme('colors.surface-button-default');
   }
 
   .xdsoft_calendar td.xdsoft_today {
@@ -340,7 +340,7 @@
 
   > .xdsoft_scroller {
     // stylelint-disable-next-line declaration-no-important
-    background: $color-grey-3 !important;
+    background: theme('colors.border-furniture') !important;
     height: 20px;
     border-radius: 3px;
   }

client/scss/overrides/_vendor.tagit.scss

@@ -30,7 +30,7 @@
 .ui-state-default,
 .ui-widget-content .ui-state-default,
 .ui-widget-header .ui-state-default {
-  background-color: $color-white;
+  background-color: theme('colors.surface-page');
 }
 
 .ui-state-hover,
@@ -42,18 +42,18 @@
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
-  background-color: theme('colors.secondary.100');
+  background-color: theme('colors.surface-button-default');
 }
 
 .ui-widget-header {
-  background-color: theme('colors.secondary.100');
-  border-color: theme('colors.grey.100');
+  background-color: theme('colors.surface-button-default');
+  border-color: theme('colors.border-furniture');
 }
 
 .ui-state-highlight,
 .ui-widget-content .ui-state-highlight,
 .ui-widget-header .ui-state-highlight {
-  background-color: theme('colors.grey.50');
+  background-color: theme('colors.surface-header');
 }
 
 .ui-menu .ui-menu-item .ui-menu-item-wrapper {
@@ -71,7 +71,7 @@
     display: block;
     width: 16px;
     height: 16px;
-    background: $color-grey-3;
+    background: theme('colors.icon-secondary');
     mask-image: url('#{$images-root}icons/cross.svg');
     mask-repeat: no-repeat;
   }
@@ -81,7 +81,7 @@
   }
 }
 
-@media (forced-colors: $media-forced-colours) {
+@media (forced-colors: active) {
   .ui-state-hover,
   .ui-widget-content .ui-state-hover,
   .ui-widget-header .ui-state-hover,
@@ -91,6 +91,6 @@
   .ui-state-active,
   .ui-widget-content .ui-state-active,
   .ui-widget-header .ui-state-active {
-    background-color: $system-color-button-text;
+    background-color: ButtonText;
   }
 }

client/scss/overrides/_vendor.tippy.scss

@@ -2,23 +2,23 @@
 
 .tippy-box {
   // Special font size 12px for tooltips
-  @apply w-bg-primary w-text-white w-text-[0.75rem] w-rounded-sm w-font-medium;
+  @apply w-bg-surface-tooltip w-text-text-button w-text-[0.75rem] w-rounded-sm w-font-medium;
 }
 
 .tippy-box[data-placement^='top'] > .tippy-arrow::before {
-  @apply w-border-t-primary;
+  @apply w-border-t-surface-tooltip;
 }
 
 .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
-  @apply w-border-b-primary;
+  @apply w-border-b-surface-tooltip;
 }
 
 .tippy-box[data-placement^='left'] > .tippy-arrow::before {
-  @apply w-border-l-primary;
+  @apply w-border-l-surface-tooltip;
 }
 
 .tippy-box[data-placement^='right'] > .tippy-arrow::before {
-  @apply w-border-r-primary;
+  @apply w-border-r-surface-tooltip;
 }
 
 // Dropdown theme for tippy tooltips
@@ -31,7 +31,7 @@
 }
 
 // Media for Windows High Contrast mode
-@media (forced-colors: $media-forced-colours) {
+@media (forced-colors: active) {
   .tippy-box[data-theme='dropdown'] {
     .tippy-content {
       border: 2px solid transparent;
@@ -39,7 +39,7 @@
   }
 
   .tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
-    @apply w-border-b-primary;
+    @apply w-border-b-surface-tooltip;
     clip-path: polygon(50% 0, 0 100%, 100% 100%);
   }
 }

client/scss/settings/_variables.scss

@@ -40,51 +40,6 @@ $breakpoints: (
   // 1440px
 );
 
-// colours
-$color-teal: theme('colors.secondary.DEFAULT');
-$color-teal-darker: theme('colors.secondary.400');
-$color-teal-dark: theme('colors.secondary.600');
-
-$color-white: theme('colors.white.DEFAULT');
-$color-black: theme('colors.black.DEFAULT');
-
-// darker to lighter
-$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-menu-text: theme('colors.white-80');
-
-$color-text-base: theme('colors.grey.600');
-
-$color-input-text: $color-text-base;
-$color-input-bg: theme('colors.white.DEFAULT');
-$color-input-border: theme('colors.grey.150');
-$color-input-disabled-text: theme('colors.grey.400');
-$color-input-disabled-bg: theme('colors.grey.50');
-$color-input-disabled-border: theme('colors.grey.100');
-$color-input-hover-border: theme('colors.grey.200');
-$color-input-error-border: theme('colors.critical.200');
-
-$color-button: $color-teal;
-$color-button-hover: $color-teal-darker;
-$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;
-
-// The focus outline color is defined without reusing a named color variable
-// because it shouldn’t be reused for anything else in the UI.
-$color-focus-outline: #009072;
-
-// System Colors
-$media-forced-colours: active;
-$system-color-link-text: LinkText;
-$system-color-button-text: ButtonText;
-
 // Fonts
 // Our fonts are based off of a list of system fallbacks to ensure
 // that the most 'up-to-date' and available system font is used and rendered consistently as possible across browsers.

client/scss/tools/_mixins.guide-line.scss

@@ -3,7 +3,7 @@
  * StreamField and InlinePanel.
  */
 
-$guide-line-default-color: theme('colors.grey.150');
+$guide-line-default-color: theme('colors.border-dashed-block');
 $stroke-width: 1px;
 
 @mixin guide-line-vertical() {
@@ -60,7 +60,7 @@ $stroke-width: 1px;
 // More visible guide line for nested panels in the currently-active DOM tree.
 @mixin guide-line-nested() {
   &:is(:hover, :focus-within) {
-    --guide-line-color: theme('colors.primary.DEFAULT');
+    --guide-line-color: theme('colors.icon-primary');
 
     @media (forced-colors: active) {
       --guide-line-color: Highlight;

client/src/components/ComboBox/ComboBox.scss

@@ -5,8 +5,8 @@ $spacing-sm: theme('spacing.5');
 
 .w-combobox {
   width: min(400px, 80vw);
-  background: $color-white;
-  color: $color-input-text;
+  background: theme('colors.surface-page');
+  color: theme('colors.text-context');
   border-radius: theme('borderRadius.DEFAULT');
   font-size: theme('fontSize.18');
   box-shadow: theme('boxShadow.md');
@@ -98,7 +98,7 @@ $spacing-sm: theme('spacing.5');
 }
 
 .w-combobox__option-icon {
-  color: theme('colors.grey.200');
+  color: theme('colors.icon-secondary');
   height: theme('spacing.4');
 
   .icon {

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

@@ -23,7 +23,7 @@
     padding-bottom: 10px;
 
     &--mode-deleting {
-      color: $color-grey-1;
+      color: theme('colors.text-context');
     }
   }
 
@@ -41,7 +41,7 @@
   }
 
   &--mode-deleting &__text {
-    color: $color-grey-3;
+    color: theme('colors.text-placeholder');
   }
 
   &__replies {
@@ -89,7 +89,7 @@
   }
 
   &__error {
-    color: $color-white;
+    color: theme('colors.white.DEFAULT');
     background-color: theme('colors.critical.200');
     border-radius: 3px;
     padding: 5px;
@@ -102,9 +102,9 @@
       height: 26px;
       float: right;
       margin-inline-start: 5px;
-      color: $color-white;
+      color: theme('colors.white.DEFAULT');
       background-color: theme('colors.critical.200');
-      border-color: $color-white;
+      border-color: theme('colors.white.DEFAULT');
       padding: 2px;
       padding-inline-start: 10px;
       padding-inline-end: 10px;

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

@@ -19,11 +19,11 @@
     font-weight: 600;
     font-size: 14px;
     line-height: 130%;
-    color: theme('colors.primary.DEFAULT');
+    color: theme('colors.text-label');
   }
 
   &__date {
-    color: theme('colors.grey.400');
+    color: theme('colors.text-meta');
   }
 
   &__actions {
@@ -79,14 +79,14 @@
     &--more {
       > button,
       > details > summary {
-        color: theme('colors.grey.400');
+        color: theme('colors.text-meta');
       }
     }
   }
 
   &__more-actions {
-    background-color: $color-grey-1;
-    color: $color-grey-5;
+    background-color: theme('colors.surface-menus');
+    color: theme('colors.text-label-menus-default');
     position: absolute;
     z-index: 1000;
     list-style: none;
@@ -96,7 +96,7 @@
     &:before {
       content: '';
       border: 6px solid transparent;
-      border-bottom-color: $color-grey-1;
+      border-bottom-color: theme('colors.surface-menus');
       display: block;
       position: absolute;
       bottom: 100%;
@@ -107,7 +107,7 @@
       display: block;
       background: none;
       border: 0;
-      color: $color-white;
+      color: theme('colors.text-label-menus-default');
       padding: 5px 10px;
       font-size: 13px;
       width: 100px;

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

@@ -14,7 +14,7 @@
     padding-bottom: 10px;
 
     &--mode-deleting {
-      color: $color-grey-1;
+      color: theme('colors.text-context');
     }
   }
 
@@ -23,7 +23,7 @@
   }
 
   &--mode-deleting &__text {
-    color: $color-grey-3;
+    color: theme('colors.text-meta');
   }
 
   form {
@@ -78,7 +78,7 @@
   }
 
   &__error {
-    color: $color-white;
+    color: theme('colors.white.DEFAULT');
     background-color: theme('colors.critical.200');
     border-radius: 3px;
     padding: 5px;
@@ -91,9 +91,9 @@
       height: 26px;
       float: right;
       margin-inline-start: 5px;
-      color: $color-white;
+      color: theme('colors.white.DEFAULT');
       background-color: theme('colors.critical.200');
-      border-color: $color-white;
+      border-color: theme('colors.white.DEFAULT');
       padding: 2px;
       padding-inline-start: 10px;
       padding-inline-end: 10px;

client/src/components/CommentApp/main.scss

@@ -1,17 +1,17 @@
 @import '../../../scss/settings/variables';
 
-$color-comment-separator: theme('colors.grey.200');
+$color-comment-separator: theme('colors.border-furniture');
 
-$color-box-background: $color-white;
-$color-box-background-focused: theme('colors.grey.50');
-$color-box-border: theme('colors.grey.150');
-$color-box-border-focused: theme('colors.grey.200');
-$color-box-text: $color-black;
+$color-box-background: theme('colors.surface-page');
+$color-box-background-focused: theme('colors.surface-page');
+$color-box-border: theme('colors.border-field-default');
+$color-box-border-focused: theme('colors.border-field-hover');
+$color-box-text: theme('colors.text-context');
 $box-border-radius: 5px;
 $box-padding: 20px;
 
 @mixin focus-outline {
-  outline: $color-focus-outline solid 3px;
+  outline: theme('colors.focus') solid 3px;
 }
 
 @mixin box {
@@ -31,13 +31,13 @@ $box-padding: 20px;
     margin: 0;
     padding: 12px;
     width: 100%;
-    background-color: $color-white;
-    border: 1px solid $color-input-border;
+    background-color: theme('colors.surface-field');
+    border: 1px solid theme('colors.border-field-default');
     border-radius: 5px;
     color: $color-box-text;
 
     &::placeholder {
-      color: theme('colors.grey.400');
+      color: theme('colors.text-placeholder');
       opacity: 1;
     }
   }
@@ -83,9 +83,9 @@ $box-padding: 20px;
 
 @mixin button {
   background-color: inherit;
-  border: 1px solid $color-grey-3;
+  border: 1px solid theme('colors.border-button-small-outline-default');
   border-radius: 3px;
-  color: $color-teal;
+  color: theme('colors.surface-button-default');
   cursor: pointer;
   font-weight: 700;
   height: 30px;
@@ -93,13 +93,13 @@ $box-padding: 20px;
   padding-inline-end: 10px;
 
   &--primary {
-    color: $color-white;
-    border: 1px solid $color-teal;
-    background-color: $color-teal;
+    color: theme('colors.text-button');
+    border: 1px solid theme('colors.surface-button-default');
+    background-color: theme('colors.surface-button-default');
   }
 
   &--red {
-    color: $color-white;
+    color: theme('colors.text-button');
     border: 1px solid theme('colors.critical.200');
     background-color: theme('colors.critical.200');
   }

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

@@ -7,7 +7,7 @@
 }
 
 .Draftail-CommentControl .Draftail-ToolbarButton {
-  color: theme('colors.secondary.100');
+  color: theme('colors.text-button-outline-default');
 
   .icon {
     width: theme('spacing.5');

client/src/components/Draftail/Draftail.scss

@@ -1,13 +1,13 @@
-$draftail-editor-text: $color-input-text;
-$draftail-placeholder-text: theme('colors.grey.400');
+$draftail-editor-text: theme('colors.text-context');
+$draftail-placeholder-text: theme('colors.text-placeholder');
 // w-body-text-large
 $draftail-editor-font-size: theme('fontSize.19');
 $draftail-editor-line-height: theme('lineHeight.normal');
 
-$draftail-editor-chrome: theme('colors.primary.DEFAULT');
-$draftail-editor-chrome-text: $color-white;
+$draftail-editor-chrome: theme('colors.surface-menus');
+$draftail-editor-chrome-text: theme('colors.text-button');
 // This needs to remain a Sass value due to a limitation in Draftail.
-// $draftail-editor-chrome-active: $color-white;
+// $draftail-editor-chrome-active: theme('colors.surface-page');
 $draftail-editor-chrome-active: #fff;
 $draftail-editor-chrome-accent: transparent;
 
@@ -15,7 +15,7 @@ $draftail-base-spacing: 0.375rem;
 $draftail-editor-radius: 0;
 $draftail-editor-border: 0;
 $draftail-editor-padding: theme('spacing.[2.5]') theme('spacing.5');
-$draftail-editor-background: $color-white;
+$draftail-editor-background: theme('colors.surface-field');
 $draftail-block-spacing: theme('spacing.[2.5]');
 $draftail-toolbar-radius: theme('borderRadius.DEFAULT');
 $draftail-toolbar-icon-size: 1em;
@@ -83,7 +83,7 @@ $draftail-editor-font-family: $font-sans;
   --draftail-offset-inline-start: 0px;
 
   &--focus {
-    outline: $focus-outline-width solid $color-focus-outline;
+    outline: $focus-outline-width solid theme('colors.focus');
   }
 }
 
@@ -152,7 +152,7 @@ $draftail-editor-font-family: $font-sans;
 
 .Draftail-BlockToolbar__trigger {
   $icon-size: theme('spacing.4');
-  color: theme('colors.secondary.DEFAULT');
+  color: theme('colors.text-button-outline-default');
   width: $icon-size;
   height: $icon-size;
   margin-inline-end: calc($nested-field-indent-sm - $icon-size / 2 - 2px);
@@ -185,8 +185,8 @@ $draftail-editor-font-family: $font-sans;
 
   &:hover,
   &:focus-visible {
-    color: $color-white;
-    background-color: $color-teal;
+    color: theme('colors.surface-page');
+    background-color: theme('colors.text-button-outline-default');
   }
 
   .icon {
@@ -220,7 +220,7 @@ $draftail-editor-font-family: $font-sans;
 
   &:hover,
   &:active {
-    border: 1px solid $color-grey-3;
+    border: 1px solid theme('colors.border-button-small-outline-default');
   }
 
   .icon {
@@ -243,27 +243,27 @@ $draftail-editor-font-family: $font-sans;
 .Draftail-ToolbarButton--pin {
   min-width: theme('spacing.6');
   height: theme('spacing.6');
-  border: 1px solid theme('colors.primary.DEFAULT');
+  border: 1px solid theme('colors.surface-tooltip');
 
   &:hover {
-    border-color: theme('colors.primary.DEFAULT');
+    border-color: theme('colors.surface-tooltip');
   }
 
   .Draftail-Toolbar & {
-    border-color: $color-input-border;
-    background-color: theme('colors.grey.50');
+    border-color: theme('colors.border-field-default');
+    background-color: theme('colors.surface-page');
     border-top-width: 0;
     border-inline-end-width: 0;
 
     .Draftail-Editor:hover & {
-      border-color: $color-input-hover-border;
+      border-color: theme('colors.border-field-hover');
     }
   }
 }
 
 .Draftail-block--blockquote {
-  border-inline-start: 0.25em solid $color-grey-3;
-  color: $color-grey-2;
+  border-inline-start: 0.25em solid theme('colors.border-field-default');
+  color: theme('colors.text-meta');
   margin: 1em 0;
   padding: 1em 2em;
 }

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

@@ -79,7 +79,7 @@ $tooltip-color-no: theme('colors.critical.100');
 
     &,
     &:hover {
-      color: $color-white;
+      color: theme('colors.text-button');
     }
   }
 
@@ -89,7 +89,7 @@ $tooltip-color-no: theme('colors.critical.100');
       border-color: currentColor;
 
       &:hover {
-        color: $color-button-no;
+        color: theme('colors.surface-alert-danger');
       }
     }
   }

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

@@ -9,7 +9,7 @@
   @include wagtail-label-overrides;
   display: block;
   margin-bottom: $button-spacing * 2;
-  color: $color-white;
+  color: theme('colors.surface-page');
   cursor: pointer;
 }
 
@@ -21,11 +21,11 @@
 .ImageBlock__field__input {
   @include wagtail-input-overrides;
   font-size: 1rem;
-  background-color: $color-white;
-  color: $color-text-base;
+  background-color: theme('colors.surface-field');
+  color: theme('colors.text-context');
 
   &[readonly] {
-    color: $color-grey-3;
+    color: theme('colors.border-field-inactive');
   }
 }
 

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

@@ -31,7 +31,7 @@
     min-width: 256px;
     min-height: 50px;
     object-fit: contain;
-    background-color: $color-grey-1;
+    background-color: theme('colors.text-context');
   }
 
   &__img {
@@ -51,6 +51,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: $color-white;
+    color: theme('colors.surface-page');
   }
 }

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

@@ -4,7 +4,7 @@ $icon-size: 1em;
   cursor: pointer;
 
   &:hover {
-    color: $color-teal;
+    color: theme('colors.surface-button-default');
   }
 
   .icon-warning {

client/src/components/Draftail/index.js

@@ -235,9 +235,11 @@ const initEditor = (selector, originalOptions, currentScript) => {
 
   const styles = getComputedStyle(document.documentElement);
   const colors = {
-    standardHighlight: styles.getPropertyValue('--w-color-secondary-75'),
-    overlappingHighlight: styles.getPropertyValue('--w-color-warning-50'),
-    focusedHighlight: styles.getPropertyValue('--w-color-secondary-100'),
+    standardHighlight: styles.getPropertyValue('--w-color-text-highlight'),
+    overlappingHighlight: styles.getPropertyValue(
+      '--w-color-surface-alert-modal-warning',
+    ),
+    focusedHighlight: styles.getPropertyValue('--w-color-text-highlight'),
   };
 
   let options;

client/src/components/Minimap/CollapseAll.scss

@@ -5,12 +5,12 @@
   text-align: end;
   align-items: center;
   justify-content: space-between;
-  border-color: theme('colors.grey.150');
+  border-color: theme('colors.border-button-small-outline-default');
   z-index: calc($minimap-z-index + 1);
 
   &.button-secondary {
     // Important for overlap with "Comment notifications" switch.
-    background-color: theme('colors.white.DEFAULT');
+    background-color: theme('colors.surface-page');
   }
 
   @include media-breakpoint-up(sm) {

client/src/components/Minimap/Minimap.scss

@@ -41,7 +41,7 @@ $minimap-z-index: calc(theme('zIndex.header') - 20);
 
   > * {
     // Set the background on the contents of the minimap only to reduce overlapping area with fields and comments.
-    background-color: theme('colors.white.DEFAULT');
+    background-color: theme('colors.surface-page');
   }
 }
 
@@ -49,8 +49,8 @@ $minimap-z-index: calc(theme('zIndex.header') - 20);
   // Keep the icon at a stable position and reduce the amount of shifting of the button.
   display: inline-flex;
   padding: theme('spacing.[0.5]');
-  background-color: theme('colors.white.DEFAULT');
-  color: theme('colors.primary.DEFAULT');
+  background-color: theme('colors.surface-page');
+  color: theme('colors.icon-primary');
   transform: rotate(180deg);
   // Expand is available for keyboard users only.
   opacity: 0;
@@ -97,7 +97,7 @@ $minimap-z-index: calc(theme('zIndex.header') - 20);
   min-height: 70px;
 
   :where(.w-minimap--expanded) & {
-    border-inline-start: 1px solid theme('colors.grey.100');
+    border-inline-start: 1px solid theme('colors.border-furniture');
   }
 }
 
@@ -117,6 +117,6 @@ $minimap-z-index: calc(theme('zIndex.header') - 20);
   flex-grow: 1;
 
   :where(.w-minimap--expanded) & {
-    border-inline-start: 1px solid theme('colors.grey.100');
+    border-inline-start: 1px solid theme('colors.border-furniture');
   }
 }

client/src/components/Minimap/MinimapItem.scss

@@ -25,12 +25,12 @@
   // Minimap items have a lot of different states denoted with their text color, border color, and background.
   // The order of the following declaration blocks is essential so the correct states take priority.
   :where(.w-minimap--expanded) & {
-    border-color: theme('colors.grey.100');
+    border-color: theme('colors.border-furniture');
     padding-inline-start: theme('spacing.8');
   }
 
   &--active {
-    border-color: theme('colors.primary.DEFAULT');
+    border-color: theme('colors.icon-primary');
 
     @media (forced-colors: active) {
       border-inline-start-width: 3px;
@@ -38,9 +38,9 @@
   }
 
   &:hover {
-    color: theme('colors.secondary.DEFAULT');
-    border-color: theme('colors.secondary.100');
-    background-color: theme('colors.secondary.50');
+    color: theme('colors.text-button-outline-default');
+    border-color: theme('colors.border-button-outline-default');
+    background-color: theme('colors.surface-button-outline-hover');
   }
 
   &--error {
@@ -51,14 +51,14 @@
     font-weight: theme('fontWeight.bold');
 
     .w-minimap-item__placeholder {
-      color: theme('colors.primary.DEFAULT');
+      color: theme('colors.icon-primary');
     }
   }
 }
 
 .w-minimap-item__placeholder {
   flex-shrink: 0;
-  color: theme('colors.grey.200');
+  color: theme('colors.icon-secondary');
 
   :where(.w-minimap--expanded) & {
     display: none;
@@ -81,8 +81,8 @@
   font-weight: theme('fontWeight.bold');
   border-radius: theme('borderRadius.full');
   background-color: theme('colors.critical.200');
-  border: $border-width solid theme('colors.grey.50');
-  color: theme('colors.white.DEFAULT');
+  border: $border-width solid theme('colors.surface-page');
+  color: theme('colors.surface-page');
 
   :where(.w-minimap--expanded) & {
     margin-inline-start: calc(-1 * (theme('spacing.8') + $badge-size / 2));

client/src/components/PageExplorer/PageExplorer.scss

@@ -7,7 +7,7 @@ $menu-footer-height: 50px;
 @import 'PageExplorerItem';
 
 .c-page-explorer {
-  @apply w-bg-primary-200;
+  @apply w-bg-surface-menu-item-active;
   max-width: 485px;
   width: 100vw;
   height: 100vh;
@@ -40,7 +40,7 @@ $menu-footer-height: 50px;
 $explorer-header-horizontal-padding: 10px;
 
 .c-page-explorer__header {
-  @apply w-bg-primary-200 w-text-white-80 w-border-b w-border-primary;
+  @apply w-bg-surface-menu-item-active w-text-text-label-menus-default w-border-b w-border-surface-menu-item-active;
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
@@ -54,7 +54,7 @@ $explorer-header-horizontal-padding: 10px;
 }
 
 .c-page-explorer__header__title {
-  @apply hover:w-bg-primary hover:w-text-white focus:w-bg-primary focus:w-text-white;
+  @apply hover:w-bg-surface-menus hover:w-text-text-label-menus-active focus:w-bg-surface-menus focus:w-text-text-label-menus-active;
   color: inherit;
 }
 
@@ -66,13 +66,13 @@ $explorer-header-horizontal-padding: 10px;
   white-space: nowrap;
 
   .icon {
-    @apply w-text-white-80;
+    @apply w-text-text-label-menus-default;
     margin-inline-end: 0.25rem;
     font-size: 1rem;
   }
 
   .icon--explorer-header {
-    @apply w-text-white-80 w-mr-2;
+    @apply w-text-text-label-menus-default w-mr-2;
     width: 1.25em;
     height: 1.25em;
     margin-inline-end: 0.25rem;
@@ -85,7 +85,7 @@ $explorer-header-horizontal-padding: 10px;
 }
 
 .c-page-explorer__header__select {
-  @apply w-text-white w-bg-primary;
+  @apply w-text-text-label-menus-default w-bg-surface-menus;
   $margin: 10px;
   margin-inline-end: $margin;
 
@@ -110,7 +110,7 @@ $explorer-header-horizontal-padding: 10px;
 
   // Add select arrow back on browsers where native ui has been removed
   &-icon {
-    @apply w-text-primary;
+    @apply w-text-icon-primary;
     position: absolute;
     inset-inline-end: 1rem;
     top: 0.85rem;
@@ -126,7 +126,7 @@ $explorer-header-horizontal-padding: 10px;
 
 .c-page-explorer__placeholder {
   padding: 1em;
-  color: $color-white;
+  color: theme('colors.text-label-menus-default');
 
   @include media-breakpoint-up(sm) {
     padding: 1em 1.75em;
@@ -137,16 +137,16 @@ $explorer-header-horizontal-padding: 10px;
   display: block;
   padding: 1em;
   background: theme('colors.black-35');
-  color: $color-white;
+  color: theme('colors.text-label-menus-default');
 
   &:focus {
-    color: theme('colors.white-80');
+    color: theme('colors.text-label-menus-active');
     background: $c-page-explorer-bg-active;
   }
 
   // Overrides for default link hover.
   &:hover {
-    color: $color-white;
+    color: theme('colors.text-label-menus-active');
   }
 
   @include hover {

client/src/components/PageExplorer/PageExplorerItem.scss

@@ -1,9 +1,9 @@
 .c-page-explorer__item {
-  @apply w-flex w-flex-row w-flex-nowrap w-border-0 w-border-b w-border-solid w-border-primary w-divide-x w-divide-solid w-divide-primary w-divide-y-0;
+  @apply w-flex w-flex-row w-flex-nowrap w-border-0 w-border-b w-border-solid w-border-surface-menu-item-active w-divide-x w-divide-solid w-divide-surface-menu-item-active w-divide-y-0;
 }
 
 .c-page-explorer__item__link {
-  @apply w-inline-flex w-items-start sm:w-items-center w-flex-wrap w-grow w-cursor-pointer w-gap-1 w-transition hover:w-bg-primary focus:w-bg-primary focus:w-text-white hover:w-text-white;
+  @apply w-inline-flex w-items-start sm:w-items-center w-flex-wrap w-grow w-cursor-pointer w-gap-1 w-transition hover:w-bg-surface-menus focus:w-bg-surface-menus focus:w-text-text-label-menus-active hover:w-text-text-label-menus-active;
   padding: 1.45em 1em;
 
   @include media-breakpoint-up(sm) {
@@ -12,7 +12,7 @@
 }
 
 .c-page-explorer__item__link .icon {
-  @apply w-text-white-80;
+  @apply w-text-text-label-menus-default;
   width: 2em;
   height: 2em;
   margin-inline-end: 0.75rem;
@@ -20,12 +20,12 @@
 
 .c-page-explorer__item__title {
   margin: 0;
-  color: $color-white;
+  color: theme('colors.text-label-menus-default');
   display: inline-block;
 }
 
 .c-page-explorer__item__action {
-  @apply w-text-white-80 w-transition hover:w-bg-primary hover:w-text-white focus:w-bg-primary focus:w-text-white;
+  @apply w-text-text-label-menus-default w-transition hover:w-bg-surface-menus hover:w-text-text-label-menus-active focus:w-bg-surface-menus focus:w-text-text-label-menus-active;
   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-80;
+  @apply w-flex w-gap-2 w-text-text-label-menus-default;
   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-80;
+  @apply w-bg-black-50 w-tracking-tight w-text-text-label-menus-default;
   // stylelint-disable-next-line property-disallowed-list
   text-transform: uppercase;
   font-size: 0.625rem;

client/src/components/Sidebar/Sidebar.scss

@@ -4,7 +4,7 @@
   position: absolute;
   top: $sidebar-toggle-spacing;
   inset-inline-start: $sidebar-toggle-spacing;
-  color: $color-white;
+  color: theme('colors.text-label-menus-default');
   width: $sidebar-toggle-size;
   height: $sidebar-toggle-size;
   background: transparent;
@@ -35,11 +35,11 @@
 
 .sidebar,
 .sidebar-loading {
-  @apply w-fixed w-flex w-flex-col w-h-full w-bg-primary w-z-sidebar w-transition-sidebar;
+  @apply w-fixed w-flex w-flex-col w-h-full w-bg-surface-menus w-z-sidebar w-transition-sidebar;
   width: $menu-width;
   inset-inline-start: 0;
 
-  @media (forced-colors: $media-forced-colours) {
+  @media (forced-colors: active) {
     border-inline-end: 1px solid transparent;
   }
 
@@ -67,7 +67,7 @@
 
   &__inner {
     // On medium, make it possible for the nav links to scroll.
-    @apply w-h-full w-bg-primary w-flex w-flex-col w-flex-nowrap;
+    @apply w-h-full w-bg-surface-menus w-flex w-flex-col w-flex-nowrap;
   }
 
   &__collapse-toggle {
@@ -92,12 +92,12 @@
   display: none; // Nav toggle is for mobile only
 
   &--mobile {
-    @apply w-bg-primary w-top-0 w-left-0 w-h-slim-header w-w-slim-header w-rounded-none hover:w-bg-primary-200;
+    @apply w-bg-surface-menus w-top-0 w-left-0 w-h-slim-header w-w-slim-header w-rounded-none hover:w-bg-surface-menu-item-active;
     display: grid;
   }
 
   &--open {
-    @apply w-fixed hover:w-bg-primary-200 hover:w-text-white;
+    @apply w-fixed hover:w-bg-surface-menu-item-active hover:w-text-text-label-menus-active;
   }
 }
 

client/src/components/Sidebar/Sidebar.tsx

@@ -228,7 +228,7 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
                 w-flex
                 w-justify-center
                 w-items-center
-                hover:w-bg-primary-200
+                hover:w-bg-surface-menu-item-active
                 hover:text-white
                 hover:opacity-100`}
             >

client/src/components/Sidebar/SidebarPanel.scss

@@ -20,7 +20,7 @@
     width: var(--width);
   }
 
-  @media (forced-colors: $media-forced-colours) {
+  @media (forced-colors: active) {
     border-inline-start: 1px solid transparent;
     border-inline-end: 1px solid transparent;
   }

client/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap

@@ -33,7 +33,7 @@ exports[`Sidebar should render with the minimum required props 1`] = `
                 w-flex
                 w-justify-center
                 w-items-center
-                hover:w-bg-primary-200
+                hover:w-bg-surface-menu-item-active
                 hover:text-white
                 hover:opacity-100"
           onClick={[Function]}

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

@@ -21,7 +21,7 @@
     border: 0;
     background: transparent;
     text-align: start;
-    color: $color-menu-text;
+    color: theme('colors.text-label-menus-default');
     padding: 13px 15px 13px 20px;
     font-weight: 400;
     overflow: visible;
@@ -32,7 +32,7 @@
     // making the text semi-transparent
     &:hover,
     &:focus {
-      color: $color-white;
+      color: theme('colors.text-label-menus-active');
       text-shadow: -1px -1px 0 theme('colors.black-35');
     }
 
@@ -67,11 +67,11 @@
   }
 
   &--active {
-    @apply w-bg-primary-200;
+    @apply w-bg-surface-menu-item-active;
     text-shadow: -1px -1px 0 theme('colors.black-35');
 
     > a {
-      color: $color-white;
+      color: theme('colors.text-label-menus-active');
     }
   }
 

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

@@ -26,7 +26,7 @@
 }
 
 .sidebar-sub-menu-panel {
-  @apply w-flex w-flex-col w-bg-primary-200 w-h-screen w-transition-sidebar;
+  @apply w-flex w-flex-col w-bg-surface-menu-item-active w-h-screen w-transition-sidebar;
   width: $menu-width;
 
   > h2,
@@ -36,7 +36,7 @@
 
   > h2 {
     // w-min-h-[160px] and w-mt-[35px] classes are to vertically align the title and icon combination to the search input on the left
-    @apply w-min-h-[180px] w-px-4 w-box-border w-text-center w-text-white w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center w-transition-sidebar;
+    @apply w-min-h-[180px] w-px-4 w-box-border w-text-center w-text-text-label-menus-default w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center w-transition-sidebar;
 
     &:before {
       font-size: 4em;
@@ -70,7 +70,7 @@
     margin: 0;
     padding: 0.9em 1.7em;
     text-align: center;
-    color: $color-menu-text;
+    color: theme('colors.text-label-menus-default');
   }
 
   &--visible {

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

@@ -32,7 +32,7 @@
 }
 
 .sidebar-footer {
-  @apply w-bg-primary w-mt-auto;
+  @apply w-bg-surface-menus w-mt-auto;
   transition: width $menu-transition-duration ease !important; // Override body.ready
 
   > ul,
@@ -80,7 +80,7 @@
     }
 
     &-label {
-      @apply w-text-white w-text-left w-overflow-hidden w-whitespace-nowrap w-text-ellipsis;
+      @apply w-text-text-label-menus-default w-text-left w-overflow-hidden w-whitespace-nowrap w-text-ellipsis;
     }
   }
 

client/src/components/Sidebar/modules/MainMenu.tsx

@@ -297,8 +297,8 @@ export const Menu: React.FunctionComponent<MenuProps> = ({
             className={`
             ${slim ? 'w-px-4' : 'w-px-5'}
             sidebar-footer__account
-            w-bg-primary
-            w-text-white
+            w-bg-surface-menus
+            w-text-text-label-menus-default
             w-flex
             w-items-center
             w-relative
@@ -307,8 +307,8 @@ export const Menu: React.FunctionComponent<MenuProps> = ({
             w-border-0
             w-overflow-hidden
             w-py-3
-            hover:w-bg-primary-200
-            focus:w-bg-primary-200
+            hover:w-bg-surface-menu-item-active
+            focus:w-bg-surface-menu-item-active
             w-transition`}
             title={gettext('Edit your account')}
             onClick={onClickAccountSettings}
@@ -330,7 +330,7 @@ export const Menu: React.FunctionComponent<MenuProps> = ({
                 {user.name}
               </div>
               <Icon
-                className="w-w-4 w-h-4 w-text-white"
+                className="w-w-4 w-h-4 w-text-text-label-menus-default"
                 name={accountSettingsOpen ? 'arrow-down' : 'arrow-up'}
               />
             </div>

client/src/components/Sidebar/modules/Search.tsx

@@ -63,10 +63,10 @@ export const SearchInput: React.FunctionComponent<SearchInputProps> = ({
           w-outline-offset-inside
           w-border-0
           w-rounded-none
-          w-text-white-80
+          w-text-text-label-menus-default
           w-z-10
-          hover:w-text-white
-          focus:w-text-white
+          hover:w-text-text-label-menus-active
+          focus:w-text-text-label-menus-active
           hover:w-bg-transparent`}
             type="submit"
             aria-label={gettext('Search')}
@@ -107,10 +107,10 @@ export const SearchInput: React.FunctionComponent<SearchInputProps> = ({
             !w-bg-transparent
             !w-border-0
             !w-rounded-none
-            !w-text-white-80
+            !w-text-text-label-menus-default
             !w-outline-offset-inside
             !w-leading-none
-            placeholder:!w-text-white-80`}
+            placeholder:!w-text-text-label-menus-default`}
           type="text"
           id="menu-search-q"
           name="q"

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

@@ -96,7 +96,7 @@ $logo-size: 110px;
   transition: padding $menu-transition-duration ease;
 
   &:hover {
-    color: $color-white;
+    color: theme('colors.text-label-menus-active');
   }
 
   @at-root .sidebar--slim #{&} {

client/src/components/Sidebar/modules/WagtailLogo.tsx

@@ -18,7 +18,7 @@ const WagtailLogo = ({ className, slim }: WagtailLogoProps) => {
          sidebar-wagtail-branding__icon
          !w-overflow-visible
          w-group
-         w-text-primary
+         w-text-surface-menus
          w-z-10
          w-absolute
          w-transition-all

client/src/components/Sidebar/modules/__snapshots__/MainMenu.test.js.snap

@@ -24,8 +24,8 @@ exports[`Menu should render with the minimum required props 1`] = `
         className="
             w-px-5
             sidebar-footer__account
-            w-bg-primary
-            w-text-white
+            w-bg-surface-menus
+            w-text-text-label-menus-default
             w-flex
             w-items-center
             w-relative
@@ -34,8 +34,8 @@ exports[`Menu should render with the minimum required props 1`] = `
             w-border-0
             w-overflow-hidden
             w-py-3
-            hover:w-bg-primary-200
-            focus:w-bg-primary-200
+            hover:w-bg-surface-menu-item-active
+            focus:w-bg-surface-menu-item-active
             w-transition"
         onClick={[Function]}
         title="Edit your account"
@@ -58,7 +58,7 @@ exports[`Menu should render with the minimum required props 1`] = `
             className="sidebar-footer__account-label w-label-3"
           />
           <Icon
-            className="w-w-4 w-h-4 w-text-white"
+            className="w-w-4 w-h-4 w-text-text-label-menus-default"
             name="arrow-up"
           />
         </div>

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

@@ -7,8 +7,8 @@ $icon-size: theme('spacing.4');
   width: theme('spacing.6');
   height: theme('spacing.6');
   appearance: none;
-  color: $color-teal;
-  background-color: $color-white;
+  color: theme('colors.text-button-outline-default');
+  background-color: theme('colors.surface-page');
   padding: 0;
   cursor: pointer;
   // Align with guide lines, which are already offset by a half icon size.
@@ -30,8 +30,8 @@ $icon-size: theme('spacing.4');
   &:hover,
   &:focus-visible {
     .icon {
-      color: $color-white;
-      background-color: $color-teal;
+      color: theme('colors.surface-page');
+      background-color: theme('colors.text-button-outline-default');
     }
   }
 

client/src/entrypoints/admin/comments.js

@@ -314,9 +314,9 @@ window.comments = (() => {
 
     const commentCounter = document.createElement('div');
     commentCounter.className =
-      '-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-secondary-100 w-text-white w-border w-border-white w-rounded-[1rem]';
+      '-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-surface-button-default w-text-text-button w-border w-border-surface-page w-rounded-[1rem]';
     commentToggle.className =
-      'w-h-slim-header w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-grey-400 w-transition hover:w-transform hover:w-scale-110 hover:w-text-primary focus:w-text-primary expanded:w-text-primary';
+      'w-h-slim-header w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition hover:w-transform hover:w-scale-110 hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label';
     commentToggle.appendChild(commentCounter);
 
     const updateCommentCount = () => {

client/src/plugins/scrollbarThin.js

@@ -6,8 +6,8 @@ module.exports = plugin(({ addComponents, theme }) => {
     // Scrollbar styling for firefox
     // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
     '.scrollbar-thin': {
-      'scrollbarColor': `${theme('colors.grey.100')} ${theme(
-        'colors.white.DEFAULT',
+      'scrollbarColor': `${theme('colors.border-furniture')} ${theme(
+        'colors.surface-page',
       )}`,
       'scrollbarWidth': 'thin',
 
@@ -22,7 +22,7 @@ module.exports = plugin(({ addComponents, theme }) => {
       },
       '&::-webkit-scrollbar-thumb': {
         // Hide the scrollbar arrows on windows
-        backgroundColor: theme('colors.grey.200'),
+        backgroundColor: theme('colors.border-field-default'),
         borderRadius: theme('borderRadius.sm'),
       },
       '&::-webkit-scrollbar-track': {

client/src/tokens/typography.js

@@ -115,7 +115,7 @@ const listStyleType = {
 
 const headingBaseStyles = {
   fontWeight: 'fontWeight.bold',
-  color: 'colors.primary.DEFAULT',
+  color: 'colors.text-label',
   lineHeight: 'lineHeight.tight',
 };
 
@@ -127,7 +127,7 @@ const typeScale = {
   'w-h1': {
     fontSize: 'fontSize.30',
     fontWeight: 'fontWeight.extrabold',
-    color: 'colors.primary.DEFAULT',
+    color: 'colors.text-label',
     lineHeight: 'lineHeight.tight',
   },
   'w-h2': {
@@ -145,19 +145,19 @@ const typeScale = {
   'w-label-1': {
     fontSize: 'fontSize.16',
     fontWeight: 'fontWeight.bold',
-    color: 'colors.primary.DEFAULT',
+    color: 'colors.text-label',
     lineHeight: 'lineHeight.tight',
   },
   'w-label-2': {
     fontSize: 'fontSize.14',
     fontWeight: 'fontWeight.semibold',
-    color: 'colors.primary.DEFAULT',
+    color: 'colors.text-label',
     lineHeight: 'lineHeight.tight',
   },
   'w-label-3': {
     fontSize: 'fontSize.14',
     fontWeight: 'fontWeight.medium',
-    color: 'colors.primary.DEFAULT',
+    color: 'colors.text-label',
     lineHeight: 'lineHeight.tight',
   },
   'w-body-text-large': {
@@ -173,7 +173,7 @@ const typeScale = {
   'w-help-text': {
     fontSize: 'fontSize.14',
     fontWeight: 'fontWeight.normal',
-    color: 'colors.grey.400',
+    color: 'colors.text-meta',
     lineHeight: 'lineHeight.tight',
   },
 };

wagtail/admin/templates/wagtailadmin/pages/listing/_modern_dropdown.html

@@ -7,11 +7,11 @@
     </button>
 
     <div data-button-with-dropdown-content class="w-hidden w-p-0">
-        <nav class="w-text-white w-flex w-flex-col w-justify-start w-py-2 w-font-bold" aria-label="{{ title }}">
+        <nav class="w-text-text-button w-flex w-flex-col w-justify-start w-py-2 w-font-bold" aria-label="{{ title }}">
             {% block content %}
                 {% for button in buttons %}
                     <a href="{{ button.url }}" aria-label="{{ button.attrs.title }}"
-                        class="w-group w-inline-flex w-items-center w-text-white hover:w-text-white hover:w-bg-primary-200 w-py-3 w-px-6 w-no-underline w-transition w-outline-offset-inside {{ button.classes|join:' ' }}">
+                        class="w-group w-inline-flex w-items-center w-text-text-label-menus-default hover:w-text-text-label-menus-active hover:w-bg-surface-menu-item-active w-py-3 w-px-6 w-no-underline w-transition w-outline-offset-inside {{ button.classes|join:' ' }}">
                         {% if button.icon_name %}
                             {% icon name=button.icon_name classname='w-w-4 w-h-4 w-mr-3 w-transition w-opacity-50 group-hover:w-opacity-100' %}
                         {% endif %}

wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html

@@ -9,12 +9,12 @@
     {# breadcrumbs #}
     {% breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' is_expanded=parent_page.is_root classname='sm:w-py-3 lg:w-py-7' %}
     {# Actions divider #}
-    <div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-grey-100"></div>
+    <div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-border-furniture"></div>
     {# Page actions dropdown #}
     {% page_header_buttons parent_page page_perms=page_perms %}
 {% endblock %}
 {% block actions %}
-    {% with nav_icon_classes='w-w-4 w-h-4' nav_icon_button_classes='w-h-slim-header w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-grey-400 w-transition hover:w-transform hover:w-scale-110 hover:w-text-primary focus:w-text-primary' %}
+    {% with nav_icon_classes='w-w-4 w-h-4' nav_icon_button_classes='w-h-slim-header w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition hover:w-transform hover:w-scale-110 hover:w-text-text-label focus:w-text-text-label' %}
         {% if not parent_page.is_root %}
             {% include "wagtailadmin/shared/side_panel_toggles.html" %}
             {# Page history #}

wagtail/admin/templates/wagtailadmin/pages/search_results.html

@@ -16,14 +16,14 @@
                 <h3 id="page-types-title" class="filter-title">{% trans "Page types" %}</h3>
                 <ul class="filter-options">
                     {% if not selected_content_type %}
-                        <li class="w-bg-grey-100">{% trans "All" %} ({{ all_pages.count }})</li>
+                        <li class="w-bg-border-furniture">{% trans "All" %} ({{ all_pages.count }})</li>
                     {% else %}
                         <li><a href="{% url 'wagtailadmin_pages:search' %}?q={{ query_string|urlencode }}">{% trans "All" %} ({{ all_pages.count }})</a></li>
                     {% endif %}
 
                     {% for content_type, count in content_types %}
                         {% if content_type == selected_content_type %}
-                            <li class="w-bg-grey-100">{{ content_type.model_class.get_verbose_name }} ({{ count }})</li>
+                            <li class="w-bg-border-furniture">{{ content_type.model_class.get_verbose_name }} ({{ count }})</li>
                         {% else %}
                             <li><a href="{% url 'wagtailadmin_pages:search' %}?q={{ query_string|urlencode }}&amp;content_type={{ content_type.app_label }}.{{ content_type.model|lower }}">{{ content_type.model_class.get_verbose_name }} ({{ count }})</a></li>
                         {% endif %}

wagtail/admin/templates/wagtailadmin/panels/tabbed_interface.html

@@ -17,7 +17,7 @@
 
         {# Comment Notifications Toggle  #}
         {% if self.form.show_comments_toggle %}
-            <div class="w-relative w-flex w-justify-end w-px-5 sm:w-py-1 sm:w-px-2 w-mr-6 sm:w-mr-8 sm:w-mt-12 w-bg-white" data-comment-notifications hidden>
+            <div class="w-relative w-flex w-justify-end w-px-5 sm:w-py-1 sm:w-px-2 w-mr-6 sm:w-mr-8 sm:w-mt-12 w-bg-surface-page" data-comment-notifications hidden>
                 <label class="switch w-p-0 w-m-0 w-font-normal w-flex w-justify-between w-text-14 w-space-x-2">
                     {% trans "Comment notifications" %}
                     {{ self.form.comment_notifications }}