[wp-trac] [WordPress Trac] #49930: Replace wp-admin color schemes with CSS custom properties

[WordPress Trac]

#49930: Replace wp-admin color schemes with CSS custom properties
----------------------------+-------------------------------------
 Reporter:  kburgoine       |       Owner:  (none)
     Type:  enhancement     |      Status:  new
 Priority:  normal          |   Milestone:  Future Release
Component:  Administration  |     Version:
 Severity:  normal          |  Resolution:
 Keywords:                  |     Focuses:  ui, accessibility, css
----------------------------+-------------------------------------

Comment (by youknowriad):

 I just want to mention that some packages already use CSS custom
 properties based on the active color scheme. (All pages that load wp-
 components or other similar stylesheets).

 These are the variables that are currently output (this is the SASS mixing
 used to print these variables based on the current admin scheme).

 {{{
 @mixin admin-scheme($color-primary) {
         // Define RGB equivalents for use in rgba function.
         // Hexadecimal css vars do not work in the rgba function.
         --wp-admin-theme-color: #{$color-primary};
         --wp-admin-theme-color--rgb: #{hex-to-rgb($color-primary)};
         // Darker shades.
         --wp-admin-theme-color-darker-10: #{darken($color-primary, 5%)};
         --wp-admin-theme-color-darker-10--rgb: #{hex-to-rgb(darken($color-
 primary, 5%))};
         --wp-admin-theme-color-darker-20: #{darken($color-primary, 10%)};
         --wp-admin-theme-color-darker-20--rgb: #{hex-to-rgb(darken($color-
 primary, 10%))};

         // Focus style width.
         // Avoid rounding issues by showing a whole 2px for 1x screens,
 and 1.5px on high resolution screens.
         --wp-admin-border-width-focus: 2px;
         @media ( -webkit-min-device-pixel-ratio: 2), (min-resolution:
 192dpi) {
                 --wp-admin-border-width-focus: 1.5px;
         }
 }
 }}}

 The purpose of the ticket I think shouldn't be about inventing a new
 system, the system already exists, the tool to generate these variables
 exist, what is missing is to include this CSS in all WP-Admin pages and
 not just the ones using these specific stylesheets.

 I want to mention that there were also several other efforts in the
 Gutenberg repository to expand on this and introduce theming/branding for
 the components package, which IMO is just the same thing as the admin
 color schemes.

 So the ideal here would be to start small and just output these already
 existing CSS variables everywhere in the admin.

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