style(mon-pix): stop using OpenSans font and use design token instead

1024pix · Mar 4, 2025 · cc3f474 · cc3f474
1 parent 2555ff9
commit cc3f474
Show file tree

Hide file tree

Showing 21 changed files with 71 additions and 64 deletions.
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;
   }
 }

diff --git a/mon-pix/app/styles/components/sitemap/_content.scss b/mon-pix/app/styles/components/sitemap/_content.scss
@@ -1,11 +1,13 @@
 @use 'pix-design-tokens/breakpoints';
 @use 'pix-design-tokens/fonts';
+@use 'pix-design-tokens/typography';
 
 .sitemap {
+  @extend %pix-body-m;
+
   display: flex;
   flex-direction: column;
   align-items: center;
-  font-family: fonts.$font-open-sans;
 
   ul {
     margin-right: 10px;

diff --git a/mon-pix/app/styles/components/user-tutorials/_sidebar.scss b/mon-pix/app/styles/components/user-tutorials/_sidebar.scss
@@ -1,17 +1,17 @@
 @use 'pix-design-tokens/fonts';
+@use 'pix-design-tokens/typography';
 
 .tutorials-filters {
 
   .pix-accordions {
 
     &__title {
+      @extend %pix-body-s;
+
       position: relative;
       align-items: center;
       padding-left: 2rem;
       color: var(--pix-neutral-800);
-      font-weight: 500;
-      font-size: 0.875rem;
-      font-family: fonts.$font-open-sans;
       text-align: left;
       text-transform: uppercase;
 

diff --git a/mon-pix/app/styles/globals/_text.scss b/mon-pix/app/styles/globals/_text.scss
@@ -1,4 +1,5 @@
 @use 'pix-design-tokens/breakpoints';
+@use 'pix-design-tokens/typography';
 @use 'pix-design-tokens/fonts';
 
 .score-label {
@@ -9,22 +10,21 @@
 }
 
 .score-value {
+  @extend %pix-title-l;
+
   color: var(--pix-neutral-900);
-  font-size: 2.875rem;
-  font-family: fonts.$font-open-sans;
   line-height: 2.875rem;
 }
 
 @mixin tutorial-panel-title($color) {
+  @extend %pix-title-s;
+
   position: relative;
   z-index: 1;
   margin-bottom: 20px;
   color: var(--pix-neutral-800);
-  font-weight: var(--pix-font-medium);
-  font-size: 1.375rem;
 
   // XXX Inspired from https://codepen.io/ericrasch/pen/Irlpm
-  font-family: fonts.$font-open-sans;
   text-align: center;
 
   &::before {
@@ -50,7 +50,6 @@
   }
 
   @include breakpoints.device-is('desktop') {
-    font-size: 1.375rem;
     line-height: 26px;
   }
 }

diff --git a/mon-pix/app/styles/pages/_campaign-tutorial.scss b/mon-pix/app/styles/pages/_campaign-tutorial.scss
@@ -1,4 +1,5 @@
 @use 'pix-design-tokens/breakpoints';
+@use 'pix-design-tokens/typography';
 @use 'pix-design-tokens/fonts';
 @use 'pix-design-tokens/colors';
 
@@ -23,10 +24,9 @@
   }
 
   &__title {
+    @extend %pix-title-xs;
+
     color: var(--pix-primary-500);
-    font-weight: 600;
-    font-size: 1.25rem;
-    font-family: fonts.$font-open-sans;
     line-height: 40px;
     text-align: center;
 
@@ -46,9 +46,9 @@
   }
 
   &__explanation-text {
+    @extend %pix-body-l;
+
     color: var(--pix-neutral-900);
-    font-size: 1.125rem;
-    font-family: fonts.$font-open-sans;
     white-space: pre-line;
     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 @@