♻️ refactor(radio,checkbox,toggle): passage input en bleu et refactorisation [DS-2897,DS-2899, DS-2182, DS-2778, DS-3048]

module/color/mixin/_data-uri-svg.scss

@@ -25,7 +25,7 @@
   $light: result.get($light-colors, $value);
   $light: specificity.important($light, $important);
 
-  @if $legacy {
+  @if $legacy and $prop != false {
     @include legacy.is(ie11) {
       #{$prop}: #{url(utilities.data-uri(string.encode-svg($light, true), svg))};
     }
@@ -41,6 +41,8 @@
       --data-uri-svg: #{url(utilities.data-uri(string.encode-svg($dark, false), svg))};
     }
 
-    #{$prop}: var(--data-uri-svg);
+    @if $prop != false {
+      #{$prop}: var(--data-uri-svg);
+    }
   }
 }

src/component/checkbox/deprecated/style/_module.scss

@@ -18,3 +18,9 @@
     }
   }
 }
+
+#{ns-group(checkbox)} {
+  input[type='checkbox'] {
+    margin-top: spacing.space(3v);
+  }
+}

src/component/checkbox/index.scss

@@ -7,3 +7,4 @@
 @import '../../scheme/index';
 @import '../form/index';
 @import 'style/setting';
+@import 'style/tool';

src/component/checkbox/legacy.scss

@@ -11,5 +11,6 @@
 
 @import 'index';
 @import 'style/scheme';
+@import 'style/legacy';
 
 @include _checkbox-scheme(true);

src/component/checkbox/style/_legacy.scss

@@ -0,0 +1,15 @@
+////
+/// Checkbox legacy
+/// @group checkbox
+////
+
+@use 'module/selector';
+@use 'module/legacy';
+
+@include legacy.is(ie11) {
+  #{selector.ns(checkbox-group)} {
+    input[type="checkbox"] {
+      opacity: 1;
+    }
+  }
+}

src/component/checkbox/style/_module.scss

@@ -4,8 +4,9 @@
 ////
 
 @use 'module/spacing';
+@use 'module/selector';
 
-#{ns(checkbox-group)} {
+#{selector.ns(checkbox-group)} {
   @include relative;
 
   input[type="checkbox"] {
@@ -19,8 +20,9 @@
       -webkit-tap-highlight-color: transparent;
       @include display-flex(row, center, flex-start, wrap);
       @include margin-left(8v);
+      --data-uri-svg: none;
 
-      #{ns(hint-text)} {
+      #{selector.ns(hint-text)} {
         @include margin(0);
         @include size(100%);
       }
@@ -32,10 +34,10 @@
         @include absolute(0, null, null, -8v);
         @include size(6v, 6v);
         @include margin-right(2v);
-        background-size: spacing.space(4v);
-        background-position: center;
-        background-repeat: no-repeat;
         border-radius: spacing.space(1v);
+        background-size: spacing.space(1v 1v), spacing.space(calc(100% - 1v) 1px), spacing.space(1v 1v), spacing.space(1px calc(100% - 2v)), spacing.space(1v 1v), spacing.space(calc(100% - 2v) 1px), spacing.space(1v 1v), spacing.space(1px calc(100% - 2v)), spacing.space(4v);
+		    background-position: 0 0, spacing.space(1v) 0, 100% 0, 0 spacing.space(1v), 100% 100%, calc(100% - spacing.space(1v)) 100%, 0 100%, 100% spacing.space(1v), center;
+		    background-repeat: no-repeat;
         // transition: background-color 0.1s, color 0.1s;
       }
     }
@@ -70,7 +72,7 @@
     }
   }
 
-  #{ns(message)} {
+  #{selector.ns(message)} {
     &:first-child {
       @include margin-top(2v);
     }

src/component/checkbox/style/_scheme.scss

@@ -5,81 +5,96 @@
 
 @use 'module/color';
 @use 'module/disabled';
+@use 'module/selector';
 
