mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-21 18:09:02 +01:00
Code Issues Releases Wiki Activity

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

Browse Source 
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
This commit is contained in:
Albina 2023-07-14 11:35:43 +03:00 committed by GitHub
parent 3a10f925a3
commit a84fdd4919
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.txt
View File

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

10
client/scss/components/_button.scss
View File

@ -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');
}
}

24
client/src/tokens/colorThemes.js
View File

@ -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',
},
},
},
{

4
client/src/tokens/colorVariables.test.js
View File

@ -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)",

4
docs/_static/wagtail_colors_tables.txt vendored
View File

File diff suppressed because one or more lines are too long

1
docs/releases/5.1.md
View File

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