@ecopages/radiant-themes 0.2.0 → 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 (42) hide show
  1. package/README.md +37 -17
  2. package/dist/compiled/themes/cloudflare/compact.css +56 -14
  3. package/dist/compiled/themes/cloudflare.css +56 -14
  4. package/dist/compiled/themes/github/compact.css +310 -65
  5. package/dist/compiled/themes/github.css +310 -65
  6. package/dist/compiled/themes/high-contrast/compact.css +108 -11
  7. package/dist/compiled/themes/high-contrast.css +108 -11
  8. package/dist/compiled/themes/macos/compact.css +698 -272
  9. package/dist/compiled/themes/macos-classic/compact.css +455 -16
  10. package/dist/compiled/themes/macos-classic.css +455 -16
  11. package/dist/compiled/themes/macos.css +698 -272
  12. package/dist/compiled/themes/material/compact.css +461 -136
  13. package/dist/compiled/themes/material.css +461 -136
  14. package/dist/compiled/themes/vercel/compact.css +118 -66
  15. package/dist/compiled/themes/vercel.css +118 -66
  16. package/dist/compiled/themes/vscode/compact.css +310 -40
  17. package/dist/compiled/themes/vscode.css +310 -40
  18. package/dist/compiled/themes/windows95/compact.css +408 -22
  19. package/dist/compiled/themes/windows95.css +408 -22
  20. package/dist/foundation.css +13 -0
  21. package/dist/tokens/colors/cloudflare.css +1 -1
  22. package/dist/tokens/colors/github.css +32 -0
  23. package/dist/tokens/colors/macos.css +65 -25
  24. package/dist/tokens/colors/material.css +61 -20
  25. package/dist/tokens/colors/vercel.css +43 -39
  26. package/dist/tokens/colors/vscode.css +48 -4
  27. package/dist/tokens/colors/windows95.css +10 -5
  28. package/dist/tokens/components/cloudflare.css +63 -7
  29. package/dist/tokens/components/github.css +287 -39
  30. package/dist/tokens/components/high-contrast.css +106 -11
  31. package/dist/tokens/components/macos-classic.css +549 -15
  32. package/dist/tokens/components/macos.css +555 -96
  33. package/dist/tokens/components/material.css +360 -29
  34. package/dist/tokens/components/vercel.css +83 -19
  35. package/dist/tokens/components/vscode.css +280 -27
  36. package/dist/tokens/components/windows95.css +470 -18
  37. package/dist/tokens/roles/cloudflare.css +1 -1
  38. package/dist/tokens/roles/github.css +12 -12
  39. package/dist/tokens/roles/macos.css +97 -93
  40. package/dist/tokens/roles/material.css +65 -65
  41. package/dist/tokens/roles/vercel.css +3 -3
  42. 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);
@@ -250,6 +249,14 @@
250
249
  --radius-container: var(--border-radius-lg);
251
250
  --radius-pill: var(--border-radius-full);
252
251
  }
252
+ @layer components {
253
+ :root .rui-input-group .rui-input {
254
+ border-width: 0;
255
+ border-radius: 0;
256
+ background-color: transparent;
257
+ box-shadow: none;
258
+ }
259
+ }
253
260
  :where(:root) {
254
261
  color-scheme: light;
255
262
  }
@@ -259,15 +266,15 @@
259
266
  :where(:root), :root[data-rui-theme='vercel'] {
260
267
  --color-vercel-gray-50: #fafafa;
261
268
  --color-vercel-gray-100: #f2f2f2;
262
- --color-vercel-gray-200: #eaeaea;
263
- --color-vercel-gray-300: #e1e1e1;
264
- --color-vercel-gray-400: #c7c7c7;
265
- --color-vercel-gray-500: #a1a1a1;
266
- --color-vercel-gray-600: #666666;
267
- --color-vercel-gray-700: #444444;
268
- --color-vercel-gray-800: #333333;
269
- --color-vercel-gray-900: #111111;
270
- --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;
271
278
  --color-vercel-blue: #0070f3;
272
279
  --color-vercel-blue-light: #3291ff;
273
280
  --color-vercel-red: #ee0000;
@@ -278,29 +285,29 @@
278
285
  --color-vercel-pink: #ff0080;
279
286
  --color-vercel-background-1: #ffffff;
280
287
  --color-vercel-background-2: #fafafa;
281
- --color-vercel-component-1: #ffffff;
282
- --color-vercel-component-2: #fafafa;
283
- --color-vercel-component-3: #eaeaea;
284
- --color-vercel-border-4: #eaeaea;
285
- --color-vercel-border-5: #999999;
286
- --color-vercel-border-6: #666666;
287
- --color-vercel-high-contrast-1: #000000;
288
- --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;
289
296
  --color-vercel-text-secondary: #666666;
290
- --color-vercel-text-primary: #000000;
297
+ --color-vercel-text-primary: #171717;
291
298
  }
