[BUMP] Update dependency @1024pix/pix-ui to v53 (junior)

 #11094

junior/app/styles/app.scss

@@ -1,40 +1,39 @@
 @charset "utf-8";
 
 /* Pix UI */
-@import 'pix-design-tokens';
-@import 'pod-styles';
+@use 'pix-design-tokens';
 
 // Globals
-@import 'globals/buttons';
-@import 'globals/breakpoints';
-@import 'globals/colors';
-@import 'globals/fonts';
+@use 'globals/buttons' as *;
+@use 'globals/breakpoints' as *;
+@use 'globals/colors' as *;
+@use 'globals/fonts' as *;
 
 // Components
-@import 'components/challenge/challenge';
-@import 'components/challenge/challenge-actions';
-@import 'components/challenge/challenge-embed-simulator';
-@import 'components/challenge/challenge-content';
-@import 'components/challenge/challenge-content-proposals';
-@import 'components/challenge/content/challenge-media';
-@import 'components/challenge/challenge-layout';
-@import 'components/delayed-element';
-@import 'components/device-warning-modal';
-@import 'components/mission-card/card';
-@import 'components/bubble';
-@import 'components/footer';
-@import 'components/issue';
-@import 'components/identified-learner';
-@import 'components/oralization-button';
-@import 'components/robot-dialog';
+@use 'components/challenge/challenge' as *;
+@use 'components/challenge/challenge-actions' as *;
+@use 'components/challenge/challenge-embed-simulator' as *;
+@use 'components/challenge/challenge-content' as *;
+@use 'components/challenge/challenge-content-proposals' as *;
+@use 'components/challenge/content/challenge-media' as *;
+@use 'components/challenge/challenge-layout' as *;
+@use 'components/delayed-element' as *;
+@use 'components/device-warning-modal' as *;
+@use 'components/mission-card/card' as *;
+@use 'components/bubble' as *;
+@use 'components/footer' as *;
+@use 'components/issue' as *;
+@use 'components/identified-learner' as *;
+@use 'components/oralization-button' as *;
+@use 'components/robot-dialog' as *;
 
 // Pages
-@import 'pages/identified/missions/introduction';
-@import 'pages/identified/missions/list';
-@import 'pages/identified/missions/mission';
-@import 'pages/loading';
-@import 'pages/organization-code';
-@import 'pages/school';
+@use 'pages/identified/missions/introduction' as *;
+@use 'pages/identified/missions/list' as *;
+@use 'pages/identified/missions/mission' as *;
+@use 'pages/loading' as *;
+@use 'pages/organization-code' as *;
+@use 'pages/school' as *;
 
 body {
   color: var(--pix-neutral-900);
@@ -57,5 +56,3 @@ b {
     min-height: calc(100vh - 48px);
   }
 }
-
-

junior/app/styles/components/bubble.scss

