Skip to content
GitLab

v4: Colors redux

Merged Mark Otto requested to merge colors-redux into v4-dev

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.

screen shot 2017-06-15 at 11 18 54 am

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.

screen shot 2017-06-15 at 11 23 35 am

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.)

screen shot 2017-06-15 at 11 27 19 am

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.