Basic BE setup for contrast themes

CHANGELOG.txt

@@ -20,8 +20,9 @@ Changelog
  * Fire `copy_for_translation_done` signal when copying translatable models as well as pages (Coen van der Kamp)
  * Add support for an image `description` field across all images, to better support accessible image descriptions (Chiemezuo Akujobi)
  * Prompt the user about unsaved changes when editing snippets (Sage Abdullah)
- * Implement incremental dashboard design enhancements (Albina Starykova)
+ * Implement incremental dashboard design enhancements (Albina Starykova, Ben Enright)
  * Add support for specifying different preview modes to the "View draft" URL for pages (Robin Varghese)
+ * Add a new enhanced contrast admin theming option for the admin interface (Albina Starykova, Victoria Ottah)
  * Fix: Prevent page type business rules from blocking reordering of pages (Andy Babic, Sage Abdullah)
  * Fix: Improve layout of object permissions table (Sage Abdullah)
  * Fix: Fix typo in aria-label attribute of page explorer navigation link (Sébastien Corbin)

CONTRIBUTORS.md

@@ -840,6 +840,7 @@
 * Gabriel Getzie
 * Rohit Singh
 * Robin Varghese
+* Victoria Ottah
 
 ## Translators
 

client/scss/components/_a11y-result.scss

@@ -8,6 +8,10 @@
   .form-side--checks & {
     display: block;
   }
+
+  @include more-contrast() {
+    border-color: theme('colors.border-furniture-more-contrast');
+  }
 }
 
 .w-a11y-result__header {

client/scss/components/_button.scss

@@ -321,11 +321,13 @@
 }
 
 .w-header-button {
+  @include more-contrast-interactive();
   display: flex;
   align-items: center;
   justify-content: center;
   gap: theme('spacing.1');
-  height: theme('spacing.7');
+  height: theme('spacing.8');
+  min-width: theme('spacing.8');
   appearance: none;
   background-color: initial;
   border: 1px solid transparent;

client/scss/components/_chooser.scss

@@ -15,6 +15,7 @@ $preview-size: 2.625rem; // 42px
 // Very subdued button style specifically for choosers, as there can be a lot of
 // chooser fields left unused on a page editing form.
 .button.chooser__choose-button {
+  @include more-contrast-interactive();
   @apply w-label-3;
   display: flex;
   align-items: center;
@@ -81,11 +82,6 @@ $preview-size: 2.625rem; // 42px
   width: auto;
 }
 
-.chooser .w-dropdown__toggle--icon {
-  width: $preview-size;
-  height: $preview-size;
-}
-
 // Display these as inline block so that action icons such as comments can appear as close as possible
 .w-field--admin_task_chooser,
 .w-field--admin_page_chooser,

client/scss/components/_dropdown.scss

@@ -3,7 +3,7 @@
 }
 
 .w-dropdown__toggle--icon {
-  @apply w-w-8 w-h-8;
+  @apply w-w-8 w-h-8 more-contrast:w-p-0 more-contrast:w-border more-contrast:w-rounded-sm more-contrast:w-border-border-interactive-more-contrast hover:more-contrast:w-border-border-interactive-more-contrast-hover;
 }
 
 .w-dropdown__toggle-icon {

client/scss/components/_filters.scss

@@ -25,6 +25,7 @@
 }
 
 .w-filter-button {
+  @include more-contrast-interactive();
   position: relative;
   width: theme('spacing.10');
   height: theme('spacing.10');

client/scss/components/_form-side.scss

@@ -36,7 +36,8 @@
       sm:w-max-w-[22.5rem]
       md:w-max-w-[35.937rem]
       lg:w-max-w-[31.25rem]
-      xl:w-max-w-[46.875rem];
+      xl:w-max-w-[46.875rem]
+      more-contrast:w-border-border-furniture-more-contrast;
   z-index: calc(theme('zIndex.header') - 10);
   width: var(--side-panel-width, 100%);
 

client/scss/components/_header.scss

@@ -151,6 +151,10 @@
 }
 
 .w-slim-header {
+  @include more-contrast() {
+    border-color: theme('colors.border-furniture-more-contrast');
+  }
+
   &__search-form {
     @apply w-mx-2 w-flex w-items-center w-gap-2;
   }

client/scss/components/_messages.scss

@@ -58,6 +58,10 @@
   .warning {
     background-color: theme('colors.warning.100');
     color: theme('colors.grey.600');
+
+    @include more-contrast() {
+      background-color: theme('colors.warning.75');
+    }
   }
 
   .info {

client/scss/components/_panel.scss

@@ -61,6 +61,7 @@ $header-button-size: theme('spacing.6');
 .w-panel__toggle,
 .w-panel__controls .button.button--icon {
   @include show-focus-outline-inside();
+  @include more-contrast-interactive();
   display: inline-grid;
   justify-content: center;
   align-content: center;

client/scss/components/_preview-panel.scss

@@ -59,6 +59,10 @@
     gap: 0.75rem;
     padding-bottom: 1rem;
     margin-bottom: 1rem;
+
+    @include more-contrast() {
+      border-color: theme('colors.border-furniture-more-contrast');
+    }
   }
 
   &__size-button {

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

@@ -3,6 +3,7 @@
  * Text input, textarea, checkbox, radio, select, etc.
  */
 @mixin input-base() {
+  @include more-contrast-interactive();
   appearance: none;
   border-radius: theme('borderRadius.DEFAULT');
   color: theme('colors.text-context');

client/scss/tools/_mixins.general.scss

@@ -93,6 +93,21 @@
   }
 }
 
+/**
+ * Apply styles for enhanced contrast theming.
+ */
+@mixin more-contrast() {
+  .w-contrast-more & {
+    @content;
+  }
+
+  @media (prefers-contrast: more) {
+    .w-contrast-system & {
+      @content;
+    }
+  }
+}
+
 /**
  * Apply styles for the light theme only.
  */
@@ -107,3 +122,48 @@
     }
   }
 }
