Define all colors as variables in CSS
Bug #2023449 reported by
Stephanie Leary
This bug affects 3 people
Affects | Status | Importance | Assigned to | Milestone | |
---|---|---|---|---|---|
Evergreen |
Confirmed
|
Wishlist
|
Steven Mayo |
Bug Description
In order to support dark mode or other color scheme user preferences (bug 1740529), we need to move all our CSS color, background-color, border-color, outline-color, text-decoration
In the Angular staff client, you can see examples of this at the top of the main styles.css file, where we have redefined several Bootstrap color keywords in a :root style declaration.
Changed in evergreen: | |
importance: | Undecided → Wishlist |
status: | New → Confirmed |
tags: | added: ux-color |
tags: |
added: ux-colors removed: ux-color |
Changed in evergreen: | |
assignee: | nobody → Stephanie Leary (stephanieleary) |
Changed in evergreen: | |
assignee: | Stephanie Leary (stephanieleary) → Steven Mayo (stmayo) |
To post a comment you must log in.
I have some progress on this! I've gotten what should be all of the Angular colors changed. (Thanks Stephanie for the starting point and naming schemes to copy!)
That's closer to being fully done than it sounds, since the AngularJS css is almost an identical copy sometimes, and the OPAC css had some work done at some point putting all the colors into one file already.
The variables are in two groups in styles.css: first a set of numbered definitions, grouped by hue. (e.g. 'eg-blue-5')
These variables are not used anywhere except by the second group, which is a set of semantic definitions in alphabetical order, named for where the color is used. (e.g. 'nav-dropdown-bg') These variables are what the css styles are actually set to. With this, changing a color scheme should be as simple as redefining the semantic variables with a different variable from our palette.
Branch here: https:/ /git.evergreen- ils.org/ ?p=working/ Evergreen. git;a=shortlog; h=refs/ heads/collab/ sleary/ lp2023449- color-variables -main.