[FEATURE] Utiliser les designs tokens sur Mon Pix (PIX-16698).

#11502
1024pix · Mar 4, 2025 · abc9706 · abc9706
2 parents cc5fd47 + cc3f474
commit abc9706
Show file tree

Hide file tree

Showing 27 changed files with 85 additions and 213 deletions.
diff --git a/mon-pix/app/components/routes/campaigns/profiles-collection/send-profile.hbs b/mon-pix/app/components/routes/campaigns/profiles-collection/send-profile.hbs
@@ -8,9 +8,7 @@
     <p class="send-profile-disabled-share__text">
       {{t "pages.send-profile.disabled-share" htmlSafe=true}}
     </p>
-    <LinkTo @route="authenticated" class="send-profile-disabled-share__back-to-home link">
-      {{t "pages.send-profile.form.continue"}}
-    </LinkTo>
+    <PixButtonLink @route="authenticated" @variant="secondary">{{t "pages.send-profile.form.continue"}}</PixButtonLink>
   </div>
   <div class="send-profile-header__profile send-profile-header__profile--with-border-bottom">
     <HexagonScore

diff --git a/mon-pix/app/styles/app.scss b/mon-pix/app/styles/app.scss
@@ -24,7 +24,6 @@
 @use 'components/certification-joiner' as *;
 @use 'components/certification-banner' as *;
 @use 'components/certification-not-certifiable' as *;
-@use 'components/certification-result' as *;
 @use 'components/certifications-list' as *;
 @use 'components/certifications-list-item' as *;
 @use 'components/certifications/certification-ender' as *;
@@ -172,7 +171,6 @@ of an adaptative/mobile-first approach — refactoring is welcome here */
 @use 'pages/sso-selection' as *;
 @use 'pages/terms-of-service' as *;
 @use 'pages/update-expired-password-form' as *;
-@use 'pages/user-certifications' as *;
 @use 'pages/user-certifications-get' as *;
 @use 'pages/user-trainings' as *;
 @use 'pages/user-tutorials' as *;

diff --git a/mon-pix/app/styles/components/_certification-result.scss b/mon-pix/app/styles/components/_certification-result.scss
diff --git a/mon-pix/app/styles/components/_certifications-list.scss b/mon-pix/app/styles/components/_certifications-list.scss
@@ -1,11 +1,10 @@
 @use 'pix-design-tokens/breakpoints';
