@1024pix/pix-ui 14.3.1 → 14.6.0

package/addon/styles/_form.scss

@@ -1,21 +1,21 @@
-@mixin hoverFormElement(){
+@mixin hoverFormElement() {
   &:hover {
-    box-shadow: inset 0px 0px 0px 0.6px $grey-40;
+    box-shadow: inset 0px 0px 0px 0.6px $pix-neutral-40;
   }
 }
 
-@mixin focusFormElement(){
+@mixin focusFormElement() {
   &:focus {
-    border-color: $blue;
-    box-shadow: inset 0px 0px 0px 0.6px $blue;
+    border-color: $pix-primary;
+    box-shadow: inset 0px 0px 0px 0.6px $pix-primary;
     outline: none;
   }
 }
 
-@mixin focusWithinFormElement(){
+@mixin focusWithinFormElement() {
   &:focus {
-    border-color: $blue;
-    box-shadow: inset 0px 0px 0px 0.6px $blue;
+    border-color: $pix-primary;
+    box-shadow: inset 0px 0px 0px 0.6px $pix-primary;
     outline: none;
   }
 }
@@ -24,26 +24,26 @@
   display: block;
   font-family: $font-roboto;
   font-size: 0.875rem;
-  color: $grey-70;
+  color: $pix-neutral-70;
   margin-bottom: 4px;
 }
 
 @mixin errorMessage() {
   font-family: $font-roboto;
   font-size: 0.75rem;
-  color: $red;
+  color: $pix-error-70;
 }
 
 @mixin formElementInError() {
-  border-color: $red;
-  box-shadow: inset 0px 0px 0px 0.6px $red;
+  border-color: $pix-error-70;
+  box-shadow: inset 0px 0px 0px 0.6px $pix-error-70;
 }
 
 @mixin input() {
   font-family: $font-roboto;
   font-size: 0.875rem;
   font-weight: 400;
-  color: $grey-90;
+  color: $pix-neutral-90;
   border-radius: $spacing-xxs;
   padding: 0 $spacing-s 0 $spacing-s;
 }
@@ -57,7 +57,6 @@
   padding: $spacing-xs 0 $spacing-xs 0;
 }
 
-
 .pix-form__actions {
   display: flex;
   justify-content: center;
@@ -69,7 +68,7 @@
 
 abbr.mandatory-mark {
   cursor: help;
-  color: $pink-alert-dark;
+  color: $pix-error-70;
   text-decoration: none;
   border: none;
-}
+}

package/addon/styles/_pix-background-header.scss

@@ -9,12 +9,13 @@
 
   &__background {
     position: absolute;
-    top: 0; left: 0;
+    top: 0;
+    left: 0;
     z-index: -1;
     width: 100%;
     min-height: 270px;
-    background: $pix-gradient;
+    background: $pix-primary-app-gradient;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-    color: $white;
+    color: $pix-neutral-0;
   }
 }

package/addon/styles/_pix-banner.scss

@@ -36,32 +36,32 @@
   }
 
   &--information {
-    background-color: $blue-alert-light;
-    color: $blue-alert-dark;
+    background-color: $pix-primary-10;
+    color: $pix-primary-70;
   }
 
   &--warning {
-    background-color: $yellow-alert-light;
-    color: $yellow-alert-dark;
+    background-color: $pix-warning-10;
+    color: $pix-warning-60;
   }
 
   &--error {
-    background-color: $pink-alert-light;
-    color: $pink-alert-dark;
+    background-color: $pix-error-10;
+    color: $pix-error-70;
   }
 
   &--communication {
-    background-color: $blue;
-    color: $white;
+    background-color: $pix-primary;
+    color: $pix-neutral-0;
 
     &-orga {
       background-color: $dark-orga;
-      color: $white;
+      color: $pix-neutral-0;
     }
 
     &-certif {
-      background-color: $dark-green-certif;
-      color: $white;
+      background-color: $pix-secondary-certif-50;
+      color: $pix-neutral-0;
     }
   }
 }

package/addon/styles/_pix-block.scss

@@ -4,15 +4,15 @@
   max-width: 980px;
   padding: 14px 24px;
   margin-bottom: 32px;
-  background-color: $white;
+  background-color: $pix-neutral-0;
   border-radius: 5px;