-/**
- * L'input de type checkbox avec son label est contenu dans un groupe
- * Ce groupe contient également les textes de validation, d'erreur et d'aide (optionnels)
- */
 @mixin _checkbox-scheme($legacy: false) {
-  #{ns(checkbox-group)} {
-    /**
-    * On cache l'input de type checkbox pour le styler via le label
-    */
+  #{selector.ns(checkbox-group)} {
     input[type="checkbox"] {
       + label {
         @include before {
-          @include color.box-shadow(action-high grey, (legacy:$legacy));
+          @include color.background-image(border action-high blue-france, (), checkbox-background-image());
         }
       }
 
-      /**
-      * On applique les styles au pseudo élément before du label quand l'input présente
-      * un état check ou active
-      */
-      &:checked,
-      &:active:not(:disabled) {
+      &:checked {
         + label {
           @include before {
-            @include color.background(active blue-france, (legacy:$legacy));
-            @include color.data-uri-svg(inverted grey, (legacy: $legacy), $checkbox-svg);
+            @include color.background(active blue-france);
+            @include color.data-uri-svg(inverted grey, (), $checkbox-svg, false);
           }
         }
       }
 
-      /**
-      * Mixins pour appliquer les styles correspondant au focus ainsi qu'à l'état disabled
-      */
       @include disabled.selector {
         & + label {
           @include before {
-            @include disabled.colors((legacy: $legacy, box-shadow: true));
+            @include disabled.colors();
+            @include color.background-image(disabled grey, (), checkbox-background-image());
           }
         }
 
         &:checked {
           & + label {
             @include before {
-              @include disabled.colors((legacy: $legacy, text: true, background: true));
-              @include color.data-uri-svg(text disabled grey, (legacy: $legacy), $checkbox-svg);
+              @include disabled.colors((background: true));
+              @include color.data-uri-svg(text disabled grey, (), $checkbox-svg, false);
             }
           }
         }
       }
     }
 
-    /**
-    * Modificateur pour gérer l'état erreur
-    */
     &--error {
       input[type="checkbox"] + label {
         @include color.text(default error, (legacy:$legacy));
+
+        @include before {
+          @include color.background-image(border plain error, (), checkbox-background-image());
+        }
       }
 
       @include before {
-        @include color.box-shadow(plain error, (legacy:$legacy), left-2-in);
+        @include color.background(border plain error, (legacy:$legacy));
       }
     }
 
-    /**
-    * Modificateur pour gérer l'état validé
-    */
     &--valid {
       input[type="checkbox"] + label {
         @include color.text(default success, (legacy:$legacy));
+
+        @include before {
+          @include color.background-image(border plain success, (), checkbox-background-image());
+        }
       }
 
       @include before {
-        @include color.box-shadow(plain success, (legacy:$legacy), left-2-in);
+        @include color.background(border plain success, (legacy:$legacy));
+      }
+    }
+  }
+
+  #{selector.ns(fieldset)} {
+    &--error {
+      #{selector.ns(checkbox-group)} {
+        input[type="checkbox"] {
+          + label {
+            @include before {
+              @include color.background-image(border plain error, (), checkbox-background-image());
+            }
+          }
+        }
+      }
+    }
+
+    &--valid {
+      #{selector.ns(checkbox-group)} {
+        input[type="checkbox"] {
+          + label {
+            @include before {
+              @include color.background-image(border plain success, (), checkbox-background-image());
+            }
+          }
+        }
       }
     }
   }

src/component/checkbox/style/_tool.scss

@@ -0,0 +1,9 @@
+////
+/// Radio Tool
+/// @group radio
+////
+
+@function checkbox-background-image() {
+  $data: 'radial-gradient(at 5px 4px, transparent 4px, $COLOR 4px, $COLOR 5px, transparent 6px), linear-gradient($COLOR, $COLOR), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, $COLOR 4px, $COLOR 5px, transparent 6px), linear-gradient($COLOR, $COLOR), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, $COLOR 4px, $COLOR 5px, transparent 6px), linear-gradient($COLOR, $COLOR), radial-gradient(at 5px calc(100% - 4px), transparent 4px, $COLOR 4px, $COLOR 5px, transparent 6px), linear-gradient($COLOR, $COLOR), var(--data-uri-svg)';
+  @return $data;
+}

src/component/form/style/_scheme.scss