+@use 'pix-design-tokens/typography';
 @use 'pix-design-tokens/fonts';
 
 .certifications-list {
   justify-content: space-around;
   color: var(--pix-neutral-800);
-  font-size: 0.625rem;
-  font-family: fonts.$font-open-sans;
   background-color: transparent;
 
   @include breakpoints.device-is('tablet') {

diff --git a/mon-pix/app/styles/components/_challenge-statement.scss b/mon-pix/app/styles/components/_challenge-statement.scss
@@ -10,11 +10,11 @@
 }
 
 .challenge-statement__instruction-section {
+  @extend %pix-body-m;
+
   display: flex;
   justify-content: space-between;
   margin: 20px 20px 16px;
-  font-size: 0.938rem;
-  font-family: fonts.$font-open-sans;
 
   hr {
     border-top: 1px solid var(--pix-neutral-20);

diff --git a/mon-pix/app/styles/components/_checkpoint.scss b/mon-pix/app/styles/components/_checkpoint.scss
@@ -5,7 +5,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-family: fonts.$font-open-sans;
 }
 
 .checkpoint__header {

diff --git a/mon-pix/app/styles/components/_comparison-window.scss b/mon-pix/app/styles/components/_comparison-window.scss
@@ -49,11 +49,10 @@
 
 .comparison-windows-content-body-default-message-container {
   &__default-message-title {
+    @extend %pix-body-m;
+
     margin: 10px 25px 40px;
     color: var(--pix-neutral-900);
-    font-weight: var(--pix-font-medium);
-    font-size: 1.063rem;
-    font-family: fonts.$font-open-sans;
     text-align: center;
 
     @include breakpoints.device-is('desktop') {

diff --git a/mon-pix/app/styles/components/_hexagon-score.scss b/mon-pix/app/styles/components/_hexagon-score.scss
@@ -1,5 +1,6 @@
 @use 'pix-design-tokens/breakpoints';
 @use 'pix-design-tokens/fonts';
+@use 'pix-design-tokens/typography';
 
 .hexagon-score {
   width: 132px;
@@ -21,9 +22,9 @@
 }
 
 @mixin hexagon-score-pix-score {
+  @extend %pix-title-l;
+
   color: var(--pix-neutral-900);
-  font-size: 2.875rem;
-  font-family: fonts.$font-open-sans;
 }
 
 @mixin hexagon-score-pix-total {
@@ -83,9 +84,10 @@
 }
 
 .hexagon-score-information__text {
-  font-size: 1rem;
-  font-family: fonts.$font-open-sans;
+  @extend %pix-body-m;
+
   line-height: 1.6rem;
+  text-align: left;
 
   &--strong {
     font-weight: var(--pix-font-bold);

diff --git a/mon-pix/app/styles/components/_levelup-notif.scss b/mon-pix/app/styles/components/_levelup-notif.scss
@@ -1,5 +1,6 @@
 @use 'pix-design-tokens/breakpoints';
 @use 'pix-design-tokens/fonts';
+@use 'pix-design-tokens/typography';
 
 .levelup {
   position: fixed;
@@ -28,12 +29,11 @@
   }
 
   &__icon-card-level {
+    @extend %pix-title-s;
+
     position: absolute;
     top: 31px;
     left: 45px;
-    font-weight: var(--pix-font-bold);
-    font-size: 1.5rem;
-    font-family: fonts.$font-open-sans;
   }
 
   &__competence {
@@ -69,10 +69,10 @@
 
 .levelup-competence {
   &__level {
+    @extend %pix-body-m;
+
     margin-bottom: 2px;
     font-weight: var(--pix-font-bold);
-    font-size: 1rem;
-    font-family: fonts.$font-open-sans;
     text-transform: uppercase;
 
     @include breakpoints.device-is('mobile') {

diff --git a/mon-pix/app/styles/components/_no-certification-panel.scss b/mon-pix/app/styles/components/_no-certification-panel.scss
@@ -1,14 +1,15 @@
 @use 'pix-design-tokens/breakpoints';
 @use 'pix-design-tokens/fonts';
+@use 'pix-design-tokens/typography';
 
 .no-certification-panel {
+  @extend %pix-body-m;
+
   display: flex;
   align-items: center;
   justify-content: center;
   height: 200px;
   color: var(--pix-neutral-80);
-  font-size: 1.063rem;
-  font-family: fonts.$font-open-sans;
   background-color: var(--pix-neutral-0);
 
   @include breakpoints.device-is('tablet') {

diff --git a/mon-pix/app/styles/components/_rounded-panel.scss b/mon-pix/app/styles/components/_rounded-panel.scss
@@ -1,5 +1,6 @@
 @use 'pix-design-tokens/breakpoints';
 @use 'pix-design-tokens/fonts';
+@use 'pix-design-tokens/typography';
 
 .rounded-panel {
   margin-bottom: 30px;
@@ -121,9 +122,9 @@
   }
 
   &__content--first-title {
+    @extend %pix-title-l;
+
     color: var(--pix-neutral-900);
-    font-size: 1.625rem;
-    font-family: fonts.$font-open-sans;
     line-height: 2.75rem;
     letter-spacing: 0.009rem;
 

diff --git a/mon-pix/app/styles/components/_scorecard-details.scss b/mon-pix/app/styles/components/_scorecard-details.scss
@@ -86,7 +86,7 @@
   }
 
   &__improving-text {
-    margin-top: 4px;
+    margin-top: var(--pix-spacing-2x);
     color: var(--pix-neutral-500);
     font-size: 0.8rem;
     font-family: fonts.$font-roboto;

diff --git a/mon-pix/app/styles/components/_tutorial-panel.scss b/mon-pix/app/styles/components/_tutorial-panel.scss
@@ -52,7 +52,6 @@
 
 .tutorial-panel__hint-content {
   font-size: 1.125rem;
-  font-family: fonts.$font-open-sans;
 
   ul,
   ol {

diff --git a/mon-pix/app/styles/components/_user-certification-hexagon-score.scss b/mon-pix/app/styles/components/_user-certification-hexagon-score.scss
@@ -1,4 +1,5 @@
 @use 'pix-design-tokens/fonts';
+@use 'pix-design-tokens/typography';
 
 .user-certification-hexagon-score {
   position: relative;
@@ -20,19 +21,18 @@
     text-align: center;
 
     &-title {
+      @extend %pix-body-s;
+
       color: var(--pix-neutral-500);
       font-weight: lighter;
-      font-size: 0.8rem;
-      font-family: fonts.$font-roboto;
       letter-spacing: 0.219rem;
       text-transform: uppercase;
     }
 
     &-pix-score {
+      @extend %pix-title-m;
+
       color: var(--pix-neutral-800);
-      font-weight: var(--pix-font-medium);
-      font-size: 2.3rem;
-      font-family: fonts.$font-open-sans;
     }
 
     &-certified {

diff --git a/mon-pix/app/styles/components/_user-certifications-detail-competence.scss b/mon-pix/app/styles/components/_user-certifications-detail-competence.scss
@@ -1,4 +1,5 @@
 @use 'pix-design-tokens/fonts';
+@use 'pix-design-tokens/typography';
 
 .user-certifications-detail-competence {
   margin-bottom: 32px;
@@ -105,9 +106,10 @@
 
 .user-certifications-detail-competence-list-row {
   &__name {
+    @extend %pix-title-xs;
+
     padding: 20px 0 20px 36px;
     color: var(--pix-neutral-800);
-    font-family: fonts.$font-open-sans;
   }
 
   &__level {

diff --git a/mon-pix/app/styles/components/_user-certifications-detail-competences-list.scss b/mon-pix/app/styles/components/_user-certifications-detail-competences-list.scss
@@ -1,13 +1,13 @@
 @use 'pix-design-tokens/fonts';
+@use 'pix-design-tokens/typography';
 
 .user-certifications-detail-competences-list {
   flex-grow: 1;
 
   h2 {
+    @extend %pix-title-xs;
+
     margin-bottom: 8px;
-    font-weight: normal;
-    font-size: 1.125rem;
-    font-family: fonts.$font-open-sans;
 
     span {
       font-size: 0.75rem;

diff --git a/mon-pix/app/styles/components/_user-certifications-detail-result.scss b/mon-pix/app/styles/components/_user-certifications-detail-result.scss
@@ -1,4 +1,5 @@
 @use 'pix-design-tokens/breakpoints';
+@use 'pix-design-tokens/typography';
 @use 'pix-design-tokens/fonts';
 
 .user-certifications-detail-result {
@@ -16,10 +17,9 @@
   }
 
   h2 {
+    @extend %pix-title-xs;
+
     margin-bottom: 8px;
-    font-weight: normal;
-    font-size: 1.125rem;
-    font-family: fonts.$font-open-sans;
   }
 
   .pix-block {
@@ -63,8 +63,8 @@
     }
 
     p {
-      font-weight: var(--pix-font-medium);
-      font-family: fonts.$font-open-sans;
+      @extend %pix-body-s;
+
       line-height: 1.375rem;
     }
   }

diff --git a/mon-pix/app/styles/components/campaign-participation-overview/_card.scss b/mon-pix/app/styles/components/campaign-participation-overview/_card.scss
@@ -52,9 +52,9 @@
   }
 
   &--archived {
-    font-weight: var(--pix-font-normal);
+    @extend %pix-body-s;
+
     font-size: 0.75rem;
-    font-family: fonts.$font-open-sans;
     text-align: center;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,7 +52,6 @@ @@
     .tutorial-panel__hint-content {
       font-size: 1.125rem;
-      font-family: fonts.$font-open-sans;
       ul,
       ol {
@@ Expand Down @@