@1024pix/pix-ui 14.3.0 → 14.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Pix-UI Changelog
 
+## v14.3.1 (11/05/2022)
+
+
+### :building_construction: Tech
+- [#218](https://github.com/1024pix/pix-ui/pull/218) [TECH] Ajouter la notion de Pix dans le nom du fichier des design tokens (PIX-4936).
+
 ## v14.3.0 (10/05/2022)
 
 

package/addon/styles/addon.scss

@@ -1,4 +1,4 @@
-@import 'design-tokens';
+@import 'pix-design-tokens';
 @import 'pix-background-header';
 @import 'pix-banner';
 @import 'pix-block';

package/docs/{design-tokens-dev.stories.mdx → pix-design-tokens-dev.stories.mdx}

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 
-<Meta title="Développement/Design Tokens" />
+<Meta title="Développement/Pix Design Tokens" />
 
 # Design Tokens
 
@@ -14,7 +14,7 @@ Ceci nous permettra d'utiliser les mixin dans nos applications par la suite.
 
 Le standard d'équipe est de créer un mixin et une classe et de préfixer la classe avec `pix-`.
 
-Par example :
+Par exemple :
 
 ```
 @mixin text() {

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

@@ -0,0 +1,23 @@
+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';`

package/package.json

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

package/docs/design-tokens.stories.mdx

@@ -1,32 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Utiliser Pix UI/Design Tokens" />
-
-# Design Tokens
-
-> Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icones, etc.)
-
-## Utiliser les classes, mixin 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 mixin 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 example `border: 1px solid $blue;`.
-
-Et pour les mixin, dans le scss voulu, il faudra importer (avec `@use`) les design tokens au haut du fichier et puis vous pourrez les utiliser
-
-Par example :
-
-```
-@use 'design-tokens`;
-
-.organization-title {
-  @include design-tokens.text-bold;
-}
-```