@ibis-design/css 0.8.1 → 0.9.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 (23) hide show
  1. package/README.md +21 -14
  2. package/dist/components/banner.css +13 -17
  3. package/dist/components/button.css +13 -13
  4. package/dist/components/checkbox.css +29 -11
  5. package/dist/components/chips.css +8 -8
  6. package/dist/components/dropdown.css +12 -20
  7. package/dist/components/dropdownButton.css +13 -20
  8. package/dist/components/navButton.css +233 -0
  9. package/dist/components/pillTab.css +7 -12
  10. package/dist/components/radio.css +14 -13
  11. package/dist/components/switch.css +5 -8
  12. package/dist/components/textInput.css +12 -15
  13. package/dist/components/textarea.css +7 -13
  14. package/dist/components/textlink.css +6 -14
  15. package/dist/components/tipIndicator.css +4 -10
  16. package/dist/components/toaster.css +21 -27
  17. package/dist/design-tokens.css +250 -122
  18. package/dist/tailwind.preset.js +1 -1
  19. package/dist/tailwind.theme.js +40 -1
  20. package/package.json +33 -31
  21. package/src/lib/assemble-design-tokens.ts +20 -0
  22. package/src/lib/set-theme.ts +73 -0
  23. package/src/lib/themes.ts +74 -0
package/dist/design-tokens.css CHANGED
@@ -1,7 +1,8 @@
1
1
  /**
2
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.
3
+ * Set data-brand (ib | alc) and data-color-mode (light | dark) on <html>,
4
+ * or use setTheme() from @ibis-design/css/theme.
5
+ * :root holds global tokens; :root + [data-brand="ib"][data-color-mode="light"] is the default theme overlay.
5
6
  */
6
7
 
7
8
  /**
@@ -135,7 +136,7 @@
135
136
  * Do not edit directly, this file was auto-generated.
136
137
  */
137
138
 
