diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 3f75cbd4c3..2f803c26a4 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss
index 1febf8bb1f..752a5b4b26 100644
--- a/client/scss/components/_button.scss
+++ b/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');
}
}
diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js
index 4a14e1a6c0..a9f18ccd5a 100644
--- a/client/src/tokens/colorThemes.js
+++ b/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',
+ },
},
},
{
diff --git a/client/src/tokens/colorVariables.test.js b/client/src/tokens/colorVariables.test.js
index 6d9c70591e..4a26fde447 100644
--- a/client/src/tokens/colorVariables.test.js
+++ b/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)",
diff --git a/docs/_static/wagtail_colors_tables.txt b/docs/_static/wagtail_colors_tables.txt
index 74cad5b1f4..ae752f54cf 100644
--- a/docs/_static/wagtail_colors_tables.txt
+++ b/docs/_static/wagtail_colors_tables.txt
@@ -1,4 +1,4 @@
-Make sure to test any customisations against our Contrast Grid. Try out your own customisations with this interactive style editor:
Static colours
| Variable | Usage |
---|
| --w-color-black | Shadows only |
| --w-color-grey-600 | Body copy, user content |
| --w-color-grey-500 | Panels, dividers in dark mode |
| --w-color-grey-400 | Help text, placeholders, meta text, neutral state indicators |
| --w-color-grey-200 | Dividers, button borders |
| --w-color-grey-150 | Field borders |
| --w-color-grey-100 | Dividers, panel borders |
| --w-color-grey-50 | Background for panels, row highlights |
| --w-color-white | Page backgrounds, Panels, Button text |
| --w-color-primary | Wagtail branding, Panels, Headings, Buttons, Labels |
| --w-color-primary-200 | Accent for elements used in conjunction with primary colour in sidebar |
| --w-color-secondary | Primary buttons, action links |
| --w-color-secondary-600 | Hover states for two-tone buttons |
| --w-color-secondary-400 | Two-tone buttons, hover states |
| --w-color-secondary-100 | UI element highlights over dark backgrounds |
| --w-color-secondary-75 | UI element highlights over dark text |
| --w-color-secondary-50 | Button backgrounds, highlighted fields background |
| --w-color-info-100 | Background and icons for information messages |
| --w-color-info-50 | Background only, for information messages |
| --w-color-positive-100 | Positive states |
| --w-color-positive-50 | Background only, for positive states |
| --w-color-warning-100 | Background and icons for potentially dangerous states |
| --w-color-warning-50 | Background only, for potentially dangerous states |
| --w-color-critical-200 | Dangerous actions or states (over light background), errors |
| --w-color-critical-100 | Dangerous actions or states (over dark background) |
| --w-color-critical-50 | Background only, for dangerous states |
Light & dark theme colours
Light | Dark | Variable |
---|
Surfaces - General |
---|
| | --w-color-surface-page |
| | --w-color-surface-field |
| | --w-color-surface-field-inactive |
| | --w-color-surface-header |
| | --w-color-surface-menus |
| | --w-color-surface-menu-item-active |
| | --w-color-surface-tooltip |
| | --w-color-surface-button-default |
| | --w-color-surface-button-hover |
| | --w-color-surface-button-inactive |
| | --w-color-surface-button-outline-hover |
Text |
---|
| | --w-color-text-button |
| | --w-color-text-label-menus-default |
| | --w-color-text-label-menus-active |
| | --w-color-text-label |
| | --w-color-text-context |
| | --w-color-text-meta |
| | --w-color-text-placeholder |
| | --w-color-text-link-default |
| | --w-color-text-link-hover |
| | --w-color-text-button-outline-default |
| | --w-color-text-highlight |
| | --w-color-text-error |
Icons |
---|
| | --w-color-icon-primary |
| | --w-color-icon-primary-hover |
| | --w-color-icon-secondary |
| | --w-color-icon-secondary-hover |
Borders |
---|
| | --w-color-border-furniture |
| | --w-color-border-button-small-outline-default |
| | --w-color-border-field-default |
| | --w-color-border-field-inactive |
| | --w-color-border-field-hover |
| | --w-color-border-button-outline-default |
Misc |
---|
| | --w-color-focus |
+}
Static colours
| Variable | Usage |
---|
| --w-color-black | Shadows only |
| --w-color-grey-600 | Body copy, user content |
| --w-color-grey-500 | Panels, dividers in dark mode |
| --w-color-grey-400 | Help text, placeholders, meta text, neutral state indicators |
| --w-color-grey-200 | Dividers, button borders |
| --w-color-grey-150 | Field borders |
| --w-color-grey-100 | Dividers, panel borders |
| --w-color-grey-50 | Background for panels, row highlights |
| --w-color-white | Page backgrounds, Panels, Button text |
| --w-color-primary | Wagtail branding, Panels, Headings, Buttons, Labels |
| --w-color-primary-200 | Accent for elements used in conjunction with primary colour in sidebar |
| --w-color-secondary | Primary buttons, action links |
| --w-color-secondary-600 | Hover states for two-tone buttons |
| --w-color-secondary-400 | Two-tone buttons, hover states |
| --w-color-secondary-100 | UI element highlights over dark backgrounds |
| --w-color-secondary-75 | UI element highlights over dark text |
| --w-color-secondary-50 | Button backgrounds, highlighted fields background |
| --w-color-info-100 | Background and icons for information messages |
| --w-color-info-50 | Background only, for information messages |
| --w-color-positive-100 | Positive states |
| --w-color-positive-50 | Background only, for positive states |
| --w-color-warning-100 | Background and icons for potentially dangerous states |
| --w-color-warning-50 | Background only, for potentially dangerous states |
| --w-color-critical-200 | Dangerous actions or states (over light background), errors |
| --w-color-critical-100 | Dangerous actions or states (over dark background) |
| --w-color-critical-50 | Background only, for dangerous states |
Light & dark theme colours
Light | Dark | Variable |
---|
Surfaces - General |
---|
| | --w-color-surface-page |
| | --w-color-surface-field |
| | --w-color-surface-field-inactive |
| | --w-color-surface-header |
| | --w-color-surface-menus |
| | --w-color-surface-menu-item-active |
| | --w-color-surface-tooltip |
| | --w-color-surface-button-default |
| | --w-color-surface-button-hover |
| | --w-color-surface-button-inactive |
| | --w-color-surface-button-outline-hover |
| | --w-color-surface-button-critical-hover |
Text |
---|
| | --w-color-text-button |
| | --w-color-text-label-menus-default |
| | --w-color-text-label-menus-active |
| | --w-color-text-label |
| | --w-color-text-context |
| | --w-color-text-meta |
| | --w-color-text-placeholder |
| | --w-color-text-link-default |
| | --w-color-text-link-hover |
| | --w-color-text-button-outline-default |
| | --w-color-text-highlight |
| | --w-color-text-error |
| | --w-color-text-button-critical-outline-hover |
Icons |
---|
| | --w-color-icon-primary |
| | --w-color-icon-primary-hover |
| | --w-color-icon-secondary |
| | --w-color-icon-secondary-hover |
Borders |
---|
| | --w-color-border-furniture |
| | --w-color-border-button-small-outline-default |
| | --w-color-border-field-default |
| | --w-color-border-field-inactive |
| | --w-color-border-field-hover |
| | --w-color-border-button-outline-default |
Misc |
---|
| | --w-color-focus |
diff --git a/docs/releases/5.1.md b/docs/releases/5.1.md
index a165644e81..a99c652b97 100644
--- a/docs/releases/5.1.md
+++ b/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