search

pressbooks / ideas

Ideas for Pressbooks.
GNU General Public License v3.0
12 stars 4 forks source link

Replace hex codes in Malala theme with variables #209

Open likethebourbon opened 5 years ago

likethebourbon commented 5 years ago

Feature Description

Currently, the new Malala theme has an immense number of hex codes for colors hard-coded into the CSS. For example, there are 35 instances of #003180. Users who wish to customize their color palette to remove that hex code have to write the same thing, then, for over 35 separate selectors (since each instance of the hex code may refer to multiple selectors).

Other themes have better CSS because they use var(--primary), var(--accent), etc. variables to set the color scheme for the theme.

Malala's CSS should be edited to replace #003180 with var(--primary), #373d3f with var(--body), #b01109 with var(--accent), etc.

Feature Use Case

With variables implemented, all users can easily customize their color palette by using custom CSS to change the variables, rather than finding all instances of a specific hex code and changing each one.

Other Notes

This would be a very fast change to make and should not affect any current installations of Malala.

SteelWagstaff commented 5 years ago

Thanks for reporting -- we will look into this for next deploy.

SteelWagstaff commented 5 years ago

Hi, @likethebourbon I think there's been a misunderstanding here. We're actually defining Malala's default colors with SCSS variables (see https://github.com/pressbooks/pressbooks-book/blob/dev/assets/styles/components/_colors.scss). What you're seeing (35 instances of the hex code) is the post-processing CSS output.

Right now we're only using CSS variables in our aetna pattern library, which is only used at present by Aldine, our root network theme. McLuhan (i.e. Pressbook-book) and our book themes don't use CSS variables, they use SCSS. CSS variables are interesting to us in that using them would eliminating compiling (big performance improvements) but CSS variables are less feature complete than SCSS.

Right now, the only way a user can control SCSS variables is through theme options. We'll be investigating ways to give users more tools to customize variables in the future (perhaps through additional theme options -- like one which lets users set color values or by allowing the custom syles editor to prepend things to the top of our compiled CSS in addition to appending the bottom).

SteelWagstaff commented 4 years ago

Related to https://github.com/pressbooks/pressbooks-book/issues/624