diff --git a/site/content/docs/5.2/customize/color.md b/site/content/docs/5.2/customize/color.md index 9ea4ada39b..95a6c6f7e4 100644 --- a/site/content/docs/5.2/customize/color.md +++ b/site/content/docs/5.2/customize/color.md @@ -8,79 +8,6 @@ aliases: toc: true --- -## Theme colors - -We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted's `scss/_variables.scss` file. - -
- {{< theme-colors.inline >}} - {{- range (index $.Site.Data "theme-colors") }} -
-
{{ .name | title }}
-
- {{ end -}} - {{< /theme-colors.inline >}} -
- -All these colors are available as a Sass map, `$theme-colors`. - -{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} - -Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors. - -## All colors - -All Boosted 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). Please note that in the Boosted colors, the indigo colors are the same as the purple ones. - -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. - -
- {{< 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"))) }} -
-
- ${{ $color.name }} - {{ $color.hex }} -
- {{ range (seq 100 100 900) }} -
${{ $color.name }}-{{ . }}
- {{ end }} -
- {{ end -}} - {{ end -}} - -
-
- $gray-500 - #ccc -
- {{- range $.Site.Data.grays }} -
$gray-{{ .name }}
- {{ end -}} -
- {{< /theme-colors.inline >}} - -
-
- $accessible-orange - #f16e00 -
-
- $supporting-yellow - #ffd200 -
-
- $black - #000 -
-
- $white - #fff -
-
-
- ## Orange's colors @@ -218,6 +145,83 @@ Boosted core uses Bootstrap's naming for maintenance ease, but **you're encourag +## Theme colors + +We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted's `scss/_variables.scss` file. + +
+ {{< theme-colors.inline >}} + {{- range (index $.Site.Data "theme-colors") }} +
+
{{ .name | title }}
+
+ {{ end -}} + {{< /theme-colors.inline >}} +
+ +All these colors are available as a Sass map, `$theme-colors`. + +{{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}} + +Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors. + +## All colors + +{{< callout warning >}} +All Boosted 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). + +Please note that in the Boosted colors, the indigo colors are the same as the purple ones. +{{< /callout >}} + +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. + +
+ {{< 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"))) }} +
+
+ ${{ $color.name }} + {{ $color.hex }} +
+ {{ range (seq 100 100 900) }} +
${{ $color.name }}-{{ . }}
+ {{ end }} +
+ {{ end -}} + {{ end -}} + +
+
+ $gray-500 + #ccc +
+ {{- range $.Site.Data.grays }} +
$gray-{{ .name }}
+ {{ end -}} +
+ {{< /theme-colors.inline >}} + +
+
+ $accessible-orange + #f16e00 +
+
+ $supporting-yellow + #ffd200 +
+
+ $black + #000 +
+
+ $white + #fff +
+
+
+ ### Notes on Sass Sass cannot programmatically generate variables, so we manually created variables for every tint and shade ourselves. We specify the midpoint value (e.g., `$blue-500`) and use custom color functions to tint (lighten) or shade (darken) our colors via Sass's `mix()` color function.