@1024pix/pix-ui 14.4.0 → 14.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -17,7 +17,7 @@ $pix-secondary-5: #fff9e6;
|
|
|
17
17
|
$pix-secondary-10: #ffeeb3;
|
|
18
18
|
$pix-secondary-20: #ffe381;
|
|
19
19
|
$pix-secondary: #ffd235;
|
|
20
|
-
$pix-secondary-40: #
|
|
20
|
+
$pix-secondary-40: #ffbe00;
|
|
21
21
|
$pix-secondary-50: #eaa600;
|
|
22
22
|
$pix-secondary-60: #ce8900;
|
|
23
23
|
$pix-secondary-70: #a95800;
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
<!-- Colors.stories.mdx -->
|
|
2
|
+
|
|
3
|
+
import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
|
|
4
|
+
|
|
5
|
+
<Meta title="Utiliser Pix UI/Design Tokens/Palette de couleurs" />
|
|
6
|
+
|
|
7
|
+
# Palette de couleurs
|
|
8
|
+
|
|
9
|
+
> Pour infos :
|
|
10
|
+
>
|
|
11
|
+
> Cette page permet de connaitre les couleurs qui sont disponibles dans `Pix-UI`. [Figma](https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=16%3A2) reste la source de vérité des couleurs du design system de `Pix`.
|
|
12
|
+
>
|
|
13
|
+
> Les variables SCSS présentes dans le fichier `_colors.scss` reprennent les noms des symboles utilisés sur les maquettes dans Figma,
|
|
14
|
+
> on préconise d'utiliser ses noms de variables plutôt que le code hexa.
|
|
15
|
+
|
|
16
|
+
#### SOLID
|
|
17
|
+
|
|
18
|
+
<ColorPalette>
|
|
19
|
+
<ColorItem
|
|
20
|
+
title="Pix Primary"
|
|
21
|
+
subtitle="$pix-primary-"
|
|
22
|
+
colors={{ 5: '#f2f9ff',
|
|
23
|
+
10: '#dcf1ff',
|
|
24
|
+
20: '#c4e6ff',
|
|
25
|
+
30: '#88beff',
|
|
26
|
+
40: '#5b94ff',
|
|
27
|
+
Primary: '#3d68ff',
|
|
28
|
+
60: '#2044dc',
|
|
29
|
+
70: '#0d25b3',
|
|
30
|
+
80: '#000e87'}}
|
|
31
|
+
/>
|
|
32
|
+
<ColorItem
|
|
33
|
+
title="Pix Secondary"
|
|
34
|
+
subtitle="$pix-secondary-"
|
|
35
|
+
colors={{ 5: '#fff9e6',
|
|
36
|
+
10: '#ffeeb3',
|
|
37
|
+
20: '#ffe381',
|
|
38
|
+
Secondary: '#ffd235',
|
|
39
|
+
40: '#ffbe00',
|
|
40
|
+
50: '#eaa600',
|
|
41
|
+
60: '#ce8900',
|
|
42
|
+
70: '#a95800',
|
|
43
|
+
80: '#874d00'}}
|
|
44
|
+
/>
|
|
45
|
+
<ColorItem
|
|
46
|
+
title="Pix Secondary Certif"
|
|
47
|
+
subtitle="$pix-secondary-certif-"
|
|
48
|
+
colors={{ 5: '#ccf6f5',
|
|
49
|
+
10: '#9aedeb',
|
|
50
|
+
20: '#67e4e0',
|
|
51
|
+
30: '#34dbd6',
|
|
52
|
+
SecondaryCertif: '#20b4af',
|
|
53
|
+
50: '#17817e',
|
|
54
|
+
60:' #126765',
|
|
55
|
+
70: '#0e4d4c',
|
|
56
|
+
80: '#093432'}}
|
|
57
|
+
/>
|
|
58
|
+
<ColorItem
|
|
59
|
+
title="Pix Secondary Orga"
|
|
60
|
+
subtitle="$pix-secondary-orga-"
|
|
61
|
+
colors={{ 5: '#d5f9ff',
|
|
62
|
+
10: '#aaf4ff',
|
|
63
|
+
20: '#80eeff',
|
|
64
|
+
30: '#55e8ff',
|
|
65
|
+
SecondaryOrga: '#00ddff',
|
|
66
|
+
50: '#00c1df',
|
|
67
|
+
60: '#00a6bf',
|
|
68
|
+
70: '#008a9f',
|
|
69
|
+
80: '#006e80'}}
|
|
70
|
+
/>
|
|
71
|
+
<ColorItem
|
|
72
|
+
title="Pix Tertiary"
|
|
73
|
+
subtitle="$pix-tertiary-"
|
|
74
|
+
colors={{ 5: '#ebe1ff',
|
|
75
|
+
10: '#d8c2ff',
|
|
76
|
+
20: '#c4a4ff',
|
|
77
|
+
30: '#b186ff',
|
|
78
|
+
Tertiary: '#9d67ff',
|
|
79
|
+
50: '#8a49ff',
|
|
80
|
+
60: '#6712ff',
|
|
81
|
+
70: '#4e00db',
|
|
82
|
+
80: '#3b00a4'}}
|
|
83
|
+
/>
|
|
84
|
+
<ColorItem
|
|
85
|
+
title="Pix Success"
|
|
86
|
+
subtitle="$pix-success-"
|
|
87
|
+
colors={{5: '#ecfdf5',
|
|
88
|
+
10: '#d1fae5',
|
|
89
|
+
20: '#a7f3d0',
|
|
90
|
+
30: '#6ee7b7',
|
|
91
|
+
40: '#34d399',
|
|
92
|
+
50: '#27b481',
|
|
93
|
+
60: '#14865d',
|
|
94
|
+
70: '#176c4d',
|
|
95
|
+
80: '#104834'}}
|
|
96
|
+
/>
|
|
97
|
+
<ColorItem
|
|
98
|
+
title="Pix Warning"
|
|
99
|
+
subtitle="$pix-warning-"
|
|
100
|
+
colors={{5: '#fff9e6',
|
|
101
|
+
10: '#fff1c5',
|
|
102
|
+
20: '#ffe381',
|
|
103
|
+
30: '#ffd235',
|
|
104
|
+
40: '#ffbe00',
|
|
105
|
+
50: '#eaa600',
|
|
106
|
+
60: '#ce8900',
|
|
107
|
+
70: '#ac6a00',
|
|
108
|
+
80: '#874d00'}}
|
|
109
|
+
/>
|
|
110
|
+
<ColorItem
|
|
111
|
+
title="Pix Error"
|
|
112
|
+
subtitle="$pix-error-"
|
|
113
|
+
colors={{5: '#fef2f2',
|
|
114
|
+
10: '#fee2e2',
|
|
115
|
+
20: '#fecaca',
|
|
116
|
+
30: '#fca5a5',
|
|
117
|
+
40: '#f87171',
|
|
118
|
+
50: '#ef4444',
|
|
119
|
+
60: '#dc2626',
|
|
120
|
+
70: '#b91c1c',
|
|
121
|
+
80: '#991b1b'}}
|
|
122
|
+
/>
|
|
123
|
+
<ColorItem
|
|
124
|
+
title="Pix Neutral ( 0 - 40 )"
|
|
125
|
+
subtitle="$pix-neutral-"
|
|
126
|
+
colors={{0: '#ffffff',
|
|
127
|
+
5: '#fafbfc',
|
|
128
|
+
10: '#f4f5f7',
|
|
129
|
+
15: '#eaecf0',
|
|
130
|
+
20: '#dfe1e6',
|
|
131
|
+
22: '#c1c7d0',
|
|
132
|
+
25: '#a5adba',
|
|
133
|
+
30: '#97a0af',
|
|
134
|
+
35: '#8993a4',
|
|
135
|
+
40: '#7a869a'}}
|
|
136
|
+
/>
|
|
137
|
+
<ColorItem
|
|
138
|
+
title="Pix Neutral ( 45 - 110 )"
|
|
139
|
+
subtitle="$pix-neutral-"
|
|
140
|
+
colors={{45: '#6b778c',
|
|
141
|
+
50: '#5e6c84',
|
|
142
|
+
60: '#505f79',
|
|
143
|
+
70: '#344563',
|
|
144
|
+
80: '#253858',
|
|
145
|
+
90: '#172b4d',
|
|
146
|
+
100: '#091e42',
|
|
147
|
+
110: '#07142e'}}
|
|
148
|
+
/>
|
|
149
|
+
<ColorItem
|
|
150
|
+
title="Pix Shades"
|
|
151
|
+
subtitle="$pix-shades-"
|
|
152
|
+
colors={{100: '#000000'}}
|
|
153
|
+
/>
|
|
154
|
+
<ColorItem
|
|
155
|
+
title="Pix Domain Information"
|
|
156
|
+
subtitle="$pix-information-"
|
|
157
|
+
colors={{Dark: '#f24645',
|
|
158
|
+
Light: '#f1a141'}}
|
|
159
|
+
/>
|
|
160
|
+
<ColorItem
|
|
161
|
+
title="Pix Domain Content"
|
|
162
|
+
subtitle="$pix-content-"
|
|
163
|
+
colors={{Dark: '#1a8c89',
|
|
164
|
+
Light: '#52d987'}}
|
|
165
|
+
/>
|
|
166
|
+
<ColorItem
|
|
167
|
+
title="Pix Domain Communication"
|
|
168
|
+
subtitle="$pix-communication-"
|
|
169
|
+
colors={{Dark: '#3d68ff',
|
|
170
|
+
Light: '#12a3ff'}}
|
|
171
|
+
/>
|
|
172
|
+
<ColorItem
|
|
173
|
+
title="Pix Domain Security"
|
|
174
|
+
subtitle="$pix-security-"
|
|
175
|
+
colors={{Dark: '#ac008d',
|
|
176
|
+
Light: '#ff3f94'}}
|
|
177
|
+
/>
|
|
178
|
+
<ColorItem
|
|
179
|
+
title="Pix Domain Environment"
|
|
180
|
+
subtitle="$pix-environment-"
|
|
181
|
+
colors={{Dark: '#5e2563',
|
|
182
|
+
Light: '#564da6'}}
|
|
183
|
+
/>
|
|
184
|
+
</ColorPalette>
|
|
185
|
+
|
|
186
|
+
#### GRADIENT
|
|
187
|
+
|
|
188
|
+
<ColorPalette>
|
|
189
|
+
<ColorItem
|
|
190
|
+
title="Primary Pix App"
|
|
191
|
+
subtitle="$pix-primary-app-gradient"
|
|
192
|
+
colors={{ PrimaryPixApp: 'linear-gradient(91.59deg, #3d68ff 0%, #8845ff 100%)'}}
|
|
193
|
+
/>
|
|
194
|
+
<ColorItem
|
|
195
|
+
title="Secondary Pix App"
|
|
196
|
+
subtitle="$pix-secondary-app-gradient"
|
|
197
|
+
colors={{ SecondaryPixAppGradient: 'linear-gradient(91.59deg, #fedc41 0%, #ff9f00 100%)'}}
|
|
198
|
+
/>
|
|
199
|
+
<ColorItem
|
|
200
|
+
title="Primary Certif"
|
|
201
|
+
subtitle="$pix-primary-certif-gradient"
|
|
202
|
+
colors={{ PrimaryCertif: 'linear-gradient(91.59deg, #52d987 0%, #1a8c89 100%)'}}
|
|
203
|
+
/>
|
|
204
|
+
<ColorItem
|
|
205
|
+
title="Primary Orga"
|
|
206
|
+
subtitle="$pix-primary-orga-gradient"
|
|
207
|
+
colors={{ PrimaryOrga: 'linear-gradient(91.59deg, #00ddff 0%, #0095c0 100%)'}}
|
|
208
|
+
/>
|
|
209
|
+
<ColorItem
|
|
210
|
+
title="Secondary Orga"
|
|
211
|
+
subtitle="$pix-primary-secondary-gradient"
|
|
212
|
+
colors={{SecondaryOrga: 'linear-gradient(91.59deg, #0d7dc4 0%, #213371 100%)'}}
|
|
213
|
+
/>
|
|
214
|
+
<ColorItem
|
|
215
|
+
title="Domain Information"
|
|
216
|
+
subtitle="$pix-information-gradient"
|
|
217
|
+
colors={{DomainInformation: 'linear-gradient(180deg, #f24645 0%, #f1a141 100%)'}}
|
|
218
|
+
/>
|
|
219
|
+
<ColorItem
|
|
220
|
+
title="Domain Content"
|
|
221
|
+
subtitle="$pix-content-gradient"
|
|
222
|
+
colors={{DomainContent: 'linear-gradient(180deg, #1a8c89 0%, #52d987 100%)'}}
|
|
223
|
+
/>
|
|
224
|
+
<ColorItem
|
|
225
|
+
title="Domain Communication"
|
|
226
|
+
subtitle="$pix-communication-gradient"
|
|
227
|
+
colors={{DomainCommunication: 'linear-gradient(180deg, #3d68ff 0%, #12a3ff 100%)'}}
|
|
228
|
+
/>
|
|
229
|
+
<ColorItem
|
|
230
|
+
title="Domain Security"
|
|
231
|
+
subtitle="$pix-security-gradient"
|
|
232
|
+
colors={{DomainSecurity: 'linear-gradient(180deg, #ac008d 0%, #ff3f94 100%)'}}
|
|
233
|
+
/>
|
|
234
|
+
<ColorItem
|
|
235
|
+
title="Domain Environment"
|
|
236
|
+
subtitle="$pix-environment-gradient"
|
|
237
|
+
colors={{DomainEnvironment: 'linear-gradient(180deg, #5e2563 0%, #564da6 100%)'}}
|
|
238
|
+
/>
|
|
239
|
+
</ColorPalette>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
2
|
|
|
3
|
-
<Meta title="Utiliser Pix UI/Design Tokens" />
|
|
3
|
+
<Meta title="Utiliser Pix UI/Design Tokens/ Utilisation" />
|
|
4
4
|
|
|
5
5
|
# Design Tokens
|
|
6
6
|
|
|
@@ -29,4 +29,32 @@ Par exemple :
|
|
|
29
29
|
.organization-title {
|
|
30
30
|
@include design-tokens.text-bold;
|
|
31
31
|
}
|
|
32
|
+
````
|
|
33
|
+
|
|
34
|
+
## Définir les alertes
|
|
35
|
+
|
|
36
|
+
Les couleurs pour définir un état d'une alerte ont été attribuées pour uniformiser le visuel sur toutes les applications.
|
|
37
|
+
|
|
38
|
+
### Success
|
|
39
|
+
```
|
|
40
|
+
Texte ou bordure : $pix-success-70
|
|
41
|
+
Background : $pix-success-10
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Warning
|
|
45
|
+
```
|
|
46
|
+
Texte ou bordure : $pix-warning-60
|
|
47
|
+
Background : $pix-warning-10
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Error
|
|
51
|
+
```
|
|
52
|
+
Texte ou bordure : $pix-error-70
|
|
53
|
+
Background : $pix-error-10
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Information
|
|
57
|
+
```
|
|
58
|
+
Texte ou bordure : $pix-primary-70
|
|
59
|
+
Background : $pix-primary-10
|
|
32
60
|
```
|
package/package.json
CHANGED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
|
-
<Meta title="Utiliser Pix UI/Pix Design Tokens" />
|
|
4
|
-
|
|
5
|
-
# Design Tokens
|
|
6
|
-
|
|
7
|
-
> Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icônes, etc.)
|
|
8
|
-
|
|
9
|
-
## Utiliser les classes, mixins et variables dans votre css
|
|
10
|
-
|
|
11
|
-
En ajoutant la dépendance dans votre application avec `npm install`, pour avoir accès aux classes, mixins et variables,
|
|
12
|
-
il faut ajouter le code ci-dessous dans le `new EmberApp()` de votre `ember-cli.build.js` qui se trouve à la racine du projet :
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
sassOptions: {
|
|
16
|
-
includePaths: ['node_modules/@1024pix/pix-ui/addon/styles'],
|
|
17
|
-
},
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Et aussi importer les design-tokens avec `@import 'design-tokens';` dans `app/styles/app.scss`.
|
|
21
|
-
|
|
22
|
-
Par la suite vous aurez accès à toutes les variables des design tokens avec le `$`, par exemple `border: 1px solid $blue;`
|
|
23
|
-
et les mixins avec `@include 'nom du mixin';`
|