292
299
  :where(.dark), :root.dark[data-rui-theme='vercel'] {
293
300
  --color-vercel-gray-50: #1a1a1a;
294
- --color-vercel-gray-100: #222222;
295
- --color-vercel-gray-200: #2a2a2a;
296
- --color-vercel-gray-300: #333333;
297
- --color-vercel-gray-400: #444444;
298
- --color-vercel-gray-500: #666666;
299
- --color-vercel-gray-600: #888888;
300
- --color-vercel-gray-700: #999999;
301
- --color-vercel-gray-800: #cccccc;
302
- --color-vercel-gray-900: #eeeeee;
303
- --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;
304
311
  --color-vercel-blue: #3291ff;
305
312
  --color-vercel-blue-light: #52a8ff;
306
313
  --color-vercel-red: #ff1a1a;
@@ -309,18 +316,18 @@
309
316
  --color-vercel-teal: #50e3c2;
310
317
  --color-vercel-purple: #a76ad7;
311
318
  --color-vercel-pink: #ff0080;
312
- --color-vercel-background-1: #000000;
313
- --color-vercel-background-2: #111111;
314
- --color-vercel-component-1: #111111;
315
- --color-vercel-component-2: #1a1a1a;
316
- --color-vercel-component-3: #333333;
317
- --color-vercel-border-4: #333333;
318
- --color-vercel-border-5: #666666;
319
- --color-vercel-border-6: #888888;
320
- --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;
321
328
  --color-vercel-high-contrast-2: #cccccc;
322
- --color-vercel-text-secondary: #888888;
323
- --color-vercel-text-primary: #ffffff;
329
+ --color-vercel-text-secondary: #a1a1a1;
330
+ --color-vercel-text-primary: #ededed;
324
331
  }
325
332
  :where(:root), :root[data-rui-theme='vercel'] {
326
333
  --gray-50: var(--color-vercel-gray-50);
@@ -439,13 +446,13 @@
439
446
  --on-surface: var(--color-vercel-text-primary);
440
447
  --surface-container-lowest: var(--color-vercel-background-1);
441
448
  --on-surface-container-lowest: var(--color-vercel-text-primary);
442
- --surface-container-low: var(--color-vercel-component-2);
449
+ --surface-container-low: var(--color-vercel-background-2);
443
450
  --on-surface-container-low: var(--color-vercel-text-primary);
444
451
  --surface-container: var(--color-vercel-component-1);
445
452
  --on-surface-container: var(--color-vercel-text-primary);
446
- --surface-container-high: var(--color-vercel-component-3);
453
+ --surface-container-high: var(--color-vercel-component-2);
447
454
  --on-surface-container-high: var(--color-vercel-text-primary);
448
- --surface-container-highest: var(--color-vercel-border-4);
455
+ --surface-container-highest: var(--color-vercel-component-3);
449
456
  --on-surface-container-highest: var(--color-vercel-text-primary);
450
457
  --background: var(--color-vercel-background-2);
451
458
  --on-background: var(--color-vercel-text-primary);
@@ -527,9 +534,9 @@
527
534
  --on-background-code: var(--color-vercel-text-primary);
528
535
  }
529
536
  :where(:root), :root[data-rui-theme='vercel'] {
530
- --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
531
- --font-heading: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
532
- --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;
533
540
  --rui-border-alpha: 100%;
534
541
  --border-radius-xs: 0.125rem;
535
542
  --border-radius-sm: 0.25rem;
@@ -561,6 +568,7 @@
561
568
  font-weight: var(--font-weight-medium);
562
569
  --tw-shadow: 0 0 #0000;
563
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;
564
572
  }
565
573
  :root .rui-button--filled {
566
574
  background-color: var(--color-primary);
@@ -580,15 +588,21 @@
580
588
  }
581
589
  :root .rui-button--outline:hover:not(:disabled),
582
590
  :root .rui-button--ghost:hover:not(:disabled) {
583
- 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);
584
596
  }
585
597
  :root .rui-input,
586
598
  :root .rui-textarea,
587
599
  :root .rui-autocomplete__input,
588
- :root .rui-combobox__input,
589
- :root .rui-date-field__input,
590
- :root .rui-date-input__segment,
591
- :root .rui-number-field__input,
600
+ :root .rui-combobox__control,
601
+ :root .rui-date-field__group,
602
+ :root .rui-date-range-picker__group,
603
+ :root .rui-input-group,
604
+ :root .rui-number-field__group,
605
+ :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
592
606
  :root .rui-select__control {
593
607
  border-radius: var(--radius-control);
594
608
  border-style: var(--tw-border-style);
@@ -623,12 +637,7 @@
623
637
  border-color: var(--rui-control-border-color);
624
638
  }
625
639
  :root .rui-dialog__surface,
626
- :root .rui-popover-host,
627
640
  :root .rui-hover-card__content,
628
- :root .rui-menu-button__menu,
629
- :root .rui-menubar__menu,
630
- :root .rui-select__listbox,
631
- :root .rui-combobox__listbox,
632
641
  :root .rui-calendar,
633
642
  :root rui-tabs[variant='boxed'] {
634
643
  border-radius: var(--radius-container);
@@ -639,6 +648,40 @@
639
648
  --tw-shadow: var(--shadow-control);
640
649
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
641
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
+ }
642
685
  :root rui-tabs[variant='boxed'] .rui-tabs__list {
643
686
  border-bottom-style: var(--tw-border-style);
644
687
  border-bottom-width: 1px;
@@ -655,8 +698,8 @@
655
698
  }
656
699
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
657
700
  background-color: transparent;
658
- --tw-font-weight: var(--font-weight-semibold);
659
- font-weight: var(--font-weight-semibold);
701
+ --tw-font-weight: var(--font-weight-medium);
702
+ font-weight: var(--font-weight-medium);
660
703
  color: var(--color-on-surface);
661
704
  border-bottom-color: var(--primary);
662
705
  }
@@ -664,12 +707,25 @@
664
707
  background-color: var(--color-surface);
665
708
  padding: var(--rui-tabs-panel-padding);
666
709
  }
667
- :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']),
668
712
  :root .rui-menu-button__item:hover:not([aria-checked='true']):not([aria-disabled='true']),
669
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 {
670
718
  background-color: var(--color-vercel-component-2);
719
+ background-image: none;
720
+ color: var(--color-vercel-text-primary);
721
+ }
722
+ :root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
723
+ color: var(--color-vercel-text-primary);
671
724
  }
672
- :root .rui-table__header,
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,
673
729
  :root .rui-treegrid__row--header {
674
730
  background-color: var(--color-surface-container-low);
675
731
  --tw-font-weight: var(--font-weight-medium);
@@ -681,15 +737,11 @@
681
737
  --tw-shadow: 0 0 #0000;
682
738
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
683
739
  }
684
- :root .rui-toast__content {
740
+ :root .rui-toast {
685
741
  border-radius: var(--radius-control);
686
- border-style: var(--tw-border-style);
687
- border-width: 1px;
688
- border-color: var(--color-border);
689
- background-color: var(--color-surface);
690
- color: var(--color-on-surface);
691
742
  --tw-shadow: 0 0 #0000;
692
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;
693
745
  }
694
746
  :root .rui-separator,
695
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);
@@ -250,6 +249,14 @@
250
249
  --radius-container: var(--border-radius-lg);
251
250
  --radius-pill: var(--border-radius-full);
252
251
  }
252
+ @layer components {
253
+ :root .rui-input-group .rui-input {
254
+ border-width: 0;
255
+ border-radius: 0;
256
+ background-color: transparent;
257
+ box-shadow: none;
258
+ }
259
+ }
253
260
  :where(:root) {
254
261
  color-scheme: light;
255
262
  }
@@ -259,15 +266,15 @@
259
266
  :where(:root), :root[data-rui-theme='vercel'] {
260
267
  --color-vercel-gray-50: #fafafa;
261
268
  --color-vercel-gray-100: #f2f2f2;
262
- --color-vercel-gray-200: #eaeaea;
263
- --color-vercel-gray-300: #e1e1e1;
264
- --color-vercel-gray-400: #c7c7c7;
265
- --color-vercel-gray-500: #a1a1a1;
266
- --color-vercel-gray-600: #666666;
267
- --color-vercel-gray-700: #444444;
268
- --color-vercel-gray-800: #333333;
269
- --color-vercel-gray-900: #111111;
270
- --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;
271
278
  --color-vercel-blue: #0070f3;
272
279
  --color-vercel-blue-light: #3291ff;
273
280
  --color-vercel-red: #ee0000;
@@ -278,29 +285,29 @@
278
285
  --color-vercel-pink: #ff0080;
279
286
  --color-vercel-background-1: #ffffff;
280
287
  --color-vercel-background-2: #fafafa;
281
- --color-vercel-component-1: #ffffff;
282
- --color-vercel-component-2: #fafafa;
283
- --color-vercel-component-3: #eaeaea;
284
- --color-vercel-border-4: #eaeaea;
285
- --color-vercel-border-5: #999999;
286
- --color-vercel-border-6: #666666;
287
- --color-vercel-high-contrast-1: #000000;
288
- --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;
289
296
  --color-vercel-text-secondary: #666666;
290
- --color-vercel-text-primary: #000000;
297
+ --color-vercel-text-primary: #171717;
291
298
  }
292
299
  :where(.dark), :root.dark[data-rui-theme='vercel'] {
293
300
  --color-vercel-gray-50: #1a1a1a;
294
- --color-vercel-gray-100: #222222;
295
- --color-vercel-gray-200: #2a2a2a;
296
- --color-vercel-gray-300: #333333;
297
- --color-vercel-gray-400: #444444;
298
- --color-vercel-gray-500: #666666;
299
- --color-vercel-gray-600: #888888;
300
- --color-vercel-gray-700: #999999;
301
- --color-vercel-gray-800: #cccccc;
302
- --color-vercel-gray-900: #eeeeee;
303
- --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;
304
311
  --color-vercel-blue: #3291ff;
305
312
  --color-vercel-blue-light: #52a8ff;
306
313
  --color-vercel-red: #ff1a1a;
@@ -309,18 +316,18 @@
309
316
  --color-vercel-teal: #50e3c2;
310
317
  --color-vercel-purple: #a76ad7;
311
318
  --color-vercel-pink: #ff0080;
312
- --color-vercel-background-1: #000000;
313
- --color-vercel-background-2: #111111;
314
- --color-vercel-component-1: #111111;
315
- --color-vercel-component-2: #1a1a1a;
316
- --color-vercel-component-3: #333333;
317
- --color-vercel-border-4: #333333;
318
- --color-vercel-border-5: #666666;
319
- --color-vercel-border-6: #888888;
320
- --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;
321
328
  --color-vercel-high-contrast-2: #cccccc;
322
- --color-vercel-text-secondary: #888888;
323
- --color-vercel-text-primary: #ffffff;
329
+ --color-vercel-text-secondary: #a1a1a1;
330
+ --color-vercel-text-primary: #ededed;
324
331
  }
325
332
  :where(:root), :root[data-rui-theme='vercel'] {
326
333
  --gray-50: var(--color-vercel-gray-50);
@@ -439,13 +446,13 @@
439
446
  --on-surface: var(--color-vercel-text-primary);
440
447
  --surface-container-lowest: var(--color-vercel-background-1);
441
448
  --on-surface-container-lowest: var(--color-vercel-text-primary);
442
- --surface-container-low: var(--color-vercel-component-2);
449
+ --surface-container-low: var(--color-vercel-background-2);
443
450
  --on-surface-container-low: var(--color-vercel-text-primary);
444
451
  --surface-container: var(--color-vercel-component-1);
445
452
  --on-surface-container: var(--color-vercel-text-primary);
446
- --surface-container-high: var(--color-vercel-component-3);
453
+ --surface-container-high: var(--color-vercel-component-2);
447
454
  --on-surface-container-high: var(--color-vercel-text-primary);
448
- --surface-container-highest: var(--color-vercel-border-4);
455
+ --surface-container-highest: var(--color-vercel-component-3);
449
456
  --on-surface-container-highest: var(--color-vercel-text-primary);
450
457
  --background: var(--color-vercel-background-2);
451
458
  --on-background: var(--color-vercel-text-primary);
@@ -527,9 +534,9 @@
527
534
  --on-background-code: var(--color-vercel-text-primary);
528
535
  }
529
536
  :where(:root), :root[data-rui-theme='vercel'] {
530
- --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
531
- --font-heading: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
532
- --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;
533
540
  --rui-border-alpha: 100%;
534
541
  --border-radius-xs: 0.125rem;
535
542
  --border-radius-sm: 0.25rem;
@@ -561,6 +568,7 @@
561
568
  font-weight: var(--font-weight-medium);
562
569
  --tw-shadow: 0 0 #0000;
563
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;
564
572
  }
565
573
  :root .rui-button--filled {
566
574
  background-color: var(--color-primary);
@@ -580,15 +588,21 @@
580
588
  }
581
589
  :root .rui-button--outline:hover:not(:disabled),
582
590
  :root .rui-button--ghost:hover:not(:disabled) {
583
- 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);
584
596
  }
585
597
  :root .rui-input,
586
598
  :root .rui-textarea,
587
599
  :root .rui-autocomplete__input,
588
- :root .rui-combobox__input,
589
- :root .rui-date-field__input,
590
- :root .rui-date-input__segment,
591
- :root .rui-number-field__input,
600
+ :root .rui-combobox__control,
601
+ :root .rui-date-field__group,
602
+ :root .rui-date-range-picker__group,
603
+ :root .rui-input-group,
604
+ :root .rui-number-field__group,
605
+ :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
592
606
  :root .rui-select__control {
593
607
  border-radius: var(--radius-control);
594
608
  border-style: var(--tw-border-style);
@@ -623,12 +637,7 @@
623
637
  border-color: var(--rui-control-border-color);
624
638
  }
625
639
  :root .rui-dialog__surface,
626
- :root .rui-popover-host,
627
640
  :root .rui-hover-card__content,
628
- :root .rui-menu-button__menu,
629
- :root .rui-menubar__menu,
630
- :root .rui-select__listbox,
631
- :root .rui-combobox__listbox,
632
641
  :root .rui-calendar,
633
642
  :root rui-tabs[variant='boxed'] {
634
643
  border-radius: var(--radius-container);
@@ -639,6 +648,40 @@
639
648
  --tw-shadow: var(--shadow-control);
640
649
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
641
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
+ }
642
685
  :root rui-tabs[variant='boxed'] .rui-tabs__list {
643
686
  border-bottom-style: var(--tw-border-style);
644
687
  border-bottom-width: 1px;
@@ -655,8 +698,8 @@
655
698
  }
656
699
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
657
700
  background-color: transparent;
658
- --tw-font-weight: var(--font-weight-semibold);
659
- font-weight: var(--font-weight-semibold);
701
+ --tw-font-weight: var(--font-weight-medium);
702
+ font-weight: var(--font-weight-medium);
660
703
  color: var(--color-on-surface);
661
704
  border-bottom-color: var(--primary);
662
705
  }
@@ -664,12 +707,25 @@
664
707
  background-color: var(--color-surface);
665
708
  padding: var(--rui-tabs-panel-padding);
666
709
  }
667
- :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']),
668
712
  :root .rui-menu-button__item:hover:not([aria-checked='true']):not([aria-disabled='true']),
669
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 {
670
718
  background-color: var(--color-vercel-component-2);
719
+ background-image: none;
720
+ color: var(--color-vercel-text-primary);
721
+ }
722
+ :root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
723
+ color: var(--color-vercel-text-primary);
671
724
  }
672
- :root .rui-table__header,
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,
673
729
  :root .rui-treegrid__row--header {
674
730
  background-color: var(--color-surface-container-low);
675
731
  --tw-font-weight: var(--font-weight-medium);
@@ -681,15 +737,11 @@
681
737
  --tw-shadow: 0 0 #0000;
682
738
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
683
739
  }
684
- :root .rui-toast__content {
740
+ :root .rui-toast {
685
741
  border-radius: var(--radius-control);
686
- border-style: var(--tw-border-style);
687
- border-width: 1px;
688
- border-color: var(--color-border);
689
- background-color: var(--color-surface);
690
- color: var(--color-on-surface);
691
742
  --tw-shadow: 0 0 #0000;
692
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;
693
745
  }
694
746
  :root .rui-separator,
695
747
  :root .rui-sidebar__separator {