New colors and scss file for full palette

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

Hide file tree

Showing 3 changed files with 128 additions and 91 deletions.
diff --git a/site/assets/scss/_palette.scss b/site/assets/scss/_palette.scss
@@ -0,0 +1,77 @@
+// Palette
+
+// Colors palette
+
+// fusv-disable
+// Orange
+$ods-orange-100: #ff7900 !default;
+$ods-orange-200: #f16e00 !default;
+
+// White, grays and black
+$ods-white-100: #fff !default;
+$ods-gray-200: #eee !default;
+$ods-gray-300: #ddd !default;
+$ods-gray-400: #ccc !default;
+$ods-gray-500: #999 !default;
+$ods-gray-600: #666 !default;
+$ods-gray-700: #595959 !default;
+$ods-gray-800: #333 !default;
+$ods-gray-900: #141414 !default;
+$ods-black-900: #000 !default;
+
+// Forest
+$ods-forest-100: #6c6 !default;
+$ods-forest-200: #228722 !default;
+
+// Fire
+$ods-fire-100: #f66 !default;
+$ods-fire-200: #cd3c14 !default;
+
+// Water
+$ods-water-100: #69f !default;
+$ods-water-200: #4170d8 !default;
+
+// Sun
+$ods-sun-100: #fc0 !default;
+$ods-sun-200: #8f7200 !default;
+
+// Blue
+$ods-blue-100: #b5e8f7 !default;
+$ods-blue-200: #80ceef !default;
+$ods-blue-300: #4bb4e6 !default;
+$ods-blue-400: #3e9dd6 !default;
+$ods-blue-500: #237eca !default;
+$ods-blue-600: #085ebd !default;
+
+// Green
+$ods-green-100: #b8ebd6 !default;
+$ods-green-200: #84d5af !default;
+$ods-green-300: #50be87 !default;
+$ods-green-400: #27a971 !default;
+$ods-green-500: #198c51 !default;
+$ods-green-600: #0a6e31 !default;
+
+// Pink
+$ods-pink-100: #ffe8f7 !default;
+$ods-pink-200: #ffceef !default;
+$ods-pink-300: #ffb4e6 !default;
+$ods-pink-400: #ff8ad4 !default;
+$ods-pink-500: #d573bb !default;
+$ods-pink-600: #bc4d9a !default;
+
+// Purple
+$ods-purple-100: #d9c2f0 !default;
+$ods-purple-200: #c1a4e4 !default;
+$ods-purple-300: #a885d8 !default;
+$ods-purple-400: #9373bd !default;
+$ods-purple-500: #6e4aa7 !default;
+$ods-purple-600: #492191 !default;
+
+// Yallow
+$ods-yellow-100: #fff6b6 !default;
+$ods-yellow-200: #ffe45b !default;
+$ods-yellow-300: #ffd200 !default;
+$ods-yellow-400: #ffd400 !default;
+$ods-yellow-500: #b98f11 !default;
+$ods-yellow-600: #9d6e06 !default;
+// fusv-enable
diff --git a/site/content/docs/5.3/customize/color.md b/site/content/docs/5.3/customize/color.md
@@ -11,68 +11,24 @@ toc: true
 ---
 
 <!-- Boosted mod -->
-## Orange's palette
+## Orange's colors
 
-<!-- TODO expliquer que 'est la totalité de la palette, avec var sass et couleurs qui ne changent pas selon contexte -->
-Color palette is used throughout Boosted in multiple ways, either in components or as utilities for both [`background-color`]({{< docsref "/utilities/background" >}}) and [`color`]({{< docsref "/utilities/colors" >}}).
 
-### Core colors
+### Theme colors
 
-{{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "Core colors" }}
-<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") (eq $color.name "Black") }} 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 -}}
-{{< /palette.inline >}}
 
-### Supporting colors
 
-{{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "Supporting colors" }}
-<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 >}}
+### Full palette
 
-### Functional colors
+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" "Functional colors" }}
+{{- 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-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
+        <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>
@@ -83,41 +39,26 @@ Color palette is used throughout Boosted in multiple ways, either in components
         <var>{{- $color.variable -}}</var>
       </figcaption>
     </figure>
-
-    <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 }}-dark" data-bs-toggle="tooltip" data-bs-title="Copy <code>{{ $color.variable }}-dark</code>" data-bs-html="true">
-        <svg viewBox="0 0 100 100" role="img" aria-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
-          <rect fill="{{ $color.darkHex }}" width="100" height="100"/>
-        </svg>
-        <span class="visually-hidden">Copy variable name {{ $color.variable }}-dark</span>
-      </button>
-      <figcaption class="py-1">
-        <code>{{ $color.darkHex }}</code>
-        <hr class="my-1 bg-transparent border-top" style="border-color:{{ $color.darkHex }} !important">
-        <var>{{- $color.variable -}}-dark</var>
-      </figcaption>
-    </figure>
   {{ end -}}
 </div>
 {{ end -}}
 {{< /palette.inline >}}
 
-### Grays
 
 {{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "Grays" }}
+{{- 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-label="{{ $color.name }}" preserveAspectRatio="xMidYMid meet">
+        <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" style="border-color:{{ $color.hex }} !important">
+        <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>
@@ -126,29 +67,6 @@ Color palette is used throughout Boosted in multiple ways, either in components
 {{ end -}}
 {{< /palette.inline >}}
 
-### OBS Gray
-
-{{< palette.inline >}}
-{{- range where $.Site.Data.palette "category" "OBS Gray" }}
-<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-label="{{ $color.name }}" 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 >}}
 
 ### Usage
 

diff --git a/site/data/palette.yml b/site/data/palette.yml
@@ -105,3 +105,45 @@
       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"