diff --git a/scss/_functions.scss b/scss/_functions.scss index 0e77bf4b3f..79f988feb5 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -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); +} diff --git a/scss/_variables.scss b/scss/_variables.scss index a6dc69aa83..6f902f1420 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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"), diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss index 10ad8efdb7..b698b807b5 100644 --- a/site/assets/scss/_colors.scss +++ b/site/assets/scss/_colors.scss @@ -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; } diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md index 1703770e70..46475f2bb4 100644 --- a/site/content/docs/4.3/getting-started/theming.md +++ b/site/content/docs/4.3/getting-started/theming.md @@ -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.
{{< theme-colors.inline >}} - {{- range $.Site.Data.colors }} - {{- if (and (not (eq .name "white")) (not (eq .name "gray")) (not (eq .name "gray-dark"))) }} -
-
{{ .name | title }}
+ {{- range $color := $.Site.Data.colors }} + {{- if (and (not (eq $color.name "white")) (not (eq $color.name "gray")) (not (eq $color.name "gray-dark"))) }} +
+
+ ${{ $color.name }} + {{ $color.hex }} +
+ {{ range (seq 100 100 900) }} +
${{ $color.name }}-{{ . }}
+ {{ end }}
{{ 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`.