@ibis-design/css 0.8.2 → 1.0.0-alpha.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 (35) hide show
  1. package/README.md +46 -14
  2. package/dist/bootstrap-overrides.css +81 -0
  3. package/dist/components/authLayout.css +124 -0
  4. package/dist/components/banner.css +13 -17
  5. package/dist/components/button.css +13 -13
  6. package/dist/components/card.css +55 -0
  7. package/dist/components/cardLayout.css +71 -0
  8. package/dist/components/checkbox.css +29 -11
  9. package/dist/components/chips.css +8 -8
  10. package/dist/components/dashboardLayout.css +92 -0
  11. package/dist/components/dropdown.css +34 -16
  12. package/dist/components/dropdownButton.css +42 -28
  13. package/dist/components/formLayout.css +88 -0
  14. package/dist/components/navBottom.css +32 -0
  15. package/dist/components/navButton.css +233 -0
  16. package/dist/components/navDrawer.css +168 -0
  17. package/dist/components/navRail.css +135 -0
  18. package/dist/components/navShell.css +314 -0
  19. package/dist/components/pillTab.css +7 -12
  20. package/dist/components/radio.css +14 -13
  21. package/dist/components/switch.css +5 -8
  22. package/dist/components/textInput.css +12 -15
  23. package/dist/components/textarea.css +7 -13
  24. package/dist/components/textlink.css +6 -14
  25. package/dist/components/tipIndicator.css +4 -10
  26. package/dist/components/toaster.css +21 -27
  27. package/dist/components/topBar.css +52 -0
  28. package/dist/design-tokens.css +210 -86
  29. package/dist/tailwind.preset.js +1 -1
  30. package/dist/tailwind.theme.js +42 -2
  31. package/package.json +34 -31
  32. package/src/lib/assemble-bootstrap-overrides.ts +23 -0
  33. package/src/lib/assemble-design-tokens.ts +22 -0
  34. package/src/lib/set-theme.ts +79 -0
  35. package/src/lib/themes.ts +74 -0
package/dist/design-tokens.css CHANGED
@@ -1,7 +1,6 @@
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>, or use setTheme() from @ibis-design/css/theme. :root holds global tokens; :root + [data-brand="ib"][data-color-mode="light"] is the default theme overlay.
5
4
  */
6
5
 
7
6
  /**
@@ -129,13 +128,14 @@
129
128
  --shadow-focus-default: 0 0 0 4px var(--shadow-color-black-soft);
130
129
  --shadow-focus-primary: 0 0 0 4px var(--shadow-color-brand-soft);
131
130
  --shadow-focus-error: 0 0 0 4px var(--shadow-color-black-medium);
131
+ --shadow-nav: 0 0 8px 0 var(--shadow-color-black-soft);
132
132
  }
133
133
 
134
134
  /**
135
135
  * Do not edit directly, this file was auto-generated.
136
136
  */
137
137
 
