@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/high-contrast/compact.css CHANGED
@@ -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);
@@ -244,6 +245,14 @@
244
245
  --radius-container: var(--border-radius-lg);
245
246
  --radius-pill: var(--border-radius-full);
246
247
  }
248
+ @layer components {
249
+ :root .rui-input-group .rui-input {
250
+ border-width: 0;
251
+ border-radius: 0;
252
+ background-color: transparent;
253
+ box-shadow: none;
254
+ }
255
+ }
247
256
  :where(:root) {
248
257
  color-scheme: light;
249
258
  }
@@ -450,7 +459,8 @@
450
459
  --background-code: #000000;
451
460
  --on-background-code: #ffffff;
452
461
  }
453
- :root, :root[data-rui-theme='high-contrast'] {
462
+ :root,
463
+ :root[data-rui-theme='high-contrast'] {
454
464
  --font-sans: ui-sans-serif, system-ui, sans-serif;
455
465
  --font-heading: var(--font-sans);
456
466
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -467,6 +477,24 @@
467
477
  --focus-ring-width: 3px;
468
478
  --focus-ring-offset: 3px;
469
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;
470
498
  }
471
499
  @layer components {
472
500
  :root .rui-button {
@@ -500,10 +528,12 @@
500
528
  :root .rui-input,
501
529
  :root .rui-textarea,
502
530
  :root .rui-autocomplete__input,
503
- :root .rui-combobox__input,
504
- :root .rui-date-field__input,
505
- :root .rui-date-input__segment,
506
- :root .rui-number-field__input,
531
+ :root .rui-combobox__control,
532
+ :root .rui-date-field__group,
533
+ :root .rui-date-range-picker__group,
534
+ :root .rui-input-group,
535
+ :root .rui-number-field__group,
536
+ :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
507
537
  :root .rui-select__control {
508
538
  border-radius: var(--radius-none);
509
539
  border-style: var(--tw-border-style);
@@ -521,19 +551,84 @@
521
551
  border-color: var(--color-on-background);
522
552
  background-color: var(--color-background);
523
553
  }
554
+ :root .rui-radio__control {
555
+ border-radius: var(--radius-full);
556
+ }
557
+ :root .rui-switch__thumb {
558
+ border-radius: var(--radius-none);
559
+ }
524
560
  :root .rui-checkbox__input:checked + .rui-checkbox__control,
525
- :root .rui-radio__input:checked + .rui-radio__control,
526
561
  :root .rui-switch__input:checked + .rui-switch__track {
527
562
  border-style: var(--tw-border-style);
528
563
  border-width: 2px;
529
564
  border-color: var(--color-primary);
530
565
  background-color: var(--color-primary);
531
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
+ }
532
626
  :root .rui-listbox__option[aria-selected='true'],
533
627
  :root .rui-menu-button__item[aria-checked='true'],
534
628
  :root .rui-menubar__menu-item[aria-checked='true'],
535
629
  :root .rui-tree__node[aria-selected='true'],
536
- :root .rui-calendar__day[aria-selected='true'] {
630
+ :root .rui-calendar__day[aria-selected='true'],
631
+ :root .rui-sidebar__menu-button[aria-current='page'] {
537
632
  border-style: var(--tw-border-style);
538
633
  border-width: 2px;
539
634
  border-color: var(--color-primary);
@@ -552,12 +647,13 @@
552
647
  text-underline-offset: 4px;
553
648
  }
554
649
  :root .rui-alert,
555
- :root .rui-toast__content,
650
+ :root .rui-toast,
556
651
  :root .rui-dialog__surface,
557
- :root .rui-popover-host,
558
652
  :root .rui-hover-card__content,
653
+ :root .rui-menu-button__menu,
654
+ :root .rui-menubar__menu,
559
655
  :root .rui-calendar,
560
- :root rui-tabs[variant='boxed'] {
656
+ :root rui-tabs[variant='boxed'] {
561
657
  border-radius: var(--radius-none);
562
658
  border-style: var(--tw-border-style);
563
659
  border-width: 2px;
@@ -569,6 +665,7 @@
569
665
  }
570
666
  :root .rui-badge,
571
667
  :root .rui-chip,
668
+ :root .rui-tag,
572
669
  :root .rui-separator,
573
670
  :root .rui-meter__track,
574
671
  :root .rui-slider__range-track,
@@ -577,7 +674,7 @@
577
674
  border-width: 1px;
578
675
  border-color: var(--color-on-background);
579
676
  }
580
- :root .rui-table__header,
677
+ :root .rui-table__column,
581
678
  :root .rui-treegrid__row--header,
582
679
  :root .rui-calendar__weekdays {
583
680
  border-bottom-style: var(--tw-border-style);
package/dist/compiled/themes/high-contrast.css CHANGED
@@ -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);
@@ -244,6 +245,14 @@
244
245
  --radius-container: var(--border-radius-lg);
245
246
  --radius-pill: var(--border-radius-full);
246
247
  }
248
+ @layer components {
249
+ :root .rui-input-group .rui-input {
250
+ border-width: 0;
251
+ border-radius: 0;
252
+ background-color: transparent;
253
+ box-shadow: none;
254
+ }
255
+ }
247
256
  :where(:root) {
248
257
  color-scheme: light;
249
258
  }
@@ -450,7 +459,8 @@
450
459
  --background-code: #000000;
451
460
  --on-background-code: #ffffff;
452
461
  }
453
- :root, :root[data-rui-theme='high-contrast'] {
462
+ :root,
463
+ :root[data-rui-theme='high-contrast'] {
454
464
  --font-sans: ui-sans-serif, system-ui, sans-serif;
455
465
  --font-heading: var(--font-sans);
456
466
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
@@ -467,6 +477,24 @@
467
477
  --focus-ring-width: 3px;
468
478
  --focus-ring-offset: 3px;
469
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;
470
498
  }
471
499
  @layer components {
472
500
  :root .rui-button {
@@ -500,10 +528,12 @@
500
528
  :root .rui-input,
501
529
  :root .rui-textarea,
502
530
  :root .rui-autocomplete__input,
503
- :root .rui-combobox__input,
504
- :root .rui-date-field__input,
505
- :root .rui-date-input__segment,
506
- :root .rui-number-field__input,
531
+ :root .rui-combobox__control,
532
+ :root .rui-date-field__group,
533
+ :root .rui-date-range-picker__group,
534
+ :root .rui-input-group,
535
+ :root .rui-number-field__group,
536
+ :root rui-date-input:where(:not([data-date-field-input], [data-range-start], [data-range-end])),
507
537
  :root .rui-select__control {
508
538
  border-radius: var(--radius-none);
509
539
  border-style: var(--tw-border-style);
@@ -521,19 +551,84 @@
521
551
  border-color: var(--color-on-background);
522
552
  background-color: var(--color-background);
523
553
  }
554
+ :root .rui-radio__control {
555
+ border-radius: var(--radius-full);
556
+ }
557
+ :root .rui-switch__thumb {
558
+ border-radius: var(--radius-none);
559
+ }
524
560
  :root .rui-checkbox__input:checked + .rui-checkbox__control,
525
- :root .rui-radio__input:checked + .rui-radio__control,
526
561
  :root .rui-switch__input:checked + .rui-switch__track {
527
562
  border-style: var(--tw-border-style);
528
563
  border-width: 2px;
529
564
  border-color: var(--color-primary);
530
565
  background-color: var(--color-primary);
531
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
+ }
532
626
  :root .rui-listbox__option[aria-selected='true'],
533
627
  :root .rui-menu-button__item[aria-checked='true'],
534
628
  :root .rui-menubar__menu-item[aria-checked='true'],
535
629
  :root .rui-tree__node[aria-selected='true'],
536
- :root .rui-calendar__day[aria-selected='true'] {
630
+ :root .rui-calendar__day[aria-selected='true'],
631
+ :root .rui-sidebar__menu-button[aria-current='page'] {
537
632
  border-style: var(--tw-border-style);
538
633
  border-width: 2px;
539
634
  border-color: var(--color-primary);
@@ -552,12 +647,13 @@
552
647
  text-underline-offset: 4px;
553
648
  }
554
649
  :root .rui-alert,
555
- :root .rui-toast__content,
650
+ :root .rui-toast,
556
651
  :root .rui-dialog__surface,
557
- :root .rui-popover-host,
558
652
  :root .rui-hover-card__content,
653
+ :root .rui-menu-button__menu,
654
+ :root .rui-menubar__menu,
559
655
  :root .rui-calendar,
560
- :root rui-tabs[variant='boxed'] {
656
+ :root rui-tabs[variant='boxed'] {
561
657
  border-radius: var(--radius-none);
562
658
  border-style: var(--tw-border-style);
563
659
  border-width: 2px;
@@ -569,6 +665,7 @@
569
665
  }
570
666
  :root .rui-badge,
571
667
  :root .rui-chip,
668
+ :root .rui-tag,
572
669
  :root .rui-separator,
573
670
  :root .rui-meter__track,
574
671
  :root .rui-slider__range-track,
@@ -577,7 +674,7 @@
577
674
  border-width: 1px;
578
675
  border-color: var(--color-on-background);
579
676
  }
580
- :root .rui-table__header,
677
+ :root .rui-table__column,
581
678
  :root .rui-treegrid__row--header,
582
679
  :root .rui-calendar__weekdays {
583
680
  border-bottom-style: var(--tw-border-style);