🐛 fix(accordion, transcription, translate, sidemenu): Ajustement sur …

…l'état défaut et actif [DS-3023, DS-3024, DS-3025, DS-3008, DS-3142, DS-3031, DS-3032] (#564)

Harmonisation avec la navigation sur Accordion, Sidemenu, Translate et Transcription :
- Passage icône et intitulé en action-high-blue-france
- Ajout background-open-blue-france sur le bouton lorsque l'élément est ouvert
- Icône “arrow-down-s-ligne” (la même que sur navigation)
- Accordion, Translate : Retrait changement de graisse (normal -> bold) à l'ouverture et graisse constante en medium

module/animate/_index.scss

@@ -0,0 +1 @@
+@forward 'mixin/caret';

module/animate/mixin/_caret.scss

@@ -0,0 +1,11 @@
+@mixin caret() {
+  &::after {
+    transition: transform 0.3s;
+  }
+
+  &[aria-expanded='true'] {
+    &::after {
+      transform: rotate(-180deg);
+    }
+  }
+}

src/component/accordion/style/_legacy.scss

@@ -17,10 +17,12 @@
     @include enable-list-style-legacy;
 
     &__btn {
-      @include icon-legacy(add-line, sm);
+      @include icon-legacy(arrow-down-s-line, sm);
 
       &[aria-expanded="true"] {
-        @include icon-image-legacy(subtract-line);
+        @include after {
+          transform: rotate(-180deg);
+        }
       }
     }
   }

src/component/accordion/style/_module.scss

@@ -3,6 +3,8 @@
 /// @group accordion
 ////
 
+@use 'module/animate';
+
 #{ns(accordion)} {
   position: relative;
 
@@ -22,21 +24,18 @@
   &__btn {
     @include _build-link-base;
     @include _link-display(flex);
-    @include nest-accordion-button(add-line);
+    @include font-weight('medium');
+    @include nest-accordion-button(arrow-down-s-line);
     @include size(100%);
     text-align: left;
     @include margin(0);
-
+    @include animate.caret();
+
     @include after {
       @include margin-right(0);
       @include margin-left(auto);
     }
 
-    &[aria-expanded="true"] {
-      @include font-weight('bold');
-      @include icon-image(subtract-line, after);
-    }
-
     @include padding(3v 0);
     @include padding(3v 4v, md);
   }

src/component/accordion/style/_scheme.scss

@@ -12,10 +12,9 @@
     }
 
     &__btn {
-      @include color.text(action-high grey, (legacy:$legacy));
-
-      &[aria-expanded="true"] {
-        @include color.text(active grey, (legacy:$legacy));
+      @include color.text(action-high blue-france, (legacy:$legacy));
+      &[aria-expanded='true'] {
+        @include color.background(open blue-france, (legacy: $legacy));
       }
     }
   }

src/component/sidemenu/style/_scheme.scss

@@ -76,5 +76,11 @@
         }
       }
     }
+
+    &__btn {
+      &[aria-expanded='true'] {
+        @include color.background(open blue-france, (legacy: $legacy));
+      }
+    }
   }
 }

src/component/transcription/style/_legacy.scss

@@ -11,10 +11,12 @@
 
     &__btn {
       @include icon-legacy(align-left, sm, before);
-      @include icon-legacy(add-line, sm, after);
+      @include icon-legacy(arrow-down-s-line, sm, after);
 
       &[aria-expanded="true"] {
-        @include icon-image-legacy(subtract-line);
+        @include after {
+          transform: rotate(-180deg);
+        }
       }
     }
 

src/component/transcription/style/_module.scss

@@ -4,6 +4,7 @@
 ////
 
 @use 'module/media-query';
+@use 'module/animate';
 
 #{ns(transcription)} {
   position: relative;
@@ -17,7 +18,8 @@
   &__btn {
     @include _build-link-base;
     @include _link-display(flex);
-    @include nest-transcription-button(add-line);
+    @include font-weight('medium');
+    @include nest-transcription-button(arrow-down-s-line);
     @include size(100%);
     text-align: left;
     @include margin(0);
@@ -29,10 +31,7 @@
     @include icon(align-left, sm, before) {
       @include margin-right(2v);
     }
-
-    &[aria-expanded='true'] {
-      @include icon-image(subtract-line, after);
-    }
+    @include animate.caret();
   }
 
   &__content {

src/component/transcription/style/_scheme.scss

@@ -13,6 +13,9 @@
 
     &__btn {
       @include color.text(action-high blue-france, (legacy:$legacy));
+      &[aria-expanded='true'] {
+        @include color.background(open blue-france, (legacy: $legacy));
+      }
     }
 
     &__content {

src/component/translate/style/_legacy.scss

@@ -9,7 +9,7 @@
   #{ns(translate)} {
     #{ns(translate)} &__btn {
       @include icon-legacy(translate-2, sm, before);
-      @include icon-legacy(arrow-down-s-fill, sm, after);
+      @include icon-legacy(arrow-down-s-line, sm, after);
     }
   }
 }

src/component/translate/style/_module.scss

@@ -3,6 +3,8 @@
 /// @group header
 ////
 
+@use 'module/animate';
+
 #{ns(translate)} {
   --rows: 8;
   position: relative;
@@ -15,18 +17,12 @@
     @include width(100%);
     @include width(auto, lg);
     @include margin-bottom(4v, lg);
+    @include animate.caret();
 
-    @include icon(arrow-down-s-fill, sm, after) {
+    @include icon(arrow-down-s-line, sm, after) {
       @include margin-left(auto);
       @include margin-left(1v, lg);
       @include margin-right(-1v, lg);
-      transition: transform 0.3s;
-    }
-
-    &[aria-expanded=true] {
-      @include after {
-        transform: rotate(-180deg);
-      }
     }
 
     @include respond-from(lg) {