v5: Update colors to add shades and tints (#29348)
* Add variables for shades and tints of each major color * getting-started/theming.md: use a `range`.
This commit is contained in:
Mark Otto
GitHub
parent
1fa337cc20
commit
943bef258d
|
|
@ -100,3 +100,11 @@
|
|||
|
||||
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||
}
|
||||
|
||||
@function tint-color($color, $level) {
|
||||
@return mix(white, $color, $level * $theme-color-interval);
|
||||
}
|
||||
|
||||
@function shade-color($color, $level) {
|
||||
@return mix(black, $color, $level * $theme-color-interval);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,6 +101,108 @@ $yiq-contrasted-threshold: 150 !default;
|
|||
$yiq-text-dark: $gray-900 !default;
|
||||
$yiq-text-light: $white !default;
|
||||
|
||||
// fusv-disable
|
||||
$blue-100: tint-color($blue, 8) !default;
|
||||
$blue-200: tint-color($blue, 6) !default;
|
||||
$blue-300: tint-color($blue, 4) !default;
|
||||
$blue-400: tint-color($blue, 2) !default;
|
||||
$blue-500: $blue !default;
|
||||
$blue-600: shade-color($blue, 2) !default;
|
||||
$blue-700: shade-color($blue, 4) !default;
|
||||
$blue-800: shade-color($blue, 6) !default;
|
||||
$blue-900: shade-color($blue, 8) !default;
|
||||
|
||||
$indigo-100: tint-color($indigo, 8) !default;
|
||||
$indigo-200: tint-color($indigo, 6) !default;
|
||||
$indigo-300: tint-color($indigo, 4) !default;
|
||||
$indigo-400: tint-color($indigo, 2) !default;
|
||||
$indigo-500: $indigo !default;
|
||||
$indigo-600: shade-color($indigo, 2) !default;
|
||||
$indigo-700: shade-color($indigo, 4) !default;
|
||||
$indigo-800: shade-color($indigo, 6) !default;
|
||||
$indigo-900: shade-color($indigo, 8) !default;
|
||||
|
||||
$purple-100: tint-color($purple, 8) !default;
|
||||
$purple-200: tint-color($purple, 6) !default;
|
||||
$purple-300: tint-color($purple, 4) !default;
|
||||
$purple-400: tint-color($purple, 2) !default;
|
||||
$purple-500: $purple !default;
|
||||
$purple-600: shade-color($purple, 2) !default;
|
||||
$purple-700: shade-color($purple, 4) !default;
|
||||
$purple-800: shade-color($purple, 6) !default;
|
||||
$purple-900: shade-color($purple, 8) !default;
|
||||
|
||||
$pink-100: tint-color($pink, 8) !default;
|
||||
$pink-200: tint-color($pink, 6) !default;
|
||||
$pink-300: tint-color($pink, 4) !default;
|
||||
$pink-400: tint-color($pink, 2) !default;
|
||||
$pink-500: $pink !default;
|
||||
$pink-600: shade-color($pink, 2) !default;
|
||||
$pink-700: shade-color($pink, 4) !default;
|
||||
$pink-800: shade-color($pink, 6) !default;
|
||||
$pink-900: shade-color($pink, 8) !default;
|
||||
|
||||
$red-100: tint-color($red, 8) !default;
|
||||
$red-200: tint-color($red, 6) !default;
|
||||
$red-300: tint-color($red, 4) !default;
|
||||
$red-400: tint-color($red, 2) !default;
|
||||
$red-500: $red !default;
|
||||
$red-600: shade-color($red, 2) !default;
|
||||
$red-700: shade-color($red, 4) !default;
|
||||
$red-800: shade-color($red, 6) !default;
|
||||
$red-900: shade-color($red, 8) !default;
|
||||
|
||||
$orange-100: tint-color($orange, 8) !default;
|
||||
$orange-200: tint-color($orange, 6) !default;
|
||||
$orange-300: tint-color($orange, 4) !default;
|
||||
$orange-400: tint-color($orange, 2) !default;
|
||||
$orange-500: $orange !default;
|
||||
$orange-600: shade-color($orange, 2) !default;
|
||||
$orange-700: shade-color($orange, 4) !default;
|
||||
$orange-800: shade-color($orange, 6) !default;
|
||||
$orange-900: shade-color($orange, 8) !default;
|
||||
|
||||
$yellow-100: tint-color($yellow, 8) !default;
|
||||
$yellow-200: tint-color($yellow, 6) !default;
|
||||
$yellow-300: tint-color($yellow, 4) !default;
|
||||
$yellow-400: tint-color($yellow, 2) !default;
|
||||
$yellow-500: $yellow !default;
|
||||
$yellow-600: shade-color($yellow, 2) !default;
|
||||
$yellow-700: shade-color($yellow, 4) !default;
|
||||
$yellow-800: shade-color($yellow, 6) !default;
|
||||
$yellow-900: shade-color($yellow, 8) !default;
|
||||
|
||||
$green-100: tint-color($green, 8) !default;
|
||||
$green-200: tint-color($green, 6) !default;
|
||||
$green-300: tint-color($green, 4) !default;
|
||||
$green-400: tint-color($green, 2) !default;
|
||||
$green-500: $green !default;
|
||||
$green-600: shade-color($green, 2) !default;
|
||||
$green-700: shade-color($green, 4) !default;
|
||||
$green-800: shade-color($green, 6) !default;
|
||||
$green-900: shade-color($green, 8) !default;
|
||||
|
||||
$teal-100: tint-color($teal, 8) !default;
|
||||
$teal-200: tint-color($teal, 6) !default;
|
||||
$teal-300: tint-color($teal, 4) !default;
|
||||
$teal-400: tint-color($teal, 2) !default;
|
||||
$teal-500: $teal !default;
|
||||
$teal-600: shade-color($teal, 2) !default;
|
||||
$teal-700: shade-color($teal, 4) !default;
|
||||
$teal-800: shade-color($teal, 6) !default;
|
||||
$teal-900: shade-color($teal, 8) !default;
|
||||
|
||||
$cyan-100: tint-color($cyan, 8) !default;
|
||||
$cyan-200: tint-color($cyan, 6) !default;
|
||||
$cyan-300: tint-color($cyan, 4) !default;
|
||||
$cyan-400: tint-color($cyan, 2) !default;
|
||||
$cyan-500: $cyan !default;
|
||||
$cyan-600: shade-color($cyan, 2) !default;
|
||||
$cyan-700: shade-color($cyan, 4) !default;
|
||||
$cyan-800: shade-color($cyan, 6) !default;
|
||||
$cyan-900: shade-color($cyan, 8) !default;
|
||||
// fusv-enable
|
||||
|
||||
// Characters which are escaped by the escape-svg function
|
||||
$escaped-characters: (
|
||||
("<","%3c"),
|
||||
|
|
|
|||
|
|
@ -15,3 +15,105 @@
|
|||
background-color: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable declaration-block-single-line-max-declarations
|
||||
|
||||
.bd-blue-100 { color: color-yiq($blue-100); background-color: $blue-100; }
|
||||
.bd-blue-200 { color: color-yiq($blue-200); background-color: $blue-200; }
|
||||
.bd-blue-300 { color: color-yiq($blue-300); background-color: $blue-300; }
|
||||
.bd-blue-400 { color: color-yiq($blue-400); background-color: $blue-400; }
|
||||
.bd-blue-500 { color: color-yiq($blue-500); background-color: $blue-500; }
|
||||
.bd-blue-600 { color: color-yiq($blue-600); background-color: $blue-600; }
|
||||
.bd-blue-700 { color: color-yiq($blue-700); background-color: $blue-700; }
|
||||
.bd-blue-800 { color: color-yiq($blue-800); background-color: $blue-800; }
|
||||
.bd-blue-900 { color: color-yiq($blue-900); background-color: $blue-900; }
|
||||
|
||||
.bd-indigo-100 { color: color-yiq($indigo-100); background-color: $indigo-100; }
|
||||
.bd-indigo-200 { color: color-yiq($indigo-200); background-color: $indigo-200; }
|
||||
.bd-indigo-300 { color: color-yiq($indigo-300); background-color: $indigo-300; }
|
||||
.bd-indigo-400 { color: color-yiq($indigo-400); background-color: $indigo-400; }
|
||||
.bd-indigo-500 { color: color-yiq($indigo-500); background-color: $indigo-500; }
|
||||
.bd-indigo-600 { color: color-yiq($indigo-600); background-color: $indigo-600; }
|
||||
.bd-indigo-700 { color: color-yiq($indigo-700); background-color: $indigo-700; }
|
||||
.bd-indigo-800 { color: color-yiq($indigo-800); background-color: $indigo-800; }
|
||||
.bd-indigo-900 { color: color-yiq($indigo-900); background-color: $indigo-900; }
|
||||
|
||||
.bd-purple-100 { color: color-yiq($purple-100); background-color: $purple-100; }
|
||||
.bd-purple-200 { color: color-yiq($purple-200); background-color: $purple-200; }
|
||||
.bd-purple-300 { color: color-yiq($purple-300); background-color: $purple-300; }
|
||||
.bd-purple-400 { color: color-yiq($purple-400); background-color: $purple-400; }
|
||||
.bd-purple-500 { color: color-yiq($purple-500); background-color: $purple-500; }
|
||||
.bd-purple-600 { color: color-yiq($purple-600); background-color: $purple-600; }
|
||||
.bd-purple-700 { color: color-yiq($purple-700); background-color: $purple-700; }
|
||||
.bd-purple-800 { color: color-yiq($purple-800); background-color: $purple-800; }
|
||||
.bd-purple-900 { color: color-yiq($purple-900); background-color: $purple-900; }
|
||||
|
||||
.bd-pink-100 { color: color-yiq($pink-100); background-color: $pink-100; }
|
||||
.bd-pink-200 { color: color-yiq($pink-200); background-color: $pink-200; }
|
||||
.bd-pink-300 { color: color-yiq($pink-300); background-color: $pink-300; }
|
||||
.bd-pink-400 { color: color-yiq($pink-400); background-color: $pink-400; }
|
||||
.bd-pink-500 { color: color-yiq($pink-500); background-color: $pink-500; }
|
||||
.bd-pink-600 { color: color-yiq($pink-600); background-color: $pink-600; }
|
||||
.bd-pink-700 { color: color-yiq($pink-700); background-color: $pink-700; }
|
||||
.bd-pink-800 { color: color-yiq($pink-800); background-color: $pink-800; }
|
||||
.bd-pink-900 { color: color-yiq($pink-900); background-color: $pink-900; }
|
||||
|
||||
.bd-red-100 { color: color-yiq($red-100); background-color: $red-100; }
|
||||
.bd-red-200 { color: color-yiq($red-200); background-color: $red-200; }
|
||||
.bd-red-300 { color: color-yiq($red-300); background-color: $red-300; }
|
||||
.bd-red-400 { color: color-yiq($red-400); background-color: $red-400; }
|
||||
.bd-red-500 { color: color-yiq($red-500); background-color: $red-500; }
|
||||
.bd-red-600 { color: color-yiq($red-600); background-color: $red-600; }
|
||||
.bd-red-700 { color: color-yiq($red-700); background-color: $red-700; }
|
||||
.bd-red-800 { color: color-yiq($red-800); background-color: $red-800; }
|
||||
.bd-red-900 { color: color-yiq($red-900); background-color: $red-900; }
|
||||
|
||||
.bd-orange-100 { color: color-yiq($orange-100); background-color: $orange-100; }
|
||||
.bd-orange-200 { color: color-yiq($orange-200); background-color: $orange-200; }
|
||||
.bd-orange-300 { color: color-yiq($orange-300); background-color: $orange-300; }
|
||||
.bd-orange-400 { color: color-yiq($orange-400); background-color: $orange-400; }
|
||||
.bd-orange-500 { color: color-yiq($orange-500); background-color: $orange-500; }
|
||||
.bd-orange-600 { color: color-yiq($orange-600); background-color: $orange-600; }
|
||||
.bd-orange-700 { color: color-yiq($orange-700); background-color: $orange-700; }
|
||||
.bd-orange-800 { color: color-yiq($orange-800); background-color: $orange-800; }
|
||||
.bd-orange-900 { color: color-yiq($orange-900); background-color: $orange-900; }
|
||||
|
||||
.bd-yellow-100 { color: color-yiq($yellow-100); background-color: $yellow-100; }
|
||||
.bd-yellow-200 { color: color-yiq($yellow-200); background-color: $yellow-200; }
|
||||
.bd-yellow-300 { color: color-yiq($yellow-300); background-color: $yellow-300; }
|
||||
.bd-yellow-400 { color: color-yiq($yellow-400); background-color: $yellow-400; }
|
||||
.bd-yellow-500 { color: color-yiq($yellow-500); background-color: $yellow-500; }
|
||||
.bd-yellow-600 { color: color-yiq($yellow-600); background-color: $yellow-600; }
|
||||
.bd-yellow-700 { color: color-yiq($yellow-700); background-color: $yellow-700; }
|
||||
.bd-yellow-800 { color: color-yiq($yellow-800); background-color: $yellow-800; }
|
||||
.bd-yellow-900 { color: color-yiq($yellow-900); background-color: $yellow-900; }
|
||||
|
||||
.bd-green-100 { color: color-yiq($green-100); background-color: $green-100; }
|
||||
.bd-green-200 { color: color-yiq($green-200); background-color: $green-200; }
|
||||
.bd-green-300 { color: color-yiq($green-300); background-color: $green-300; }
|
||||
.bd-green-400 { color: color-yiq($green-400); background-color: $green-400; }
|
||||
.bd-green-500 { color: color-yiq($green-500); background-color: $green-500; }
|
||||
.bd-green-600 { color: color-yiq($green-600); background-color: $green-600; }
|
||||
.bd-green-700 { color: color-yiq($green-700); background-color: $green-700; }
|
||||
.bd-green-800 { color: color-yiq($green-800); background-color: $green-800; }
|
||||
.bd-green-900 { color: color-yiq($green-900); background-color: $green-900; }
|
||||
|
||||
.bd-teal-100 { color: color-yiq($teal-100); background-color: $teal-100; }
|
||||
.bd-teal-200 { color: color-yiq($teal-200); background-color: $teal-200; }
|
||||
.bd-teal-300 { color: color-yiq($teal-300); background-color: $teal-300; }
|
||||
.bd-teal-400 { color: color-yiq($teal-400); background-color: $teal-400; }
|
||||
.bd-teal-500 { color: color-yiq($teal-500); background-color: $teal-500; }
|
||||
.bd-teal-600 { color: color-yiq($teal-600); background-color: $teal-600; }
|
||||
.bd-teal-700 { color: color-yiq($teal-700); background-color: $teal-700; }
|
||||
.bd-teal-800 { color: color-yiq($teal-800); background-color: $teal-800; }
|
||||
.bd-teal-900 { color: color-yiq($teal-900); background-color: $teal-900; }
|
||||
|
||||
.bd-cyan-100 { color: color-yiq($cyan-100); background-color: $cyan-100; }
|
||||
.bd-cyan-200 { color: color-yiq($cyan-200); background-color: $cyan-200; }
|
||||
.bd-cyan-300 { color: color-yiq($cyan-300); background-color: $cyan-300; }
|
||||
.bd-cyan-400 { color: color-yiq($cyan-400); background-color: $cyan-400; }
|
||||
.bd-cyan-500 { color: color-yiq($cyan-500); background-color: $cyan-500; }
|
||||
.bd-cyan-600 { color: color-yiq($cyan-600); background-color: $cyan-600; }
|
||||
.bd-cyan-700 { color: color-yiq($cyan-700); background-color: $cyan-700; }
|
||||
.bd-cyan-800 { color: color-yiq($cyan-800); background-color: $cyan-800; }
|
||||
.bd-cyan-900 { color: color-yiq($cyan-900); background-color: $cyan-900; }
|
||||
|
|
|
|||
|
|
@ -242,14 +242,24 @@ Many of Bootstrap's various components and utilities are built through a series
|
|||
|
||||
### All colors
|
||||
|
||||
All colors available in Bootstrap 4, are available as Sass variables and a Sass map in `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include.
|
||||
All colors available in Bootstrap 5, are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we do not create classes for each of these variables.
|
||||
|
||||
Sass cannot programmatically generate variables, so we must manually create them ourselves. We specify the midpoint value (`500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function. Using `mix()` is not the same as `lighten()` and `darken()`—the former blends the specified color with white or black, while the latter only adjusts the lightness value of each color. The result is a much more complete suite of colors, as [shown in this CodePen demo](https://codepen.io/emdeoh/pen/zYOQOPB).
|
||||
|
||||
Our `tint-color()` and `shade-color()` functions use `mix()` alongside our `$theme-color-interval` variable, which specifies a stepped percentage value for each mixed color we need. See the `scss/_functions.scss` and `scss/_variables.scss` files for the full source code.
|
||||
|
||||
<div class="row">
|
||||
{{< theme-colors.inline >}}
|
||||
{{- range $.Site.Data.colors }}
|
||||
{{- if (and (not (eq .name "white")) (not (eq .name "gray")) (not (eq .name "gray-dark"))) }}
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 mb-3 swatch-{{ .name }}">{{ .name | title }}</div>
|
||||
{{- range $color := $.Site.Data.colors }}
|
||||
{{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }}
|
||||
<div class="col-md-4 mb-3 font-monospace">
|
||||
<div class="p-3 mb-2 swatch-{{ $color.name }}">
|
||||
<strong class="d-block">${{ $color.name }}</strong>
|
||||
{{ $color.hex }}
|
||||
</div>
|
||||
{{ range (seq 100 100 900) }}
|
||||
<div class="p-3 bd-{{ $color.name }}-{{ . }}">${{ $color.name }}-{{ . }}</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end -}}
|
||||
{{ end -}}
|
||||
|
|
@ -260,6 +270,10 @@ Here's how you can use these in your Sass:
|
|||
|
||||
{{< highlight scss >}}
|
||||
.alpha { color: $purple; }
|
||||
.beta {
|
||||
color: $yellow-300;
|
||||
background-color: $indigo-900;
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
[Color utility classes]({{< docsref "/utilities/colors" >}}) are also available for setting `color` and `background-color`.
|
||||
|
|
|
|||
Loading…
Reference in New Issue