feat(ui-colors): update couleurs UI kit et complement de label (#2722)

* refactor(champ): utiliser la bonne variable de couleur * refactor(multiple): utiliser color-text-secondary au lieu de placeholder et suppression de placeholder
DNUM-SocialGouv · Feb 26, 2024 · ee39784 · ee39784
1 parent 2b805e4
commit ee39784
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 17 deletions.
diff --git a/...features/Stages3eEt2de/Candidater/Formulaire/FormulaireCandidaterStage3eEt2de.module.scss b/...features/Stages3eEt2de/Candidater/Formulaire/FormulaireCandidaterStage3eEt2de.module.scss
@@ -3,6 +3,7 @@
 $color-message-champs-obligatoires: utilities.$color-primary;
 $color-background-etape:  utilities.$color-background-secondary;
 $color-text-etape:  utilities.$color-text-primary-inverse;
+$color-text-decharge: utilities.$color-text-secondary;
 
 
 .header {
@@ -110,7 +111,7 @@ $color-text-etape:  utilities.$color-text-primary-inverse;
   }
 
   p {
-    color: utilities.$color-text-placeholder;
+    color: $color-text-decharge;
     font-size: 0.875rem;
     padding: 1rem;
   }

diff --git a/src/client/components/ui/Form/Combobox/ComboboxMetiers/ComboboxMetiers.module.scss b/src/client/components/ui/Form/Combobox/ComboboxMetiers/ComboboxMetiers.module.scss
@@ -1,7 +1,7 @@
 @use "../../Input.module";
 @use "@styles/utilities" as utilities;
 
-$color-nombre-resultats: utilities.$color-text-placeholder;
+$color-nombre-resultats: utilities.$color-text-secondary;
 
 .nombreResultats {
   @include utilities.text-small;

diff --git a/src/client/components/ui/Form/Combobox/ComboboxPays/ComboboxPays.module.scss b/src/client/components/ui/Form/Combobox/ComboboxPays/ComboboxPays.module.scss
@@ -1,7 +1,7 @@
 @use "../../Input.module";
 @use "@styles/utilities" as utilities;
 
-$color-nombre-resultats: utilities.$color-text-placeholder;
+$color-nombre-resultats: utilities.$color-text-secondary;
 
 .nombreResultats {
   @include utilities.text-small;

diff --git a/src/client/components/ui/Form/Label/Label.module.scss b/src/client/components/ui/Form/Label/Label.module.scss
@@ -1,6 +1,7 @@
 @use "@styles/utilities";
 
 $color-text-disabled-or-readonly: utilities.$color-text-secondary;
+$color-text-label-complement: utilities.$color-text-secondary;
 
 .label {
   display: block;
@@ -18,7 +19,7 @@ $color-text-disabled-or-readonly: utilities.$color-text-secondary;
   .complement {
     display: block;
     overflow: hidden;
-    color: utilities.$color-text-placeholder; // TODO (BRUJ 06-10-2023): Ajouter la bonne couleur : devrait s'appeler color-text-secondary d'après l'ui kit
+    color: $color-text-label-complement;
     @include utilities.text-xsmall;
     line-height: 1.4;
   }

diff --git a/src/client/components/ui/Pagination/Pagination.module.scss b/src/client/components/ui/Pagination/Pagination.module.scss
@@ -2,7 +2,7 @@
 
 $pagination-current-page-color: utilities.$color-text-primary-inverse;
 $pagination-current-page-background-color: utilities.$color-background-secondary;
-$pagination-disabled-page-color: utilities.$color-text-placeholder;
+$pagination-disabled-page-color: utilities.$color-text-secondary;
 $pagination-available-page-color: utilities.$color-text-primary;
 
 .pagination {

diff --git a/src/styles/theme/_colors.stories.mdx b/src/styles/theme/_colors.stories.mdx
@@ -162,12 +162,6 @@ Pour utiliser une couleur, on procède de la manière suivante :
                         <p>$color-text-secondary</p>
                         <p>#666666</p>
                     </li>
-                    <li>
-                        <div className="color-text-placeholder"></div>
-                        <p>Placeholder</p>
-                        <p>$color-text-placeholder</p>
-                        <p>#666666</p>
-                    </li>
                 </ul>
             </section>
             <section className="colors-cta">

diff --git a/src/styles/theme/_colors.stories.scss b/src/styles/theme/_colors.stories.scss
@@ -81,10 +81,6 @@
       background-color: variables.$color-text-primary-inverse;
     }
 
-    & .color-text-placeholder {
-      background-color: variables.$color-text-placeholder;
-    }
-
     & .color-text-secondary {
       background-color: variables.$color-text-secondary;
     }

diff --git a/src/styles/theme/_variables.scss b/src/styles/theme/_variables.scss
@@ -38,8 +38,6 @@ $color-text-primary: #161616;
 $color-text-primary-inverse: #FFFFFF;
 $color-text-primary-alternative: #566BB1;
 $color-text-secondary: #666666;
-$color-text-placeholder: #666666;
-
 
 /* ***************
  * CTA colors