🐛 fix(radio, radio-rich, toggle, checkbox): tokens de couleur [DS-347…

…1] (#760) - mise à jour des tokens de couleurs sur checkbox, radio, radio-rich, toggle
GouvernementFR · Nov 10, 2023 · cfa185d · cfa185d
1 parent d111a13
commit cfa185d
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 31 deletions.
diff --git a/src/component/checkbox/style/_scheme.scss b/src/component/checkbox/style/_scheme.scss
@@ -20,6 +20,7 @@
         + label {
           @include before {
             @include color.background(active blue-france);
+            @include color.background-image(border active blue-france, (), checkbox-background-image());
             @include color.data-uri-svg(text inverted blue-france, (), $checkbox-svg, false);
           }
         }

diff --git a/src/component/radio/style/_tool.scss b/src/component/radio/style/_tool.scss
@@ -5,21 +5,23 @@
 
 @use 'sass:math';
 
-@function radio-background-image($checked: true, $size: md) {
+@function radio-background-image($checked: true, $size: md, $index: 1) {
+  $color1: '$color##{$index}';
+  $color2: '$color##{$index + 1}';
   $max: 12;
   @if $size == sm {
     $max: 8;
   }
 
   @if $checked {
     $in: $max * 0.5;
-    @return 'radial-gradient(transparent #{$max - 2}px, $color#1 #{$max - 1}px, transparent #{$max}px), radial-gradient($color#2 #{$in - 1}px, transparent #{$in}px)';
+    @return 'radial-gradient(transparent #{$max - 2}px, #{$color1} #{$max - 1}px, transparent #{$max}px), radial-gradient(#{$color2} #{$in - 1}px, transparent #{$in}px)';
   }
   @else {
-    @return 'radial-gradient(transparent #{$max - 2}px, $color#1 #{$max - 1}px, transparent #{$max}px)';
+    @return 'radial-gradient(transparent #{$max - 2}px, #{$color1} #{$max - 1}px, transparent #{$max}px)';
   }
 }
 
 @function radio-rich-background-image($checked: true) {
-  @return 'linear-gradient(0deg, $color#3, $color#3), linear-gradient(0deg, $color#3, $color#3), linear-gradient(0deg, $color#3, $color#3), linear-gradient(0deg, $color#3, $color#3), #{radio-background-image($checked, sm)}';
+  @return 'linear-gradient(0deg, $color#1, $color#1), linear-gradient(0deg, $color#1, $color#1), linear-gradient(0deg, $color#1, $color#1), linear-gradient(0deg, $color#1, $color#1), #{radio-background-image($checked, sm, 2)}';
 }
diff --git a/src/component/radio/style/scheme/_default.scss b/src/component/radio/style/scheme/_default.scss
@@ -11,7 +11,7 @@
   #{selector.ns-group(radio)} {
     input[type="radio"] {
       & + label {
-        @include color.background-image((action-high blue-france), (legacy:$legacy), radio-background-image(false));
+        @include color.background-image((border action-high blue-france), (legacy:$legacy), radio-background-image(false));
       }
 
       @include disabled.selector {
@@ -22,7 +22,7 @@
 
       &:checked {
         + label {
-          @include color.background-image((action-high blue-france) (action-high blue-france), (legacy:$legacy), radio-background-image(true));
+          @include color.background-image((border active blue-france) (active blue-france), (legacy:$legacy), radio-background-image(true));
         }
 
         @include disabled.selector {
@@ -43,7 +43,7 @@
           }
 
           &:checked + label {
-            @include color.background-image((border plain error) (action-high blue-france), (legacy:$legacy), radio-background-image(true));
+            @include color.background-image((border plain error) (active blue-france), (legacy:$legacy), radio-background-image(true));
           }
         }
       }
@@ -57,7 +57,7 @@
           }
 
           &:checked + label {
-            @include color.background-image((border plain success) (action-high blue-france), (legacy:$legacy), radio-background-image(true));
+            @include color.background-image((border plain success) (active blue-france), (legacy:$legacy), radio-background-image(true));
           }
         }
       }
