@1024pix/pix-ui 16.1.0 → 17.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Pix-UI Changelog
 
+## v17.2.0 (24/08/2022)
+
+
+### :rocket: Amélioration
+- [#245](https://github.com/1024pix/pix-ui/pull/245) [FEATURE] Ajouter un composant Sidebar (PIX-4298)
+
+## v17.1.0 (22/08/2022)
+
+
+### :rocket: Amélioration
+- [#243](https://github.com/1024pix/pix-ui/pull/243) [FEATURE] Ajout d'un icone pour fermer Pix-Banner (PIX-5379)
+- [#244](https://github.com/1024pix/pix-ui/pull/244) [FEATURE] PixModal : ajouter des modifiers trap-focus et action au echap (PIX-5157)
+
+## v17.0.0 (09/08/2022)
+
+
+### :coffee: Autre
+- [#239](https://github.com/1024pix/pix-ui/pull/239) [BREAKING_CHANGES][BUGFIX] Correction des couleurs du design system par rapport à Figma (PIX-5331).
+
 ## v16.1.0 (03/08/2022)
 
 

package/addon/components/pix-banner.hbs

@@ -1,16 +1,33 @@
-<div class="pix-banner pix-banner--{{this.type}}" ...attributes>
-  <FaIcon @icon={{this.icon}} class="pix-banner__icon" />
-  <div>
-    {{yield}}
-    {{#if this.displayAction}}
-      {{#if this.isExternalLink}}
-        <a class="pix-banner__action" href={{@actionUrl}} target="_blank" rel="noopener noreferrer">
-          {{@actionLabel}}
-          <FaIcon class="external-link" @icon="up-right-from-square" />
-        </a>
-      {{else}}
-        <LinkTo class="pix-banner__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>
+{{#if this.displayBanner}}
+  <div class="pix-banner pix-banner--{{this.type}}" role="alert" ...attributes>
+    <FaIcon @icon={{this.icon}} class="pix-banner__icon" />
+    <div>
+      {{yield}}
+      {{#if this.displayAction}}
+        {{#if this.isExternalLink}}
+          <a
+            class="pix-banner__action"
+            href={{@actionUrl}}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{@actionLabel}}
+            <FaIcon class="external-link" @icon="up-right-from-square" />
+          </a>
+        {{else}}
+          <LinkTo class="pix-banner__action" @route={{@actionUrl}}>{{@actionLabel}}</LinkTo>
+        {{/if}}
       {{/if}}
+    </div>
+    {{#if this.canCloseBanner}}
+      <div class="pix-banner__close">
+        <PixIconButton
+          @ariaLabel="Fermer"
+          @icon="xmark"
+          @size="small"
+          @triggerAction={{this.closeBanner}}
+        />
+      </div>
     {{/if}}
   </div>
-</div>
+{{/if}}

package/addon/components/pix-banner.js

@@ -1,4 +1,6 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 const TYPE_INFO = 'information';
 const TYPE_ERROR = 'error';
 const TYPE_WARNING = 'warning';
@@ -25,6 +27,7 @@ const icons = {
 };
 
 export default class PixBanner extends Component {
+  @tracked isBannerVisible = true;
   get type() {
     return types.includes(this.args.type) ? this.args.type : TYPE_INFO;
   }
@@ -40,4 +43,17 @@ export default class PixBanner extends Component {
   get isExternalLink() {
     return this.args.actionUrl.includes('/');
   }
+
+  get canCloseBanner() {
+    return this.args.canCloseBanner;
+  }
+
+  get displayBanner() {
+    return this.isBannerVisible;
+  }
+
+  @action
+  closeBanner() {
+    this.isBannerVisible = false;
+  }
 }

package/addon/components/pix-modal.hbs

@@ -1,17 +1,23 @@
-<div class="pix-modal__overlay">
+<div
+  class="pix-modal__overlay"
+  {{on "click" this.closeAction}}
+  {{trap-focus}}
+  {{on-escape-action this.closeAction}}
+>
   <div
     class="pix-modal"
     role="dialog"
     aria-labelledby="modal-title"
     aria-describedby="modal-content"
     aria-modal="true"
+    {{on "click" this.stopPropagation}}
     ...attributes
   >
     <header class="pix-modal__header">
       <h1 id="modal-title" class="pix-modal__title">{{@title}}</h1>
       <PixIconButton
         @icon="xmark"
-        @triggerAction={{@onCloseButtonClick}}
+        @triggerAction={{this.closeAction}}
         @ariaLabel="Fermer"
         @size="small"
         @withBackground={{true}}

package/addon/components/pix-modal.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
 export default class PixModal extends Component {
   constructor(...args) {
@@ -8,4 +9,16 @@ export default class PixModal extends Component {
       throw new Error('ERROR in PixModal component: @title argument is required.');
     }
   }
+
+  @action
+  stopPropagation(event) {
+    event.stopPropagation();
+  }
+
+  @action
+  closeAction(params) {
+    if (this.args.onCloseButtonClick) {
+      this.args.onCloseButtonClick(params);
+    }
+  }
 }

package/addon/components/pix-sidebar.hbs

@@ -0,0 +1,34 @@
+<div
+  class="pix-sidebar__overlay {{unless @showSidebar ' pix-sidebar__overlay--hidden'}}"
+  {{on "click" this.closeAction}}
+  {{trap-focus}}
+  {{on-escape-action this.closeAction}}
+>
+  <div
+    class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
+    role="dialog"
+    aria-labelledby="sidebar-title"
+    aria-describedby="sidebar-content"
+    aria-modal="true"
+    {{on "click" this.stopPropagation}}
+    ...attributes
+  >
+    <header class="pix-sidebar__header">
+      <h1 id="sidebar-title" class="pix-sidebar__title">{{@title}}</h1>
+      <PixIconButton
+        @icon="xmark"
+        @triggerAction={{this.closeAction}}
+        @ariaLabel="Fermer"
+        @size="small"
+        @withBackground={{true}}
+        class="pix-sidebar__close-button"
+      />
+    </header>
+    <main id="sidebar-content" class="pix-sidebar__content">
+      {{yield to="content"}}
+    </main>
+    <footer class="pix-sidebar__footer">
+      {{yield to="footer"}}
+    </footer>
+  </div>
+</div>

package/addon/components/pix-sidebar.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class PixSidebar extends Component {
+  constructor(...args) {
+    super(...args);
+
+    if (!this.args.title) {
+      throw new Error('ERROR in PixSidebar component: @title argument is required.');
+    }
+  }
+
+  @action
+  stopPropagation(event) {
+    event.stopPropagation();
+  }
+
+  @action
+  closeAction(params) {
+    if (this.args.onClose) {
+      this.args.onClose(params);
+    }
+  }
+}

package/addon/styles/_colors.scss

@@ -14,7 +14,7 @@ $pix-primary-80: #000e87;
 
 // Secondary
 $pix-secondary-5: #fff9e6;
-$pix-secondary-10: #ffeeb3;
+$pix-secondary-10: #fff1c5;
 $pix-secondary-20: #ffe381;
 $pix-secondary: #ffd235;
 $pix-secondary-40: #ffbe00;
@@ -75,7 +75,7 @@ $pix-warning-30: #ffd235;
 $pix-warning-40: #ffbe00;
 $pix-warning-50: #eaa600;
 $pix-warning-60: #ce8900;
-$pix-warning-70: #ac6a00;
+$pix-warning-70: #a95800;
 $pix-warning-80: #874d00;
 
 // Error
@@ -489,20 +489,20 @@ $yellow-alert-dark: #a95800;
 /**
  * @deprecated
  *-To style text or border : $pix-error-70
- *-To style background : $pix-error-10
+ *-To style background : $pix-error-5
  */
 $error: #ff4b00;
 
 /**
  * @deprecated
  *-To style text or border : $pix-success-70
- *-To style background : $pix-success-10
+ *-To style background : $pix-success-5
  */
 $success: #57c884;
 
 /**
  * @deprecated
- *-To style text or border : $pix-warning-60
- *-To style background : $pix-warning-10
+ *-To style text or border : $pix-warning-70
+ *-To style background : $pix-warning-5
  */
 $warning: #ffbe00;

package/addon/styles/_pix-banner.scss

@@ -2,52 +2,73 @@
   @import 'reset-css';
   font-family: $font-roboto;
   font-weight: $font-normal;
-  padding: 10px 16px;
+  padding: 16px 24px;
   display: flex;
   align-items: center;
-  font-size: 0.75rem;
-
-  @include device-is('tablet') {
-    padding: 20px 60px;
-    font-size: 0.875rem;
-  }
+  font-size: 0.875rem;
+  box-shadow: 0px 4px 8px rgba(7, 20, 46, 0.08);
 
   &__action {
     text-decoration: underline;
-    letter-spacing: 0.028rem;
     color: inherit;
     .external-link {
-      margin-left: 3px;
-      font-size: 0.75rem;
-
-      @include device-is('tablet') {
-        font-size: 0.875rem;
-      }
+      margin-left: 4px;
+      font-size: 0.875rem;
     }
   }
-
+  &__close {
+    display: flex;
+    margin-left: auto;
+    padding-left: 8px;
+  }
   &__icon {
-    font-size: 0.875rem;
+    font-size: 1.125rem;
     margin-right: $spacing-xs;
-
-    @include device-is('tablet') {
-      font-size: 1rem;
-    }
   }
 
   &--information {
-    background-color: $pix-primary-10;
+    background-color: $pix-primary-5;
     color: $pix-primary-70;
+    .pix-icon-button {
+      background-color: $pix-primary-5;
+      color: $pix-primary-70;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $pix-primary-10;
+        color: $pix-primary-70;
+      }
+    }
   }
 
   &--warning {
-    background-color: $pix-warning-10;
-    color: $pix-warning-60;
+    background-color: $pix-warning-5;
+    color: $pix-warning-70;
+    .pix-icon-button {
+      background-color: $pix-warning-5;
+      color: $pix-warning-70;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $pix-warning-10;
+        color: $pix-warning-70;
+      }
+    }
   }
 
   &--error {
-    background-color: $pix-error-10;
+    background-color: $pix-error-5;
     color: $pix-error-70;
+    .pix-icon-button {
+      background-color: $pix-error-5;
+      color: $pix-error-70;
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: $pix-error-10;
+        color: $pix-error-70;
+      }
+    }
   }
 
   &--communication {

package/addon/styles/_pix-message.scss

@@ -10,23 +10,23 @@
 
   &.pix-message--info {
     color: $pix-primary-70;
-    background-color: $pix-primary-10;
+    background-color: $pix-primary-5;
   }
   &.pix-message--alert {
     color: $pix-error-70;
-    background-color: $pix-error-10;
+    background-color: $pix-error-5;
   }
   &.pix-message--error {
     color: $pix-error-70;
-    background-color: $pix-error-10;
+    background-color: $pix-error-5;
   }
   &.pix-message--success {
     color: $pix-success-70;
-    background-color: $pix-success-10;
+    background-color: $pix-success-5;
   }
   &.pix-message--warning {
-    color: $pix-warning-60;
-    background-color: $pix-warning-10;
+    color: $pix-warning-70;
+    background-color: $pix-warning-5;
   }
 
   svg {

package/addon/styles/_pix-sidebar.scss

@@ -0,0 +1,80 @@
+.pix-sidebar__overlay {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: scroll;
+  background-color: rgba(52, 69, 99, 0.7);
+  transition: all .3s ease-in-out;
+
+  &--hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
+
+$sidebar-padding: 16px;
+$mobile-close-button-size: 32px;
+$tablet-close-button-size: 40px;
+$space-between-title-and-close-button: 8px;
+$button-margin: 16px;
+
+.pix-sidebar {
+  @import 'reset-css';
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 320px;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+  background: $pix-neutral-0;
+  transform: translate(0);
+  transition: transform .3s ease-in-out;
+
+  &--hidden {
+    transform: translate(-100%);
+  }
+
+  &__header {
+    border-bottom: 1px solid $pix-neutral-20;
+    padding: $sidebar-padding;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__close-button {
+    flex-shrink: 0;
+
+    @include device-is('tablet') {
+      height: $tablet-close-button-size;
+      width: $tablet-close-button-size;
+    }
+  }
+
+  &__content {
+    flex-grow: 1;
+    overflow: auto;
+  }
+
+  &__title {
+    @include h4;
+    margin-bottom: 0;
+    color: $pix-neutral-90;
+    padding-right: $mobile-close-button-size + $space-between-title-and-close-button;
+
+    @include device-is('tablet') {
+      padding-right: $tablet-close-button-size + $space-between-title-and-close-button;
+    }
+  }
+
+  &__content {
+    padding: $sidebar-padding 0;
+  }
+
+  &__footer {
+    padding: $sidebar-padding;
+    border-top: 1px solid $pix-neutral-20;
+  }
+}

package/addon/styles/addon.scss

@@ -22,6 +22,7 @@
 @import 'pix-input-password';
 @import 'pix-radio-button';
 @import 'pix-modal';
+@import 'pix-sidebar';
 @import 'pix-input-code';
 @import 'pix-selectable-tag';
 @import 'pix-dropdown';

package/app/components/pix-sidebar.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-sidebar';

package/app/modifiers/on-escape-action.js

@@ -0,0 +1,19 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback]) => {
+  function handleKeyUp(event) {
+    const TAB_KEY = 'Escape';
+
+    if (event.key !== TAB_KEY) {
+      return;
+    }
+
+    callback(event);
+  }
+
+  element.addEventListener('keyup', handleKeyUp);
+
+  return () => {
+    element.removeEventListener('keyup', handleKeyUp);
+  };
+});

package/app/modifiers/trap-focus.js

@@ -0,0 +1,52 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(function trapFocus(element) {
+  const [firstFocusableElement] = findFocusableElements(element);
+
+  firstFocusableElement.focus();
+
+  function handleKeyDown(event) {
+    const TAB_KEY = 9;
+    const focusableElements = findFocusableElements(element);
+    const [firstFocusableElement] = focusableElements;
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+    if (event.keyCode !== TAB_KEY) {
+      return;
+    }
+
+    function handleBackwardTab() {
+      if (document.activeElement === firstFocusableElement) {
+        event.preventDefault();
+        lastFocusableElement.focus();
+      }
+    }
+
+    function handleForwardTab() {
+      if (document.activeElement === lastFocusableElement) {
+        event.preventDefault();
+        firstFocusableElement.focus();
+      }
+    }
+
+    if (event.shiftKey) {
+      handleBackwardTab();
+    } else {
+      handleForwardTab();
+    }
+  }
+
+  element.addEventListener('keydown', handleKeyDown);
+
+  return () => {
+    element.removeEventListener('keydown', handleKeyDown);
+  };
+});
+
+function findFocusableElements(element) {
+  return [
+    ...element.querySelectorAll(
+      'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
+    ),
+  ].filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+}

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

@@ -7,6 +7,7 @@ const Template = (args) => {
         @type={{type}}
         @actionLabel={{actionLabel}}
         @actionUrl={{actionUrl}}
+        @canCloseBanner={{canCloseBanner}}
       >
         Parcours de rentrée 2020 : les codes sont disponibles dans l'onglet campagne. N’oubliez pas de les diffuser aux élèves avant la Toussaint.
       </PixBanner>
@@ -56,6 +57,12 @@ withInternalLink.args = {
   actionUrl: 'campaign.list',
 };
 
+export const withCloseIcon = Template.bind({});
+withCloseIcon.args = {
+  type: 'info',
+  canCloseBanner: true,
+};
+
 export const argsTypes = {
   actionLabel: {
     name: 'actionLabel',
@@ -86,4 +93,13 @@ export const argsTypes = {
       ],
     },
   },
+  canCloseBanner: {
+    name: 'canCloseBanner',
+    description: 'Afficher la croix pour fermer la bannière',
+    type: { name: 'boolean', required: false },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
 };

package/app/stories/pix-banner.stories.mdx

@@ -67,6 +67,14 @@ Bannière contenant un lien externe.
   <Story name="With external link" story={stories.withExternalLink} height={100} />
 </Canvas>
 
+## With Close Icon
+
+Bannière contenant un bouton qui permet de fermer la bannière.
+
+<Canvas>
+  <Story name="With close icon" story={stories.withCloseIcon} height={100} />
+</Canvas>
+
 ## Usage
 
 ```html
@@ -100,6 +108,13 @@ Bannière Info par défaut
   Bannière avec une route externe
 </PixBanner>
 
+<PixBanner
+  @type='warning'
+  @canCloseBanner=true
+>
+  Bannière posséndant un bouton de fermeture
+</PixBanner>
+
 ```
 
 ## Arguments

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

@@ -1,9 +1,9 @@
 import { hbs } from 'ember-cli-htmlbars';
 
-export const modal = (args) => {
+export const Template = (args) => {
   return {
     template: hbs`
-      <PixModal @title={{this.title}}>
+      <PixModal @title={{this.title}} @onCloseButtonClick={{onCloseButtonClick}}>
         <:content>
           <p>
             Une fenêtre modale est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
@@ -24,16 +24,24 @@ export const modal = (args) => {
   };
 };
 
+export const Default = Template.bind({});
+Default.args = {
+  title: "Qu'est-ce qu'une modale ?",
+  onCloseButtonClick: () => {
+    alert('Action : fermer modale');
+  },
+};
+
 export const argTypes = {
   title: {
     name: 'title',
     description: 'Titre de la modale',
-    type: { name: 'string', required: false },
-    defaultValue: "Qu'est-ce qu'une modale ?",
+    type: { name: 'string', required: true },
+    defaultValue: null,
   },
   onCloseButtonClick: {
     name: 'onCloseButtonClick',
-    description: 'Fonction à executer lors du clic sur le bouton de fermeture de la modale',
+    description: 'Fonction à exécuter à la fermeture de la modale',
     type: { name: 'function', required: true },
     defaultValue: null,
   },

package/app/stories/pix-modal.stories.mdx

@@ -4,8 +4,8 @@ import centered from '@storybook/addon-centered/ember';
 import * as stories from './pix-modal.stories.js';
 
 <Meta
-  title='Basics/Modal'
-  component='PixModal'
+  title="Basics/Modal"
+  component="PixModal"
   decorators={[centered]}
   argTypes={stories.argTypes}
 />
@@ -15,13 +15,14 @@ import * as stories from './pix-modal.stories.js';
 Une fenêtre modale responsive et scrollable avec un overlay.
 
 Ce composant possède deux `yield` :
+
 - `:content` est destiné à accueillir le contenu principal de la fenêtre modale. Il peut accueillir tout type de
   contenu HTML (simple texte, image, formulaire, etc.)
 - `:footer` peut également accueillir tout type de contenu HTML, mais est destiné aux boutons permettant d'interagir
   avec la modale, ce qui permettra de les positionner correctement dans tous les cas de figure.
 
 <Canvas>
-  <Story name='PixModal' story={stories.modal} height={500} />
+  <Story name="Default" story={stories.Default} height={500} />
 </Canvas>
 
 ## Usage

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

@@ -0,0 +1,61 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export const Template = (args) => {
+  return {
+    template: hbs`
+      <PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
+      <PixSidebar @showSidebar={{showSidebar}} @title={{title}} @onClose={{fn (mut showSidebar) (not showSidebar)}}>
+        <:content>
+          <p>
+            Une sidebar est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
+            de l'écran. Elle est en général associée à du paramétrage d'écran.
+          </p>
+        </:content>
+        <:footer>
+        <div style="display: flex; gap: 8px">
+          <PixButton @backgroundColor="transparent-light" @isBorderVisible="true">Annuler</PixButton>
+          <PixButton>Valider</PixButton>
+          </div>
+        </:footer>
+      </PixSidebar>
+    `,
+    context: args,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  showSidebar: true,
+  title: 'Filtrer',
+  onClose: () => {},
+};
+
+export const argTypes = {
+  showSidebar: {
+    name: 'showSidebar',
+    description: 'Visibilité de la sidebar',
+    type: { name: 'boolean', required: false },
+    control: { type: 'boolean' },
+    table: {
+      type: { summary: 'boolean' },
+      defaultValue: { summary: false },
+    },
+  },
+  title: {
+    name: 'title',
+    description: 'Titre de la sidebar',
+    type: { name: 'string', required: true },
+    table: {
+      type: { summary: 'string' },
+      defaultValue: { summary: '' },
+    },
+  },
+  onClose: {
+    name: 'onClose',
+    description: 'Fonction à exécuter à la fermeture de la sidebar',
+    type: { name: 'function', required: true },
+    table: {
+      type: { summary: 'function' },
+    },
+  },
+};

package/app/stories/pix-sidebar.stories.mdx

@@ -0,0 +1,57 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import centered from '@storybook/addon-centered/ember';
+
+import * as stories from './pix-sidebar.stories.js';
+
+<Meta
+  title="Basics/Sidebar"
+  component="PixSidebar"
+  decorators={[centered]}
+  argTypes={stories.argTypes}
+/>
+
+# PixSidebar
+
+Une sidebar responsive et scrollable avec un overlay.
+
+Ce composant possède deux `yield` :
+
+- `:content` est destiné à accueillir le contenu principal de la fenêtre sidebar. Il peut accueillir tout type de
+  contenu HTML (simple texte, image, formulaire, etc.)
+- `:footer` peut également accueillir tout type de contenu HTML, mais est destiné aux boutons permettant d'interagir
+  avec la sidebar, ce qui permettra de les positionner correctement dans tous les cas de figure.
+
+<Canvas>
+  <Story name="Default" story={stories.Default} height={500} />
+</Canvas>
+
+## Usage
+
+```html
+<PixSidebar
+  @showSidebar={{true}}
+  @title="Filtrer"
+  @onClose={{this.closeSidebar}}
+>
+ <:content>
+  <p>
+    Une sidebar est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
+    de l'écran. Elle est en général associée à du paramétrage d'écran.
+  </p>
+ </:content>
+ <:footer>
+  <PixButton
+    @backgroundColor="transparent-light"
+    @isBorderVisible={{true}}
+    @triggerAction={{this.closeSidebar}}
+  >
+    Annuler
+  </PixButton>
+  <PixButton>Valider</PixButton>
+ </:footer>
+</PixSidebar>
+```
+
+## Arguments
+
+<ArgsTable story="Default" />

package/docs/colors-palette.stories.mdx

@@ -33,7 +33,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
     title="Pix Secondary"
     subtitle="$pix-secondary-"
     colors={{ 5: '#fff9e6',
-             10: '#ffeeb3',
+             10: '#fff1c5',
              20: '#ffe381',
              Secondary: '#ffd235',
              40: '#ffbe00',
@@ -104,7 +104,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
             40: '#ffbe00',
             50: '#eaa600',
             60: '#ce8900',
-            70: '#ac6a00',
+            70: '#a95800',
             80: '#874d00'}}
   />
   <ColorItem

package/docs/design-tokens.stories.mdx

@@ -38,23 +38,23 @@ Les couleurs pour définir un état d'une alerte ont été attribuées pour unif
 ### Success
 ```
 Texte ou bordure : $pix-success-70
-Background : $pix-success-10
+Background : $pix-success-5
 ```
 
 ### Warning
 ```
-Texte ou bordure : $pix-warning-60
-Background : $pix-warning-10
+Texte ou bordure : $pix-warning-70
+Background : $pix-warning-5
 ```
 
 ### Error
 ```
 Texte ou bordure : $pix-error-70
-Background : $pix-error-10
+Background : $pix-error-5
 ```
 
 ### Information
 ```
 Texte ou bordure : $pix-primary-70
-Background : $pix-primary-10
+Background : $pix-primary-5
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "16.1.0",
+  "version": "17.2.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"