@1024pix/pix-ui 41.1.2 → 41.2.0

package/addon/styles/_pix-toggle.scss

@@ -3,38 +3,38 @@
   flex-direction: column;
 
   &__label {
-    color: $pix-neutral-90;
+    color: var(--pix-neutral-900);
 
     @extend %pix-body-m;
   }
 
   &__button {
     width: fit-content;
-    margin-top: $pix-spacing-xxs;
-    padding: $pix-spacing-xxs;
+    margin-top: var(--pix-spacing-1x);
+    padding: var(--pix-spacing-1x);
     background-color: transparent;
-    border: 1px solid $pix-neutral-30;
+    border: 1px solid var(--pix-neutral-500);
     border-radius: 4px;
   }
 
   &__on,
   &__off {
     display: inline-block;
-    padding: $pix-spacing-xs;
-    color: $pix-neutral-70;
+    padding: var(--pix-spacing-2x);
+    color: var(--pix-neutral-800);
     border-radius: 4px;
 
     @extend %pix-body-s;
   }
 
   &__off {
-    color: $pix-neutral-0;
-    background-color: $pix-neutral-45;
+    color: var(--pix-neutral-20);
+    background-color: var(--pix-neutral-800);
   }
 
   &--inline {
     flex-direction: row;
-    gap: $pix-spacing-xxs;
+    gap: var(--pix-spacing-1x);
     align-items: center;
   }
 
@@ -50,8 +50,8 @@
   &--pressed {
     .pix-toggle {
       &__on {
-        color: $pix-neutral-0;
-        background-color: $pix-neutral-45;
+        color: var(--pix-neutral-20);
+        background-color: var(--pix-neutral-800);
       }
 
       &__off {

package/addon/styles/_pix-tooltip.scss

@@ -11,15 +11,17 @@
 }
 
 .pix-tooltip__content {
+  @extend %pix-shadow-md;
+
   position: absolute;
   left: auto;
   z-index: 100;
   display: none;
-  padding: 8px 16px;
-  color: $pix-neutral-0;
+  padding: var(--pix-spacing-2x) var(--pix-spacing-4x);
+  color: var(--pix-neutral-0);
   font-size: 0.875rem;
   line-height: 1.4rem;
-  background-color: $pix-neutral-100;
+  background-color: var(--pix-neutral-900);
   border-radius: 6px;
   opacity: 0;
   transition: opacity 0.3s;
@@ -46,15 +48,14 @@
   }
 
   &--light {
-    color: $pix-neutral-60;
+    color: var(--pix-neutral-900);
     font-weight: $font-medium;
-    background-color: $pix-neutral-0;
-    box-shadow: 0 6px 24px 0 rgba($pix-neutral-70, 0.14);
+    background-color: var(--pix-neutral-0);
 
     &::before {
       width: 8px;
       height: 8px;
-      background-color: $pix-neutral-0;
+      background-color: var(--pix-neutral-0);
       border-width: 0;
     }
   }
@@ -66,12 +67,12 @@
   &::before {
     top: calc(50% - 5px); // 50% is the height of the parent and 5px the height of the triangle
     left: -10px; // 10px is width of the ::before elmt
-    border-color: transparent $pix-neutral-100 transparent transparent;
+    border-color: transparent var(--pix-neutral-900) transparent transparent;
   }
 
   &.pix-tooltip__content--light::before {
-    left: -5px;
-    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    left: -4px;
+    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
     transform: rotate(315deg);
   }
 }
@@ -84,12 +85,12 @@
   &::before {
     top: 100%;
     left: calc(50% - 5px);
-    border-color: $pix-neutral-100 transparent transparent transparent;
+    border-color: var(--pix-neutral-900) transparent transparent transparent;
   }
 
   &.pix-tooltip__content--light::before {
     top: calc(100% - 5px);
-    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
     transform: rotate(225deg);
   }
 }
