@ibis-design/css 0.5.0 → 0.7.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 (32) hide show
  1. package/README.md +90 -53
  2. package/dist/components/banner.css +155 -0
  3. package/dist/components/button.css +179 -0
  4. package/dist/components/checkbox.css +103 -0
  5. package/dist/components/chips.css +76 -0
  6. package/dist/components/dropdown.css +105 -0
  7. package/dist/components/dropdownButton.css +81 -0
  8. package/dist/components/pillTab.css +59 -0
  9. package/dist/components/radio.css +108 -0
  10. package/dist/components/switch.css +68 -0
  11. package/dist/components/textInput.css +152 -0
  12. package/dist/components/textarea.css +91 -0
  13. package/dist/components/textlink.css +149 -0
  14. package/dist/components/tipIndicator.css +79 -0
  15. package/dist/components/toaster.css +129 -0
  16. package/dist/components/tooltip.css +0 -0
  17. package/dist/design-tokens.css +503 -0
  18. package/dist/tailwind.preset.js +5 -0
  19. package/dist/tailwind.theme.js +310 -0
  20. package/dist/tokens/alc-dark.json +1 -0
  21. package/dist/tokens/alc-light.json +1 -0
  22. package/dist/tokens/ib-dark.json +1 -0
  23. package/dist/tokens/ib-light.json +1 -0
  24. package/package.json +15 -12
  25. package/dist/alchemy/alchemy-design.css +0 -154
  26. package/dist/alchemy/alchemy-design.scss +0 -151
  27. package/dist/alchemy/tailwind.preset.js +0 -231
  28. package/dist/ibis/ibis-design.css +0 -261
  29. package/dist/ibis/ibis-design.scss +0 -258
  30. package/dist/ibis/tailwind.preset.js +0 -410
  31. package/dist/ibis/tokens.css +0 -196
  32. package/dist/ibis/tokens.scss +0 -193
