@indico-data/design-system 3.1.0 → 3.2.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.
Files changed (25) hide show
  1. package/lib/components/pill/Pill.d.ts +1 -1
  2. package/lib/components/pill/Pill.stories.d.ts +2 -1
  3. package/lib/components/pill/types.d.ts +5 -2
  4. package/lib/index.css +4977 -5020
  5. package/lib/index.d.ts +6 -3
  6. package/lib/index.esm.css +4977 -5020
  7. package/lib/index.esm.js +3 -2
  8. package/lib/index.esm.js.map +1 -1
  9. package/lib/index.js +3 -2
  10. package/lib/index.js.map +1 -1
  11. package/lib/types.d.ts +3 -1
  12. package/package.json +1 -1
  13. package/src/components/pill/Pill.mdx +6 -2
  14. package/src/components/pill/Pill.stories.tsx +50 -58
  15. package/src/components/pill/Pill.tsx +4 -2
  16. package/src/components/pill/__tests__/Pill.test.tsx +28 -10
  17. package/src/components/pill/styles/Pill.scss +12 -129
  18. package/src/components/pill/types.ts +5 -2
  19. package/src/styles/_colors.scss +9 -0
  20. package/src/styles/globals.scss +22 -0
  21. package/src/styles/index.scss +11 -10
  22. package/src/styles/variables/_colors.scss +269 -2
  23. package/src/types.ts +12 -8
  24. package/src/styles/variables/themes/dark.scss +0 -267
  25. package/src/styles/variables/themes/light.scss +0 -266
