@ecopages/radiant-themes 0.2.1 → 0.2.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 (39) hide show
  1. package/README.md +27 -15
  2. package/dist/compiled/themes/cloudflare/compact.css +40 -12
  3. package/dist/compiled/themes/cloudflare.css +40 -12
  4. package/dist/compiled/themes/github/compact.css +264 -67
  5. package/dist/compiled/themes/github.css +264 -67
  6. package/dist/compiled/themes/high-contrast/compact.css +88 -5
  7. package/dist/compiled/themes/high-contrast.css +88 -5
  8. package/dist/compiled/themes/macos/compact.css +674 -294
  9. package/dist/compiled/themes/macos-classic/compact.css +197 -25
  10. package/dist/compiled/themes/macos-classic.css +197 -25
  11. package/dist/compiled/themes/macos.css +674 -294
  12. package/dist/compiled/themes/material/compact.css +447 -132
  13. package/dist/compiled/themes/material.css +447 -132
  14. package/dist/compiled/themes/vercel/compact.css +104 -62
  15. package/dist/compiled/themes/vercel.css +104 -62
  16. package/dist/compiled/themes/vscode/compact.css +255 -40
  17. package/dist/compiled/themes/vscode.css +255 -40
  18. package/dist/compiled/themes/windows95/compact.css +260 -22
  19. package/dist/compiled/themes/windows95.css +260 -22
  20. package/dist/tokens/colors/github.css +32 -0
  21. package/dist/tokens/colors/macos.css +65 -25
  22. package/dist/tokens/colors/material.css +61 -20
  23. package/dist/tokens/colors/vercel.css +43 -39
  24. package/dist/tokens/colors/vscode.css +48 -4
  25. package/dist/tokens/colors/windows95.css +10 -5
  26. package/dist/tokens/components/cloudflare.css +55 -5
  27. package/dist/tokens/components/github.css +258 -40
  28. package/dist/tokens/components/high-contrast.css +93 -5
  29. package/dist/tokens/components/macos-classic.css +262 -24
  30. package/dist/tokens/components/macos.css +537 -106
  31. package/dist/tokens/components/material.css +354 -25
  32. package/dist/tokens/components/vercel.css +77 -15
  33. package/dist/tokens/components/vscode.css +248 -27
  34. package/dist/tokens/components/windows95.css +304 -19
  35. package/dist/tokens/roles/github.css +12 -12
  36. package/dist/tokens/roles/macos.css +97 -93
  37. package/dist/tokens/roles/material.css +65 -65
  38. package/dist/tokens/roles/vercel.css +3 -3
  39. package/package.json +3 -3
package/dist/compiled/themes/vercel/compact.css CHANGED
@@ -25,7 +25,6 @@
25
25
  --text-4xl: var(--text-4xl);
26
26
  --text-5xl: var(--text-5xl);
27
27
  --font-weight-medium: var(--weight-medium);
28
- --font-weight-semibold: var(--weight-semibold);
29
28
  --opacity-disabled: var(--opacity-disabled);
30
29
  --opacity-muted: var(--opacity-muted);
31
30
  --color-primary: var(--primary);
