[wp-trac] [WordPress Trac] #49999: Iterating on Admin Color Schemes

[WordPress Trac]

#49999: Iterating on Admin Color Schemes
----------------------------+-------------------------------------
 Reporter:  ryelle          |       Owner:  (none)
     Type:  enhancement     |      Status:  new
 Priority:  normal          |   Milestone:  Awaiting Review
Component:  Administration  |     Version:
 Severity:  normal          |  Resolution:
 Keywords:                  |     Focuses:  ui, accessibility, css
----------------------------+-------------------------------------

Comment (by ryelle):

 I tried an [https://github.com/WordPress/gutenberg/pull/21999 approach
 with color schemes in Gutenberg] that could be worth exploring, it uses
 postcss to generate a list of colors & shades. This basically just swaps
 out the sass magic for a custom `theme` function, it wouldn’t solve most
 of the issues above, but does modernize things a bit. It could get us out
 of the specificity hole, at least.

 Here’s an example of how the prototype works.

 Options passed into postcss:
 {{{
 {
     defaults: { primary: '#00f' },
     themes: { red: { primary: '#f00' } },
 }
 }}}

 CSS file
 {{{
 button {
     color: theme(primary);
     background: theme(primary, shade-20);
 }
 }}}

 The postcss plugin runs and generates the tints & shades by adjusting the
 lightness of the value as `hsl` & converting back to hex (prototype,
 doesn’t support opacity, would love for this to be smarter). The CSS it
 outputs looks something like this:

 {{{
 :root {
     --color-primary: #00f;
     --color-primary--shade-10: #00c;
     --color-primary--shade-20: #009;
     ...
     --color-primary--tint-10: #33f;
     --color-primary--tint-20: #66f;
     ...
 }
 body.admin-scheme-red {
     --color-primary: #f00;
     --color-primary--shade-10: #c00;
     --color-primary--shade-20: #900;
     ...
     --color-primary--tint-10: #f33;
     --color-primary--tint-20: #f66;
     ...
 }
 button {
     color: var(--color-primary);
     background: var(--color-primary--shade-20);
 }
 }}}

 IE support is still an issue, depending on how much support we need there
 could be different solutions:
 - just the default fallback, no color schemes for IE
 - creating a separate CSS file with just the color values for each color
 scheme that's only loaded on clients that don't support custom properties
 (a postcss plugin could do this)

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/49999#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform