@ecopages/radiant-themes 0.2.1 → 0.2.3

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 +679 -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 +679 -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 +542 -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
@@ -28,18 +28,20 @@
28
28
  --font-weight-semibold: var(--weight-semibold);
29
29
  --opacity-disabled: var(--opacity-disabled);
30
30
  --opacity-muted: var(--opacity-muted);
31
- --color-info-container: var(--info-container);
32
- --color-on-info-container: var(--on-info-container);
31
+ --color-primary: var(--primary);
32
+ --color-primary-container: var(--primary-container);
33
+ --color-on-primary-container: var(--on-primary-container);
34
+ --color-error: var(--error);
33
35
  --color-surface: var(--surface);
34
36
  --color-on-surface: var(--on-surface);
35
37
  --color-surface-container-low: var(--surface-container-low);
36
- --color-on-surface-container-low: var(--on-surface-container-low);
37
38
  --color-border: var(--border);
38
39
  --spacing-2: var(--space-2);
39
40
  --spacing-3: var(--space-3);
40
41
  --spacing-control-x: var(--space-control-x);
41
42
  --radius-none: var(--border-radius-none);
42
43
  --radius-xs: var(--border-radius-xs);
44
+ --radius-xl: var(--border-radius-xl);
43
45
  --radius-control: var(--radius-control);
44
46
  --radius-container: var(--radius-container);
45
47
  --radius-pill: var(--radius-pill);
@@ -271,32 +273,60 @@
271
273
  --color-github-canvas: #ffffff;
272
274
  --color-github-subtle: #f6f8fa;
273
275
  --color-github-muted: #eaeef2;
276
+ --color-github-overlay: #ffffff;
274
277
  --color-github-border: #d1d9e0;
275
278
  --color-github-border-strong: #8c959f;
276
279
  --color-github-fg: #1f2328;
277
280
  --color-github-muted-fg: #59636e;
278
281
  --color-github-blue: #0969da;
279
282
  --color-github-blue-light: #54aeff;
283
+ --color-github-accent-subtle: #ddf4ff;
284
+ --color-github-accent-on-subtle: #0550ae;
280
285
  --color-github-green: #1a7f37;
281
286
  --color-github-red: #cf222e;
287
+ --color-github-danger-fg: #d1242f;
282
288
  --color-github-orange: #bc4c00;
283
289
  --color-github-purple: #8250df;
290
+ --color-github-button-bg: #f6f8fa;
291
+ --color-github-button-hover: #eff2f5;
292
+ --color-github-button-active: #e6eaef;
293
+ --color-github-button-primary: #1f883d;
294
+ --color-github-button-primary-hover: #1c8139;
295
+ --color-github-button-primary-active: #197935;
296
+ --color-github-transparent-hover: rgb(129 139 152 / 0.15);
297
+ --color-github-transparent-selected: rgb(129 139 152 / 0.2);
298
+ --color-github-track: #e6eaef;
299
+ --color-github-knob-border: #818b98;
284
300
  }
285
301
  :where(.dark), :root.dark[data-rui-theme='github'] {
286
302
  --color-github-white: #f0f6fc;
287
303
  --color-github-canvas: #0d1117;
288
304
  --color-github-subtle: #151b23;
289
305
  --color-github-muted: #212830;
306
+ --color-github-overlay: #151b23;
290
307
  --color-github-border: #3d444d;
291
308
  --color-github-border-strong: #6e7681;
292
309
  --color-github-fg: #f0f6fc;
293
310
  --color-github-muted-fg: #9198a1;
294
311
  --color-github-blue: #1f6feb;
295
312
  --color-github-blue-light: #4493f8;
313
+ --color-github-accent-subtle: #121d2f;
314
+ --color-github-accent-on-subtle: #4493f8;
296
315
  --color-github-green: #238636;
297
316
  --color-github-red: #da3633;
317
+ --color-github-danger-fg: #ff6a61;
298
318
  --color-github-orange: #db6d28;
299
319
  --color-github-purple: #a371f7;
320
+ --color-github-button-bg: #212830;
321
+ --color-github-button-hover: #262c36;
322
+ --color-github-button-active: #2a313c;
323
+ --color-github-button-primary: #238636;
324
+ --color-github-button-primary-hover: #1f7a31;
325
+ --color-github-button-primary-active: #1c6e2d;
326
+ --color-github-transparent-hover: rgb(101 108 118 / 0.2);
327
+ --color-github-transparent-selected: rgb(101 108 118 / 0.24);
328
+ --color-github-track: #2a313c;
329
+ --color-github-knob-border: #656c76;
300
330
  }
301
331
  :where(:root),
302
332
  :root[data-rui-theme='github'] {
@@ -341,24 +371,12 @@
341
371
  --gray-900: color-mix(in oklab, var(--color-github-canvas), var(--color-github-fg) 94%);
342
372
  }
343
373
  --gray-950: var(--color-github-fg);
344
- --primary: var(--color-github-green);
374
+ --primary: var(--color-github-blue);
345
375
  --on-primary: white;
346
- --primary-light: var(--color-github-green);
347
- @supports (color: color-mix(in lab, red, red)) {
348
- --primary-light: color-mix(in oklab, var(--color-github-green), white 12%);
349
- }
350
- --primary-dark: var(--color-github-green);
351
- @supports (color: color-mix(in lab, red, red)) {
352
- --primary-dark: color-mix(in oklab, var(--color-github-green), black 24%);
353
- }
354
- --primary-container: var(--color-github-green);
355
- @supports (color: color-mix(in lab, red, red)) {
356
- --primary-container: color-mix(in oklab, var(--color-github-green), white 90%);
357
- }
358
- --on-primary-container: var(--color-github-green);
359
- @supports (color: color-mix(in lab, red, red)) {
360
- --on-primary-container: color-mix(in oklab, var(--color-github-green), black 60%);
361
- }
376
+ --primary-light: var(--color-github-blue-light);
377
+ --primary-dark: #0550ae;
378
+ --primary-container: var(--color-github-accent-subtle);
379
+ --on-primary-container: var(--color-github-accent-on-subtle);
362
380
  --secondary: var(--color-github-subtle);
363
381
  --on-secondary: var(--color-github-fg);
364
382
  --secondary-light: var(--color-github-white);
@@ -445,7 +463,7 @@
445
463
  --on-warning-container: color-mix(in oklab, var(--color-github-orange), black 60%);
446
464
  }
447
465
  --neutral: var(--color-github-muted-fg);
448
- --surface: var(--color-github-subtle);
466
+ --surface: var(--color-github-canvas);
449
467
  --on-surface: var(--color-github-fg);
450
468
  --surface-container-lowest: var(--color-github-canvas);
451
469
  --on-surface-container-lowest: var(--color-github-fg);
@@ -521,12 +539,12 @@
521
539
  --gray-900: color-mix(in oklab, var(--color-github-canvas), white 6%);
522
540
  }
523
541
  --gray-950: var(--color-github-canvas);
524
- --primary: var(--color-github-green);
542
+ --primary: var(--color-github-blue);
525
543
  --on-primary: white;
526
- --primary-light: #238636;
527
- --primary-dark: #116329;
528
- --primary-container: #0f3d1e;
529
- --on-primary-container: #aff5b4;
544
+ --primary-light: var(--color-github-blue-light);
545
+ --primary-dark: #1158c7;
546
+ --primary-container: var(--color-github-accent-subtle);
547
+ --on-primary-container: var(--color-github-accent-on-subtle);
530
548
  --secondary: var(--color-github-muted);
531
549
  --on-secondary: var(--color-github-fg);
532
550
  --secondary-light: var(--color-github-border);
@@ -554,7 +572,7 @@
554
572
  --warning-container: #4d2d00;
555
573
  --on-warning-container: #ffdf8b;
556
574
  --neutral: var(--color-github-muted-fg);
557
- --surface: var(--color-github-subtle);
575
+ --surface: var(--color-github-canvas);
558
576
  --on-surface: var(--color-github-fg);
559
577
  --surface-container-lowest: var(--color-github-canvas);
560
578
  --on-surface-container-lowest: var(--color-github-fg);
@@ -589,37 +607,60 @@
589
607
  }
590
608
  :root,
591
609
  :root[data-rui-theme='github'] {
592
- --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
593
- --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
594
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
610
+ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
611
+ --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
612
+ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
595
613
  --rui-border-alpha: 100%;
596
- --border-radius-xs: 0.25rem;
614
+ --border-radius-xs: 0.1875rem;
597
615
  --border-radius-sm: 0.375rem;
598
- --border-radius-md: 0.5rem;
616
+ --border-radius-md: 0.375rem;
599
617
  --border-radius-lg: 0.75rem;
600
- --border-radius-xl: 1rem;
601
- --border-radius-2xl: 1.25rem;
618
+ --border-radius-xl: 0.75rem;
619
+ --border-radius-2xl: 1rem;
602
620
  --border-radius-3xl: 1.5rem;
603
621
  --radius-control: var(--border-radius-sm);
604
622
  --radius-container: var(--border-radius-md);
623
+ --size-control-sm: 1.75rem;
624
+ --size-control-md: 2rem;
625
+ --size-control-lg: 2.5rem;
605
626
  }
606
627
  @layer components {
607
- :root.dark .rui-button--destructive {
608
- background-color: #da3633;
609
- color: #ffffff;
610
- }
611
- :root.dark .rui-button--destructive:hover:not(:disabled) {
612
- background-color: #b62324;
613
- }
614
- :root.dark .rui-button--destructive:active:not(:disabled) {
615
- background-color: #a40e26;
616
- }
617
628
  :root rui-tabs {
618
629
  --rui-tabs-indicator-color: #fd8c73;
619
630
  }
620
631
  :root.dark rui-tabs {
621
632
  --rui-tabs-indicator-color: #f78166;
622
633
  }
634
+ :root .rui-meter {
635
+ --rui-meter-fill-color: var(--color-github-green);
636
+ }
637
+ :root .rui-switch {
638
+ --rui-switch-width: 3rem;
639
+ --rui-switch-height: 1.5rem;
640
+ --rui-switch-thumb-size: 1.5rem;
641
+ --rui-switch-track: var(--color-github-track);
642
+ --rui-switch-track-hover: var(--color-github-button-active);
643
+ --rui-switch-track-on-hover: var(--primary-dark);
644
+ --rui-switch-thumb: var(--color-github-canvas);
645
+ --rui-switch-thumb-on: var(--color-github-canvas);
646
+ }
647
+ :root .rui-switch__track {
648
+ border-radius: var(--radius-control);
649
+ padding: 0px;
650
+ }
651
+ :root .rui-switch__thumb,
652
+ :root .rui-switch__input:checked + .rui-switch__track .rui-switch__thumb {
653
+ border-radius: var(--radius-control);
654
+ border: 1px solid var(--color-github-knob-border);
655
+ }
656
+ :root .rui-switch__thumb {
657
+ left: 0;
658
+ }
659
+ :root .rui-switch__input:checked + .rui-switch__track .rui-switch__thumb {
660
+ right: 0;
661
+ left: auto;
662
+ border-color: var(--primary);
663
+ }
623
664
  :root .rui-button {
624
665
  border-radius: var(--radius-control);
625
666
  border-style: var(--tw-border-style);
@@ -630,8 +671,66 @@
630
671
  --tw-shadow: 0 0 #0000;
631
672
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
632
673
  }
633
- :root .rui-button--outline,
634
- :root .rui-input,
674
+ :root .rui-button--outline {
675
+ border-color: var(--color-github-border);
676
+ background-color: var(--color-github-button-bg);
677
+ color: var(--color-github-fg);
678
+ box-shadow: 0 1px 0 0 rgb(31 35 40 / 0.04);
679
+ }
680
+ :root .rui-button--outline:hover:not(:disabled) {
681
+ background-color: var(--color-github-button-hover);
682
+ }
683
+ :root .rui-button--outline:active:not(:disabled) {
684
+ background-color: var(--color-github-button-active);
685
+ }
686
+ :root .rui-button--filled,
687
+ :root .rui-button--primary {
688
+ border-color: rgb(31 35 40 / 0.15);
689
+ background-color: var(--color-github-button-primary);
690
+ background-image: none;
691
+ color: #ffffff;
692
+ box-shadow: 0 1px 0 0 rgb(31 35 40 / 0.1);
693
+ }
694
+ :root .rui-button--filled:hover:not(:disabled),
695
+ :root .rui-button--primary:hover:not(:disabled) {
696
+ background-color: var(--color-github-button-primary-hover);
697
+ }
698
+ :root .rui-button--filled:active:not(:disabled),
699
+ :root .rui-button--primary:active:not(:disabled) {
700
+ background-color: var(--color-github-button-primary-active);
701
+ }
702
+ :root .rui-button--destructive {
703
+ border-color: var(--color-github-border);
704
+ background-color: var(--color-github-button-bg);
705
+ background-image: none;
706
+ color: var(--color-github-danger-fg);
707
+ }
708
+ :root .rui-button--destructive:hover:not(:disabled) {
709
+ border-color: rgb(31 35 40 / 0.15);
710
+ background-color: #a40e26;
711
+ color: #ffffff;
712
+ }
713
+ :root .rui-button--destructive:active:not(:disabled) {
714
+ background-color: #8b0820;
715
+ color: #ffffff;
716
+ }
717
+ :root .rui-button--ghost {
718
+ color: var(--color-github-fg);
719
+ }
720
+ :root .rui-button--ghost:hover:not(:disabled) {
721
+ background-color: var(--color-github-transparent-hover);
722
+ }
723
+ :root .rui-button--ghost:active:not(:disabled) {
724
+ background-color: var(--color-github-transparent-selected);
725
+ }
726
+ :root .rui-pagination__link[aria-current='page'],
727
+ :root .rui-pagination__link[aria-current='page']:hover:not(:disabled) {
728
+ border-color: transparent;
729
+ background-color: var(--primary);
730
+ color: var(--on-primary);
731
+ box-shadow: none;
732
+ }
733
+ :root .rui-input,
635
734
  :root .rui-textarea,
636
735
  :root .rui-combobox__control,
637
736
  :root .rui-date-field__group,
@@ -640,34 +739,107 @@
640
739
  :root .rui-number-field__group,
641
740
  :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
642
741
  :root .rui-select__control {
643
- border-color: var(--color-border);
644
742
  background-color: var(--color-surface);
645
743
  color: var(--color-on-surface);
646
744
  --tw-shadow: 0 0 #0000;
647
745
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
648
746
  border-color: var(--rui-control-border-color);
649
747
  }
650
- :root .rui-button--outline:hover:not(:disabled),
651
- :root .rui-button--ghost:hover:not(:disabled) {
652
- background-color: var(--color-surface-container-low);
748
+ :root .rui-select__control {
749
+ background-color: var(--color-github-button-bg);
750
+ }
751
+ :root .rui-select__control:hover:not(:disabled) {
752
+ background-color: var(--color-github-button-hover);
653
753
  }
654
754
  :root .rui-checkbox__control {
655
755
  border-radius: var(--radius-xs);
656
- border-color: var(--color-border);
657
756
  background-color: var(--color-surface);
658
757
  border-color: var(--rui-control-border-color);
659
758
  }
759
+ :root .rui-radio__control {
760
+ border-color: var(--rui-control-border-color);
761
+ }
762
+ :root .rui-radio__input:checked + .rui-radio__control {
763
+ border-width: 0.3125rem;
764
+ background-color: var(--on-primary);
765
+ }
766
+ :root .rui-radio__input:checked + .rui-radio__control::after {
767
+ display: none;
768
+ }
660
769
  :root .rui-dialog__surface,
661
- :root .rui-popover-host,
662
- :root .rui-select__listbox,
770
+ :root .rui-hover-card__content,
663
771
  :root .rui-calendar {
664
- border-radius: var(--radius-container);
772
+ border-radius: var(--radius-xl);
665
773
  border-style: var(--tw-border-style);
666
774
  border-width: 1px;
667
775
  border-color: var(--color-border);
668
- background-color: var(--color-surface);
669
776
  --tw-shadow: var(--shadow-overlay);
670
777
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
778
+ background-color: var(--color-github-overlay);
779
+ }
780
+ :root .rui-popover {
781
+ --rui-popover-radius: var(--border-radius-lg);
782
+ --rui-popover-surface: var(--color-github-overlay);
783
+ --rui-popover-border-color: var(--color-github-border);
784
+ --rui-popover-shadow: 0 6px 12px -3px rgb(37 41 46 / 0.04), 0 6px 18px 0 rgb(37 41 46 / 0.12);
785
+ }
786
+ :root .rui-tooltip__content {
787
+ --rui-tooltip-surface: #25292e;
788
+ --rui-tooltip-color: #ffffff;
789
+ --rui-tooltip-radius: var(--border-radius-sm);
790
+ --rui-tooltip-padding-x: 0.5rem;
791
+ --rui-tooltip-padding-y: 0.25rem;
792
+ }
793
+ :root.dark .rui-tooltip__content {
794
+ --rui-tooltip-surface: #3d444d;
795
+ }
796
+ :root .rui-select__listbox .rui-listbox,
797
+ :root .rui-combobox__listbox .rui-listbox {
798
+ background-color: transparent;
799
+ padding: 0px;
800
+ }
801
+ :root .rui-menu-button__menu,
802
+ :root .rui-menubar__menu,
803
+ :root .rui-select__listbox,
804
+ :root .rui-combobox__listbox {
805
+ border-radius: var(--radius-xl);
806
+ border-style: var(--tw-border-style);
807
+ border-width: 0px;
808
+ padding: var(--spacing-2);
809
+ background-color: var(--color-github-overlay);
810
+ box-shadow: 0 0 0 1px var(--color-github-border),
811
+ 0 6px 12px -3px rgb(37 41 46 / 0.04),
812
+ 0 6px 18px 0 rgb(37 41 46 / 0.12);
813
+ }
814
+ :root .rui-listbox__option,
815
+ :root .rui-menu-button__item,
816
+ :root .rui-menubar__menu-item {
817
+ border-radius: var(--radius-control);
818
+ }
819
+ :root .rui-listbox__option:hover:not([aria-disabled='true']),
820
+ :root .rui-listbox__option[data-active]:not([aria-disabled='true']),
821
+ :root .rui-menu-button__item:hover:not([aria-disabled='true']),
822
+ :root .rui-menubar__menu-item:hover:not([aria-disabled='true']) {
823
+ background-color: var(--color-github-transparent-hover);
824
+ }
825
+ :root .rui-listbox__option[aria-selected='true']:not([aria-disabled='true']),
826
+ :root .rui-listbox__option[aria-selected='true']:focus-visible,
827
+ :root .rui-menu-button__item[aria-checked='true'],
828
+ :root .rui-sidebar__menu-button[aria-current='page'],
829
+ :root .rui-sidebar__menu-button--active,
830
+ :root .rui-tree__node[aria-selected='true'] {
831
+ border-radius: var(--radius-control);
832
+ --tw-font-weight: var(--font-weight-semibold);
833
+ font-weight: var(--font-weight-semibold);
834
+ background-color: var(--color-github-transparent-selected);
835
+ background-image: none;
836
+ color: var(--color-github-fg);
837
+ }
838
+ :root .rui-listbox__option[aria-selected='true'] .rui-listbox__option-indicator {
839
+ color: var(--color-github-fg);
840
+ }
841
+ :root .rui-listbox__option[aria-selected='true'][data-active]:not([aria-disabled='true']) {
842
+ --tw-ring-color: transparent;
671
843
  }
672
844
  :root rui-tabs[variant='boxed'] {
673
845
  overflow: visible;
@@ -689,7 +861,10 @@
689
861
  }
690
862
  :root rui-tabs[variant='boxed'] .rui-tabs__tab {
691
863
  border-radius: var(--radius-none);
692
- color: var(--color-on-surface-container-low);
864
+ font-size: var(--text-sm);
865
+ line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
866
+ color: var(--color-on-surface);
867
+ opacity: 100%;
693
868
  }
694
869
  :root rui-tabs[variant='boxed'] .rui-tabs__tab[aria-selected='true'] {
695
870
  --tw-font-weight: var(--font-weight-semibold);
@@ -706,18 +881,40 @@
706
881
  border-color: var(--color-border);
707
882
  background-color: var(--color-surface);
708
883
  }
709
- :root .rui-listbox__option[aria-selected='true'],
710
- :root .rui-menu-button__item[aria-checked='true'],
711
- :root .rui-sidebar__menu-button--active {
712
- border-radius: var(--radius-control);
713
- background-color: var(--color-info-container);
714
- color: var(--color-on-info-container);
884
+ :root .rui-badge {
885
+ border-radius: var(--radius-pill);
886
+ border-style: var(--tw-border-style);
887
+ border-width: 1px;
888
+ border-color: var(--color-border);
889
+ --tw-font-weight: var(--font-weight-medium);
890
+ font-weight: var(--font-weight-medium);
891
+ }
892
+ :root .rui-badge--filled {
893
+ border-color: var(--color-primary);
894
+ background-color: transparent;
895
+ color: var(--color-primary);
896
+ }
897
+ :root .rui-badge--destructive {
898
+ border-color: var(--color-error);
899
+ background-color: transparent;
900
+ color: var(--color-github-danger-fg);
901
+ }
902
+ :root .rui-badge--muted {
903
+ background-color: transparent;
904
+ color: var(--color-github-muted-fg);
715
905
  }
716
- :root .rui-badge,
717
- :root .rui-chip,
718
- :root .rui-pagination__link {
906
+ :root .rui-chip {
719
907
  border-radius: var(--radius-pill);
720
908
  }
909
+ :root .rui-feed__article {
910
+ border-radius: var(--radius-container);
911
+ border-style: var(--tw-border-style);
912
+ border-width: 1px;
913
+ border-color: var(--color-border);
914
+ background-color: var(--color-surface);
915
+ --tw-shadow: 0 0 #0000;
916
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
917
+ }
721
918
  :root .rui-treegrid {
722
919
  border-radius: var(--radius-container);
723
920
  border-style: var(--tw-border-style);
@@ -748,8 +945,8 @@
748
945
  background-color: var(--color-surface-container-low);
749
946
  }
750
947
  :root .rui-treegrid__cell[aria-selected='true'] {
751
- background-color: var(--color-info-container);
752
- color: var(--color-on-info-container);
948
+ background-color: var(--color-primary-container);
949
+ color: var(--color-on-primary-container);
753
950
  }
754
951
  }
755
952
  @property --tw-border-style {
@@ -32,6 +32,7 @@
32
32
  --color-background: var(--background);
33
33
  --color-on-background: var(--on-background);
34
34
  --radius-none: var(--border-radius-none);
35
+ --radius-full: var(--border-radius-full);
35
36
  --radius-control: var(--radius-control);
36
37
  --radius-container: var(--radius-container);
37
38
  --radius-pill: var(--radius-pill);
@@ -476,6 +477,24 @@
476
477
  --focus-ring-width: 3px;
477
478
  --focus-ring-offset: 3px;
478
479
  --opacity-disabled: 1;
480
+ --opacity-muted: 0.75;
481
+ --radius-pill: 0;
482
+ --sheen-image: none;
483
+ --shadow-control: none;
484
+ --shadow-overlay: none;
485
+ --shadow-modal: none;
486
+ }
487
+ :root rui-tooltip {
488
+ --rui-tooltip-surface: var(--background);
489
+ --rui-tooltip-color: var(--on-background);
490
+ }
491
+ :root rui-tabs {
492
+ --rui-tabs-indicator-width: 3px;
493
+ }
494
+ :root rui-slider {
495
+ --rui-slider-thumb-background: var(--background);
496
+ --rui-slider-thumb-border-color: var(--on-background);
497
+ --rui-slider-focus-ring-width: 3px;
479
498
  }
480
499
  @layer components {
481
500
  :root .rui-button {
@@ -532,22 +551,84 @@
532
551
  border-color: var(--color-on-background);
533
552
  background-color: var(--color-background);
534
553
  }
554
+ :root .rui-radio__control {
555
+ border-radius: var(--radius-full);
556
+ }
535
557
  :root .rui-switch__thumb {
536
558
  border-radius: var(--radius-none);
537
559
  }
538
560
  :root .rui-checkbox__input:checked + .rui-checkbox__control,
539
- :root .rui-radio__input:checked + .rui-radio__control,
540
561
  :root .rui-switch__input:checked + .rui-switch__track {
541
562
  border-style: var(--tw-border-style);
542
563
  border-width: 2px;
543
564
  border-color: var(--color-primary);
544
565
  background-color: var(--color-primary);
545
566
  }
567
+ :root .rui-radio__input:checked + .rui-radio__control {
568
+ border-style: var(--tw-border-style);
569
+ border-width: 2px;
570
+ border-color: var(--color-primary);
571
+ background-color: var(--color-background);
572
+ }
573
+ :root .rui-radio__input:checked + .rui-radio__control::after {
574
+ width: calc(var(--spacing, 0.25rem) * 2.5);
575
+ height: calc(var(--spacing, 0.25rem) * 2.5);
576
+ background-color: var(--color-primary);
577
+ }
578
+ :root .rui-switch__thumb {
579
+ border-style: var(--tw-border-style);
580
+ border-width: 2px;
581
+ border-color: var(--color-on-background);
582
+ }
583
+ :root .rui-switch__input:checked + .rui-switch__track .rui-switch__thumb {
584
+ border-color: var(--color-on-primary);
585
+ }
586
+ :root .rui-input::placeholder,
587
+ :root .rui-textarea::placeholder {
588
+ color: var(--on-background);
589
+ opacity: var(--opacity-muted);
590
+ }
591
+ :root .rui-toc__label,
592
+ :root .rui-toc__link,
593
+ :root .rui-breadcrumb__separator,
594
+ :root .rui-breadcrumb__ellipsis {
595
+ color: var(--on-background);
596
+ }
597
+ :root .rui-toc__link--active {
598
+ --tw-font-weight: var(--font-weight-bold, 700);
599
+ font-weight: var(--font-weight-bold, 700);
600
+ text-decoration-line: underline;
601
+ text-decoration-thickness: 2px;
602
+ text-underline-offset: 4px;
603
+ color: var(--primary);
604
+ }
605
+ :root rui-tabs[variant='boxed'] .rui-tabs__tab:not([aria-selected='true']) {
606
+ opacity: 1;
607
+ }
608
+ :root .rui-popover {
609
+ --rui-popover-radius: 0;
610
+ --rui-popover-surface: var(--background);
611
+ --rui-popover-border-color: var(--on-background);
612
+ border-width: 2px;
613
+ color: var(--on-background);
614
+ }
615
+ :root .rui-tooltip__content {
616
+ border-style: var(--tw-border-style);
617
+ border-width: 2px;
618
+ border-color: var(--color-on-background);
619
+ }
620
+ :root .rui-avatar {
621
+ --rui-avatar-radius: 9999px;
622
+ border-style: var(--tw-border-style);
623
+ border-width: 2px;
624
+ border-color: var(--color-on-background);
625
+ }
546
626
  :root .rui-listbox__option[aria-selected='true'],
547
627
  :root .rui-menu-button__item[aria-checked='true'],
548
628
  :root .rui-menubar__menu-item[aria-checked='true'],
549
629
  :root .rui-tree__node[aria-selected='true'],
550
- :root .rui-calendar__day[aria-selected='true'] {
630
+ :root .rui-calendar__day[aria-selected='true'],
631
+ :root .rui-sidebar__menu-button[aria-current='page'] {
551
632
  border-style: var(--tw-border-style);
552
633
  border-width: 2px;
553
634
  border-color: var(--color-primary);
@@ -566,10 +647,11 @@
566
647
  text-underline-offset: 4px;
567
648
  }
568
649
  :root .rui-alert,
569
- :root .rui-toast__content,
650
+ :root .rui-toast,
570
651
  :root .rui-dialog__surface,
571
- :root .rui-popover-host,
572
652
  :root .rui-hover-card__content,
653
+ :root .rui-menu-button__menu,
654
+ :root .rui-menubar__menu,
573
655
  :root .rui-calendar,
574
656
  :root rui-tabs[variant='boxed'] {
575
657
  border-radius: var(--radius-none);
@@ -583,6 +665,7 @@
583
665
  }
584
666
  :root .rui-badge,
585
667
  :root .rui-chip,
668
+ :root .rui-tag,
586
669
  :root .rui-separator,
587
670
  :root .rui-meter__track,
588
671
  :root .rui-slider__range-track,
@@ -591,7 +674,7 @@
591
674
  border-width: 1px;
592
675
  border-color: var(--color-on-background);
593
676
  }
594
- :root .rui-table__header,
677
+ :root .rui-table__column,
595
678
  :root .rui-treegrid__row--header,
596
679
  :root .rui-calendar__weekdays {
597
680
  border-bottom-style: var(--tw-border-style);