Opened 18 months ago
Last modified 11 days ago
#49930 new enhancement
Replace wp-admin color schemes with CSS custom properties
Reported by: | kburgoine | Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | |
Component: | Administration | Keywords: | |
Focuses: | ui, accessibility, css | Cc: |
Description
There has been some discussion in the #core-css channel on Slack around changing the colours used for the colour schemes to use CSS Custom Properties. There are a number of complexities and issues that need to be considered before this could happen. This ticket is to capture those conversations here.
CSS custom properties have a lot of benefits including future-proofing for when media queries focussing on accessibility features are more heavily used. For example: @media (prefers-color-scheme: dark) {}
However, the biggest drawback with using CSS Custom Properties is the lack of support in older browsers: https://caniuse.com/#feat=css-variables shows no support for IE 6 - 11 and therefore a strategy for this would also have to be considered.
Some tickets/resources that already exist that could affect this discussion are:
- https://core.trac.wordpress.org/ticket/26691 Admin Color Schemes: generic classes for colors
- https://github.com/ryelle/admin-color-schemes / https://wordpress.org/plugins/admin-color-schemes/ Admin colour schemes plugin
- https://wordpress.org/plugins/dark-mode/ Dark mode feature plugin
(This is not an exhaustive list, only what has been mentioned in Slack already)
Also see this discussion in Slack: https://wordpress.slack.com/archives/CQ7V4966Q/p1586792806203800
and https://wordpress.slack.com/archives/CQ7V4966Q/p1586793176207300
Change History (30)
This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.
18 months ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
18 months ago
#4
in reply to:
↑ 2
@
18 months ago
Replying to afercia:
I'd like to remind there are plugins (and maybe themes) that use or extend the existing scss variables. I'm not sure the existing scss-based color schemes can be "replaced" as that would likely break any third-party code that is using them.
Admittedly, using 'replace' in the ticket title might be a bit misleading here. In order to support IE11 there would need to be fallback colours for browsers that don't read the CSS Custom Properties. Depending on the strategy decided, I would imagine that existing scss variables would still be used for that purpose and would then provide the compatibility needed for existing themes and plugins.
However, that could raise the potential problem of the Custom Property overwriting an existing scss variable if, how it has been scoped means that it is actually a different colour to the value stored in the scss variable. The dynamic nature of custom properties makes it so that it's not as easy as having a direct replacement.
This ticket was mentioned in Slack in #core-css by notlaura. View the logs.
17 months ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
17 months ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
17 months ago
This ticket was mentioned in Slack in #core-css by notlaura. View the logs.
15 months ago
This ticket was mentioned in Slack in #core-css by notlaura. View the logs.
15 months ago
This ticket was mentioned in Slack in #accessibility by alexstine. View the logs.
6 months ago
This ticket was mentioned in Slack in #core-css by notlaura. View the logs.
4 months ago
#12
@
4 months ago
We don't need to support IE11 now! 🥳
Current status of this is to:
- Start writing naming documentation in a Google doc
- Review / experiment / iterate in @ryelle’s PR
- Update doc draft as standards emerge
This ticket was mentioned in Slack in #core-css by notlaura. View the logs.
3 months ago
This ticket was mentioned in Slack in #core-css by danfarrow. View the logs.
3 months ago
This ticket was mentioned in Slack in #core-css by colorful-tones. View the logs.
3 months ago
This ticket was mentioned in Slack in #core-css by colorful-tones. View the logs.
3 months ago
This ticket was mentioned in Slack in #core-css by ryelle. View the logs.
3 months ago
This ticket was mentioned in Slack in #core-css by notlaura. View the logs.
2 months ago
This ticket was mentioned in Slack in #core-css by notlaura. View the logs.
2 months ago
#21
@
2 months ago
Update:
This post provides a good overview of progress so far: https://make.wordpress.org/core/2021/05/10/css-custom-properties-project-update/
We have been working on documentation and information for contributors here: https://docs.google.com/document/d/1Z0Wo1W0ZQwFJYPcJ8GlsubA9uKhcFdT8ifYnso82z9I/edit#
For contributions, each person "claims" a file to work through. That list so far is:
admin-bar.css - @ryelle
admin-menu.css - @ryelle
buttons.css - @ryelle
common.css - @ryelle
forms.css - @danfarrow
dashboard.css - @notlaura
site-health.css - @dryanpress
login.css - @dryanpress
I'd like to remind there are plugins (and maybe themes) that use or extend the existing scss variables. I'm not sure the existing scss-based color schemes can be "replaced" as that would likely break any third-party code that is using them.
I'd tend to think a more viable approach would be:
Adding the
accessibility
focus as the accessibility team is interested in shipping new color schemes for specific accessibility needs, e.g.: low contrast, high contrast, possibly more.