Skip to content

Commit

Permalink
Merge branch 'main' into main-jd-fix-switch-on-ios
Browse files Browse the repository at this point in the history
  • Loading branch information
@julien-deramond
julien-deramond authored Nov 14, 2022
2 parents 2b97c27 + 1b40104 commit 6b74d0e
Showing 1 changed file with 77 additions and 73 deletions.
150 changes: 77 additions & 73 deletions site/content/docs/5.2/customize/color.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<div class="row">
{{< theme-colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="col-md-4">
<div class="p-3 mb-3 fw-bold bg-{{ .name }}">{{ .name | title }}</div>
</div>
{{ end -}}
{{< /theme-colors.inline >}}
</div>

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.

<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 position-relative 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 -}}

<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-gray-500">
<strong class="d-block">$gray-500</strong>
#ccc
</div>
{{- range $.Site.Data.grays }}
<div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
{{ end -}}
</div>
{{< /theme-colors.inline >}}

<div class="col-md-4 mb-3">
<div class="p-3 mb-2 bd-accessible-orange">
<strong class="d-block">$accessible-orange</strong>
#f16e00
</div>
<div class="p-3 mb-2 bd-supporting-yellow">
<strong class="d-block">$supporting-yellow</strong>
#ffd200
</div>
<div class="p-3 mb-2 bd-black text-white">
<strong class="d-block">$black</strong>
#000
</div>
<div class="p-3 mb-2 bd-white border">
<strong class="d-block">$white</strong>
#fff
</div>
</div>
</div>

<!-- Boosted mod -->
## Orange's colors

Expand Down Expand Up @@ -218,6 +145,83 @@ Boosted core uses Bootstrap's naming for maintenance ease, but **you're encourag
</div>
<!-- End mod -->

## 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.

<div class="row">
{{< theme-colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="col-md-4">
<div class="p-3 mb-3 fw-bold bg-{{ .name }}">{{ .name | title }}</div>
</div>
{{ end -}}
{{< /theme-colors.inline >}}
</div>

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.

<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 position-relative 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 -}}

<div class="col-md-4 mb-3">
<div class="p-3 mb-2 position-relative swatch-gray-500">
<strong class="d-block">$gray-500</strong>
#ccc
</div>
{{- range $.Site.Data.grays }}
<div class="p-3 bd-gray-{{ .name }}">$gray-{{ .name }}</div>
{{ end -}}
</div>
{{< /theme-colors.inline >}}

<div class="col-md-4 mb-3">
<div class="p-3 mb-2 bd-accessible-orange">
<strong class="d-block">$accessible-orange</strong>
#f16e00
</div>
<div class="p-3 mb-2 bd-supporting-yellow">
<strong class="d-block">$supporting-yellow</strong>
#ffd200
</div>
<div class="p-3 mb-2 bd-black text-white">
<strong class="d-block">$black</strong>
#000
</div>
<div class="p-3 mb-2 bd-white border">
<strong class="d-block">$white</strong>
#fff
</div>
</div>
</div>

### 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.
Expand Down

0 comments on commit 6b74d0e

Please sign in to comment.