@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);
+}
$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"),
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; }
### 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 -}}
{{< 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`.
projects / thirdparty / bootstrap.git / commitdiff
