Update styles for block picker in dark mode (#10644)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -23,6 +23,7 @@ Changelog
  * Add support for `--template` option to `wagtail start` (Thibaud Colas)
  * Change to always cache renditions (Jake Howard)
  * Update link/document rich text tooltips for consistency with the inline toolbar (Albina Starykova)
+ * Increase the contrast between the rich text / StreamField block picker and the page in dark mode (Albina Starykova)
  * Purge revisions of non-page models in `purge_revisions` command (Sage Abdullah)
  * Fix: Prevent choosers from failing when initial value is an unrecognised ID, e.g. when moving a page from a location where `parent_page_types` would disallow it (Dan Braghis)
  * Fix: Move comment notifications toggle to the comments side panel (Sage Abdullah)

client/src/components/ComboBox/ComboBox.scss

@@ -5,6 +5,9 @@ $spacing-sm: theme('spacing.5');
 
 .w-combobox {
   width: min(400px, 80vw);
+  @include dark-theme() {
+    background-color: theme('colors.surface-tooltip');
+  }
   background: theme('colors.surface-page');
   color: theme('colors.text-context');
   border-radius: theme('borderRadius.DEFAULT');

client/src/tokens/colorThemes.js

@@ -258,7 +258,13 @@ const light = [
   {
     label: 'Misc',
     tokens: {
-      focus: focusToken,
+      'focus': focusToken,
+      'box-shadow-md': {
+        value: 'var(--w-color-black-25)',
+        bgUtility: 'w-bg-box-shadow-md',
+        textUtility: 'w-text-box-shadow-md',
+        cssVariable: '--w-color-box-shadow-md',
+      },
     },
   },
 ];
@@ -498,7 +504,13 @@ const dark = [
   {
     label: 'Misc',
     tokens: {
-      focus: focusToken,
+      'focus': focusToken,
+      'box-shadow-md': {
+        value: 'var(--w-color-black-50)',
+        bgUtility: 'w-bg-box-shadow-md',
+        textUtility: 'w-text-box-shadow-md',
+        cssVariable: '--w-color-box-shadow-md',
+      },
     },
   },
 ];

client/src/tokens/colorVariables.test.js

@@ -183,6 +183,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-border-field-hover": "var(--w-color-grey-200)",
         "--w-color-border-field-inactive": "var(--w-color-grey-150)",
         "--w-color-border-furniture": "var(--w-color-grey-100)",
+        "--w-color-box-shadow-md": "var(--w-color-black-25)",
         "--w-color-focus": "#00A885",
         "--w-color-icon-primary": "var(--w-color-primary)",
         "--w-color-icon-primary-hover": "var(--w-color-primary-200)",
@@ -227,6 +228,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-border-field-hover": "var(--w-color-grey-200)",
         "--w-color-border-field-inactive": "var(--w-color-grey-500)",
         "--w-color-border-furniture": "var(--w-color-grey-500)",
+        "--w-color-box-shadow-md": "var(--w-color-black-50)",
         "--w-color-focus": "#00A885",
         "--w-color-icon-primary": "var(--w-color-grey-150)",
         "--w-color-icon-primary-hover": "var(--w-color-grey-50)",

client/src/tokens/objectStyles.js

@@ -17,7 +17,7 @@ const borderWidth = {
 // If adding new values, use T-shirt sizing naming.
 const boxShadow = {
   DEFAULT: '5px 5px 20px rgba(0, 0, 0, 0.05)',
-  md: '5px 5px 30px rgba(0, 0, 0, 0.25)',
+  md: '5px 5px 30px var(--w-color-box-shadow-md)',
 };
 
 module.exports = {

docs/releases/5.1.md

@@ -62,6 +62,7 @@ As part of tackling Wagtail’s technical debt and improving [CSP compatibility]
  * Add support for adding [HTML `attrs`](panels_attrs) on `FieldPanel`, `FieldRowPanel`, `MultiFieldPanel`, and others (Aman Pandey, Antoni Martyniuk, LB (Ben) Johnston)
  * Change to always cache renditions (Jake Howard)
  * Update link/document rich text tooltips for consistency with the inline toolbar (Albina Starykova)
+ * Increase the contrast between the rich text / StreamField block picker and the page in dark mode (Albina Starykova)
  * Purge revisions of non-page models in `purge_revisions` command (Sage Abdullah)
 
 ### Bug fixes