@1024pix/pix-ui 41.1.1 → 41.2.0

package/addon/components/pix-button-base.js

@@ -6,7 +6,7 @@ export default class PixButtonBase extends Component {
   }
 
   get backgroundColor() {
-    return this.args.backgroundColor || 'blue';
+    return this.args.backgroundColor || 'primary';
   }
 
   get size() {
@@ -18,7 +18,7 @@ export default class PixButtonBase extends Component {
       'pix-button',
       `pix-button--shape-${this.shape}`,
       `pix-button--size-${this.size}`,
-      `pix-button--background-${this.backgroundColor}`,
+      `pix-button--${this.backgroundColor}`,
     ];
     this.args.isBorderVisible && classNames.push('pix-button--border');
     this.args.isDisabled && classNames.push('pix-button--disabled');

package/addon/components/pix-progress-gauge.js

@@ -38,10 +38,18 @@ export default class PixProgressGauge extends Component {
   }
 
   get colorClass() {
-    const availableColor = ['blue', 'green', 'purple'];
+    const availableColor = [
+      'primary',
+      'success',
+      'tertiary',
+      // deprecated color
+      'blue',
+      'green',
+      'purple',
+    ];
 
     const color =
-      this.args.color && availableColor.includes(this.args.color) ? this.args.color : 'blue';
+      this.args.color && availableColor.includes(this.args.color) ? this.args.color : 'primary';
 
     return `progress-gauge--content-${color}`;
   }

package/addon/components/pix-return-to.hbs

@@ -4,12 +4,10 @@
   class="pix-return-to pix-return-to--{{this.shade}}"
   ...attributes
 >
-
   {{#if (has-block)}}
     <span aria-hidden="true" class="pix-return-to__icon"><FaIcon @icon="arrow-left" /></span>
     <span class="pix-return-to__text"> {{yield}} </span>
   {{else}}
     <span title="Flèche de retour" class="pix-return-to__icon"><FaIcon @icon="arrow-left" /></span>
   {{/if}}
-
 </LinkTo>

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

@@ -1,6 +1,6 @@
 .pix-background-header {
   position: relative;
-  padding: 68px 24px 0;
+  padding: 68px var(--pix-spacing-6x) 0;
 
   &__background {
     position: absolute;
@@ -9,7 +9,7 @@
     z-index: -1;
     width: 100%;
     min-height: 270px;
-    color: $pix-neutral-0;
+    color: var(--pix-neutral-0);
     background: $pix-primary-app-gradient;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
   }
@@ -18,4 +18,4 @@
     max-width: 980px;
     margin: 0 auto;
   }
-}
+}

package/addon/styles/_pix-banner.scss

@@ -1,16 +1,18 @@
 .pix-banner {
   display: flex;
+  gap: var(--pix-spacing-2x);
   align-items: center;
-  padding: 16px 24px;
+  padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
   font-size: 0.875rem;
-  box-shadow: 0 4px 8px rgba(7, 20, 46, 0.08);
+  border: 1px solid currentcolor;
+  border-radius: var(--pix-spacing-2x);
 
   &__action {
     color: inherit;
     text-decoration: underline;
 
     .external-link {
-      margin-left: 4px;
+      margin-left: var(--pix-spacing-1x);
       font-size: 0.875rem;
     }
   }
@@ -18,89 +20,84 @@
   &__close {
     display: flex;
     margin-left: auto;
-    padding-left: 8px;
   }
 
   &__icon {
-    margin-right: $pix-spacing-xs;
     font-size: 1.125rem;
   }
 
   &--information {
-    color: $pix-primary-70;
-    background-color: $pix-primary-5;
+    color: var(--pix-info-700);
+    background-color: var(--pix-info-50);
 
     .pix-icon-button {
-      color: $pix-primary-70;
-      background-color: $pix-primary-5;
+      color: var(--pix-neutral-800);
+      background-color: var(--pix-info-50);
 
       &:hover:enabled,
       &:focus:enabled,
       &:active:enabled {
-        color: $pix-primary-70;
-        background-color: $pix-primary-10;
+        background-color: var(--pix-info-100);
       }
 
       &:focus:enabled {
-        outline-color: $pix-primary-70;
+        outline-color: var(--pix-primary-700);
       }
     }
   }
 
   &--warning {
-    color: $pix-warning-70;
-    background-color: $pix-warning-5;
+    color: var(--pix-warning-700);
+    background-color: var(--pix-warning-50);
 
     .pix-icon-button {
-      color: $pix-warning-70;
-      background-color: $pix-warning-5;
+      color: var(--pix-neutral-800);
+      background-color: var(--pix-warning-50);
 
       &:hover:enabled,
       &:focus:enabled,
       &:active:enabled {
-        color: $pix-warning-70;
-        background-color: $pix-warning-10;
+        background-color: var(--pix-warning-100);
       }
 
       &:focus:enabled {
-        outline-color: $pix-warning-70;
+        outline-color: var(--pix-warning-700);
       }
     }
   }
 
   &--error {
-    color: $pix-error-70;
-    background-color: $pix-error-5;
+    color: var(--pix-error-700);
+    background-color: var(--pix-error-50);
 
     .pix-icon-button {
-      color: $pix-error-70;
-      background-color: $pix-error-5;
+      color: var(--pix-neutral-800);
+      background-color: var(--pix-error-50);
 
       &:hover:enabled,
       &:focus:enabled,
       &:active:enabled {
-        color: $pix-error-70;
-        background-color: $pix-error-10;
+        background-color: var(--pix-error-100);
       }
 
       &:focus:enabled {
-        outline-color: $pix-error-70;
+        outline-color: var(--pix-error-700);
       }
     }
   }
 
   &--communication {
-    color: $pix-neutral-0;
-    background-color: $pix-primary;
+    color: var(--pix-neutral-0);
+    background-color: var(--pix-primary-500);
 
     &-orga {
-      color: $pix-neutral-0;
-      background-color: $pix-secondary-orga-80;
+      color: var(--pix-neutral-0);
+      background-color: var(--pix-orga-500);
     }
 
     &-certif {
-      color: $pix-neutral-0;
-      background-color: $pix-secondary-certif-50;
+      color: var(--pix-neutral-0);
+      background-color: var(--pix-certif-500);
     }
   }
 }

package/addon/styles/_pix-block.scss

@@ -1,13 +1,13 @@
 .pix-block {
   position: relative;
-  background-color: $pix-neutral-0;
+  background-color: var(--pix-neutral-0);
   border-radius: 5px;
 
   &--shadow-light {
-    box-shadow: 0 4px 8px rgba($pix-neutral-110, 0.08);
+    @extend %pix-shadow-sm;
   }
 
   &--shadow-heavy {
-    box-shadow: 0 12px 24px rgba($pix-neutral-110, 0.08);
+    @extend %pix-shadow-xl;
   }
 }

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

@@ -2,16 +2,34 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: $pix-neutral-0;
+  color: var(--pix-neutral-0);
   font-weight: $font-medium;
   font-size: 0.875rem;
   white-space: nowrap;
   text-decoration: none;
-  background-color: $pix-primary;
+  background-color: var(--pix-primary-500);
   border: 1px solid transparent;
   outline: none;
   cursor: pointer;
 
+  &:not(.pix-button--disabled) {
+    &:hover {
+      background-color: var(--pix-primary-700);
+    }
+
+    &:focus,
+    &:focus-visible {
+      background-color: var(--pix-primary-700);
+      outline: 1px solid var(--pix-neutral-0);
+      outline-offset: -5px;
+    }
+
+    &:active {
+      background-color: var(--pix-primary-900);
+      outline: none;
+    }
+  }
+
   &--shape-rounded {
     border-radius: 25px;
   }
@@ -21,15 +39,15 @@
   }
 
   &--size-big {
-    padding: 12px 24px;
+    padding: var(--pix-spacing-3x) var(--pix-spacing-6x);
   }
 
   &--size-small.pix-button--shape-rounded {
-    padding: 8px 24px;
+    padding: var(--pix-spacing-2x) var(--pix-spacing-6x);
   }
 
   &--size-small.pix-button--shape-squircle {
-    padding: 8px 16px;
+    padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
   }
 
   &--disabled {
@@ -37,183 +55,186 @@
     opacity: 0.5;
   }
 
-  &--background-blue {
-    background-color: $pix-primary;
+  &--blue, &--primary {
+    background-color: var(--pix-primary-500);
 
     &:not(.pix-button--disabled) {
       &:hover {
-        background-color: $pix-primary-60;
+        background-color: var(--pix-primary-700);
       }
 
       &:focus,
       &:focus-visible {
-        background-color: $pix-primary-60;
-        outline: 1px solid $pix-neutral-0;
-        outline-offset: -4px;
+        background-color: var(--pix-primary-700);
+        outline: 1px solid var(--pix-neutral-0);
+        outline-offset: -5px;
       }
 
       &:active {
-        background-color: $pix-primary-70;
+        background-color: var(--pix-primary-900);
         outline: none;
       }
     }
   }
 
-  &--background-green {
-    background-color: $pix-success-60;
+  &--green, &--success {
+    background-color: var(--pix-success-500);
 
     &:not(.pix-button--disabled) {
       &:hover {
-        background-color: $pix-success-70;
+        background-color: var(--pix-success-700);
       }
 
       &:focus,
       &:focus-visible {
-        background-color: $pix-success-70;
-        outline: 1px solid $pix-neutral-0;
+        background-color: var(--pix-success-700);
+        outline: 1px solid var(--pix-neutral-0);
         outline-offset: -4px;
       }
 
       &:active {
-        background-color: $pix-success-80;
+        background-color: var(--pix-success-900);
         outline: none;
       }
     }
   }
 
-  &--background-yellow {
-    color: $pix-neutral-100;
-    background-color: $pix-warning-40;
+  &--yellow, &--secondary {
+    color: var(--pix-neutral-900);
+    background-color: var(--pix-secondary-500);
 
     &:not(.pix-button--disabled) {
       &:hover {
-        background-color: $pix-warning-50;
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-secondary-700);
       }
 
       &:focus,
       &:focus-visible {
-        background-color: $pix-warning-50;
-        outline: 1px solid $pix-neutral-0;
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-secondary-700);
+        outline: 1px solid var(--pix-neutral-0);
         outline-offset: -4px;
       }
 
       &:active {
-        background-color: $pix-warning-60;
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-secondary-900);
         outline: none;
       }
     }
   }
 
