🐛 fix(search, input, select): color token & cancel button (#740)

- corrige le token de couleur de l'intitulé et des icones dans les champs de saisie et du select. - customisation de l'icone de suppression du champs de recherche : close-circle-fill
GouvernementFR · Nov 6, 2023 · 5242f4c · 5242f4c
1 parent d40ef3e
commit 5242f4c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 16 deletions.
diff --git a/src/component/input/input-base/style/_scheme.scss b/src/component/input/input-base/style/_scheme.scss
@@ -8,7 +8,7 @@
 
 @mixin _input-scheme($legacy: false) {
   #{ns(input)} {
-    @include color.text(label grey, (legacy:$legacy));
+    @include color.text(default grey, (legacy:$legacy));
     @include color.background(contrast grey, (legacy:$legacy));
     @include color.box-shadow(plain grey, (legacy:$legacy), bottom-2-in);
 
@@ -30,7 +30,7 @@
     @if not $legacy {
       @supports selector(::-webkit-calendar-picker-indicator) {
         &[type=date] {
-          @include color.data-uri-svg(text title grey, (legacy: $legacy), $input-calendar-line);
+          @include color.data-uri-svg(text action-high grey, (legacy: $legacy), $input-calendar-line);
 
           @include disabled.selector((legacy: $legacy), (text: true, box-shadow: bottom-2-in)) {
             @include color.data-uri-svg(text disabled grey, (legacy: $legacy), $input-calendar-line);

diff --git a/src/component/search/index.scss b/src/component/search/index.scss
@@ -5,3 +5,5 @@
 
 @import '../../core/index';
 @import '../button/index';
+@import 'style/setting';
+
diff --git a/src/component/search/style/_module.scss b/src/component/search/style/_module.scss
@@ -17,15 +17,16 @@
     border-radius: spacing.space(1v) 0 0;
     @include max-height(10v);
 
-    /* TODO: intégrer la croix en background pour effacer la search bar
-    &::-webkit-search-cancel-button {
-      -webkit-appearance: none;
-    }
-    */
-
     &::placeholder {
       font-style: italic;
     }
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      @include size(4v, 4v);
+      background-repeat: no-repeat;
+      background-size: spacing.space(4v) spacing.space(4v);
+    }
   }
 
   @include nest-btn(md, only, search-line) {

diff --git a/src/component/search/style/_scheme.scss b/src/component/search/style/_scheme.scss
@@ -10,19 +10,17 @@
     #{ns(input)} {
       @include color.box-shadow(action-high blue-france, (legacy:$legacy), bottom-2-in);
 
-      /**
-      * Modificateur pour le champ validés
-      */
       &--valid {
         @include color.box-shadow(plain success, (legacy:$legacy), bottom-2-in);
       }
 
-      /**
-      * Modificateur pour le champ présentant des erreurs
-      */
       &--error {
         @include color.box-shadow(plain error, (legacy:$legacy), bottom-2-in);
       }
+
+      &::-webkit-search-cancel-button {
+        @include color.data-uri-svg(text label grey, (legacy: $legacy), $input-search-cancel);
+      }
     }
   }
 }
diff --git a/src/component/search/style/_setting.scss b/src/component/search/style/_setting.scss
@@ -0,0 +1,6 @@
+////
+/// Input Setting
+/// @group input
+//// 
+
+$input-search-cancel: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="$COLOR" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>';
diff --git a/src/component/select/style/_scheme.scss b/src/component/select/style/_scheme.scss
@@ -8,11 +8,11 @@
 
 @mixin _select-scheme($legacy: false) {
   #{ns(select)} {
-    @include color.text(title grey, (legacy:$legacy));
+    @include color.text(default grey, (legacy:$legacy));
     @include color.background(contrast grey, (legacy:$legacy));
     @include color.box-shadow(plain grey, (legacy:$legacy), bottom-2-in);
 
-    @include color.data-uri-svg(text title grey, (legacy: $legacy), $select-arrow-down-svg);
+    @include color.data-uri-svg(text label grey, (legacy: $legacy), $select-arrow-down-svg);
 
     #{ns(fieldset--valid)} &,
     &-group--valid & {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,3 +5,5 @@

		@import '../../core/index';
		@import '../button/index';
		@import 'style/setting';