@@ -267,15 +266,15 @@
267
266
  :where(:root), :root[data-rui-theme='vercel'] {
268
267
  --color-vercel-gray-50: #fafafa;
269
268
  --color-vercel-gray-100: #f2f2f2;
270
- --color-vercel-gray-200: #eaeaea;
271
- --color-vercel-gray-300: #e1e1e1;
272
- --color-vercel-gray-400: #c7c7c7;
273
- --color-vercel-gray-500: #a1a1a1;
274
- --color-vercel-gray-600: #666666;
275
- --color-vercel-gray-700: #444444;
276
- --color-vercel-gray-800: #333333;
277
- --color-vercel-gray-900: #111111;
278
- --color-vercel-gray-950: #000000;
269
+ --color-vercel-gray-200: #ebebeb;
270
+ --color-vercel-gray-300: #e6e6e6;
271
+ --color-vercel-gray-400: #c9c9c9;
272
+ --color-vercel-gray-500: #a8a8a8;
273
+ --color-vercel-gray-600: #8f8f8f;
274
+ --color-vercel-gray-700: #7d7d7d;
275
+ --color-vercel-gray-800: #666666;
276
+ --color-vercel-gray-900: #4d4d4d;
277
+ --color-vercel-gray-950: #171717;
279
278
  --color-vercel-blue: #0070f3;
280
279
  --color-vercel-blue-light: #3291ff;
281
280
  --color-vercel-red: #ee0000;
@@ -286,29 +285,29 @@
286
285
  --color-vercel-pink: #ff0080;
287
286
  --color-vercel-background-1: #ffffff;
288
287
  --color-vercel-background-2: #fafafa;
289
- --color-vercel-component-1: #ffffff;
290
- --color-vercel-component-2: #fafafa;
291
- --color-vercel-component-3: #eaeaea;
292
- --color-vercel-border-4: #eaeaea;
293
- --color-vercel-border-5: #999999;
294
- --color-vercel-border-6: #666666;
295
- --color-vercel-high-contrast-1: #000000;
296
- --color-vercel-high-contrast-2: #333333;
288
+ --color-vercel-component-1: #f2f2f2;
289
+ --color-vercel-component-2: #ebebeb;
290
+ --color-vercel-component-3: #e6e6e6;
291
+ --color-vercel-border-4: #ebebeb;
292
+ --color-vercel-border-5: #c9c9c9;
293
+ --color-vercel-border-6: #a8a8a8;
294
+ --color-vercel-high-contrast-1: #171717;
295
+ --color-vercel-high-contrast-2: #383838;
297
296
  --color-vercel-text-secondary: #666666;
298
- --color-vercel-text-primary: #000000;
297
+ --color-vercel-text-primary: #171717;
299
298
  }
300
299
  :where(.dark), :root.dark[data-rui-theme='vercel'] {
301
300
  --color-vercel-gray-50: #1a1a1a;
302
- --color-vercel-gray-100: #222222;
303
- --color-vercel-gray-200: #2a2a2a;
304
- --color-vercel-gray-300: #333333;
305
- --color-vercel-gray-400: #444444;
306
- --color-vercel-gray-500: #666666;
307
- --color-vercel-gray-600: #888888;
308
- --color-vercel-gray-700: #999999;
309
- --color-vercel-gray-800: #cccccc;
310
- --color-vercel-gray-900: #eeeeee;
311
- --color-vercel-gray-950: #ffffff;
301
+ --color-vercel-gray-100: #1f1f1f;
302
+ --color-vercel-gray-200: #292929;
303
+ --color-vercel-gray-300: #2e2e2e;
304
+ --color-vercel-gray-400: #454545;
305
+ --color-vercel-gray-500: #7d7d7d;
306
+ --color-vercel-gray-600: #878787;
307
+ --color-vercel-gray-700: #8f8f8f;
308
+ --color-vercel-gray-800: #a1a1a1;
309
+ --color-vercel-gray-900: #d4d4d4;
310
+ --color-vercel-gray-950: #ededed;
312
311
  --color-vercel-blue: #3291ff;
313
312
  --color-vercel-blue-light: #52a8ff;
314
313
  --color-vercel-red: #ff1a1a;
@@ -317,18 +316,18 @@
317
316
  --color-vercel-teal: #50e3c2;
318
317
  --color-vercel-purple: #a76ad7;
319
318
  --color-vercel-pink: #ff0080;
320
- --color-vercel-background-1: #000000;
321
- --color-vercel-background-2: #111111;
322
- --color-vercel-component-1: #111111;
323
- --color-vercel-component-2: #1a1a1a;
324
- --color-vercel-component-3: #333333;
325
- --color-vercel-border-4: #333333;
326
- --color-vercel-border-5: #666666;
327
- --color-vercel-border-6: #888888;
328
- --color-vercel-high-contrast-1: #ffffff;
319
+ --color-vercel-background-1: #0a0a0a;
320
+ --color-vercel-background-2: #000000;
321
+ --color-vercel-component-1: #1a1a1a;
322
+ --color-vercel-component-2: #1f1f1f;
323
+ --color-vercel-component-3: #292929;
324
+ --color-vercel-border-4: #2e2e2e;
325
+ --color-vercel-border-5: #454545;
326
+ --color-vercel-border-6: #878787;
327
+ --color-vercel-high-contrast-1: #ededed;
329
328
  --color-vercel-high-contrast-2: #cccccc;
330
- --color-vercel-text-secondary: #888888;
331
- --color-vercel-text-primary: #ffffff;
329
+ --color-vercel-text-secondary: #a1a1a1;
330
+ --color-vercel-text-primary: #ededed;
332
331
  }
