[wp-trac] [WordPress Trac] #62872: Update all admin CSS files to use Sass and variables for color

[WordPress Trac]

#62872: Update all admin CSS files to use Sass and variables for color
-------------------------+--------------------------------------
 Reporter:  karmatosed   |      Owner:  (none)
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  General      |    Version:
 Severity:  normal       |   Keywords:  needs-patch dev-feedback
  Focuses:  css          |
-------------------------+--------------------------------------
 ''Note: I do not expect this to be a commit directly and I do expect it to
 happen iteratively and work on a PR to one side.''

 The work to bring in components and anything within the Storybook new
 admin design work will be far easier if we look at what we have and build
 on from the admin color schemes into fuller embracing Sass.

 Please correct me if I'm missing context on decisions and this needs
 closing because of that. However, in searching I couldn't find a ticket
 that would start this process recently and was open. This might be
 something I am missing.

 What I propose is we start simply, with colors and compiling. What would
 happen:

 - Bring in Sass files to any files that has a color value today in wp-
 admin/css.
 - Most likely use the same format that color schemes already do. Have a
 sass file of same name so for example about.css / about.scss.
 - Compile into about.css then into the min version (like today).
 - Start with colors to focus and ship this release.

 **Why should we do this?**

 Examples include:
 - about.css and other files already implement file specific variables and
 this could help by taking a wider approach.
 - Most files have repeat values over twice. Some older files even have
 them over 30 times, for example customize-controls and the color
 '#dcdcde', theme.css has same value 17 times.
 - Explorations are hard to catch everything with our CSS in current state
 and it means we can't move faster implementing things.
 - The site editor work uses variables so will sit easier with this
 approach. Whilst a minor reason it is a valid one.
 - People are more used to some variable approach than searching across all
 files and being able to do that will hopefully help contributions.

 **Future work**
 This work should be considered a starting point, recommendations for
 future tickets after this include:

 - Revisiting the admin color schemes and seeing what needs to be refined
 there.
 - Bringing variables in for typography, other foundations.

 We don't want to jump in all at once and get caught up. Colors are the
 easier win here most likely but we could start even smaller if appetite is
 preferred.

 **How do we start?**
 I am going to start on a patch for this myself and welcome others to join
 in the adventure. This doesn't of course presume it will get committed or
 is the right approach, it starts the conversation.

 I would like to get insights into feedback on approaches and also into
 gotchas and warnings for anything around this. Personally, I think we
 could get this in for 6.8 but that is a bold deadline although it isn't a
 radical change when it's just focusing on colors. I am open to opinion
 there. The point is to start doing it.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62872>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform