First draft for bi colors

Orange-OpenSource · Nov 17, 2023 · d9bfbfb · d9bfbfb
1 parent 8ae3f37
commit d9bfbfb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -443,11 +443,19 @@
 }
 
 .color-copy:hover {
-  transform: scale(1.1);
+  transform: scale(1.07);
 }
 
 .color-copy {
   // stylelint-disable-next-line property-disallowed-list
   transition: transform .15s ease-in-out;
 }
+
+.double-figure {
+  background: linear-gradient(to bottom, #fff, #fff calc((100% - 28px) * .5), #141414 calc((100% - 28px) * .5), #141414 calc(100% - 28px), transparent calc(100% - 28px)); // stylelint-disable-line function-disallowed-list
+
+  .color-copy {
+    margin: calc(var(--bs-gutter-x) * .5) 0; // stylelint-disable-line function-disallowed-list
+  }
+}
 // End mod
diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
@@ -86,6 +86,29 @@ 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>