333
332
  :where(:root), :root[data-rui-theme='vercel'] {
334
333
  --gray-50: var(--color-vercel-gray-50);
@@ -447,13 +446,13 @@
447
446
  --on-surface: var(--color-vercel-text-primary);
448
447
  --surface-container-lowest: var(--color-vercel-background-1);
449
448
  --on-surface-container-lowest: var(--color-vercel-text-primary);
450
- --surface-container-low: var(--color-vercel-component-2);
449
+ --surface-container-low: var(--color-vercel-background-2);
451
450
  --on-surface-container-low: var(--color-vercel-text-primary);
452
451
  --surface-container: var(--color-vercel-component-1);
453
452
  --on-surface-container: var(--color-vercel-text-primary);
454
- --surface-container-high: var(--color-vercel-component-3);
453
+ --surface-container-high: var(--color-vercel-component-2);
455
454
  --on-surface-container-high: var(--color-vercel-text-primary);
456
- --surface-container-highest: var(--color-vercel-border-4);
455
+ --surface-container-highest: var(--color-vercel-component-3);
457
456
  --on-surface-container-highest: var(--color-vercel-text-primary);
458
457
  --background: var(--color-vercel-background-2);
459
458
  --on-background: var(--color-vercel-text-primary);
@@ -535,9 +534,9 @@
535
534
  --on-background-code: var(--color-vercel-text-primary);
536
535
  }
537
536
  :where(:root), :root[data-rui-theme='vercel'] {
538
- --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
539
- --font-heading: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
540
- --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
537
+ --font-sans: Geist, 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
538
+ --font-heading: Geist, 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
539
+ --font-mono: 'Geist Mono', 'GeistMono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
541
540
  --rui-border-alpha: 100%;
542
541
  --border-radius-xs: 0.125rem;
543
542
  --border-radius-sm: 0.25rem;
@@ -569,6 +568,7 @@
569
568
  font-weight: var(--font-weight-medium);
570
569
  --tw-shadow: 0 0 #0000;
571
570
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
571
+ background-image: none;
572
572
  }
573
573
  :root .rui-button--filled {
574
574
  background-color: var(--color-primary);
@@ -588,7 +588,11 @@
588
588
  }
589
589
  :root .rui-button--outline:hover:not(:disabled),
590
590
  :root .rui-button--ghost:hover:not(:disabled) {
591
- background-color: var(--color-surface-container-low);
591
+ background-color: var(--color-vercel-component-2);
592
+ }
593
+ :root .rui-button--outline:active:not(:disabled),
594
+ :root .rui-button--ghost:active:not(:disabled) {
595
+ background-color: var(--color-vercel-component-3);
592
596
  }
593
597
  :root .rui-input,
594
598
  :root .rui-textarea,
@@ -633,12 +637,7 @@
633
637
  border-color: var(--rui-control-border-color);
634
638
  }
