@1024pix/pix-ui 55.1.0 → 55.3.0

package/addon/components/pix-block.hbs

@@ -1,4 +1,4 @@
-<div class="pix-block {{concat 'pix-block--shadow-' this.getShadowWeight}}" ...attributes>
+<div class="pix-block {{concat 'pix-block--' this.variant}}" ...attributes>
 
   {{yield}}
 

package/addon/components/pix-block.js

@@ -1,11 +1,19 @@
+import { warn } from '@ember/debug';
 import Component from '@glimmer/component';
 
 export default class PixBlockComponent extends Component {
   text = 'pix-block';
 
-  get getShadowWeight() {
-    const shadowParam = this.args.shadow;
-    const correctsWeight = ['light', 'heavy'];
-    return correctsWeight.includes(shadowParam) ? shadowParam : 'light';
+  get variant() {
+    const value = this.args.variant ?? 'default';
+    warn(
+      `PixBlock: @variant "${value}" should be default, certif, orga or admin`,
+      ['default', 'orga', 'certif', 'admin'].includes(value),
+      {
+        id: 'pix-ui.pix-block.variant.not-valid',
+      },
+    );
+
+    return value;
   }
 }

package/addon/styles/_pix-block.scss

@@ -3,13 +3,25 @@
 .pix-block {
   position: relative;
   background-color: var(--pix-neutral-0);
-  border-radius: 5px;
+  border-radius: var(--pix-spacing-2x);
 
-  &--shadow-light {
-    @extend %pix-shadow-sm;
+  &--default {
+    padding: var(--pix-spacing-6x);
+    border: solid 1px var(--pix-primary-100);
   }
 
-  &--shadow-heavy {
-    @extend %pix-shadow-xl;
+  &--orga {
+    padding: var(--pix-spacing-3x);
+    border: solid 1px rgb(var(--pix-orga-500-inline), 0.45);
+  }
+
+  &--certif {
+    padding: var(--pix-spacing-3x);
+    border: solid 1px rgb(var(--pix-certif-500-inline), 0.45);
+  }
+
+  &--admin {
+    padding: var(--pix-spacing-3x);
+    border: solid 1px var(--pix-primary-100);
   }
 }

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

@@ -80,6 +80,17 @@
   letter-spacing: calc(-0.01 * var(--font-size-title));
 }
 
+%pix-title-xxs,
+.pix-title-xxs {
+  @extend %-pix-title;
+
+  --font-size-title: 1.125rem;
+
+  font-size: var(--font-size-title);
+  line-height: 1.625;
+  letter-spacing: calc(-0.01 * var(--font-size-title));
+}
+
 %-pix-body {
   font-weight: var(--pix-font-normal);
 

package/package.json

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