138
- :root, [data-theme="ib-light"] {
138
+ :root, [data-brand="ib"][data-color-mode="light"] {
139
139
  --color-primary-50: #f5f3ff;
140
140
  --color-primary-100: #edeafd;
141
141
  --color-primary-200: #ded7fd;
@@ -163,6 +163,7 @@
163
163
  --color-green: #009A08;
164
164
  --color-red: #B70c00;
165
165
  --color-orange: #FA8900;
166
+ --color-surface-page: #fafafa;
166
167
  --color-toaster-accent: #920075;
167
168
  --color-gradients-main-start: #3B1570;
168
169
  --color-gradients-main-end: #8E0175;
@@ -175,7 +176,6 @@
175
176
  --color-gradients-skeleton-end: rgba(255, 255, 255, 0.25);
176
177
  --color-gradients-button-start: #9665DF;
177
178
  --color-gradients-button-end: #7945C8;
178
- --color-backgrounds-classic-light: #fafafa;
179
179
  --color-backgrounds-classic-dark: #0d0d0d;
180
180
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
181
181
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
@@ -188,7 +188,7 @@
188
188
  --font-size-heading-h1: 4.188rem;
189
189
  --font-size-heading-h2: 3.188rem;
190
190
  --font-size-heading-h3: 2.375rem;
191
- --font-size-heading-h4: 1.75rem;
191
+ --font-size-heading-h4: 1.750rem;
192
192
  --font-size-heading-h5: 1.312rem;
193
193
  --border-radius-none: 0;
194
194
  --border-radius-xs: 0.25rem;
@@ -199,8 +199,34 @@
199
199
  --border-radius-2xl: 1.5rem;
200
200
  --border-radius-full: 9999px;
201
201
  --border-color-button: #BD91FF;
202
+ --color-surface-default: var(--color-white);
203
+ --color-surface-muted: var(--color-neutral-100);
204
+ --color-surface-subtle: var(--color-primary-50);
205
+ --color-surface-elevated: var(--color-white);
206
+ --color-surface-inverse: var(--color-neutral-900);
207
+ --color-surface-disabled: var(--color-neutral-100);
202
208
  --color-text-primary: var(--color-black);
209
+ --color-text-secondary: var(--color-neutral-700);
210
+ --color-text-muted: var(--color-neutral-500);
211
+ --color-text-disabled: var(--color-neutral-400);
203
212
  --color-text-inverse: var(--color-white);
213
+ --color-text-on-primary: var(--color-white);
214
+ --color-text-on-muted: var(--color-black);
215
+ --color-interactive-primary-bg-selected: var(--color-primary-200);
216
+ --color-interactive-primary-bg-hover: var(--color-primary-300);
217
+ --color-interactive-primary-fg: var(--color-primary-600);
218
+ --color-interactive-primary-fg-disabled: var(--color-neutral-400);
219
+ --color-interactive-primary-bg-emphasized: var(--color-primary-800);
220
+ --color-interactive-primary-border-selected: var(--color-primary-800);
221
+ --color-interactive-primary-indicator: var(--color-primary-900);
222
+ --color-interactive-primary-bg-disabled: var(--color-neutral-400);
223
+ --color-interactive-primary-fg-on-disabled: var(--color-neutral-600);
224
+ --color-interactive-primary-bg-menu-hover: var(--color-primary-400);
225
+ --color-interactive-primary-bg-menu-selected: var(--color-primary-500);
226
+ --color-interactive-primary-bg-menu-selected-hover: var(--color-primary-700);
227
+ --color-interactive-primary-track-on: var(--color-primary-700);
228
+ --color-interactive-primary-track-off: var(--color-neutral-200);
229
+ --color-interactive-neutral-bg-hover: var(--color-neutral-200);
204
230
  --color-toaster-default: var(--color-neutral-200);
205
231
  --color-toaster-success: var(--color-green);
206
232
  --color-toaster-error: var(--color-red);
@@ -210,45 +236,51 @@
210
236
  --color-brand-primary: var(--color-primary-500);
211
237
  --color-brand-secondary: var(--color-primary-700);
212
238
  --color-brand-neutral: var(--color-neutral-500);
239
+ --color-backgrounds-classic-light: var(--color-surface-page);
213
240
  --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
214
241
  --gradient-skeleton: linear-gradient(90deg, var(--color-gradients-skeleton-start) 0%, var(--color-gradients-skeleton-middle) 50%, var(--color-gradients-skeleton-end) 100%);
215
242
  --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
216
243
  --border-color-default: var(--color-neutral-200);
244
+ --border-color-subtle: var(--color-neutral-100);
245
+ --border-color-strong: var(--color-neutral-300);
217
246
  --border-color-focus: var(--color-primary-300);
247
+ --border-color-disabled: var(--color-neutral-200);
248
+ --border-color-emphasis: var(--color-primary-950);
218
249
  }
219
250
 
220
251
  /**
221
252
  * Do not edit directly, this file was auto-generated.
222
253
  */
223
254
 
224
- [data-theme="ib-dark"] {
225
- --color-primary-50: #14121f;
226
- --color-primary-100: #251440;
227
- --color-primary-200: #301362;
228
- --color-primary-300: #3b1570;
229
- --color-primary-400: #48277d;
230
- --color-primary-500: #713bc1;
231
- --color-primary-600: #7d42d6;
232
- --color-primary-700: #8647e5;
233
- --color-primary-800: #8e56e0;
234
- --color-primary-900: #aa8ff6;
235
- --color-primary-950: #ded7fd;
236
- --color-neutral-50: #0d0d0d;
237
- --color-neutral-100: #0f111a;
238
- --color-neutral-200: #1e1e24;
239
- --color-neutral-300: #2d2d35;
240
- --color-neutral-400: #404454;
241
- --color-neutral-500: #5d5d5d;
242
- --color-neutral-600: #6d6d6d;
243
- --color-neutral-700: #8d8d8e;
244
- --color-neutral-800: #c1c1c1;
245
- --color-neutral-900: #e0e2eb;
246
- --color-neutral-950: #f4f4f4;
255
+ [data-brand="ib"][data-color-mode="dark"] {
256
+ --color-primary-50: #f5f0ff;
257
+ --color-primary-100: #ece4ff;
258
+ --color-primary-200: #c4a8ff;
259
+ --color-primary-300: #a87ef8;
260
+ --color-primary-400: #8e56e0;
261
+ --color-primary-500: #7940cc;
262
+ --color-primary-600: #5e2fa8;
263
+ --color-primary-700: #3d1d75;
264
+ --color-primary-800: #27104d;
265
+ --color-primary-900: #180a32;
266
+ --color-primary-950: #0e0618;
267
+ --color-neutral-50: #f0eeff;
268
+ --color-neutral-100: #dddaf0;
269
+ --color-neutral-200: #c8c4d8;
270
+ --color-neutral-300: #a8a4b8;
271
+ --color-neutral-400: #8f8aa0;
272
+ --color-neutral-500: #5a5568;
273
+ --color-neutral-600: #46405a;
274
+ --color-neutral-700: #38334a;
275
+ --color-neutral-800: #221d33;
276
+ --color-neutral-900: #150f22;
277
+ --color-neutral-950: #0e0b16;
247
278
  --color-white: #FFFFFF;
248
279
  --color-black: #000000;
249
- --color-green: #0DA529;
250
- --color-red: #E85A52;
251
- --color-orange: #FB9A33;
280
+ --color-green: #22C55E;
281
+ --color-red: #F04040;
282
+ --color-orange: #FFAA2E;
283
+ --color-surface-page: #1a1528;
252
284
  --color-toaster-accent: #FF54D4;
253
285
  --color-gradients-main-start: #251440;
254
286
  --color-gradients-main-end: #630050;
@@ -261,7 +293,6 @@
261
293
  --color-gradients-skeleton-end: rgba(255, 255, 255, 0.08);
262
294
  --color-gradients-button-start: #8E56E0;
263
295
  --color-gradients-button-end: #713BC1;
264
- --color-backgrounds-classic-light: #1a1528;
265
296
  --color-backgrounds-classic-dark: #0f111a;
266
297
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
267
298
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
@@ -274,7 +305,7 @@
274
305
  --font-size-heading-h1: 4.188rem;
275
306
  --font-size-heading-h2: 3.188rem;
276
307
  --font-size-heading-h3: 2.375rem;
277
- --font-size-heading-h4: 1.75rem;
308
+ --font-size-heading-h4: 1.750rem;
278
309
  --font-size-heading-h5: 1.312rem;
279
310
  --border-radius-none: 0;
280
311
  --border-radius-xs: 0.25rem;
@@ -285,8 +316,34 @@
285
316
  --border-radius-2xl: 1.5rem;
286
317
  --border-radius-full: 9999px;
287
318
  --border-color-button: #BD91FF;
319
+ --color-surface-default: var(--color-neutral-900);
320
+ --color-surface-muted: var(--color-neutral-800);
321
+ --color-surface-subtle: var(--color-primary-900);
322
+ --color-surface-elevated: var(--color-neutral-800);
323
+ --color-surface-inverse: var(--color-neutral-100);
324
+ --color-surface-disabled: var(--color-neutral-800);
288
325
  --color-text-primary: var(--color-white);
326
+ --color-text-secondary: var(--color-neutral-300);
327
+ --color-text-muted: var(--color-neutral-400);
328
+ --color-text-disabled: var(--color-neutral-500);
289
329
  --color-text-inverse: var(--color-black);
330
+ --color-text-on-primary: var(--color-white);
331
+ --color-text-on-muted: var(--color-white);
332
+ --color-interactive-primary-bg-selected: var(--color-primary-800);
333
+ --color-interactive-primary-bg-hover: var(--color-primary-700);
334
+ --color-interactive-primary-fg: var(--color-primary-300);
335
+ --color-interactive-primary-fg-disabled: var(--color-neutral-500);
336
+ --color-interactive-primary-bg-emphasized: var(--color-primary-600);
337
+ --color-interactive-primary-border-selected: var(--color-primary-400);
338
+ --color-interactive-primary-indicator: var(--color-primary-300);
339
+ --color-interactive-primary-bg-disabled: var(--color-neutral-600);
340
+ --color-interactive-primary-fg-on-disabled: var(--color-neutral-400);
341
+ --color-interactive-primary-bg-menu-hover: var(--color-primary-500);
342
+ --color-interactive-primary-bg-menu-selected: var(--color-primary-600);
343
+ --color-interactive-primary-bg-menu-selected-hover: var(--color-primary-700);
344
+ --color-interactive-primary-track-on: var(--color-primary-600);
345
+ --color-interactive-primary-track-off: var(--color-neutral-700);
346
+ --color-interactive-neutral-bg-hover: var(--color-neutral-700);
290
347
  --color-toaster-default: var(--color-neutral-300);
291
348
  --color-toaster-success: var(--color-green);
292
349
  --color-toaster-error: var(--color-red);
@@ -296,29 +353,34 @@
296
353
  --color-brand-primary: var(--color-primary-500);
297
354
  --color-brand-secondary: var(--color-primary-700);
298
355
  --color-brand-neutral: var(--color-neutral-500);
356
+ --color-backgrounds-classic-light: var(--color-surface-page);
299
357
  --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
300
358
  --gradient-skeleton: linear-gradient(90deg, var(--color-gradients-skeleton-start) 0%, var(--color-gradients-skeleton-middle) 50%, var(--color-gradients-skeleton-end) 100%);
301
359
  --gradient-button: linear-gradient(180deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
302
- --border-color-default: var(--color-neutral-400);
360
+ --border-color-default: var(--color-neutral-600);
361
+ --border-color-subtle: var(--color-neutral-700);
362
+ --border-color-strong: var(--color-neutral-500);
303
363
  --border-color-focus: var(--color-primary-400);
364
+ --border-color-disabled: var(--color-neutral-700);
365
+ --border-color-emphasis: var(--color-primary-400);
304
366
  }
305
367
 
306
368
  /**
307
369
  * Do not edit directly, this file was auto-generated.
308
370
  */
309
371
 
310
- [data-theme="alc-light"] {
311
- --color-primary-50: #d8e2ff;
312
- --color-primary-100: #d8e2ff;
313
- --color-primary-200: #c5d8ff;
314
- --color-primary-300: #90b8ff;
315
- --color-primary-400: #0939c4;
316
- --color-primary-500: #3864e7;
317
- --color-primary-600: #3557ba;
318
- --color-primary-700: #0939c4;
319
- --color-primary-800: #13224c;
320
- --color-primary-900: #17285c;
321
- --color-primary-950: #13224c;
372
+ [data-brand="alc"][data-color-mode="light"] {
373
+ --color-primary-50: #eff6ff;
374
+ --color-primary-100: #daebff;
375
+ --color-primary-200: #bdddff;
376
+ --color-primary-300: #90c8ff;
377
+ --color-primary-400: #5ca9fe;
378
+ --color-primary-500: #3686fb;
379
+ --color-primary-600: #3686fb;
380
+ --color-primary-700: #1851dd;
381
+ --color-primary-800: #1a42b3;
382
+ --color-primary-900: #1b3c8d;
383
+ --color-primary-950: #152554;
322
384
  --color-neutral-50: #fafafa;
323
385
  --color-neutral-100: #fbfcfe;
324
386
  --color-neutral-200: #e0e2eb;
@@ -335,6 +397,7 @@
335
397
  --color-green: #0DA529;
336
398
  --color-red: #FF0420;
337
399
  --color-orange: #A85F00;
400
+ --color-surface-page: #fafafa;
338
401
  --color-brand-secondary: #17285C; /** Secondary button label and border (Figma) */
339
402
  --color-alchemy-neutral-yellow: #ffe6c7;
340
403
  --color-alchemy-neutral-blue: #d8e2ff;
@@ -342,12 +405,11 @@
342
405
  --color-alchemy-neutral-purple: #eae6f4;
343
406
  --color-gradients-main-start: #244197;
344
407
  --color-gradients-main-end: #090F20;
345
- --color-gradients-brand-start: #3866ED;
346
- --color-gradients-brand-middle: #3E6FFF;
347
- --color-gradients-brand-end: #3557BA;
348
- --color-gradients-button-start: #17285C;
349
- --color-gradients-button-end: #13224C;
350
- --color-backgrounds-classic-light: #fafafa;
408
+ --color-gradients-brand-start: #FECA1F;
409
+ --color-gradients-brand-middle: #3DA042;
410
+ --color-gradients-brand-end: #2F4688;
411
+ --color-gradients-button-start: #244197;
412
+ --color-gradients-button-end: #090F20;
351
413
  --color-backgrounds-classic-dark: #0d0d0d;
352
414
  --color-backgrounds-cardbg-purple: #9747ff;
353
415
  --color-backgrounds-cardbg-dark-purple: #522398;
@@ -385,8 +447,34 @@
385
447
  --border-radius-2xl: 1.5rem;
386
448
  --border-radius-full: 9999px;
387
449
  --border-color-button: #0939C4;
450
+ --color-surface-default: var(--color-white);
451
+ --color-surface-muted: var(--color-neutral-100);
452
+ --color-surface-subtle: var(--color-primary-50);
453
+ --color-surface-elevated: var(--color-white);
454
+ --color-surface-inverse: var(--color-neutral-900);
455
+ --color-surface-disabled: var(--color-neutral-100);
388
456
  --color-text-primary: var(--color-black);
457
+ --color-text-secondary: var(--color-neutral-700);
458
+ --color-text-muted: var(--color-neutral-500);
459
+ --color-text-disabled: var(--color-neutral-400);
389
460
  --color-text-inverse: var(--color-white);
461
+ --color-text-on-primary: var(--color-white);
462
+ --color-text-on-muted: var(--color-black);
463
+ --color-interactive-primary-bg-selected: var(--color-primary-200);
464
+ --color-interactive-primary-bg-hover: var(--color-primary-300);
465
+ --color-interactive-primary-fg: var(--color-primary-700);
466
+ --color-interactive-primary-fg-disabled: var(--color-neutral-400);
467
+ --color-interactive-primary-bg-emphasized: var(--color-primary-800);
468
+ --color-interactive-primary-border-selected: var(--color-primary-800);
469
+ --color-interactive-primary-indicator: var(--color-primary-900);
470
+ --color-interactive-primary-bg-disabled: var(--color-neutral-400);
471
+ --color-interactive-primary-fg-on-disabled: var(--color-neutral-600);
472
+ --color-interactive-primary-bg-menu-hover: var(--color-primary-400);
473
+ --color-interactive-primary-bg-menu-selected: var(--color-primary-500);
474
+ --color-interactive-primary-bg-menu-selected-hover: var(--color-primary-700);
475
+ --color-interactive-primary-track-on: var(--color-primary-700);
476
+ --color-interactive-primary-track-off: var(--color-neutral-200);
477
+ --color-interactive-neutral-bg-hover: var(--color-neutral-200);
390
478
  --color-toaster-default: var(--color-neutral-200);
391
479
  --color-toaster-success: var(--color-green);
392
480
  --color-toaster-error: var(--color-red);
@@ -396,59 +484,64 @@
396
484
  --color-status-warning: var(--color-orange);
397
485
  --color-brand-primary: var(--color-primary-500);
398
486
  --color-brand-neutral: var(--color-neutral-600);
487
+ --color-backgrounds-classic-light: var(--color-surface-page);
399
488
  --color-backgrounds-themed-ibis-white: var(--color-white);
400
489
  --gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
401
490
  --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%);
402
491
  --gradient-button: linear-gradient(227.88deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
403
492
  --border-color-default: var(--color-neutral-200);
493
+ --border-color-subtle: var(--color-neutral-100);
494
+ --border-color-strong: var(--color-neutral-300);
404
495
  --border-color-focus: var(--color-primary-400);
496
+ --border-color-disabled: var(--color-neutral-200);
497
+ --border-color-emphasis: var(--color-primary-950);
405
498
  }
406
499
 
407
500
  /**
408
501
  * Do not edit directly, this file was auto-generated.
409
502
  */
410
503
 
411
- [data-theme="alc-dark"] {
412
- --color-primary-50: #13224c;
413
- --color-primary-100: #13224c;
414
- --color-primary-200: #14234f;
415
- --color-primary-300: #17285c;
416
- --color-primary-400: #90b8ff;
417
- --color-primary-500: #3864e7;
418
- --color-primary-600: #3e6fff;
419
- --color-primary-700: #4774fa;
420
- --color-primary-800: #4774fa;
421
- --color-primary-900: #90b8ff;
422
- --color-primary-950: #d8e2ff;
423
- --color-neutral-50: #0d0d0d;
424
- --color-neutral-100: #0f111a;
425
- --color-neutral-200: #161f39;
426
- --color-neutral-300: #1a132c;
427
- --color-neutral-400: #404454;
428
- --color-neutral-500: #666666;
429
- --color-neutral-600: #8d8d8e;
430
- --color-neutral-700: #8d8d8e;
431
- --color-neutral-800: #c1c1c1;
432
- --color-neutral-900: #e0e2eb;
433
- --color-neutral-950: #fbfcfe;
504
+ [data-brand="alc"][data-color-mode="dark"] {
505
+ --color-primary-50: #eef5ff;
506
+ --color-primary-100: #d6e8ff;
507
+ --color-primary-200: #a8ceff;
508
+ --color-primary-300: #74b1fc;
509
+ --color-primary-400: #4d9ef6;
510
+ --color-primary-500: #2e7de0;
511
+ --color-primary-600: #1a5fba;
512
+ --color-primary-700: #0f3f88;
513
+ --color-primary-800: #092860;
514
+ --color-primary-900: #051638;
515
+ --color-primary-950: #020d22;
516
+ --color-neutral-50: #edf1ff;
517
+ --color-neutral-100: #d8e0f5;
518
+ --color-neutral-200: #b8c4de;
519
+ --color-neutral-300: #8e9dbc;
520
+ --color-neutral-400: #63728f;
521
+ --color-neutral-500: #465068;
522
+ --color-neutral-600: #323c52;
523
+ --color-neutral-700: #232c40;
524
+ --color-neutral-800: #161e30;
525
+ --color-neutral-900: #0d1220;
526
+ --color-neutral-950: #070b14;
434
527
  --color-white: #FFFFFF;
435
528
  --color-black: #000000;
436
- --color-green: #0DA529;
437
- --color-red: #FF5A5A;
438
- --color-orange: #E89A33;
529
+ --color-green: #22C55E;
530
+ --color-red: #F04040;
531
+ --color-orange: #FFAA2E;
532
+ --color-surface-page: #161f39;
439
533
  --color-brand-secondary: #4774FA; /** Secondary button label and border (Figma dark) */
440
- --color-alchemy-neutral-yellow: #3d3020;
441
- --color-alchemy-neutral-blue: #161f39;
442
- --color-alchemy-neutral-green: #1a2e1e;
534
+ --color-alchemy-neutral-yellow: #b8860f;
535
+ --color-alchemy-neutral-blue: #1a5fba;
536
+ --color-alchemy-neutral-green: #2a7a32;
443
537
  --color-alchemy-neutral-purple: #2a2240;
444
538
  --color-gradients-main-start: #244197;
445
539
  --color-gradients-main-end: #090F20;
446
- --color-gradients-brand-start: #3866ED;
447
- --color-gradients-brand-middle: #3E6FFF;
448
- --color-gradients-brand-end: #3557BA;
540
+ --color-gradients-brand-start: #D4A400;
541
+ --color-gradients-brand-middle: #2A7A32;
542
+ --color-gradients-brand-end: #1A2D55;
449
543
  --color-gradients-button-start: #3E6FFF;
450
544
  --color-gradients-button-end: #4774FA;
451
- --color-backgrounds-classic-light: #161f39;
452
545
  --color-backgrounds-classic-dark: #0f111a;
453
546
  --color-backgrounds-cardbg-purple: #522398;
454
547
  --color-backgrounds-cardbg-dark-purple: #0939c4;
@@ -486,8 +579,34 @@
486
579
  --border-radius-2xl: 1.5rem;
487
580
  --border-radius-full: 9999px;
488
581
  --border-color-button: #3E6FFF;
582
+ --color-surface-default: var(--color-neutral-900);
583
+ --color-surface-muted: var(--color-neutral-800);
584
+ --color-surface-subtle: var(--color-primary-900);
585
+ --color-surface-elevated: var(--color-neutral-800);
586
+ --color-surface-inverse: var(--color-neutral-100);
587
+ --color-surface-disabled: var(--color-neutral-800);
489
588
  --color-text-primary: var(--color-white);
589
+ --color-text-secondary: var(--color-neutral-300);
590
+ --color-text-muted: var(--color-neutral-400);
591
+ --color-text-disabled: var(--color-neutral-500);
490
592
  --color-text-inverse: var(--color-black);
593
+ --color-text-on-primary: var(--color-white);
594
+ --color-text-on-muted: var(--color-white);
595
+ --color-interactive-primary-bg-selected: var(--color-primary-800);
596
+ --color-interactive-primary-bg-hover: var(--color-primary-700);
597
+ --color-interactive-primary-fg: var(--color-primary-300);
598
+ --color-interactive-primary-fg-disabled: var(--color-neutral-500);
599
+ --color-interactive-primary-bg-emphasized: var(--color-primary-600);
600
+ --color-interactive-primary-border-selected: var(--color-primary-400);
601
+ --color-interactive-primary-indicator: var(--color-primary-300);
602
+ --color-interactive-primary-bg-disabled: var(--color-neutral-600);
603
+ --color-interactive-primary-fg-on-disabled: var(--color-neutral-400);
604
+ --color-interactive-primary-bg-menu-hover: var(--color-primary-500);
605
+ --color-interactive-primary-bg-menu-selected: var(--color-primary-600);
606
+ --color-interactive-primary-bg-menu-selected-hover: var(--color-primary-700);
607
+ --color-interactive-primary-track-on: var(--color-primary-600);
608
+ --color-interactive-primary-track-off: var(--color-neutral-700);
609
+ --color-interactive-neutral-bg-hover: var(--color-neutral-700);
491
610
  --color-toaster-default: var(--color-neutral-300);
492
611
  --color-toaster-success: var(--color-green);
493
612
  --color-toaster-error: var(--color-red);
@@ -497,10 +616,15 @@
497
616
  --color-status-warning: var(--color-orange);
498
617
  --color-brand-primary: var(--color-primary-500);
499
618
  --color-brand-neutral: var(--color-neutral-600);
619
+ --color-backgrounds-classic-light: var(--color-surface-page);
500
620
  --color-backgrounds-themed-ibis-white: var(--color-white);
501
621
  --gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
502
622
  --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%);
503
623
  --gradient-button: linear-gradient(227.88deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
504
- --border-color-default: var(--color-neutral-400);
624
+ --border-color-default: var(--color-neutral-600);
625
+ --border-color-subtle: var(--color-neutral-700);
626
+ --border-color-strong: var(--color-neutral-500);
505
627
  --border-color-focus: var(--color-primary-600);
628
+ --border-color-disabled: var(--color-neutral-700);
629
+ --border-color-emphasis: var(--color-primary-400);
506
630
  }
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
  },
@@ -214,7 +218,8 @@ module.exports = {
214
218
  default: "var(--shadow-focus-default)",
215
219
  primary: "var(--shadow-focus-primary)",
216
220
  error: "var(--shadow-focus-error)"
217
- }
221
+ },
222
+ nav: "var(--shadow-nav)"
218
223
  },
219
224
  color: {
220
225
  primary: {
@@ -248,9 +253,44 @@ module.exports = {
248
253
  green: "var(--color-green)",
249
254
  red: "var(--color-red)",
250
255
  orange: "var(--color-orange)",
256
+ surface: {
257
+ default: "var(--color-surface-default)",
258
+ muted: "var(--color-surface-muted)",
259
+ subtle: "var(--color-surface-subtle)",
260
+ elevated: "var(--color-surface-elevated)",
261
+ inverse: "var(--color-surface-inverse)",
262
+ disabled: "var(--color-surface-disabled)",
263
+ page: "var(--color-surface-page)"
264
+ },
251
265
  text: {
252
266
  primary: "var(--color-text-primary)",
253
- inverse: "var(--color-text-inverse)"
267
+ secondary: "var(--color-text-secondary)",
268
+ muted: "var(--color-text-muted)",
269
+ disabled: "var(--color-text-disabled)",
270
+ inverse: "var(--color-text-inverse)",
271
+ onPrimary: "var(--color-text-on-primary)",
272
+ onMuted: "var(--color-text-on-muted)"
273
+ },
274
+ interactive: {
275
+ primary: {
276
+ bgSelected: "var(--color-interactive-primary-bg-selected)",
277
+ bgHover: "var(--color-interactive-primary-bg-hover)",
278
+ fg: "var(--color-interactive-primary-fg)",
279
+ fgDisabled: "var(--color-interactive-primary-fg-disabled)",
280
+ bgEmphasized: "var(--color-interactive-primary-bg-emphasized)",
281
+ borderSelected: "var(--color-interactive-primary-border-selected)",
282
+ indicator: "var(--color-interactive-primary-indicator)",
283
+ bgDisabled: "var(--color-interactive-primary-bg-disabled)",
284
+ fgOnDisabled: "var(--color-interactive-primary-fg-on-disabled)",
285
+ bgMenuHover: "var(--color-interactive-primary-bg-menu-hover)",
286
+ bgMenuSelected: "var(--color-interactive-primary-bg-menu-selected)",
287
+ bgMenuSelectedHover: "var(--color-interactive-primary-bg-menu-selected-hover)",
288
+ trackOn: "var(--color-interactive-primary-track-on)",
289
+ trackOff: "var(--color-interactive-primary-track-off)"
290
+ },
291
+ neutral: {
292
+ bgHover: "var(--color-interactive-neutral-bg-hover)"
293
+ }
254
294
  },
255
295
  toaster: {
256
296
  default: "var(--color-toaster-default)",
package/package.json CHANGED
@@ -1,31 +1,34 @@
1
- {
2
- "name": "@ibis-design/css",
3
- "version": "0.8.2",
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": "1.0.0-alpha.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
+ "./bootstrap-overrides.css": "./dist/bootstrap-overrides.css",
10
+ "./tailwind.preset": "./dist/tailwind.preset.js",
11
+ "./preset": "./dist/tailwind.preset.js",
12
+ "./ibis-design.css": "./dist/design-tokens.css",
13
+ "./alchemy-design.css": "./dist/design-tokens.css",
14
+ "./ibis/tailwind.preset": "./dist/tailwind.preset.js",
15
+ "./alchemy/tailwind.preset": "./dist/tailwind.preset.js",
16
+ "./components/*": "./dist/components/*",
17
+ "./tailwind.theme": "./dist/tailwind.theme.js",
18
+ "./theme": "./src/lib/set-theme.ts"
19
+ },
20
+ "files": [
21
+ "dist",
22
+ "src/lib"
23
+ ],
24
+ "scripts": {
25
+ "build": "tsx src/scripts/build.ts && tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-bootstrap-themes.ts && tsx src/scripts/validate-component-tokens.ts",
26
+ "validate": "tsx src/scripts/validate-themes.ts && tsx src/scripts/validate-bootstrap-themes.ts && tsx src/scripts/validate-component-tokens.ts",
27
+ "prepublishOnly": "npm run build"
28
+ },
29
+ "devDependencies": {
30
+ "sd-tailwindcss-transformer": "^2.2.1",
31
+ "style-dictionary": "^5.4.3",
32
+ "tsx": "^4.22.4"
33
+ }
34
+ }
package/src/lib/assemble-bootstrap-overrides.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { BOOTSTRAP_VAR_MAP } from "../config/bootstrap-map.ts";
2
+ import { THEMES } from "./themes.ts";
3
+
4
+ /**
5
+ * Builds Bootstrap 5.3 override CSS that maps `--bs-*` vars to IBIS semantic tokens.
6
+ */
7
+ export const assembleBootstrapOverridesStylesheet = (): string => {
8
+ const blocks = THEMES.map((theme) => {
9
+ const lines = BOOTSTRAP_VAR_MAP.map(
10
+ ({ ibisVar, bootstrapVar }) => ` ${bootstrapVar}: var(${ibisVar});`,
11
+ );
12
+ return `${theme.cssSelector} {\n${lines.join("\n")}\n}`;
13
+ });
14
+
15
+ return `/**
16
+ * Do not edit directly. Generated by @ibis-design/css build.
17
+ * Load after Bootstrap CSS and @ibis-design/css design tokens.
18
+ * IBIS theme selectors set --bs-* vars from semantic --color-* / --font-* tokens.
19
+ */
20
+
21
+ ${blocks.join("\n\n")}
22
+ `;
23
+ };
package/src/lib/assemble-design-tokens.ts ADDED
@@ -0,0 +1,22 @@
1
+ /**
2
+ * @param blocks - Formatted CSS blocks from Style Dictionary (one per global/theme layer).
3
+ * @param description - Optional header description line.
4
+ * @returns Full stylesheet with header comment.
5
+ */
6
+ export const assembleDesignTokensStylesheet = (
7
+ blocks: string[],
8
+ description = "Set data-brand (ib | alc) and data-color-mode (light | dark) on <html>, or use setTheme() from @ibis-design/css/theme. :root holds global tokens; :root + [data-brand=\"ib\"][data-color-mode=\"light\"] is the default theme overlay.",
9
+ ): string => {
10
+ const body = blocks
11
+ .map((block) => block.trim())
12
+ .filter(Boolean)
13
+ .join("\n\n");
14
+
15
+ return `/**
16
+ * Do not edit directly. Generated by @ibis-design/css build.
17
+ * ${description}
18
+ */
19
+
20
+ ${body}
21
+ `;
22
+ };