635
639
  :root .rui-dialog__surface,
636
- :root .rui-popover-host,
637
640
  :root .rui-hover-card__content,
638
- :root .rui-menu-button__menu,
639
- :root .rui-menubar__menu,
640
- :root .rui-select__listbox,
641
- :root .rui-combobox__listbox,
642
641
  :root .rui-calendar,
643
642
  :root rui-tabs[variant='boxed'] {
644
643
  border-radius: var(--radius-container);
@@ -649,6 +648,40 @@
649
648
  --tw-shadow: var(--shadow-control);
650
649
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
651
650
  }
651
+ :root .rui-popover {
652
+ --rui-popover-radius: var(--radius-container);
653
+ --rui-popover-surface: var(--color-vercel-background-1);
654
+ --rui-popover-border-color: var(--color-vercel-border-4);
655
+ --rui-popover-shadow: 0 4px 8px -4px rgb(0 0 0 / 0.04), 0 16px 24px -8px rgb(0 0 0 / 0.06);
656
+ }
657
+ :root .rui-tooltip__content {
658
+ --rui-tooltip-radius: var(--radius-control);
659
+ --rui-tooltip-padding-x: 0.75rem;
660
+ --rui-tooltip-padding-y: 0.375rem;
661
+ }
662
+ :root .rui-menu-button__menu,
663
+ :root .rui-menubar__menu,
664
+ :root .rui-select__listbox,
665
+ :root .rui-combobox__listbox {
666
+ border-radius: var(--radius-container);
667
+ border-style: var(--tw-border-style);
668
+ border-width: 1px;
669
+ border-color: var(--color-border);
670
+ padding: var(--spacing-2);
671
+ background-color: var(--color-vercel-background-1);
672
+ box-shadow: 0 4px 8px -4px rgb(0 0 0 / 0.04),
673
+ 0 16px 24px -8px rgb(0 0 0 / 0.06);
674
+ }
675
+ :root .rui-select__listbox .rui-listbox,
676
+ :root .rui-combobox__listbox .rui-listbox {
677
+ background-color: transparent;
678
+ padding: 0px;
679
+ }
680
+ :root .rui-listbox__option,
681
+ :root .rui-menu-button__item,
682
+ :root .rui-menubar__menu-item {
683
+ border-radius: var(--radius-control);
684
+ }
652
685
  :root rui-tabs[variant='boxed'] .rui-tabs__list {
653
686
  border-bottom-style: var(--tw-border-style);
654
687
  border-bottom-width: 1px;
@@ -665,8 +698,8 @@
665
698
  }
666
699
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
667
700
  background-color: transparent;
668
- --tw-font-weight: var(--font-weight-semibold);
669
- font-weight: var(--font-weight-semibold);
701
+ --tw-font-weight: var(--font-weight-medium);
702
+ font-weight: var(--font-weight-medium);
670
703
  color: var(--color-on-surface);
671
704
  border-bottom-color: var(--primary);
672
705
  }
@@ -674,12 +707,25 @@
674
707
  background-color: var(--color-surface);
675
708
  padding: var(--rui-tabs-panel-padding);
676
709
  }
677
- :root .rui-listbox__option:hover:not([aria-selected='true']):not([aria-disabled='true']):not([data-active]),
710
+ :root .rui-listbox__option:hover:not([aria-disabled='true']),
711
+ :root .rui-listbox__option[data-active]:not([aria-disabled='true']),
678
712
  :root .rui-menu-button__item:hover:not([aria-checked='true']):not([aria-disabled='true']),
679
713
  :root .rui-menubar__menu-item:hover:not([aria-expanded='true']):not([aria-disabled='true']) {
714
+ background-color: var(--color-vercel-component-1);
715
+ }
716
+ :root .rui-listbox__option[aria-selected='true']:not([aria-disabled='true']),
717
+ :root .rui-listbox__option[aria-selected='true']:focus-visible {
680
718
  background-color: var(--color-vercel-component-2);
719
+ background-image: none;
720
+ color: var(--color-vercel-text-primary);
681
721
  }
682
- :root .rui-table__header,
722
+ :root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
723
+ color: var(--color-vercel-text-primary);
724
+ }
725
+ :root .rui-listbox__option[aria-selected='true'][data-active]:not([aria-disabled='true']) {
726
+ --tw-ring-color: transparent;
727
+ }
728
+ :root .rui-table__column,
683
729
  :root .rui-treegrid__row--header {
684
730
  background-color: var(--color-surface-container-low);
685
731
  --tw-font-weight: var(--font-weight-medium);
@@ -691,15 +737,11 @@
691
737
  --tw-shadow: 0 0 #0000;
692
738
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
693
739
  }
694
- :root .rui-toast__content {
740
+ :root .rui-toast {
695
741
  border-radius: var(--radius-control);
696
- border-style: var(--tw-border-style);
697
- border-width: 1px;
698
- border-color: var(--color-border);
699
- background-color: var(--color-surface);
700
- color: var(--color-on-surface);
701
742
  --tw-shadow: 0 0 #0000;
702
743
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
744
+ background-image: none;
703
745
  }
704
746
  :root .rui-separator,
705
747
  :root .rui-sidebar__separator {
package/dist/compiled/themes/vercel.css CHANGED
@@ -25,7 +25,6 @@
25
25
  --text-4xl: var(--text-4xl);
26
26
  --text-5xl: var(--text-5xl);
27
27
  --font-weight-medium: var(--weight-medium);
28
- --font-weight-semibold: var(--weight-semibold);
29
28
  --opacity-disabled: var(--opacity-disabled);
30
29
  --opacity-muted: var(--opacity-muted);
31
30
  --color-primary: var(--primary);
@@ -267,15 +266,15 @@
267
266
  :where(:root), :root[data-rui-theme='vercel'] {
268
267
  --color-vercel-gray-50: #fafafa;
269
268
  --color-vercel-gray-100: #f2f2f2;
270
- --color-vercel-gray-200: #eaeaea;
271
- --color-vercel-gray-300: #e1e1e1;
272
- --color-vercel-gray-400: #c7c7c7;
273
- --color-vercel-gray-500: #a1a1a1;
274
- --color-vercel-gray-600: #666666;
275
- --color-vercel-gray-700: #444444;
276
- --color-vercel-gray-800: #333333;
277
- --color-vercel-gray-900: #111111;
278
- --color-vercel-gray-950: #000000;
269
+ --color-vercel-gray-200: #ebebeb;
270
+ --color-vercel-gray-300: #e6e6e6;
271
+ --color-vercel-gray-400: #c9c9c9;
272
+ --color-vercel-gray-500: #a8a8a8;
273
+ --color-vercel-gray-600: #8f8f8f;
274
+ --color-vercel-gray-700: #7d7d7d;
275
+ --color-vercel-gray-800: #666666;
276
+ --color-vercel-gray-900: #4d4d4d;
277
+ --color-vercel-gray-950: #171717;
279
278
  --color-vercel-blue: #0070f3;
280
279
  --color-vercel-blue-light: #3291ff;
281
280
  --color-vercel-red: #ee0000;
@@ -286,29 +285,29 @@
286
285
  --color-vercel-pink: #ff0080;
287
286
  --color-vercel-background-1: #ffffff;
288
287
  --color-vercel-background-2: #fafafa;
289
- --color-vercel-component-1: #ffffff;
290
- --color-vercel-component-2: #fafafa;
291
- --color-vercel-component-3: #eaeaea;
292
- --color-vercel-border-4: #eaeaea;
293
- --color-vercel-border-5: #999999;
294
- --color-vercel-border-6: #666666;
295
- --color-vercel-high-contrast-1: #000000;
296
- --color-vercel-high-contrast-2: #333333;
288
+ --color-vercel-component-1: #f2f2f2;
289
+ --color-vercel-component-2: #ebebeb;
290
+ --color-vercel-component-3: #e6e6e6;
291
+ --color-vercel-border-4: #ebebeb;
292
+ --color-vercel-border-5: #c9c9c9;
293
+ --color-vercel-border-6: #a8a8a8;
294
+ --color-vercel-high-contrast-1: #171717;
295
+ --color-vercel-high-contrast-2: #383838;
297
296
  --color-vercel-text-secondary: #666666;
298
- --color-vercel-text-primary: #000000;
297
+ --color-vercel-text-primary: #171717;
299
298
  }
300
299
  :where(.dark), :root.dark[data-rui-theme='vercel'] {
301
300
  --color-vercel-gray-50: #1a1a1a;
302
- --color-vercel-gray-100: #222222;
303
- --color-vercel-gray-200: #2a2a2a;
304
- --color-vercel-gray-300: #333333;
305
- --color-vercel-gray-400: #444444;
306
- --color-vercel-gray-500: #666666;
307
- --color-vercel-gray-600: #888888;
308
- --color-vercel-gray-700: #999999;
309
- --color-vercel-gray-800: #cccccc;
310
- --color-vercel-gray-900: #eeeeee;
311
- --color-vercel-gray-950: #ffffff;
301
+ --color-vercel-gray-100: #1f1f1f;
302
+ --color-vercel-gray-200: #292929;
303
+ --color-vercel-gray-300: #2e2e2e;
304
+ --color-vercel-gray-400: #454545;
305
+ --color-vercel-gray-500: #7d7d7d;
306
+ --color-vercel-gray-600: #878787;
307
+ --color-vercel-gray-700: #8f8f8f;
308
+ --color-vercel-gray-800: #a1a1a1;
309
+ --color-vercel-gray-900: #d4d4d4;
310
+ --color-vercel-gray-950: #ededed;
312
311
  --color-vercel-blue: #3291ff;
313
312
  --color-vercel-blue-light: #52a8ff;
314
313
  --color-vercel-red: #ff1a1a;
@@ -317,18 +316,18 @@
317
316
  --color-vercel-teal: #50e3c2;
318
317
  --color-vercel-purple: #a76ad7;
319
318
  --color-vercel-pink: #ff0080;
320
- --color-vercel-background-1: #000000;
321
- --color-vercel-background-2: #111111;
322
- --color-vercel-component-1: #111111;
323
- --color-vercel-component-2: #1a1a1a;
324
- --color-vercel-component-3: #333333;
325
- --color-vercel-border-4: #333333;
326
- --color-vercel-border-5: #666666;
327
- --color-vercel-border-6: #888888;
328
- --color-vercel-high-contrast-1: #ffffff;
319
+ --color-vercel-background-1: #0a0a0a;
320
+ --color-vercel-background-2: #000000;
321
+ --color-vercel-component-1: #1a1a1a;
322
+ --color-vercel-component-2: #1f1f1f;
323
+ --color-vercel-component-3: #292929;
324
+ --color-vercel-border-4: #2e2e2e;
325
+ --color-vercel-border-5: #454545;
326
+ --color-vercel-border-6: #878787;
327
+ --color-vercel-high-contrast-1: #ededed;
329
328
  --color-vercel-high-contrast-2: #cccccc;
330
- --color-vercel-text-secondary: #888888;
331
- --color-vercel-text-primary: #ffffff;
329
+ --color-vercel-text-secondary: #a1a1a1;
330
+ --color-vercel-text-primary: #ededed;
332
331
  }
333
332
  :where(:root), :root[data-rui-theme='vercel'] {
334
333
  --gray-50: var(--color-vercel-gray-50);
@@ -447,13 +446,13 @@
447
446
  --on-surface: var(--color-vercel-text-primary);
448
447
  --surface-container-lowest: var(--color-vercel-background-1);
449
448
  --on-surface-container-lowest: var(--color-vercel-text-primary);
450
- --surface-container-low: var(--color-vercel-component-2);
449
+ --surface-container-low: var(--color-vercel-background-2);
451
450
  --on-surface-container-low: var(--color-vercel-text-primary);
452
451
  --surface-container: var(--color-vercel-component-1);
453
452
  --on-surface-container: var(--color-vercel-text-primary);
454
- --surface-container-high: var(--color-vercel-component-3);
453
+ --surface-container-high: var(--color-vercel-component-2);
455
454
  --on-surface-container-high: var(--color-vercel-text-primary);
456
- --surface-container-highest: var(--color-vercel-border-4);
455
+ --surface-container-highest: var(--color-vercel-component-3);
457
456
  --on-surface-container-highest: var(--color-vercel-text-primary);
458
457
  --background: var(--color-vercel-background-2);
459
458
  --on-background: var(--color-vercel-text-primary);
@@ -535,9 +534,9 @@
535
534
  --on-background-code: var(--color-vercel-text-primary);
536
535
  }
537
536
  :where(:root), :root[data-rui-theme='vercel'] {
538
- --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
539
- --font-heading: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
540
- --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
537
+ --font-sans: Geist, 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
538
+ --font-heading: Geist, 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
539
+ --font-mono: 'Geist Mono', 'GeistMono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
541
540
  --rui-border-alpha: 100%;
542
541
  --border-radius-xs: 0.125rem;
543
542
  --border-radius-sm: 0.25rem;
@@ -569,6 +568,7 @@
569
568
  font-weight: var(--font-weight-medium);
570
569
  --tw-shadow: 0 0 #0000;
571
570
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
571
+ background-image: none;
572
572
  }
573
573
  :root .rui-button--filled {
574
574
  background-color: var(--color-primary);
@@ -588,7 +588,11 @@
588
588
  }
589
589
  :root .rui-button--outline:hover:not(:disabled),
590
590
  :root .rui-button--ghost:hover:not(:disabled) {
591
- background-color: var(--color-surface-container-low);
591
+ background-color: var(--color-vercel-component-2);
592
+ }
593
+ :root .rui-button--outline:active:not(:disabled),
594
+ :root .rui-button--ghost:active:not(:disabled) {
595
+ background-color: var(--color-vercel-component-3);
592
596
  }
593
597
  :root .rui-input,
594
598
  :root .rui-textarea,
@@ -633,12 +637,7 @@
633
637
  border-color: var(--rui-control-border-color);
634
638
  }
635
639
  :root .rui-dialog__surface,
636
- :root .rui-popover-host,
637
640
  :root .rui-hover-card__content,
638
- :root .rui-menu-button__menu,
639
- :root .rui-menubar__menu,
640
- :root .rui-select__listbox,
641
- :root .rui-combobox__listbox,
642
641
  :root .rui-calendar,
643
642
  :root rui-tabs[variant='boxed'] {
644
643
  border-radius: var(--radius-container);
@@ -649,6 +648,40 @@
649
648
  --tw-shadow: var(--shadow-control);
650
649
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
651
650
  }
651
+ :root .rui-popover {
652
+ --rui-popover-radius: var(--radius-container);
653
+ --rui-popover-surface: var(--color-vercel-background-1);
654
+ --rui-popover-border-color: var(--color-vercel-border-4);
655
+ --rui-popover-shadow: 0 4px 8px -4px rgb(0 0 0 / 0.04), 0 16px 24px -8px rgb(0 0 0 / 0.06);
656
+ }
657
+ :root .rui-tooltip__content {
658
+ --rui-tooltip-radius: var(--radius-control);
659
+ --rui-tooltip-padding-x: 0.75rem;
660
+ --rui-tooltip-padding-y: 0.375rem;
661
+ }
662
+ :root .rui-menu-button__menu,
663
+ :root .rui-menubar__menu,
664
+ :root .rui-select__listbox,
665
+ :root .rui-combobox__listbox {
666
+ border-radius: var(--radius-container);
667
+ border-style: var(--tw-border-style);
668
+ border-width: 1px;
669
+ border-color: var(--color-border);
670
+ padding: var(--spacing-2);
671
+ background-color: var(--color-vercel-background-1);
672
+ box-shadow: 0 4px 8px -4px rgb(0 0 0 / 0.04),
673
+ 0 16px 24px -8px rgb(0 0 0 / 0.06);
674
+ }
675
+ :root .rui-select__listbox .rui-listbox,
676
+ :root .rui-combobox__listbox .rui-listbox {
677
+ background-color: transparent;
678
+ padding: 0px;
679
+ }
680
+ :root .rui-listbox__option,
681
+ :root .rui-menu-button__item,
682
+ :root .rui-menubar__menu-item {
683
+ border-radius: var(--radius-control);
684
+ }
652
685
  :root rui-tabs[variant='boxed'] .rui-tabs__list {
653
686
  border-bottom-style: var(--tw-border-style);
654
687
  border-bottom-width: 1px;
@@ -665,8 +698,8 @@
665
698
  }
666
699
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
667
700
  background-color: transparent;
668
- --tw-font-weight: var(--font-weight-semibold);
669
- font-weight: var(--font-weight-semibold);
701
+ --tw-font-weight: var(--font-weight-medium);
702
+ font-weight: var(--font-weight-medium);
670
703
  color: var(--color-on-surface);
671
704
  border-bottom-color: var(--primary);
672
705
  }
@@ -674,12 +707,25 @@
674
707
  background-color: var(--color-surface);
675
708
  padding: var(--rui-tabs-panel-padding);
676
709
  }
677
- :root .rui-listbox__option:hover:not([aria-selected='true']):not([aria-disabled='true']):not([data-active]),
710
+ :root .rui-listbox__option:hover:not([aria-disabled='true']),
711
+ :root .rui-listbox__option[data-active]:not([aria-disabled='true']),
678
712
  :root .rui-menu-button__item:hover:not([aria-checked='true']):not([aria-disabled='true']),
679
713
  :root .rui-menubar__menu-item:hover:not([aria-expanded='true']):not([aria-disabled='true']) {
714
+ background-color: var(--color-vercel-component-1);
715
+ }
716
+ :root .rui-listbox__option[aria-selected='true']:not([aria-disabled='true']),
717
+ :root .rui-listbox__option[aria-selected='true']:focus-visible {
680
718
  background-color: var(--color-vercel-component-2);
719
+ background-image: none;
720
+ color: var(--color-vercel-text-primary);
681
721
  }
682
- :root .rui-table__header,
722
+ :root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
723
+ color: var(--color-vercel-text-primary);
724
+ }
725
+ :root .rui-listbox__option[aria-selected='true'][data-active]:not([aria-disabled='true']) {
726
+ --tw-ring-color: transparent;
727
+ }
728
+ :root .rui-table__column,
683
729
  :root .rui-treegrid__row--header {
684
730
  background-color: var(--color-surface-container-low);
685
731
  --tw-font-weight: var(--font-weight-medium);
@@ -691,15 +737,11 @@
691
737
  --tw-shadow: 0 0 #0000;
692
738
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
693
739
  }
694
- :root .rui-toast__content {
740
+ :root .rui-toast {
695
741
  border-radius: var(--radius-control);
696
- border-style: var(--tw-border-style);
697
- border-width: 1px;
698
- border-color: var(--color-border);
699
- background-color: var(--color-surface);
700
- color: var(--color-on-surface);
701
742
  --tw-shadow: 0 0 #0000;
702
743
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
744
+ background-image: none;
703
745
  }
704
746
  :root .rui-separator,
705
747
  :root .rui-sidebar__separator {