dennisreimann
commented
3 years ago Hey @dstrukt, this is ready to talk about 🥳
I think we should have a jam session where we go through the general idea of how the diffrent levels of color variables are supposed to work. I've build it according to what we've discussed and I think it works nicely.
The next steps would be …
- [x] define the actual base colors (
$category-XXX, likeprimary-100ordanger-500) - [x] map the base colors to the individual use cases (text colors, backgrounds, borders, etc.)
- [x] see what we really need (there's some potential to strip the set of base variables down I think)
Looking forward to this – once we have this nailed down we can migrate the apps to use the new Bootstrap and variables.
dstrukt
Automating the process of adapting Bootstrap v5 to our needs. As we make heavy use of CSS custom properties and Bootstrap only offers partial support, there are some tweaks we have to do …
Also redefines and extends the color variables, so that we can be more flexible than with our current set of variables, which is rather limited.
Details
AS Bootystrap 5 won't change the way they create and use color values we have to work around all those cases where they use SASS functions to modify colors. We cannot feed our variables directly into those functions, because they expect actual color values. There are many cases where they e.g. shade a color to make it work on a background …
That's why we have a two step process of looking up that color result and then replacing it with our variable equivalent throughout the file … it's not perfect, but this will get us what we need in an automated fashion: Out Bootstrap 5 is not a fork anymore in the way we used to fork it.
WIth the migration above I'm using the regular Bootstrap 5 and apply our customizations. There are two parts to these customizations: 1) The regular way, where we adjust the SASS variables that aren't used for color calculations (src/bootstrap/_variables.scss) 2) The hacky additions, where we replace those values that are used in the color calculations (tasks/generate-bootstrap.js)