@1024pix/pix-ui 14.3.1 → 14.6.0

package/docs/design-tokens.stories.mdx

@@ -0,0 +1,60 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Utiliser Pix UI/Design Tokens/ Utilisation" />
+
+# Design Tokens
+
+> Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icônes, etc.)
+
+## Utiliser les classes, mixins et variables dans votre css
+
+En ajoutant la dépendance dans votre application avec `npm install`, vous avez déjà accès aux classes, mais pour avoir accès aux mixins et variables,
+il faut ajouter le code ci-dessous dans le `new EmberApp()` de votre `ember-cli.build.js` qui se trouve à la racine du projet :
+
+```
+sassOptions: {
+  includePaths: ['node_modules/@1024pix/pix-ui/addon/styles'],
+},
+```
+
+Par la suite vous aurez accès à toutes les variables des design tokens avec le `$`, par exemple `border: 1px solid $pix-primary;`.
+
+Et pour les mixins, dans le scss voulu, il faudra importer (avec `@use`) les design tokens en haut du fichier pour les utiliser
+
+Par exemple :
+
+```
+@use 'design-tokens`;
+
+.organization-title {
+  @include design-tokens.text-bold;
+}
+````
+
+## Définir les alertes
+
+Les couleurs pour définir un état d'une alerte ont été attribuées pour uniformiser le visuel sur toutes les applications.
+
+### Success
+```
+Texte ou bordure : $pix-success-70
+Background : $pix-success-10
+```
+
+### Warning
+```
+Texte ou bordure : $pix-warning-60
+Background : $pix-warning-10
+```
+
+### Error
+```
+Texte ou bordure : $pix-error-70
+Background : $pix-error-10
+```
+
+### Information
+```
+Texte ou bordure : $pix-primary-70
+Background : $pix-primary-10
+```

package/docs/pix-design-tokens-dev.stories.mdx

@@ -30,7 +30,7 @@ Par exemple :
 
   a {
     font-weight: $font-medium;
-    color: $blue;
+    color: $pix-primary;
   }
 }
 

package/package.json

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

package/docs/pix-design-tokens.stories.mdx

@@ -1,23 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Utiliser Pix UI/Pix Design Tokens" />
-
-# Design Tokens
-
-> Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icônes, etc.)
-
-## Utiliser les classes, mixins et variables dans votre css
-
-En ajoutant la dépendance dans votre application avec `npm install`, pour avoir accès aux classes, mixins et variables,
-il faut ajouter le code ci-dessous dans le `new EmberApp()` de votre `ember-cli.build.js` qui se trouve à la racine du projet :
-
-```
-sassOptions: {
-  includePaths: ['node_modules/@1024pix/pix-ui/addon/styles'],
-},
-```
-
-Et aussi importer les design-tokens avec `@import 'design-tokens';` dans `app/styles/app.scss`.
-
-Par la suite vous aurez accès à toutes les variables des design tokens avec le `$`, par exemple `border: 1px solid $blue;`
-et les mixins avec `@include 'nom du mixin';`