@@ -101,13 +102,13 @@
   &::before {
     top: 100%;
     left: calc(100% - 27px);
-    border-color: $pix-neutral-100 transparent transparent transparent;
+    border-color: var(--pix-neutral-900) transparent transparent transparent;
   }
 
   &.pix-tooltip__content--light::before {
     top: calc(100% - 5px);
     left: calc(100% - 26px);
-    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
     transform: rotate(225deg);
   }
 }
@@ -118,12 +119,12 @@
 
   &::before {
     top: 100%;
-    border-color: $pix-neutral-100 transparent transparent transparent;
+    border-color: var(--pix-neutral-900) transparent transparent transparent;
   }
 
   &.pix-tooltip__content--light::before {
     top: calc(100% - 5px);
-    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
     transform: rotate(225deg);
   }
 }
@@ -136,12 +137,12 @@
   &::before {
     top: -10px;
     left: calc(50% - 5px);
-    border-color: transparent transparent $pix-neutral-100 transparent;
+    border-color: transparent transparent var(--pix-neutral-900) transparent;
   }
 
   &.pix-tooltip__content--light::before {
-    top: -5px;
-    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    top: -4px;
+    border-color: var(--pix-neutral-500) transparent transparent var(--pix-neutral-500);
     transform: rotate(45deg);
   }
 }
@@ -153,13 +154,13 @@
   &::before {
     top: -10px;
     left: calc(100% - 27px);
-    border-color: transparent transparent $pix-neutral-100 transparent;
+    border-color: transparent transparent var(--pix-neutral-900) transparent;
   }
 
   &.pix-tooltip__content--light::before {
-    top: -5px;
+    top: -4px;
     left: calc(100% - 26px);
-    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
     transform: rotate(45deg);
   }
 }
@@ -170,12 +171,12 @@
 
   &::before {
     top: -10px;
-    border-color: transparent transparent $pix-neutral-100 transparent;
+    border-color: transparent transparent var(--pix-neutral-900) transparent;
   }
 
   &.pix-tooltip__content--light::before {
-    top: -5px;
-    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    top: -4px;
+    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
     transform: rotate(45deg);
   }
 }
@@ -186,12 +187,12 @@
   &::before {
     top: calc(50% - 5px);
     right: -10px;
-    border-color: transparent transparent transparent $pix-neutral-100;
+    border-color: transparent transparent transparent var(--pix-neutral-900);
   }
 
   &.pix-tooltip__content--light::before {
-    right: -5px;
-    border-color: $pix-neutral-40 transparent transparent $pix-neutral-40;
+    right: -4px;
+    border-color: var(--pix-neutral-0) transparent transparent var(--pix-neutral-0);
     transform: rotate(135deg);
   }
 }

package/addon/styles/pix-design-tokens/_colors.scss

@@ -1,5 +1,66 @@
 // See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=16%3A2
+:root {
+  --pix-primary-10: #f7f5ff;
+  --pix-primary-100: #cec3f4;
+  --pix-primary-300: #957ee8;
+  --pix-primary-500: #613fdd;
+  --pix-primary-700: #452d9d;
+  --pix-primary-900: #291a5d;
+  --pix-secondary-50: #fffaeb;
+  --pix-secondary-100: #ffefc0;
+  --pix-secondary-300: #ffdc76;
+  --pix-secondary-500: #ffcb33;
+  --pix-secondary-700: #a16206;
+  --pix-secondary-900: #5b3808;
+  --pix-tertiary-100: #c3d0ff;
+  --pix-tertiary-500: #3d68ff;
+  --pix-tertiary-900: #1a2c6b;
+  --pix-neutral-0: #ffffff;
+  --pix-neutral-20: #f4f5f7;
+  --pix-neutral-100: #cdd1d9;
+  --pix-neutral-500: #5e6c84;
+  --pix-neutral-800: #253858;
+  --pix-neutral-900: #122647;
+  --pix-info-50: #e6f2fe;
+  --pix-info-100: #b0d3f4;
+  --pix-info-500: #3b82f6;
+  --pix-info-700: #1d4ed8;
+  --pix-info-900: #1e3a8a;
+  --pix-success-50: #e8f3ef;
+  --pix-success-100: #b9d8cd;
+  --pix-success-300: #67ab92;
+  --pix-success-500: #1c825d;
+  --pix-success-700: #145c42;
+  --pix-success-900: #0c3727;
+  --pix-warning-50: #fff7eb;
+  --pix-warning-100: #ffe5c0;
+  --pix-warning-300: #ffc676;
+  --pix-warning-500: #f59e0b;
+  --pix-warning-700: #b45309;
+  --pix-warning-900: #78350f;
+  --pix-error-50: #fbecec;
+  --pix-error-100: #f1c4c4;
+  --pix-error-500: #d24140;
+  --pix-error-700: #952e2e;
+  --pix-error-900: #581b1b;
+  --pix-certif-50: #e8f2f2;
+  --pix-certif-500: #187f7d;
+  --pix-orga-50: #ebf1f9;
+  --pix-orga-500: #3674bf;
+  --pix-information-dark: #f24645;
+  --pix-information-light: #f1a141;
+  --pix-content-dark: #1a8c89;
+  --pix-content-light: #52d987;
+  --pix-communication-dark: #3d68ff;
+  --pix-communication-light: #12a3ff;
+  --pix-security-dark: #ac008d;
+  --pix-security-light: #ff3f94;
+  --pix-environment-dark: #5e2563;
+  --pix-environment-light: #564da6;
+  --pix-shadow: #07142E;
+}
 
+// @deprecated - SCSS variables are replaced by CSS variables
 //// SOLID
 // Primary
 $pix-primary-5: #F2F9FF;
@@ -126,15 +187,15 @@ $pix-environment-dark: #5E2563;
 $pix-environment-light: #564DA6;
 
 //// GRADIENT
-$pix-primary-app-gradient: linear-gradient(91.59deg, #3D68FF 0%, #8845FF 100%);
-$pix-secondary-app-gradient: linear-gradient(91.59deg, #FEDC41 0%, #FF9F00 100%);
-$pix-primary-certif-gradient: linear-gradient(91.59deg, #52D987 0%, #1A8C89 100%);
-$pix-primary-orga-gradient: linear-gradient(91.59deg, #00DDFF 0%, #0095C0 100%);
-$pix-secondary-orga-gradient: linear-gradient(91.59deg, #0D7DC4 0%, #213371 100%);
+$pix-primary-app-gradient: linear-gradient(91.59deg, #3d68ff 0%, #8845ff 100%);
+$pix-secondary-app-gradient: linear-gradient(91.59deg, #fedc41 0%, #ff9f00 100%);
+$pix-primary-certif-gradient: linear-gradient(91.59deg, #52d987 0%, #1a8c89 100%);
+$pix-primary-orga-gradient: linear-gradient(91.59deg, #00ddff 0%, #0095c0 100%);
+$pix-secondary-orga-gradient: linear-gradient(91.59deg, #0d7dc4 0%, #213371 100%);
 
 // Domain
-$pix-information-gradient: linear-gradient(180deg, #F24645 0%, #F1A141 100%);
-$pix-content-gradient: linear-gradient(180deg, #1A8C89 0%, #52D987 100%);
-$pix-communication-gradient: linear-gradient(180deg, #3D68FF 0%, #12A3FF 100%);
-$pix-security-gradient: linear-gradient(180deg, #AC008D 0%, #FF3F94 100%);
-$pix-environment-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
+$pix-information-gradient: linear-gradient(180deg, #f24645 0%, #f1a141 100%);
+$pix-content-gradient: linear-gradient(180deg, #1a8c89 0%, #52d987 100%);
+$pix-communication-gradient: linear-gradient(180deg, #3d68ff 0%, #12a3ff 100%);
+$pix-security-gradient: linear-gradient(180deg, #ac008d 0%, #ff3f94 100%);
+$pix-environment-gradient: linear-gradient(180deg, #5e2563 0%, #564da6 100%);

package/addon/styles/pix-design-tokens/_form.scss

@@ -1,42 +1,50 @@
 @mixin hoverFormElement() {
   &:hover {
-    background-color: $pix-neutral-5;
-    box-shadow: inset 0 0 0 0.6px $pix-neutral-70;
+    background-color: var(--pix-neutral-20);
+    border-color: var(--pix-neutral-900);
   }
 }
 
 @mixin hoverFormElementDisabled() {
   &:hover {
-    background-color: $pix-neutral-20;
-    box-shadow: inset 0 0 0 0.6px $pix-neutral-70;
+    background-color: var(--pix-neutral-20);
+    border-color:  var(--pix-neutral-100);
   }
 }
 
 @mixin formElementDisabled() {
-  background-color: $pix-neutral-20;
+  color: var(--pix-neutral-500);
+  background-color: var(--pix-neutral-20);
+  border-color:  var(--pix-neutral-100);
   cursor: not-allowed;
 }
 
 @mixin focusFormElement() {
   &:focus {
-    border-color: $pix-primary;
+    border-color: var(--pix-primary-500);
+    outline: 2px solid var(--pix-primary-300);
+  }
+}
+
+@mixin activeFormElement() {
+  &:active {
+    background-color: var(--pix-neutral-0);
+    border-color: var(--pix-primary-500);
     outline: none;
-    box-shadow: inset 0 0 0 0.6px $pix-primary;
   }
 }
 
 @mixin focusWithinFormElement() {
   &:focus-within {
-    border-color: $pix-primary;
-    outline: none;
-    box-shadow: inset 0 0 0 0.6px $pix-primary;
+    border-color: var(--pix-primary-500);
+    outline: 2px solid var(--pix-primary-300);
   }
 }
 
 @mixin label() {
   display: block;
-  margin-bottom: $pix-spacing-xxs;
-  color: $pix-neutral-90;
+  margin-bottom: var(--pix-spacing-1x);
+  color: var(--pix-neutral-900);
   font-weight: $font-medium;
   font-size: 0.875rem;
   line-height: 1.375rem;
@@ -45,40 +53,38 @@
 @mixin subLabel() {
   @include label();
 
-  color: $pix-neutral-60;
+  color: var(--pix-neutral-500);
   font-weight: $font-normal;
   font-size: 0.813rem;
   line-height: 1rem;
 }
 
 @mixin errorMessage() {
-  margin-top: $pix-spacing-xxs;
-  color: $pix-error-70;
+  margin-top: var(--pix-spacing-1x);
+  color: var(--pix-error-700);
   font-size: 0.75rem;
 }
 
 @mixin formElementInError() {
-  border-color: $pix-error-70;
-  box-shadow: inset 0 0 0 0.6px $pix-error-70;
+  border-color: var(--pix-error-700);
 }
 
 @mixin formElementInSuccess() {
-  border-color: $pix-success-60;
-  box-shadow: inset 0 0 0 0.6px $pix-success-60;
+  border-color: var(--pix-success-700);
 }
 
 @mixin input() {
-  padding: 0 $pix-spacing-s 0 $pix-spacing-s;
-  color: $pix-neutral-90;
-  font-weight: $font-normal;
-  font-size: 0.875rem;
-  border-radius: $pix-spacing-xxs;
+  @extend %pix-body-s;
+
+  padding: 0 var(--pix-spacing-3x);
+  color: var(--pix-neutral-900);
+  border-radius: var(--pix-spacing-1x);
 }
 
 .pix-form__label {
   @include label();
 
-  padding-bottom: 12px;
+  padding-bottom: var(--pix-spacing-3x);
 }
 
 .pix-form__actions {
@@ -92,7 +98,7 @@
 
 .mandatory-mark,
 .mandatory-mark[title] {
-  color: $pix-error-70;
+  color: var(--pix-error-700);
   text-decoration: none;
   border: none;
   cursor: help;

package/addon/styles/pix-design-tokens/_spacing.scss

@@ -1,5 +1,6 @@
 // See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=54%3A4595&t=8piOzYzdI0ala3i6-0
 
+// deprecated
 $pix-spacing-xxs: 4px;
 $pix-spacing-xs: 8px;
 $pix-spacing-s: 16px;
@@ -7,3 +8,14 @@ $pix-spacing-m: 24px;
 $pix-spacing-l: 32px;
 $pix-spacing-xl: 40px;
 $pix-spacing-xxl: 48px;
+
+:root {
+  --pix-spacing-1x: 4px;
+  --pix-spacing-2x: 8px;
+  --pix-spacing-3x: 12px;
+  --pix-spacing-4x: 16px;
+  --pix-spacing-6x: 24px;
+  --pix-spacing-8x: 32px;
+  --pix-spacing-10x: 40px;
+  --pix-spacing-12x: 48px;
+}

package/app/stories/pix-button.stories.js

@@ -44,13 +44,21 @@ export default {
     backgroundColor: {
       name: 'backgroundColor',
       description:
-        'color: `blue`, `green`, `yellow`, `red`, `grey`, `transparent-light`, `transparent-dark`',
-      options: ['blue', 'green', 'yellow', 'red', 'grey', 'transparent-light', 'transparent-dark'],
+        'color: `primary`, `secondary`, `success`, `error`, `neutral`, `transparent-light`, `transparent-dark`',
+      options: [
+        'primary',
+        'secondary',
+        'success',
+        'error',
+        'neutral',
+        'transparent-light',
+        'transparent-dark',
+      ],
       type: { name: 'string', required: false },
       control: { type: 'select' },
       table: {
         type: { summary: 'string' },
-        defaultValue: { summary: 'blue' },
+        defaultValue: { summary: 'primary' },
       },
     },
     iconBefore: {
@@ -199,7 +207,7 @@ Default.args = {
   loadingColor: 'white',
   shape: 'squircle',
   size: 'big',
-  backgroundColor: 'blue',
+  backgroundColor: 'primary',
   label: 'Bouton',
 };
 
@@ -224,7 +232,7 @@ borders.args = {
 export const colors = Template.bind({});
 colors.args = {
   ...Default.args,
-  label: 'Bouton avec background blue (default)',
+  label: 'Bouton avec background primary (default)',
   extraButtons: [
     {
       ...Default.args,

package/app/stories/pix-indicator-card.stories.js

@@ -12,7 +12,7 @@ export default {
       description: "Couleur de l'icone",
       table: { defaultValue: { summary: 'grey' } },
       control: { type: 'select' },
-      options: ['grey', 'blue', 'green', 'purple'],
+      options: ['neutral', 'primary', 'tertiary', 'success', 'warning'],
     },
     icon: {
       name: 'Icon',

package/app/stories/pix-progress-gauge.mdx

@@ -13,6 +13,10 @@ Permet d'afficher un barre de progression sur un barème de 100%. Des paramètre
 
 <Story of={ComponentStories.Default} height={60} />
 
+<Story of={ComponentStories.Success} height={60} />
+
+<Story of={ComponentStories.Tertiary} height={60} />
+
 ## Dark mode
 
 Démonstration d'une barre de progression blanche en dark mode avec un sous titre.
@@ -25,7 +29,7 @@ Démonstration d'une barre de progression blanche en dark mode avec un sous titr
 <PixProgressGauge
   @value="50"
   @label="Chargement"
-  @color="green"
+  @color="sucess"
   @themeMode="dark"
   @subTitle="Un sous titre"
 />

package/app/stories/pix-progress-gauge.stories.js

@@ -28,11 +28,11 @@ export default {
     color: {
       name: 'color',
       description:
-        "Modifie la couleur du contenu de la barre de progression. Peut prendre les valeurs `blue`, 'green' ou `purple`",
+        'Modifie la couleur du contenu de la barre de progression. Peut prendre les valeurs `primary`, `green` ou `blue`',
       type: { name: 'string', required: false },
-      table: { defaultValue: { summary: 'blue' } },
+      table: { defaultValue: { summary: 'primary' } },
       control: { type: 'select' },
-      options: ['blue', 'green', 'purple'],
+      options: ['primary', 'success', 'tertiary'],
     },
     subtitle: {
       name: 'subtitle',
@@ -59,6 +59,40 @@ Default.args = {
   value: '50',
 };
 
+export const Success = (args) => {
+  return {
+    template: hbs`<PixProgressGauge
+  @value={{this.value}}
+  @color={{this.color}}
+  @themeMode={{this.themeMode}}
+  @subtitle={{this.subtitle}}
+  @label={{this.label}}
+/>`,
+    context: args,
+  };
+};
+Success.args = {
+  value: '50',
+  color: 'success',
+};
+
+export const Tertiary = (args) => {
+  return {
+    template: hbs`<PixProgressGauge
+  @value={{this.value}}
+  @color={{this.color}}
+  @themeMode={{this.themeMode}}
+  @subtitle={{this.subtitle}}
+  @label={{this.label}}
+/>`,
+    context: args,
+  };
+};
+Tertiary.args = {
+  value: '50',
+  color: 'tertiary',
+};
+
 export const darkModeProgressGauge = (args) => {
   return {
     template: hbs`<section style='width: 100%; padding: 35px 35px 5px;background-color: #253858'>
@@ -76,7 +110,7 @@ export const darkModeProgressGauge = (args) => {
 darkModeProgressGauge.args = {
   value: '50',
   label: 'Chargement',
-  color: 'purple',
+  color: 'primary',
   themeMode: 'dark',
   subtitle: 'Avancement',
 };

package/app/stories/pix-return-to.stories.js

@@ -21,16 +21,16 @@ export default {
       name: 'shade',
       description: 'Couleur du lien',
       type: { name: 'string', required: false },
-      table: { defaultValue: { summary: 'black' } },
+      table: { defaultValue: { summary: 'neutral-dark' } },
       control: { type: 'select' },
-      options: ['white', 'black', 'blue'],
+      options: ['neutral-light', 'neutral-dark', 'neutral-primary'],
     },
   },
 };
 
 export const returnTo = {
   args: {
-    shade: 'blue',
+    shade: 'primary',
   },
 };
 

package/app/stories/pix-stars.stories.js

@@ -24,7 +24,7 @@ export default {
       type: { name: 'string', required: false },
       table: { defaultValue: { summary: undefined } },
       control: { type: 'radio' },
-      options: [undefined, 'blue', 'grey'],
+      options: [undefined, 'primary'],
     },
   },
 };

package/app/stories/pix-tag.stories.js

@@ -13,24 +13,11 @@ export default {
       name: 'color',
       description: 'Couleur du tag',
       type: { name: 'number', required: false },
-      table: { defaultValue: { summary: 'blue' } },
+      table: { defaultValue: { summary: 'primary' } },
       control: {
         type: 'select',
       },
-      options: [
-        'blue',
-        'blue-light',
-        'green',
-        'green-light',
-        'grey',
-        'grey-light',
-        'purple',
-        'purple-light',
-        'orange',
-        'orange-light',
-        'yellow',
-        'yellow-light',
-      ],
+      options: ['neutral', 'secondary', 'tertiary', 'success', 'error', 'orga'],
     },
     compact: {
       name: 'compact',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "41.1.2",
+  "version": "41.2.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -138,7 +138,9 @@
   "files": [
     "addon/",
     "app/",
-    "public/"
+    "public/",
+    "scripts/migrate-colors-scss-vars-to-css-vars.sh",
+    "scripts/migrate-spacing-scss-vars-to-css-vars.sh"
   ],
   "storybook-deployer": {
     "commitMessage": "Deploy Storybook [skip ci]"