@@ -71,7 +71,7 @@
           }
 
           &:checked + label {
-            @include color.background-image((border plain info) (action-high blue-france), (legacy:$legacy), radio-background-image(true));
+            @include color.background-image((border plain info) (active blue-france), (legacy:$legacy), radio-background-image(true));
           }
         }
       }

diff --git a/src/component/radio/style/scheme/_rich.scss b/src/component/radio/style/scheme/_rich.scss
@@ -16,13 +16,13 @@
 
     input[type="radio"] {
       + label {
-        @include color.background-image((action-high blue-france) (action-high blue-france) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}');
+        @include color.background-image((border default grey) (border action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(false)}');
         @include color.background((background default grey), (legacy: $legacy));
       }
 
       @include disabled.selector {
         + label {
-          @include color.background-image((disabled grey) (disabled grey) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}');
+          @include color.background-image((border default grey) (disabled grey) (disabled grey), (legacy: $legacy), '#{radio-rich-background-image(false)}');
         }
 
         ~ #{selector.ns(radio-rich__pictogram)} {
@@ -34,7 +34,7 @@
 
       &:checked {
         + label {
-          @include color.background-image((action-high blue-france) (action-high blue-france) (action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}');
+          @include color.background-image((border active blue-france) (border active blue-france) (active blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}');
         }
 
         ~ #{selector.ns(radio-rich__pictogram)} {
@@ -43,7 +43,7 @@
 
         @include disabled.selector {
           + label {
-            @include color.background-image((disabled grey) (disabled grey) (text disabled grey), (legacy: $legacy), '#{radio-rich-background-image(true)}');
+            @include color.background-image((text disabled grey) (disabled grey) (disabled grey), (legacy: $legacy), '#{radio-rich-background-image(true)}');
           }
 
           ~ #{selector.ns(radio-rich__pictogram)} {
@@ -59,11 +59,11 @@
       #{ns(radio-rich)} {
         input[type="radio"] {
           & + label {
-            @include color.background-image((border plain error) (action-high blue-france) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}');
+            @include color.background-image((border default grey) (border plain error), (legacy: $legacy), '#{radio-rich-background-image(false)}');
           }
 
           &:checked + label {
-            @include color.background-image((border plain error) (action-high blue-france) (action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}');
+            @include color.background-image((action-high blue-france) (border plain error) (active blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}');
           }
         }
       }
@@ -73,11 +73,11 @@
       #{ns(radio-rich)} {
         input[type="radio"] {
           & + label {
-            @include color.background-image((border plain success) (action-high blue-france) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}');
+            @include color.background-image((border default grey) (border plain success), (legacy: $legacy), '#{radio-rich-background-image(false)}');
           }
 
           &:checked + label {
-            @include color.background-image((border plain success) (action-high blue-france) (action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}');
+            @include color.background-image((action-high blue-france) (border plain success) (active blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}');
           }
         }
       }
@@ -87,11 +87,11 @@
       #{ns(radio-rich)} {
         input[type="radio"] {
           & + label {
-            @include color.background-image((border plain info) (action-high blue-france) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}');
+            @include color.background-image((border default grey) (border plain info), (legacy: $legacy), '#{radio-rich-background-image(false)}');
           }
 
           &:checked + label {
-            @include color.background-image((border plain info) (action-high blue-france) (action-high blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}');
+            @include color.background-image((action-high blue-france) (border plain info) (active blue-france), (legacy: $legacy), '#{radio-rich-background-image(true)}');
           }
         }
       }
@@ -101,11 +101,11 @@
       input[type="radio"] {
         @include disabled.selector {
           & + label {
-            @include color.background-image((disabled grey) (disabled grey) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(false)}');
+            @include color.background-image((border default grey) (disabled grey), (legacy: $legacy), '#{radio-rich-background-image(false)}');
           }
 
           &:checked + label {
-            @include color.background-image((disabled grey) (disabled grey) (border default grey), (legacy: $legacy), '#{radio-rich-background-image(true)}');
+            @include color.background-image((border default grey) (disabled grey) (disabled grey), (legacy: $legacy), '#{radio-rich-background-image(true)}');
           }
         }
       }

diff --git a/src/component/radio/style/scheme/_sm.scss b/src/component/radio/style/scheme/_sm.scss
@@ -10,7 +10,7 @@
   #{ns-group(radio)}--sm {
     input[type="radio"] {
       + label {
-        @include color.background-image((action-high blue-france), (legacy:$legacy), radio-background-image(false, sm));
+        @include color.background-image((border action-high blue-france), (legacy:$legacy), radio-background-image(false, sm));
       }
 
       @include disabled.selector() {
@@ -21,7 +21,7 @@
 
       &:checked {
         + label {
-          @include color.background-image((action-high blue-france) (action-high blue-france), (legacy:$legacy), radio-background-image(true, sm));
+          @include color.background-image((border active blue-france) (active blue-france), (legacy:$legacy), radio-background-image(true, sm));
         }
 
         @include disabled.selector {
@@ -42,7 +42,7 @@
           }
 
           &:checked + label {
-            @include color.background-image((border plain error, action-high blue-france), (legacy:$legacy), radio-background-image(true, sm));
+            @include color.background-image((border plain error) (active blue-france), (legacy:$legacy), radio-background-image(true, sm));
           }
         }
       }
@@ -56,7 +56,7 @@
           }
 
           &:checked + label {
-            @include color.background-image((border plain success) (action-high blue-france), (legacy:$legacy), radio-background-image(true, sm));
+            @include color.background-image((border plain success) (active blue-france), (legacy:$legacy), radio-background-image(true, sm));
           }
         }
       }
@@ -70,7 +70,7 @@
           }
 
           &:checked + label {
-            @include color.background-image((border plain info) (action-high blue-france), (legacy:$legacy), radio-background-image(true, sm));
+            @include color.background-image((border plain info) (active blue-france), (legacy:$legacy), radio-background-image(true, sm));
           }
         }
       }

diff --git a/src/component/toggle/style/_scheme.scss b/src/component/toggle/style/_scheme.scss
@@ -13,7 +13,7 @@
 
       @include before {
         @include color.text(active blue-france, (legacy:$legacy));
-        @include color.data-uri-svg(action-high blue-france, (legacy: $legacy), $toggle-unchecked-svg);
+        @include color.data-uri-svg(border action-high blue-france, (legacy: $legacy), $toggle-unchecked-svg);
       }
 
       @include after {
@@ -31,11 +31,11 @@
 
         ~ #{ns(toggle__label)} {
           @include before {
-            @include color.data-uri-svg((action-high blue-france) (action-high blue-france), (legacy: $legacy), $toggle-checked-svg);
+            @include color.data-uri-svg((border active blue-france) (border active blue-france), (legacy: $legacy), $toggle-checked-svg);
           }
 
           @include after {
-            @include color.data-uri-svg(action-high blue-france, (legacy: $legacy), $toggle-svg);
+            @include color.data-uri-svg(active blue-france, (legacy: $legacy), $toggle-svg);
           }
         }
       }
@@ -96,7 +96,7 @@
       &:checked {
         ~ #{ns(toggle__label)} {
           @include before {
-            @include color.data-uri-svg((border plain error) (action-high blue-france), (legacy: $legacy), $toggle-checked-svg);
+            @include color.data-uri-svg((border plain error) (active blue-france), (legacy: $legacy), $toggle-checked-svg);
           }
         }
       }
@@ -122,7 +122,7 @@
       &:checked {
         ~ #{ns(toggle__label)} {
           @include before {
-            @include color.data-uri-svg((border plain success) (action-high blue-france), (legacy: $legacy), $toggle-checked-svg);
+            @include color.data-uri-svg((border plain success) (active blue-france), (legacy: $legacy), $toggle-checked-svg);
           }
         }
       }