@@ -1,3 +1,5 @@
+@use 'pix-design-tokens/breakpoints';
+
 .bubble-container {
   display: flex;
   margin-bottom: 8px;
@@ -11,15 +13,14 @@
   margin-left: 8px;
   padding: 8px 20px;
   font-size: 1.4rem;
-
-  @include device-is('tablet') {
-    font-size: 1.25rem;
-  }
-
   text-align: left;
   background-color: var(--pix-primary-100);
   border-radius: 16px 16px 16px 0;
 
+  @include breakpoints.device-is('tablet') {
+    font-size: 1.25rem;
+  }
+
   ul, ol {
     padding: revert;
   }

junior/app/styles/components/challenge/challenge-content.scss

@@ -1,10 +1,12 @@
+@use 'pix-design-tokens/breakpoints';
+
 .challenge-content {
   display: flex;
   gap: var(--pix-spacing-6x);
   margin: 16px 140px 0;
   transition: all 0.4s;
 
-  @include device-is('tablet') {
+  @include breakpoints.device-is('tablet') {
     margin: 16px 120px 0;
   }
 

junior/app/styles/components/challenge/content/challenge-media.scss

@@ -1,3 +1,5 @@
+@use 'pix-design-tokens/breakpoints';
+
 .challenge-media {
   &__placeholder {
     display: flex;
@@ -13,7 +15,7 @@
     max-width: 100%;
     max-height: 650px;
 
-    @include device-is('tablet') {
+    @include breakpoints.device-is('tablet') {
       max-height: 500px;
     }
   }

junior/app/styles/components/footer.scss

@@ -1,3 +1,6 @@
+@use 'pix-design-tokens/colors';
+@use 'pix-design-tokens/fonts';
+
 #footer {
   margin:auto 20px 20px 3rem;
 }
@@ -11,19 +14,19 @@
   &__item {
     display: inline-block;
     padding: 0 12px 6px 0;
-    color: $pix-neutral-60;
+    color: colors.$pix-neutral-60;
     font-size: 0.8125rem;
-    font-family: $font-roboto;
+    font-family: fonts.$font-roboto;
     line-height: 1.375rem;
     letter-spacing: 0.009rem;
 
     &:focus {
-      color: $pix-neutral-50;
+      color: colors.$pix-neutral-50;
       text-decoration: none;
     }
 
     &:hover {
-      color: $pix-primary-70;
+      color: colors.$pix-primary-70;
       text-decoration: none;
       cursor: pointer;
     }

junior/app/styles/components/mission-card/card.scss

@@ -1,10 +1,12 @@
+@use '../../globals/fonts';
+
 .mission-card {
   &__container {
     position: relative;
     width: 248px;
     height: 368px;
     padding: var(--pix-spacing-2x);
-    font-family: $font-nunito;
+    font-family: fonts.$font-nunito;
     font-style: normal;
     background-color: var(--pix-neutral-0);
     border-radius: 16px;

junior/app/styles/components/robot-dialog.scss

@@ -1,9 +1,11 @@
+@use 'pix-design-tokens/breakpoints';
+
 .robot-speaking {
   display: flex;
   width: 100%;
   margin-top: 20px;
 
-  @include device-is('tablet') {
+  @include breakpoints.device-is('tablet') {
     margin-top: 8px;
   }
 
@@ -14,7 +16,7 @@
     max-width: 80%;
     margin-left: 140px;
 
-    @include device-is('tablet') {
+    @include breakpoints.device-is('tablet') {
       margin-left: 120px;
     }
   }
@@ -24,7 +26,7 @@
     width: 128px;
     margin-top: -57px;
 
-    @include device-is('tablet') {
+    @include breakpoints.device-is('tablet') {
       width: 106px;
       margin-top: -37px;
     }

junior/app/styles/pages/identified/missions/list.scss

@@ -1,10 +1,12 @@
+@use 'pix-design-tokens/breakpoints';
+
 .cards {
   display: flex;
   flex-wrap: wrap;
   gap: 24px;
   margin: 40px 145px;
 
-  @include device-is('tablet') {
+  @include breakpoints.device-is('tablet') {
     margin-left: 120px;
   }
 }

junior/app/styles/pages/identified/missions/mission.scss

@@ -1,3 +1,5 @@
+@use 'pix-design-tokens/breakpoints';
+
 .mission-page {
   margin-top: 20px;
 
@@ -12,7 +14,7 @@
     margin-top: 16px;
     margin-left: 145px;
 
-    @include device-is('tablet') {
+    @include breakpoints.device-is('tablet') {
       margin-left: 125px;
     }
   }
@@ -39,7 +41,7 @@
         fill: var(--pix-neutral-0);
       }
 
-      @include device-is('tablet') {
+      @include breakpoints.device-is('tablet') {
         margin: 32px 60px 0 auto;
       }
 

junior/app/styles/pages/organization-code.scss

@@ -1,3 +1,7 @@
+@use '../globals/fonts';
+@use 'pix-design-tokens/breakpoints';
+@use 'pix-design-tokens/typography';
+
 .school-code {
   display: flex;
   flex-direction: column;
@@ -31,7 +35,7 @@
   }
 
   &__input {
-    font-family: $font-nunito;
+    font-family: fonts.$font-nunito;
     text-transform: uppercase;
   }
 
@@ -76,7 +80,7 @@
     margin-bottom: 20px;
   }
 
-  @include device-is('desktop') {
+  @include breakpoints.device-is('desktop') {
     margin-top: 30px;
 
     .logo {

junior/app/styles/pages/school.scss

@@ -1,3 +1,5 @@
+@use 'pix-design-tokens/breakpoints';
+
 .school {
   margin-left: 3rem;
 
@@ -8,7 +10,7 @@
   min-height: 300px;
   margin: 16px auto 0 130px;
 
-  @include device-is('tablet') {
+  @include breakpoints.device-is('tablet') {
     margin-left: 115px;
   }
 
@@ -61,7 +63,7 @@
       -webkit-box-orient: vertical;
     }
 
-    @include device-is('desktop') {
+    @include breakpoints.device-is('desktop') {
       width: 240px;
       height: 240px;
       background-position-y: 50px;