Merge pull request #9705 from demarches-simplifiees/setup-dark-mode-ldu

[Accessibilité] Configurer le mode "sombre"

app/assets/config/manifest.js

@@ -5,3 +5,4 @@
 //= link administrate/application.js
 //= link manager.css
 //= link attestation.css
+//= link_tree ../../../node_modules/@gouvfr/dsfr/dist/artwork

app/assets/images/icons/move-handle.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fas" data-icon="arrows-alt-v" class="svg-inline--fa fa-arrows-alt-v fa-w-8 fa-lg" width="32" height="32"><path d="M19.04 20.763h-1.656v-9.526h1.656c.768 0 2.494.242.61-1.6l-3.094-3.362a.815.815 0 0 0-1.22 0l-3.093 3.361c-1.643 1.831-.159 1.6.61 1.6h1.655v9.527h-1.655c-.769 0-2.235-.244-.61 1.6l3.093 3.362a.815.815 0 0 0 1.22 0l3.094-3.361c1.884-1.795.158-1.6-.61-1.6z" fill="currentColor"/><rect width="9" height="2" y="11" ry=".402"/><rect ry=".402" y="19" height="2" width="9"/><rect width="9" height="2" y="15" ry=".402"/><rect ry=".402" y="11" x="23" height="2" width="9"/><rect width="9" height="2" x="23" y="19" ry=".402"/><rect ry=".402" y="15" x="23" height="2" width="9"/></svg>

app/assets/stylesheets/autosave.scss

@@ -7,7 +7,6 @@
 }
 
 .autosave-explanation {
-  color: $dark-grey;
   margin-left: 4px;
 }
 

app/assets/stylesheets/buttons.scss

@@ -174,6 +174,27 @@
   }
 }
 