138
- :root, [data-theme="ib-light"] {
139
+ :root, [data-brand="ib"][data-color-mode="light"] {
139
140
  --color-primary-50: #f5f3ff;
140
141
  --color-primary-100: #edeafd;
141
142
  --color-primary-200: #ded7fd;
@@ -163,6 +164,7 @@
163
164
  --color-green: #009A08;
164
165
  --color-red: #B70c00;
165
166
  --color-orange: #FA8900;
167
+ --color-surface-page: #fafafa;
166
168
  --color-toaster-accent: #920075;
167
169
  --color-gradients-main-start: #3B1570;
168
170
  --color-gradients-main-end: #8E0175;
@@ -175,7 +177,6 @@
175
177
  --color-gradients-skeleton-end: rgba(255, 255, 255, 0.25);
176
178
  --color-gradients-button-start: #9665DF;
177
179
  --color-gradients-button-end: #7945C8;
178
- --color-backgrounds-classic-light: #fafafa;
179
180
  --color-backgrounds-classic-dark: #0d0d0d;
180
181
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
181
182
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
@@ -199,8 +200,34 @@
199
200
  --border-radius-2xl: 1.5rem;
200
201
  --border-radius-full: 9999px;
201
202
  --border-color-button: #BD91FF;
203
+ --color-surface-default: var(--color-white);
204
+ --color-surface-muted: var(--color-neutral-100);
205
+ --color-surface-subtle: var(--color-primary-50);
206
+ --color-surface-elevated: var(--color-white);
207
+ --color-surface-inverse: var(--color-neutral-900);
208
+ --color-surface-disabled: var(--color-neutral-100);
202
209
  --color-text-primary: var(--color-black);
210
+ --color-text-secondary: var(--color-neutral-700);
211
+ --color-text-muted: var(--color-neutral-500);
212
+ --color-text-disabled: var(--color-neutral-400);
203
213
  --color-text-inverse: var(--color-white);
214
+ --color-text-on-primary: var(--color-white);
215
+ --color-text-on-muted: var(--color-black);
216
+ --color-interactive-primary-bg-selected: var(--color-primary-200);
217
+ --color-interactive-primary-bg-hover: var(--color-primary-300);
218
+ --color-interactive-primary-fg: var(--color-primary-600);
219
+ --color-interactive-primary-fg-disabled: var(--color-neutral-400);
220
+ --color-interactive-primary-bg-emphasized: var(--color-primary-800);
221
+ --color-interactive-primary-border-selected: var(--color-primary-800);
222
+ --color-interactive-primary-indicator: var(--color-primary-900);
223
+ --color-interactive-primary-bg-disabled: var(--color-neutral-400);
224
+ --color-interactive-primary-fg-on-disabled: var(--color-neutral-600);
225
+ --color-interactive-primary-bg-menu-hover: var(--color-primary-400);
226
+ --color-interactive-primary-bg-menu-selected: var(--color-primary-500);
227
+ --color-interactive-primary-bg-menu-selected-hover: var(--color-primary-700);
228
+ --color-interactive-primary-track-on: var(--color-primary-700);
229
+ --color-interactive-primary-track-off: var(--color-neutral-200);
230
+ --color-interactive-neutral-bg-hover: var(--color-neutral-200);
204
231
  --color-toaster-default: var(--color-neutral-200);
205
232
  --color-toaster-success: var(--color-green);
206
233
  --color-toaster-error: var(--color-red);
@@ -210,58 +237,64 @@
210
237
  --color-brand-primary: var(--color-primary-500);
211
238
  --color-brand-secondary: var(--color-primary-700);
212
239
  --color-brand-neutral: var(--color-neutral-500);
240
+ --color-backgrounds-classic-light: var(--color-surface-page);
213
241
  --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
214
242
  --gradient-skeleton: linear-gradient(90deg, var(--color-gradients-skeleton-start) 0%, var(--color-gradients-skeleton-middle) 50%, var(--color-gradients-skeleton-end) 100%);
215
243
  --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
216
244
  --border-color-default: var(--color-neutral-200);
245
+ --border-color-subtle: var(--color-neutral-100);
246
+ --border-color-strong: var(--color-neutral-300);
217
247
  --border-color-focus: var(--color-primary-300);
248
+ --border-color-disabled: var(--color-neutral-200);
249
+ --border-color-emphasis: var(--color-primary-950);
218
250
  }
219
251
 
220
252
  /**
221
253
  * Do not edit directly, this file was auto-generated.
222
254
  */
223
255
 
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;
256
+ [data-brand="ib"][data-color-mode="dark"] {
257
+ --color-primary-50: #f5f0ff;
258
+ --color-primary-100: #ece4ff;
259
+ --color-primary-200: #c4a8ff;
260
+ --color-primary-300: #a87ef8;
261
+ --color-primary-400: #8e56e0;
262
+ --color-primary-500: #7940cc;
263
+ --color-primary-600: #5e2fa8;
264
+ --color-primary-700: #3d1d75;
265
+ --color-primary-800: #27104d;
266
+ --color-primary-900: #180a32;
267
+ --color-primary-950: #0e0618;
268
+ --color-neutral-50: #f0eeff;
269
+ --color-neutral-100: #dddaf0;
270
+ --color-neutral-200: #c8c4d8;
271
+ --color-neutral-300: #a8a4b8;
272
+ --color-neutral-400: #8f8aa0;
273
+ --color-neutral-500: #5a5568;
274
+ --color-neutral-600: #46405a;
275
+ --color-neutral-700: #38334a;
276
+ --color-neutral-800: #221d33;
277
+ --color-neutral-900: #150f22;
278
+ --color-neutral-950: #0e0b16;
247
279
  --color-white: #FFFFFF;
248
280
  --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 */
281
+ --color-green: #22C55E;
282
+ --color-red: #F04040;
283
+ --color-orange: #FFAA2E;
284
+ --color-surface-page: #1a1528;
285
+ --color-toaster-accent: #FF54D4;
286
+ --color-gradients-main-start: #251440;
287
+ --color-gradients-main-end: #630050;
288
+ --color-gradients-purple-start: #713BC1;
289
+ --color-gradients-purple-end: #C519A3;
290
+ --color-gradients-dark-purple-start: #522398;
291
+ --color-gradients-dark-purple-end: #8E56E0;
292
+ --color-gradients-skeleton-start: rgba(255, 255, 255, 0.08);
293
+ --color-gradients-skeleton-middle: rgba(255, 255, 255, 0.18);
294
+ --color-gradients-skeleton-end: rgba(255, 255, 255, 0.08);
295
+ --color-gradients-button-start: #8E56E0;
296
+ --color-gradients-button-end: #713BC1;
297
+ --color-backgrounds-classic-dark: #0f111a;
265
298
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
266
299
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
267
300
  --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
@@ -284,9 +317,35 @@
284
317
  --border-radius-2xl: 1.5rem;
285
318
  --border-radius-full: 9999px;
286
319
  --border-color-button: #BD91FF;
320
+ --color-surface-default: var(--color-neutral-900);
321
+ --color-surface-muted: var(--color-neutral-800);
322
+ --color-surface-subtle: var(--color-primary-900);
323
+ --color-surface-elevated: var(--color-neutral-800);
324
+ --color-surface-inverse: var(--color-neutral-100);
325
+ --color-surface-disabled: var(--color-neutral-800);
287
326
  --color-text-primary: var(--color-white);
327
+ --color-text-secondary: var(--color-neutral-300);
328
+ --color-text-muted: var(--color-neutral-400);
329
+ --color-text-disabled: var(--color-neutral-500);
288
330
  --color-text-inverse: var(--color-black);
289
- --color-toaster-default: var(--color-neutral-200);
331
+ --color-text-on-primary: var(--color-white);
332
+ --color-text-on-muted: var(--color-white);
333
+ --color-interactive-primary-bg-selected: var(--color-primary-800);
334
+ --color-interactive-primary-bg-hover: var(--color-primary-700);
335
+ --color-interactive-primary-fg: var(--color-primary-300);
336
+ --color-interactive-primary-fg-disabled: var(--color-neutral-500);
337
+ --color-interactive-primary-bg-emphasized: var(--color-primary-600);
338
+ --color-interactive-primary-border-selected: var(--color-primary-400);
339
+ --color-interactive-primary-indicator: var(--color-primary-300);
340
+ --color-interactive-primary-bg-disabled: var(--color-neutral-600);
341
+ --color-interactive-primary-fg-on-disabled: var(--color-neutral-400);
342
+ --color-interactive-primary-bg-menu-hover: var(--color-primary-500);
343
+ --color-interactive-primary-bg-menu-selected: var(--color-primary-600);
344
+ --color-interactive-primary-bg-menu-selected-hover: var(--color-primary-700);
345
+ --color-interactive-primary-track-on: var(--color-primary-600);
346
+ --color-interactive-primary-track-off: var(--color-neutral-700);
347
+ --color-interactive-neutral-bg-hover: var(--color-neutral-700);
348
+ --color-toaster-default: var(--color-neutral-300);
290
349
  --color-toaster-success: var(--color-green);
291
350
  --color-toaster-error: var(--color-red);
292
351
  --color-status-success: var(--color-green);
@@ -295,49 +354,56 @@
295
354
  --color-brand-primary: var(--color-primary-500);
296
355
  --color-brand-secondary: var(--color-primary-700);
297
356
  --color-brand-neutral: var(--color-neutral-500);
357
+ --color-backgrounds-classic-light: var(--color-surface-page);
298
358
  --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
299
359
  --gradient-skeleton: linear-gradient(90deg, var(--color-gradients-skeleton-start) 0%, var(--color-gradients-skeleton-middle) 50%, var(--color-gradients-skeleton-end) 100%);
300
360
  --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);
361
+ --border-color-default: var(--color-neutral-600);
362
+ --border-color-subtle: var(--color-neutral-700);
363
+ --border-color-strong: var(--color-neutral-500);
364
+ --border-color-focus: var(--color-primary-400);
365
+ --border-color-disabled: var(--color-neutral-700);
366
+ --border-color-emphasis: var(--color-primary-400);
303
367
  }
304
368
 
305
369
  /**
306
370
  * Do not edit directly, this file was auto-generated.
307
371
  */
308
372
 
309
- [data-theme="alc-light"] {
373
+ [data-brand="alc"][data-color-mode="light"] {
310
374
  --color-primary-50: #eff6ff;
311
375
  --color-primary-100: #daebff;
312
376
  --color-primary-200: #bdddff;
313
377
  --color-primary-300: #90c8ff;
314
378
  --color-primary-400: #5ca9fe;
315
379
  --color-primary-500: #3686fb;
316
- --color-primary-600: #2066f0;
380
+ --color-primary-600: #3686fb;
317
381
  --color-primary-700: #1851dd;
318
382
  --color-primary-800: #1a42b3;
319
383
  --color-primary-900: #1b3c8d;
320
384
  --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;
385
+ --color-neutral-50: #fafafa;
386
+ --color-neutral-100: #fbfcfe;
387
+ --color-neutral-200: #e0e2eb;
388
+ --color-neutral-300: #dbdbdb;
389
+ --color-neutral-400: #c1c1c1;
390
+ --color-neutral-500: #a8a8a8;
391
+ --color-neutral-600: #8d8d8e;
392
+ --color-neutral-700: #666666;
393
+ --color-neutral-800: #4d4d4d;
394
+ --color-neutral-900: #404454;
331
395
  --color-neutral-950: #000000;
332
396
  --color-white: #FFFFFF;
333
397
  --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;
398
+ --color-green: #0DA529;
399
+ --color-red: #FF0420;
400
+ --color-orange: #A85F00;
401
+ --color-surface-page: #fafafa;
402
+ --color-brand-secondary: #17285C; /** Secondary button label and border (Figma) */
403
+ --color-alchemy-neutral-yellow: #ffe6c7;
404
+ --color-alchemy-neutral-blue: #d8e2ff;
405
+ --color-alchemy-neutral-green: #d6ffda;
406
+ --color-alchemy-neutral-purple: #eae6f4;
341
407
  --color-gradients-main-start: #244197;
342
408
  --color-gradients-main-end: #090F20;
343
409
  --color-gradients-brand-start: #FECA1F;
@@ -345,9 +411,8 @@
345
411
  --color-gradients-brand-end: #2F4688;
346
412
  --color-gradients-button-start: #244197;
347
413
  --color-gradients-button-end: #090F20;
348
- --color-backgrounds-classic-light: #fafafa;
349
414
  --color-backgrounds-classic-dark: #0d0d0d;
350
- --color-backgrounds-cardbg-purple: #920075;
415
+ --color-backgrounds-cardbg-purple: #9747ff;
351
416
  --color-backgrounds-cardbg-dark-purple: #522398;
352
417
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
353
418
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
@@ -382,73 +447,105 @@
382
447
  --border-radius-xl: 1rem;
383
448
  --border-radius-2xl: 1.5rem;
384
449
  --border-radius-full: 9999px;
450
+ --border-color-button: #0939C4;
451
+ --color-surface-default: var(--color-white);
452
+ --color-surface-muted: var(--color-neutral-100);
453
+ --color-surface-subtle: var(--color-primary-50);
454
+ --color-surface-elevated: var(--color-white);
455
+ --color-surface-inverse: var(--color-neutral-900);
456
+ --color-surface-disabled: var(--color-neutral-100);
385
457
  --color-text-primary: var(--color-black);
458
+ --color-text-secondary: var(--color-neutral-700);
459
+ --color-text-muted: var(--color-neutral-500);
460
+ --color-text-disabled: var(--color-neutral-400);
386
461
  --color-text-inverse: var(--color-white);
462
+ --color-text-on-primary: var(--color-white);
463
+ --color-text-on-muted: var(--color-black);
464
+ --color-interactive-primary-bg-selected: var(--color-primary-200);
465
+ --color-interactive-primary-bg-hover: var(--color-primary-300);
466
+ --color-interactive-primary-fg: var(--color-primary-700);
467
+ --color-interactive-primary-fg-disabled: var(--color-neutral-400);
468
+ --color-interactive-primary-bg-emphasized: var(--color-primary-800);
469
+ --color-interactive-primary-border-selected: var(--color-primary-800);
470
+ --color-interactive-primary-indicator: var(--color-primary-900);
471
+ --color-interactive-primary-bg-disabled: var(--color-neutral-400);
472
+ --color-interactive-primary-fg-on-disabled: var(--color-neutral-600);
473
+ --color-interactive-primary-bg-menu-hover: var(--color-primary-400);
474
+ --color-interactive-primary-bg-menu-selected: var(--color-primary-500);
475
+ --color-interactive-primary-bg-menu-selected-hover: var(--color-primary-700);
476
+ --color-interactive-primary-track-on: var(--color-primary-700);
477
+ --color-interactive-primary-track-off: var(--color-neutral-200);
478
+ --color-interactive-neutral-bg-hover: var(--color-neutral-200);
387
479
  --color-toaster-default: var(--color-neutral-200);
388
480
  --color-toaster-success: var(--color-green);
389
481
  --color-toaster-error: var(--color-red);
482
+ --color-toaster-accent: var(--color-brand-secondary);
390
483
  --color-status-success: var(--color-green);
391
484
  --color-status-error: var(--color-red);
392
485
  --color-status-warning: var(--color-orange);
393
486
  --color-brand-primary: var(--color-primary-500);
394
- --color-brand-neutral: var(--color-neutral-500);
487
+ --color-brand-neutral: var(--color-neutral-600);
488
+ --color-backgrounds-classic-light: var(--color-surface-page);
395
489
  --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%);
490
+ --gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
491
+ --gradient-brand-accent: linear-gradient(227.88deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
492
+ --gradient-button: linear-gradient(227.88deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
399
493
  --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);
494
+ --border-color-subtle: var(--color-neutral-100);
495
+ --border-color-strong: var(--color-neutral-300);
496
+ --border-color-focus: var(--color-primary-400);
497
+ --border-color-disabled: var(--color-neutral-200);
498
+ --border-color-emphasis: var(--color-primary-950);
403
499
  }
404
500
 
405
501
  /**
406
502
  * Do not edit directly, this file was auto-generated.
407
503
  */
408
504
 
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;
505
+ [data-brand="alc"][data-color-mode="dark"] {
506
+ --color-primary-50: #eef5ff;
507
+ --color-primary-100: #d6e8ff;
508
+ --color-primary-200: #a8ceff;
509
+ --color-primary-300: #74b1fc;
510
+ --color-primary-400: #4d9ef6;
511
+ --color-primary-500: #2e7de0;
512
+ --color-primary-600: #1a5fba;
513
+ --color-primary-700: #0f3f88;
514
+ --color-primary-800: #092860;
515
+ --color-primary-900: #051638;
516
+ --color-primary-950: #020d22;
517
+ --color-neutral-50: #edf1ff;
518
+ --color-neutral-100: #d8e0f5;
519
+ --color-neutral-200: #b8c4de;
520
+ --color-neutral-300: #8e9dbc;
521
+ --color-neutral-400: #63728f;
522
+ --color-neutral-500: #465068;
523
+ --color-neutral-600: #323c52;
524
+ --color-neutral-700: #232c40;
525
+ --color-neutral-800: #161e30;
526
+ --color-neutral-900: #0d1220;
527
+ --color-neutral-950: #070b14;
432
528
  --color-white: #FFFFFF;
433
529
  --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;
530
+ --color-green: #22C55E;
531
+ --color-red: #F04040;
532
+ --color-orange: #FFAA2E;
533
+ --color-surface-page: #161f39;
534
+ --color-brand-secondary: #4774FA; /** Secondary button label and border (Figma dark) */
535
+ --color-alchemy-neutral-yellow: #b8860f;
536
+ --color-alchemy-neutral-blue: #1a5fba;
537
+ --color-alchemy-neutral-green: #2a7a32;
538
+ --color-alchemy-neutral-purple: #2a2240;
441
539
  --color-gradients-main-start: #244197;
442
540
  --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;
541
+ --color-gradients-brand-start: #D4A400;
542
+ --color-gradients-brand-middle: #2A7A32;
543
+ --color-gradients-brand-end: #1A2D55;
544
+ --color-gradients-button-start: #3E6FFF;
545
+ --color-gradients-button-end: #4774FA;
546
+ --color-backgrounds-classic-dark: #0f111a;
547
+ --color-backgrounds-cardbg-purple: #522398;
548
+ --color-backgrounds-cardbg-dark-purple: #0939c4;
452
549
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
453
550
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
454
551
  --font-family-sans: Inter, Verdana, system-ui, sans-serif; /** Body and UI text */
@@ -482,22 +579,53 @@
482
579
  --border-radius-xl: 1rem;
483
580
  --border-radius-2xl: 1.5rem;
484
581
  --border-radius-full: 9999px;
582
+ --border-color-button: #3E6FFF;
583
+ --color-surface-default: var(--color-neutral-900);
584
+ --color-surface-muted: var(--color-neutral-800);
585
+ --color-surface-subtle: var(--color-primary-900);
586
+ --color-surface-elevated: var(--color-neutral-800);
587
+ --color-surface-inverse: var(--color-neutral-100);
588
+ --color-surface-disabled: var(--color-neutral-800);
485
589
  --color-text-primary: var(--color-white);
590
+ --color-text-secondary: var(--color-neutral-300);
591
+ --color-text-muted: var(--color-neutral-400);
592
+ --color-text-disabled: var(--color-neutral-500);
486
593
  --color-text-inverse: var(--color-black);
487
- --color-toaster-default: var(--color-neutral-200);
594
+ --color-text-on-primary: var(--color-white);
595
+ --color-text-on-muted: var(--color-white);
596
+ --color-interactive-primary-bg-selected: var(--color-primary-800);
597
+ --color-interactive-primary-bg-hover: var(--color-primary-700);
598
+ --color-interactive-primary-fg: var(--color-primary-300);
599
+ --color-interactive-primary-fg-disabled: var(--color-neutral-500);
600
+ --color-interactive-primary-bg-emphasized: var(--color-primary-600);
601
+ --color-interactive-primary-border-selected: var(--color-primary-400);
602
+ --color-interactive-primary-indicator: var(--color-primary-300);
603
+ --color-interactive-primary-bg-disabled: var(--color-neutral-600);
604
+ --color-interactive-primary-fg-on-disabled: var(--color-neutral-400);
605
+ --color-interactive-primary-bg-menu-hover: var(--color-primary-500);
606
+ --color-interactive-primary-bg-menu-selected: var(--color-primary-600);
607
+ --color-interactive-primary-bg-menu-selected-hover: var(--color-primary-700);
608
+ --color-interactive-primary-track-on: var(--color-primary-600);
609
+ --color-interactive-primary-track-off: var(--color-neutral-700);
610
+ --color-interactive-neutral-bg-hover: var(--color-neutral-700);
611
+ --color-toaster-default: var(--color-neutral-300);
488
612
  --color-toaster-success: var(--color-green);
489
613
  --color-toaster-error: var(--color-red);
614
+ --color-toaster-accent: var(--color-brand-secondary);
490
615
  --color-status-success: var(--color-green);
491
616
  --color-status-error: var(--color-red);
492
617
  --color-status-warning: var(--color-orange);
493
618
  --color-brand-primary: var(--color-primary-500);
494
- --color-brand-neutral: var(--color-neutral-500);
619
+ --color-brand-neutral: var(--color-neutral-600);
620
+ --color-backgrounds-classic-light: var(--color-surface-page);
495
621
  --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);
622
+ --gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
623
+ --gradient-brand-accent: linear-gradient(227.88deg, var(--color-gradients-brand-start) 0%, var(--color-gradients-brand-middle) 50%, var(--color-gradients-brand-end) 100%);
624
+ --gradient-button: linear-gradient(227.88deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
625
+ --border-color-default: var(--color-neutral-600);
626
+ --border-color-subtle: var(--color-neutral-700);
627
+ --border-color-strong: var(--color-neutral-500);
628
+ --border-color-focus: var(--color-primary-600);
629
+ --border-color-disabled: var(--color-neutral-700);
630
+ --border-color-emphasis: var(--color-primary-400);
503
631
  }
package/dist/tailwind.preset.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @type {import('tailwindcss').Config} */
2
2
  module.exports = {
3
- darkMode: ["selector", '[data-theme$="-dark"]'],
3
+ darkMode: ["selector", '[data-color-mode="dark"]'],
4
4
  presets: [require("./tailwind.theme.js")],
5
5
  };
package/dist/tailwind.theme.js CHANGED
@@ -178,7 +178,11 @@ module.exports = {
178
178
  },
179
179
  color: {
180
180
  default: "var(--border-color-default)",
181
+ subtle: "var(--border-color-subtle)",
182
+ strong: "var(--border-color-strong)",
181
183
  focus: "var(--border-color-focus)",
184
+ disabled: "var(--border-color-disabled)",
185
+ emphasis: "var(--border-color-emphasis)",
182
186
  button: "var(--border-color-button)"
183
187
  }
184
188
  },