+
+/**
+ * Apply styles for the dark theme with increased contrast.
+ */
+@mixin dark-theme-more-contrast() {
+  .w-theme-dark.w-contrast-more & {
+    @content;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .w-theme-system.w-contrast-more & {
+      @content;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .w-theme-dark.w-contrast-system & {
+      @content;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
+    .w-theme-system.w-contrast-system & {
+      @content;
+    }
+  }
+}
+
+/**
+* Increased contrast theme styles for interactive components
+*/
+@mixin more-contrast-interactive() {
+  @include more-contrast() {
+    border: 1px solid theme('colors.border-interactive-more-contrast');
+
+    &:hover {
+      border-color: theme('colors.border-interactive-more-contrast-hover');
+    }
+
+    &[disabled],
+    &[disabled]:hover {
+      border-style: dashed;
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
 .comment {
   @include box;
+  @include more-contrast-interactive();
 
   width: 300px;
   display: block;

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

@@ -40,6 +40,8 @@
 
     > button,
     > details > summary {
+      @include more-contrast-interactive();
+      border-radius: theme('borderRadius.sm');
       list-style-type: none; // Hides triangle on Firefox
       width: 30px;
       height: 30px;

client/src/components/Draftail/Draftail.scss

@@ -101,6 +101,11 @@ $draftail-editor-font-family: theme('fontFamily.sans');
   background-color: $draftail-editor-background;
   color: $draftail-placeholder-text;
 
+  &--pin {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   .Draftail-Editor--focus & {
     color: $draftail-editor-text;
     top: calc(theme('spacing.slim-header') * 2);
@@ -205,11 +210,19 @@ $draftail-editor-font-family: theme('fontFamily.sans');
   }
 }
 
+.Draftail-ToolbarGroup {
+  display: flex;
+}
+
 .Draftail-ToolbarGroup::before {
   display: none;
 }
 
 .Draftail-ToolbarButton {
+  @include more-contrast-interactive();
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: 1.875rem;
   min-width: 1.875rem;
   padding: 0;
@@ -257,6 +270,7 @@ $draftail-editor-font-family: theme('fontFamily.sans');
   .Draftail-Toolbar & {
     border-color: theme('colors.border-field-default');
     background-color: theme('colors.surface-page');
+    color: currentColor;
     border-top-width: 0;
     border-inline-end-width: 0;
 

client/src/components/Minimap/CollapseAll.scss

@@ -1,4 +1,5 @@
 .w-minimap__collapse-all {
+  @include more-contrast-interactive();
   display: none;
   // Keep the icon at a stable position and reduce the amount of shifting of the button.
   min-width: 110px;

client/src/components/Minimap/MinimapItem.scss

@@ -35,6 +35,10 @@
     @media (forced-colors: active) {
       border-inline-start-width: 3px;
     }
+
+    @include more-contrast() {
+      border-inline-start-width: 3px;
+    }
   }
 
   &:hover {

client/src/components/Sidebar/Sidebar.scss

@@ -45,6 +45,9 @@ $sidebar-toggle-size: 35px;
   @media (forced-colors: active) {
     border-inline-end: 1px solid transparent;
   }
+  @include dark-theme-more-contrast() {
+    border-inline-end: 1px solid theme('colors.border-furniture-more-contrast');
+  }
 
   .icon--menuitem {
     width: 1rem;

client/src/components/Sidebar/Sidebar.tsx

@@ -230,7 +230,9 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
                 w-items-center
                 hover:w-bg-surface-menu-item-active
                 hover:text-white
-                hover:opacity-100`}
+                hover:opacity-100
+                more-contrast:w-border-border-interactive-more-contrast-dark-bg
+                hover:more-contrast:w-border-border-interactive-more-contrast-dark-bg-hover`}
             >
               <Icon
                 name="expand-right"

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

@@ -35,7 +35,9 @@ exports[`Sidebar should render with the minimum required props 1`] = `
                 w-items-center
                 hover:w-bg-surface-menu-item-active
                 hover:text-white
-                hover:opacity-100"
+                hover:opacity-100
+                more-contrast:w-border-border-interactive-more-contrast-dark-bg
+                hover:more-contrast:w-border-border-interactive-more-contrast-dark-bg-hover"
           onClick={[Function]}
           type="button"
         >

client/src/tokens/colorThemes.js

@@ -295,6 +295,36 @@ const light = [
         textUtility: 'w-text-border-button-outline-hover',
         cssVariable: '--w-color-border-button-outline-hover',
       },
+      'border-interactive-more-contrast': {
+        value: 'var(--w-color-grey-500)',
+        bgUtility: 'w-bg-border-interactive-more-contrast',
+        textUtility: 'w-text-border-interactive-more-contrast',
+        cssVariable: '--w-color-border-interactive-more-contrast',
+      },
+      'border-interactive-more-contrast-hover': {
+        value: 'var(--w-color-black)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-hover',
+        textUtility: 'w-text-border-interactive-more-contrast-hover',
+        cssVariable: '--w-color-border-interactive-more-contrast-hover',
+      },
+      'border-interactive-more-contrast-dark-bg': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg',
+        textUtility: 'w-text-border-interactive-more-contrast-dark-bg',
+        cssVariable: '--w-color-border-interactive-more-contrast-dark-bg',
+      },
+      'border-interactive-more-contrast-dark-bg-hover': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg-hover',
+        textUtility: 'w-text-border-interactive-more-contrast-dark-bg-hover',
+        cssVariable: '--w-color-border-interactive-more-contrast-dark-bg-hover',
+      },
+      'border-furniture-more-contrast': {
+        value: 'var(--w-color-grey-200)',
+        bgUtility: 'w-bg-border-furniture-more-contrast',
+        textUtility: 'w-text-border-furniture-more-contrast',
+        cssVariable: '--w-color-border-furniture-more-contrast',
+      },
     },
   },
   {
@@ -583,6 +613,36 @@ const dark = [
         textUtility: 'w-text-border-button-outline-hover',
         cssVariable: '--w-color-border-button-outline-hover',
       },
+      'border-interactive-more-contrast': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-interactive-more-contrast',
+        textUtility: 'w-text-border-interactive-more-contrast',
+        cssVariable: '--w-color-border-interactive-more-contrast',
+      },
+      'border-interactive-more-contrast-hover': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-hover',
+        textUtility: 'w-text-border-interactive-more-contrast-hover',
+        cssVariable: '--w-color-border-interactive-more-contrast-hover',
+      },
+      'border-interactive-more-contrast-dark-bg': {
+        value: 'var(--w-color-grey-150)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg',
+        textUtility: 'w-text-border-interactive-more-contrast-dark-bg',
+        cssVariable: '--w-color-border-interactive-more-contrast-dark-bg',
+      },
+      'border-interactive-more-contrast-dark-bg-hover': {
+        value: 'var(--w-color-white)',
+        bgUtility: 'w-bg-border-interactive-more-contrast-dark-bg-hover',
+        textUtility: 'w-text-border-interactive-more-contrast-dark-bg-hover',
+        cssVariable: '--w-color-border-interactive-more-contrast-dark-bg-hover',
+      },
+      'border-furniture-more-contrast': {
+        value: 'var(--w-color-grey-400)',
+        bgUtility: 'w-bg-border-furniture-more-contrast',
+        textUtility: 'w-text-border-furniture-more-contrast',
+        cssVariable: '--w-color-border-furniture-more-contrast',
+      },
     },
   },
   {