@ibis-design/css 0.8.2 → 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 +209 -84
  18. package/dist/tailwind.preset.js +1 -1
  19. package/dist/tailwind.theme.js +40 -1
  20. package/package.json +7 -5
  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/components/tipIndicator.css CHANGED
@@ -4,14 +4,14 @@
4
4
  align-items: center;
5
5
  justify-content: center;
6
6
  cursor: pointer;
7
- color: var(--color-neutral-400);
7
+ color: var(--color-text-disabled);
8
8
  transition: color var(--transition-duration-fast) var(--transition-timing-default);
9
9
  outline: none;
10
10
  }
11
11
 
12
12
  .ibis-tip-indicator:hover,
13
13
  .ibis-tip-indicator:focus-visible {
14
- color: var(--color-primary-500);
14
+ color: var(--color-brand-primary);
15
15
  }
16
16
 
17
17
  .ibis-tip-indicator__icon {
@@ -20,12 +20,11 @@
20
20
  display: block;
21
21
  }
22
22
 
23
- /* Tooltip box */
24
23
  .ibis-tip {
25
24
  position: absolute;
26
25
  z-index: 100;
27
- background-color: var(--color-neutral-600);
28
- color: var(--color-white);
26
+ background-color: var(--color-surface-inverse);
27
+ color: var(--color-text-inverse);
29
28
  font-size: var(--font-size-body-sm);
30
29
  font-family: var(--font-family-sans);
31
30
  padding: var(--spacing-2) var(--spacing-4);
@@ -34,7 +33,6 @@
34
33
  white-space: nowrap;
35
34
  }
36
35
 
37
- /* Width variants */
38
36
  .ibis-tip--width-auto {
39
37
  white-space: nowrap;
40
38
  width: auto;
@@ -50,28 +48,24 @@
50
48
  white-space: normal;
51
49
  }
52
50
 
53
- /* Top */
54
51
  .ibis-tip--top {
55
52
  bottom: calc(100% + 8px);
56
53
  left: 50%;
57
54
  transform: translateX(-50%);
58
55
  }
59
56
 
60
- /* Bottom */
61
57
  .ibis-tip--bottom {
62
58
  top: calc(100% + 8px);
63
59
  left: 50%;
64
60
  transform: translateX(-50%);
65
61
  }
66
62
 
67
- /* Left */
68
63
  .ibis-tip--left {
69
64
  right: calc(100% + 8px);
70
65
  top: 50%;
71
66
  transform: translateY(-50%);
72
67
  }
73
68
 
74
- /* Right */
75
69
  .ibis-tip--right {
76
70
  left: calc(100% + 8px);
77
71
  top: 50%;
package/dist/components/toaster.css CHANGED
@@ -5,23 +5,22 @@
5
5
  gap: var(--spacing-2);
6
6
  padding: var(--spacing-2) var(--spacing-4);
7
7
  border-radius: 16px;
8
- border: var(--border-width-default) solid var(--color-neutral-200);
9
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* TODO: replace with token */
8
+ border: var(--border-width-default) solid var(--border-color-default);
9
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
10
10
  max-width: 200px;
11
11
  position: relative;
12
12
  margin-bottom: var(--spacing-1);
13
13
  }
14
14
 
15
- /* Icon */
16
15
  .ibis-toaster__icon {
17
16
  display: flex;
18
17
  align-items: center;
19
18
  justify-content: center;
20
- width: 20px; /* TODO: replace with token */
21
- height: 20px; /* TODO: replace with token */
19
+ width: 20px;
20
+ height: 20px;
22
21
  flex-shrink: 0;
23
22
  margin-top: var(--spacing-1);
24
- color: var(--color-white);
23
+ color: var(--color-text-on-primary);
25
24
  }
26
25
 
27
26
  .ibis-toaster__icon :global(svg) {
@@ -29,7 +28,6 @@
29
28
  height: 100%;
30
29
  }
31
30
 
32
- /* Content */
33
31
  .ibis-toaster__content {
34
32
  flex: 1;
35
33
  display: flex;
@@ -44,28 +42,26 @@
44
42
 
45
43
  .ibis-toaster__message {
46
44
  font-size: var(--font-size-body-sm);
47
- color: var(--color-white);
45
+ color: var(--color-text-on-primary);
48
46
  }
49
47
 
50
- /* Close Button */
51
48
  .ibis-toaster__close {
52
49
  background: transparent;
53
50
  border: none;
54
51
  cursor: pointer;
55
52
  font-size: var(--font-size-body-lg);
56
53
  line-height: 1;
57
- color: var(--color-white);
54
+ color: var(--color-text-on-primary);
58
55
  flex-shrink: 0;
59
56
  }
60
57
 
61
- /* Variants */
62
58
  .ibis-toaster--success {
63
59
  border-color: var(--color-status-success);
64
60
  background-color: var(--color-status-success);
65
61
  }
66
62
 
67
63
  .ibis-toaster--success .ibis-toaster__title {
68
- color: var(--color-white);
64
+ color: var(--color-text-on-primary);
69
65
  }
70
66
 
71
67
  .ibis-toaster--error {
@@ -74,51 +70,49 @@
74
70
  }
75
71
 
76
72
  .ibis-toaster--error .ibis-toaster__title {
77
- color: var(--color-white);
73
+ color: var(--color-text-on-primary);
78
74
  }
79
75
 
80
76
  .ibis-toaster--accent {
81
- border-color: var(--color-toaster-accent); /* TODO: replace with token */
82
- background-color: var(--color-toaster-accent); /* TODO: replace with token */
77
+ border-color: var(--color-toaster-accent);
78
+ background-color: var(--color-toaster-accent);
83
79
  }
84
80
 
85
81
  .ibis-toaster--accent .ibis-toaster__title {
86
- color: var(--color-white);
82
+ color: var(--color-text-on-primary);
87
83
  }
88
84
 
89
85
  .ibis-toaster--default {
90
- border-color: var(--color-neutral-100);
91
- background-color: var(--color-neutral-100);
86
+ border-color: var(--color-surface-muted);
87
+ background-color: var(--color-surface-muted);
92
88
  }
93
89
 
94
90
  .ibis-toaster--default .ibis-toaster__title {
95
- color: var(--color-black);
91
+ color: var(--color-text-on-muted);
96
92
  }
97
93
 
98
94
  .ibis-toaster--default .ibis-toaster__message {
99
- color: var(--color-black);
95
+ color: var(--color-text-on-muted);
100
96
  }
101
97
 
102
98
  .ibis-toaster--default .ibis-toaster__icon {
103
- color: var(--color-black);
99
+ color: var(--color-text-on-muted);
104
100
  }
105
101
 
106
102
  .ibis-toaster--default .ibis-toaster__close {
107
- color: var(--color-black);
108
- border-color: var(--color-white);
103
+ color: var(--color-text-on-muted);
104
+ border-color: var(--color-surface-default);
109
105
  }
110
106
 
111
- /* Loader */
112
107
  .ibis-toaster__loader {
113
108
  width: 1em;
114
109
  height: 1em;
115
- border: var(--border-width-default) solid var(--color-primary-300);
116
- border-top-color: var(--color-primary-900);
110
+ border: var(--border-width-default) solid var(--border-color-focus);
111
+ border-top-color: var(--color-interactive-primary-indicator);
117
112
  border-radius: 50%;
118
113
  animation: ibis-toaster-spin 0.8s linear infinite;
119
114
  }
120
115
 
121
- /* Animations */
122
116
  @keyframes ibis-toaster-spin {
123
117
  from {
124
118
  transform: rotate(0deg);
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,45 +237,51 @@
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: #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;
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: #0DA529;
250
- --color-red: #E85A52;
251
- --color-orange: #FB9A33;
281
+ --color-green: #22C55E;
282
+ --color-red: #F04040;
283
+ --color-orange: #FFAA2E;
284
+ --color-surface-page: #1a1528;
252
285
  --color-toaster-accent: #FF54D4;
253
286
  --color-gradients-main-start: #251440;
254
287
  --color-gradients-main-end: #630050;
@@ -261,7 +294,6 @@
261
294
  --color-gradients-skeleton-end: rgba(255, 255, 255, 0.08);
262
295
  --color-gradients-button-start: #8E56E0;
263
296
  --color-gradients-button-end: #713BC1;
264
- --color-backgrounds-classic-light: #1a1528;
265
297
  --color-backgrounds-classic-dark: #0f111a;
266
298
  --font-family-branding: 'Beyond Infinity', cursive; /** Logo and brand display */
267
299
  --font-family-heading: Metrisch, Poppins, system-ui, sans-serif; /** Headings and display text */
@@ -285,8 +317,34 @@
285
317
  --border-radius-2xl: 1.5rem;
286
318
  --border-radius-full: 9999px;
287
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);
288
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);
289
330
  --color-text-inverse: var(--color-black);
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);
290
348
  --color-toaster-default: var(--color-neutral-300);