@@ -27,7 +27,8 @@
     }
 
     &--disabled {
-      label {
+      label,
+      #{ns(hint-text)} {
         @include disabled.colors((legacy: $legacy, text: true));
       }
     }
@@ -78,11 +79,22 @@
   #{ns(fieldset)} {
     @include disabled.selector {
       #{ns(label)},
+      #{ns(hint-text)},
       #{ns(fieldset__legend)} {
         @include disabled.colors((legacy: $legacy, text: true));
       }
     }
 
+    input {
+      @include disabled.selector {
+        + label,
+        + label #{ns(hint-text)},
+        + label + #{ns(hint-text)} {
+          @include disabled.colors((legacy: $legacy, text: true));
+        }
+      }
+    }
+
     &__legend {
       @include color.text(title grey, (legacy:$legacy));
     }

src/component/radio/deprecated/style/_module.scss

@@ -2,12 +2,18 @@
 
 #{ns(fieldset)} {
   #{ns(fieldset__content)} {
-    #{ns-group(radio)} {
-      &--sm {
-        label {
-          &::before {
-            @include margin-top(4v);
-          }
+    #{ns-group(radio)}:not(#{ns(radio-rich)}) {
+      input[type="radio"] {
+        + label {
+          background-position: calc(#{space(-1v)} + 1px) calc(#{space(2v)} + 1px), calc(#{space(-1v)} + 1px) calc(#{space(2v)} + 1px);
+        }
+      }
+    }
+
+    #{ns-group(radio)}--sm:not(#{ns(radio-rich)}) {
+      input[type="radio"] {
+        + label {
+          background-position: calc(#{space(-0.5v)} + 1px) calc(#{space(4v)} - 1px), calc(#{space(-0.5v)} + 1px) calc(#{space(4v)} - 1px);
         }
       }
     }

src/component/radio/style/_tool.scss

@@ -3,17 +3,23 @@
 /// @group radio
 ////
 
-@function radio-box-shadow ($checked: true, $size: md) {
+@use 'sass:math';
+
+@function radio-background-image($checked: true, $size: md) {
   $max: 12;
   @if $size == sm {
     $max: 8;
   }
 
-  $out: $max * 0.5;
-
-  @if not $checked {
-    $out: $max;
+  @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)';
   }
+  @else {
+    @return 'radial-gradient(transparent #{$max - 2}px, $color#1 #{$max - 1}px, transparent #{$max}px)';
+  }
+}
 
-  @return all-1-in all-#{$out}-in all-#{$max}-in;
+@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)}';
 }

src/component/radio/style/module/_default.scss

@@ -3,7 +3,10 @@
 /// @group radio
 ////
 
-#{ns-group(radio)} {
+@use 'module/spacing';
+@use 'module/selector';
+
+#{selector.ns-group(radio)} {
   @include relative;
 
   input[type="radio"] {
@@ -16,19 +19,22 @@
       @include relative;
       -webkit-tap-highlight-color: transparent;
       @include display-flex(row, center, flex-start, wrap);
-      @include margin-left(8v);
+      @include padding-left(8v);
+      background-position: calc(#{spacing.space(-1v)} + 1px) calc(#{spacing.space(-1v)} + 1px), calc(#{spacing.space(-1v)} + 1px) calc(#{spacing.space(-1v)} + 1px);
+      background-size: #{spacing.space(7.5v)} #{spacing.space(7.5v)}, #{spacing.space(7.5v)} #{spacing.space(7.5v)};
+      background-repeat: no-repeat, no-repeat;
 
-      #{ns(hint-text)} {
-        @include margin(0);
-        @include size(100%);
+      // empty before for the focus
+      @include before('') {
+        @include size(6v, 6v);
+        @include absolute(0);
+        border-radius: #{spacing.space(6v)};
+        @include margin-left(-8v);
       }
 
-      @include before('', inline-block) {
-        @include absolute(0, null, null, -8v);
-        @include size(6v, 6v);
-        @include margin-right(2v);
-        border-radius: 50%;
-        // transition: box-shadow 0.3s;
+      #{selector.ns(hint-text)} {
+        @include margin(0);
+        @include size(100%);
       }
     }
   }