[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 notlaura):

 A practice in design systems that use themes/color schemes is to have an
 additional layer of abstraction, like the current Sass variables. To
 expand on @ryelle's example, it would be something like this:


 {{{

 :root {
     --color-primary: #00f;
     --color-primary--shade-10: #00c;
     --color-primary--shade-20: #009;
 }


 body.default {
     --sidebar-color: var( --color-primary--shade-20 );
 }


 body.dark {
     --sidebar-color: var( --color-primary );
 }

 .sidebar {
     color: #00f; // See note below
     color: var( --sidebar-color );
 }

 }}}


 The fallback can come from an additional PostCSS step (not sure of the
 specific package, but this definitely exists). For color schemes that
 require IE11 support (e.g. a default and those related to accessibility),
 PostCSS could output a different stylesheet per color scheme that contains
 the appropriate fallback.

 We may want to think of this as an exploration of design tokens. To
 support themes, the design tokens can be abstract names for the colors, so
 in this the color `primary`. The token `primary` is assigned a color value
 and then applied to specific contexts, like `sidebar-color`. There would
 need to be guidelines as to how the color tokens relate to one another to
 ensure appropriate color contrast e.g. `primary` must always have a
 certain contrast ratio with `secondary`.

 Here are a couple examples of this "abstract design tokens" from design
 systems:
 - Salesforce Lightning design tokens:
 https://www.lightningdesignsystem.com/design-tokens/
 - Skyscanner Backpack design tokens:
 https://backpack.github.io/guidelines/colors#section_dynamic-palette

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