@1024pix/pix-ui 60.7.0 → 60.9.0

package/addon/components/pix-modal.gjs

@@ -1,3 +1,4 @@
+import { MODAL_VARIANTS } from '@1024pix/pix-ui/helpers/variants';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
 
@@ -17,6 +18,18 @@ export default class PixModal extends Component {
     return guidFor(this);
   }
 
+  get variant() {
+    if (this.args.variant && !MODAL_VARIANTS.includes(this.args.variant)) {
+      throw new Error(
+        `ERROR in PixModal component: @variant should be one of ${MODAL_VARIANTS.join(', ')}`,
+      );
+    }
+
+    const value = this.args.variant ?? 'default';
+
+    return value;
+  }
+
   <template>
     <PixOverlay
       @isVisible={{@showModal}}
@@ -25,14 +38,14 @@ export default class PixModal extends Component {
       @hasCenteredContent={{true}}
     >
       <div
-        class="pix-modal"
+        class="pix-modal pix-modal--{{this.variant}}"
         role="dialog"
         aria-labelledby="modal-title--{{this.id}}"
         aria-describedby="modal-content--{{this.id}}"
         aria-modal="true"
         ...attributes
       >
-        <div class="pix-modal__header">
+        <div class="pix-modal__header pix-modal__header--{{this.variant}}">
           <h1 id="modal-title--{{this.id}}" class="pix-modal__title">{{@title}}</h1>
           <PixIconButton
             @iconName="close"

package/addon/helpers/variants.js

@@ -1 +1,3 @@
 export const VARIANTS = ['primary', 'orga', 'certif', 'admin', 'modulix'];
+
+export const MODAL_VARIANTS = ['default', 'orga', 'certif'];

package/addon/styles/_pix-modal.scss

@@ -3,8 +3,6 @@
 @use "pix-design-tokens/shadows";
 
 .pix-modal {
-  @extend %pix-shadow-sm;
-
   position: relative;
   left: 50%;
   width: min(32rem, calc(100% - var(--pix-spacing-4x)));
@@ -13,15 +11,38 @@
   border-radius: var(--pix-spacing-4x);
   transform: translateX(-50%);
 
+  &--default {
+    @extend %pix-shadow-default;
+  }
+
+  &--orga {
+    @extend %pix-shadow-orga;
+  }
+
+  &--certif {
+    @extend %pix-shadow-certif;
+  }
+
   &__header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding: var(--pix-spacing-6x) var(--pix-spacing-4x) var(--pix-spacing-6x) var(--pix-spacing-6x);
     color: var(--pix-neutral-900);
-    background: var(--pix-gradient-default-light);
     border-top-left-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
     border-top-right-radius: var(--pix-spacing-4x) var(--pix-spacing-4x);
+
+    &--default {
+      background: var(--pix-gradient-default-light);
+    }
+
+    &--orga {
+      background: var(--pix-gradient-orga-light);
+    }
+
+    &--certif {
+      background: var(--pix-gradient-certif-light);
+    }
   }
 
   &__close-button {

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

@@ -5,6 +5,13 @@
   src: url('../@1024pix/pix-ui/fonts/Nunito/Nunito-Bold.woff2');
 }
 
+@font-face {
+  font-weight: 800;
+  font-family: 'Nunito';
+  font-style: normal;
+  src: url('../@1024pix/pix-ui/fonts/Nunito/Nunito-ExtraBold.woff2');
+}
+
 @font-face {
   font-weight: 400;
   font-family: 'Nunito';
@@ -66,6 +73,7 @@ $font-bold: 700;
   --pix-font-normal: 400;
   --pix-font-medium: 500;
   --pix-font-bold: 700;
+  --pix-font-extrabold: 800;
 
   // Private property, do not use directly
   // See https://ui.pix.fr/?path=/docs/utiliser-pix-ui-design-tokens-typographie--docs

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

@@ -4,7 +4,7 @@
 
 // Placeholder pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
 %-pix-title {
-  font-weight: var(--pix-font-bold);
+  font-weight: var(--pix-font-extrabold);
 
   // stylelint-disable-next-line custom-property-pattern
   font-family: var(--_pix-font-family-title);

package/package.json

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