@indico-data/design-system 3.0.10 → 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 (116) hide show
  1. package/.storybook/main.ts +3 -0
  2. package/lib/components/badge/types.d.ts +4 -0
  3. package/lib/components/button/types.d.ts +52 -2
  4. package/lib/components/card/Card.d.ts +5 -0
  5. package/lib/components/floatUI/types.d.ts +7 -0
  6. package/lib/components/forms/checkbox/Checkbox.d.ts +7 -0
  7. package/lib/components/forms/date/datePicker/types.d.ts +10 -0
  8. package/lib/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.d.ts +16 -0
  9. package/lib/components/forms/date/inputDatePicker/SingleInputDatePicker.d.ts +8 -0
  10. package/lib/components/forms/date/inputDateRangePicker/InputDateRangePicker.d.ts +9 -0
  11. package/lib/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.d.ts +9 -0
  12. package/lib/components/forms/numberInput/NumberInput.d.ts +4 -0
  13. package/lib/components/forms/passwordInput/PasswordInput.d.ts +1 -0
  14. package/lib/components/forms/radio/Radio.d.ts +6 -0
  15. package/lib/components/forms/select/Select.d.ts +10 -0
  16. package/lib/components/forms/textarea/Textarea.d.ts +7 -0
  17. package/lib/components/forms/timePicker/TimePicker.d.ts +5 -0
  18. package/lib/components/forms/toggle/Toggle.d.ts +7 -0
  19. package/lib/components/icons/types.d.ts +5 -0
  20. package/lib/components/loading-indicators/BarSpinner/BarSpinner.d.ts +4 -0
  21. package/lib/components/loading-indicators/CirclePulse/CirclePulse.d.ts +2 -0
  22. package/lib/components/menu/Menu.d.ts +1 -0
  23. package/lib/components/modal/types.d.ts +22 -0
  24. package/lib/components/pagination/types.d.ts +4 -0
  25. package/lib/components/pill/Pill.d.ts +1 -1
  26. package/lib/components/pill/Pill.stories.d.ts +2 -1
  27. package/lib/components/pill/types.d.ts +8 -2
  28. package/lib/components/skeleton/Skeleton.d.ts +5 -0
  29. package/lib/components/stepper/types.d.ts +9 -0
  30. package/lib/components/table/types.d.ts +9 -0
  31. package/lib/components/tanstackTable/TankstackTable.types.d.ts +25 -0
  32. package/lib/components/tanstackTable/components/ActionBar/ActionBar.d.ts +4 -0
  33. package/lib/components/tooltip/Tooltip.d.ts +6 -0
  34. package/lib/components/truncate/types.d.ts +4 -0
  35. package/lib/index.css +4977 -5020
  36. package/lib/index.d.ts +268 -5
  37. package/lib/index.esm.css +4977 -5020
  38. package/lib/index.esm.js +3 -2
  39. package/lib/index.esm.js.map +1 -1
  40. package/lib/index.js +3 -2
  41. package/lib/index.js.map +1 -1
  42. package/lib/types.d.ts +3 -1
  43. package/package.json +2 -1
  44. package/src/components/badge/Badge.stories.tsx +0 -4
  45. package/src/components/badge/types.ts +4 -0
  46. package/src/components/button/Button.stories.tsx +5 -18
  47. package/src/components/button/types.ts +52 -2
  48. package/src/components/card/Card.stories.tsx +0 -5
  49. package/src/components/card/Card.tsx +5 -0
  50. package/src/components/floatUI/FloatUI.stories.tsx +0 -11
  51. package/src/components/floatUI/types.ts +7 -0
  52. package/src/components/forms/checkbox/Checkbox.stories.tsx +0 -7
  53. package/src/components/forms/checkbox/Checkbox.tsx +7 -0
  54. package/src/components/forms/date/datePicker/DatePicker.stories.tsx +0 -33
  55. package/src/components/forms/date/datePicker/types.ts +10 -0
  56. package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.stories.tsx +5 -22
  57. package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.tsx +16 -0
  58. package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.tsx +0 -25
  59. package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.tsx +8 -0
  60. package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx +0 -32
  61. package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx +9 -0
  62. package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.stories.tsx +0 -28
  63. package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.tsx +9 -0
  64. package/src/components/forms/numberInput/NumberInput.stories.tsx +0 -4
  65. package/src/components/forms/numberInput/NumberInput.tsx +4 -0
  66. package/src/components/forms/passwordInput/PasswordInput.stories.tsx +0 -1
  67. package/src/components/forms/passwordInput/PasswordInput.tsx +1 -0
  68. package/src/components/forms/radio/Radio.stories.tsx +0 -6
  69. package/src/components/forms/radio/Radio.tsx +6 -0
  70. package/src/components/forms/select/Select.stories.tsx +1 -14
  71. package/src/components/forms/select/Select.tsx +10 -0
  72. package/src/components/forms/textarea/Textarea.stories.tsx +0 -7
  73. package/src/components/forms/textarea/Textarea.tsx +7 -0
  74. package/src/components/forms/timePicker/TimePicker.stories.tsx +0 -5
  75. package/src/components/forms/timePicker/TimePicker.tsx +5 -0
  76. package/src/components/forms/toggle/Toggle.stories.tsx +0 -7
  77. package/src/components/forms/toggle/Toggle.tsx +7 -0
  78. package/src/components/icons/Icon.stories.tsx +0 -7
  79. package/src/components/icons/types.ts +5 -0
  80. package/src/components/loading-indicators/BarSpinner/BarSpinner.stories.tsx +0 -5
  81. package/src/components/loading-indicators/BarSpinner/BarSpinner.tsx +4 -0
  82. package/src/components/loading-indicators/CirclePulse/CirclePulse.stories.tsx +0 -3
  83. package/src/components/loading-indicators/CirclePulse/CirclePulse.tsx +2 -0
  84. package/src/components/menu/Menu.stories.tsx +0 -3
  85. package/src/components/menu/Menu.tsx +1 -0
  86. package/src/components/modal/Modal.stories.tsx +1 -25
  87. package/src/components/modal/types.ts +22 -0
  88. package/src/components/pagination/Pagination.stories.tsx +0 -4
  89. package/src/components/pagination/types.ts +4 -0
  90. package/src/components/pill/Pill.mdx +6 -2
  91. package/src/components/pill/Pill.stories.tsx +50 -61
  92. package/src/components/pill/Pill.tsx +4 -2
  93. package/src/components/pill/__tests__/Pill.test.tsx +28 -10
  94. package/src/components/pill/styles/Pill.scss +12 -129
  95. package/src/components/pill/types.ts +8 -2
  96. package/src/components/skeleton/Skeleton.stories.tsx +0 -7
  97. package/src/components/skeleton/Skeleton.tsx +5 -0
  98. package/src/components/stepper/Stepper.stories.tsx +0 -19
  99. package/src/components/stepper/types.ts +9 -0
  100. package/src/components/table/Table.stories.tsx +0 -35
  101. package/src/components/table/types.ts +9 -0
  102. package/src/components/tanstackTable/TankstackTable.types.ts +25 -0
  103. package/src/components/tanstackTable/TanstackTable.stories.tsx +0 -29
  104. package/src/components/tanstackTable/components/ActionBar/ActionBar.stories.tsx +0 -4
  105. package/src/components/tanstackTable/components/ActionBar/ActionBar.tsx +4 -0
  106. package/src/components/tooltip/Tooltip.stories.tsx +0 -8
  107. package/src/components/tooltip/Tooltip.tsx +6 -0
  108. package/src/components/truncate/Truncate.stories.tsx +0 -8
  109. package/src/components/truncate/types.ts +4 -0
  110. package/src/styles/_colors.scss +9 -0
  111. package/src/styles/globals.scss +22 -0
  112. package/src/styles/index.scss +11 -10
  113. package/src/styles/variables/_colors.scss +269 -2
  114. package/src/types.ts +12 -8
  115. package/src/styles/variables/themes/dark.scss +0 -267
  116. 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
- }