mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 23:04:32 +02:00
Code Issues Releases Wiki Activity

v5: Update colors to add shades and tints (#29348)

Browse Source 
* Add variables for shades and tints of each major color

* getting-started/theming.md: use a `range`.
This commit is contained in:
Mark Otto
2019-10-18 11:04:27 -07:00
committed by GitHub
parent 1fa337cc20
commit 943bef258d
4 changed files with 231 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
site/content/docs/4.3/getting-started/theming.md
View File

@@ -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`.