fix merge issues + enhance color palette

Orange-OpenSource · Dec 6, 2024 · b6b2f0f · b6b2f0f
1 parent a1f18d3
commit b6b2f0f
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 178 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -10,11 +10,11 @@
 $white:    $ouds-color-functional-white !default; // OUDS mod: instead of `#fff`
 $gray-100: $ouds-color-functional-light-gray-80 !default; // OUDS mod: instead of `#f8f9fa`
 $gray-200: $ouds-color-functional-light-gray-160 !default; // OUDS mod: instead of `#e9ecef`
-$gray-300: $ouds-color-functional-light-gray-400 !default; // OUDS mod: instead of `#dee2e6`
+$gray-300: $ouds-color-functional-light-gray-560 !default; // OUDS mod: instead of `#dee2e6`
 $gray-400: $ouds-color-functional-light-gray-560 !default; // OUDS mod: instead of `#ced4da`
-$gray-500: $ouds-color-functional-light-gray-880 !default; // OUDS mod: instead of `#adb5bd`
-$gray-600: $ouds-color-functional-dark-gray-240 !default; // OUDS mod: instead of `#6c757d`
-$gray-700: $ouds-color-functional-dark-gray-640 !default; // OUDS mod: instead of `#495057`
+$gray-500: $ouds-color-functional-dark-gray-400 !default; // OUDS mod: instead of `#adb5bd`
+$gray-600: $ouds-color-functional-dark-gray-640 !default; // OUDS mod: instead of `#6c757d`
+$gray-700: $ouds-color-functional-dark-gray-720 !default; // OUDS mod: instead of `#495057`
 $gray-800: $ouds-color-functional-dark-gray-800 !default; // OUDS mod: instead of `#343a40`
 $gray-900: $ouds-color-functional-dark-gray-880 !default; // OUDS mod: instead of `#212529`
 $black:    $ouds-color-functional-black !default; // OUDS mod: instead of `#000`
@@ -612,7 +612,7 @@ $border-widths: (
   5: $ouds-border-width-thicker * 1.25 // OUDS mod: instead of `$border-width * 2.5`
 ) !default;
 $border-style:                $ouds-border-style-default !default; // OUDS mod: instead of `solid`