+
+[data-fr-theme="dark"] .dropdown-content {
+  border: none;
+  background: var(--background-action-low-blue-france);
+}
+
+[data-fr-theme="dark"] .dropdown-items {
+  li {
+    &:not(.inactive) {
+      &:hover,
+      &.selected {
+        background: var(--background-action-low-blue-france-hover);
+      }
+    }
+
+    &.form-inside {
+      background-color: var(--background-action-low-blue-france);
+    }
+  }
+}
+
 .dropdown-content {
   border: 1px solid $border-grey;
   background: #FFFFFF;
@@ -226,7 +247,6 @@ ul.dropdown-items {
   li {
     display: flex;
     padding: $default-padding;
-    color: $dark-grey;
     border-bottom: 1px solid $border-grey;
     font-size: 12px;
     min-width: 300px;
@@ -293,7 +313,6 @@ ul.dropdown-items {
 
   h4 {
     font-size: 14px;
-    color: $black;
     margin-bottom: $default-spacer;
   }
 

app/assets/stylesheets/card.scss

@@ -1,6 +1,12 @@
 @import "colors";
 @import "constants";
 
+
+[data-fr-theme="dark"] .card {
+  background: none;
+  border: 1px solid var(--background-action-low-blue-france);
+}
+
 .card {
   padding: ($default-spacer * 3) ($default-spacer * 2);
   border: 1px solid $border-grey;
@@ -8,7 +14,6 @@
   background: #FFFFFF;
 
   .card-title {
-    color: $black;
     font-weight: bold;
     font-size: 20px;
     line-height: 1.5rem;

app/assets/stylesheets/dossier_edit.scss

@@ -3,6 +3,11 @@
 
 $dossier-actions-bar-border-width: 1px;
 
+[data-fr-theme="dark"] .dossier-edit .dossier-edit-sticky-footer {
+  background-color: var(--background-action-low-blue-france);
+  border: none;
+}
+
 .dossier-header {
   .fr-container {
     padding-bottom: $default-padding;

app/assets/stylesheets/dossier_views.scss

@@ -4,13 +4,11 @@
 .dossier-container {
   .sub-header {
     h1 {
-      color: $black;
       font-size: 22px;
       margin-bottom: 0;
     }
 
     h2 {
-      color: $dark-grey;
       font-weight: bold;
     }
 

app/assets/stylesheets/dsfr.scss

@@ -10,15 +10,6 @@ ol.fr-ol-content--override {
   }
 }
 
-// override default transparent background on inputs & font-size to 16px by default
-input,
-textarea,
-select,
-// FIXME when DSFR is DONE
-.form-ds-fr-white .fr-input {
-  background: $white;
-  font-size: 1em;
-}
 
 // with Marianne font, weight of font is less bolder, so bold it up
 .button.primary {

app/assets/stylesheets/forms.scss

@@ -386,7 +386,6 @@
 
   [data-reach-combobox-token] button {
     border: solid 1px $border-grey;
-    color: $black;
     border-radius: 4px;
     padding: $default-spacer;
     margin-right: $default-spacer;
@@ -449,22 +448,6 @@
     margin-bottom: $default-padding;
   }
 
-  .explication-libelle {
-    font-weight: bold;
-    font-size: 20px;
-    margin-bottom: $default-padding;
-  }
-
-  .explication {
-    margin-bottom: $default-fields-spacer;
-    padding: $default-spacer;
-    background-color: $light-grey;
-
-    p:not(:last-child) {
-      margin-bottom: $default-padding;
-    }
-  }
-
   .send-wrapper {
     display: flex;
     width: 100%;
@@ -623,6 +606,15 @@
   outline-color: $light-blue;
 }
 
+[data-fr-theme="dark"] [data-reach-combobox-popover] {
+  border: none;
+  background: var(--background-action-low-blue-france);
+}
+
+[data-fr-theme="dark"] [data-reach-combobox-option]:hover {
+  background: var(--background-action-low-blue-france-hover);
+}
+
 [data-reach-combobox-popover] {
   z-index: 20;
 }
@@ -653,6 +645,11 @@ textarea::placeholder {
   }
 }
 
+[data-fr-theme="dark"] .fixed-footer {
+  border-top: 2px solid var(--background-action-low-blue-france-hover);
+  background-color: var(--background-action-low-blue-france);
+}
+
 .fixed-footer {
   border-top: 2px solid $blue-france-500;
   position: fixed;

app/assets/stylesheets/help_dropdown.scss

@@ -8,7 +8,7 @@
 }
 
 .help-dropdown-title {
-  color: $blue-france-500;
+  font-weight: bold;
 }
 
 .dropdown-items li.help-dropdown-service {

app/assets/stylesheets/icons.scss

@@ -170,10 +170,6 @@
     background-image: image-url("icons/trash.svg");
   }
 
-  &.move-handle {
-    background-image: image-url("icons/move-handle.svg");
-  }
-
   &.mandatory {
     width: 10px;
   }

app/assets/stylesheets/landing.scss

@@ -3,10 +3,6 @@
 @import "mixins";
 @import "placeholders";
 
-.landing-panel {
-  @include vertical-padding(60px);
-}
-
 $landing-breakpoint: 1040px;
 
 .hero-wrapper {
@@ -27,16 +23,6 @@ $landing-breakpoint: 1040px;
   }
 }
 
-.hero-tagline {
-  margin-bottom: 0px;
-}
-
-.hero-tagline-em {
-  color: $blue-france-500;
-  font-style: normal;
-  font-weight: bold;
-}
-
 .hero-illustration {
   max-width: 500px;
 
@@ -74,7 +60,6 @@ $landing-breakpoint: 1040px;
 }
 
 .feature-text {
-  color: #FFFFFF;
   font-size: 20px;
   text-align: center;
 }
@@ -139,17 +124,7 @@ $landing-breakpoint: 1040px;
   font-weight: bold;
 }
 
-.usagers-panel,
-.numbers-panel,
-.cta-panel-2 {
-  background-color: var(--background-alt-blue-france);
-}
-
-
 .landing {
-  .more-info {
-    background-color: #FFFFFF;
-  }
 
   .numbers {
     @extend %horizontal-list;
@@ -229,15 +204,6 @@ $users-breakpoint: 950px;
   height: 180px;
 }
 
-.cta-panel {
-  background-color: $blue-france-500;
-  color: #FFFFFF;
-
-  .fr-btn {
-    box-shadow: inset 0 0 0 1px var(--text-inverted-blue-france);
-  }
-}
-
 .role-panel-wrapper {
   width: 100%;
   display: flex;
@@ -274,25 +240,6 @@ $users-breakpoint: 950px;
   }
 }
 
-.cta-panel-title {
-  font-size: 24px;
-  font-weight: bold;
-  margin-top: 13px;
-  color: #FFFFFF;
-
-  &.grey {
-    color: $g700;
-  }
-}
-
-.cta-panel-explanation {
-  font-size: 22px;
-  margin-bottom: 10px;
-
-  &.grey {
-    color: $g700;
-  }
-}
 
 .role-administrations-image {
   text-align: right;

app/assets/stylesheets/layouts.scss

@@ -3,10 +3,9 @@
 @import "placeholders";
 
 .two-columns {
-  background-color: $white;
 
   @media (min-width: $two-columns-breakpoint) {
-    background: linear-gradient(to right, #FFFFFF 0%, #FFFFFF 50%, $light-grey 50%, $light-grey 100%);
+    background: linear-gradient(to right, transparent 0%, transparent 50%, var(--background-alt-blue-france) 50%, var(--background-alt-blue-france) 100%);
   }
 
   .columns-container { // TODO: https://github.com/betagouv/demarches-simplifiees.fr/issues/7882, once implemented, we won't need container anymore

app/assets/stylesheets/manager.scss

@@ -23,7 +23,6 @@
 .form [data-reach-combobox-token] button {
   border: solid 1px #CCCCCC;
   background-color: transparent;
-  color: #333333;
   border-radius: 4px;
   padding: 8px;
   margin-right: 8px;

app/assets/stylesheets/menu_component.scss

@@ -1,7 +1,6 @@
 @import "colors";
 
 .menu-component-header {
-  color: $dark-grey;
   font-size: 12px;
 
   a {

app/assets/stylesheets/message.scss

@@ -1,12 +1,21 @@
 @import "colors";
 @import "constants";
 
+
+[data-fr-theme="dark"] .message {
+  background: var(--background-action-low-blue-france);
+
+  &.inverted-background {
+    background: var(--background-action-low-blue-france);
+  }
+}
+
 .message {
   display: flex;
   align-items: flex-start;
   margin-bottom: $default-padding;
   padding: $default-padding;
-  background: #FFFFFF;
+  background: $light-grey;
   border-radius: 3px;
 
   &.inverted-background {

app/assets/stylesheets/messagerie.scss

@@ -5,7 +5,6 @@
   max-height: 350px;
   overflow-y: scroll;
   border: 1px solid $border-grey;
-  background: $light-grey;
   padding: 2 * $default-spacer;
   margin-bottom: $default-spacer;
   border-radius: 4px;

app/assets/stylesheets/notifications.scss

@@ -7,3 +7,9 @@ span.notifications {
   border-radius: 4px;
   background-color: $orange;
 }
+
+.fr-tabs__list span.notifications {
+  z-index: 2;
+  top: 5px;
+  right: 8px;
+}

app/assets/stylesheets/personnes_impliquees.scss

@@ -19,7 +19,6 @@
 
     [data-reach-combobox-token] button {
       border: solid 1px $border-grey;
-      color: $black;
       margin-top: 0.5 * $default-padding;
       margin-bottom: 0.5 * $default-padding;
       margin-right: 0.5 * $default-padding;

app/assets/stylesheets/procedure_champs_editor.scss

@@ -25,15 +25,9 @@
       box-shadow: 0px 2px 4px -4px;
     }
 
-    .handle.icon {
+    .handle {
-      width: 32px;
-      height: 32px;
-      background-size: 32px;
-      margin-left: 7px;
-      margin-right: 16px;
       align-self: center;
       cursor: grab;
-      opacity: 0.8;
 
       &:hover {
         opacity: 0.4;

app/assets/stylesheets/procedure_form.scss

@@ -22,7 +22,6 @@
 .procedure-form__column--form {
   flex: 10;
   padding: 0 $default-padding;
-  background-color: $light-grey;
 
   input[type=file] {
     background-color: transparent; // Remove white bg set by DSFR
@@ -67,6 +66,11 @@
   }
 }
 
+[data-fr-theme="dark"] .procedure-form__actions {
+  background: var(--background-action-low-blue-france);
+  border-top: 1px solid var(--background-action-low-blue-france-hover);
+}
+
 .procedure-form__actions {
   display: flex;
   padding: $default-spacer $default-padding;

app/assets/stylesheets/procedure_list.scss

@@ -49,7 +49,6 @@
 
       .stats-legend {
         font-size: 12px;
-        color: $dark-grey;
       }
     }
 

app/assets/stylesheets/procedure_show.scss

@@ -56,7 +56,6 @@
 
     [data-reach-combobox-token] button {
       border: solid 1px $border-grey;
-      color: $black;
       margin: 0.25 * $default-padding;
       border-radius: 2px;
       padding: 0.25 * $default-padding;

app/assets/stylesheets/sources_particulier_form.scss

@@ -1,26 +0,0 @@
-@import "constants";
-
-#sources-particulier-form {
-  h2 {
-    margin-bottom: 0;
-  }
-
-  h3 {
-    margin-top: 2 * $default-padding;
-  }
-
-  .explication {
-    padding: $default-padding;
-
-    ul {
-      list-style-type: circle;
-      list-style-position: inside;
-      padding-left: $default-padding;
-      margin-bottom: $default-padding;
-    }
-  }
-
-  .form input[type="checkbox"] {
-    margin-bottom: 0;
-  }
-}

app/assets/stylesheets/table.scss

@@ -56,6 +56,17 @@
   width: calc(100vw);
 }
 
+
+[data-fr-theme="dark"] .fr-table--bordered {
+  .table {
+    &.hoverable {
+      tbody tr:hover {
+        background-color: var(--background-action-low-blue-france);
+      }
+    }
+  }
+}
+
 .fr-table--bordered {
   .table {
     &.hoverable {

app/assets/stylesheets/tabs.scss

@@ -1,57 +0,0 @@
-@import "colors";
-@import "mixins";
-
-.tabs {
-  ul {
-    margin-bottom: 0;
-    padding: 0;
-  }
-
-  li {
-    display: inline-block;
-    line-height: 36px;
-    position: relative;
-    text-align: center;
-    font-size: 14px;
-    border-radius: 3px 3px 0 0;
-    border: 1px solid transparent;
-
-    a {
-      display: block;
-      padding-left: 20px;
-      padding-right: 20px;
-      color: $black;
-      background-image: none;
-    }
-
-    &.active {
-      background-color: #FFFFFF;
-      border-top: 2px solid $blue-france-500;
-      border-left: 1px solid $border-grey;
-      border-right: 1px solid $border-grey;
-
-      a {
-        color: $blue-france-500;
-      }
-
-      .badge {
-        color: $blue-france-500;
-      }
-    }
-
-    &:hover {
-      a {
-        color: $blue-france-500;
-      }
-
-      .badge {
-        color: $blue-france-500;
-      }
-    }
-
-    .notifications {
-      top: 3px;
-      right: 3px;
-    }
-  }
-}

app/components/editable_champ/repetition_component/repetition_component.html.haml

@@ -1,5 +1,5 @@
 %fieldset
-  %legend.header-subsection{ legend_params }= @champ.libelle
+  %legend.fr-h5{ legend_params }= @champ.libelle
   - if @champ.description.present?
     .notice{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true)
 

app/components/groupe_gestionnaire/card/children_component/children_component.html.haml

@@ -1,9 +1,7 @@
 .fr-col-6.fr-col-md-4.fr-col-lg-3
   = link_to gestionnaire_groupe_gestionnaire_children_path(@groupe_gestionnaire), id: 'gestionnaires', class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
-      %div
+      %p.fr-badge.fr-badge--success Validé
-        %span.icon.accept
-        %p.fr-tile-status-accept Validé
       %div
         .line-count.fr-my-1w
           %p.fr-tag= @groupe_gestionnaire.children.size

app/components/groupe_gestionnaire/card/gestionnaires_component/gestionnaires_component.html.haml

@@ -1,9 +1,7 @@
 .fr-col-6.fr-col-md-4.fr-col-lg-3
   = link_to gestionnaire_groupe_gestionnaire_gestionnaires_path(@groupe_gestionnaire), id: 'gestionnaires', class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
-      %div
+      %p.fr-badge.fr-badge--success Validé
-        %span.icon.accept
-        %p.fr-tile-status-accept Validé
       %div
         .line-count.fr-my-1w
           %p.fr-tag= @groupe_gestionnaire.gestionnaires.size

app/components/procedure/card/administrateurs_component/administrateurs_component.html.haml

@@ -1,9 +1,7 @@
 .fr-col-6.fr-col-md-4.fr-col-lg-3
   = link_to admin_procedure_administrateurs_path(@procedure), id: 'administrateurs', class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
-      %div
+      %p.fr-badge.fr-badge--success Validé
-        %span.icon.accept
-        %p.fr-tile-status-accept Validé
       %div
         .line-count.fr-my-1w
           %p.fr-tag= @procedure.administrateurs.size

app/components/procedure/card/annotations_component/annotations_component.html.haml

@@ -6,13 +6,9 @@
           %span.icon.refuse
           %p.fr-tile-status-error À modifier
       - elsif @count == 0
-        %div
+        %p.fr-badge.fr-badge--info À configurer
-          %span.icon.clock
-          %p.fr-tile-status-todo À configurer
       - else
-        %div
+        %p.fr-badge.fr-badge--success Validé
-          %span.icon.accept
-          %p.fr-tile-status-accept Validé
       %div
         .line-count.fr-my-1w
           %p.fr-tag= @count

app/components/procedure/card/api_entreprise_component/api_entreprise_component.html.haml

@@ -2,13 +2,9 @@
   = link_to jeton_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
       - if @procedure.api_entreprise_token.present?
-        %div
+        %p.fr-badge.fr-badge--success Validé
-          %span.icon.accept
-          %p.fr-tile-status-accept Validé
       - else
-        %div
+        %p.fr-badge.fr-badge--info À configurer
-          %span.icon.clock
-          %p.fr-tile-status-todo À configurer
       %div
         %h3.fr-h6.fr-mt-10v= t('.title')
         %p.fr-tile-subtitle Configurer le jeton API entreprise

app/components/procedure/card/api_particulier_component/api_particulier_component.html.haml

@@ -2,13 +2,9 @@
   = link_to admin_procedure_api_particulier_path(@procedure), class: 'fr-tile fr-enlarge-link', id: 'api-particulier' do
     .fr-tile__body.flex.column.align-center.justify-between
       - if @procedure.api_particulier_token.present?
-        %div
+        %p.fr-badge.fr-badge--success= t('.ready')
-          %span.icon.accept
-          %p.fr-tile-status-accept= t('.ready')
       - else
-        %div
+        %p.fr-badge.fr-badge--info= t('.needs_configuration')
-          %span.icon.clock
-          %p.fr-tile-status-todo= t('.needs_configuration')
       %div
         %h3.fr-h6.fr-mt-10v= Procedure.human_attribute_name(:api_particulier_token)
         %p.fr-tile-subtitle= t('.configure_api_particulier_token')

app/components/procedure/card/attestation_component/attestation_component.html.haml

@@ -4,15 +4,11 @@
       - if @procedure.attestation_template&.activated?
         %div
           - if error_messages.present?
-            %span.icon.refuse
+            %p.fr-badge.fr-badge--warning À modifier
-            %p.fr-tile-status-error À modifier
           - else
-            %span.icon.accept
+            %p.fr-badge.fr-badge--success Activée
-            %p.fr-tile-status-accept Activée
       - else
-        %div
+        %p.fr-badge Désactivée
-          %span.icon.clock
-          %p.fr-tile-status-todo Désactivée
       %div
         %h3.fr-h6.fr-mt-10v= t('.title')
         %p.fr-tile-subtitle Délivrance automatique pour les dossiers acceptés

app/components/procedure/card/champs_component/champs_component.html.haml

@@ -6,13 +6,9 @@
           %span.icon.refuse
           %p.fr-tile-status-error À modifier
       - elsif @count == 0
-        %div
+        %p.fr-badge.fr-badge--warning À faire
-          %span.icon.clock
-          %p.fr-tile-status-todo À faire
       - else
-        %div
+        %p.fr-badge.fr-badge--success Validé
-          %span.icon.accept
-          %p.fr-tile-status-accept Validé
       %div
         .line-count.fr-my-1w
           %p.fr-tag= @count

app/components/procedure/card/chorus_component/chorus_component.html.haml

@@ -2,13 +2,9 @@
   = link_to edit_admin_procedure_chorus_path(@procedure), class: 'fr-tile fr-enlarge-link', title: 'Configurer le cadre budgetaire Chorus' do
     .fr-tile__body.flex.column.align-center.justify-between
       - if !@procedure.chorus_configuration.complete?
-        %div
+        %p.fr-badge.fr-badge--warning À compléter
-          %span.icon.clock
-          %p.fr-tile-status-todo À compléter
       - else
-        %div
+        %p.fr-badge.fr-badge--success Configuré
-          %span.icon.accept
-          %p.fr-tile-status-accept Configuré
       %div
         %h3.fr-h6.fr-mt-10v
           Connecteur Chorus

app/components/procedure/card/dossier_submitted_message_component/dossier_submitted_message_component.html.haml

@@ -2,13 +2,9 @@
   = link_to edit_admin_procedure_dossier_submitted_message_path(@procedure), class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
       - if @procedure.active_dossier_submitted_message.present?
-        %div
+        %p.fr-badge.fr-badge--success Validé
-          %span.icon.accept
-          %p.fr-tile-status-accept Validé
       - else
-        %div
+        %p.fr-badge.fr-badge--info À configurer
-          %span.icon.clock
-          %p.fr-tile-status-todo À configurer
       %div
         %h3.fr-h6.fr-mt-10v= t('.title')
         %p.fr-tile-subtitle Orienter l'usager suite à l'envoi de son dossier

app/components/procedure/card/emails_component/emails_component.html.haml

@@ -3,14 +3,11 @@
     .fr-tile__body.flex.column.align-center.justify-between
       %div
         - if error_messages.present?
-          %span.icon.refuse
+          %p.fr-badge.fr-badge--warning À modifier
-          %p.fr-tile-status-error À modifier
         - elsif fully_customized?
-          %span.icon.accept
+          %p.fr-badge.fr-badge--success Validé
-          %p.fr-tile-status-todo Validé
         - else
-          %span.icon.clock
+          %p.fr-badge.fr-badge--info À configurer
-          %p.fr-tile-status-todo À configurer
       %div
         .line-count.fr-my-1w
           %p.fr-tag= customized_progress

app/components/procedure/card/experts_component/experts_component.html.haml

@@ -1,9 +1,7 @@
 .fr-col-6.fr-col-md-4.fr-col-lg-3
   = link_to admin_procedure_experts_path(@procedure), class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
-      %div
+      %p.fr-badge.fr-badge--info À configurer
-        %span.icon.preview
-        %p.fr-tile-status-todo À configurer
       %div
         %h3.fr-h6.fr-mt-10v= t('.title')
         %p.fr-tile-subtitle Gérer les avis des experts invités

app/components/procedure/card/instructeurs_component/instructeurs_component.html.haml

@@ -2,13 +2,9 @@
   = link_to admin_procedure_groupe_instructeurs_path(@procedure), id: 'groupe-instructeurs', class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
       - if @procedure.routing_enabled? || @procedure.instructeurs.present?
-        %div
+        %p.fr-badge.fr-badge--success Validé
-          %span.icon.accept
-          %p.fr-tile-status-accept Validé
       - else
-        %div
+        %p.fr-badge.fr-badge--warning À faire
-          %span.icon.clock
-          %p.fr-tile-status-todo À faire
       %div
         .line-count.fr-my-1w
           - if @procedure.routing_enabled?

app/components/procedure/card/modifications_component/modifications_component.html.haml

@@ -1,12 +1,11 @@
 .fr-col-6.fr-col-md-4.fr-col-lg-3
   = link_to modifications_admin_procedure_path(@procedure), id: 'modifications', class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
+      %p.fr-badge.fr-badge--success Activée
       %div
-        %span.icon.accept
+        .line-count.fr-my-1w
-        %p.fr-tile-status-accept Activée
-      %div
-        %h3.fr-h6.fr-mt-10v
           %p.fr-tag= @procedure.revisions_count
+        %h3.fr-h6
           = t('.title', count: @procedure.revisions_count)
 
         %p.fr-tile-subtitle Historique des modifications du formulaire

app/components/procedure/card/mon_avis_component/mon_avis_component.html.haml

@@ -2,13 +2,9 @@
   = link_to monavis_admin_procedure_path(@procedure), class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
       - if @procedure.monavis_embed.present?
-        %div
+        %p.fr-badge.fr-badge--success Validé
-          %span.icon.accept
-          %p.fr-tile-status-accept Validé
       - else
-        %div
+        %p.fr-badge.fr-badge--info À configurer
-          %span.icon.clock
-          %p.fr-tile-status-todo À configurer
       %div
         %h3.fr-h6.fr-mt-10v= t('.title')
         %p.fr-tile-subtitle Avis des usagers sur votre démarche

app/components/procedure/card/presentation_component/presentation_component.html.haml

@@ -1,9 +1,7 @@
 .fr-col-6.fr-col-md-4.fr-col-lg-3
   = link_to edit_admin_procedure_path(@procedure), id: 'presentation', class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
-      %div
+      %p.fr-badge.fr-badge--success Validé
-        %span.icon.accept
-        %p.fr-tile-status-accept Validé
       %div
         %h3.fr-h6.fr-mt-10v= t('.title')
         %p.fr-tile-subtitle Logo, nom, description

app/components/procedure/card/service_component/service_component.html.haml

@@ -2,13 +2,9 @@
   = link_to service_link, class: 'fr-tile fr-enlarge-link', id: 'service' do
     .fr-tile__body.flex.column.align-center.justify-between
       - if @procedure.service_id.present?
-        %div
+        %p.fr-badge.fr-badge--success Validé
-          %span.icon.accept
-          %p.fr-tile-status-accept Validé
       - else
-        %div
+        %p.fr-badge.fr-badge--warning À faire
-          %span.icon.clock
-          %p.fr-tile-status-todo À faire
       %div
         %h3.fr-h6.fr-mt-10v= t('.title')
         %p.fr-tile-subtitle

app/components/procedure/card/sva_svr_component/sva_svr_component.html.haml

@@ -2,13 +2,9 @@
   = link_to edit_admin_procedure_sva_svr_path(@procedure), class: 'fr-tile fr-enlarge-link', id: 'sva' do
     .fr-tile__body.flex.column.align-center.justify-between
       - if @procedure.sva_svr_enabled?
-        %div
+        %p.fr-badge.fr-badge--success= t('.ready')
-          %span.icon.accept
-          %p.fr-tile-status-accept= t('.ready')
       - else
-        %div
+        %p.fr-badge.fr-badge--info= t('.needs_configuration')
-          %span.icon.clock
-          %p.fr-tile-status-todo= t('.needs_configuration')
       %h3.fr-h6.fr-mt-10v= t('.title')
       %p.fr-tile-subtitle= t('.subtitle')
       %p.fr-btn.fr-btn--tertiary= t('views.shared.actions.edit')

app/components/procedure/card/zones_component/zones_component.html.haml

@@ -2,13 +2,9 @@
   = link_to zones_admin_procedure_path(@procedure), id: 'zones', class: 'fr-tile fr-enlarge-link' do
     .fr-tile__body.flex.column.align-center.justify-between
       - if @procedure.zones.size >= 1
-        %div
+        %p.fr-badge.fr-badge--success Validé
-          %span.icon.accept
-          %p.fr-tile-status-accept Validé
       - else
-        %div
+        %p.fr-badge.fr-badge--info À faire
-          %span.icon.clock
-          %p.fr-tile-status-todo À faire
       %div
         %h3.fr-h6.fr-mt-10v= t('.title')
         %p.fr-tile-subtitle= t('.subtitle')

app/components/profile/api_token_component/api_token_component.html.haml

@@ -51,7 +51,7 @@
       = f.button type: :submit, class: "fr-btn fr-btn--secondary" do
         = t('.add')
 
-  = form_for @api_token, namespace: dom_id(@api_token, :write_access), html: { class: 'form form-ds-fr-white mb-3', data: { turbo: true, controller: 'autosubmit' } } do |f|
+  = form_for @api_token, namespace: dom_id(@api_token, :write_access), html: { class: 'form mb-3', data: { turbo: true, controller: 'autosubmit' } } do |f|
     = f.label :write_access do
       = t('.token_procedures')
     %label.toggle-switch.no-margin

app/components/types_de_champ_editor/champ_component/champ_component.html.haml

@@ -1,7 +1,7 @@
 %li.type-de-champ.flex.column.justify-start{ html_options }
   .type-de-champ-container
     .flex.justify-between.section.head.hr
-      .handle.small.icon-only.icon.move-handle{ title: "Déplacer le champ vers le haut ou vers le bas" }
+      .handle.fr-icon-drag-move-2-line{ title: "Déplacer le champ vers le haut ou vers le bas" }
 
       - if coordinate.used_by_routing_rules?
         .flex.align-center

app/javascript/entrypoints/main.css

@@ -1,5 +1,6 @@
 @import '@gouvfr/dsfr/dist/core/core.css';
 @import '@gouvfr/dsfr/dist/utility/utility.css';
+@import '@gouvfr/dsfr/dist/scheme/scheme.css';
 
 /* These base components may be dependencies of other components */
 @import '@gouvfr/dsfr/dist/component/link/link.css';
@@ -36,3 +37,4 @@
 @import '@gouvfr/dsfr/dist/component/skiplink/skiplink.css';
 @import '@gouvfr/dsfr/dist/component/password/password.css';
 @import '@gouvfr/dsfr/dist/component/accordion/accordion.css';
+@import '@gouvfr/dsfr/dist/component/tab/tab.css';

app/views/administrateurs/attestation_templates/_informations.html.haml

@@ -23,13 +23,13 @@
         .description
           = tag[:description]
 
-%h3.header-subsection Logo de l'attestation
+%h3.fr-h5 Logo de l'attestation
 %p.fr-text--sm.fr-text-mention--grey.fr-mb-0
   Dimensions conseillées : au minimum 500px de largeur ou de hauteur.
 = render Attachment::EditComponent.new(attached_file: @attestation_template.logo, direct_upload: false)
 
 
-%h3.header-subsection.fr-mt-5w Tampon de l'attestation
+%h3.fr-h5.fr-mt-5w Tampon de l'attestation
 %p.fr-text--sm.fr-text-mention--grey.fr-mb-0
   Dimensions conseillées : au minimum 500px de largeur ou de hauteur.
 = render Attachment::EditComponent.new(attached_file: @attestation_template.signature, direct_upload: false)

app/views/administrateurs/attestation_templates/edit.html.haml

@@ -10,7 +10,7 @@
     = render NestedForms::FormOwnerComponent.new
     = form_for @attestation_template,
       url: admin_procedure_attestation_template_path(@procedure),
-      html: { multipart: true, class: 'form form-ds-fr-white procedure-form__column--form' } do |f|
+      html: { multipart: true, class: 'form procedure-form__column--form fr-background-alt--blue-france' } do |f|
 
       %h1.page-title
         Délivrance d’attestation

app/views/administrateurs/dossier_submitted_messages/_informations.html.haml

@@ -1,3 +1,4 @@
-= f.label :message_on_submit_by_usager do
+.fr-input-group
+  = f.label :message_on_submit_by_usager do
     Message affiché après l'envoi du dossier
-= f.text_area :message_on_submit_by_usager, placeholder: "Merci, votre dossier sera traité dans les plus brefs délais"
+  = f.text_area :message_on_submit_by_usager, placeholder: "Merci, votre dossier sera traité dans les plus brefs délais", class: 'fr-input'

app/views/administrateurs/dossier_submitted_messages/edit.html.haml

@@ -9,7 +9,7 @@
   .procedure-form__columns.container
     = form_for @dossier_submitted_message,
       url: url_for({ controller: 'administrateurs/dossier_submitted_messages', action: :update, id: @procedure.id }),
-      html: { class: 'form procedure-form__column--form' } do |f|
+      html: { class: 'form procedure-form__column--form fr-background-alt--blue-france' } do |f|
 
       %h1.page-title
         Fin du dépot
@@ -18,10 +18,9 @@
 
       = render partial: 'administrateurs/dossier_submitted_messages/informations', locals: { f: f }
 
-
       .procedure-form__actions
         .actions-left
-          = f.submit 'Enregistrer', class: 'button primary send'
+          = f.submit 'Enregistrer', class: 'fr-btn send'
 
     .procedure-form__column--preview
       %h3

app/views/administrateurs/jeton_particulier/show.html.haml

@@ -11,7 +11,9 @@
 .container
   %h1
   = form_with model: @procedure, url: admin_procedure_api_particulier_jeton_path, local: true, html: { class: 'form' } do |f|
-    %p.explication
+    = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+      - c.body do
+        %p
           = t('.api_particulier_description_html', app_name: APPLICATION_NAME)
 
     = f.label :api_particulier_token
@@ -19,4 +21,4 @@
       %p= t('.token_description')
     = f.password_field :api_particulier_token, class: 'form-control', required: :required
     .text-right
-      = f.button t('views.shared.actions.save'), class: 'button primary send'
+      = f.button t('views.shared.actions.save'), class: 'fr-btn send'

app/views/administrateurs/mail_templates/edit.html.haml

@@ -14,7 +14,7 @@
     = form_for @mail_template,
       url: admin_procedure_mail_template_path(@procedure, @mail_template.class.const_get(:SLUG)),
       method: :put,
-      html: { class: 'form form-ds-fr-white procedure-form__column--form' } do |f|
+      html: { class: 'form form-ds-fr-white procedure-form__column--form fr-background-alt--blue-france' } do |f|
 
       %h1.page-title= @mail_template.class.const_get(:DISPLAYED_NAME)
       = render partial: 'form', locals: { f: f, tags: @mail_template.tags }

app/views/administrateurs/procedures/_monavis.html.haml

@@ -1,4 +1,6 @@
-%p.explication
+= render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+  - c.body do
+    %p
       Proposez aux usagers de donner un avis sur votre démarche. Pour ce faire, vous devez précédemment aller sur «
       %a{ :href => "https://monavis.numerique.gouv.fr" } https://monavis.numerique.gouv.fr
       », créer un compte, et référencer la démarche que vous venez de publier.

app/views/administrateurs/procedures/apercu.html.haml

@@ -2,8 +2,8 @@
   .fr-container
     %h1.page-title Prévisualisation de la démarche « #{@dossier.procedure.libelle} »
 
-    %nav.tabs
+    %nav.fr-tabs
-      %ul
+      %ul.fr-tabs__list{ role: 'tablist' }
         = tab_item('le dossier',
           apercu_admin_procedure_path(@dossier.procedure, tab: 'dossier'),
           active: @tab == 'dossier')

app/views/administrateurs/procedures/index.html.haml

@@ -5,8 +5,8 @@
     = link_to "Nouvelle Démarche", new_from_existing_admin_procedures_path, id: 'new-procedure', class: 'fr-btn'
   .fr-container
 
-    %nav.tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
+    %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
-      %ul
+      %ul.fr-tabs__list{ role: 'tablist' }
         = tab_item(t('pluralize.published', count: @procedures_publiees_count), admin_procedures_path(statut: 'publiees'), active: @statut == 'publiees', badge: number_with_html_delimiter(@procedures_publiees_count))
         = tab_item('En test', admin_procedures_path(statut: 'brouillons'), active: @statut == 'brouillons', badge: number_with_html_delimiter(@procedures_draft_count))
         = tab_item(t('pluralize.closed', count: @procedures_closed_count), admin_procedures_path(statut: 'archivees'), active: @statut == 'archivees', badge: number_with_html_delimiter(@procedures_closed_count))

app/views/administrateurs/procedures/jeton.html.haml

@@ -10,7 +10,9 @@
 .container
   %h1
   = form_with model: @procedure, url: url_for({ controller: 'administrateurs/procedures', action: :update_jeton }) do |f|
-    %p.explication
+    = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+      - c.body do
+        %p
           Démarches Simplifiées utilise
           = link_to 'API Entreprise', "https://entreprise.api.gouv.fr/"
           qui permet de récupérer les informations administratives des entreprises et des associations.

app/views/administrateurs/sources_particulier/show.html.haml

@@ -9,13 +9,16 @@
 
 .container#sources-particulier-form.mb-2
   = form_with model: @procedure, url: admin_procedure_api_particulier_sources_path, local: true, html: { class: 'form' } do |f|
-    .explication= t('.explication_html')
+    = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+      - c.body do
+        %p
+          = t('.explication_html')
 
     - @available_sources.each do |provider_key, scopes|
       %h2.header-section= t("api_particulier.providers.#{provider_key}.libelle")
 
       - scopes.each do |scope_key, sources|
-        %h3.explication-libelle= t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.libelle")
+        %h3= t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.libelle")
         %ul.procedure-admin-api-particulier-sources{ id: "#{provider_key}-#{scope_key}" }
           - sources.each do |source_key, enabled_hash|
             - enabled = (@procedure.api_particulier_sources.dig(provider_key, scope_key)&.include?(source_key)).present?
@@ -25,4 +28,4 @@
                 #{t("api_particulier.providers.#{provider_key}.scopes.#{scope_key}.#{source_key}")}
 
     .text-right
-      = f.button t('views.shared.actions.save'), class: 'button primary send'
+      = f.button t('views.shared.actions.save'), class: 'fr-btn send'

app/views/agent_connect/agent/index.html.haml

@@ -4,7 +4,7 @@
   .fr-container
     .fr-grid-row.fr-grid-row--gutters
 
-      .fr-col-lg.fr-p-6w.fr-background-alt--grey
+      .fr-col-lg.fr-p-6w.fr-background-alt--blue-france
 
         #session-new.auth-form.sign-in-form
           = form_for User.new, url: user_session_path do |f|
@@ -43,7 +43,7 @@
               .fr-fieldset__element
                 = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password' })
 
-                %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "link"
+                %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "fr-link"
 
               .fr-fieldset__element
                 .auth-options

app/views/experts/avis/_header.html.haml

@@ -18,8 +18,8 @@
             %span.fr-download__detail
               ZIP
 
-    %nav.tabs
+    %nav.fr-tabs
-      %ul
+      %ul.fr-tabs__list{ role: 'tablist' }
         = dynamic_tab_item('Demande', expert_avis_path(avis.procedure, avis))
         = dynamic_tab_item('Avis', instruction_expert_avis_path(avis.procedure, avis), notification: avis.answer.blank?)
         - if avis.procedure.allow_expert_messaging

app/views/experts/avis/procedure.html.haml

@@ -11,8 +11,8 @@
       .procedure-header
         %h1.fr-h3= procedure_libelle @procedure
 
-        %nav.tabs
+        %nav.fr-tabs
-          %ul
+          %ul.fr-tabs__list{ role: 'tablist' }
             = tab_item('avis à donner',
               procedure_expert_avis_index_path(statut: Instructeurs::AvisController::A_DONNER_STATUS),
               active: @statut == Instructeurs::AvisController::A_DONNER_STATUS,

app/views/instructeurs/dossiers/_header_bottom.html.haml

@@ -1,6 +1,6 @@
 #header-bottom.fr-container
-  %nav.tabs
+  %nav.fr-tabs
-    %ul
+    %ul.fr-tabs__list{ role: 'tablist' }
       - notifications_summary = current_instructeur.notifications_for_dossier(dossier)
 
       = dynamic_tab_item(t('views.instructeurs.dossiers.tab_steps.request'),

app/views/instructeurs/procedures/_tabs.html.haml

@@ -1,5 +1,5 @@
-%nav.tabs.mt-3
+%nav.fr-tabs.mt-3
-  %ul
+  %ul.fr-tabs__list{ role: 'tablist' }
     = tab_item(t(tab_i18n_key_from_status('a-suivre')),
       instructeur_procedure_path(procedure, statut: 'a-suivre'),
       active: statut == 'a-suivre',

app/views/instructeurs/procedures/email_notifications.html.haml

@@ -9,7 +9,9 @@
     = t('.title')
 
   = form_for @assign_to, url: update_email_notifications_instructeur_procedure_path(@procedure), html: { class: 'form' } do |form|
-    .explication
+    = render Dsfr::AlertComponent.new(state: :info, size: :sm, extra_class_names: 'fr-mb-2w') do |c|
+      - c.body do
+        %p
           = t('.subtitle')
 
     = form.label :email_notification, t('.for_each_file_submitted.title')

app/views/instructeurs/procedures/index.html.haml

@@ -5,8 +5,8 @@
     %h1.fr-h3.fr-mb-0 Démarches
     = render partial: 'instructeurs/procedures/synthese', locals: { procedures: @procedures, all_dossiers_counts: @all_dossiers_counts }
 
-    %nav.tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
+    %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
-      %ul
+      %ul.fr-tabs__list{ role: 'tablist' }
         = tab_item(t('pluralize.en_cours', count: @procedures_en_cours_count), instructeur_procedures_path(statut: 'en-cours'), active: @statut == 'en-cours', badge: number_with_html_delimiter(@procedures_en_cours_count))
         = tab_item(t('pluralize.en_test', count: @procedures_draft_count), instructeur_procedures_path(statut: 'brouillons'), active: @statut == 'brouillons', badge: number_with_html_delimiter(@procedures_draft_count))
         = tab_item(t('pluralize.closed', count: @procedures_closes_count), instructeur_procedures_path(statut: 'archivees'), active: @statut == 'archivees', badge: number_with_html_delimiter(@procedures_closes_count))

app/views/layouts/_display_theme_modal.html.haml

@@ -0,0 +1,41 @@
+%dialog#fr-theme-modal.fr-modal{ "aria-labelledby" => "fr-theme-modal-title", role: "dialog" }
+  .fr-container.fr-container--fluid.fr-container-md
+    .fr-grid-row.fr-grid-row--center
+      .fr-col-12.fr-col-md-6.fr-col-lg-4
+        .fr-modal__body
+          .fr-modal__header
+            %button#button-5622.fr-btn--close.fr-btn{ "aria-controls" => "fr-theme-modal", title: "Fermer" } Fermer
+          .fr-modal__content
+            %h1#fr-theme-modal-title.fr-modal__title Paramètres d’affichage
+            #fr-display.fr-display
+              %fieldset#display-fieldset.fr-fieldset
+                %legend#display-fieldset-legend.fr-fieldset__legend--regular.fr-fieldset__legend Choisissez un thème pour personnaliser l’apparence du site.
+                .fr-fieldset__element
+                  .fr-radio-group.fr-radio-rich
+                    %input#fr-radios-theme-light{ name: "fr-radios-theme", type: "radio", value: "light" }/
+                    %label.fr-label{ for: "fr-radios-theme-light" } Thème clair
+                    .fr-radio-rich__img
+                      %svg.fr-artwork{ aria_hidden: "true", viewBox: "0 0 80 80", width: "80px", height: "80px" }
+                        %use.fr-artwork-decorative{ href: image_path("pictograms/environment/sun.svg#artwork-decorative") }
+                        %use.fr-artwork-minor{ href: image_path("pictograms/environment/sun.svg#artwork-minor") }
+                        %use.fr-artwork-major{ href: image_path("pictograms/environment/sun.svg#artwork-major") }
+                .fr-fieldset__element
+                  .fr-radio-group.fr-radio-rich
+                    %input#fr-radios-theme-dark{ name: "fr-radios-theme", type: "radio", value: "dark" }/
+                    %label.fr-label{ for: "fr-radios-theme-dark" } Thème sombre
+                    .fr-radio-rich__img
+                      %svg.fr-artwork{ "aria-hidden" => "true", height: "80px", viewbox: "0 0 80 80", width: "80px" }
+                        %use.fr-artwork-decorative{ href: image_path("pictograms/environment/moon.svg#artwork-decorative") }
+                        %use.fr-artwork-minor{ href: image_path("pictograms/environment/moon.svg#artwork-minor") }
+                        %use.fr-artwork-major{ href: image_path("pictograms/environment/moon.svg#artwork-major") }
+                .fr-fieldset__element
+                  .fr-radio-group.fr-radio-rich
+                    %input#fr-radios-theme-system{ name: "fr-radios-theme", type: "radio", value: "system" }/
+                    %label.fr-label{ for: "fr-radios-theme-system" }
+                      Système
+                      %span.fr-hint-text Utilise les paramètres système
+                    .fr-radio-rich__img
+                      %svg.fr-artwork{ "aria-hidden" => "true", height: "80px", viewbox: "0 0 80 80", width: "80px" }
+                        %use.fr-artwork-decorative{ href: image_path("pictograms/system/system.svg#artwork-decorative") }
+                        %use.fr-artwork-minor{ href: image_path("pictograms/system/system.svg#artwork-minor") }
+                        %use.fr-artwork-major{ href: image_path("pictograms/system/system.svg#artwork-major") }

app/views/layouts/application.html.haml

@@ -1,5 +1,5 @@
 !!! 5
-%html{ lang: html_lang, class: yield(:root_class) }
+%html{ lang: html_lang, data: { fr_scheme: 'system' }, class: yield(:root_class) }
   %head
     %meta{ "http-equiv": "Content-Type", content: "text/html; charset=UTF-8" }
     %meta{ "http-equiv": "X-UA-Compatible", content: "IE=edge" }
@@ -38,6 +38,8 @@
 
   %body{ { id: content_for(:page_id), class: browser.platform.ios? ? 'ios' : nil, data: { controller: 'turbo number-input' } }.compact }
     = render partial: 'layouts/skiplinks'
+    = render partial: 'layouts/display_theme_modal'
+
     .page-wrapper
       - if feature_enabled?(:team_on_strike)
         = render partial: 'layouts/strike_banner'

app/views/manager/procedures/show.html.erb

@@ -89,7 +89,7 @@ as well as a link to its edit page.
           <% end %>
         <% end %>
         <% if attribute.name == 'tags' %>
-          <%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form mt-1' }  do %>
+          <%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form fr-background-alt--blue-france mt-1' }  do %>
             <%=  hidden_field_tag 'procedure[tags]', nil %>
             <%=  react_component("ComboMultiple",
                   options: Procedure.tags,

app/views/root/_testimonials.html.haml

@@ -1,4 +1,4 @@
-.landing-panel
+.fr-py-6w
   .container
     %h2.center.fr-mb-4w Ce que les utilisateurs pensent du service
 

app/views/root/_users.html.haml

@@ -1,4 +1,4 @@
-.landing-panel.users-panel
+.fr-py-6w
   .container
     %h2.center.fr-mb-4w Ils utilisent déjà #{APPLICATION_NAME}
 

app/views/root/administration.html.haml

@@ -2,18 +2,18 @@
   = render partial: "root/footer"
 
 .landing
-  .landing-panel.hero-panel
+  .fr-py-6w
     .container
       .hero-wrapper
         .hero-text
-          %h1.hero-tagline
+          %h1.fr-mb-0
-            %em.hero-tagline-em Dématérialisez et simplifiez
+            Dématérialisez et simplifiez
             vos démarches administratives
 
         .hero-illustration
           %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: "" }
 
-  .landing-panel.more-info
+  .fr-py-6w.fr-background-alt--blue-france
     .container
       .role-panel-wrapper.role-administrations-panel
         .role-panel-70
@@ -26,7 +26,7 @@
         .role-panel-30.role-more-info-image.fr-mt-2w
           %img.role-image{ :src => image_url("landing/roles/usagers.svg"), alt: "" }
 
-  .landing-panel.usagers-panel
+  .fr-py-6w
     .container
       .role-panel-wrapper.role-administrations-panel
         .role-panel-30.role-administrations-image
@@ -44,9 +44,7 @@
           %br
 
 
-
+  .fr-py-6w.fr-background-flat--blue-france.fr-text-inverted--blue-france
-
-  .landing-panel.features-panel
     .container
       %ul.features
         %li.feature
@@ -73,7 +71,7 @@
   = render partial: "root/testimonials" if LANDING_TESTIMONIALS_ENABLED
 
   - cache "numbers-panel", :expires_in => 3.hours do
-    .landing-panel.numbers-panel
+    .fr-py-6w.fr-background-alt--blue-france
       .container
         %h2.center.fr-mb-4w #{APPLICATION_NAME} en chiffres
         %ul.numbers
@@ -113,11 +111,11 @@
           - c.with_footer_button do
             = link_to("Inscription à notre prochain webinaire", INSCRIPTION_WEBINAIRE_URL, class: "fr-btn", **external_link_attributes)
 
-  .landing-panel.cta-panel
+  .fr-py-6w.fr-background-alt--blue-france
     .container
       .cta-panel-wrapper
         %div
-          %h1.cta-panel-title Une question, un problème ?
+          %h2 Une question, un problème ?
-          %p.cta-panel-explanation Consultez notre FAQ
+          %p.fr-h5 Consultez notre FAQ
         %div
           = link_to "Voir la FAQ", t("links.common.faq.url"), class: "fr-btn fr-btn--lg", **external_link_attributes

app/views/root/landing.html.haml

@@ -3,17 +3,17 @@
 - content_for :title, t(".promise")
 
 .landing
-  .landing-panel.hero-panel
+  .fr-py-6w
     .container
       .hero-wrapper
         .hero-text
-          %h1.hero-tagline
+          %h1.fr-mb-0
-            %em.hero-tagline-em= t(".promise")
+            = t(".promise")
 
         .hero-illustration
           %img{ :src => image_url("landing/hero/dematerialiser.svg"), alt: '', width: 499, height: 280, loading: 'lazy' }
 
-  .landing-panel.usagers-panel
+  .fr-background-alt--blue-france.fr-py-6w
     .container
       .role-panel-wrapper
         .role-panel-30.role-usagers-image
@@ -27,7 +27,7 @@
           = link_to t("views.users.sessions.new.connection"), new_user_session_path, class: "fr-btn fr-btn--secondary fr-btn--lg"
 
   - cache [I18n.locale, "numbers-panel"], expires_in: 3.hours do
-    .landing-panel
+    .fr-py-6w
       .container
         %h2.center.fr-mb-4w= t(".our_numbers", name: APPLICATION_NAME)
         %ul.numbers
@@ -44,28 +44,20 @@
               = "#{number_with_delimiter(50)} %"
             .number-label.number-label-third= t(".numbers.processing_time")
 
-  .landing-panel.cta-panel
+  .fr-background-alt--blue-france.fr-py-6w
     .container
       .cta-panel-wrapper
         %div
-          %h2.cta-panel-title= t(".question")
+          %h2= t(".question")
-          %p.cta-panel-explanation= t(".answer_in_faq")
+          %p.fr-h5= t(".answer_in_faq")
         %div
           = link_to t(".online_help"), t("links.common.faq.url"), class: "fr-btn fr-btn--lg", title: new_tab_suffix(t(".online_help")), **external_link_attributes
-        -#   We temporarily disable the link to the contact page on the homepage
-        -#   %p.cta-panel-explanation Notre équipe est disponible pour vous renseigner et vous aider
-        -# %div
-        -#   = contact_link "Contactez-nous",
-        -#     tags: 'landing',
-        -#     class: "cta-panel-button-white",
-        -#     target: "_blank",
-        -#     rel: "noopener noreferrer"
 
-  .landing-panel
+  .fr-py-6w
     .container
       .cta-panel-wrapper
         %div
-          %h2.fr-h4= t(".administration_dematerialize")
+          %h2= t(".administration_dematerialize")
-          %p.cta-panel-explanation.grey= t(".administration_fill_online")
+          %p.fr-h5= t(".administration_fill_online")
         %div
           = link_to t(".administration_discover"), administration_path, class: "fr-btn fr-btn--lg"

app/views/root/patron.html.haml

@@ -35,7 +35,6 @@
     %span.icon.retry
     %span.icon.download
     %span.icon.download-white
-    %span.icon.move-handle
     %span.icon.frown
     %span.icon.meh
     %span.icon.smile
@@ -50,7 +49,7 @@
           %label Mot de passe
           %input{ type: "password", value: "12345678" }
 
-        %h3.header-subsection Bouton radio verticaux
+        %h3.fr-h5 Bouton radio verticaux
         .radios.vertical
           = f.label :archived, value: true do
             = f.radio_button :archived, true
@@ -61,7 +60,7 @@
             Option B
             %p.notice Une autre option, pas mal non plus.
 
-        %h3.header-subsection Interrupteur
+        %h3.fr-h5 Interrupteur
         %label.toggle-switch
           = f.check_box :archived, class: 'toggle-switch-checkbox'
           %span.toggle-switch-control.round
@@ -231,8 +230,8 @@
   .sub-header
     .container
       Titre
-      %nav.tabs
+      %nav.fr-tabs
-        %ul
+        %ul.fr-tabs__list{ role: 'tablist' }
           = tab_item("Onglet actif", "#", active: true)
           = tab_item("Onglet inactif", "#")
           = tab_item("Onglet avec badge", "#", badge: 2)

app/views/shared/_tab_item.html.haml

@@ -1,7 +1,7 @@
-%li{ class: (active ? 'active' : nil) }
+%li{ class: "relative #{(active ? 'active' : nil)}", role: 'presentation' }
   - if notification
     %span.notifications{ 'aria-label': 'notifications' }
-  = link_to(url, 'aria-current': active ? 'page' : nil) do
+  = link_to(url, 'aria-selected': active ? true : nil, class: 'fr-tabs__tab', role: 'tab' ) do
     - if badge.present?
-      %span.badge= badge
+      %span.badge.fr-mr-1w= badge
     = label

app/views/super_admins/sessions/new.html.haml

@@ -17,6 +17,6 @@
               = render Dsfr::InputComponent.new(form: f, attribute: :otp_attempt, input_type: :number_field, opts: { inputmode: :numeric }, required: false)
 
           .fr-fieldset__element
-            %p= link_to "Mot de passe oublié ou réinitialisation 2FA ?", new_super_admin_password_path, class: "link"
+            %p= link_to "Mot de passe oublié ou réinitialisation 2FA ?", new_super_admin_password_path, class: "fr-link"
 
         = f.submit t('views.users.sessions.new.connection'), class: "fr-btn fr-btn--lg"

app/views/users/_general_footer_row.html.haml

@@ -5,3 +5,6 @@
     = link_to t("links.footer.mentions_legales.label"), MENTIONS_LEGALES_URL, title: t("links.footer.mentions_legales.title"), class: "fr-footer__bottom-link", rel: "noopener noreferrer"
   %li.fr-footer__bottom-item
     = link_to t("links.footer.cookies.label"), suivi_path, title: t("links.footer.cookies.title"), class: "fr-footer__bottom-link"
+  %li.fr-footer__bottom-item
+    %button.fr-footer__bottom-link.fr-icon-theme-fill.fr-btn--icon-left{ aria: {controls: "fr-theme-modal" }, data: {'fr-opened': "false" } }
+      = t('links.footer.display_params')

app/views/users/dossiers/index.html.haml

@@ -25,8 +25,8 @@
           = render Dossiers::UserProcedureFilterComponent.new(procedures_for_select: @procedures_for_select)
 
     - if @search_terms.blank?
-      %nav.tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
+      %nav.fr-tabs{ role: 'navigation', 'aria-label': t('views.users.dossiers.secondary_menu') }
-        %ul
+        %ul.fr-tabs__list{ role: 'tablist' }
           - if @user_dossiers.present?
             = tab_item(t('pluralize.en_cours', count: @user_dossiers.count),
               dossiers_path(statut: 'en-cours', procedure_id: params[:procedure_id]),

app/views/users/dossiers/show/_header.html.haml

@@ -21,8 +21,8 @@
             title: t('views.users.dossiers.demande.edit_dossier_title')
         = render(partial: 'users/dossiers/show/print_dossier', locals: { dossier: dossier })
 
-    %nav.tabs
+    %nav.fr-tabs
-      %ul
+      %ul.fr-tabs__list{ role: 'tablist' }
         = dynamic_tab_item(t('views.users.dossiers.show.header.summary'), dossier_path(dossier))
         = dynamic_tab_item(t('views.users.dossiers.show.header.request'), [demande_dossier_path(dossier), modifier_dossier_path(dossier)])
         = dynamic_tab_item(t('views.users.dossiers.show.header.mailbox'), messagerie_dossier_path(dossier))

app/views/users/profil/show.html.haml

@@ -17,6 +17,10 @@
       = link_to 'Refuser la fusion', refuse_merge_path, method: :post, class: 'fr-btn fr-btn--secondary', data: { confirm: "Confirmez-vous le refus ?" }
       = link_to 'Accepter la fusion', accept_merge_path, method: :post, class: 'fr-btn fr-btn--secondary', data: { confirm: "Confirmez-vous la fusion des comptes ?" }
 
+  .card
+    .card-title Choisissez un thème pour personnaliser l’apparence du site
+    = link_to t('links.footer.display_params'),'#', { aria: {controls: "fr-theme-modal" }, data: {'fr-opened': "false" }, class: 'fr-icon-theme-fill fr-link--icon-left fr-link' }
+
   .card
     .card-title= t('.contact')
     %p

app/views/users/sessions/new.html.haml

@@ -20,7 +20,7 @@
       .fr-fieldset__element
         = render Dsfr::InputComponent.new(form: f, attribute: :password, input_type: :password_field, opts: { autocomplete: 'current-password' })
 
-        %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "link"
+        %p= link_to t('views.users.sessions.new.reset_password'), new_user_password_path, class: "fr-link"
 
 
       .fr-fieldset__element

config/initializers/assets.rb

@@ -10,6 +10,7 @@ Rails.application.config.assets.paths << Rails.root.join('node_modules', 'trix',
 Rails.application.config.assets.paths << Rails.root.join('node_modules', 'mapbox-gl', 'dist')
 Rails.application.config.assets.paths << Rails.root.join('node_modules', '@reach', 'combobox')
 Rails.application.config.assets.paths << Rails.root.join('node_modules', '@mapbox', 'mapbox-gl-draw', 'dist')
+Rails.application.config.assets.paths << Rails.root.join('node_modules', '@gouvfr', 'dsfr', 'dist', 'artwork')
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets

config/locales/links.en.yml

@@ -77,3 +77,4 @@ en:
       contact:
         label: Contact
         title: Contact
+      display_params: Display params

config/locales/links.fr.yml

@@ -89,3 +89,4 @@ fr:
       contact:
         label: Nous contacter
         title: Nous contacter
+      display_params: Paramètres d'affichage

spec/system/administrateurs/procedure_attestation_template_spec.rb

@@ -25,7 +25,8 @@ describe 'As an administrateur, I want to manage the procedure’s attestation',
     scenario do
       visit admin_procedure_path(procedure)
       # start with no attestation
-      find_attestation_card(with_nested_selector: ".icon.clock")
+      expect(page).to have_content('Désactivée')
+      find_attestation_card(with_nested_selector: ".fr-badge")
 
       # now process to enable attestation
       find_attestation_card.click
@@ -38,7 +39,8 @@ describe 'As an administrateur, I want to manage the procedure’s attestation',
 
       # check attestation
       visit admin_procedure_path(procedure)
-      find_attestation_card(with_nested_selector: ".icon.accept")
+      expect(page).to have_content('Activée')
+      find_attestation_card(with_nested_selector: ".fr-badge--success")
 
       # publish procedure
       # click CTA for publication screen
@@ -55,7 +57,8 @@ describe 'As an administrateur, I want to manage the procedure’s attestation',
 
       # check attestation is now disabled
       visit admin_procedure_path(procedure)
-      find_attestation_card(with_nested_selector: ".icon.clock")
+      expect(page).to have_content('Désactivée')
+      find_attestation_card(with_nested_selector: ".fr-badge")
     end
   end
 end

spec/system/experts/expert_spec.rb

@@ -72,7 +72,7 @@ describe 'Inviting an expert:' do
 
       click_on '1 avis à donner'
       click_on avis.dossier.user.email
-      within('.tabs') { click_on 'Avis' }
+      within('.fr-tabs') { click_on 'Avis' }
       expect(page).to have_text("Demandeur : #{avis.claimant.email}")
       expect(page).to have_text('Cet avis est confidentiel')
 
@@ -102,7 +102,7 @@ describe 'Inviting an expert:' do
 
       click_on '1 avis à donner'
       click_on avis.dossier.user.email
-      within('.tabs') { click_on 'Avis' }
+      within('.fr-tabs') { click_on 'Avis' }
       expect(page).to have_text("Demandeur : #{avis.claimant.email}")
       expect(page).to have_text('Question ?')
       expect(page).to have_text('Cet avis est confidentiel')
@@ -200,7 +200,7 @@ describe 'Inviting an expert:' do
 
       click_on '1 avis à donner'
       click_on avis_1.dossier.user.email
-      within('.tabs') { click_on 'Avis' }
+      within('.fr-tabs') { click_on 'Avis' }
       expect(page).to have_text("Demandeur : #{avis_1.claimant.email}")
       click_on 'Voir les avis'
       expect(page).to have_text("Vous")
@@ -216,7 +216,7 @@ describe 'Inviting an expert:' do
 
       click_on '1 avis à donner'
       click_on avis_2.dossier.user.email
-      within('.tabs') { click_on 'Avis' }
+      within('.fr-tabs') { click_on 'Avis' }
       expect(page).to have_text("Demandeur : #{avis_2.claimant.email}")
       click_on 'Voir les avis'
       expect(page).to have_text("Vous")

spec/system/routing/rules_full_scenario_spec.rb

@@ -204,14 +204,14 @@ describe 'The routing with rules', js: true do
     ## on the dossiers list
     click_on procedure.libelle
     expect(page).to have_current_path(instructeur_procedure_path(procedure))
-    expect(find('.tabs')).to have_css('span.notifications')
+    expect(find('.fr-tabs')).to have_css('span.notifications')
 
     ## on the dossier itself
     click_on 'suivi'
     click_on litteraire_user.email
     expect(page).to have_current_path(instructeur_dossier_path(procedure, litteraire_user.dossiers.first))
     expect(page).to have_text('Annotations privées')
-    expect(find('.tabs')).to have_css('span.notifications')
+    expect(find('.fr-tabs')).to have_css('span.notifications')
     log_out
 
     # the scientifiques instructeurs should not have a notification

spec/system/users/list_dossiers_spec.rb

@@ -231,7 +231,7 @@ describe 'user access to the list of their dossiers', js: true do
       it "appears in the result list" do
         expect(current_path).to eq(dossiers_path)
         expect(page).to have_content("Résultat de la recherche pour « #{dossier_en_construction.id} »")
-        expect(page).not_to have_css('.tabs')
+        expect(page).not_to have_css('.fr-tabs')
         expect(page).to have_content(dossier_en_construction.id)
       end
     end

spec/views/users/dossiers/index.html.haml_spec.rb

@@ -76,7 +76,7 @@ describe 'users/dossiers/index', type: :view do
     end
 
     it 'n’affiche la barre d’onglets' do
-      expect(rendered).to have_selector('nav.tabs')
+      expect(rendered).to have_selector('nav.fr-tabs')
     end
   end
 
@@ -88,9 +88,9 @@ describe 'users/dossiers/index', type: :view do
     end
 
     it 'affiche la barre d’onglets' do
-      expect(rendered).to have_selector('nav.tabs')
+      expect(rendered).to have_selector('nav.fr-tabs')
-      expect(rendered).to have_selector('nav.tabs li', count: 5)
+      expect(rendered).to have_selector('nav.fr-tabs li', count: 5)
-      expect(rendered).to have_selector('nav.tabs li.active', count: 1)
+      expect(rendered).to have_selector('nav.fr-tabs li.active', count: 1)
     end
   end
 

spec/views/users/dossiers/show/_header.html.haml_spec.rb

@@ -13,7 +13,7 @@ describe 'users/dossiers/show/header', type: :view do
     expect(rendered).to have_text("Dossier nº #{dossier.id}")
     expect(rendered).to have_text("en construction")
 
-    expect(rendered).to have_selector("nav.tabs")
+    expect(rendered).to have_selector("nav.fr-tabs")
     expect(rendered).to have_link("Résumé", href: dossier_path(dossier))
     expect(rendered).to have_link("Demande", href: demande_dossier_path(dossier))
   end