Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main-lmp-colors-handling-dark' i…
Browse files Browse the repository at this point in the history 
…nto main-lmp-colors-handling-dark

# Conflicts:
#	site/content/docs/5.3/customize/color.md
  • Loading branch information
@hannahiss
hannahiss committed Nov 20, 2023
2 parents 8233367 + 5321f92 commit 7d3556f
Showing 1 changed file with 62 additions and 25 deletions.
87 changes: 62 additions & 25 deletions site/content/docs/5.3/customize/color.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,67 @@ toc: true

### Theme colors

<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 gy-3">
<figure class="double-figure mb-0" aria-label="Primary color">
<button class="btn border-0 p-0 color-copy ratio ratio-1x1" data-clipboard-text="--bs-primary" data-bs-toggle="tooltip" data-bs-title="Copy <code>--bs-primary</code>" data-bs-html="true">
<svg viewBox="0 0 100 100" role="img" aria-label="Primary color" preserveAspectRatio="xMidYMid meet">
<rect fill="#f16e00" x="0" y="0" width="100" height="51"/>
<rect fill="#ff7900" x="0" y="50" width="100" height="50"/>
</svg>
<span class="visually-hidden">Copy variable name --bs-primary</span>
</button>
<figcaption class="py-1">
<var class="text-nowrap">--bs-primary</var>
</figcaption>
</figure>
<figure class="double-figure mb-0" aria-label="Secondary color">
<button class="btn border-0 p-0 color-copy ratio ratio-1x1" data-clipboard-text="--bs-secondary" data-bs-toggle="tooltip" data-bs-title="Copy <code>--bs-secondary</code>" data-bs-html="true">
<svg viewBox="0 0 100 100" role="img" aria-label="Secondary color" preserveAspectRatio="xMidYMid meet">
<rect fill="#000000" x="0" y="0" width="100" height="51"/>
<rect fill="#ffffff" x="0" y="50" width="100" height="50"/>
</svg>
<span class="visually-hidden">Copy variable name --bs-secondary</span>
</button>
<figcaption class="py-1">
<var class="text-nowrap">--bs-secondary</var>
</figcaption>
</figure>
<!-- <figure class="double-figure mb-0" aria-label="Tertiary color">
<button class="btn border-0 p-0 color-copy ratio ratio-1x1" data-clipboard-text="--bs-tertiary" data-bs-toggle="tooltip" data-bs-title="Copy <code>--bs-tertiary</code>" data-bs-html="true">
<svg viewBox="0 0 100 100" role="img" aria-label="Tertiary color" preserveAspectRatio="xMidYMid meet">
<rect fill="#cccccc" x="0" y="0" width="100" height="51"/>
<rect fill="#666666" x="0" y="50" width="100" height="50"/>
</svg>
<span class="visually-hidden">Copy variable name --bs-tertiary</span>
</button>
<figcaption class="py-1">
<var class="text-nowrap">--bs-tertiary</var>
</figcaption>
</figure> -->
</div>

### Functional colors

{{< palette.inline >}}
{{- range where $.Site.Data.palette "category" "Functional colors" }}
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 gy-3">
{{- range $color := .colors }}
<figure class="double-figure mb-0" aria-label="{{ $color.name }}">
<button class="btn border-0 p-0 color-copy ratio ratio-1x1" data-clipboard-text="--bs-{{ $color.level }}" data-bs-toggle="tooltip" data-bs-title="Copy <code>--bs-{{ $color.level }}</code>" data-bs-html="true">
<svg viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
<rect fill="{{ $color.hex }}" x="0" y="0" width="100" height="51"/>
<rect fill="{{ $color.darkHex }}" x="0" y="50" width="100" height="50"/>
</svg>
<span class="visually-hidden">Copy variable name --bs-{{ $color.level }}</span>
</button>
<figcaption class="py-1">
<var class="text-nowrap">--bs-{{- $color.level -}}</var>
</figcaption>
</figure>
{{ end -}}
</div>
{{ end -}}
{{< /palette.inline >}}

### Full palette

Expand All @@ -29,7 +89,7 @@ Color palette is used throughout Boosted in multiple ways, either in components
{{- range $color := .colors }}
<figure class="mb-0" aria-label="{{ $color.name }}">
<button class="btn border-0 p-0 color-copy ratio ratio-1x1" data-clipboard-text="{{ $color.variable }}" data-bs-toggle="tooltip" data-bs-title="Copy <code>{{ $color.variable }}</code>" data-bs-html="true">
<svg viewBox="0 0 100 100" role="img" aria-hidden="true" preserveAspectRatio="xMidYMid meet" {{ if or (eq $color.name "White 100") (eq $color.name "Black 900") }} style="border: 1px solid var(--bs-border-color-translucent)" {{ end }}>
<svg viewBox="0 0 100 100" role="img" aria-hidden="true" preserveAspectRatio="xMidYMid meet" {{ if or (eq $color.name "White 100") (eq $color.name "Black 900") (eq $color.name "Gray 900") }} style="border: 1px solid var(--bs-border-color-translucent)" {{ end }}>
<rect fill="{{ $color.hex }}" width="100" height="100"/>
</svg>
<span class="visually-hidden">Copy variable name {{ $color.variable }}</span>
Expand All @@ -46,6 +106,7 @@ Color palette is used throughout Boosted in multiple ways, either in components
{{ end -}}
{{< /palette.inline >}}


### Usage

Boosted sets an additional layer to use Orange Brand's color tokens names—defined first and mapped to Bootstrap core variables.
Expand All @@ -64,30 +125,6 @@ Boosted core uses Bootstrap's naming for maintenance ease, but **you're encourag
</div>
<!-- End mod -->

### Functional colors

{{< palette.inline >}}
{{- range where $.Site.Data.palette "category" "Functional colors" }}
<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 gy-3">
{{- range $color := .colors }}
<figure class="double-figure mb-0" aria-label="{{ $color.name }}">
<button class="btn border-0 p-0 color-copy ratio ratio-1x1" data-clipboard-text="--bs-{{ $color.level }}" data-bs-toggle="tooltip" data-bs-title="Copy <code>--bs-{{ $color.level }}</code>" data-bs-html="true">
<svg viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
<rect fill="{{ $color.hex }}" x="0" y="0" width="100" height="50"/>
<rect fill="{{ $color.darkHex }}" x="0" y="50" width="100" height="50"/>
</svg>
<span class="visually-hidden">Copy variable name --bs-{{ $color.level }}</span>
</button>
<figcaption class="py-1">
<var class="text-nowrap">--bs-{{- $color.level -}}</var>
</figcaption>
</figure>
{{ end -}}
</div>
{{ end -}}
{{< /palette.inline >}}


<details>
<summary>TODO</summary>

Expand Down

0 comments on commit 7d3556f

Please sign in to comment.