package/src/styles/variables/themes/light.scss DELETED
@@ -1,266 +0,0 @@
1
- :root [data-theme='light'] {
2
- // Primary Color
3
- --pf-primary-color: #50647c;
4
-
5
- --pf-primary-color-50: #f9fafb;
6
- --pf-primary-color-100: #f3f5f7;
7
- --pf-primary-color-150: #eceff3;
8
- --pf-primary-color-200: #e6eaef;
9
- --pf-primary-color-250: #d3dbe3;
10
- --pf-primary-color-300: #c1cbd7;
11
- --pf-primary-color-400: #7c92ab;
12
- --pf-primary-color-450: #5f7895;
13
- --pf-primary-color-500: #50647c;
14
- --pf-primary-color-600: #243447;
15
- --pf-primary-color-700: #192534;
16
- --pf-primary-color-800: #111b28;
17
- --pf-primary-color-900: #0c141d;
18
-
19
- // Secondary Color
20
- --pf-secondary-color: #1474b8;
21
-
22
- --pf-secondary-color-50: #f8fafc;
23
- --pf-secondary-color-100: #f1f5f9;
24
- --pf-secondary-color-150: #e8f1f7;
25
- --pf-secondary-color-200: #deedf7;
26
- --pf-secondary-color-250: #c6dff1;
27
- --pf-secondary-color-300: #add1eb;
28
- --pf-secondary-color-400: #3ea2ea;
29
- --pf-secondary-color-450: #188bdc;
30
- --pf-secondary-color-500: #1474b8;
31
- --pf-secondary-color-550: #1268a5;
32
- --pf-secondary-color-600: #0f578a;
33
- --pf-secondary-color-700: #1d4058;
34
- --pf-secondary-color-800: #132939;
35
- --pf-secondary-color-900: #0e151b;
36
-
37
- // Tertiary Color
38
- --pf-tertiary-color: #6a7798;
39
-
40
- --pf-tertiary-color-50: #f8fafb;
41
- --pf-tertiary-color-100: #f4f7f9;
42
- --pf-tertiary-color-150: #ebf0f4;
43
- --pf-tertiary-color-200: #dae3eb;
44
- --pf-tertiary-color-250: #c3d2de;
45
- --pf-tertiary-color-300: #aabbcf;
46
- --pf-tertiary-color-400: #94a5c0;
47
- --pf-tertiary-color-450: #8593b3;
48
- --pf-tertiary-color-500: #6a7798;
49
- --pf-tertiary-color-600: #58637b;
50
- --pf-tertiary-color-700: #4b5364;
51
- --pf-tertiary-color-800: #2c303a;
52
- --pf-tertiary-color-900: #111317;
53
-
54
- // Gray Color
55
- --pf-gray-color: #808080;
56
-
57
- --pf-gray-color-50: #ffffff;
58
- --pf-gray-color-100: #f7f7f7;
59
- --pf-gray-color-150: #f2f2f2;
60
- --pf-gray-color-200: #e6e6e6;
61
- --pf-gray-color-250: #d9d9d9;
62
- --pf-gray-color-300: #cccccc;
63
- --pf-gray-color-400: #b2b2b2;
64
- --pf-gray-color-450: #949494;
65
- --pf-gray-color-500: #808080;
66
- --pf-gray-color-550: #666666;
67
- --pf-gray-color-600: #606060;
68
- --pf-gray-color-700: #4d4d4d;
69
- --pf-gray-color-800: #333333;
70
- --pf-gray-color-900: #000000;
71
-
72
- //Red color
73
- --pf-red-color: #a3292d;
74
-
75
- --pf-red-color-50: #fdf6f8;
76
- --pf-red-color-100: #fceeee;
77
- --pf-red-color-150: #fae5e6;
78
- --pf-red-color-200: #f9dcdd;
79
- --pf-red-color-250: #f6acaf;
80
- --pf-red-color-300: #f28c90;
81
- --pf-red-color-400: #ea3e44;
82
- --pf-red-color-450: #d0252a;
83
- --pf-red-color-500: #a3292d;
84
- --pf-red-color-600: #732629;
85
- --pf-red-color-700: #522325;
86
- --pf-red-color-800: #321b1c;
87
- --pf-red-color-900: #181011;
88
-
89
- //Pink color
90
- --pf-pink-color: #a3292d;
91
-
92
- --pf-pink-color-50: #fbf8f9;
93
- --pf-pink-color-100: #f8f2f4;
94
- --pf-pink-color-150: #f4ebee;
95
- --pf-pink-color-200: #f1e4e9;
96
- --pf-pink-color-250: #eacdd7;
97
- --pf-pink-color-300: #ebadc3;
98
- --pf-pink-color-400: #e6417b;
99
- --pf-pink-color-450: #c3285e;
100
- --pf-pink-color-500: #a32954;
101
- --pf-pink-color-600: #6b2e43;
102
- --pf-pink-color-700: #4c2935;
103
- --pf-pink-color-800: #321b23;
104
- --pf-pink-color-900: #1b0e13;
105
-
106
- //Orange color
107
- --pf-orange-color: #994b33;
108
-
109
- --pf-orange-color-50: #fcf9f7;
110
- --pf-orange-color-100: #faf2f0;
111
- --pf-orange-color-150: #f7ece8;
112
- --pf-orange-color-200: #f7e4de;
113
- --pf-orange-color-250: #f4cec2;
114
- --pf-orange-color-300: #f5b6a3;
115
- --pf-orange-color-400: #ea673e;
116
- --pf-orange-color-450: #c45331;
117
- --pf-orange-color-500: #994b33;
118
- --pf-orange-color-600: #6b3c2e;
119
- --pf-orange-color-700: #522e23;
120
- --pf-orange-color-800: #32201b;
121
- --pf-orange-color-900: #1b110e;
122
-
123
- //Yellow color
124
- --pf-yellow-color: #ad791f;
125
-
126
- --pf-yellow-color-50: #fdfbf7;
127
- --pf-yellow-color-100: #fcf7ee;
128
- --pf-yellow-color-150: #faf3e5;
129
- --pf-yellow-color-200: #f9eedc;
130
- --pf-yellow-color-250: #f4e2c2;
131
- --pf-yellow-color-300: #f0d6a8;
132
- --pf-yellow-color-400: #eaab3e;
133
- --pf-yellow-color-450: #dc9518;
134
- --pf-yellow-color-500: #ad791f;
135
- --pf-yellow-color-550: #976f00;
136
- --pf-yellow-color-600: #825b17;
137
- --pf-yellow-color-700: #58421d;
138
- --pf-yellow-color-800: #32291b;
139
- --pf-yellow-color-900: #1b160e;
140
-
141
- //Green Color
142
- --pf-green-color: #14b869;
143
-
144
- --pf-green-color-50: #f7fdfa;
145
- --pf-green-color-100: #effbf5;
146
- --pf-green-color-150: #e7f9f0;
147
- --pf-green-color-200: #def7eb;
148
- --pf-green-color-250: #c2f4dc;
149
- --pf-green-color-300: #a8f0cd;
150
- --pf-green-color-400: #3eea97;
151
- --pf-green-color-450: #18dc7e;
152
- --pf-green-color-500: #14b869;
153
- --pf-green-color-600: #17824e;
154
- --pf-green-color-700: #175e3c;
155
- --pf-green-color-800: #173627;
156
- --pf-green-color-900: #0e1b15;
157
-
158
- // teal Color
159
- --pf-teal-color: #29a3a3;
160
-
161
- --pf-teal-color-50: #f6fdfd;
162
- --pf-teal-color-100: #eefcfc;
163
- --pf-teal-color-150: #e5fafa;
164
- --pf-teal-color-200: #dcf9f9;
165
- --pf-teal-color-250: #bff8f8;
166
- --pf-teal-color-300: #a3f5f5;
167
- --pf-teal-color-400: #3eeaea;
168
- --pf-teal-color-450: #25d0d0;
169
- --pf-teal-color-500: #29a3a3;
170
- --pf-teal-color-550: #267373;
171
- --pf-teal-color-600: #1c5656;
172
- --pf-teal-color-700: #235252;
173
- --pf-teal-color-800: #1b3232;
174
- --pf-teal-color-900: #101818;
175
-
176
- --pf-brand-color: #2989ff;
177
-
178
- --pf-brand-color-50: #f6fafd;
179
- --pf-brand-color-100: #eef4fc;
180
- --pf-brand-color-150: #e5effa;
181
- --pf-brand-color-200: #d8e9fd;
182
- --pf-brand-color-250: #bbd8fb;
183
- --pf-brand-color-300: #9ec7fa;
184
- --pf-brand-color-400: #2989ff;
185
- --pf-brand-color-450: #0070f5;
186
- --pf-brand-color-500: #005ccc;
187
- --pf-brand-color-550: #0054b8;
188
- --pf-brand-color-600: #004599;
189
- --pf-brand-color-700: #06356f;
190
- --pf-brand-color-800: #082345;
191
- --pf-brand-color-900: #061323;
192
-
193
- // Purple Color
194
- --pf-purple-color: #5c29a3;
195
-
196
- --pf-purple-color-50: #f9f6fc;
197
- --pf-purple-color-100: #f4f0fa;
198
- --pf-purple-color-150: #eee8f7;
199
- --pf-purple-color-200: #e9def7;
200
- --pf-purple-color-250: #d8c6f1;
201
- --pf-purple-color-300: #c7adeb;
202
- --pf-purple-color-400: #8849df;
203
- --pf-purple-color-450: #6e31c4;
204
- --pf-purple-color-500: #5c29a3;
205
- --pf-purple-color-600: #451f7a;
206
- --pf-purple-color-700: #361d58;
207
- --pf-purple-color-800: #241736;
208
- --pf-purple-color-900: #130e1b;
209
-
210
- // White color
211
- --pf-white-color: #ffffff;
212
- --pf-white-color-1: rgba(255, 255, 255, 0.01);
213
- --pf-white-color-3: rgba(255, 255, 255, 0.03);
214
- --pf-white-color-5: rgba(255, 255, 255, 0.05);
215
- --pf-white-color-10: rgba(255, 255, 255, 0.1);
216
- --pf-white-color-15: rgba(255, 255, 255, 0.15);
217
- --pf-white-color-20: rgba(255, 255, 255, 0.2);
218
- --pf-white-color-30: rgba(255, 255, 255, 0.3);
219
- --pf-white-color-40: rgba(255, 255, 255, 0.4);
220
- --pf-white-color-50: rgba(255, 255, 255, 0.5);
221
- --pf-white-color-60: rgba(255, 255, 255, 0.6);
222
- --pf-white-color-70: rgba(255, 255, 255, 0.7);
223
- --pf-white-color-80: rgba(255, 255, 255, 0.8);
224
- --pf-white-color-90: rgba(255, 255, 255, 0.9);
225
- --pf-white-color-100: rgba(255, 255, 255, 1);
226
-
227
- // Black color
228
- --pf-black-color: #000000;
229
- --pf-black-color-1: rgba(0, 0, 0, 0.01);
230
- --pf-black-color-3: rgba(0, 0, 0, 0.03);
231
- --pf-black-color-5: rgba(0, 0, 0, 0.05);
232
- --pf-black-color-10: rgba(0, 0, 0, 0.1);
233
- --pf-black-color-15: rgba(0, 0, 0, 0.15);
234
- --pf-black-color-20: rgba(0, 0, 0, 0.2);
235
- --pf-black-color-30: rgba(0, 0, 0, 0.3);
236
- --pf-black-color-40: rgba(0, 0, 0, 0.4);
237
- --pf-black-color-50: rgba(0, 0, 0, 0.5);
238
- --pf-black-color-60: rgba(0, 0, 0, 0.6);
239
- --pf-black-color-70: rgba(0, 0, 0, 0.7);
240
- --pf-black-color-80: rgba(0, 0, 0, 0.8);
241
- --pf-black-color-90: rgba(0, 0, 0, 0.9);
242
- --pf-black-color-100: rgba(0, 0, 0, 1);
243
-
244
- // Utility Colors
245
- --pf-error-color: var(--pf-red-color-450);
246
- --pf-error-color-dark: var(--pf-red-color-500);
247
- --pf-error-color-light: var(--pf-red-color-300);
248
- --pf-success-color: var(--pf-green-color-500);
249
- --pf-success-color-dark: var(--pf-green-color-600);
250
- --pf-success-color-light: var(--pf-green-color-400);
251
- --pf-warning-color: var(--pf-yellow-color-400);
252
- --pf-warning-color-dark: var(--pf-yellow-color-550);
253
- --pf-warning-color-light: var(--pf-yellow-color-300);
254
- --pf-neutral-color: var(--pf-gray-color-500);
255
- --pf-neutral-color-dark: var(--pf-gray-color-600);
256
- --pf-neutral-color-light: var(--pf-gray-color-400);
257
- --pf-info-color: var(--pf-secondary-color-450);
258
- --pf-info-color-dark: var(--pf-secondary-color-550);
259
- --pf-info-color-light: var(--pf-secondary-color-400);
260
- --pf-brand-color: var(--pf-brand-color-450);
261
- --pf-brand-color-dark: var(--pf-brand-color-550);
262
- --pf-brand-color-light: var(--pf-brand-color-300);
263
- --pf-pending-color: var(--pf-pink-color-500);
264
- --pf-pending-color-dark: var(--pf-pink-color-600);
265
- --pf-pending-color-light: var(--pf-pink-color-300);
266
- }