v5: Update colors to add shades and tints

[mdo]

Fresh pass at this to replace #28268. This PR is entirely aimed at providing additional variables, and not any more classes (save for perhaps light background-colors and colors in another PR). I truly wish we could generate the variables another way, but for now, this is a huge boost to customizability purely by color.

• Dynamic variables aren't possible in Sass, so this manually adds nine variations of each color.
• Adds two new functions to shade (lighten) and tint (darken) each color.
• From there, this documents the changes with docs specific classes to help communicate that these classes aren't part of Bootstrap proper.

/cc @twbs/css-review

Preview: https://deploy-preview-29348--twbs-bootstrap.netlify.com/docs/4.3/getting-started/theming/#all-colors

[joneff]

Depending on how complicated you want it to be, you could go for material's palette and theming approach:

• there is a _palette.scss file that contains both predefined colors and color maps with contrasting colors
• in addition, there is _themeing.scss file that deals with the mundane tasks, like color matching, retrieving colors etc.

Trough some heavy lifting, at the end, there is a "theme" palette that consists of primary, secondary sub palettes (containing base, darker, lighter and contrast colors), complimentary sub palette (colors for text, body / application background etc) and a warn color.

White the approach is definitely not for everyone, it actually makes sense to have a "source of truth" palette which you query, when you need a theme color. Of course, should one want to deviate, the rest of the colors are there.

Or to put in some sort of code:

// Not exactcly code
@function make-palette($base, $darker: null, $ligther: null, $contrast-values: () ) {
    // if darker is not provided use shade($base) --> less way shade
    // if ligther is not provided use tint($base) --> less way tint
    // if contrast-values are not provided use contrast function
    // some code
    @return ( $default, $darker, $lighter, $default-contrast, $darker-contrast, $lighter-contrast);
}

// some transformations ...

$theme: (
    "primary": (
        default: ... , // use for, say link text color or button background color
        darker: ... , // use for, say link hover text color or button hover background color
        lighter: ... ,
        default-contrast: ... , // use for, say button text color
        darker-contrast: ... , // use for, say button hover text color
        lighter-contrast: ...
    ),
    "secondary": (
        default: ... , // use for, say secondary button background color
        darker: ... , // use for, say secondary button hover background color
        lighter: ... ,
        default-contrast: ... , // use for, say secondary button text color
        darker-contrast: ... , // use for, say secondary button hover text color
        lighter-contrast: ...
    ),
    "complimentary": (
        body-bg: ... ,
        body-text: ... ,
        component-bg: ... ,
        component-text: ... 
        // more variables probably 
    )
);

If you are trying to create a theme style guide, using the palette would be quite efficient. In addition, having the ability to manually specify colors for the theme palette makes it possible to fulfill designers request, because some times plain white and plain black are not what they want for contrasting color.

[joneff]

@mdo, how are you going to address projects that already have tint and shade defined and use it in the less way? Per se, we already have them defined and we use the less way. Many of our customers use our product in conjuction with bootstrap. So what would happen should they include both ours and bootstrap's functions?

[MartijnCuppens]

I could see why we could add this, however I think a lot of developers will use Sass' built-in darken() or lighten() functions to get a tinted color. There will also be cases where for example $blue is changed to a darker blue and the darkened colors will be a little redundant.

I'm not 100% against this, but I wanna make sure we don't add too much we don't use ourselves.

[mdo]

Just pushed a few updates—sorry for the confusion, folks.

I've fixed the language used for all the tints and shades: tint() is now for lighter colors and shade() is now for darker colors. We're not using the lighten() and darken() functions because those do not accomplish what we want here—those functions only adjust the color's lightness level. What we really want is a blend of our specified color with white or black, which can be done with mix().

See this CodePen example for how each function generates different outputs.

I've added details around this to the documentation so that folks understand the reasons for our custom functions. Can probably make some more improvements here, but this should definitely help explain some key details around our color system.

Some additional reading and resources I found:

• http://scg.ar-ch.org
• https://thoughtbot.com/blog/controlling-color-with-sass-color-functions

[MartijnCuppens]

LGTM now, the only thing left to tackle is finding a way to bypass fusv. Probably we'll need to implement something like // fusv-enable and // fusv-disable comments upstream?

[XhmikosR]

BTW this needs a rebase and cleanup of the patches.

As for fusv, PRs welcome as usual :)

[XhmikosR]

I cleaned up the branch, fixed tests and used a range.

I still feel this has a lot of duplication. Can't we use loops in Sass?

EDIT: nvm this doesn't work.