At the moment all our CSS has mountains of extreme levels of repetition when it comes to picking colors.
When we need a color that is not in our “base” palate, we reach out to one of these 2 functions:
This function allows us to choose 1 color for the dark theme and one for the light theme.
This function allows you to apply different levels of “brightness” to a color depending on weather you are in dark or light themes.
This is very very messy now cause we have enormous amounts of repetition.
dark-light-choose(scale-color($highlight, $lightness: -50%), scale-color($highlight, $lightness: 50%));
Is repeated 30 or so times in our scss files, and that is only for the 50% color.
dark-light-diff($primary, $secondary, 90%, -60%);
Is similarly duplicated in tons of spots.
This mess leads to a few problems:
- Did I just pick the right line to cut and paste ?
Should I pick
dark-light-diff($primary, $secondary, 90%, -60%); or
dark-light-diff($primary, $secondary, 90%, -65%); like the polls plugin picked?
Why have all this repeated text everywhere?
Do we really need these many colors?
How do we make some progress here?
I feel there are a few different options we have here which require some careful thought.
Option 1: move to CSS class based coloring, and define colors for each class. Then we could use
.dim-textfor when we want dim text and so on.
Option 2: shorten the functions… eg: have …
dark-light(90%)automatically expand to
dark-light-diff($primary, $secondary, 90%, -75%)or something along those lines, come up with sane defaults
Option 3: define a proper color palate in foundation scss that includes vars for EVERY color we ever are allowed to use and only draw from those vars.
Which of these options sound the most appealing to you? Am I missing anything?