package/dist/design-tokens.css ADDED
@@ -0,0 +1,503 @@
1
+ /**
2
+ * Do not edit directly. Generated by @ibis-design/css build.
3
+ * Set document.documentElement.dataset.theme to ib-light | ib-dark | alc-light | alc-dark.
4
+ * :root holds global tokens; :root + [data-theme="ib-light"] share Ibis light theme tokens.
5
+ */
6
+
7
+ /**
8
+ * Do not edit directly, this file was auto-generated.
9
+ */
10
+
11
+ :root {
12
+ --spacing-0: 0;
13
+ --spacing-1: 0.25rem;
14
+ --spacing-2: 0.5rem;
15
+ --spacing-3: 0.75rem;
16
+ --spacing-4: 1rem;
17
+ --spacing-5: 1.25rem;
18
+ --spacing-6: 1.5rem;
19
+ --spacing-7: 1.75rem;
20
+ --spacing-8: 2rem;
21
+ --spacing-9: 2.25rem;
22
+ --spacing-10: 2.5rem;
23
+ --spacing-12: 3rem;
24
+ --spacing-14: 3.5rem;
25
+ --spacing-16: 4rem;
26
+ --spacing-20: 5rem;
27
+ --spacing-24: 6rem;
28
+ --text-transform-uppercase: uppercase;
29
+ --text-transform-lowercase: lowercase;
30
+ --text-transform-capitalize: capitalize;
31
+ --line-height-tight: 1.25;
32
+ --line-height-normal: 1.5;
33
+ --line-height-relaxed: 1.75;
34
+ --line-height-loose: 2;
35
+ --letter-spacing-tighter: -0.05em;
36
+ --letter-spacing-tight: -0.025em;
37
+ --letter-spacing-normal: 0;
38
+ --letter-spacing-wide: 0.025em;
39
+ --letter-spacing-wider: 0.05em;
40
+ --z-index-base: 0;
41
+ --z-index-dropdown: 1000;
42
+ --z-index-sticky: 1100;
43
+ --z-index-overlay: 1200;
44
+ --z-index-modal: 1300;
45
+ --z-index-popover: 1400;
46
+ --z-index-tooltip: 1500;
47
+ --opacity-1: 0.1;
48
+ --opacity-2: 0.2;
49
+ --opacity-3: 0.3;
50
+ --opacity-4: 0.4;
51
+ --opacity-5: 0.5;
52
+ --opacity-6: 0.6;
53
+ --opacity-7: 0.7;
54
+ --opacity-8: 0.8;
55
+ --opacity-9: 0.9;
56
+ --opacity-disabled: 0.5;
57
+ --opacity-muted: 0.75;
58
+ --opacity-subtle: 0.9;
59
+ --transition-duration-fast: 150ms;
60
+ --transition-duration-normal: 250ms;
61
+ --transition-duration-slow: 400ms;
62
+ --transition-timing-default: ease;
63
+ --transition-timing-in: ease-in;
64
+ --transition-timing-out: ease-out;
65
+ --transition-timing-in-out: ease-in-out;
66
+ --breakpoint-2xs: 360px;
67
+ --breakpoint-xs: 480px;
68
+ --breakpoint-sm: 640px;
69
+ --breakpoint-md: 768px;
70
+ --breakpoint-lg: 1024px;
71
+ --breakpoint-xl: 1280px;
72
+ --breakpoint-2xl: 1536px;
73
+ --blur-none: 0;
74
+ --blur-xs: 2px;
75
+ --blur-sm: 4px;
76
+ --blur-md: 6px;
77
+ --blur-lg: 8px;
78
+ --blur-xl: 12px;
79
+ --blur-2xl: 16px;
80
+ --blur-3xl: 24px;
81
+ --size-xs: 16px;
82
+ --size-sm: 24px;
83
+ --size-md: 32px;
84
+ --size-lg: 48px;
85
+ --size-xl: 56px;
86
+ --size-2xl: 64px;
87
+ --logo-square-sm: 24px;
88
+ --logo-square-md: 32px;
89
+ --logo-square-lg: 40px;
90
+ --logo-square-xl: 48px;
91
+ --logo-square-main: 255px;
92
+ --icons-xs: 16px;
93
+ --icons-sm: 24px;
94
+ --icons-md: 32px;
95
+ --icons-lg: 48px;
96
+ --icons-xl: 56px;
97
+ --font-style-normal: normal;
98
+ --font-style-italic: italic;
99
+ --font-weight-thin: 100;
100
+ --font-weight-extralight: 200;
101
+ --font-weight-light: 300;
102
+ --font-weight-normal: 400;
103
+ --font-weight-medium: 500;
104
+ --font-weight-semibold: 600;
105
+ --font-weight-bold: 700;
106
+ --font-weight-extrabold: 800;
107
+ --font-weight-black: 900;
108
+ --border-width-none: 0;
109
+ --border-width-hairline: 0.5px;
110
+ --border-width-thin: 1px;
111
+ --border-width-default: 2px;
112
+ --border-width-medium: 3px;
113
+ --border-width-thick: 4px;
114
+ --shadow-color-black-soft: rgba(0, 0, 0, 0.1);
115
+ --shadow-color-black-medium: rgba(0, 0, 0, 0.15);
116
+ --shadow-color-black-strong: rgba(0, 0, 0, 0.25);
117
+ --shadow-color-brand-soft: rgba(223, 238, 255, 0.1);
118
+ --shadow-color-brand-medium: rgba(223, 238, 255, 0.15);
119
+ --shadow-color-brand-strong: rgba(223, 238, 255, 0.25);
120
+ --shadow-color-white-soft: rgba(255, 255, 255, 0.1);
121
+ --shadow-color-white-medium: rgba(255, 255, 255, 0.15);
122
+ --shadow-color-white-strong: rgba(255, 255, 255, 0.25);
123
+ --shadow-color-checkbox-soft: rgba(0, 0, 0, 0.05);
124
+ --shadow-color-checkbox-medium: rgba(0, 0, 0, 0.1);
125
+ --shadow-color-checkbox-strong: rgba(0, 0, 0, 0.15);
126
+ --shadow-elevation-none: ;
127
+ --shadow-elevation-sm: 0 0 3px 0 var(--shadow-color-black-soft), 0 0 2px -1px var(--shadow-color-black-soft);
128
+ --shadow-elevation-md: 0 0 6px -1px var(--shadow-color-black-soft), 0 0 4px -2px var(--shadow-color-black-soft);
129
+ --shadow-focus-default: 0 0 0 4px var(--shadow-color-black-soft);
130
+ --shadow-focus-primary: 0 0 0 4px var(--shadow-color-brand-soft);
131
+ --shadow-focus-error: 0 0 0 4px var(--shadow-color-black-medium);
132
+ }
133
+
134
+ /**
135
+ * Do not edit directly, this file was auto-generated.
136
+ */
137
+
138
+ :root, [data-theme="ib-light"] {
139
+ --color-primary-50: #f5f3ff;
140
+ --color-primary-100: #edeafd;
141
+ --color-primary-200: #ded7fd;
142
+ --color-primary-300: #c7b8fa;
143
+ --color-primary-400: #aa8ff6;
144
+ --color-primary-500: #8e56e0;
145
+ --color-primary-600: #8647e5;
146
+ --color-primary-700: #7d42d6;
147
+ --color-primary-800: #713bc1;
148
+ --color-primary-900: #522398;
149
+ --color-primary-950: #301362;
150
+ --color-neutral-50: #f4f4f4;
151
+ --color-neutral-100: #dbdbdb;
152
+ --color-neutral-200: #d1d1d1;
153
+ --color-neutral-300: #c1c1c1;
154
+ --color-neutral-400: #a8a8a8;
155
+ --color-neutral-500: #6d6d6d;
156
+ --color-neutral-600: #5d5d5d;
157
+ --color-neutral-700: #4f4f4f;
158
+ --color-neutral-800: #454545;
159
+ --color-neutral-900: #3d3d3d;
160
+ --color-neutral-950: #000000;
161
+ --color-white: #FFFFFF;
162
+ --color-black: #000000;
163
+ --color-green: #009A08;
164
+ --color-red: #B70c00;
165
+ --color-orange: #FA8900;
166
+ --color-toaster-accent: #920075;
167
+ --color-gradients-main-start: #3B1570;
168
+ --color-gradients-main-end: #8E0175;
169
+ --color-gradients-purple-start: #C519A3;
170
+ --color-gradients-purple-end: #713BC1;
171
+ --color-gradients-dark-purple-start: #713BC1;
172
+ --color-gradients-dark-purple-end: #BD91FF;
173
+ --color-gradients-skeleton-start: rgba(255, 255, 255, 0.25);
174
+ --color-gradients-skeleton-middle: rgba(255, 255, 255, 0.6);
175
+ --color-gradients-skeleton-end: rgba(255, 255, 255, 0.25);
176
+ --color-gradients-button-start: #9665DF;
177
+ --color-gradients-button-end: #7945C8;
178
+ --color-backgrounds-classic-light: #fafafa;
179
+ --color-backgrounds-classic-dark: #0d0d0d;
180
+ --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
181
+ --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
182
+ --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
183
+ --font-size-body-xs: 0.5rem;
184
+ --font-size-body-sm: 0.75rem;
185
+ --font-size-body-md: 1rem;
186
+ --font-size-body-lg: 1.25rem;
187
+ --font-size-body-xl: 1.5rem;
188
+ --font-size-heading-h1: 4.188rem;
189
+ --font-size-heading-h2: 3.188rem;
190
+ --font-size-heading-h3: 2.375rem;
191
+ --font-size-heading-h4: 1.75rem;
192
+ --font-size-heading-h5: 1.312rem;
193
+ --border-radius-none: 0;
194
+ --border-radius-xs: 0.25rem;
195
+ --border-radius-sm: 0.375rem;
196
+ --border-radius-md: 0.5rem;
197
+ --border-radius-lg: 0.75rem;
198
+ --border-radius-xl: 1rem;
199
+ --border-radius-2xl: 1.5rem;
200
+ --border-radius-full: 9999px;
201
+ --border-color-button: #BD91FF;
202
+ --color-text-primary: var(--color-black);
203
+ --color-text-inverse: var(--color-white);
204
+ --color-toaster-default: var(--color-neutral-200);
205
+ --color-toaster-success: var(--color-green);
206
+ --color-toaster-error: var(--color-red);
207
+ --color-status-success: var(--color-green);
208
+ --color-status-error: var(--color-red);
209
+ --color-status-warning: var(--color-orange);
210
+ --color-brand-primary: var(--color-primary-500);
211
+ --color-brand-secondary: var(--color-primary-700);
212
+ --color-brand-neutral: var(--color-neutral-500);
213
+ --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
214
+ --gradient-skeleton: linear-gradient(90deg, var(--color-gradients-skeleton-start) 0%, var(--color-gradients-skeleton-middle) 50%, var(--color-gradients-skeleton-end) 100%);
215
+ --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
216
+ --border-color-default: var(--color-neutral-200);
217
+ --border-color-focus: var(--color-primary-300);
218
+ }
219
+
220
+ /**
221
+ * Do not edit directly, this file was auto-generated.
222
+ */
223
+
224
+ [data-theme="ib-dark"] {
225
+ --color-primary-50: #f5f3ff;
226
+ --color-primary-100: #edeafd;
227
+ --color-primary-200: #ded7fd;
228
+ --color-primary-300: #c7b8fa;
229
+ --color-primary-400: #aa8ff6;
230
+ --color-primary-500: #8e56e0;
231
+ --color-primary-600: #8647e5;
232
+ --color-primary-700: #7d42d6;
233
+ --color-primary-800: #713bc1;
234
+ --color-primary-900: #522398;
235
+ --color-primary-950: #301362;
236
+ --color-neutral-50: #000000;
237
+ --color-neutral-100: #3d3d3d;
238
+ --color-neutral-200: #454545;
239
+ --color-neutral-300: #4f4f4f;
240
+ --color-neutral-400: #5d5d5d;
241
+ --color-neutral-500: #6d6d6d;
242
+ --color-neutral-600: #a8a8a8;
243
+ --color-neutral-700: #c1c1c1;
244
+ --color-neutral-800: #d1d1d1;
245
+ --color-neutral-900: #dbdbdb;
246
+ --color-neutral-950: #f4f4f4;
247
+ --color-white: #FFFFFF;
248
+ --color-black: #000000;
249
+ --color-green: #009A08;
250
+ --color-red: #B70c00;
251
+ --color-orange: #FA8900;
252
+ --color-toaster-accent: #920075;
253
+ --color-gradients-main-start: #3B1570;
254
+ --color-gradients-main-end: #8E0175;
255
+ --color-gradients-purple-start: #C519A3;
256
+ --color-gradients-purple-end: #713BC1;
257
+ --color-gradients-dark-purple-start: #713BC1;
258
+ --color-gradients-dark-purple-end: #BD91FF;
259
+ --color-gradients-skeleton-start: rgba(255,255,255,0.08);
260
+ --color-gradients-skeleton-middle: rgba(255,255,255,0.18);
261
+ --color-gradients-skeleton-end: rgba(255,255,255,0.08);
262
+ --color-gradients-button-start: #9665DF;
263
+ --color-gradients-button-end: #7945C8;
264
+ --color-backgrounds-classic-light: #0D0D0D; /** PLACEHOLDER — pending Figma dark */
265
+ --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
266
+ --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
267
+ --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
268
+ --font-size-body-xs: 0.5rem;
269
+ --font-size-body-sm: 0.75rem;
270
+ --font-size-body-md: 1rem;
271
+ --font-size-body-lg: 1.25rem;
272
+ --font-size-body-xl: 1.5rem;
273
+ --font-size-heading-h1: 4.188rem;
274
+ --font-size-heading-h2: 3.188rem;
275
+ --font-size-heading-h3: 2.375rem;
276
+ --font-size-heading-h4: 1.75rem;
277
+ --font-size-heading-h5: 1.312rem;
278
+ --border-radius-none: 0;
279
+ --border-radius-xs: 0.25rem;
280
+ --border-radius-sm: 0.375rem;
281
+ --border-radius-md: 0.5rem;
282
+ --border-radius-lg: 0.75rem;
283
+ --border-radius-xl: 1rem;
284
+ --border-radius-2xl: 1.5rem;
285
+ --border-radius-full: 9999px;
286
+ --border-color-button: #BD91FF;
287
+ --color-text-primary: var(--color-white);
288
+ --color-text-inverse: var(--color-black);
289
+ --color-toaster-default: var(--color-neutral-200);
290
+ --color-toaster-success: var(--color-green);
291
+ --color-toaster-error: var(--color-red);
292
+ --color-status-success: var(--color-green);
293
+ --color-status-error: var(--color-red);
294
+ --color-status-warning: var(--color-orange);
295
+ --color-brand-primary: var(--color-primary-500);
296
+ --color-brand-secondary: var(--color-primary-700);
297
+ --color-brand-neutral: var(--color-neutral-500);
298
+ --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
299
+ --gradient-skeleton: linear-gradient(90deg, var(--color-gradients-skeleton-start) 0%, var(--color-gradients-skeleton-middle) 50%, var(--color-gradients-skeleton-end) 100%);
300
+ --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
301
+ --border-color-default: var(--color-neutral-200);
302
+ --border-color-focus: var(--color-primary-300);
303
+ }
304
+
305
+ /**
306
+ * Do not edit directly, this file was auto-generated.
307
+ */
308
+
309
+ [data-theme="alc-light"] {
310
+ --color-primary-50: #eff6ff;
311
+ --color-primary-100: #daebff;
312
+ --color-primary-200: #bdddff;
313
+ --color-primary-300: #90c8ff;
314
+ --color-primary-400: #5ca9fe;
315
+ --color-primary-500: #3686fb;
316
+ --color-primary-600: #2066f0;
317
+ --color-primary-700: #1851dd;
318
+ --color-primary-800: #1a42b3;
319
+ --color-primary-900: #1b3c8d;
320
+ --color-primary-950: #152554;
321
+ --color-neutral-50: #f4f4f4;
322
+ --color-neutral-100: #dbdbdb;
323
+ --color-neutral-200: #dbdbdb;
324
+ --color-neutral-300: #c1c1c1;
325
+ --color-neutral-400: #a8a8a8;
326
+ --color-neutral-500: #6d6d6d;
327
+ --color-neutral-600: #5d5d5d;
328
+ --color-neutral-700: #4f4f4f;
329
+ --color-neutral-800: #666666;
330
+ --color-neutral-900: #4d4d4d;
331
+ --color-neutral-950: #000000;
332
+ --color-white: #FFFFFF;
333
+ --color-black: #000000;
334
+ --color-green: #009A08;
335
+ --color-red: #B70c00;
336
+ --color-orange: #FA8900;
337
+ --color-brand-secondary: #FFC60D;
338
+ --color-alchemy-neutral-yellow: #fffbf0;
339
+ --color-alchemy-neutral-blue: #f0f4ff;
340
+ --color-alchemy-neutral-green: #f0fff1;
341
+ --color-gradients-main-start: #244197;
342
+ --color-gradients-main-end: #090F20;
343
+ --color-gradients-brand-start: #FECA1F;
344
+ --color-gradients-brand-middle: #3DA042;
345
+ --color-gradients-brand-end: #2F4688;
346
+ --color-gradients-button-start: #244197;
347
+ --color-gradients-button-end: #090F20;
348
+ --color-backgrounds-classic-light: #fafafa;
349
+ --color-backgrounds-classic-dark: #0d0d0d;
350
+ --color-backgrounds-cardbg-purple: #920075;
351
+ --color-backgrounds-cardbg-dark-purple: #522398;
352
+ --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
353
+ --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
354
+ --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
355
+ --font-family-ui: 'Istok Web', Inter, system-ui, sans-serif; /** Alchemy UI accent (optional) */
356
+ --font-size-body-xs: 0.75rem;
357
+ --font-size-body-sm: 0.875rem;
358
+ --font-size-body-md: 1rem;
359
+ --font-size-body-lg: 1.125rem;
360
+ --font-size-body-xl: 1.25rem;
361
+ --font-size-heading-h1: 2.375rem;
362
+ --font-size-heading-h2: 1.771rem;
363
+ --font-size-heading-h3: 1.333rem;
364
+ --font-size-heading-h4: 1rem;
365
+ --font-size-heading-h5: 0.875rem;
366
+ --font-style-normal: normal;
367
+ --font-style-italic: italic;
368
+ --font-weight-thin: 100;
369
+ --font-weight-extralight: 200;
370
+ --font-weight-light: 300;
371
+ --font-weight-normal: 400;
372
+ --font-weight-medium: 500;
373
+ --font-weight-semibold: 600;
374
+ --font-weight-bold: 700;
375
+ --font-weight-extrabold: 800;
376
+ --font-weight-black: 900;
377
+ --border-radius-none: 0;
378
+ --border-radius-xs: 0.25rem;
379
+ --border-radius-sm: 0.375rem;
380
+ --border-radius-md: 0.5rem;
381
+ --border-radius-lg: 0.75rem;
382
+ --border-radius-xl: 1rem;
383
+ --border-radius-2xl: 1.5rem;
384
+ --border-radius-full: 9999px;
385
+ --color-text-primary: var(--color-black);
386
+ --color-text-inverse: var(--color-white);
387
+ --color-toaster-default: var(--color-neutral-200);
388
+ --color-toaster-success: var(--color-green);
389
+ --color-toaster-error: var(--color-red);
390
+ --color-status-success: var(--color-green);
391
+ --color-status-error: var(--color-red);
392
+ --color-status-warning: var(--color-orange);
393
+ --color-brand-primary: var(--color-primary-500);
394
+ --color-brand-neutral: var(--color-neutral-500);
395
+ --color-backgrounds-themed-ibis-white: var(--color-white);
396
+ --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
397
+ --gradient-brand-accent: linear-gradient(180deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
398
+ --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
399
+ --border-color-default: var(--color-neutral-200);
400
+ --border-color-focus: var(--color-primary-300);
401
+ --color-toaster-accent: var(--color-brand-primary);
402
+ --border-color-button: var(--color-brand-primary);
403
+ }
404
+
405
+ /**
406
+ * Do not edit directly, this file was auto-generated.
407
+ */
408
+
409
+ [data-theme="alc-dark"] {
410
+ --color-primary-50: #eff6ff;
411
+ --color-primary-100: #daebff;
412
+ --color-primary-200: #bdddff;
413
+ --color-primary-300: #90c8ff;
414
+ --color-primary-400: #5ca9fe;
415
+ --color-primary-500: #3686fb;
416
+ --color-primary-600: #2066f0;
417
+ --color-primary-700: #1851dd;
418
+ --color-primary-800: #1a42b3;
419
+ --color-primary-900: #1b3c8d;
420
+ --color-primary-950: #152554;
421
+ --color-neutral-50: #000000;
422
+ --color-neutral-100: #4d4d4d;
423
+ --color-neutral-200: #666666;
424
+ --color-neutral-300: #4f4f4f;
425
+ --color-neutral-400: #5d5d5d;
426
+ --color-neutral-500: #6d6d6d;
427
+ --color-neutral-600: #a8a8a8;
428
+ --color-neutral-700: #c1c1c1;
429
+ --color-neutral-800: #dbdbdb;
430
+ --color-neutral-900: #dbdbdb;
431
+ --color-neutral-950: #f4f4f4;
432
+ --color-white: #FFFFFF;
433
+ --color-black: #000000;
434
+ --color-green: #009A08;
435
+ --color-red: #B70c00;
436
+ --color-orange: #FA8900;
437
+ --color-brand-secondary: #FFC60D; /** Alchemy secondary accent */
438
+ --color-alchemy-neutral-yellow: #fffbf0;
439
+ --color-alchemy-neutral-blue: #f0f4ff;
440
+ --color-alchemy-neutral-green: #f0fff1;
441
+ --color-gradients-main-start: #244197;
442
+ --color-gradients-main-end: #090F20;
443
+ --color-gradients-brand-start: #FECA1F;
444
+ --color-gradients-brand-middle: #3DA042;
445
+ --color-gradients-brand-end: #2F4688;
446
+ --color-gradients-button-start: #244197;
447
+ --color-gradients-button-end: #090F20;
448
+ --color-backgrounds-classic-light: #0d0d0d; /** PLACEHOLDER — pending Figma dark */
449
+ --color-backgrounds-classic-dark: #0d0d0d;
450
+ --color-backgrounds-cardbg-purple: #920075;
451
+ --color-backgrounds-cardbg-dark-purple: #522398;
452
+ --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
453
+ --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
454
+ --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
455
+ --font-family-ui: 'Istok Web', Inter, system-ui, sans-serif; /** Alchemy UI accent (optional) */
456
+ --font-size-body-xs: 0.75rem;
457
+ --font-size-body-sm: 0.875rem;
458
+ --font-size-body-md: 1rem;
459
+ --font-size-body-lg: 1.125rem;
460
+ --font-size-body-xl: 1.25rem;
461
+ --font-size-heading-h1: 2.375rem;
462
+ --font-size-heading-h2: 1.771rem;
463
+ --font-size-heading-h3: 1.333rem;
464
+ --font-size-heading-h4: 1rem;
465
+ --font-size-heading-h5: 0.875rem;
466
+ --font-style-normal: normal;
467
+ --font-style-italic: italic;
468
+ --font-weight-thin: 100;
469
+ --font-weight-extralight: 200;
470
+ --font-weight-light: 300;
471
+ --font-weight-normal: 400;
472
+ --font-weight-medium: 500;
473
+ --font-weight-semibold: 600;
474
+ --font-weight-bold: 700;
475
+ --font-weight-extrabold: 800;
476
+ --font-weight-black: 900;
477
+ --border-radius-none: 0;
478
+ --border-radius-xs: 0.25rem;
479
+ --border-radius-sm: 0.375rem;
480
+ --border-radius-md: 0.5rem;
481
+ --border-radius-lg: 0.75rem;
482
+ --border-radius-xl: 1rem;
483
+ --border-radius-2xl: 1.5rem;
484
+ --border-radius-full: 9999px;
485
+ --color-text-primary: var(--color-white);
486
+ --color-text-inverse: var(--color-black);
487
+ --color-toaster-default: var(--color-neutral-200);
488
+ --color-toaster-success: var(--color-green);
489
+ --color-toaster-error: var(--color-red);
490
+ --color-status-success: var(--color-green);
491
+ --color-status-error: var(--color-red);
492
+ --color-status-warning: var(--color-orange);
493
+ --color-brand-primary: var(--color-primary-500);
494
+ --color-brand-neutral: var(--color-neutral-500);
495
+ --color-backgrounds-themed-ibis-white: var(--color-white);
496
+ --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
497
+ --gradient-brand-accent: linear-gradient(180deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
498
+ --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
499
+ --border-color-default: var(--color-neutral-200);
500
+ --border-color-focus: var(--color-primary-300);
501
+ --color-toaster-accent: var(--color-brand-primary);
502
+ --border-color-button: var(--color-brand-primary);
503
+ }
package/dist/tailwind.preset.js ADDED
@@ -0,0 +1,5 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+ module.exports = {
3
+ darkMode: ["selector", '[data-theme$="-dark"]'],
4
+ presets: [require("./tailwind.theme.js")],
5
+ };