@redseed/redseed-ui-tailwindcss 5.4.4 → 6.0.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 (22) hide show
  1. package/colors.css +0 -68
  2. package/colors_dark_mode.css +67 -0
  3. package/components/button_group_item.css +1 -1
  4. package/components/button_slot.css +2 -2
  5. package/components/checkbox_card.css +1 -1
  6. package/components/form_field_checkbox.css +2 -3
  7. package/components/form_field_combobox.css +1 -1
  8. package/components/form_field_select.css +1 -1
  9. package/components/form_field_text.css +1 -2
  10. package/components/form_field_textarea.css +1 -2
  11. package/components/link_slot.css +1 -1
  12. package/components/modal.css +1 -2
  13. package/components/pagination.css +1 -2
  14. package/components/radio_card.css +1 -1
  15. package/components/switcher_item.css +1 -2
  16. package/components/toggle.css +1 -2
  17. package/index.css +3 -0
  18. package/index.js +1 -157
  19. package/package.json +4 -7
  20. package/theme.css +557 -0
  21. package/tokens.css +49 -0
  22. package/colors.js +0 -614
package/theme.css ADDED
@@ -0,0 +1,557 @@
1
+ @theme {
2
+
3
+ /* RedSeed font family */
4
+ --font-redseed: 'new-rubrik', var(--font-sans);
5
+
6
+ /* Replace default breakpoints with RedSeed breakpoints */
7
+ --breakpoint-*: initial; /* remove default breakpoints */
8
+
9
+ --breakpoint-2xs: 24rem; /* 384px */
10
+ --breakpoint-xs: 30rem; /* 480px */
11
+ --breakpoint-sm: 40rem; /* 640px */
12
+ --breakpoint-md: 48rem; /* 768px */
13
+ --breakpoint-lg: 64rem; /* 1024px */
14
+ --breakpoint-xl: 80rem; /* 1280px */
15
+ --breakpoint-2xl: 96rem; /* 1536px */
16
+ --breakpoint-3xl: 120rem; /* 1920px */
17
+
18
+ --shadow-full: 0 0 6px 1px rgb(0 0 0 / 0.2);
19
+ --shadow-full-light: 0 0 6px 1px rgb(50 60 69 / 0.1);
20
+ }
21
+
22
+ @theme inline {
23
+
24
+ /* RedSeed colors */
25
+ --color-*: initial; /* remove default colors */
26
+
27
+ --color-white: var(--Colors-Base-white);
28
+ --color-black: var(--Colors-Base-black);
29
+ --color-transparent: var(--Colors-Base-transparent);
30
+
31
+ --color-grey-25: var(--Colors-Grey-25);
32
+ --color-grey-50: var(--Colors-Grey-50);
33
+ --color-grey-100: var(--Colors-Grey-100);
34
+ --color-grey-200: var(--Colors-Grey-200);
35
+ --color-grey-300: var(--Colors-Grey-300);
36
+ --color-grey-400: var(--Colors-Grey-400);
37
+ --color-grey-500: var(--Colors-Grey-500);
38
+ --color-grey-600: var(--Colors-Grey-600);
39
+ --color-grey-700: var(--Colors-Grey-700);
40
+ --color-grey-800: var(--Colors-Grey-800);
41
+ --color-grey-900: var(--Colors-Grey-900);
42
+ --color-grey-950: var(--Colors-Grey-950);
43
+
44
+ --color-grey-blue-25: var(--Colors-Grey-blue-25);
45
+ --color-grey-blue-50: var(--Colors-Grey-blue-50);
46
+ --color-grey-blue-100: var(--Colors-Grey-blue-100);
47
+ --color-grey-blue-200: var(--Colors-Grey-blue-200);
48
+ --color-grey-blue-300: var(--Colors-Grey-blue-300);
49
+ --color-grey-blue-400: var(--Colors-Grey-blue-400);
50
+ --color-grey-blue-500: var(--Colors-Grey-blue-500);
51
+ --color-grey-blue-600: var(--Colors-Grey-blue-600);
52
+ --color-grey-blue-700: var(--Colors-Grey-blue-700);
53
+ --color-grey-blue-800: var(--Colors-Grey-blue-800);
54
+ --color-grey-blue-900: var(--Colors-Grey-blue-900);
55
+ --color-grey-blue-950: var(--Colors-Grey-blue-950);
56
+
57
+ --color-grey-cool-25: var(--Colors-Grey-cool-25);
58
+ --color-grey-cool-50: var(--Colors-Grey-cool-50);
59
+ --color-grey-cool-100: var(--Colors-Grey-cool-100);
60
+ --color-grey-cool-200: var(--Colors-Grey-cool-200);
61
+ --color-grey-cool-300: var(--Colors-Grey-cool-300);
62
+ --color-grey-cool-400: var(--Colors-Grey-cool-400);
63
+ --color-grey-cool-500: var(--Colors-Grey-cool-500);
64
+ --color-grey-cool-600: var(--Colors-Grey-cool-600);
65
+ --color-grey-cool-700: var(--Colors-Grey-cool-700);
66
+ --color-grey-cool-800: var(--Colors-Grey-cool-800);
67
+ --color-grey-cool-900: var(--Colors-Grey-cool-900);
68
+ --color-grey-cool-950: var(--Colors-Grey-cool-950);
69
+
70
+ --color-grey-modern-25: var(--Colors-Grey-modern-25);
71
+ --color-grey-modern-50: var(--Colors-Grey-modern-50);
72
+ --color-grey-modern-100: var(--Colors-Grey-modern-100);
73
+ --color-grey-modern-200: var(--Colors-Grey-modern-200);
74
+ --color-grey-modern-300: var(--Colors-Grey-modern-300);
75
+ --color-grey-modern-400: var(--Colors-Grey-modern-400);
76
+ --color-grey-modern-500: var(--Colors-Grey-modern-500);
77
+ --color-grey-modern-600: var(--Colors-Grey-modern-600);
78
+ --color-grey-modern-700: var(--Colors-Grey-modern-700);
79
+ --color-grey-modern-800: var(--Colors-Grey-modern-800);
80
+ --color-grey-modern-900: var(--Colors-Grey-modern-900);
81
+ --color-grey-modern-950: var(--Colors-Grey-modern-950);
82
+
83
+ --color-grey-neutral-25: var(--Colors-Grey-neutral-25);
84
+ --color-grey-neutral-50: var(--Colors-Grey-neutral-50);
85
+ --color-grey-neutral-100: var(--Colors-Grey-neutral-100);
86
+ --color-grey-neutral-200: var(--Colors-Grey-neutral-200);
87
+ --color-grey-neutral-300: var(--Colors-Grey-neutral-300);
88
+ --color-grey-neutral-400: var(--Colors-Grey-neutral-400);
89
+ --color-grey-neutral-500: var(--Colors-Grey-neutral-500);
90
+ --color-grey-neutral-600: var(--Colors-Grey-neutral-600);
91
+ --color-grey-neutral-700: var(--Colors-Grey-neutral-700);
92
+ --color-grey-neutral-800: var(--Colors-Grey-neutral-800);
93
+ --color-grey-neutral-900: var(--Colors-Grey-neutral-900);
94
+ --color-grey-neutral-950: var(--Colors-Grey-neutral-950);
95
+
96
+ --color-grey-iron-25: var(--Colors-Grey-iron-25);
97
+ --color-grey-iron-50: var(--Colors-Grey-iron-50);
98
+ --color-grey-iron-100: var(--Colors-Grey-iron-100);
99
+ --color-grey-iron-200: var(--Colors-Grey-iron-200);
100
+ --color-grey-iron-300: var(--Colors-Grey-iron-300);
101
+ --color-grey-iron-400: var(--Colors-Grey-iron-400);
102
+ --color-grey-iron-500: var(--Colors-Grey-iron-500);
103
+ --color-grey-iron-600: var(--Colors-Grey-iron-600);
104
+ --color-grey-iron-700: var(--Colors-Grey-iron-700);
105
+ --color-grey-iron-800: var(--Colors-Grey-iron-800);
106
+ --color-grey-iron-900: var(--Colors-Grey-iron-900);
107
+ --color-grey-iron-950: var(--Colors-Grey-iron-950);
108
+
109
+ --color-grey-true-25: var(--Colors-Grey-true-25);
110
+ --color-grey-true-50: var(--Colors-Grey-true-50);
111
+ --color-grey-true-100: var(--Colors-Grey-true-100);
112
+ --color-grey-true-200: var(--Colors-Grey-true-200);
113
+ --color-grey-true-300: var(--Colors-Grey-true-300);
114
+ --color-grey-true-400: var(--Colors-Grey-true-400);
115
+ --color-grey-true-500: var(--Colors-Grey-true-500);
116
+ --color-grey-true-600: var(--Colors-Grey-true-600);
117
+ --color-grey-true-700: var(--Colors-Grey-true-700);
118
+ --color-grey-true-800: var(--Colors-Grey-true-800);
119
+ --color-grey-true-900: var(--Colors-Grey-true-900);
120
+ --color-grey-true-950: var(--Colors-Grey-true-950);
121
+
122
+ --color-grey-warm-25: var(--Colors-Grey-warm-25);
123
+ --color-grey-warm-50: var(--Colors-Grey-warm-50);
124
+ --color-grey-warm-100: var(--Colors-Grey-warm-100);
125
+ --color-grey-warm-200: var(--Colors-Grey-warm-200);
126
+ --color-grey-warm-300: var(--Colors-Grey-warm-300);
127
+ --color-grey-warm-400: var(--Colors-Grey-warm-400);
128
+ --color-grey-warm-500: var(--Colors-Grey-warm-500);
129
+ --color-grey-warm-600: var(--Colors-Grey-warm-600);
130
+ --color-grey-warm-700: var(--Colors-Grey-warm-700);
131
+ --color-grey-warm-800: var(--Colors-Grey-warm-800);
132
+ --color-grey-warm-900: var(--Colors-Grey-warm-900);
133
+ --color-grey-warm-950: var(--Colors-Grey-warm-950);
134
+
135
+ --color-grey-alpha-25: var(--Colors-Grey-alpha-25);
136
+ --color-grey-alpha-50: var(--Colors-Grey-alpha-50);
137
+ --color-grey-alpha-100: var(--Colors-Grey-alpha-100);
138
+ --color-grey-alpha-200: var(--Colors-Grey-alpha-200);
139
+ --color-grey-alpha-300: var(--Colors-Grey-alpha-300);
140
+ --color-grey-alpha-400: var(--Colors-Grey-alpha-400);
141
+ --color-grey-alpha-500: var(--Colors-Grey-alpha-500);
142
+ --color-grey-alpha-600: var(--Colors-Grey-alpha-600);
143
+ --color-grey-alpha-700: var(--Colors-Grey-alpha-700);
144
+ --color-grey-alpha-800: var(--Colors-Grey-alpha-800);
145
+ --color-grey-alpha-900: var(--Colors-Grey-alpha-900);
146
+ --color-grey-alpha-950: var(--Colors-Grey-alpha-950);
147
+
148
+ --color-brand-25: var(--Colors-Brand-25);
149
+ --color-brand-50: var(--Colors-Brand-50);
150
+ --color-brand-100: var(--Colors-Brand-100);
151
+ --color-brand-200: var(--Colors-Brand-200);
152
+ --color-brand-300: var(--Colors-Brand-300);
153
+ --color-brand-400: var(--Colors-Brand-400);
154
+ --color-brand-500: var(--Colors-Brand-500);
155
+ --color-brand-600: var(--Colors-Brand-600);
156
+ --color-brand-700: var(--Colors-Brand-700);
157
+ --color-brand-800: var(--Colors-Brand-800);
158
+ --color-brand-900: var(--Colors-Brand-900);
159
+ --color-brand-950: var(--Colors-Brand-950);
160
+
161
+ --color-redseed-red-5: var(--Colors-RedSeed-Red-5);
162
+ --color-redseed-red-10: var(--Colors-RedSeed-Red-10);
163
+ --color-redseed-red-15: var(--Colors-RedSeed-Red-15);
164
+ --color-redseed-red-20: var(--Colors-RedSeed-Red-20);
165
+ --color-redseed-red-25: var(--Colors-RedSeed-Red-25);
166
+ --color-redseed-red-50: var(--Colors-RedSeed-Red-50);
167
+ --color-redseed-red-100: var(--Colors-RedSeed-Red-100);
168
+ --color-redseed-red-200: var(--Colors-RedSeed-Red-200);
169
+ --color-redseed-red-300: var(--Colors-RedSeed-Red-300);
170
+ --color-redseed-red-400: var(--Colors-RedSeed-Red-400);
171
+ --color-redseed-red-500: var(--Colors-RedSeed-Red-500);
172
+ --color-redseed-red-600: var(--Colors-RedSeed-Red-600);
173
+ --color-redseed-red-700: var(--Colors-RedSeed-Red-700);
174
+ --color-redseed-red-800: var(--Colors-RedSeed-Red-800);
175
+ --color-redseed-red-900: var(--Colors-RedSeed-Red-900);
176
+ --color-redseed-red-950: var(--Colors-RedSeed-Red-950);
177
+ --color-redseed-red-975: var(--Colors-RedSeed-Red-975);
178
+ --color-redseed-red-990: var(--Colors-RedSeed-Red-990);
179
+
180
+ --color-redseed-blue-5: var(--Colors-RedSeed-Blue-5);
181
+ --color-redseed-blue-10: var(--Colors-RedSeed-Blue-10);
182
+ --color-redseed-blue-15: var(--Colors-RedSeed-Blue-15);
183
+ --color-redseed-blue-20: var(--Colors-RedSeed-Blue-20);
184
+ --color-redseed-blue-25: var(--Colors-RedSeed-Blue-25);
185
+ --color-redseed-blue-50: var(--Colors-RedSeed-Blue-50);
186
+ --color-redseed-blue-100: var(--Colors-RedSeed-Blue-100);
187
+ --color-redseed-blue-200: var(--Colors-RedSeed-Blue-200);
188
+ --color-redseed-blue-300: var(--Colors-RedSeed-Blue-300);
189
+ --color-redseed-blue-400: var(--Colors-RedSeed-Blue-400);
190
+ --color-redseed-blue-500: var(--Colors-RedSeed-Blue-500);
191
+ --color-redseed-blue-600: var(--Colors-RedSeed-Blue-600);
192
+ --color-redseed-blue-700: var(--Colors-RedSeed-Blue-700);
193
+ --color-redseed-blue-800: var(--Colors-RedSeed-Blue-800);
194
+ --color-redseed-blue-900: var(--Colors-RedSeed-Blue-900);
195
+ --color-redseed-blue-950: var(--Colors-RedSeed-Blue-950);
196
+ --color-redseed-blue-975: var(--Colors-RedSeed-Blue-975);
197
+ --color-redseed-blue-990: var(--Colors-RedSeed-Blue-990);
198
+
199
+ --color-redseed-green-5: var(--Colors-RedSeed-Green-5);
200
+ --color-redseed-green-10: var(--Colors-RedSeed-Green-10);
201
+ --color-redseed-green-15: var(--Colors-RedSeed-Green-15);
202
+ --color-redseed-green-20: var(--Colors-RedSeed-Green-20);
203
+ --color-redseed-green-25: var(--Colors-RedSeed-Green-25);
204
+ --color-redseed-green-50: var(--Colors-RedSeed-Green-50);
205
+ --color-redseed-green-100: var(--Colors-RedSeed-Green-100);
206
+ --color-redseed-green-200: var(--Colors-RedSeed-Green-200);
207
+ --color-redseed-green-300: var(--Colors-RedSeed-Green-300);
208
+ --color-redseed-green-400: var(--Colors-RedSeed-Green-400);
209
+ --color-redseed-green-500: var(--Colors-RedSeed-Green-500);
210
+ --color-redseed-green-600: var(--Colors-RedSeed-Green-600);
211
+ --color-redseed-green-700: var(--Colors-RedSeed-Green-700);
212
+ --color-redseed-green-800: var(--Colors-RedSeed-Green-800);
213
+ --color-redseed-green-900: var(--Colors-RedSeed-Green-900);
214
+ --color-redseed-green-950: var(--Colors-RedSeed-Green-950);
215
+ --color-redseed-green-975: var(--Colors-RedSeed-Green-975);
216
+ --color-redseed-green-990: var(--Colors-RedSeed-Green-990);
217
+
218
+ --color-redseed-yellow-5: var(--Colors-RedSeed-Yellow-5);
219
+ --color-redseed-yellow-10: var(--Colors-RedSeed-Yellow-10);
220
+ --color-redseed-yellow-15: var(--Colors-RedSeed-Yellow-15);
221
+ --color-redseed-yellow-20: var(--Colors-RedSeed-Yellow-20);
222
+ --color-redseed-yellow-25: var(--Colors-RedSeed-Yellow-25);
223
+ --color-redseed-yellow-50: var(--Colors-RedSeed-Yellow-50);
224
+ --color-redseed-yellow-100: var(--Colors-RedSeed-Yellow-100);
225
+ --color-redseed-yellow-200: var(--Colors-RedSeed-Yellow-200);
226
+ --color-redseed-yellow-300: var(--Colors-RedSeed-Yellow-300);
227
+ --color-redseed-yellow-400: var(--Colors-RedSeed-Yellow-400);
228
+ --color-redseed-yellow-500: var(--Colors-RedSeed-Yellow-500);
229
+ --color-redseed-yellow-600: var(--Colors-RedSeed-Yellow-600);
230
+ --color-redseed-yellow-700: var(--Colors-RedSeed-Yellow-700);
231
+ --color-redseed-yellow-800: var(--Colors-RedSeed-Yellow-800);
232
+ --color-redseed-yellow-900: var(--Colors-RedSeed-Yellow-900);
233
+
234
+ --color-redseed-purple-5: var(--Colors-RedSeed-Purple-5);
235
+ --color-redseed-purple-10: var(--Colors-RedSeed-Purple-10);
236
+ --color-redseed-purple-15: var(--Colors-RedSeed-Purple-15);
237
+ --color-redseed-purple-20: var(--Colors-RedSeed-Purple-20);
238
+ --color-redseed-purple-25: var(--Colors-RedSeed-Purple-25);
239
+ --color-redseed-purple-50: var(--Colors-RedSeed-Purple-50);
240
+ --color-redseed-purple-100: var(--Colors-RedSeed-Purple-100);
241
+ --color-redseed-purple-200: var(--Colors-RedSeed-Purple-200);
242
+ --color-redseed-purple-300: var(--Colors-RedSeed-Purple-300);
243
+ --color-redseed-purple-400: var(--Colors-RedSeed-Purple-400);
244
+ --color-redseed-purple-500: var(--Colors-RedSeed-Purple-500);
245
+ --color-redseed-purple-600: var(--Colors-RedSeed-Purple-600);
246
+ --color-redseed-purple-700: var(--Colors-RedSeed-Purple-700);
247
+ --color-redseed-purple-800: var(--Colors-RedSeed-Purple-800);
248
+ --color-redseed-purple-900: var(--Colors-RedSeed-Purple-900);
249
+ --color-redseed-purple-950: var(--Colors-RedSeed-Purple-950);
250
+ --color-redseed-purple-975: var(--Colors-RedSeed-Purple-975);
251
+ --color-redseed-purple-990: var(--Colors-RedSeed-Purple-990);
252
+ --color-redseed-purple-995: var(--Colors-RedSeed-Purple-995);
253
+
254
+ --color-error-25: var(--Colors-Error-25);
255
+ --color-error-50: var(--Colors-Error-50);
256
+ --color-error-100: var(--Colors-Error-100);
257
+ --color-error-200: var(--Colors-Error-200);
258
+ --color-error-300: var(--Colors-Error-300);
259
+ --color-error-400: var(--Colors-Error-400);
260
+ --color-error-500: var(--Colors-Error-500);
261
+ --color-error-600: var(--Colors-Error-600);
262
+ --color-error-700: var(--Colors-Error-700);
263
+ --color-error-800: var(--Colors-Error-800);
264
+ --color-error-900: var(--Colors-Error-900);
265
+ --color-error-950: var(--Colors-Error-950);
266
+
267
+ --color-warning-25: var(--Colors-Warning-25);
268
+ --color-warning-50: var(--Colors-Warning-50);
269
+ --color-warning-100: var(--Colors-Warning-100);
270
+ --color-warning-200: var(--Colors-Warning-200);
271
+ --color-warning-300: var(--Colors-Warning-300);
272
+ --color-warning-400: var(--Colors-Warning-400);
273
+ --color-warning-500: var(--Colors-Warning-500);
274
+ --color-warning-600: var(--Colors-Warning-600);
275
+ --color-warning-700: var(--Colors-Warning-700);
276
+ --color-warning-800: var(--Colors-Warning-800);
277
+ --color-warning-900: var(--Colors-Warning-900);
278
+ --color-warning-950: var(--Colors-Warning-950);
279
+
280
+ --color-success-25: var(--Colors-Success-25);
281
+ --color-success-50: var(--Colors-Success-50);
282
+ --color-success-100: var(--Colors-Success-100);
283
+ --color-success-200: var(--Colors-Success-200);
284
+ --color-success-300: var(--Colors-Success-300);
285
+ --color-success-400: var(--Colors-Success-400);
286
+ --color-success-500: var(--Colors-Success-500);
287
+ --color-success-600: var(--Colors-Success-600);
288
+ --color-success-700: var(--Colors-Success-700);
289
+ --color-success-800: var(--Colors-Success-800);
290
+ --color-success-900: var(--Colors-Success-900);
291
+ --color-success-950: var(--Colors-Success-950);
292
+
293
+ --color-moss-25: var(--Colors-Moss-25);
294
+ --color-moss-50: var(--Colors-Moss-50);
295
+ --color-moss-100: var(--Colors-Moss-100);
296
+ --color-moss-200: var(--Colors-Moss-200);
297
+ --color-moss-300: var(--Colors-Moss-300);
298
+ --color-moss-400: var(--Colors-Moss-400);
299
+ --color-moss-500: var(--Colors-Moss-500);
300
+ --color-moss-600: var(--Colors-Moss-600);
301
+ --color-moss-700: var(--Colors-Moss-700);
302
+ --color-moss-800: var(--Colors-Moss-800);
303
+ --color-moss-900: var(--Colors-Moss-900);
304
+ --color-moss-950: var(--Colors-Moss-950);
305
+
306
+ --color-green-25: var(--Colors-Green-25);
307
+ --color-green-50: var(--Colors-Green-50);
308
+ --color-green-100: var(--Colors-Green-100);
309
+ --color-green-200: var(--Colors-Green-200);
310
+ --color-green-300: var(--Colors-Green-300);
311
+ --color-green-400: var(--Colors-Green-400);
312
+ --color-green-500: var(--Colors-Green-500);
313
+ --color-green-600: var(--Colors-Green-600);
314
+ --color-green-700: var(--Colors-Green-700);
315
+ --color-green-800: var(--Colors-Green-800);
316
+ --color-green-900: var(--Colors-Green-900);
317
+ --color-green-950: var(--Colors-Green-950);
318
+
319
+ --color-green-light-25: var(--Colors-Green-light-25);
320
+ --color-green-light-50: var(--Colors-Green-light-50);
321
+ --color-green-light-100: var(--Colors-Green-light-100);
322
+ --color-green-light-200: var(--Colors-Green-light-200);
323
+ --color-green-light-300: var(--Colors-Green-light-300);
324
+ --color-green-light-400: var(--Colors-Green-light-400);
325
+ --color-green-light-500: var(--Colors-Green-light-500);
326
+ --color-green-light-600: var(--Colors-Green-light-600);
327
+ --color-green-light-700: var(--Colors-Green-light-700);
328
+ --color-green-light-800: var(--Colors-Green-light-800);
329
+ --color-green-light-900: var(--Colors-Green-light-900);
330
+ --color-green-light-950: var(--Colors-Green-light-950);
331
+
332
+ --color-teal-25: var(--Colors-Teal-25);
333
+ --color-teal-50: var(--Colors-Teal-50);
334
+ --color-teal-100: var(--Colors-Teal-100);
335
+ --color-teal-200: var(--Colors-Teal-200);
336
+ --color-teal-300: var(--Colors-Teal-300);
337
+ --color-teal-400: var(--Colors-Teal-400);
338
+ --color-teal-500: var(--Colors-Teal-500);
339
+ --color-teal-600: var(--Colors-Teal-600);
340
+ --color-teal-700: var(--Colors-Teal-700);
341
+ --color-teal-800: var(--Colors-Teal-800);
342
+ --color-teal-900: var(--Colors-Teal-900);
343
+ --color-teal-950: var(--Colors-Teal-950);
344
+
345
+ --color-cyan-25: var(--Colors-Cyan-25);
346
+ --color-cyan-50: var(--Colors-Cyan-50);
347
+ --color-cyan-100: var(--Colors-Cyan-100);
348
+ --color-cyan-200: var(--Colors-Cyan-200);
349
+ --color-cyan-300: var(--Colors-Cyan-300);
350
+ --color-cyan-400: var(--Colors-Cyan-400);
351
+ --color-cyan-500: var(--Colors-Cyan-500);
352
+ --color-cyan-600: var(--Colors-Cyan-600);
353
+ --color-cyan-700: var(--Colors-Cyan-700);
354
+ --color-cyan-800: var(--Colors-Cyan-800);
355
+ --color-cyan-900: var(--Colors-Cyan-900);
356
+ --color-cyan-950: var(--Colors-Cyan-950);
357
+
358
+ --color-blue-25: var(--Colors-Blue-25);
359
+ --color-blue-50: var(--Colors-Blue-50);
360
+ --color-blue-100: var(--Colors-Blue-100);
361
+ --color-blue-200: var(--Colors-Blue-200);
362
+ --color-blue-300: var(--Colors-Blue-300);
363
+ --color-blue-400: var(--Colors-Blue-400);
364
+ --color-blue-500: var(--Colors-Blue-500);
365
+ --color-blue-600: var(--Colors-Blue-600);
366
+ --color-blue-700: var(--Colors-Blue-700);
367
+ --color-blue-800: var(--Colors-Blue-800);
368
+ --color-blue-900: var(--Colors-Blue-900);
369
+ --color-blue-950: var(--Colors-Blue-950);
370
+
371
+ --color-blue-light-25: var(--Colors-Blue-light-25);
372
+ --color-blue-light-50: var(--Colors-Blue-light-50);
373
+ --color-blue-light-100: var(--Colors-Blue-light-100);
374
+ --color-blue-light-200: var(--Colors-Blue-light-200);
375
+ --color-blue-light-300: var(--Colors-Blue-light-300);
376
+ --color-blue-light-400: var(--Colors-Blue-light-400);
377
+ --color-blue-light-500: var(--Colors-Blue-light-500);
378
+ --color-blue-light-600: var(--Colors-Blue-light-600);
379
+ --color-blue-light-700: var(--Colors-Blue-light-700);
380
+ --color-blue-light-800: var(--Colors-Blue-light-800);
381
+ --color-blue-light-900: var(--Colors-Blue-light-900);
382
+ --color-blue-light-950: var(--Colors-Blue-light-950);
383
+
384
+ --color-blue-dark-25: var(--Colors-Blue-dark-25);
385
+ --color-blue-dark-50: var(--Colors-Blue-dark-50);
386
+ --color-blue-dark-100: var(--Colors-Blue-dark-100);
387
+ --color-blue-dark-200: var(--Colors-Blue-dark-200);
388
+ --color-blue-dark-300: var(--Colors-Blue-dark-300);
389
+ --color-blue-dark-400: var(--Colors-Blue-dark-400);
390
+ --color-blue-dark-500: var(--Colors-Blue-dark-500);
391
+ --color-blue-dark-600: var(--Colors-Blue-dark-600);
392
+ --color-blue-dark-700: var(--Colors-Blue-dark-700);
393
+ --color-blue-dark-800: var(--Colors-Blue-dark-800);
394
+ --color-blue-dark-900: var(--Colors-Blue-dark-900);
395
+ --color-blue-dark-950: var(--Colors-Blue-dark-950);
396
+
397
+ --color-indigo-25: var(--Colors-Indigo-25);
398
+ --color-indigo-50: var(--Colors-Indigo-50);
399
+ --color-indigo-100: var(--Colors-Indigo-100);
400
+ --color-indigo-200: var(--Colors-Indigo-200);
401
+ --color-indigo-300: var(--Colors-Indigo-300);
402
+ --color-indigo-400: var(--Colors-Indigo-400);
403
+ --color-indigo-500: var(--Colors-Indigo-500);
404
+ --color-indigo-600: var(--Colors-Indigo-600);
405
+ --color-indigo-700: var(--Colors-Indigo-700);
406
+ --color-indigo-800: var(--Colors-Indigo-800);
407
+ --color-indigo-900: var(--Colors-Indigo-900);
408
+ --color-indigo-950: var(--Colors-Indigo-950);
409
+
410
+ --color-violet-25: var(--Colors-Violet-25);
411
+ --color-violet-50: var(--Colors-Violet-50);
412
+ --color-violet-100: var(--Colors-Violet-100);
413
+ --color-violet-200: var(--Colors-Violet-200);
414
+ --color-violet-300: var(--Colors-Violet-300);
415
+ --color-violet-400: var(--Colors-Violet-400);
416
+ --color-violet-500: var(--Colors-Violet-500);
417
+ --color-violet-600: var(--Colors-Violet-600);
418
+ --color-violet-700: var(--Colors-Violet-700);
419
+ --color-violet-800: var(--Colors-Violet-800);
420
+ --color-violet-900: var(--Colors-Violet-900);
421
+ --color-violet-950: var(--Colors-Violet-950);
422
+
423
+ --color-purple-25: var(--Colors-Purple-25);
424
+ --color-purple-50: var(--Colors-Purple-50);
425
+ --color-purple-100: var(--Colors-Purple-100);
426
+ --color-purple-200: var(--Colors-Purple-200);
427
+ --color-purple-300: var(--Colors-Purple-300);
428
+ --color-purple-400: var(--Colors-Purple-400);
429
+ --color-purple-500: var(--Colors-Purple-500);
430
+ --color-purple-600: var(--Colors-Purple-600);
431
+ --color-purple-700: var(--Colors-Purple-700);
432
+ --color-purple-800: var(--Colors-Purple-800);
433
+ --color-purple-900: var(--Colors-Purple-900);
434
+ --color-purple-950: var(--Colors-Purple-950);
435
+
436
+ --color-fuchsia-25: var(--Colors-Fuchsia-25);
437
+ --color-fuchsia-50: var(--Colors-Fuchsia-50);
438
+ --color-fuchsia-100: var(--Colors-Fuchsia-100);
439
+ --color-fuchsia-200: var(--Colors-Fuchsia-200);
440
+ --color-fuchsia-300: var(--Colors-Fuchsia-300);
441
+ --color-fuchsia-400: var(--Colors-Fuchsia-400);
442
+ --color-fuchsia-500: var(--Colors-Fuchsia-500);
443
+ --color-fuchsia-600: var(--Colors-Fuchsia-600);
444
+ --color-fuchsia-700: var(--Colors-Fuchsia-700);
445
+ --color-fuchsia-800: var(--Colors-Fuchsia-800);
446
+ --color-fuchsia-900: var(--Colors-Fuchsia-900);
447
+ --color-fuchsia-950: var(--Colors-Fuchsia-950);
448
+
449
+ --color-pink-25: var(--Colors-Pink-25);
450
+ --color-pink-50: var(--Colors-Pink-50);
451
+ --color-pink-100: var(--Colors-Pink-100);
452
+ --color-pink-200: var(--Colors-Pink-200);
453
+ --color-pink-300: var(--Colors-Pink-300);
454
+ --color-pink-400: var(--Colors-Pink-400);
455
+ --color-pink-500: var(--Colors-Pink-500);
456
+ --color-pink-600: var(--Colors-Pink-600);
457
+ --color-pink-700: var(--Colors-Pink-700);
458
+ --color-pink-800: var(--Colors-Pink-800);
459
+ --color-pink-900: var(--Colors-Pink-900);
460
+ --color-pink-950: var(--Colors-Pink-950);
461
+
462
+ --color-rose-25: var(--Colors-Rosé-25);
463
+ --color-rose-50: var(--Colors-Rosé-50);
464
+ --color-rose-100: var(--Colors-Rosé-100);
465
+ --color-rose-200: var(--Colors-Rosé-200);
466
+ --color-rose-300: var(--Colors-Rosé-300);
467
+ --color-rose-400: var(--Colors-Rosé-400);
468
+ --color-rose-500: var(--Colors-Rosé-500);
469
+ --color-rose-600: var(--Colors-Rosé-600);
470
+ --color-rose-700: var(--Colors-Rosé-700);
471
+ --color-rose-800: var(--Colors-Rosé-800);
472
+ --color-rose-900: var(--Colors-Rosé-900);
473
+ --color-rose-950: var(--Colors-Rosé-950);
474
+
475
+ --color-orange-25: var(--Colors-Orange-25);
476
+ --color-orange-50: var(--Colors-Orange-50);
477
+ --color-orange-100: var(--Colors-Orange-100);
478
+ --color-orange-200: var(--Colors-Orange-200);
479
+ --color-orange-300: var(--Colors-Orange-300);
480
+ --color-orange-400: var(--Colors-Orange-400);
481
+ --color-orange-500: var(--Colors-Orange-500);
482
+ --color-orange-600: var(--Colors-Orange-600);
483
+ --color-orange-700: var(--Colors-Orange-700);
484
+ --color-orange-800: var(--Colors-Orange-800);
485
+ --color-orange-900: var(--Colors-Orange-900);
486
+ --color-orange-950: var(--Colors-Orange-950);
487
+
488
+ --color-orange-dark-25: var(--Colors-Orange-dark-25);
489
+ --color-orange-dark-50: var(--Colors-Orange-dark-50);
490
+ --color-orange-dark-100: var(--Colors-Orange-dark-100);
491
+ --color-orange-dark-200: var(--Colors-Orange-dark-200);
492
+ --color-orange-dark-300: var(--Colors-Orange-dark-300);
493
+ --color-orange-dark-400: var(--Colors-Orange-dark-400);
494
+ --color-orange-dark-500: var(--Colors-Orange-dark-500);
495
+ --color-orange-dark-600: var(--Colors-Orange-dark-600);
496
+ --color-orange-dark-700: var(--Colors-Orange-dark-700);
497
+ --color-orange-dark-800: var(--Colors-Orange-dark-800);
498
+ --color-orange-dark-900: var(--Colors-Orange-dark-900);
499
+ --color-orange-dark-950: var(--Colors-Orange-dark-950);
500
+
501
+ --color-yellow-25: var(--Colors-Yellow-25);
502
+ --color-yellow-50: var(--Colors-Yellow-50);
503
+ --color-yellow-100: var(--Colors-Yellow-100);
504
+ --color-yellow-200: var(--Colors-Yellow-200);
505
+ --color-yellow-300: var(--Colors-Yellow-300);
506
+ --color-yellow-400: var(--Colors-Yellow-400);
507
+ --color-yellow-500: var(--Colors-Yellow-500);
508
+ --color-yellow-600: var(--Colors-Yellow-600);
509
+ --color-yellow-700: var(--Colors-Yellow-700);
510
+ --color-yellow-800: var(--Colors-Yellow-800);
511
+ --color-yellow-900: var(--Colors-Yellow-900);
512
+ --color-yellow-950: var(--Colors-Yellow-950);
513
+
514
+ --color-alpha-white-10: var(--Component-colors-Alpha-alpha-white-10);
515
+ --color-alpha-white-20: var(--Component-colors-Alpha-alpha-white-20);
516
+ --color-alpha-white-30: var(--Component-colors-Alpha-alpha-white-30);
517
+ --color-alpha-white-40: var(--Component-colors-Alpha-alpha-white-40);
518
+ --color-alpha-white-50: var(--Component-colors-Alpha-alpha-white-50);
519
+ --color-alpha-white-60: var(--Component-colors-Alpha-alpha-white-60);
520
+ --color-alpha-white-70: var(--Component-colors-Alpha-alpha-white-70);
521
+ --color-alpha-white-80: var(--Component-colors-Alpha-alpha-white-80);
522
+ --color-alpha-white-90: var(--Component-colors-Alpha-alpha-white-90);
523
+ --color-alpha-white-100: var(--Component-colors-Alpha-alpha-white-100);
524
+
525
+ --color-alpha-black-10: var(--Component-colors-Alpha-alpha-black-10);
526
+ --color-alpha-black-20: var(--Component-colors-Alpha-alpha-black-20);
527
+ --color-alpha-black-30: var(--Component-colors-Alpha-alpha-black-30);
528
+ --color-alpha-black-40: var(--Component-colors-Alpha-alpha-black-40);
529
+ --color-alpha-black-50: var(--Component-colors-Alpha-alpha-black-50);
530
+ --color-alpha-black-60: var(--Component-colors-Alpha-alpha-black-60);
531
+ --color-alpha-black-70: var(--Component-colors-Alpha-alpha-black-70);
532
+ --color-alpha-black-80: var(--Component-colors-Alpha-alpha-black-80);
533
+ --color-alpha-black-90: var(--Component-colors-Alpha-alpha-black-90);
534
+ --color-alpha-black-100: var(--Component-colors-Alpha-alpha-black-100);
535
+
536
+ --color-shadow-xs: var(--Colors-Effects-Shadows-shadow-xs);
537
+ --color-shadow-sm_01: var(--Colors-Effects-Shadows-shadow-sm_01);
538
+ --color-shadow-sm_02: var(--Colors-Effects-Shadows-shadow-sm_02);
539
+ --color-shadow-md_01: var(--Colors-Effects-Shadows-shadow-md_01);
540
+ --color-shadow-md_02: var(--Colors-Effects-Shadows-shadow-md_02);
541
+ --color-shadow-lg_01: var(--Colors-Effects-Shadows-shadow-lg_01);
542
+ --color-shadow-lg_02: var(--Colors-Effects-Shadows-shadow-lg_02);
543
+ --color-shadow-lg_03: var(--Colors-Effects-Shadows-shadow-lg_03);
544
+ --color-shadow-xl_01: var(--Colors-Effects-Shadows-shadow-xl_01);
545
+ --color-shadow-xl_02: var(--Colors-Effects-Shadows-shadow-xl_02);
546
+ --color-shadow-xl_03: var(--Colors-Effects-Shadows-shadow-xl_03);
547
+ --color-shadow-2xl_01: var(--Colors-Effects-Shadows-shadow-2xl_01);
548
+ --color-shadow-2xl_02: var(--Colors-Effects-Shadows-shadow-2xl_02);
549
+ --color-shadow-3xl_01: var(--Colors-Effects-Shadows-shadow-3xl_01);
550
+ --color-shadow-3xl_02: var(--Colors-Effects-Shadows-shadow-3xl_02);
551
+ --color-shadow-skeumorphic-inner: var(--Colors-Effects-Shadows-shadow-skeumorphic-inner);
552
+ --color-shadow-skeumorphic-inner-border: var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border);
553
+ --color-shadow-main-centre-md: var(--Colors-Effects-Portfolio-mockups-shadow-main-centre-md);
554
+ --color-shadow-main-centre-lg: var(--Colors-Effects-Portfolio-mockups-shadow-main-centre-lg);
555
+ --color-shadow-overlay-lg: var(--Colors-Effects-Portfolio-mockups-shadow-overlay-lg);
556
+ --color-shadow-grid-md: var(--Colors-Effects-Portfolio-mockups-shadow-grid-md);
557
+ }
package/tokens.css ADDED
@@ -0,0 +1,49 @@
1
+ @theme inline {
2
+ --color-text-primary: var(--Colors-Grey-900);
3
+ --color-text-secondary: var(--Colors-Grey-700);
4
+ --color-text-disabled: var(--Colors-Grey-400);
5
+ --color-text-brand: var(--Colors-Brand-900);
6
+ --color-text-success: var(--Colors-Success-600);
7
+ --color-text-warning: var(--Colors-Warning-600);
8
+ --color-text-error: var(--Colors-Error-600);
9
+ --color-text-on-color: var(--Colors-Base-white);
10
+
11
+ --color-background-primary: var(--Colors-Base-white);
12
+ --color-background-secondary: var(--Colors-Grey-50);
13
+ --color-background-disabled: var(--Colors-Grey-100);
14
+ --color-background-brand: var(--Colors-Brand-50);
15
+ --color-background-success: var(--Colors-Success-50);
16
+ --color-background-warning: var(--Colors-Warning-50);
17
+ --color-background-error: var(--Colors-Error-50);
18
+ --color-background-info: var(--Colors-Blue-50);
19
+
20
+ --color-border-primary: var(--Colors-Grey-400);
21
+ --color-border-secondary: var(--Colors-Grey-300);
22
+ --color-border-disabled: var(--Colors-Grey-200);
23
+ --color-border-brand: var(--Colors-Brand-200);
24
+ --color-border-success: var(--Colors-Success-200);
25
+ --color-border-warning: var(--Colors-Warning-200);
26
+ --color-border-error: var(--Colors-Error-200);
27
+ --color-border-info: var(--Colors-Blue-200);
28
+
29
+ --color-button-primary: var(--Colors-Brand-600);
30
+ --color-button-primary-hover: var(--Colors-Brand-700);
31
+ --color-button-primary-active: var(--Colors-Brand-800);
32
+ --color-button-secondary: var(--Colors-Grey-800);
33
+ --color-button-secondary-hover: var(--Colors-Grey-700);
34
+ --color-button-secondary-active: var(--Colors-Grey-600);
35
+ --color-button-tertiary: var(--Colors-Brand-600);
36
+ --color-button-tertiary-hover: var(--Colors-Brand-700);
37
+ --color-button-tertiary-active: var(--Colors-Brand-800);
38
+ --color-button-danger-primary: var(--Colors-Error-600);
39
+ --color-button-danger-secondary: var(--Colors-Error-600);
40
+ --color-button-danger-hover: var(--Colors-Error-700);
41
+ --color-button-danger-active: var(--Colors-Error-800);
42
+ --color-button-separator: var(--Colors-Grey-200);
43
+ --color-button-disabled: var(--Colors-Grey-300);
44
+
45
+ --color-primary-foreground: var(--Colors-Base-white);
46
+ --color-primary-background: var(--Colors-Brand-500);
47
+ --color-primary-foreground-hover: var(--Colors-Base-white);
48
+ --color-primary-background-hover: var(--Colors-Brand-700);
49
+ }