rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +01:00
Code Issues Actions Packages Releases Activity

docs(contrasts): move content after rebasing master

Browse Source
This commit is contained in:
Gaël Poupard 2020-05-07 16:24:20 +02:00 committed by Gaël Poupard
parent e04bbe99ea
commit e03ef123e2
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/content/docs/5.0/customize/color.md
View File

@ -14,7 +14,7 @@ We use a subset of all colors to create a smaller color palette for generating c
{{< theme-colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="col-md-4">
<div class="p-3 mb-3 bg-{{ .name }} {{ if or (eq .name "light") (eq .name "warning") }}text-dark{{ else }}text-white{{ end }}">{{ .name | title }}</div>
<div class="p-3 mb-3 bg-{{ .name }} {{ if or (eq .name "light") (eq .name "warning") }}text-dark{{ else if (eq .name "info")}}text-body{{ else }}text-white{{ end }}">{{ .name | title }}</div>
</div>
{{ end -}}
{{< /theme-colors.inline >}}
@ -30,12 +30,14 @@ Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-l
All Bootstrap colors are available as Sass variables and a Sass map in `scss/_variables.scss` file. To avoid increased file sizes, we don't create text or background color classes for each of these variables. Instead, we choose a subset of these colors for a [theme palette](#theme-colors).
Be sure to monitor contrast ratios as you customize colors. As shown below, we've added three contrast ratios to each of the main colors—one for the swatch's current colors, one for against white, and one for against black.
<div class="row font-monospace">
{{< theme-colors.inline >}}
{{- 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">
<div class="p-3 mb-2 swatch-{{ $color.name }}">
<div class="p-3 mb-2 position-relative swatch-{{ $color.name }}">
<strong class="d-block">${{ $color.name }}</strong>
{{ $color.hex }}
</div>

2
site/content/docs/5.0/customize/sass.md
View File

@ -172,7 +172,7 @@ In practice, you'd call the function and pass in two parameters: the name of the
In order to meet [WCAG 2.0 accessibility standards for color contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html), authors **must** provide [a contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG20/quickref/20160105/Overview.php#visual-audio-contrast-contrast), with very few exceptions.
An additional function we include in Bootstrap is the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in a `sRGB` colorspace to automatically return a light (`#fff`) or dark (`#111`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
An additional function we include in Bootstrap is the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in a `sRGB` colorspace to automatically return a light (`#fff`), dark (`#111`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
For example, to generate color swatches from our `$theme-colors` map: