@medusajs/ui-preset 1.0.0 → 1.0.2

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 (13) hide show
  1. package/.turbo/turbo-build.log +5 -5
  2. package/CHANGELOG.md +72 -0
  3. package/LICENSE +21 -0
  4. package/README.md +36 -1
  5. package/dist/index.js +366 -236
  6. package/dist/index.mjs +366 -236
  7. package/package.json +6 -1
  8. package/src/plugin.ts +17 -2
  9. package/src/theme/extension/theme.ts +86 -55
  10. package/src/theme/tokens/colors.ts +104 -90
  11. package/src/theme/tokens/components.ts +74 -38
  12. package/src/theme/tokens/effects.ts +34 -36
  13. package/src/theme/tokens/typography.ts +49 -13
package/dist/index.js CHANGED
@@ -35,6 +35,44 @@ var theme = {
35
35
  "extend": {
36
36
  "colors": {
37
37
  "ui": {
38
+ "button": {
39
+ "inverted": {
40
+ "DEFAULT": "var(--button-inverted)",
41
+ "pressed": {
42
+ "DEFAULT": "var(--button-inverted-pressed)"
43
+ },
44
+ "hover": {
45
+ "DEFAULT": "var(--button-inverted-hover)"
46
+ }
47
+ },
48
+ "transparent": {
49
+ "DEFAULT": "var(--button-transparent)",
50
+ "hover": {
51
+ "DEFAULT": "var(--button-transparent-hover)"
52
+ },
53
+ "pressed": {
54
+ "DEFAULT": "var(--button-transparent-pressed)"
55
+ }
56
+ },
57
+ "neutral": {
58
+ "pressed": {
59
+ "DEFAULT": "var(--button-neutral-pressed)"
60
+ },
61
+ "DEFAULT": "var(--button-neutral)",
62
+ "hover": {
63
+ "DEFAULT": "var(--button-neutral-hover)"
64
+ }
65
+ },
66
+ "danger": {
67
+ "DEFAULT": "var(--button-danger)",
68
+ "pressed": {
69
+ "DEFAULT": "var(--button-danger-pressed)"
70
+ },
71
+ "hover": {
72
+ "DEFAULT": "var(--button-danger-hover)"
73
+ }
74
+ }
75
+ },
38
76
  "code": {
39
77
  "text": {
40
78
  "base": {
@@ -214,6 +252,17 @@ var theme = {
214
252
  "component": {
215
253
  "DEFAULT": "var(--bg-component)"
216
254
  },
255
+ "overlay": {
256
+ "DEFAULT": "var(--bg-overlay)"
257
+ },
258
+ "switch": {
259
+ "off": {
260
+ "DEFAULT": "var(--bg-switch-off)",
261
+ "hover": {
262
+ "DEFAULT": "var(--bg-switch-off-hover)"
263
+ }
264
+ }
265
+ },
217
266
  "field": {
218
267
  "hover": {
219
268
  "DEFAULT": "var(--bg-field-hover)"
@@ -223,19 +272,8 @@ var theme = {
223
272
  "interactive": {
224
273
  "DEFAULT": "var(--bg-interactive)"
225
274
  },
226
- "overlay": {
227
- "DEFAULT": "var(--bg-overlay)"
228
- },
229
275
  "disabled": {
230
276
  "DEFAULT": "var(--bg-disabled)"
231
- },
232
- "switch": {
233
- "off": {
234
- "hover": {
235
- "DEFAULT": "var(--bg-switch-off-hover)"
236
- },
237
- "DEFAULT": "var(--bg-switch-off)"
238
- }
239
277
  }
240
278
  },
241
279
  "fg": {
@@ -269,69 +307,62 @@ var theme = {
269
307
  "DEFAULT": "var(--fg-muted)"
270
308
  }
271
309
  },
272
- "button": {
273
- "danger": {
274
- "pressed": {
275
- "DEFAULT": "var(--button-danger-pressed)"
310
+ "contrast": {
311
+ "bg": {
312
+ "subtle": {
313
+ "DEFAULT": "var(--contrast-bg-subtle)"
276
314
  },
277
- "DEFAULT": "var(--button-danger)",
278
- "hover": {
279
- "DEFAULT": "var(--button-danger-hover)"
280
- }
281
- },
282
- "transparent": {
283
- "DEFAULT": "var(--button-transparent)",
284
- "hover": {
285
- "DEFAULT": "var(--button-transparent-hover)"
315
+ "base": {
316
+ "DEFAULT": "var(--contrast-bg-base)",
317
+ "pressed": {
318
+ "DEFAULT": "var(--contrast-bg-base-pressed)"
319
+ },
320
+ "hover": {
321
+ "DEFAULT": "var(--contrast-bg-base-hover)"
322
+ }
286
323
  },
287
- "pressed": {
288
- "DEFAULT": "var(--button-transparent-pressed)"
324
+ "highlight": {
325
+ "DEFAULT": "var(--contrast-bg-highlight)"
289
326
  }
290
327
  },
291
- "inverted": {
292
- "DEFAULT": "var(--button-inverted)",
293
- "pressed": {
294
- "DEFAULT": "var(--button-inverted-pressed)"
295
- },
296
- "hover": {
297
- "DEFAULT": "var(--button-inverted-hover)"
328
+ "border": {
329
+ "base": {
330
+ "DEFAULT": "var(--contrast-border-base)"
298
331
  }
299
332
  },
300
- "neutral": {
301
- "pressed": {
302
- "DEFAULT": "var(--button-neutral-pressed)"
333
+ "fg": {
334
+ "primary": {
335
+ "DEFAULT": "var(--contrast-fg-primary)"
303
336
  },
304
- "DEFAULT": "var(--button-neutral)",
305
- "hover": {
306
- "DEFAULT": "var(--button-neutral-hover)"
337
+ "secondary": {
338
+ "DEFAULT": "var(--contrast-fg-secondary)"
307
339
  }
308
340
  }
309
341
  }
310
342
  }
311
343
  },
312
344
  "boxShadow": {
313
- "borders-focus": "var(--borders-focus)",
314
- "borders-interactive": "var(--borders-interactive)",
315
- "borders-active": "var(--borders-active)",
345
+ "elevation-card-hover": "var(--elevation-card-hover)",
346
+ "elevation-modal": "var(--elevation-modal)",
347
+ "buttons-inverted": "var(--buttons-inverted)",
348
+ "elevation-card-rest": "var(--elevation-card-rest)",
349
+ "buttons-neutral-focus": "var(--buttons-neutral-focus)",
350
+ "borders-interactive-with-active": "var(--borders-interactive-with-active)",
351
+ "buttons-danger-focus": "var(--buttons-danger-focus)",
352
+ "borders-base": "var(--borders-base)",
353
+ "buttons-danger": "var(--buttons-danger)",
316
354
  "details-contrast-on-bg-interactive": "var(--details-contrast-on-bg-interactive)",
317
- "borders-error": "var(--borders-error)",
318
355
  "details-switch-handle": "var(--details-switch-handle)",
356
+ "buttons-neutral": "var(--buttons-neutral)",
319
357
  "borders-interactive-with-focus": "var(--borders-interactive-with-focus)",
320
- "elevation-flyout": "var(--elevation-flyout)",
321
358
  "details-switch-background-focus": "var(--details-switch-background-focus)",
322
- "borders-base": "var(--borders-base)",
359
+ "borders-error": "var(--borders-error)",
360
+ "buttons-inverted-focus": "var(--buttons-inverted-focus)",
361
+ "borders-focus": "var(--borders-focus)",
362
+ "details-switch-background": "var(--details-switch-background)",
323
363
  "elevation-tooltip": "var(--elevation-tooltip)",
324
364
  "borders-interactive-with-shadow": "var(--borders-interactive-with-shadow)",
325
- "elevation-card-hover": "var(--elevation-card-hover)",
326
- "elevation-modal": "var(--elevation-modal)",
327
- "elevation-card-rest": "var(--elevation-card-rest)",
328
- "buttons-neutral": "var(--buttons-neutral)",
329
- "buttons-colored-focus": "var(--buttons-colored-focus)",
330
- "buttons-colored": "var(--buttons-colored)",
331
- "buttons-neutral-focus": "var(--buttons-neutral-focus)",
332
- "borders-base-with-shadow": "var(--borders-base-with-shadow)",
333
- "borders-strong-with-shadow": "var(--borders-strong-with-shadow)",
334
- "details-switch-background": "var(--details-switch-background)"
365
+ "elevation-flyout": "var(--elevation-flyout)"
335
366
  }
336
367
  }
337
368
  };
@@ -339,6 +370,36 @@ var theme = {
339
370
  // src/theme/tokens/colors.ts
340
371
  var colors = {
341
372
  "dark": {
373
+ "--code-text-subtle": "rgba(105, 110, 119, 1)",
374
+ "--button-transparent-pressed": "rgba(46, 48, 53, 1)",
375
+ "--border-base": "rgba(46, 48, 53, 1)",
376
+ "--code-text-base": "rgba(237, 238, 240, 1)",
377
+ "--tag-neutral-icon": "rgba(125, 130, 138, 1)",
378
+ "--bg-switch-off-hover": "rgba(70, 75, 80, 1)",
379
+ "--fg-on-color": "rgba(255, 255, 255, 1)",
380
+ "--button-neutral-hover": "rgba(53, 55, 60, 1)",
381
+ "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
382
+ "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
383
+ "--bg-switch-off": "rgba(53, 55, 60, 1)",
384
+ "--border-strong": "rgba(53, 55, 60, 1)",
385
+ "--fg-subtle": "rgba(173, 177, 184, 1)",
386
+ "--fg-base": "rgba(237, 238, 240, 1)",
387
+ "--bg-base-hover": "rgba(39, 40, 45, 1)",
388
+ "--bg-subtle-hover": "rgba(27, 27, 31, 1)",
389
+ "--fg-disabled": "rgba(60, 63, 68, 1)",
390
+ "--bg-subtle": "rgba(24, 24, 26, 1)",
391
+ "--tag-neutral-border": "rgba(60, 63, 68, 1)",
392
+ "--bg-subtle-pressed": "rgba(39, 40, 45, 1)",
393
+ "--tag-neutral-text": "rgba(173, 177, 184, 1)",
394
+ "--fg-muted": "rgba(105, 110, 119, 1)",
395
+ "--button-danger-pressed": "rgba(225, 29, 72, 1)",
396
+ "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
397
+ "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
398
+ "--code-bg-header": "rgba(24, 24, 26, 1)",
399
+ "--border-loud": "rgba(237, 238, 240, 1)",
400
+ "--bg-base-pressed": "rgba(46, 48, 53, 1)",
401
+ "--bg-disabled": "rgba(39, 40, 45, 1)",
402
+ "--code-icon": "rgba(70, 75, 80, 1)",
342
403
  "--bg-highlight-hover": "rgba(30, 58, 138, 1)",
343
404
  "--border-danger": "rgba(190, 18, 60, 1)",
344
405
  "--border-interactive": "rgba(96, 165, 250, 1)",
@@ -350,95 +411,76 @@ var colors = {
350
411
  "--button-danger": "rgba(159, 18, 57, 1)",
351
412
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
352
413
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
353
- "--bg-overlay": "rgba(10, 10, 10, 0.7)",
354
414
  "--fg-interactive": "rgba(96, 165, 250, 1)",
355
- "--fg-on-inverted": "rgba(10, 10, 10, 1)",
356
- "--button-danger-pressed": "rgba(159, 18, 57, 1)",
357
- "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
358
- "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
359
- "--button-neutral-pressed": "rgba(38, 38, 38, 1)",
360
- "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 0)",
361
- "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 1)",
415
+ "--bg-overlay": "rgba(24, 24, 26, 0.7)",
416
+ "--fg-on-inverted": "rgba(24, 24, 26, 1)",
417
+ "--button-neutral-pressed": "rgba(60, 63, 68, 1)",
418
+ "--button-neutral-pressed-gradient-from": "rgba(255, 255, 255, 1)",
419
+ "--button-neutral-pressed-gradient-to": "rgba(255, 255, 255, 0)",
362
420
  "--tag-red-border": "rgba(136, 19, 55, 1)",
363
421
  "--tag-red-bg": "rgba(76, 5, 25, 1)",
364
- "--button-transparent-hover": "rgba(38, 38, 38, 1)",
422
+ "--button-transparent-hover": "rgba(39, 40, 45, 1)",
365
423
  "--tag-blue-text": "rgba(96, 165, 250, 1)",
366
- "--button-inverted": "rgba(238, 238, 238, 1)",
367
- "--button-inverted-gradient-from": "rgba(0, 0, 0, 0)",
368
- "--button-inverted-gradient-to": "rgba(0, 0, 0, 1)",
369
424
  "--tag-orange-text": "rgba(251, 191, 36, 1)",
370
425
  "--tag-green-text": "rgba(52, 211, 153, 1)",
371
- "--button-transparent": "rgba(0, 0, 0, 0)",
372
- "--button-transparent-pressed": "rgba(48, 48, 48, 1)",
373
- "--tag-neutral-bg": "rgba(48, 48, 48, 1)",
374
- "--code-text-subtle": "rgba(110, 110, 110, 1)",
375
- "--code-bg-base": "rgba(30, 30, 30, 1)",
426
+ "--tag-neutral-bg": "rgba(46, 48, 53, 1)",
376
427
  "--tag-orange-border": "rgba(120, 53, 15, 1)",
377
- "--border-base": "rgba(48, 48, 48, 1)",
378
- "--bg-component": "rgba(38, 38, 38, 1)",
379
- "--code-text-base": "rgba(238, 238, 238, 1)",
380
428
  "--tag-green-border": "rgba(6, 78, 59, 1)",
381
- "--bg-base": "rgba(23, 23, 23, 1)",
382
- "--fg-on-color": "rgba(238, 238, 238, 1)",
429
+ "--bg-base": "rgba(27, 27, 31, 1)",
383
430
  "--tag-red-text": "rgba(251, 113, 133, 1)",
384
431
  "--tag-green-bg-hover": "rgba(6, 78, 59, 1)",
385
432
  "--tag-purple-bg-hover": "rgba(76, 29, 149, 1)",
386
433
  "--tag-red-bg-hover": "rgba(136, 19, 55, 1)",
387
- "--border-strong": "rgba(55, 55, 55, 1)",
388
- "--fg-subtle": "rgba(163, 163, 163, 1)",
389
- "--fg-base": "rgba(238, 238, 238, 1)",
390
- "--code-border": "rgba(48, 48, 48, 1)",
391
- "--border-transparent": "rgba(238, 238, 238, 0)",
434
+ "--border-transparent": "rgba(255, 255, 255, 0)",
435
+ "--code-border": "rgba(46, 48, 53, 1)",
392
436
  "--tag-orange-icon": "rgba(245, 158, 11, 1)",
393
437
  "--tag-purple-bg": "rgba(46, 16, 100, 1)",
394
- "--bg-base-hover": "rgba(38, 38, 38, 1)",
395
- "--bg-subtle-hover": "rgba(23, 23, 23, 1)",
396
438
  "--tag-blue-bg": "rgba(23, 37, 84, 1)",
397
- "--fg-disabled": "rgba(63, 63, 63, 1)",
398
- "--bg-subtle": "rgba(10, 10, 10, 1)",
399
439
  "--tag-green-bg": "rgba(2, 44, 34, 1)",
400
- "--bg-subtle-pressed": "rgba(38, 38, 38, 1)",
401
440
  "--tag-blue-border": "rgba(30, 58, 138, 1)",
402
- "--fg-muted": "rgba(110, 110, 110, 1)",
403
441
  "--tag-purple-border": "rgba(76, 29, 149, 1)",
404
442
  "--tag-blue-bg-hover": "rgba(30, 42, 138, 1)",
405
- "--code-bg-header": "rgba(23, 23, 23, 1)",
406
- "--border-loud": "rgba(238, 238, 238, 1)",
407
- "--bg-base-pressed": "rgba(48, 48, 48, 1)",
408
443
  "--tag-orange-bg": "rgba(69, 26, 3, 1)",
409
- "--bg-disabled": "rgba(38, 38, 38, 1)",
410
444
  "--tag-orange-bg-hover": "rgba(120, 53, 15, 1)",
411
- "--code-icon": "rgba(74, 74, 74, 1)",
412
- "--bg-field-hover": "rgba(48, 48, 48, 1)",
413
- "--bg-field": "rgba(38, 38, 38, 1)",
414
- "--button-neutral": "rgba(38, 38, 38, 1)",
445
+ "--code-bg-base": "rgba(27, 27, 31, 1)",
446
+ "--button-transparent": "rgba(255, 255, 255, 0)",
447
+ "--button-neutral": "rgba(39, 40, 45, 1)",
415
448
  "--button-neutral-gradient-from": "rgba(255, 255, 255, 1)",
416
449
  "--button-neutral-gradient-to": "rgba(255, 255, 255, 0)",
417
- "--button-inverted-pressed": "rgba(238, 238, 238, 1)",
418
- "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 1)",
419
- "--button-inverted-pressed-gradient-to": "rgba(0, 0, 0, 0)",
420
- "--button-neutral-hover": "rgba(38, 38, 38, 1)",
421
- "--button-neutral-hover-gradient-from": "rgba(255, 255, 255, 1)",
422
- "--button-neutral-hover-gradient-to": "rgba(255, 255, 255, 0)",
423
- "--button-inverted-hover": "rgba(238, 238, 238, 1)",
424
- "--button-inverted-hover-gradient-from": "rgba(0, 0, 0, 0)",
425
- "--button-inverted-hover-gradient-to": "rgba(0, 0, 0, 1)",
426
- "--button-danger-hover": "rgba(159, 18, 57, 1)",
450
+ "--button-inverted-pressed": "rgba(237, 238, 240, 1)",
451
+ "--button-inverted-pressed-gradient-from": "rgba(0, 0, 0, 0)",
452
+ "--button-inverted-pressed-gradient-to": "rgba(24, 24, 26, 1)",
453
+ "--button-inverted-hover": "rgba(255, 255, 255, 1)",
454
+ "--button-inverted-hover-gradient-from": "rgba(24, 24, 26, 0)",
455
+ "--button-inverted-hover-gradient-to": "rgba(24, 24, 26, 1)",
456
+ "--button-danger-hover": "rgba(190, 18, 60, 1)",
427
457
  "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
428
458
  "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
429
- "--bg-switch-off-hover": "rgba(74, 74, 74, 1)",
430
- "--bg-switch-off": "rgba(55, 55, 55, 1)",
431
- "--tag-neutral-bg-hover": "rgba(63, 63, 63, 1)",
432
- "--tag-neutral-border": "rgba(63, 63, 63, 1)",
459
+ "--tag-neutral-bg-hover": "rgba(53, 55, 60, 1)",
433
460
  "--tag-blue-icon": "rgba(59, 130, 246, 1)",
434
461
  "--tag-red-icon": "rgba(244, 63, 94, 1)",
435
- "--tag-neutral-icon": "rgba(129, 129, 129, 1)",
436
462
  "--tag-purple-icon": "rgba(139, 92, 246, 1)",
437
463
  "--tag-purple-text": "rgba(167, 139, 250, 1)",
438
- "--tag-neutral-text": "rgba(163, 163, 163, 1)",
439
- "--tag-green-icon": "rgba(16, 185, 129, 1)"
464
+ "--tag-green-icon": "rgba(16, 185, 129, 1)",
465
+ "--button-inverted": "rgba(237, 238, 240, 1)",
466
+ "--button-inverted-gradient-from": "rgba(24, 24, 26, 0)",
467
+ "--button-inverted-gradient-to": "rgba(24, 24, 26, 1)",
468
+ "--bg-component": "rgba(39, 40, 45, 1)",
469
+ "--bg-field": "rgba(39, 40, 45, 1)",
470
+ "--bg-field-hover": "rgba(46, 48, 53, 1)",
471
+ "--contrast-fg-primary": "rgba(28, 32, 36, 1)",
472
+ "--contrast-bg-base": "rgba(228, 228, 233, 1)",
473
+ "--contrast-fg-secondary": "rgba(96, 100, 108, 1)",
474
+ "--contrast-border-base": "rgba(185, 187, 198, 1)",
475
+ "--contrast-bg-base-pressed": "rgba(242, 242, 245, 1)",
476
+ "--contrast-bg-subtle": "rgba(211, 212, 219, 1)",
477
+ "--contrast-bg-base-hover": "rgba(235, 235, 239, 1)",
478
+ "--contrast-bg-highlight": "rgba(242, 242, 245, 1)"
440
479
  },
441
480
  "light": {
481
+ "--button-inverted": "rgba(3, 7, 18, 1)",
482
+ "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
483
+ "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
442
484
  "--code-text-base": "rgba(249, 250, 251, 1)",
443
485
  "--tag-green-bg": "rgba(209, 250, 229, 1)",
444
486
  "--border-strong": "rgba(209, 213, 219, 1)",
@@ -459,24 +501,16 @@ var colors = {
459
501
  "--tag-purple-text": "rgba(109, 40, 217, 1)",
460
502
  "--tag-blue-bg": "rgba(219, 234, 254, 1)",
461
503
  "--tag-blue-icon": "rgba(37, 99, 235, 1)",
462
- "--bg-component": "rgba(241, 243, 245, 1)",
463
504
  "--border-error": "rgba(225, 29, 72, 1)",
464
- "--bg-field-hover": "rgba(243, 244, 246, 1)",
465
- "--bg-field": "rgba(249, 250, 251, 1)",
466
505
  "--border-loud": "rgba(3, 7, 18, 1)",
467
506
  "--fg-on-inverted": "rgba(255, 255, 255, 1)",
468
507
  "--fg-on-color": "rgba(255, 255, 255, 1)",
469
- "--button-danger-pressed": "rgba(225, 29, 72, 1)",
470
- "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 0)",
471
- "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 1)",
472
508
  "--button-transparent": "rgba(255, 255, 255, 0)",
473
- "--bg-interactive": "rgba(59, 130, 246, 1)",
474
509
  "--fg-interactive-hover": "rgba(37, 99, 235, 1)",
475
510
  "--fg-interactive": "rgba(59, 130, 246, 1)",
476
511
  "--fg-error": "rgba(225, 29, 72, 1)",
477
512
  "--border-danger": "rgba(190, 18, 60, 1)",
478
513
  "--border-transparent": "rgba(3, 7, 18, 0)",
479
- "--bg-overlay": "rgba(3, 7, 18, 0.4)",
480
514
  "--fg-base": "rgba(3, 7, 18, 1)",
481
515
  "--fg-disabled": "rgba(209, 213, 219, 1)",
482
516
  "--bg-subtle-pressed": "rgba(229, 231, 235, 1)",
@@ -502,139 +536,184 @@ var colors = {
502
536
  "--tag-red-border": "rgba(254, 205, 211, 1)",
503
537
  "--tag-green-border": "rgba(167, 243, 208, 1)",
504
538
  "--tag-green-text": "rgba(4, 120, 87, 1)",
505
- "--bg-disabled": "rgba(243, 244, 246, 1)",
506
539
  "--button-transparent-hover": "rgba(249, 250, 251, 1)",
507
540
  "--button-transparent-pressed": "rgba(243, 244, 246, 1)",
508
- "--bg-switch-off-hover": "rgba(229, 231, 235, 1)",
509
- "--bg-switch-off-hover-gradient-from": "rgba(3, 7, 18, 0)",
510
- "--bg-switch-off-hover-gradient-to": "rgba(3, 7, 18, 1)",
511
- "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
512
541
  "--code-bg-base": "rgba(17, 24, 39, 1)",
513
542
  "--code-bg-header": "rgba(31, 41, 55, 1)",
514
543
  "--code-text-subtle": "rgba(156, 163, 175, 1)",
515
544
  "--code-border": "rgba(55, 65, 81, 1)",
516
545
  "--code-icon": "rgba(107, 114, 128, 1)",
517
- "--button-inverted": "rgba(10, 10, 10, 1)",
518
- "--button-inverted-gradient-from": "rgba(255, 255, 255, 1)",
519
- "--button-inverted-gradient-to": "rgba(255, 255, 255, 0)",
520
- "--button-neutral-pressed": "rgba(255, 255, 255, 1)",
521
- "--button-neutral-pressed-gradient-from": "rgba(10, 10, 10, 1)",
522
- "--button-neutral-pressed-gradient-to": "rgba(10, 10, 10, 0)",
523
- "--button-inverted-pressed": "rgba(10, 10, 10, 1)",
524
- "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 0)",
525
- "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 1)",
526
- "--button-inverted-hover": "rgba(10, 10, 10, 1)",
527
- "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
528
- "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
546
+ "--button-neutral-pressed": "rgba(243, 244, 246, 1)",
547
+ "--button-neutral-pressed-gradient-from": "rgba(3, 7, 18, 0)",
548
+ "--button-neutral-pressed-gradient-to": "rgba(3, 7, 18, 1)",
529
549
  "--button-neutral": "rgba(255, 255, 255, 1)",
530
- "--button-neutral-gradient-from": "rgba(10, 10, 10, 0)",
531
- "--button-neutral-gradient-to": "rgba(10, 10, 10, 1)",
532
- "--button-neutral-hover": "rgba(255, 255, 255, 1)",
533
- "--button-neutral-hover-gradient-from": "rgba(10, 10, 10, 0)",
534
- "--button-neutral-hover-gradient-to": "rgba(10, 10, 10, 1)",
550
+ "--button-neutral-gradient-from": "rgba(3, 7, 18, 0)",
551
+ "--button-neutral-gradient-to": "rgba(3, 7, 18, 1)",
552
+ "--button-neutral-hover": "rgba(249, 250, 251, 1)",
553
+ "--button-neutral-hover-gradient-from": "rgba(3, 7, 18, 0)",
554
+ "--button-neutral-hover-gradient-to": "rgba(3, 7, 18, 1)",
535
555
  "--button-danger": "rgba(225, 29, 72, 1)",
536
556
  "--button-danger-gradient-from": "rgba(255, 255, 255, 1)",
537
557
  "--button-danger-gradient-to": "rgba(255, 255, 255, 0)",
538
- "--button-danger-hover": "rgba(225, 29, 72, 1)",
558
+ "--button-inverted-pressed": "rgba(31, 41, 55, 1)",
559
+ "--button-inverted-pressed-gradient-from": "rgba(255, 255, 255, 1)",
560
+ "--button-inverted-pressed-gradient-to": "rgba(255, 255, 255, 0)",
561
+ "--button-danger-pressed": "rgba(159, 18, 57, 1)",
562
+ "--button-danger-pressed-gradient-from": "rgba(255, 255, 255, 1)",
563
+ "--button-danger-pressed-gradient-to": "rgba(255, 255, 255, 0)",
564
+ "--button-inverted-hover": "rgba(17, 24, 39, 1)",
565
+ "--button-inverted-hover-gradient-from": "rgba(255, 255, 255, 1)",
566
+ "--button-inverted-hover-gradient-to": "rgba(255, 255, 255, 0)",
567
+ "--button-danger-hover": "rgba(190, 18, 60, 1)",
539
568
  "--button-danger-hover-gradient-from": "rgba(255, 255, 255, 1)",
540
569
  "--button-danger-hover-gradient-to": "rgba(255, 255, 255, 0)",
541
- "--bg-switch-off": "rgba(229, 231, 235, 1)"
570
+ "--bg-component": "rgba(241, 243, 245, 1)",
571
+ "--bg-overlay": "rgba(3, 7, 18, 0.4)",
572
+ "--bg-switch-off": "rgba(229, 231, 235, 1)",
573
+ "--bg-field-hover": "rgba(243, 244, 246, 1)",
574
+ "--bg-field": "rgba(249, 250, 251, 1)",
575
+ "--bg-interactive": "rgba(59, 130, 246, 1)",
576
+ "--bg-highlight-hover": "rgba(219, 234, 254, 1)",
577
+ "--bg-switch-off-hover": "rgba(209, 213, 219, 1)",
578
+ "--bg-disabled": "rgba(243, 244, 246, 1)",
579
+ "--contrast-bg-subtle": "rgba(46, 48, 53, 1)",
580
+ "--contrast-bg-base": "rgba(27, 27, 31, 1)",
581
+ "--contrast-border-base": "rgba(60, 63, 68, 1)",
582
+ "--contrast-fg-primary": "rgba(237, 238, 240, 1)",
583
+ "--contrast-bg-base-pressed": "rgba(53, 55, 60, 1)",
584
+ "--contrast-fg-secondary": "rgba(173, 177, 184, 1)",
585
+ "--contrast-bg-highlight": "rgba(53, 55, 60, 1)",
586
+ "--contrast-bg-base-hover": "rgba(46, 48, 53, 1)"
542
587
  }
543
588
  };
544
589
 
545
590
  // src/theme/tokens/components.ts
546
591
  var components = {
547
- ".button-danger-gradient": {
548
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
549
- "opacity": "16%"
550
- },
551
- ".button-danger-pressed-gradient": {
552
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
553
- "opacity": "20%"
554
- },
555
- ".button-neutral-pressed-gradient": {
556
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
557
- "opacity": "4%"
558
- },
559
- ".button-inverted-gradient": {
560
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
561
- "opacity": "16%"
562
- },
563
- ".bg-switch-off-hover-gradient": {
564
- "backgroundImage": "linear-gradient(0deg, var(--bg-switch-off-hover-gradient-from), var(--bg-switch-off-hover-gradient-to))",
565
- "opacity": "6%"
566
- },
567
- ".button-inverted-pressed-gradient": {
568
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
569
- "opacity": "16%"
570
- },
571
- ".button-inverted-hover-gradient": {
572
- "backgroundImage": "linear-gradient(0deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
573
- "opacity": "16%"
574
- },
575
- ".button-neutral-gradient": {
576
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
577
- "opacity": "4%"
578
- },
579
- ".button-neutral-hover-gradient": {
580
- "backgroundImage": "linear-gradient(0deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
581
- "opacity": "8%"
592
+ "dark": {
593
+ ".button-neutral-hover-gradient": {
594
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
595
+ "opacity": "6%"
596
+ },
597
+ ".button-danger-pressed-gradient": {
598
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
599
+ "opacity": "10%"
600
+ },
601
+ ".button-danger-gradient": {
602
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
603
+ "opacity": "10%"
604
+ },
605
+ ".button-neutral-pressed-gradient": {
606
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
607
+ "opacity": "6%"
608
+ },
609
+ ".button-neutral-gradient": {
610
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
611
+ "opacity": "6%"
612
+ },
613
+ ".button-inverted-pressed-gradient": {
614
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
615
+ "opacity": "12%"
616
+ },
617
+ ".button-inverted-hover-gradient": {
618
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
619
+ "opacity": "12%"
620
+ },
621
+ ".button-danger-hover-gradient": {
622
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
623
+ "opacity": "10%"
624
+ },
625
+ ".button-inverted-gradient": {
626
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
627
+ "opacity": "12%"
628
+ }
582
629
  },
583
- ".button-danger-hover-gradient": {
584
- "backgroundImage": "linear-gradient(0deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
585
- "opacity": "14.000000000000002%"
630
+ "light": {
631
+ ".button-inverted-gradient": {
632
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-gradient-from), var(--button-inverted-gradient-to))",
633
+ "opacity": "16%"
634
+ },
635
+ ".button-neutral-pressed-gradient": {
636
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-pressed-gradient-from), var(--button-neutral-pressed-gradient-to))",
637
+ "opacity": "3%"
638
+ },
639
+ ".button-neutral-gradient": {
640
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-gradient-from), var(--button-neutral-gradient-to))",
641
+ "opacity": "3%"
642
+ },
643
+ ".button-neutral-hover-gradient": {
644
+ "backgroundImage": "linear-gradient(180deg, var(--button-neutral-hover-gradient-from), var(--button-neutral-hover-gradient-to))",
645
+ "opacity": "3%"
646
+ },
647
+ ".button-danger-gradient": {
648
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-gradient-from), var(--button-danger-gradient-to))",
649
+ "opacity": "16%"
650
+ },
651
+ ".button-inverted-pressed-gradient": {
652
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-pressed-gradient-from), var(--button-inverted-pressed-gradient-to))",
653
+ "opacity": "16%"
654
+ },
655
+ ".button-danger-pressed-gradient": {
656
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-pressed-gradient-from), var(--button-danger-pressed-gradient-to))",
657
+ "opacity": "16%"
658
+ },
659
+ ".button-inverted-hover-gradient": {
660
+ "backgroundImage": "linear-gradient(180deg, var(--button-inverted-hover-gradient-from), var(--button-inverted-hover-gradient-to))",
661
+ "opacity": "16%"
662
+ },
663
+ ".button-danger-hover-gradient": {
664
+ "backgroundImage": "linear-gradient(180deg, var(--button-danger-hover-gradient-from), var(--button-danger-hover-gradient-to))",
665
+ "opacity": "16%"
666
+ }
586
667
  }
587
668
  };
588
669
 
589
670
  // src/theme/tokens/effects.ts
590
671
  var effects = {
591
672
  "dark": {
592
- "--buttons-neutral": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4)",
593
- "--buttons-colored": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4)",
673
+ "--details-switch-background-focus": "0px 0px 0px 1px rgba(27, 27, 31, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
674
+ "--buttons-neutral-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
675
+ "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(46, 48, 53, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
676
+ "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
677
+ "--buttons-inverted-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
594
678
  "--borders-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
595
- "--buttons-neutral-focus": "0px 0.5px 0px 0px rgba(255, 255, 255, 0.1) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
596
- "--buttons-colored-focus": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8)",
679
+ "--buttons-danger": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(0, 0, 0, 0.4)",
680
+ "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
681
+ "--buttons-danger-focus": "0px 1px 0px 0px rgba(190, 18, 60, 0.04), 0px -1px 0px 0px rgba(190, 18, 60, 0.04), 0px 0px 0px 1px rgba(190, 18, 60, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4), 0px 0px 0px 2px rgba(27, 27, 31, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
682
+ "--borders-base": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
683
+ "--borders-interactive-with-active": "0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.25)",
684
+ "--borders-error": "0px 0px 0px 1px rgba(244, 63, 94, 1), 0px 0px 0px 4px rgba(225, 29, 72, 0.25)",
597
685
  "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1)",
598
- "--borders-strong-with-shadow": "0px 1px 2px 0px rgba(255, 255, 255, 0.24), 0px 0px 0px 1px rgba(55, 55, 55, 1), 0px 0.5px 0px 2px rgba(0, 0, 0, 0.4)",
686
+ "--buttons-inverted": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)",
599
687
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
600
- "--borders-interactive": "0px 0px 0px 1px rgba(96, 165, 250, 1)",
601
- "--borders-base-with-shadow": "0px 1px 2px 0px rgba(255, 255, 255, 0.1), 0px 0px 0px 1px rgba(48, 48, 48, 1), 0px 0.5px 0px 2px rgba(0, 0, 0, 0.4)",
602
- "--borders-base": "0px 0px 0px 1px rgba(48, 48, 48, 1)",
603
- "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(219, 234, 254, 0.5), 0px 0px 0px 1px rgba(96, 165, 250, 1), 0px 0px 0px 2px rgba(23, 23, 23, 1), 0px 0px 0px 4px rgba(96, 165, 250, 0.8)",
604
- "--elevation-card-rest": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)",
605
- "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
606
- "--elevation-card-hover": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 8px 0px rgba(0, 0, 0, 0.4)",
607
- "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.25)",
608
- "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.25)",
609
- "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
610
- "--elevation-modal": "0px 0px 0px 1px rgba(23, 23, 23, 1) inset, 0px 0px 0px 2px rgba(48, 48, 48, 0.4) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.32), 0px 2px 24px 0px rgba(0, 0, 0, 0.32)",
688
+ "--elevation-card-rest": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px 0px rgba(0, 0, 0, 0.4)",
689
+ "--elevation-tooltip": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.32)",
690
+ "--elevation-flyout": "0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 8px 16px 0px rgba(0, 0, 0, 0.32)",
611
691
  "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.16), 0px 5px 4px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.1)",
612
692
  "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)",
613
- "--details-switch-background-focus": "0px 0px 0px 1px rgba(23, 23, 23, 1), 0px 0px 0px 3px rgba(96, 165, 250, 0.8), 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.1) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.16) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.2)"
693
+ "--buttons-neutral": "0px 1px 0px 0px rgba(255, 255, 255, 0.04), 0px -1px 0px 0px rgba(255, 255, 255, 0.04), 0px 0px 0px 1px rgba(255, 255, 255, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.4)"
614
694
  },
615
695
  "light": {
616
- "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
617
- "--borders-interactive": "0px 0px 0px 1px rgba(59, 130, 246, 1)",
618
- "--borders-active": "0px 0px 0px 3px rgba(59, 130, 246, 0.2)",
696
+ "--elevation-card-hover": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 8px 0px rgba(3, 7, 18, 0.1)",
697
+ "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 231, 235, 0.4) inset, 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 16px 32px 0px rgba(3, 7, 18, 0.08), 0px 2px 24px 0px rgba(3, 7, 18, 0.08)",
698
+ "--buttons-inverted": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8)",
699
+ "--elevation-card-rest": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
700
+ "--buttons-neutral-focus": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
701
+ "--borders-interactive-with-active": "0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.2)",
702
+ "--buttons-danger-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 0.8), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
703
+ "--borders-base": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)",
704
+ "--buttons-danger": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(190, 18, 60, 0.4), 0px 0px 0px 1px rgba(190, 18, 60, 0.8)",
619
705
  "--details-contrast-on-bg-interactive": "0px 1px 2px 0px rgba(30, 58, 138, 0.6)",
620
- "--borders-error": "0px 0px 0px 3px rgba(225, 29, 72, 0.15)",
621
- "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.02), 0px 5px 4px 0px rgba(0, 0, 0, 0.02), 0px 3px 3px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)",
706
+ "--details-switch-handle": "0px 0px 2px 1px rgba(255, 255, 255, 1) inset, 0px 1px 0px 0px rgba(255, 255, 255, 1) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.02), 0px 5px 4px 0px rgba(3, 7, 18, 0.02), 0px 3px 3px 0px rgba(3, 7, 18, 0.04), 0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 1px 0px rgba(3, 7, 18, 0.08)",
707
+ "--buttons-neutral": "0px 1px 2px 0px rgba(3, 7, 18, 0.12), 0px 0px 0px 1px rgba(3, 7, 18, 0.08)",
622
708
  "--borders-interactive-with-focus": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
623
- "--elevation-flyout": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08)",
624
- "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
625
- "--borders-base": "0px 0px 0px 1px rgba(229, 229, 229, 1)",
626
- "--elevation-tooltip": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08)",
709
+ "--details-switch-background-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6), 0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
710
+ "--borders-error": "0px 0px 0px 1px rgba(225, 29, 72, 1), 0px 0px 0px 3px rgba(225, 29, 72, 0.15)",
711
+ "--buttons-inverted-focus": "0px 0.75px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px 0px rgba(3, 7, 18, 0.4), 0px 0px 0px 1px rgba(3, 7, 18, 0.8), 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px rgba(59, 130, 246, 0.6)",
712
+ "--borders-focus": "0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
713
+ "--details-switch-background": "0px 1px 1px 0px rgba(3, 7, 18, 0.04) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04) inset, 0px 0px 0px 0.5px rgba(3, 7, 18, 0.06) inset, 0px 0px 8px 0px rgba(3, 7, 18, 0.02) inset, 0px 2px 4px 0px rgba(3, 7, 18, 0.04)",
714
+ "--elevation-tooltip": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 4px 8px 0px rgba(3, 7, 18, 0.08)",
627
715
  "--borders-interactive-with-shadow": "0px 1px 2px 0px rgba(30, 58, 138, 0.5), 0px 0px 0px 1px rgba(59, 130, 246, 1)",
628
- "--elevation-card-hover": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 8px 0px rgba(0, 0, 0, 0.1)",
629
- "--elevation-modal": "0px 0px 0px 1px rgba(255, 255, 255, 1) inset, 0px 0px 0px 2px rgba(229, 229, 229, 0.4) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 16px 32px 0px rgba(0, 0, 0, 0.08), 0px 2px 24px 0px rgba(0, 0, 0, 0.08)",
630
- "--elevation-card-rest": "0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
631
- "--buttons-neutral": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12)",
632
- "--buttons-colored-focus": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
633
- "--buttons-colored": "0px 1px 0px 0px rgba(255, 255, 255, 0.16) inset, 0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12)",
634
- "--buttons-neutral-focus": "0px 0.5px 0px 0px rgba(0, 0, 0, 0.12), 0px 1px 0px 0px rgba(0, 0, 0, 0.12), 0px 0px 0px 1px rgba(255, 255, 255, 1), 0px 0px 0px 3px rgba(59, 130, 246, 0.6)",
635
- "--borders-base-with-shadow": "0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(229, 229, 229, 1)",
636
- "--borders-strong-with-shadow": "0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 0px 0px 1px rgba(212, 212, 212, 1)",
637
- "--details-switch-background": "0px 1px 1px 0px rgba(0, 0, 0, 0.04) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.06) inset, 0px 0px 8px 0px rgba(0, 0, 0, 0.02) inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.04)"
716
+ "--elevation-flyout": "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 8px 16px 0px rgba(3, 7, 18, 0.08)"
638
717
  }
639
718
  };
640
719
 
@@ -700,18 +779,6 @@ var typography = {
700
779
  "fontWeight": "500",
701
780
  "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
702
781
  },
703
- ".code-body": {
704
- "fontSize": "0.8125rem",
705
- "lineHeight": "1.5rem",
706
- "fontWeight": "400",
707
- "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
708
- },
709
- ".code-label": {
710
- "fontSize": "0.8125rem",
711
- "lineHeight": "1.25rem",
712
- "fontWeight": "400",
713
- "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
714
- },
715
782
  ".txt-medium": {
716
783
  "fontSize": "0.875rem",
717
784
  "lineHeight": "1.5rem",
@@ -790,7 +857,55 @@ var typography = {
790
857
  "fontWeight": "400",
791
858
  "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
792
859
  },
793
- ".txt-large-plus-compact": {
860
+ ".code-body": {
861
+ "fontSize": "0.8125rem",
862
+ "lineHeight": "1.5rem",
863
+ "fontWeight": "400",
864
+ "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
865
+ },
866
+ ".code-label": {
867
+ "fontSize": "0.8125rem",
868
+ "lineHeight": "1.25rem",
869
+ "fontWeight": "400",
870
+ "fontFamily": "Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
871
+ },
872
+ ".txt-compact-xlarge-plus": {
873
+ "fontSize": "1.125rem",
874
+ "lineHeight": "1.25rem",
875
+ "fontWeight": "500",
876
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
877
+ },
878
+ ".txt-xsmall-plus": {
879
+ "fontSize": "0.75rem",
880
+ "lineHeight": "1.25rem",
881
+ "fontWeight": "500",
882
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
883
+ },
884
+ ".txt-compact-xlarge": {
885
+ "fontSize": "1.125rem",
886
+ "lineHeight": "1.25rem",
887
+ "fontWeight": "400",
888
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
889
+ },
890
+ ".txt-small-plus": {
891
+ "fontSize": "0.8125rem",
892
+ "lineHeight": "1.375rem",
893
+ "fontWeight": "500",
894
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
895
+ },
896
+ ".txt-small": {
897
+ "fontSize": "0.8125rem",
898
+ "lineHeight": "1.375rem",
899
+ "fontWeight": "400",
900
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
901
+ },
902
+ ".txt-xsmall": {
903
+ "fontSize": "0.75rem",
904
+ "lineHeight": "1.25rem",
905
+ "fontWeight": "400",
906
+ "fontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji"
907
+ },
908
+ ".txt-compact-large-plus": {
794
909
  "fontSize": "1rem",
795
910
  "lineHeight": "1.25rem",
796
911
  "fontWeight": "500",
@@ -809,10 +924,10 @@ var plugin_default = (0, import_plugin.default)(
809
924
  borderColor: "var(--border-base)"
810
925
  }
811
926
  });
812
- addComponents(components);
813
927
  addComponents(typography);
814
928
  addBase({
815
- ":root": { ...colors.light, ...effects.light }
929
+ ":root": { ...colors.light, ...effects.light },
930
+ ...components.light
816
931
  });
817
932
  if (darkMode === "class") {
818
933
  addBase({
@@ -821,7 +936,8 @@ var plugin_default = (0, import_plugin.default)(
821
936
  } else {
822
937
  addBase({
823
938
  "@media (prefers-color-scheme: dark)": {
824
- ":root": { ...colors.dark, ...effects.dark }
939
+ ":root": { ...colors.dark, ...effects.dark },
940
+ ...components.dark
825
941
  }
826
942
  });
827
943
  }
@@ -835,7 +951,21 @@ var plugin_default = (0, import_plugin.default)(
835
951
  mono: FONT_FAMILY_MONO
836
952
  },
837
953
  transitionProperty: {
838
- fg: "color, background-color, border-color, box-shadow"
954
+ fg: "color, background-color, border-color, box-shadow, opacity"
955
+ },
956
+ keyframes: {
957
+ "accordion-down": {
958
+ from: { height: "0px" },
959
+ to: { height: "var(--radix-accordion-content-height)" }
960
+ },
961
+ "accordion-up": {
962
+ from: { height: "var(--radix-accordion-content-height)" },
963
+ to: { height: "0px" }
964
+ }
965
+ },
966
+ animation: {
967
+ "accordion-down": "accordion-down 0.2s ease-out",
968
+ "accordion-up": "accordion-up 0.2s ease-out"
839
969
  }
840
970
  }
841
971
  }