#62872 closed enhancement (duplicate)
Update all admin CSS files to use Sass and variables for color
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | |
Component: | General | Keywords: | |
Focuses: | css | Cc: |
Description
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.
Change History (5)
#2
@
3 weeks ago
Thank you @sabernhardt, I left a note on that trac ticket to see what the current state is. I don't want to duplicate work if it's just about shepherding another effort to the finish line. Which would be amazing. It feels like that does a little more than I was even going to, which might not be bad. It would be good to get things in though either way and not sit around too long, either merging the tickets into one or closing this one or that one to focus. I don't mind if it's this one.
This ticket was mentioned in Slack in #core by joemcgill. View the logs.
3 weeks ago
#4
@
3 weeks ago
- Milestone Awaiting Review deleted
- Resolution set to invalid
- Status changed from new to closed
This was discussed in today's core chat and the preference is to go with CSS variables. I absolutely agree with this if we can and now the next step is to close this ticket, focus on the approach based on the other one.
Related: #49930