-  &--background-red {
-    color: $pix-neutral-0;
-    background-color: $pix-error-70;
+  &--red, &--error {
+    color: var(--pix-neutral-0);
+    background-color: var(--pix-error-500);
 
     &:not(.pix-button--disabled) {
       &:hover {
-        background-color: $pix-error-80;
+        background-color: var(--pix-error-700);
       }
 
       &:focus,
       &:focus-visible {
-        background-color: $pix-error-70;
-        outline: 1px solid $pix-neutral-0;
+        background-color: var(--pix-error-700);
+        outline: 1px solid var(--pix-neutral-0);
         outline-offset: -4px;
       }
 
       &:active {
-        background-color: $pix-error-90;
+        background-color: var(--pix-error-900);
         outline: none;
       }
     }
   }
 
-  &--background-grey {
-    color: $pix-neutral-90;
-    background-color: $pix-neutral-20;
+  &--grey, &--neutral {
+    color: var(--pix-neutral-900);
+    background-color: var(--pix-neutral-20);
 
     &:not(.pix-button--disabled) {
       &:hover {
-        background-color: $pix-neutral-22;
+        background-color: var(--pix-neutral-100);
       }
 
       &:focus,
       &:focus-visible {
-        color: $pix-neutral-0;
-        background-color: $pix-neutral-90;
-        outline: 1px solid $pix-neutral-0;
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-neutral-900);
+        outline: 1px solid var(--pix-neutral-0);
         outline-offset: -4px;
       }
 
       &:active {
-        color: $pix-neutral-90;
-        background-color: $pix-neutral-25;
+        color: var(--pix-neutral-900);
+        background-color: var(--pix-neutral-100);
         outline: none;
       }
     }
   }
 
-  /* deprecated in favor of --background-transparent-light + --border */
-  &--background-transparent {
-    color: $pix-neutral-50;
+  /* deprecated in favor of --transparent-light + --border */
+  &--transparent {
+    color: var(--pix-neutral-500);
     background-color: transparent;
-    border: 1px solid $pix-neutral-50;
+    border: 1px solid var(--pix-neutral-500);
   }
 
-  &--background-transparent-light {
-    color: $pix-neutral-90;
+  &--transparent-light {
+    color: var(--pix-primary-700);
     background-color: transparent;
 
     &.pix-button--border {
-      border: 1px solid $pix-neutral-50;
+      border: 2px solid var(--pix-primary-700);
     }
 
     &:not(.pix-button--disabled) {
       &:hover {
-        color: $pix-neutral-0;
-        background-color: $pix-neutral-60;
-        border: 1px solid transparent;
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-primary-500);
       }
 
       &:focus,
       &:focus-visible {
-        color: $pix-neutral-0;
-        background-color: $pix-neutral-90;
-        outline: 1px solid $pix-neutral-0;
-        outline-offset: -4px;
+        color: var(--pix-primary-900);
+        background-color: var(--pix-primary-100);
+        outline: 1px solid var(--pix-primary-700);
+        outline-offset: -5px;
       }
 
       &:active {
-        background-color: $pix-neutral-70;
+        color: var(--pix-neutral-0);
+        background-color: var(--pix-primary-700);
         outline: none;
       }
     }
   }
 
-  &--background-transparent-dark {
-    color: $pix-neutral-0;
+  &--transparent-dark {
+    color: var(--pix-neutral-0);
     background-color: transparent;
 
     &.pix-button--border {
-      border: 1px solid $pix-neutral-0;
+      border: 1px solid var(--pix-neutral-0);
     }
 
     &:not(.pix-button--disabled) {
       &:hover {
-        color: $pix-neutral-90;
-        background-color: $pix-neutral-10;
+        color: var(--pix-neutral-900);
+        background-color: var(--pix-neutral-20);
         border: 1px solid transparent;
       }
 
       &:focus,
       &:focus-visible {
-        color: $pix-neutral-90;
-        background-color: $pix-neutral-10;
-        outline: 1px solid $pix-neutral-90;
+        color: var(--pix-neutral-900);
+        background-color: var(--pix-neutral-20);
+        outline: 1px solid var(--pix-neutral-900);
         outline-offset: -4px;
       }
 
       &:active {
-        background-color: $pix-neutral-20;
+        background-color: var(--pix-neutral-20);
         outline: none;
       }
     }

package/addon/styles/_pix-button.scss

@@ -2,11 +2,11 @@
   height: 1rem;
 
   &--before {
-    margin-right: $pix-spacing-xs;
+    margin-right: var(--pix-spacing-2x);
   }
 
   &--after {
-    margin-left: $pix-spacing-xs;
+    margin-left: var(--pix-spacing-2x);
   }
 }
 
@@ -22,17 +22,17 @@
   display: inline-block;
   width: 10px;
   height: 10px;
-  background-color: $pix-neutral-0;
+  background-color: var(--pix-neutral-0);
   border-radius: 100%;
   animation: sk-bouncedelay 1.4s infinite ease-in-out both;
 }
 
 .loader--white > div {
-  background-color: $pix-neutral-0;
+  background-color: var(--pix-neutral-0);
 }
 
 .loader--grey > div {
-  background-color: $pix-neutral-80;
+  background-color: var(--pix-neutral-800);
 }
 
 .loader .bounce1 {