From a84fdd49190e29aca2161c80bbdbf257368fb848 Mon Sep 17 00:00:00 2001
From: Albina <51043550+albinazs@users.noreply.github.com>
Date: Fri, 14 Jul 2023 11:35:43 +0300
Subject: [PATCH] Update styles for critical buttons in dark mode (#10643)
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
---
CHANGELOG.txt | 1 +
client/scss/components/_button.scss | 10 +++++-----
client/src/tokens/colorThemes.js | 24 ++++++++++++++++++++++++
client/src/tokens/colorVariables.test.js | 4 ++++
docs/_static/wagtail_colors_tables.txt | 4 ++--
docs/releases/5.1.md | 1 +
6 files changed, 37 insertions(+), 7 deletions(-)
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 @@
-<section><div><!-- Auto-generated with Storybook. See https://github.com/wagtail/wagtail/blob/main/client/src/tokens/colors.stories.tsx. Copy this comment’s parent section to update the `custom_user_interface_colours` documentation. --></div><p>Make sure to test any customisations against our <a href="https://contrast-grid.eightshapes.com/?version=1.1.0&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&background-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%23E2F5FC%2C%20info-50%0D%0A%231F7E9A%2C%20info-100%0D%0A%23E0FBF4%2C%20positive-50%0D%0A%231B8666%2C%20positive-100%0D%0A%23FFF5D8%2C%20warning-50%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FDE9E9%2C%20critical-50%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CD4444%2C%20critical-200&foreground-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%231F7E9A%2C%20info-100%0D%0A%231B8666%2C%20positive-100%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CD4444%2C%20critical-200">Contrast Grid</a>. Try out your own customisations with this interactive style editor:</p><style> :root {--w-color-black-hue: 0;--w-color-black-saturation: 0%;--w-color-black-lightness: 0%;--w-color-black: hsl(var(--w-color-black-hue) var(--w-color-black-saturation) var(--w-color-black-lightness));--w-color-grey-50-hue: calc(var(--w-color-grey-600-hue) + 240);--w-color-grey-50-saturation: calc(var(--w-color-grey-600-saturation) + 12.5%);--w-color-grey-50-lightness: calc(var(--w-color-grey-600-lightness) + 82%);--w-color-grey-50: hsl(var(--w-color-grey-50-hue) var(--w-color-grey-50-saturation) var(--w-color-grey-50-lightness));--w-color-grey-100-hue: var(--w-color-grey-600-hue);--w-color-grey-100-saturation: var(--w-color-grey-600-saturation);--w-color-grey-100-lightness: calc(var(--w-color-grey-600-lightness) + 72.9%);--w-color-grey-100: hsl(var(--w-color-grey-100-hue) var(--w-color-grey-100-saturation) var(--w-color-grey-100-lightness));--w-color-grey-150-hue: var(--w-color-grey-600-hue);--w-color-grey-150-saturation: var(--w-color-grey-600-saturation);--w-color-grey-150-lightness: calc(var(--w-color-grey-600-lightness) + 63.5%);--w-color-grey-150: hsl(var(--w-color-grey-150-hue) var(--w-color-grey-150-saturation) var(--w-color-grey-150-lightness));--w-color-grey-200-hue: var(--w-color-grey-600-hue);--w-color-grey-200-saturation: var(--w-color-grey-600-saturation);--w-color-grey-200-lightness: calc(var(--w-color-grey-600-lightness) + 42.4%);--w-color-grey-200: hsl(var(--w-color-grey-200-hue) var(--w-color-grey-200-saturation) var(--w-color-grey-200-lightness));--w-color-grey-400-hue: var(--w-color-grey-600-hue);--w-color-grey-400-saturation: var(--w-color-grey-600-saturation);--w-color-grey-400-lightness: calc(var(--w-color-grey-600-lightness) + 21.2%);--w-color-grey-400: hsl(var(--w-color-grey-400-hue) var(--w-color-grey-400-saturation) var(--w-color-grey-400-lightness));--w-color-grey-500-hue: var(--w-color-grey-600-hue);--w-color-grey-500-saturation: var(--w-color-grey-600-saturation);--w-color-grey-500-lightness: calc(var(--w-color-grey-600-lightness) + 5.1%);--w-color-grey-500: hsl(var(--w-color-grey-500-hue) var(--w-color-grey-500-saturation) var(--w-color-grey-500-lightness));--w-color-grey-600-hue: 0;--w-color-grey-600-saturation: 0%;--w-color-grey-600-lightness: 14.9%;--w-color-grey-600: hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness));--w-color-white-hue: 0;--w-color-white-saturation: 0%;--w-color-white-lightness: 100%;--w-color-white: hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness));--w-color-primary-200-hue: calc(var(--w-color-primary-hue) - 0.5);--w-color-primary-200-saturation: calc(var(--w-color-primary-saturation) - 0.4%);--w-color-primary-200-lightness: calc(var(--w-color-primary-lightness) - 4.1%);--w-color-primary-200: hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness));--w-color-primary-hue: 254.3;--w-color-primary-saturation: 50.4%;--w-color-primary-lightness: 24.5%;--w-color-primary: hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness));--w-color-secondary-50-hue: calc(var(--w-color-secondary-hue) - 0.5);--w-color-secondary-50-saturation: calc(var(--w-color-secondary-saturation) - 37.5%);--w-color-secondary-50-lightness: calc(var(--w-color-secondary-lightness) + 72.2%);--w-color-secondary-50: hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness));--w-color-secondary-75-hue: calc(var(--w-color-secondary-hue) + 0.2);--w-color-secondary-75-saturation: calc(var(--w-color-secondary-saturation) - 47%);--w-color-secondary-75-lightness: calc(var(--w-color-secondary-lightness) + 42.8%);--w-color-secondary-75: hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness));--w-color-secondary-100-hue: calc(var(--w-color-secondary-hue) - 0.2);--w-color-secondary-100-saturation: var(--w-color-secondary-saturation);--w-color-secondary-100-lightness: calc(var(--w-color-secondary-lightness) + 10%);--w-color-secondary-100: hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness));--w-color-secondary-400-hue: calc(var(--w-color-secondary-hue) + 1.4);--w-color-secondary-400-saturation: var(--w-color-secondary-saturation);--w-color-secondary-400-lightness: calc(var(--w-color-secondary-lightness) - 6.3%);--w-color-secondary-400: hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness));--w-color-secondary-600-hue: calc(var(--w-color-secondary-hue) + 1.2);--w-color-secondary-600-saturation: var(--w-color-secondary-saturation);--w-color-secondary-600-lightness: calc(var(--w-color-secondary-lightness) - 11.2%);--w-color-secondary-600: hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness));--w-color-secondary-hue: 180.5;--w-color-secondary-saturation: 100%;--w-color-secondary-lightness: 24.7%;--w-color-secondary: hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness));--w-color-info-50-hue: calc(var(--w-color-info-100-hue) + 2.5);--w-color-info-50-saturation: calc(var(--w-color-info-100-saturation) + 14.8%);--w-color-info-50-lightness: calc(var(--w-color-info-100-lightness) + 57.4%);--w-color-info-50: hsl(var(--w-color-info-50-hue) var(--w-color-info-50-saturation) var(--w-color-info-50-lightness));--w-color-info-100-hue: 193.7;--w-color-info-100-saturation: 66.5%;--w-color-info-100-lightness: 36.3%;--w-color-info-100: hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness));--w-color-positive-50-hue: calc(var(--w-color-positive-100-hue) + 2.3);--w-color-positive-50-saturation: calc(var(--w-color-positive-100-saturation) + 10.6%);--w-color-positive-50-lightness: calc(var(--w-color-positive-100-lightness) + 61.5%);--w-color-positive-50: hsl(var(--w-color-positive-50-hue) var(--w-color-positive-50-saturation) var(--w-color-positive-50-lightness));--w-color-positive-100-hue: 162.1;--w-color-positive-100-saturation: 66.5%;--w-color-positive-100-lightness: 31.6%;--w-color-positive-100: hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness));--w-color-warning-50-hue: calc(var(--w-color-warning-100-hue) - 2.3);--w-color-warning-50-saturation: calc(var(--w-color-warning-100-saturation) - 21.3%);--w-color-warning-50-lightness: calc(var(--w-color-warning-100-lightness) + 41.8%);--w-color-warning-50: hsl(var(--w-color-warning-50-hue) var(--w-color-warning-50-saturation) var(--w-color-warning-50-lightness));--w-color-warning-100-hue: 39.6;--w-color-warning-100-saturation: 100%;--w-color-warning-100-lightness: 49%;--w-color-warning-100: hsl(var(--w-color-warning-100-hue) var(--w-color-warning-100-saturation) var(--w-color-warning-100-lightness));--w-color-critical-50-hue: var(--w-color-critical-200-hue);--w-color-critical-50-saturation: calc(var(--w-color-critical-200-saturation) + 25.5%);--w-color-critical-50-lightness: calc(var(--w-color-critical-200-lightness) + 41.8%);--w-color-critical-50: hsl(var(--w-color-critical-50-hue) var(--w-color-critical-50-saturation) var(--w-color-critical-50-lightness));--w-color-critical-100-hue: calc(var(--w-color-critical-200-hue) + 354.9);--w-color-critical-100-saturation: calc(var(--w-color-critical-200-saturation) + 39.8%);--w-color-critical-100-lightness: calc(var(--w-color-critical-200-lightness) + 13.2%);--w-color-critical-100: hsl(var(--w-color-critical-100-hue) var(--w-color-critical-100-saturation) var(--w-color-critical-100-lightness));--w-color-critical-200-hue: 0;--w-color-critical-200-saturation: 57.8%;--w-color-critical-200-lightness: 53.5%;--w-color-critical-200: hsl(var(--w-color-critical-200-hue) var(--w-color-critical-200-saturation) var(--w-color-critical-200-lightness));--w-color-surface-page: var(--w-color-white);--w-color-surface-field: var(--w-color-white);--w-color-surface-field-inactive: var(--w-color-grey-50);--w-color-surface-header: var(--w-color-grey-50);--w-color-surface-menus: var(--w-color-primary);--w-color-surface-menu-item-active: var(--w-color-primary-200);--w-color-surface-tooltip: var(--w-color-primary-200);--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);--w-color-surface-button-outline-hover: var(--w-color-secondary-50);--w-color-text-button: var(--w-color-white);--w-color-text-label-menus-default: var(--w-color-white-80);--w-color-text-label-menus-active: var(--w-color-white);--w-color-text-label: var(--w-color-primary);--w-color-text-context: var(--w-color-grey-600);--w-color-text-meta: var(--w-color-grey-400);--w-color-text-placeholder: var(--w-color-grey-400);--w-color-text-link-default: var(--w-color-secondary);--w-color-text-link-hover: var(--w-color-secondary-400);--w-color-text-button-outline-default: var(--w-color-secondary);--w-color-text-highlight: var(--w-color-secondary-75);--w-color-text-error: var(--w-color-critical-200);--w-color-icon-primary: var(--w-color-primary);--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-border-furniture: var(--w-color-grey-100);--w-color-border-button-small-outline-default: var(--w-color-grey-150);--w-color-border-field-default: var(--w-color-grey-150);--w-color-border-field-inactive: var(--w-color-grey-150);--w-color-border-field-hover: var(--w-color-grey-200);--w-color-border-button-outline-default: var(--w-color-secondary);--w-color-focus: #00A885;} .w-theme-dark {--w-color-surface-page: var(--w-color-grey-600);--w-color-surface-field: var(--w-color-grey-600);--w-color-surface-field-inactive: var(--w-color-grey-500);--w-color-surface-header: var(--w-color-grey-600);--w-color-surface-menus: var(--w-color-grey-500);--w-color-surface-menu-item-active: var(--w-color-grey-600);--w-color-surface-tooltip: var(--w-color-grey-500);--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);--w-color-surface-button-outline-hover: var(--w-color-grey-500);--w-color-text-button: var(--w-color-white);--w-color-text-label-menus-default: var(--w-color-white-80);--w-color-text-label-menus-active: var(--w-color-white);--w-color-text-label: var(--w-color-grey-150);--w-color-text-context: var(--w-color-grey-50);--w-color-text-meta: var(--w-color-grey-150);--w-color-text-placeholder: var(--w-color-grey-200);--w-color-text-link-default: var(--w-color-secondary-100);--w-color-text-link-hover: var(--w-color-secondary-75);--w-color-text-button-outline-default: var(--w-color-secondary-100);--w-color-text-highlight: var(--w-color-secondary-400);--w-color-text-error: var(--w-color-critical-100);--w-color-icon-primary: var(--w-color-grey-150);--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-border-furniture: var(--w-color-grey-500);--w-color-border-button-small-outline-default: var(--w-color-grey-400);--w-color-border-field-default: var(--w-color-grey-400);--w-color-border-field-inactive: var(--w-color-grey-500);--w-color-border-field-hover: var(--w-color-grey-200);--w-color-border-button-outline-default: var(--w-color-secondary-100);--w-color-focus: #00A885;} .wagtail-color-swatch { border-collapse: separate; border-spacing: 4px; } .wagtail-color-swatch td:first-child, .wagtail-color-swatch .w-theme-dark { height: 1.5rem; width: 1.5rem; border: 1px solid #333; forced-color-adjust: none; } </style><pre><style contenteditable="true" style="display: block;">:root {
+<section><div><!-- Auto-generated with Storybook. See https://github.com/wagtail/wagtail/blob/main/client/src/tokens/colors.stories.tsx. Copy this comment’s parent section to update the `custom_user_interface_colours` documentation. --></div><p>Make sure to test any customisations against our <a href="https://contrast-grid.eightshapes.com/?version=1.1.0&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&background-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%23E2F5FC%2C%20info-50%0D%0A%231F7E9A%2C%20info-100%0D%0A%23E0FBF4%2C%20positive-50%0D%0A%231B8666%2C%20positive-100%0D%0A%23FFF5D8%2C%20warning-50%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FDE9E9%2C%20critical-50%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CD4444%2C%20critical-200&foreground-colors=%23000000%2C%20black%0D%0A%23F6F6F8%2C%20grey-50%0D%0A%23E0E0E0%2C%20grey-100%0D%0A%23C8C8C8%2C%20grey-150%0D%0A%23929292%2C%20grey-200%0D%0A%235C5C5C%2C%20grey-400%0D%0A%23333333%2C%20grey-500%0D%0A%23262626%2C%20grey-600%0D%0A%23FFFFFF%2C%20white%0D%0A%23261A4E%2C%20primary-200%0D%0A%232E1F5E%2C%20primary%0D%0A%23F2FCFC%2C%20secondary-50%0D%0A%2380D7D8%2C%20secondary-75%0D%0A%2300B0B1%2C%20secondary-100%0D%0A%23005B5E%2C%20secondary-400%0D%0A%23004345%2C%20secondary-600%0D%0A%23007D7E%2C%20secondary%0D%0A%231F7E9A%2C%20info-100%0D%0A%231B8666%2C%20positive-100%0D%0A%23FAA500%2C%20warning-100%0D%0A%23FD5765%2C%20critical-100%0D%0A%23CD4444%2C%20critical-200">Contrast Grid</a>. Try out your own customisations with this interactive style editor:</p><style> :root {--w-color-black-hue: 0;--w-color-black-saturation: 0%;--w-color-black-lightness: 0%;--w-color-black: hsl(var(--w-color-black-hue) var(--w-color-black-saturation) var(--w-color-black-lightness));--w-color-grey-50-hue: calc(var(--w-color-grey-600-hue) + 240);--w-color-grey-50-saturation: calc(var(--w-color-grey-600-saturation) + 12.5%);--w-color-grey-50-lightness: calc(var(--w-color-grey-600-lightness) + 82%);--w-color-grey-50: hsl(var(--w-color-grey-50-hue) var(--w-color-grey-50-saturation) var(--w-color-grey-50-lightness));--w-color-grey-100-hue: var(--w-color-grey-600-hue);--w-color-grey-100-saturation: var(--w-color-grey-600-saturation);--w-color-grey-100-lightness: calc(var(--w-color-grey-600-lightness) + 72.9%);--w-color-grey-100: hsl(var(--w-color-grey-100-hue) var(--w-color-grey-100-saturation) var(--w-color-grey-100-lightness));--w-color-grey-150-hue: var(--w-color-grey-600-hue);--w-color-grey-150-saturation: var(--w-color-grey-600-saturation);--w-color-grey-150-lightness: calc(var(--w-color-grey-600-lightness) + 63.5%);--w-color-grey-150: hsl(var(--w-color-grey-150-hue) var(--w-color-grey-150-saturation) var(--w-color-grey-150-lightness));--w-color-grey-200-hue: var(--w-color-grey-600-hue);--w-color-grey-200-saturation: var(--w-color-grey-600-saturation);--w-color-grey-200-lightness: calc(var(--w-color-grey-600-lightness) + 42.4%);--w-color-grey-200: hsl(var(--w-color-grey-200-hue) var(--w-color-grey-200-saturation) var(--w-color-grey-200-lightness));--w-color-grey-400-hue: var(--w-color-grey-600-hue);--w-color-grey-400-saturation: var(--w-color-grey-600-saturation);--w-color-grey-400-lightness: calc(var(--w-color-grey-600-lightness) + 21.2%);--w-color-grey-400: hsl(var(--w-color-grey-400-hue) var(--w-color-grey-400-saturation) var(--w-color-grey-400-lightness));--w-color-grey-500-hue: var(--w-color-grey-600-hue);--w-color-grey-500-saturation: var(--w-color-grey-600-saturation);--w-color-grey-500-lightness: calc(var(--w-color-grey-600-lightness) + 5.1%);--w-color-grey-500: hsl(var(--w-color-grey-500-hue) var(--w-color-grey-500-saturation) var(--w-color-grey-500-lightness));--w-color-grey-600-hue: 0;--w-color-grey-600-saturation: 0%;--w-color-grey-600-lightness: 14.9%;--w-color-grey-600: hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness));--w-color-white-hue: 0;--w-color-white-saturation: 0%;--w-color-white-lightness: 100%;--w-color-white: hsl(var(--w-color-white-hue) var(--w-color-white-saturation) var(--w-color-white-lightness));--w-color-primary-200-hue: calc(var(--w-color-primary-hue) - 0.5);--w-color-primary-200-saturation: calc(var(--w-color-primary-saturation) - 0.4%);--w-color-primary-200-lightness: calc(var(--w-color-primary-lightness) - 4.1%);--w-color-primary-200: hsl(var(--w-color-primary-200-hue) var(--w-color-primary-200-saturation) var(--w-color-primary-200-lightness));--w-color-primary-hue: 254.3;--w-color-primary-saturation: 50.4%;--w-color-primary-lightness: 24.5%;--w-color-primary: hsl(var(--w-color-primary-hue) var(--w-color-primary-saturation) var(--w-color-primary-lightness));--w-color-secondary-50-hue: calc(var(--w-color-secondary-hue) - 0.5);--w-color-secondary-50-saturation: calc(var(--w-color-secondary-saturation) - 37.5%);--w-color-secondary-50-lightness: calc(var(--w-color-secondary-lightness) + 72.2%);--w-color-secondary-50: hsl(var(--w-color-secondary-50-hue) var(--w-color-secondary-50-saturation) var(--w-color-secondary-50-lightness));--w-color-secondary-75-hue: calc(var(--w-color-secondary-hue) + 0.2);--w-color-secondary-75-saturation: calc(var(--w-color-secondary-saturation) - 47%);--w-color-secondary-75-lightness: calc(var(--w-color-secondary-lightness) + 42.8%);--w-color-secondary-75: hsl(var(--w-color-secondary-75-hue) var(--w-color-secondary-75-saturation) var(--w-color-secondary-75-lightness));--w-color-secondary-100-hue: calc(var(--w-color-secondary-hue) - 0.2);--w-color-secondary-100-saturation: var(--w-color-secondary-saturation);--w-color-secondary-100-lightness: calc(var(--w-color-secondary-lightness) + 10%);--w-color-secondary-100: hsl(var(--w-color-secondary-100-hue) var(--w-color-secondary-100-saturation) var(--w-color-secondary-100-lightness));--w-color-secondary-400-hue: calc(var(--w-color-secondary-hue) + 1.4);--w-color-secondary-400-saturation: var(--w-color-secondary-saturation);--w-color-secondary-400-lightness: calc(var(--w-color-secondary-lightness) - 6.3%);--w-color-secondary-400: hsl(var(--w-color-secondary-400-hue) var(--w-color-secondary-400-saturation) var(--w-color-secondary-400-lightness));--w-color-secondary-600-hue: calc(var(--w-color-secondary-hue) + 1.2);--w-color-secondary-600-saturation: var(--w-color-secondary-saturation);--w-color-secondary-600-lightness: calc(var(--w-color-secondary-lightness) - 11.2%);--w-color-secondary-600: hsl(var(--w-color-secondary-600-hue) var(--w-color-secondary-600-saturation) var(--w-color-secondary-600-lightness));--w-color-secondary-hue: 180.5;--w-color-secondary-saturation: 100%;--w-color-secondary-lightness: 24.7%;--w-color-secondary: hsl(var(--w-color-secondary-hue) var(--w-color-secondary-saturation) var(--w-color-secondary-lightness));--w-color-info-50-hue: calc(var(--w-color-info-100-hue) + 2.5);--w-color-info-50-saturation: calc(var(--w-color-info-100-saturation) + 14.8%);--w-color-info-50-lightness: calc(var(--w-color-info-100-lightness) + 57.4%);--w-color-info-50: hsl(var(--w-color-info-50-hue) var(--w-color-info-50-saturation) var(--w-color-info-50-lightness));--w-color-info-100-hue: 193.7;--w-color-info-100-saturation: 66.5%;--w-color-info-100-lightness: 36.3%;--w-color-info-100: hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness));--w-color-positive-50-hue: calc(var(--w-color-positive-100-hue) + 2.3);--w-color-positive-50-saturation: calc(var(--w-color-positive-100-saturation) + 10.6%);--w-color-positive-50-lightness: calc(var(--w-color-positive-100-lightness) + 61.5%);--w-color-positive-50: hsl(var(--w-color-positive-50-hue) var(--w-color-positive-50-saturation) var(--w-color-positive-50-lightness));--w-color-positive-100-hue: 162.1;--w-color-positive-100-saturation: 66.5%;--w-color-positive-100-lightness: 31.6%;--w-color-positive-100: hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness));--w-color-warning-50-hue: calc(var(--w-color-warning-100-hue) - 2.3);--w-color-warning-50-saturation: calc(var(--w-color-warning-100-saturation) - 21.3%);--w-color-warning-50-lightness: calc(var(--w-color-warning-100-lightness) + 41.8%);--w-color-warning-50: hsl(var(--w-color-warning-50-hue) var(--w-color-warning-50-saturation) var(--w-color-warning-50-lightness));--w-color-warning-100-hue: 39.6;--w-color-warning-100-saturation: 100%;--w-color-warning-100-lightness: 49%;--w-color-warning-100: hsl(var(--w-color-warning-100-hue) var(--w-color-warning-100-saturation) var(--w-color-warning-100-lightness));--w-color-critical-50-hue: var(--w-color-critical-200-hue);--w-color-critical-50-saturation: calc(var(--w-color-critical-200-saturation) + 25.5%);--w-color-critical-50-lightness: calc(var(--w-color-critical-200-lightness) + 41.8%);--w-color-critical-50: hsl(var(--w-color-critical-50-hue) var(--w-color-critical-50-saturation) var(--w-color-critical-50-lightness));--w-color-critical-100-hue: calc(var(--w-color-critical-200-hue) + 354.9);--w-color-critical-100-saturation: calc(var(--w-color-critical-200-saturation) + 39.8%);--w-color-critical-100-lightness: calc(var(--w-color-critical-200-lightness) + 13.2%);--w-color-critical-100: hsl(var(--w-color-critical-100-hue) var(--w-color-critical-100-saturation) var(--w-color-critical-100-lightness));--w-color-critical-200-hue: 0;--w-color-critical-200-saturation: 57.8%;--w-color-critical-200-lightness: 53.5%;--w-color-critical-200: hsl(var(--w-color-critical-200-hue) var(--w-color-critical-200-saturation) var(--w-color-critical-200-lightness));--w-color-surface-page: var(--w-color-white);--w-color-surface-field: var(--w-color-white);--w-color-surface-field-inactive: var(--w-color-grey-50);--w-color-surface-header: var(--w-color-grey-50);--w-color-surface-menus: var(--w-color-primary);--w-color-surface-menu-item-active: var(--w-color-primary-200);--w-color-surface-tooltip: var(--w-color-primary-200);--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);--w-color-surface-button-outline-hover: var(--w-color-secondary-50);--w-color-surface-button-critical-hover: var(--w-color-critical-50);--w-color-text-button: var(--w-color-white);--w-color-text-label-menus-default: var(--w-color-white-80);--w-color-text-label-menus-active: var(--w-color-white);--w-color-text-label: var(--w-color-primary);--w-color-text-context: var(--w-color-grey-600);--w-color-text-meta: var(--w-color-grey-400);--w-color-text-placeholder: var(--w-color-grey-400);--w-color-text-link-default: var(--w-color-secondary);--w-color-text-link-hover: var(--w-color-secondary-400);--w-color-text-button-outline-default: var(--w-color-secondary);--w-color-text-highlight: var(--w-color-secondary-75);--w-color-text-error: var(--w-color-critical-200);--w-color-text-button-critical-outline-hover: var(--w-color-critical-200);--w-color-icon-primary: var(--w-color-primary);--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-border-furniture: var(--w-color-grey-100);--w-color-border-button-small-outline-default: var(--w-color-grey-150);--w-color-border-field-default: var(--w-color-grey-150);--w-color-border-field-inactive: var(--w-color-grey-150);--w-color-border-field-hover: var(--w-color-grey-200);--w-color-border-button-outline-default: var(--w-color-secondary);--w-color-focus: #00A885;} .w-theme-dark {--w-color-surface-page: var(--w-color-grey-600);--w-color-surface-field: var(--w-color-grey-600);--w-color-surface-field-inactive: var(--w-color-grey-500);--w-color-surface-header: var(--w-color-grey-600);--w-color-surface-menus: var(--w-color-grey-500);--w-color-surface-menu-item-active: var(--w-color-grey-600);--w-color-surface-tooltip: var(--w-color-grey-500);--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);--w-color-surface-button-outline-hover: var(--w-color-grey-500);--w-color-surface-button-critical-hover: var(--w-color-grey-600);--w-color-text-button: var(--w-color-white);--w-color-text-label-menus-default: var(--w-color-white-80);--w-color-text-label-menus-active: var(--w-color-white);--w-color-text-label: var(--w-color-grey-150);--w-color-text-context: var(--w-color-grey-50);--w-color-text-meta: var(--w-color-grey-150);--w-color-text-placeholder: var(--w-color-grey-200);--w-color-text-link-default: var(--w-color-secondary-100);--w-color-text-link-hover: var(--w-color-secondary-75);--w-color-text-button-outline-default: var(--w-color-secondary-100);--w-color-text-highlight: var(--w-color-secondary-400);--w-color-text-error: var(--w-color-critical-100);--w-color-text-button-critical-outline-hover: var(--w-color-critical-50);--w-color-icon-primary: var(--w-color-grey-150);--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-border-furniture: var(--w-color-grey-500);--w-color-border-button-small-outline-default: var(--w-color-grey-400);--w-color-border-field-default: var(--w-color-grey-400);--w-color-border-field-inactive: var(--w-color-grey-500);--w-color-border-field-hover: var(--w-color-grey-200);--w-color-border-button-outline-default: var(--w-color-secondary-100);--w-color-focus: #00A885;} .wagtail-color-swatch { border-collapse: separate; border-spacing: 4px; } .wagtail-color-swatch td:first-child, .wagtail-color-swatch .w-theme-dark { height: 1.5rem; width: 1.5rem; border: 1px solid #333; forced-color-adjust: none; } </style><pre><style contenteditable="true" style="display: block;">:root {
--w-color-primary: #2E1F5E;
/* Any valid CSS format is supported. */
--w-color-primary-200: hsl(253.8 50% 20.4%);
@@ -6,4 +6,4 @@
--w-color-secondary-hue: 180.5;
--w-color-secondary-saturation: 100%;
--w-color-secondary-lightness: 24.7%;
-}</style></pre><h3>Static colours</h3><table class="wagtail-color-swatch"><thead><tr><th aria-label="Swatch"></th><th>Variable</th><th>Usage</th></tr></thead><tbody><tr><td style="background-color: var(--w-color-black);"></td><td><code>--w-color-black</code></td><td>Shadows only</td></tr><tr><td style="background-color: var(--w-color-grey-600);"></td><td><code>--w-color-grey-600</code></td><td>Body copy, user content</td></tr><tr><td style="background-color: var(--w-color-grey-500);"></td><td><code>--w-color-grey-500</code></td><td>Panels, dividers in dark mode</td></tr><tr><td style="background-color: var(--w-color-grey-400);"></td><td><code>--w-color-grey-400</code></td><td>Help text, placeholders, meta text, neutral state indicators</td></tr><tr><td style="background-color: var(--w-color-grey-200);"></td><td><code>--w-color-grey-200</code></td><td>Dividers, button borders</td></tr><tr><td style="background-color: var(--w-color-grey-150);"></td><td><code>--w-color-grey-150</code></td><td>Field borders</td></tr><tr><td style="background-color: var(--w-color-grey-100);"></td><td><code>--w-color-grey-100</code></td><td>Dividers, panel borders</td></tr><tr><td style="background-color: var(--w-color-grey-50);"></td><td><code>--w-color-grey-50</code></td><td>Background for panels, row highlights</td></tr><tr><td style="background-color: var(--w-color-white);"></td><td><code>--w-color-white</code></td><td>Page backgrounds, Panels, Button text</td></tr><tr><td style="background-color: var(--w-color-primary);"></td><td><code>--w-color-primary</code></td><td>Wagtail branding, Panels, Headings, Buttons, Labels</td></tr><tr><td style="background-color: var(--w-color-primary-200);"></td><td><code>--w-color-primary-200</code></td><td>Accent for elements used in conjunction with primary colour in sidebar</td></tr><tr><td style="background-color: var(--w-color-secondary);"></td><td><code>--w-color-secondary</code></td><td>Primary buttons, action links</td></tr><tr><td style="background-color: var(--w-color-secondary-600);"></td><td><code>--w-color-secondary-600</code></td><td>Hover states for two-tone buttons</td></tr><tr><td style="background-color: var(--w-color-secondary-400);"></td><td><code>--w-color-secondary-400</code></td><td>Two-tone buttons, hover states</td></tr><tr><td style="background-color: var(--w-color-secondary-100);"></td><td><code>--w-color-secondary-100</code></td><td>UI element highlights over dark backgrounds</td></tr><tr><td style="background-color: var(--w-color-secondary-75);"></td><td><code>--w-color-secondary-75</code></td><td>UI element highlights over dark text</td></tr><tr><td style="background-color: var(--w-color-secondary-50);"></td><td><code>--w-color-secondary-50</code></td><td>Button backgrounds, highlighted fields background</td></tr><tr><td style="background-color: var(--w-color-info-100);"></td><td><code>--w-color-info-100</code></td><td>Background and icons for information messages</td></tr><tr><td style="background-color: var(--w-color-info-50);"></td><td><code>--w-color-info-50</code></td><td>Background only, for information messages</td></tr><tr><td style="background-color: var(--w-color-positive-100);"></td><td><code>--w-color-positive-100</code></td><td>Positive states</td></tr><tr><td style="background-color: var(--w-color-positive-50);"></td><td><code>--w-color-positive-50</code></td><td>Background only, for positive states</td></tr><tr><td style="background-color: var(--w-color-warning-100);"></td><td><code>--w-color-warning-100</code></td><td>Background and icons for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-warning-50);"></td><td><code>--w-color-warning-50</code></td><td>Background only, for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-critical-200);"></td><td><code>--w-color-critical-200</code></td><td>Dangerous actions or states (over light background), errors</td></tr><tr><td style="background-color: var(--w-color-critical-100);"></td><td><code>--w-color-critical-100</code></td><td>Dangerous actions or states (over dark background)</td></tr><tr><td style="background-color: var(--w-color-critical-50);"></td><td><code>--w-color-critical-50</code></td><td>Background only, for dangerous states</td></tr></tbody></table><h3>Light & dark theme colours</h3><table class="wagtail-color-swatch"><thead><tr><th>Light</th><th>Dark</th><th>Variable</th></tr></thead><tbody><tr><th scope="rowgroup" colspan="3">Surfaces - General</th></tr><tr><td style="background-color: var(--w-color-surface-page);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-page);"></td><td><code>--w-color-surface-page</code></td></tr><tr><td style="background-color: var(--w-color-surface-field);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-field);"></td><td><code>--w-color-surface-field</code></td></tr><tr><td style="background-color: var(--w-color-surface-field-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-field-inactive);"></td><td><code>--w-color-surface-field-inactive</code></td></tr><tr><td style="background-color: var(--w-color-surface-header);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-header);"></td><td><code>--w-color-surface-header</code></td></tr><tr><td style="background-color: var(--w-color-surface-menus);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-menus);"></td><td><code>--w-color-surface-menus</code></td></tr><tr><td style="background-color: var(--w-color-surface-menu-item-active);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-menu-item-active);"></td><td><code>--w-color-surface-menu-item-active</code></td></tr><tr><td style="background-color: var(--w-color-surface-tooltip);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-tooltip);"></td><td><code>--w-color-surface-tooltip</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-default);"></td><td><code>--w-color-surface-button-default</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-hover);"></td><td><code>--w-color-surface-button-hover</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-inactive);"></td><td><code>--w-color-surface-button-inactive</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-outline-hover);"></td><td><code>--w-color-surface-button-outline-hover</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Text</th></tr><tr><td style="background-color: var(--w-color-text-button);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button);"></td><td><code>--w-color-text-button</code></td></tr><tr><td style="background-color: var(--w-color-text-label-menus-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label-menus-default);"></td><td><code>--w-color-text-label-menus-default</code></td></tr><tr><td style="background-color: var(--w-color-text-label-menus-active);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label-menus-active);"></td><td><code>--w-color-text-label-menus-active</code></td></tr><tr><td style="background-color: var(--w-color-text-label);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label);"></td><td><code>--w-color-text-label</code></td></tr><tr><td style="background-color: var(--w-color-text-context);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-context);"></td><td><code>--w-color-text-context</code></td></tr><tr><td style="background-color: var(--w-color-text-meta);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-meta);"></td><td><code>--w-color-text-meta</code></td></tr><tr><td style="background-color: var(--w-color-text-placeholder);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-placeholder);"></td><td><code>--w-color-text-placeholder</code></td></tr><tr><td style="background-color: var(--w-color-text-link-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-link-default);"></td><td><code>--w-color-text-link-default</code></td></tr><tr><td style="background-color: var(--w-color-text-link-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-link-hover);"></td><td><code>--w-color-text-link-hover</code></td></tr><tr><td style="background-color: var(--w-color-text-button-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button-outline-default);"></td><td><code>--w-color-text-button-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-text-highlight);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-highlight);"></td><td><code>--w-color-text-highlight</code></td></tr><tr><td style="background-color: var(--w-color-text-error);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-error);"></td><td><code>--w-color-text-error</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Icons</th></tr><tr><td style="background-color: var(--w-color-icon-primary);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-primary);"></td><td><code>--w-color-icon-primary</code></td></tr><tr><td style="background-color: var(--w-color-icon-primary-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-primary-hover);"></td><td><code>--w-color-icon-primary-hover</code></td></tr><tr><td style="background-color: var(--w-color-icon-secondary);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-secondary);"></td><td><code>--w-color-icon-secondary</code></td></tr><tr><td style="background-color: var(--w-color-icon-secondary-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-secondary-hover);"></td><td><code>--w-color-icon-secondary-hover</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Borders</th></tr><tr><td style="background-color: var(--w-color-border-furniture);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-furniture);"></td><td><code>--w-color-border-furniture</code></td></tr><tr><td style="background-color: var(--w-color-border-button-small-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-small-outline-default);"></td><td><code>--w-color-border-button-small-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-border-field-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-default);"></td><td><code>--w-color-border-field-default</code></td></tr><tr><td style="background-color: var(--w-color-border-field-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-inactive);"></td><td><code>--w-color-border-field-inactive</code></td></tr><tr><td style="background-color: var(--w-color-border-field-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-hover);"></td><td><code>--w-color-border-field-hover</code></td></tr><tr><td style="background-color: var(--w-color-border-button-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-outline-default);"></td><td><code>--w-color-border-button-outline-default</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Misc</th></tr><tr><td style="background-color: var(--w-color-focus);"></td><td class="w-theme-dark" style="background-color: var(--w-color-focus);"></td><td><code>--w-color-focus</code></td></tr></tbody></table></section>
+}</style></pre><h3>Static colours</h3><table class="wagtail-color-swatch"><thead><tr><th aria-label="Swatch"></th><th>Variable</th><th>Usage</th></tr></thead><tbody><tr><td style="background-color: var(--w-color-black);"></td><td><code>--w-color-black</code></td><td>Shadows only</td></tr><tr><td style="background-color: var(--w-color-grey-600);"></td><td><code>--w-color-grey-600</code></td><td>Body copy, user content</td></tr><tr><td style="background-color: var(--w-color-grey-500);"></td><td><code>--w-color-grey-500</code></td><td>Panels, dividers in dark mode</td></tr><tr><td style="background-color: var(--w-color-grey-400);"></td><td><code>--w-color-grey-400</code></td><td>Help text, placeholders, meta text, neutral state indicators</td></tr><tr><td style="background-color: var(--w-color-grey-200);"></td><td><code>--w-color-grey-200</code></td><td>Dividers, button borders</td></tr><tr><td style="background-color: var(--w-color-grey-150);"></td><td><code>--w-color-grey-150</code></td><td>Field borders</td></tr><tr><td style="background-color: var(--w-color-grey-100);"></td><td><code>--w-color-grey-100</code></td><td>Dividers, panel borders</td></tr><tr><td style="background-color: var(--w-color-grey-50);"></td><td><code>--w-color-grey-50</code></td><td>Background for panels, row highlights</td></tr><tr><td style="background-color: var(--w-color-white);"></td><td><code>--w-color-white</code></td><td>Page backgrounds, Panels, Button text</td></tr><tr><td style="background-color: var(--w-color-primary);"></td><td><code>--w-color-primary</code></td><td>Wagtail branding, Panels, Headings, Buttons, Labels</td></tr><tr><td style="background-color: var(--w-color-primary-200);"></td><td><code>--w-color-primary-200</code></td><td>Accent for elements used in conjunction with primary colour in sidebar</td></tr><tr><td style="background-color: var(--w-color-secondary);"></td><td><code>--w-color-secondary</code></td><td>Primary buttons, action links</td></tr><tr><td style="background-color: var(--w-color-secondary-600);"></td><td><code>--w-color-secondary-600</code></td><td>Hover states for two-tone buttons</td></tr><tr><td style="background-color: var(--w-color-secondary-400);"></td><td><code>--w-color-secondary-400</code></td><td>Two-tone buttons, hover states</td></tr><tr><td style="background-color: var(--w-color-secondary-100);"></td><td><code>--w-color-secondary-100</code></td><td>UI element highlights over dark backgrounds</td></tr><tr><td style="background-color: var(--w-color-secondary-75);"></td><td><code>--w-color-secondary-75</code></td><td>UI element highlights over dark text</td></tr><tr><td style="background-color: var(--w-color-secondary-50);"></td><td><code>--w-color-secondary-50</code></td><td>Button backgrounds, highlighted fields background</td></tr><tr><td style="background-color: var(--w-color-info-100);"></td><td><code>--w-color-info-100</code></td><td>Background and icons for information messages</td></tr><tr><td style="background-color: var(--w-color-info-50);"></td><td><code>--w-color-info-50</code></td><td>Background only, for information messages</td></tr><tr><td style="background-color: var(--w-color-positive-100);"></td><td><code>--w-color-positive-100</code></td><td>Positive states</td></tr><tr><td style="background-color: var(--w-color-positive-50);"></td><td><code>--w-color-positive-50</code></td><td>Background only, for positive states</td></tr><tr><td style="background-color: var(--w-color-warning-100);"></td><td><code>--w-color-warning-100</code></td><td>Background and icons for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-warning-50);"></td><td><code>--w-color-warning-50</code></td><td>Background only, for potentially dangerous states</td></tr><tr><td style="background-color: var(--w-color-critical-200);"></td><td><code>--w-color-critical-200</code></td><td>Dangerous actions or states (over light background), errors</td></tr><tr><td style="background-color: var(--w-color-critical-100);"></td><td><code>--w-color-critical-100</code></td><td>Dangerous actions or states (over dark background)</td></tr><tr><td style="background-color: var(--w-color-critical-50);"></td><td><code>--w-color-critical-50</code></td><td>Background only, for dangerous states</td></tr></tbody></table><h3>Light & dark theme colours</h3><table class="wagtail-color-swatch"><thead><tr><th>Light</th><th>Dark</th><th>Variable</th></tr></thead><tbody><tr><th scope="rowgroup" colspan="3">Surfaces - General</th></tr><tr><td style="background-color: var(--w-color-surface-page);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-page);"></td><td><code>--w-color-surface-page</code></td></tr><tr><td style="background-color: var(--w-color-surface-field);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-field);"></td><td><code>--w-color-surface-field</code></td></tr><tr><td style="background-color: var(--w-color-surface-field-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-field-inactive);"></td><td><code>--w-color-surface-field-inactive</code></td></tr><tr><td style="background-color: var(--w-color-surface-header);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-header);"></td><td><code>--w-color-surface-header</code></td></tr><tr><td style="background-color: var(--w-color-surface-menus);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-menus);"></td><td><code>--w-color-surface-menus</code></td></tr><tr><td style="background-color: var(--w-color-surface-menu-item-active);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-menu-item-active);"></td><td><code>--w-color-surface-menu-item-active</code></td></tr><tr><td style="background-color: var(--w-color-surface-tooltip);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-tooltip);"></td><td><code>--w-color-surface-tooltip</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-default);"></td><td><code>--w-color-surface-button-default</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-hover);"></td><td><code>--w-color-surface-button-hover</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-inactive);"></td><td><code>--w-color-surface-button-inactive</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-outline-hover);"></td><td><code>--w-color-surface-button-outline-hover</code></td></tr><tr><td style="background-color: var(--w-color-surface-button-critical-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-surface-button-critical-hover);"></td><td><code>--w-color-surface-button-critical-hover</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Text</th></tr><tr><td style="background-color: var(--w-color-text-button);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button);"></td><td><code>--w-color-text-button</code></td></tr><tr><td style="background-color: var(--w-color-text-label-menus-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label-menus-default);"></td><td><code>--w-color-text-label-menus-default</code></td></tr><tr><td style="background-color: var(--w-color-text-label-menus-active);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label-menus-active);"></td><td><code>--w-color-text-label-menus-active</code></td></tr><tr><td style="background-color: var(--w-color-text-label);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-label);"></td><td><code>--w-color-text-label</code></td></tr><tr><td style="background-color: var(--w-color-text-context);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-context);"></td><td><code>--w-color-text-context</code></td></tr><tr><td style="background-color: var(--w-color-text-meta);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-meta);"></td><td><code>--w-color-text-meta</code></td></tr><tr><td style="background-color: var(--w-color-text-placeholder);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-placeholder);"></td><td><code>--w-color-text-placeholder</code></td></tr><tr><td style="background-color: var(--w-color-text-link-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-link-default);"></td><td><code>--w-color-text-link-default</code></td></tr><tr><td style="background-color: var(--w-color-text-link-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-link-hover);"></td><td><code>--w-color-text-link-hover</code></td></tr><tr><td style="background-color: var(--w-color-text-button-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button-outline-default);"></td><td><code>--w-color-text-button-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-text-highlight);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-highlight);"></td><td><code>--w-color-text-highlight</code></td></tr><tr><td style="background-color: var(--w-color-text-error);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-error);"></td><td><code>--w-color-text-error</code></td></tr><tr><td style="background-color: var(--w-color-text-button-critical-outline-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-text-button-critical-outline-hover);"></td><td><code>--w-color-text-button-critical-outline-hover</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Icons</th></tr><tr><td style="background-color: var(--w-color-icon-primary);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-primary);"></td><td><code>--w-color-icon-primary</code></td></tr><tr><td style="background-color: var(--w-color-icon-primary-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-primary-hover);"></td><td><code>--w-color-icon-primary-hover</code></td></tr><tr><td style="background-color: var(--w-color-icon-secondary);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-secondary);"></td><td><code>--w-color-icon-secondary</code></td></tr><tr><td style="background-color: var(--w-color-icon-secondary-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-icon-secondary-hover);"></td><td><code>--w-color-icon-secondary-hover</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Borders</th></tr><tr><td style="background-color: var(--w-color-border-furniture);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-furniture);"></td><td><code>--w-color-border-furniture</code></td></tr><tr><td style="background-color: var(--w-color-border-button-small-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-small-outline-default);"></td><td><code>--w-color-border-button-small-outline-default</code></td></tr><tr><td style="background-color: var(--w-color-border-field-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-default);"></td><td><code>--w-color-border-field-default</code></td></tr><tr><td style="background-color: var(--w-color-border-field-inactive);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-inactive);"></td><td><code>--w-color-border-field-inactive</code></td></tr><tr><td style="background-color: var(--w-color-border-field-hover);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-field-hover);"></td><td><code>--w-color-border-field-hover</code></td></tr><tr><td style="background-color: var(--w-color-border-button-outline-default);"></td><td class="w-theme-dark" style="background-color: var(--w-color-border-button-outline-default);"></td><td><code>--w-color-border-button-outline-default</code></td></tr></tbody><tbody><tr><th scope="rowgroup" colspan="3">Misc</th></tr><tr><td style="background-color: var(--w-color-focus);"></td><td class="w-theme-dark" style="background-color: var(--w-color-focus);"></td><td><code>--w-color-focus</code></td></tr></tbody></table></section>
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