-  
+
   &--shadow-light {
-    box-shadow: 0 10px 20px 0 rgba($blue, .06);
+    box-shadow: 0 10px 20px 0 rgba($pix-primary, 0.06);
   }
   &--shadow-heavy {
-    box-shadow: 0 50px 54px -40px rgba($grey-200, .4),
-                0 7px 14px 0 rgba($grey-150, .1);
+    box-shadow: 0 50px 54px -40px rgba($pix-neutral-110, 0.4),
+      0 7px 14px 0 rgba($pix-neutral-100, 0.1);
   }
 }
 

package/addon/styles/_pix-button-base.scss

@@ -1,14 +1,14 @@
 .pix-button {
   @import 'reset-css';
 
-  color: $white;
+  color: $pix-neutral-0;
   font-family: $font-roboto;
   font-size: 0.875rem;
   font-weight: 500;
   white-space: nowrap;
-  letter-spacing: .028rem;
+  letter-spacing: 0.028rem;
   cursor: pointer;
-  background-color: $blue;
+  background-color: $pix-primary;
   border: 2px solid transparent;
   display: flex;
   justify-content: center;
@@ -36,7 +36,7 @@
   }
 
   &--disabled {
-    opacity: .5;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -45,10 +45,12 @@
     border-color: $backgroundColor;
 
     &:not(.pix-button--disabled) {
-      &:hover, &:focus, &:focus-visible {
+      &:hover,
+      &:focus,
+      &:focus-visible {
         background-color: darken($backgroundColor, 8%);
         box-shadow: 0 0 0 2px darken($outlineColor, 8%);
-        border-color: $white;
+        border-color: $pix-neutral-0;
         outline: none;
       }
 
@@ -59,7 +61,7 @@
   }
 
   &--background-blue {
-    @include colorizeBackground($blue, $blue);
+    @include colorizeBackground($pix-primary, $pix-primary);
   }
 
   &--background-green {
@@ -67,48 +69,51 @@
   }
 
   &--background-yellow {
-    color: $grey-100;
-    @include colorizeBackground($yellow, $yellow);
+    color: $pix-neutral-100;
+    @include colorizeBackground($pix-warning-40, $pix-warning-40);
   }
 
   &--background-red {
-    color: $white;
-    @include colorizeBackground($red, $red);
+    color: $pix-neutral-0;
+    @include colorizeBackground($pix-error-70, $pix-error-70);
   }
 
   &--background-grey {
-    @include colorizeBackground($blue-zodiac, $blue-zodiac);
+    @include colorizeBackground($pix-neutral-60, $pix-neutral-60);
   }
 
   /* deprecated in favor of --background-transparent-light + --border */
   &--background-transparent {
     background-color: transparent;
-    color: $grey-50;
-    border: 2px solid $grey-50;
+    color: $pix-neutral-50;
+    border: 2px solid $pix-neutral-50;
   }
 
   &--background-transparent-light {
     background-color: transparent;
     border-color: transparent;
-    color: $grey-90;
+    color: $pix-neutral-90;
 
     &:not(.pix-button--disabled) {
-      &:hover, &:focus, &:focus-visible {
-        background-color: rgba($black, 0.1);
+      &:hover,
+      &:focus,
+      &:focus-visible {
+        background-color: rgba($pix-neutral-110, 0.1);
         outline: none;
       }
 
       &:active {
-        background-color: rgba($black, 0.2);
+        background-color: rgba($pix-neutral-110, 0.2);
       }
     }
 
     &.pix-button--border {
-      border-color: $grey-50;
+      border-color: $pix-neutral-50;
 
       &:not(.pix-button--disabled) {
-        &:hover, &:active {
-          border-color: $grey-80;
+        &:hover,
+        &:active {
+          border-color: $pix-neutral-80;
         }
       }
     }
@@ -117,21 +122,23 @@
   &--background-transparent-dark {
     background-color: transparent;
     border-color: transparent;
-    color: $white;
+    color: $pix-neutral-0;
 
     &:not(.pix-button--disabled) {
-      &:hover, &:focus, &:focus-visible {
-        background-color: rgba($black, 0.1);
+      &:hover,
+      &:focus,
+      &:focus-visible {
+        background-color: rgba($pix-neutral-110, 0.1);
         outline: none;
       }
 
       &:active {
-        background-color: rgba($black, 0.2);
+        background-color: rgba($pix-neutral-110, 0.2);
       }
     }
 
     &.pix-button--border {
-      border-color: $white;
+      border-color: $pix-neutral-0;
     }
   }
 }

package/addon/styles/_pix-button-link.scss

@@ -1,4 +1,3 @@
 .pix-button-link {
   @import 'reset-css';
-
 }

package/addon/styles/_pix-button.scss

@@ -6,21 +6,21 @@
       visibility: hidden;
     }
   }
-  
+
   .loader > div {
     width: 10px;
     height: 10px;
-    background-color: $white;
+    background-color: $pix-neutral-0;
     border-radius: 100%;
     display: inline-block;
     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
   }
 
   .loader--white > div {
-    background-color: $white;
+    background-color: $pix-neutral-0;
   }
   .loader--grey > div {
-    background-color: $grey-80;
+    background-color: $pix-neutral-80;
   }
   .loader .bounce1 {
     animation-delay: -0.32s;
@@ -31,10 +31,13 @@
   }
 
   @keyframes sk-bouncedelay {
-    0%, 80%, 100% {
+    0%,
+    80%,
+    100% {
       transform: scale(0);
-    } 40% {
-      transform: scale(1.0);
+    }
+    40% {
+      transform: scale(1);
     }
   }
 }

package/addon/styles/_pix-collapsible.scss

@@ -6,10 +6,10 @@
   flex-direction: column;
   font-family: $font-roboto;
   font-size: 1rem;
-  border: 1px solid $grey-20;
+  border: 1px solid $pix-neutral-20;
   padding: 0;
   cursor: pointer;
-  background-color: $white;
+  background-color: $pix-neutral-0;
 
   &__title {
     padding: 14px 10px 14px 16px;
@@ -19,28 +19,28 @@
     justify-content: space-between;
     background: transparent;
     border: none;
-    color: $grey-60;
+    color: $pix-neutral-60;
     font-size: 1rem;
     font-weight: 500;
 
     .pix-collapsible-title__icon {
-      color: $grey-45;
+      color: $pix-neutral-45;
       margin-right: 6px;
     }
 
     &:hover {
-      background-color: $grey-10;
+      background-color: $pix-neutral-10;
     }
 
     &:focus {
-      background-color: $grey-10;
+      background-color: $pix-neutral-10;
     }
 
     &--uncollapsed {
-      background-color: $grey-10;
+      background-color: $pix-neutral-10;
     }
   }
-  
+
   &__content {
     padding: 16px 20px;
     display: none;
@@ -64,7 +64,7 @@
 .pix-collapsible--uncollapsed {
   margin-top: 10px;
   margin-bottom: 10px;
-  box-shadow: 0 2px 5px 0 rgba($black, 0.05);
+  box-shadow: 0 2px 5px 0 rgba($pix-neutral-110, 0.05);
   border-radius: 4px;
 }
 
@@ -77,6 +77,7 @@
 }
 
 // Pour le deuxième élément d'affilé qui est refermé, on enlève la bordure-top
-.pix-collapsible:not(.pix-collapsible--uncollapsed) + .pix-collapsible:not(.pix-collapsible--uncollapsed) {
+.pix-collapsible:not(.pix-collapsible--uncollapsed)
+  + .pix-collapsible:not(.pix-collapsible--uncollapsed) {
   border-top: none;
 }

package/addon/styles/_pix-dropdown.scss

@@ -23,10 +23,10 @@
       width: 100%;
       min-width: 250px;
       min-height: 34px;
-      border: 1px solid $grey-40;
+      border: 1px solid $pix-neutral-40;
       border-radius: $spacing-xxs;
       padding: 0;
-      background: $white;
+      background: $pix-neutral-0;
 
       &.expanded {
         border-bottom-left-radius: 0;
@@ -35,7 +35,7 @@
     }
 
     &--placeholder-text {
-      color: $grey-90;
+      color: $pix-neutral-90;
       margin: 0;
       font-size: 0.875rem;
       overflow: hidden;
@@ -44,7 +44,7 @@
       padding: 8px 68px 8px 16px;
 
       &.default {
-        color: $grey-60;
+        color: $pix-neutral-60;
         padding-right: 36px;
       }
     }
@@ -52,17 +52,17 @@
     &--clear {
       background: transparent;
       font-size: 1rem;
-      color: $grey-50;
+      color: $pix-neutral-50;
       position: absolute;
       padding: 8px 8px 6px;
       border: none;
-      border-right: 2px solid $grey-40;
+      border-right: 2px solid $pix-neutral-40;
       right: 38px;
       top: 1px;
       width: fit-content;
 
       &:hover {
-        color: $grey-70;
+        color: $pix-neutral-70;
       }
     }
 
@@ -73,17 +73,17 @@
       position: absolute;
       top: 9px;
       right: 12px;
-      color: $grey-50;
+      color: $pix-neutral-50;
       cursor: pointer;
 
       &:hover {
-        color: $grey-70;
+        color: $pix-neutral-70;
       }
     }
   }
 
   &__menu {
-    background: white;
+    background: $pix-neutral-0;
     position: absolute;
     top: 100%;
     width: 100%;
@@ -95,7 +95,7 @@
 
     &.expanded {
       max-height: 300px;
-      border: 1px solid $grey-40;
+      border: 1px solid $pix-neutral-40;
       border-top: none;
       border-radius: 0 0 $spacing-xxs $spacing-xxs;
     }
@@ -105,7 +105,7 @@
       position: relative;
 
       &-icon {
-        color: $grey-30;
+        color: $pix-neutral-30;
         margin: 4px;
         position: absolute;
         left: 16px;
@@ -114,7 +114,7 @@
 
       &-input {
         border: none;
-        border-bottom: 1px solid $grey-40;
+        border-bottom: 1px solid $pix-neutral-40;
         font-size: 0.875rem;
         flex-grow: 1;
         margin: 12px 12px 8px;
@@ -122,12 +122,12 @@
         outline: none;
 
         &:hover {
-          box-shadow: inset 0 -0.7px 0 0 $grey-40;
+          box-shadow: inset 0 -0.7px 0 0 $pix-neutral-40;
         }
 
         &:focus {
-          box-shadow: inset 0 -0.7px 0 0 $blue;
-          border-color: $blue;
+          box-shadow: inset 0 -0.7px 0 0 $pix-primary;
+          border-color: $pix-primary;
         }
 
         &-label {
@@ -144,13 +144,13 @@
       cursor: pointer;
 
       &.selected {
-        color: $grey-70;
+        color: $pix-neutral-70;
       }
 
       &:focus,
       &:hover {
         outline: none;
-        background: $grey-15;
+        background: $pix-neutral-15;
       }
     }
   }

package/addon/styles/_pix-filter-banner.scss

@@ -7,8 +7,8 @@
   gap: 6px;
   width: 100%;
 
-  background-color: $white;
-  box-shadow: 0 2px 5px 0 rgba($black, 0.05);
+  background-color: $pix-neutral-0;
+  box-shadow: 0 2px 5px 0 rgba($pix-neutral-110, 0.05);
   min-height: 64px;
   padding: 14px 24px;
 
@@ -16,7 +16,7 @@
     display: flex;
     flex-direction: column;
     gap: 12px;
-    
+
     > * > * {
       width: 100%;
     }
@@ -28,20 +28,20 @@
   }
 
   &__title {
-    color: $grey-60;
+    color: $pix-neutral-60;
     font-family: $font-roboto;
     font-size: 0.875rem;
     margin: 0;
   }
 
   p.pix-filter-banner__details {
-    color: $grey-60;
+    color: $pix-neutral-60;
     font-family: $font-roboto;
     font-weight: $font-medium;
     font-size: 0.875rem;
     margin-top: 10px;
     padding-top: 10px;
-    border-top: 1px solid $grey-15;
+    border-top: 1px solid$pix-neutral-15;
   }
 
   &__button {
@@ -97,8 +97,8 @@
     }
 
     &__button-container {
-      border-left: 1px solid $grey-15;
+      border-left: 1px solid $pix-neutral-15;
       padding-left: 16px;
     }
   }
-}
+}

package/addon/styles/_pix-icon-button.scss

@@ -12,13 +12,14 @@
   background-color: transparent;
 
   &:disabled {
-    opacity: .5;
+    opacity: 0.5;
     cursor: default;
   }
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     transition: background-color 0.2s ease;
-    background-color: $grey-15;
+    background-color: $pix-neutral-15;
     &:disabled {
       background-color: transparent;
     }
@@ -26,14 +27,16 @@
 
   &:active {
     transition: background-color 0.2s ease;
-    background-color: $grey-20;
+    background-color: $pix-neutral-20;
   }
 
   &--background {
-    background-color: $grey-10;
-    &:hover, &:focus, &:active {
+    background-color: $pix-neutral-10;
+    &:hover,
+    &:focus,
+    &:active {
       &:disabled {
-        background-color: $grey-15;
+        background-color: $pix-neutral-15;
       }
     }
   }
@@ -51,10 +54,10 @@
   }
 
   &--dark-grey {
-    color: $grey-60;
+    color: $pix-neutral-60;
   }
 
   &--light-grey {
-    color: $grey-60;
+    color: $pix-neutral-60;
   }
 }