New colors and scss file for full palette

Orange-OpenSource · Nov 20, 2023 · 8233367 · 8233367
1 parent d9bfbfb
commit 8233367
Show file tree

Hide file tree

Showing 3 changed files with 217 additions and 84 deletions.
diff --git a/site/assets/scss/_palette.scss b/site/assets/scss/_palette.scss
@@ -67,7 +67,7 @@ $ods-purple-400: #9373bd !default;
 $ods-purple-500: #6e4aa7 !default;
 $ods-purple-600: #492191 !default;
 
-// Yallow
+// Yellow
 $ods-yellow-100: #fff6b6 !default;
 $ods-yellow-200: #ffe45b !default;
 $ods-yellow-300: #ffd200 !default;

diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
@@ -23,51 +23,29 @@ toc: true
 Color palette is used throughout Boosted in multiple ways, either in components or as utilities such as [`background-color`]({{< docsref "/utilities/background" >}}), [`color`]({{< docsref "/utilities/colors" >}}) or [`border`]({{< docsref "/utilities/borders" >}}).
 
 {{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "ODS oranges" }}
-<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 gy-3">
-  {{- 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">
-          <rect fill="{{ $color.hex }}" width="100" height="100"/>
-        </svg>
-        <span class="visually-hidden">Copy variable name {{ $color.variable }}</span>
-      </button>
-      <figcaption class="py-1">
-        <code>{{ $color.hex }}</code>
-        <hr class="my-1 bg-transparent border-top" style="border-color:{{ $color.hex }} !important">
-        <var>{{- $color.variable -}}</var>
-      </figcaption>
-    </figure>
-  {{ end -}}
-</div>
-{{ end -}}
-{{< /palette.inline >}}
-
-
-{{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "ODS grays" }}
-<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 gy-3">
-  {{- 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 }}>
-          <rect fill="{{ $color.hex }}" width="100" height="100"/>
-        </svg>
-        <span class="visually-hidden">Copy variable name {{ $color.variable }}</span>
-      </button>
-      <figcaption class="py-1">
-        <code>{{ $color.hex }}</code>
-        <hr class="my-1 bg-transparent border-top {{ if eq $color.class "secondary" "primary" }}border-{{ $color.class }}"{{ else }}" style="border-color:{{ $color.hex }} !important"{{ end }}>
-        <var>{{- $color.variable -}}</var>
-      </figcaption>
-    </figure>
+{{- range where $.Site.Data.palette "category" "ODS colors" }}
+  {{- range $subcategory := .subcategories }}
+  <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 gy-3 pb-3">
+    {{- 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 }}>
+            <rect fill="{{ $color.hex }}" width="100" height="100"/>
+          </svg>
+          <span class="visually-hidden">Copy variable name {{ $color.variable }}</span>
+        </button>
+        <figcaption class="py-1">
+          <code>{{ $color.hex }}</code>
+          <hr class="my-1 bg-transparent border-top {{ if eq $color.class "secondary" "primary" }}border-{{ $color.class }}"{{ else }}" style="border-color:{{ $color.hex }} !important"{{ end }}>
+          <var>{{- $color.variable -}}</var>
+        </figcaption>
+      </figure>
+    {{ end -}}
+  </div>
   {{ end -}}
-</div>
 {{ 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.

diff --git a/site/data/palette.yml b/site/data/palette.yml
@@ -105,45 +105,200 @@
       class: 950
       hex: "#141414"
       variable: $gray-950
-- category: ODS oranges
-  name: "ODS oranges"
-  colors:
-    - name: Orange 100
-      variable: $ods-orange-100
-      hex: "#ff7900"
-    - name: Orange 200
-      variable: $ods-orange-200
-      hex: "#f16e00"
-- category: ODS grays
-  name: "ODS grays"
-  colors:
-    - name: White 100
-      variable: $ods-white-100
-      hex: "#fff"
-    - name: Gray 200
-      variable: $ods-gray-200
-      hex: "#eee"
-    - name: Gray 300
-      variable: $ods-gray-300
-      hex: "#ddd"
-    - name: Gray 400
-      variable: $ods-gray-400
-      hex: "#ccc"
-    - name: Gray 500
-      variable: $ods-gray-500
-      hex: "#999"
-    - name: Gray 600
-      variable: $ods-gray-600
-      hex: "#666"
-    - name: Gray 700
-      variable: $ods-gray-700
-      hex: "#595959"
-    - name: Gray 800
-      variable: $ods-gray-800
-      hex: "#333"
-    - name: Gray 900
-      variable: $ods-gray-900
-      hex: "#141414"
-    - name: Black 900
-      variable: $ods-black-900
-      hex: "#000"
+
+
+
+
+
+- category: ODS colors
+  name: "ODS colors"
+  subcategories:
+  - subcategory: Orange
+    name: "orange"
+    colors:
+      - name: Orange 100
+        variable: $ods-orange-100
+        hex: "#ff7900"
+      - name: Orange 200
+        variable: $ods-orange-200
+        hex: "#f16e00"
+  - subcategory: White
+    name: "white"
+    colors:
+      - name: White 100
+        variable: $ods-white-100
+        hex: "#fff"
+  - subcategory: Gray
+    name: "gray"
+    colors:
+      - name: Gray 200
+        variable: $ods-gray-200
+        hex: "#eee"
+      - name: Gray 300
+        variable: $ods-gray-300
+        hex: "#ddd"
+      - name: Gray 400
+        variable: $ods-gray-400
+        hex: "#ccc"
+      - name: Gray 500
+        variable: $ods-gray-500
+        hex: "#999"
+      - name: Gray 600
+        variable: $ods-gray-600
+        hex: "#666"
+      - name: Gray 700
+        variable: $ods-gray-700
+        hex: "#595959"
+      - name: Gray 800
+        variable: $ods-gray-800
+        hex: "#333"
+      - name: Gray 900
+        variable: $ods-gray-900
+        hex: "#141414"
+  - subcategory: Black
+    name: "black"
+    colors:
+      - name: Black 900
+        variable: $ods-black-900
+        hex: "#000"
+  - subcategory: Forest
+    name: "forest"
+    colors:
+      - name: Forest 100
+        variable: $ods-forest-100
+        hex: "#6c6"
+      - name: Forest 200
+        variable: $ods-forest-200
+        hex: "#228722"
+  - subcategory: Fire
+    name: "fire"
+    colors:
+      - name: Fire 100
+        variable: $ods-fire-100
+        hex: "#f66"
+      - name: Fire 200
+        variable: $ods-fire-200
+        hex: "#cd3c14"
+  - subcategory: Water
+    name: "water"
+    colors:
+      - name: Water 100
+        variable: $ods-water-100
+        hex: "#69f"
+      - name: Water 200
+        variable: $ods-water-200
+        hex: "#4170d8"
+  - subcategory: Sun
+    name: "sun"
+    colors:
+      - name: Sun 100
+        variable: $ods-sun-100
+        hex: "#fc0"
+      - name: Sun 200
+        variable: $ods-sun-200
+        hex: "#8f7200"
+  - subcategory: Blue
+    name: "blue"
+    colors:
+      - name: Blue 100
+        variable: $ods-blue-100
+        hex: "#b5e8f7"
+      - name: Blue 200
+        variable: $ods-blue-200
+        hex: "#80ceef"
+      - name: Blue 300
+        variable: $ods-blue-300
+        hex: "#4bb4e6"
+      - name: Blue 400
+        variable: $ods-blue-400
+        hex: "#3e9dd6"
+      - name: Blue 500
+        variable: $ods-blue-500
+        hex: "#237eca"
+      - name: Blue 600
+        variable: $ods-blue-600
+        hex: "#085ebd"
+  - category: Green
+    name: "green"
+    colors:
+      - name: Green 100
+        variable: $ods-green-100
+        hex: "#b8ebd6"
+      - name: Green 200
+        variable: $ods-green-200
+        hex: "#84d5af"
+      - name: Green 300
+        variable: $ods-green-300
+        hex: "#50be87"
+      - name: Green 400
+        variable: $ods-green-400
+        hex: "#27a971"
+      - name: Green 500
+        variable: $ods-green-500
+        hex: "#198c51"
+      - name: Green 600
+        variable: $ods-green-600
+        hex: "#0a6e31"
+  - subcategory: Pink
+    name: "pink"
+    colors:
+      - name: Pink 100
+        variable: $ods-pink-100
+        hex: "#ffe8f7"
+      - name: Pink 200
+        variable: $ods-pink-200
+        hex: "#ffceef"
+      - name: Pink 300
+        variable: $ods-pink-300
+        hex: "#ffb4e6"
+      - name: Pink 400
+        variable: $ods-pink-400
+        hex: "#ff8ad4"
+      - name: Pink 500
+        variable: $ods-pink-500
+        hex: "#d573bb"
+      - name: Pink 600
+        variable: $ods-pink-600
+        hex: "#bc4d9a"
+  - category: Purple
+    name: "purple"
+    colors:
+      - name: Purple 100
+        variable: $ods-purple-100
+        hex: "#d9c2f0"
+      - name: Purple 200
+        variable: $ods-purple-200
+        hex: "#c1a4e4"
+      - name: Purple 300
+        variable: $ods-purple-300
+        hex: "#a885d8"
+      - name: Purple 400
+        variable: $ods-purple-400
+        hex: "#9373bd"
+      - name: Purple 500
+        variable: $ods-purple-500
+        hex: "#6e4aa7"
+      - name: Purple 600
+        variable: $ods-purple-600
+        hex: "#492191"
+  - category: Yellow
+    name: "yellow"
+    colors:
+      - name: Yellow 100
+        variable: $ods-yellow-100
+        hex: "#fff6b6"
+      - name: Yellow 200
+        variable: $ods-yellow-200
+        hex: "#ffe45b"
+      - name: Yellow 300
+        variable: $ods-yellow-300
+        hex: "#ffd200"
+      - name: Yellow 400
+        variable: $ods-yellow-400
+        hex: "#ffd400"
+      - name: Yellow 500
+        variable: $ods-yellow-500
+        hex: "#b98f11"
+      - name: Yellow 600
+        variable: $ods-yellow-600
+        hex: "#9d6e06"