This PR supersedes #22551 with a slightly different approach to enabling more color usage while continuing to support the theme approach that the $brand-
variables enable.
New colors
I've updated all the color variables, though I'm still not 100% happy with them. I'm struggling to find the right way to create a legit palette here. However, it's getting closer thanks to Material, Open Color, and more. My intent here is that you can swap all the variables easily with other common color palettes from major systems (iOS, Android, etc). As such it's important to have the right number of colors in place to build on.
Dual Sass color maps
In #22551 I was pushing heavily towards a single Sass map, but not everyone builds on Bootstrap with Sass, so that limits options for those adding vanilla CSS on top of our code. As such, it's entirely possible .btn-blue
could become a purple button.
Now, we have two Sass maps, $colors
and $theme-colors
, though they're not entirely implemented right now. $colors
is for every color. $theme-colors
is for a subset of those that you'd want to loop over to generate a customized color scheme. The intent is to use this theme Sass map to generate our alerts, buttons, backgrounds, etc.
Grayscale
In addition to the two color maps, I've added a $grays
Sass map and new variables. Instead of a few $gray-light
, $gray-dark
, etc variables, we have $gray-100
through $gray-900
. This provides greater flexibility, a consistent set of grays throughout, and the basis for future color updates. (Eventually every color should have all these shades.)
Additional improvements
I'm after a number of things with a color update like this. First, I want more colors available to folks to pull from and more options to customize via CSS or Sass (our preferred method). Second, I want the tooling to be helpful, so color contrast functions and proper map values is important. Third, I want to provide more utilities for folks based on these colors (e.g., border color classes) while reducing component-based modifiers where appropriate (e.g., badge backgrounds can be .bg-
classes).
Todo
-
Finalize color palette. Please, any and all suggestions on how to build one well is welcome! -
Determine what needs to be in the $theme-colors
map. I've added foreground/background, but are there more? Should it be fewer? -
Ensure we can easily add additional Sass maps for color shades in a future release. -
Ensure map-get
functions are in place for each Sass map (think I'm missing grays right now) -
Improve customization docs.
- Fixes #18119 (closed) and fixes #22062 (closed) by adding badge color contrast function
- Fixes #22175 (closed) by removing alert, state, and table variables
- Fixes #19004 (closed) by improving color contrast
- Closes #19792 (closed) by moving away from component-specific variables