-$border-color:                $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-300`
+$border-color:                $ouds-color-border-default-light !default; // OUDS mod: instead of `$gray-300` // TODO LM: Decide whether to use default in here or in translucent
 $border-color-translucent:    rgba($black, .175) !default;
 // scss-docs-end border-variables
 

diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
@@ -1046,12 +1046,12 @@ $utilities: ();
 
         .border-light {
           --bs-border-opacity: 1;
-          border-color: rgba(143, 143, 143, var(--bs-border-opacity)) !important;
+          border-color: rgba(85, 85, 85, var(--bs-border-opacity)) !important;
         }
 
         .border-dark {
           --bs-border-opacity: 1;
-          border-color: rgba(51, 51, 51, var(--bs-border-opacity)) !important;
+          border-color: rgba(39, 39, 39, var(--bs-border-opacity)) !important;
         }
 
         .border-black {
@@ -10835,12 +10835,12 @@ $utilities: ();
 
         .border-light {
           --bs-border-opacity: 1;
-          border-color: rgba(143, 143, 143, var(--bs-border-opacity)) !important;
+          border-color: rgba(85, 85, 85, var(--bs-border-opacity)) !important;
         }
 
         .border-dark {
           --bs-border-opacity: 1;
-          border-color: rgba(51, 51, 51, var(--bs-border-opacity)) !important;
+          border-color: rgba(39, 39, 39, var(--bs-border-opacity)) !important;
         }
 
         .border-black {

diff --git a/scss/tokens/_component.scss b/scss/tokens/_component.scss
diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss
@@ -92,7 +92,7 @@ $ouds-color-decorative-sky-900: #06202d !default;
 $ouds-color-functional-black: #000 !default;
 // $ouds-color-functional-dark-gray-80: #7a7a7a !default;
 // $ouds-color-functional-dark-gray-160: #707070 !default;
-$ouds-color-functional-dark-gray-240: #666 !default;
+// $ouds-color-functional-dark-gray-240: #666 !default;
 // $ouds-color-functional-dark-gray-320: #5c5c5c !default;
 $ouds-color-functional-dark-gray-400: #555 !default;
 // $ouds-color-functional-dark-gray-480: #444 !default;
@@ -115,14 +115,14 @@ $ouds-color-functional-light-gray-80: #f4f4f4 !default;
 $ouds-color-functional-light-gray-160: #eee !default;
 // $ouds-color-functional-light-gray-240: #e0e0e0 !default;
 // $ouds-color-functional-light-gray-320: #d6d6d6 !default;
-$ouds-color-functional-light-gray-400: #ccc !default;
+// $ouds-color-functional-light-gray-400: #ccc !default;
 // $ouds-color-functional-light-gray-480: #c2c2c2 !default;
 $ouds-color-functional-light-gray-560: #bbb !default;
 // $ouds-color-functional-light-gray-640: #adadad !default;
 // $ouds-color-functional-light-gray-720: #a3a3a3 !default;
 // $ouds-color-functional-light-gray-800: #999 !default;
-$ouds-color-functional-light-gray-880: #8f8f8f !default;
-$ouds-color-functional-light-gray-960: #858585 !default;
+// $ouds-color-functional-light-gray-880: #8f8f8f !default;
+// $ouds-color-functional-light-gray-960: #858585 !default;
 $ouds-color-functional-malachite-100: #edfcf0 !default;
 $ouds-color-functional-malachite-200: #c1f6ca !default;
 $ouds-color-functional-malachite-300: #94f0a4 !default;

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -476,11 +476,11 @@
   --bs-border-color: var(--bs-color-border-emphasized);
 }
 
-.color-copy:hover svg {
+.color-copy:hover > svg {
   transform: scale(1.07);
 }
 
-.color-copy svg {
+.color-copy > svg {
   transition: transform .15s ease-in-out; // stylelint-disable-line property-disallowed-list
 }
 

diff --git a/site/content/docs/0.0/customize/color-palette.md b/site/content/docs/0.0/customize/color-palette.md
@@ -22,7 +22,19 @@ This section exposes all the existing colors inside the OUDS Web palette. These
       <figure class="mb-none" aria-label="{{ $color.name }}">
         <button class="btn border-none p-none color-copy ratio ratio-1x1" data-clipboard-text="{{ $color.variable }}" data-bs-toggle="tooltip" data-bs-title="Copy to clipboard">
           <svg viewBox="0 0 100 100" aria-hidden="true" preserveAspectRatio="xMidYMid meet" {{ if or (or (or (eq $color.hex "#141414") (eq $color.hex "#fff")) (eq $color.hex "#000")) (strings.Contains $color.hex "rgba") }} style="border: 1px solid var(--bs-color-border-emphasized)" {{ end }}>
+          {{ if strings.Contains $color.hex "rgba" }}
+            <rect fill="#fff" width="50" height="100"/>
+            <rect fill="#141414" x="50" width="50" height="100"/>
+          {{ end -}}
             <rect fill="{{ $color.hex }}" width="100" height="100"/>
+          {{ if strings.Contains $color.hex "rgba" }}
+            <svg class="decorative-xs-icon text-black" x="15" y="15" width="20" height="20" aria-hidden="true">
+              <use xlink:href="#ui-light-mode"/>
+            </svg>
+            <svg class="decorative-xs-icon text-white" x="65" y="15" width="20" height="20" aria-hidden="true">
+              <use xlink:href="#ui-dark-mode"/>
+            </svg>
+          {{ end -}}
           </svg>
           <span class="visually-hidden">Copy variable name {{ $color.variable }}</span>
         </button>

diff --git a/site/data/colors.yml b/site/data/colors.yml
@@ -9,7 +9,7 @@
 - name: red
   hex: "#ea0305"
 - name: orange
-  hex: "#f16e00"
+  hex: "#f15e00"
 - name: yellow
   hex: "#ffd000"
 - name: green

diff --git a/site/data/grays.yml b/site/data/grays.yml
@@ -3,15 +3,15 @@
 - name: 200
   hex: "#eee"
 - name: 300
-  hex: "#ccc"
+  hex: "#bbb"
 - name: 400
   hex: "#bbb"
 - name: 500
-  hex: "#8f8f8f"
+  hex: "#555"
 - name: 600
-  hex: "#666"
-- name: 700
   hex: "#333"
+- name: 700
+  hex: "#272727"
 - name: 800
   hex: "#1f1f1f"
 - name: 900

diff --git a/site/data/palette.yml b/site/data/palette.yml
@@ -66,7 +66,7 @@
         hex: "#ff7900"
       - name: Orange 550
         variable: $ouds-color-orange-550
-        hex: "#f16e00"
+        hex: "#f15e00"
   - subcategory: Warm gray
     name: "warm-gray"
     colors:
@@ -91,27 +91,15 @@
       - name: Functional light gray 160
         variable: $ouds-color-functional-light-gray-160
         hex: "#eee"
-      - name: Functional light gray 400
-        variable: $ouds-color-functional-light-gray-400
-        hex: "#ccc"
       - name: Functional light gray 560
         variable: $ouds-color-functional-light-gray-560
         hex: "#ccc"
   - subcategory: Dark gray
     name: "dark-gray"
     colors:
-      - name: Functional dark gray 160
-        variable: $ouds-color-functional-dark-gray-160
-        hex: "#707070"
       - name: Functional dark gray 400
         variable: $ouds-color-functional-dark-gray-400
         hex: "#555"
-      - name: Functional dark gray 480
-        variable: $ouds-color-functional-dark-gray-480
-        hex: "#444"
-      - name: Functional dark gray 560
-        variable: $ouds-color-functional-dark-gray-560
-        hex: "#3d3d3d"
       - name: Functional dark gray 640
         variable: $ouds-color-functional-dark-gray-640
         hex: "#333"
@@ -133,9 +121,9 @@
   - subcategory: Functional malachite
     name: "functional-malachite"
     colors:
-      - name: Functional malachite 100
-        variable: $ouds-color-functional-malachite-100
-        hex: "#edfcf0"
+      - name: Functional malachite 300
+        variable: $ouds-color-functional-malachite-300
+        hex: "#94f0a4"
       - name: Functional malachite 500
         variable: $ouds-color-functional-malachite-500
         hex: "#3de35a"
@@ -148,6 +136,12 @@
       - name: Functional scarlet 100
         variable: $ouds-color-functional-scarlet-100
         hex: "#ffe5e6"
+      - name: Functional scarlet 200
+        variable: $ouds-color-functional-scarlet-200
+        hex: "#ffb2b3"
+      - name: Functional scarlet 300
+        variable: $ouds-color-functional-scarlet-300
+        hex: "#ff8081"
       - name: Functional scarlet 600
         variable: $ouds-color-functional-scarlet-600
         hex: "#ea0305"
@@ -163,9 +157,9 @@
   - subcategory: Functional dodger
     name: "functional-dodger"
     colors:
-      - name: Functional dodger 100
-        variable: $ouds-color-functional-dodger-100
-        hex: "#f0faff"
+      - name: Functional dodger 300
+        variable: $ouds-color-functional-dodger-300
+        hex: "#8ad5ff"
       - name: Functional dodger 500
         variable: $ouds-color-functional-dodger-500
         hex: "#26b2ff"
@@ -175,18 +169,15 @@
   - subcategory: Functional sun
     name: "functional-sun"
     colors:
-      - name: Functional sun 100
-        variable: $ouds-color-functional-sun-100
-        hex: "#fff7d6"
       - name: Functional sun 200
         variable: $ouds-color-functional-sun-200
         hex: "#ffed99"
+      - name: Functional sun 300
+        variable: $ouds-color-functional-sun-300
+        hex: "#ffe270"
       - name: Functional sun 500
         variable: $ouds-color-functional-sun-500
         hex: "#ffd000"
-      - name: Functional sun 600
-        variable: $ouds-color-functional-sun-600
-        hex: "#d6aa00"
       - name: Functional sun 900
         variable: $ouds-color-functional-sun-900
         hex: "#3d3100"
@@ -277,18 +268,72 @@
       - name: Decorative amethyst 800
         variable: $ouds-color-decorative-amethyst-800
         hex: "#2c174a"
-  - category: Transparent black
-    name: "transparent-black"
+  - category: Opacity white
+    name: "opacity-white"
+    colors:
+      - name: Opacity white 0
+        variable: $ouds-color-opacity-white-0
+        hex: "rgba(255, 255, 255, 0)"
+      - name: Opacity white 40
+        variable: $ouds-color-opacity-white-40
+        hex: "rgba(255, 255, 255, .04)"
+      - name: Opacity white 80
+        variable: $ouds-color-opacity-white-80
+        hex: "rgba(255, 255, 255, .08)"
+      - name: Opacity white 200
+        variable: $ouds-color-opacity-white-200
+        hex: "rgba(255, 255, 255, .2)"
+      - name: Opacity white 640
+        variable: $ouds-color-opacity-white-640
+        hex: "rgba(255, 255, 255, .64)"
+      - name: Opacity white 800
+        variable: $ouds-color-opacity-white-800
+        hex: "rgba(255, 255, 255, .8)"
+      - name: Opacity white 920
+        variable: $ouds-color-opacity-white-920
+        hex: "rgba(255, 255, 255, .92)"
+  - category: Opacity black
+    name: "opacity-black"
     colors:
-      - name: Transparent black 0
-        variable: $ouds-color-transparent-black-0
+      - name: Opacity black 0
+        variable: $ouds-color-opacity-black-0
         hex: "rgba(0, 0, 0, 0)"
-      - name: Transparent black 300
-        variable: $ouds-color-transparent-black-300
+      - name: Opacity black 40
+        variable: $ouds-color-opacity-black-40
+        hex: "rgba(0, 0, 0, .04)"
+      - name: Opacity black 80
+        variable: $ouds-color-opacity-black-80
+        hex: "rgba(0, 0, 0, .08)"
+      - name: Opacity black 160
+        variable: $ouds-color-opacity-black-160
         hex: "rgba(0, 0, 0, .16)"
-      - name: Transparent black 400
-        variable: $ouds-color-transparent-black-400
+      - name: Opacity black 200
+        variable: $ouds-color-opacity-black-200
+        hex: "rgba(0, 0, 0, .2)"
+      - name: Opacity black 240
+        variable: $ouds-color-opacity-black-240
         hex: "rgba(0, 0, 0, .24)"
-      - name: Transparent black 500
-        variable: $ouds-color-transparent-black-500
+      - name: Opacity black 320
+        variable: $ouds-color-opacity-black-320
         hex: "rgba(0, 0, 0, .32)"
+      - name: Opacity black 680
+        variable: $ouds-color-opacity-black-680
+        hex: "rgba(0, 0, 0, .68)"
+      - name: Opacity black 840
+        variable: $ouds-color-opacity-black-840
+        hex: "rgba(0, 0, 0, .84)"
+  - category: Opacity colored
+    name: "opacity"
+    colors:
+      - name: Opacity malachite
+        variable: $ouds-color-opacity-malachite
+        hex: "rgba(61, 227, 90, .12)"
+      - name: Opacity scarlet
+        variable: $ouds-color-opacity-scarlet
+        hex: "rgba(234, 3, 5, .08)"
+      - name: Opacity dodger blue
+        variable: $ouds-color-opacity-dodger-blue
+        hex: "rgba(38, 178, 255, .08)"
+      - name: Opacity sun
+        variable: $ouds-color-opacity-sun
+        hex: "rgba(255, 208, 0, .16)"
diff --git a/site/data/theme-colors.yml b/site/data/theme-colors.yml
@@ -1,5 +1,5 @@
 - name: primary
-  hex: "#f16e00"
+  hex: "#f15e00"
   dark_hex: "#ff7900"
   description: "<b>Primary —</b> Main theme color, used for high emphasis and active component."
 - name: secondary