291
349
  --color-toaster-success: var(--color-green);
292
350
  --color-toaster-error: var(--color-red);
@@ -296,29 +354,34 @@
296
354
  --color-brand-primary: var(--color-primary-500);
297
355
  --color-brand-secondary: var(--color-primary-700);
298
356
  --color-brand-neutral: var(--color-neutral-500);
357
+ --color-backgrounds-classic-light: var(--color-surface-page);
299
358
  --gradient-brand-primary: linear-gradient(180deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
300
359
  --gradient-skeleton: linear-gradient(90deg, var(--color-gradients-skeleton-start) 0%, var(--color-gradients-skeleton-middle) 50%, var(--color-gradients-skeleton-end) 100%);
301
360
  --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);
361
+ --border-color-default: var(--color-neutral-600);
362
+ --border-color-subtle: var(--color-neutral-700);
363
+ --border-color-strong: var(--color-neutral-500);
303
364
  --border-color-focus: var(--color-primary-400);
365
+ --border-color-disabled: var(--color-neutral-700);
366
+ --border-color-emphasis: var(--color-primary-400);
304
367
  }
305
368
 
306
369
  /**
307
370
  * Do not edit directly, this file was auto-generated.
308
371
  */
309
372
 
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;
373
+ [data-brand="alc"][data-color-mode="light"] {
374
+ --color-primary-50: #eff6ff;
375
+ --color-primary-100: #daebff;
376
+ --color-primary-200: #bdddff;
377
+ --color-primary-300: #90c8ff;
378
+ --color-primary-400: #5ca9fe;
379
+ --color-primary-500: #3686fb;
380
+ --color-primary-600: #3686fb;
381
+ --color-primary-700: #1851dd;
382
+ --color-primary-800: #1a42b3;
383
+ --color-primary-900: #1b3c8d;
384
+ --color-primary-950: #152554;
322
385
  --color-neutral-50: #fafafa;
323
386
  --color-neutral-100: #fbfcfe;
324
387
  --color-neutral-200: #e0e2eb;
@@ -335,6 +398,7 @@
335
398
  --color-green: #0DA529;
336
399
  --color-red: #FF0420;
337
400
  --color-orange: #A85F00;
401
+ --color-surface-page: #fafafa;
338
402
  --color-brand-secondary: #17285C; /** Secondary button label and border (Figma) */
339
403
  --color-alchemy-neutral-yellow: #ffe6c7;
340
404
  --color-alchemy-neutral-blue: #d8e2ff;
@@ -342,12 +406,11 @@
342
406
  --color-alchemy-neutral-purple: #eae6f4;
343
407
  --color-gradients-main-start: #244197;
344
408
  --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;
409
+ --color-gradients-brand-start: #FECA1F;
410
+ --color-gradients-brand-middle: #3DA042;
411
+ --color-gradients-brand-end: #2F4688;
412
+ --color-gradients-button-start: #244197;
413
+ --color-gradients-button-end: #090F20;
351
414
  --color-backgrounds-classic-dark: #0d0d0d;
352
415
  --color-backgrounds-cardbg-purple: #9747ff;
353
416
  --color-backgrounds-cardbg-dark-purple: #522398;
@@ -385,8 +448,34 @@
385
448
  --border-radius-2xl: 1.5rem;
386
449
  --border-radius-full: 9999px;
387
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);
388
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);
389
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);
390
479
  --color-toaster-default: var(--color-neutral-200);
391
480
  --color-toaster-success: var(--color-green);
392
481
  --color-toaster-error: var(--color-red);
@@ -396,59 +485,64 @@
396
485
  --color-status-warning: var(--color-orange);
397
486
  --color-brand-primary: var(--color-primary-500);
398
487
  --color-brand-neutral: var(--color-neutral-600);
488
+ --color-backgrounds-classic-light: var(--color-surface-page);
399
489
  --color-backgrounds-themed-ibis-white: var(--color-white);
400
490
  --gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
401
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%);
402
492
  --gradient-button: linear-gradient(227.88deg, var(--color-gradients-button-start) 0%, var(--color-gradients-button-end) 100%);
403
493
  --border-color-default: var(--color-neutral-200);
494
+ --border-color-subtle: var(--color-neutral-100);
495
+ --border-color-strong: var(--color-neutral-300);
404
496
  --border-color-focus: var(--color-primary-400);
497
+ --border-color-disabled: var(--color-neutral-200);
498
+ --border-color-emphasis: var(--color-primary-950);
405
499
  }
406
500
 
407
501
  /**
408
502
  * Do not edit directly, this file was auto-generated.
409
503
  */
410
504
 
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;
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;
434
528
  --color-white: #FFFFFF;
435
529
  --color-black: #000000;
436
- --color-green: #0DA529;
437
- --color-red: #FF5A5A;
438
- --color-orange: #E89A33;
530
+ --color-green: #22C55E;
531
+ --color-red: #F04040;
532
+ --color-orange: #FFAA2E;
533
+ --color-surface-page: #161f39;
439
534
  --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;
535
+ --color-alchemy-neutral-yellow: #b8860f;
536
+ --color-alchemy-neutral-blue: #1a5fba;
537
+ --color-alchemy-neutral-green: #2a7a32;
443
538
  --color-alchemy-neutral-purple: #2a2240;
444
539
  --color-gradients-main-start: #244197;
445
540
  --color-gradients-main-end: #090F20;
446
- --color-gradients-brand-start: #3866ED;
447
- --color-gradients-brand-middle: #3E6FFF;
448
- --color-gradients-brand-end: #3557BA;
541
+ --color-gradients-brand-start: #D4A400;
542
+ --color-gradients-brand-middle: #2A7A32;
543
+ --color-gradients-brand-end: #1A2D55;
449
544
  --color-gradients-button-start: #3E6FFF;
450
545
  --color-gradients-button-end: #4774FA;
451
- --color-backgrounds-classic-light: #161f39;
452
546
  --color-backgrounds-classic-dark: #0f111a;
453
547
  --color-backgrounds-cardbg-purple: #522398;
454
548
  --color-backgrounds-cardbg-dark-purple: #0939c4;
@@ -486,8 +580,34 @@
486
580
  --border-radius-2xl: 1.5rem;
487
581
  --border-radius-full: 9999px;
488
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);
489
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);
490
593
  --color-text-inverse: var(--color-black);
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);
491
611
  --color-toaster-default: var(--color-neutral-300);
492
612
  --color-toaster-success: var(--color-green);
493
613
  --color-toaster-error: var(--color-red);
@@ -497,10 +617,15 @@
497
617
  --color-status-warning: var(--color-orange);
498
618
  --color-brand-primary: var(--color-primary-500);
499
619
  --color-brand-neutral: var(--color-neutral-600);
620
+ --color-backgrounds-classic-light: var(--color-surface-page);
500
621
  --color-backgrounds-themed-ibis-white: var(--color-white);
501
622
  --gradient-brand-primary: linear-gradient(227.88deg, var(--color-gradients-main-start) 0%, var(--color-gradients-main-end) 100%);
502
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%);
503
624
  --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);
625
+ --border-color-default: var(--color-neutral-600);
626
+ --border-color-subtle: var(--color-neutral-700);
627
+ --border-color-strong: var(--color-neutral-500);
505
628
  --border-color-focus: var(--color-primary-600);
629
+ --border-color-disabled: var(--color-neutral-700);
630
+ --border-color-emphasis: var(--color-primary-400);
506
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
  };