@@ -248,9 +252,44 @@ module.exports = {
248
252
  green: "var(--color-green)",
249
253
  red: "var(--color-red)",
250
254
  orange: "var(--color-orange)",
255
+ surface: {
256
+ default: "var(--color-surface-default)",
257
+ muted: "var(--color-surface-muted)",
258
+ subtle: "var(--color-surface-subtle)",
259
+ elevated: "var(--color-surface-elevated)",
260
+ inverse: "var(--color-surface-inverse)",
261
+ disabled: "var(--color-surface-disabled)",
262
+ page: "var(--color-surface-page)"
263
+ },
251
264
  text: {
252
265
  primary: "var(--color-text-primary)",
253
- inverse: "var(--color-text-inverse)"
266
+ secondary: "var(--color-text-secondary)",
267
+ muted: "var(--color-text-muted)",
268
+ disabled: "var(--color-text-disabled)",
269
+ inverse: "var(--color-text-inverse)",
270
+ onPrimary: "var(--color-text-on-primary)",
271
+ onMuted: "var(--color-text-on-muted)"
272
+ },
273
+ interactive: {
274
+ primary: {
275
+ bgSelected: "var(--color-interactive-primary-bg-selected)",
276
+ bgHover: "var(--color-interactive-primary-bg-hover)",
277
+ fg: "var(--color-interactive-primary-fg)",
278
+ fgDisabled: "var(--color-interactive-primary-fg-disabled)",
279
+ bgEmphasized: "var(--color-interactive-primary-bg-emphasized)",
280
+ borderSelected: "var(--color-interactive-primary-border-selected)",
281
+ indicator: "var(--color-interactive-primary-indicator)",
282
+ bgDisabled: "var(--color-interactive-primary-bg-disabled)",
283
+ fgOnDisabled: "var(--color-interactive-primary-fg-on-disabled)",
284
+ bgMenuHover: "var(--color-interactive-primary-bg-menu-hover)",
285
+ bgMenuSelected: "var(--color-interactive-primary-bg-menu-selected)",
286
+ bgMenuSelectedHover: "var(--color-interactive-primary-bg-menu-selected-hover)",
287
+ trackOn: "var(--color-interactive-primary-track-on)",
288
+ trackOff: "var(--color-interactive-primary-track-off)"
289
+ },
290
+ neutral: {
291
+ bgHover: "var(--color-interactive-neutral-bg-hover)"
292
+ }
254
293
  },
255
294
  toaster: {
256
295
  default: "var(--color-toaster-default)",
package/package.json CHANGED
@@ -1,31 +1,33 @@
1
- {
2
- "name": "@ibis-design/css",
3
- "version": "0.8.1",
4
- "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
5
- "type": "module",
6
- "exports": {
7
- ".": "./dist/design-tokens.css",
8
- "./design-tokens.css": "./dist/design-tokens.css",
9
- "./tailwind.preset": "./dist/tailwind.preset.js",
10
- "./preset": "./dist/tailwind.preset.js",
11
- "./ibis-design.css": "./dist/design-tokens.css",
12
- "./alchemy-design.css": "./dist/design-tokens.css",
13
- "./ibis/tailwind.preset": "./dist/tailwind.preset.js",
14
- "./alchemy/tailwind.preset": "./dist/tailwind.preset.js",
15
- "./components/*": "./dist/components/*",
16
- "./tailwind.theme": "./dist/tailwind.theme.js"
17
- },
18
- "files": [
19
- "dist"
20
- ],
21
- "scripts": {
22
- "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts",
23
- "validate": "tsx src/scripts/validate-themes.ts",
24
- "prepublishOnly": "npm run build"
25
- },
26
- "devDependencies": {
27
- "sd-tailwindcss-transformer": "^2.2.1",
28
- "style-dictionary": "^5.4.1",
29
- "tsx": "^4.22.3"
30
- }
31
- }
1
+ {
2
+ "name": "@ibis-design/css",
3
+ "version": "0.9.0",
4
+ "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
5
+ "type": "module",
6
+ "exports": {
7
+ ".": "./dist/design-tokens.css",
8
+ "./design-tokens.css": "./dist/design-tokens.css",
9
+ "./tailwind.preset": "./dist/tailwind.preset.js",
10
+ "./preset": "./dist/tailwind.preset.js",
11
+ "./ibis-design.css": "./dist/design-tokens.css",
12
+ "./alchemy-design.css": "./dist/design-tokens.css",
13
+ "./ibis/tailwind.preset": "./dist/tailwind.preset.js",
14
+ "./alchemy/tailwind.preset": "./dist/tailwind.preset.js",
15
+ "./components/*": "./dist/components/*",
16
+ "./tailwind.theme": "./dist/tailwind.theme.js",
17
+ "./theme": "./src/lib/set-theme.ts"
18
+ },
19
+ "files": [
20
+ "dist",
21
+ "src/lib"
22
+ ],
23
+ "scripts": {
24
+ "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-component-tokens.ts",
25
+ "validate": "tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-component-tokens.ts",
26
+ "prepublishOnly": "npm run build"
27
+ },
28
+ "devDependencies": {
29
+ "sd-tailwindcss-transformer": "^2.2.1",
30
+ "style-dictionary": "^5.4.1",
31
+ "tsx": "^4.22.3"
32
+ }
33
+ }