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 --- 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 @@ -

Make sure to test any customisations against our Contrast Grid. Try out your own customisations with this interactive style editor:

Static colours
VariableUsage
--w-color-blackShadows only
--w-color-grey-600Body copy, user content
--w-color-grey-500Panels, dividers in dark mode
--w-color-grey-400Help text, placeholders, meta text, neutral state indicators
--w-color-grey-200Dividers, button borders
--w-color-grey-150Field borders
--w-color-grey-100Dividers, panel borders
--w-color-grey-50Background for panels, row highlights
--w-color-whitePage backgrounds, Panels, Button text
--w-color-primaryWagtail branding, Panels, Headings, Buttons, Labels
--w-color-primary-200Accent for elements used in conjunction with primary colour in sidebar
--w-color-secondaryPrimary buttons, action links
--w-color-secondary-600Hover states for two-tone buttons
--w-color-secondary-400Two-tone buttons, hover states
--w-color-secondary-100UI element highlights over dark backgrounds
--w-color-secondary-75UI element highlights over dark text
--w-color-secondary-50Button backgrounds, highlighted fields background
--w-color-info-100Background and icons for information messages
--w-color-info-50Background only, for information messages
--w-color-positive-100Positive states
--w-color-positive-50Background only, for positive states
--w-color-warning-100Background and icons for potentially dangerous states
--w-color-warning-50Background only, for potentially dangerous states
--w-color-critical-200Dangerous actions or states (over light background), errors
--w-color-critical-100Dangerous actions or states (over dark background)
--w-color-critical-50Background only, for dangerous states
Light & dark theme colours
LightDarkVariable
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

VariableUsage
--w-color-blackShadows only
--w-color-grey-600Body copy, user content
--w-color-grey-500Panels, dividers in dark mode
--w-color-grey-400Help text, placeholders, meta text, neutral state indicators
--w-color-grey-200Dividers, button borders
--w-color-grey-150Field borders
--w-color-grey-100Dividers, panel borders
--w-color-grey-50Background for panels, row highlights
--w-color-whitePage backgrounds, Panels, Button text
--w-color-primaryWagtail branding, Panels, Headings, Buttons, Labels
--w-color-primary-200Accent for elements used in conjunction with primary colour in sidebar
--w-color-secondaryPrimary buttons, action links
--w-color-secondary-600Hover states for two-tone buttons
--w-color-secondary-400Two-tone buttons, hover states
--w-color-secondary-100UI element highlights over dark backgrounds
--w-color-secondary-75UI element highlights over dark text
--w-color-secondary-50Button backgrounds, highlighted fields background
--w-color-info-100Background and icons for information messages
--w-color-info-50Background only, for information messages
--w-color-positive-100Positive states
--w-color-positive-50Background only, for positive states
--w-color-warning-100Background and icons for potentially dangerous states
--w-color-warning-50Background only, for potentially dangerous states
--w-color-critical-200Dangerous actions or states (over light background), errors
--w-color-critical-100Dangerous actions or states (over dark background)
--w-color-critical-50Background only, for dangerous states

Light & dark theme colours

LightDarkVariable
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