Update styles for critical buttons in dark mode (#10643)

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

CHANGELOG.txt

@@ -48,6 +48,7 @@ Changelog
  * Fix: Prevent memory exhaustion when updating a large number of image renditions (Jake Howard)
  * Fix: Add missing Time Zone conversions and date formatting throughout the admin (Stefan Hammer)
  * Fix: Ensure that audit logs and revisions are consistently use UTC and add migration for existing entries (Stefan Hammer)
+ * Fix: Make sure "critical" buttons have enough color contrast in dark mode (Albina Starykova)
  * Docs: Document how to add non-ModelAdmin views to a `ModelAdminGroup` (Onno Timmerman)
  * Docs: Document how to add StructBlock data to a StreamField (Ramon Wenger)
  * Docs: Update ReadTheDocs settings to v2 to resolve urllib3 issue in linkcheck extension (Thibaud Colas)

client/scss/components/_button.scss

@@ -77,13 +77,13 @@
   &.no,
   &.serious {
     background-color: theme('colors.surface-page');
-    border: 1px solid theme('colors.critical.200');
-    color: theme('colors.critical.200');
+    border: 1px solid theme('colors.text-error');
+    color: theme('colors.text-error');
 
     &:hover {
-      color: theme('colors.critical.200');
-      border-color: theme('colors.critical.200');
-      background-color: theme('colors.critical.50');
+      color: theme('colors.text-button-critical-outline-hover');
+      border-color: theme('colors.text-button-critical-outline-hover');
+      background-color: theme('colors.surface-button-critical-hover');
     }
   }
 

client/src/tokens/colorThemes.js

@@ -94,6 +94,12 @@ const light = [
         textUtility: 'w-text-surface-button-outline-hover',
         cssVariable: '--w-color-surface-button-outline-hover',
       },
+      'surface-button-critical-hover': {
+        value: 'var(--w-color-critical-50)',
+        bgUtility: 'w-bg-surface-button-critical-hover',
+        textUtility: 'w-text-surface-button-critical-hover',
+        cssVariable: '--w-color-surface-button-critical-hover',
+      },
     },
   },
   {
@@ -171,6 +177,12 @@ const light = [
         textUtility: 'w-text-text-error',
         cssVariable: '--w-color-text-error',
       },
+      'text-button-critical-outline-hover': {
+        value: 'var(--w-color-critical-200)',
+        bgUtility: 'w-bg-text-button-critical-outline-hover',
+        textUtility: 'w-text-text-button-critical-outline-hover',
+        cssVariable: '--w-color-text-button-critical-outline-hover',
+      },
     },
   },
   {
@@ -322,6 +334,12 @@ const dark = [
         textUtility: 'w-text-surface-button-outline-hover',
         cssVariable: '--w-color-surface-button-outline-hover',
       },
+      'surface-button-critical-hover': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-button-critical-hover',
+        textUtility: 'w-text-surface-button-critical-hover',
+        cssVariable: '--w-color-surface-button-critical-hover',
+      },
     },
   },
   {
@@ -399,6 +417,12 @@ const dark = [
         textUtility: 'w-text-text-error',
         cssVariable: '--w-color-text-error',
       },
+      'text-button-critical-outline-hover': {
+        value: 'var(--w-color-critical-50)',
+        bgUtility: 'w-bg-text-button-critical-outline-hover',
+        textUtility: 'w-text-text-button-critical-outline-hover',
+        cssVariable: '--w-color-text-button-critical-outline-hover',
+      },
     },
   },
   {

client/src/tokens/colorVariables.test.js

@@ -188,6 +188,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-icon-primary-hover": "var(--w-color-primary-200)",
         "--w-color-icon-secondary": "var(--w-color-grey-400)",
         "--w-color-icon-secondary-hover": "var(--w-color-primary-200)",
+        "--w-color-surface-button-critical-hover": "var(--w-color-critical-50)",
         "--w-color-surface-button-default": "var(--w-color-secondary)",
         "--w-color-surface-button-hover": "var(--w-color-secondary-400)",
         "--w-color-surface-button-inactive": "var(--w-color-grey-400)",
@@ -200,6 +201,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-page": "var(--w-color-white)",
         "--w-color-surface-tooltip": "var(--w-color-primary-200)",
         "--w-color-text-button": "var(--w-color-white)",
+        "--w-color-text-button-critical-outline-hover": "var(--w-color-critical-200)",
         "--w-color-text-button-outline-default": "var(--w-color-secondary)",
         "--w-color-text-context": "var(--w-color-grey-600)",
         "--w-color-text-error": "var(--w-color-critical-200)",
@@ -230,6 +232,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-icon-primary-hover": "var(--w-color-grey-50)",
         "--w-color-icon-secondary": "var(--w-color-grey-150)",
         "--w-color-icon-secondary-hover": "var(--w-color-grey-50)",
+        "--w-color-surface-button-critical-hover": "var(--w-color-grey-600)",
         "--w-color-surface-button-default": "var(--w-color-secondary)",
         "--w-color-surface-button-hover": "var(--w-color-secondary-400)",
         "--w-color-surface-button-inactive": "var(--w-color-grey-400)",
@@ -242,6 +245,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-page": "var(--w-color-grey-600)",
         "--w-color-surface-tooltip": "var(--w-color-grey-500)",
         "--w-color-text-button": "var(--w-color-white)",
+        "--w-color-text-button-critical-outline-hover": "var(--w-color-critical-50)",
         "--w-color-text-button-outline-default": "var(--w-color-secondary-100)",
         "--w-color-text-context": "var(--w-color-grey-50)",
         "--w-color-text-error": "var(--w-color-critical-100)",

docs/releases/5.1.md

@@ -94,6 +94,7 @@ As part of tackling Wagtail’s technical debt and improving [CSP compatibility]
  * Prevent memory exhaustion when updating a large number of image renditions (Jake Howard)
  * Add missing Time Zone conversions and date formatting throughout the admin (Stefan Hammer)
  * Ensure that audit logs and revisions are consistently use UTC and add migration for existing entries (Stefan Hammer)
+ * Make sure "critical" buttons have enough color contrast in dark mode (Albina Starykova)
 
 ### Documentation