@ecopages/radiant-themes 0.2.4 → 0.3.0

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 (7) hide show
  1. package/dist/compiled/themes/macos/compact.css +72 -11
  2. package/dist/compiled/themes/macos.css +72 -11
  3. package/dist/compiled/themes/windows95/compact.css +11 -0
  4. package/dist/compiled/themes/windows95.css +11 -0
  5. package/dist/tokens/components/macos.css +65 -7
  6. package/dist/tokens/components/windows95.css +18 -0
  7. package/package.json +3 -3
package/dist/compiled/themes/macos/compact.css CHANGED
@@ -38,7 +38,6 @@
38
38
  --radius-sm: var(--border-radius-sm);
39
39
  --radius-md: var(--border-radius-md);
40
40
  --radius-2xl: var(--border-radius-2xl);
41
- --radius-full: var(--border-radius-full);
42
41
  --radius-control: var(--radius-control);
43
42
  --radius-container: var(--radius-container);
44
43
  --radius-pill: var(--radius-pill);
@@ -573,7 +572,7 @@
573
572
  :root .rui-button--ghost {
574
573
  color: var(--macos-text);
575
574
  }
576
- :root .rui-button--ghost:hover:not(:disabled) {
575
+ :root .rui-button--ghost:hover:not(:disabled, [aria-pressed='true']) {
577
576
  background-color: var(--macos-hover-fill);
578
577
  }
579
578
  :root .rui-button--ghost:active:not(:disabled),
@@ -747,8 +746,6 @@
747
746
  :root .rui-menu-button__item[aria-checked='true'],
748
747
  :root .rui-menubar__menu-item[aria-checked='true'],
749
748
  :root .rui-tree__node[aria-selected='true'],
750
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
751
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled),
752
749
  :root .rui-navigation-menu__link-list a[aria-current='page'] {
753
750
  border-radius: var(--radius-sm);
754
751
  background-color: var(--macos-selection);
@@ -764,10 +761,77 @@
764
761
  }
765
762
  :root .rui-calendar__day {
766
763
  height: calc(var(--spacing, 0.25rem) * 7);
767
- border-radius: var(--radius-full);
764
+ border-radius: var(--radius-none);
765
+ isolation: isolate;
766
+ }
767
+ :root .rui-calendar__day::before {
768
+ content: '';
769
+ position: absolute;
770
+ inset-block: 0;
771
+ inset-inline: calc(50% - 0.875rem);
772
+ z-index: -1;
773
+ border-radius: 9999px;
768
774
  }
769
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']) {
770
- border-radius: var(--radius-full);
775
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true']) {
776
+ background-color: transparent;
777
+ }
778
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true'])::before {
779
+ background-color: var(--macos-hover-fill);
780
+ }
781
+ :root .rui-calendar__day:focus-visible {
782
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
783
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
784
+ }
785
+ :root .rui-calendar__day:focus-visible::before {
786
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
787
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
788
+ --tw-ring-color: var(--color-focus-ring);
789
+ @supports (color: color-mix(in lab, red, red)) {
790
+ --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
791
+ }
792
+ }
793
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
794
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled) {
795
+ background-color: transparent;
796
+ color: var(--macos-selection-text);
797
+ }
798
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true'])::before {
799
+ background-color: var(--macos-selection);
800
+ }
801
+ :root .rui-calendar__day[data-range-middle='true'],
802
+ :root .rui-calendar__day[data-range-middle='true']:hover:not(:disabled) {
803
+ background-color: var(--macos-selection);
804
+ @supports (color: color-mix(in lab, red, red)) {
805
+ background-color: color-mix(in srgb, var(--macos-selection) 16%, transparent);
806
+ }
807
+ }
808
+ :root .rui-calendar__day[data-range-start='true']:not([data-range-end='true']) {
809
+ background-image: linear-gradient(
810
+ to right,
811
+ transparent 50%,
812
+ var(--macos-selection) 50%
813
+ );
814
+ @supports (color: color-mix(in lab, red, red)) {
815
+ background-image: linear-gradient(
816
+ to right,
817
+ transparent 50%,
818
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
819
+ );
820
+ }
821
+ }
822
+ :root .rui-calendar__day[data-range-end='true']:not([data-range-start='true']) {
823
+ background-image: linear-gradient(
824
+ to left,
825
+ transparent 50%,
826
+ var(--macos-selection) 50%
827
+ );
828
+ @supports (color: color-mix(in lab, red, red)) {
829
+ background-image: linear-gradient(
830
+ to left,
831
+ transparent 50%,
832
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
833
+ );
834
+ }
771
835
  }
772
836
  :root .rui-calendar__day[aria-current='date']:not([aria-selected='true']) {
773
837
  text-decoration-line: none;
@@ -966,10 +1030,7 @@
966
1030
  @supports (color: color-mix(in lab, red, red)) {
967
1031
  border: 1px solid color-mix(in srgb, var(--macos-text) 12%, transparent);
968
1032
  }
969
- background-color: var(--macos-text);
970
- @supports (color: color-mix(in lab, red, red)) {
971
- background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
972
- }
1033
+ background-color: var(--macos-surface);
973
1034
  padding: var(--rui-tabs-panel-padding);
974
1035
  padding-top: calc(var(--rui-tabs-panel-padding) + 0.75rem);
975
1036
  }
package/dist/compiled/themes/macos.css CHANGED
@@ -38,7 +38,6 @@
38
38
  --radius-sm: var(--border-radius-sm);
39
39
  --radius-md: var(--border-radius-md);
40
40
  --radius-2xl: var(--border-radius-2xl);
41
- --radius-full: var(--border-radius-full);
42
41
  --radius-control: var(--radius-control);
43
42
  --radius-container: var(--radius-container);
44
43
  --radius-pill: var(--radius-pill);
@@ -573,7 +572,7 @@
573
572
  :root .rui-button--ghost {
574
573
  color: var(--macos-text);
575
574
  }
576
- :root .rui-button--ghost:hover:not(:disabled) {
575
+ :root .rui-button--ghost:hover:not(:disabled, [aria-pressed='true']) {
577
576
  background-color: var(--macos-hover-fill);
578
577
  }
579
578
  :root .rui-button--ghost:active:not(:disabled),
@@ -747,8 +746,6 @@
747
746
  :root .rui-menu-button__item[aria-checked='true'],
748
747
  :root .rui-menubar__menu-item[aria-checked='true'],
749
748
  :root .rui-tree__node[aria-selected='true'],
750
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
751
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled),
752
749
  :root .rui-navigation-menu__link-list a[aria-current='page'] {
753
750
  border-radius: var(--radius-sm);
754
751
  background-color: var(--macos-selection);
@@ -764,10 +761,77 @@
764
761
  }
765
762
  :root .rui-calendar__day {
766
763
  height: calc(var(--spacing, 0.25rem) * 7);
767
- border-radius: var(--radius-full);
764
+ border-radius: var(--radius-none);
765
+ isolation: isolate;
766
+ }
767
+ :root .rui-calendar__day::before {
768
+ content: '';
769
+ position: absolute;
770
+ inset-block: 0;
771
+ inset-inline: calc(50% - 0.875rem);
772
+ z-index: -1;
773
+ border-radius: 9999px;
768
774
  }
769
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']) {
770
- border-radius: var(--radius-full);
775
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true']) {
776
+ background-color: transparent;
777
+ }
778
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true'])::before {
779
+ background-color: var(--macos-hover-fill);
780
+ }
781
+ :root .rui-calendar__day:focus-visible {
782
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
783
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
784
+ }
785
+ :root .rui-calendar__day:focus-visible::before {
786
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
787
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
788
+ --tw-ring-color: var(--color-focus-ring);
789
+ @supports (color: color-mix(in lab, red, red)) {
790
+ --tw-ring-color: color-mix(in oklab, var(--color-focus-ring) 60%, transparent);
791
+ }
792
+ }
793
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
794
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled) {
795
+ background-color: transparent;
796
+ color: var(--macos-selection-text);
797
+ }
798
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true'])::before {
799
+ background-color: var(--macos-selection);
800
+ }
801
+ :root .rui-calendar__day[data-range-middle='true'],
802
+ :root .rui-calendar__day[data-range-middle='true']:hover:not(:disabled) {
803
+ background-color: var(--macos-selection);
804
+ @supports (color: color-mix(in lab, red, red)) {
805
+ background-color: color-mix(in srgb, var(--macos-selection) 16%, transparent);
806
+ }
807
+ }
808
+ :root .rui-calendar__day[data-range-start='true']:not([data-range-end='true']) {
809
+ background-image: linear-gradient(
810
+ to right,
811
+ transparent 50%,
812
+ var(--macos-selection) 50%
813
+ );
814
+ @supports (color: color-mix(in lab, red, red)) {
815
+ background-image: linear-gradient(
816
+ to right,
817
+ transparent 50%,
818
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
819
+ );
820
+ }
821
+ }
822
+ :root .rui-calendar__day[data-range-end='true']:not([data-range-start='true']) {
823
+ background-image: linear-gradient(
824
+ to left,
825
+ transparent 50%,
826
+ var(--macos-selection) 50%
827
+ );
828
+ @supports (color: color-mix(in lab, red, red)) {
829
+ background-image: linear-gradient(
830
+ to left,
831
+ transparent 50%,
832
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
833
+ );
834
+ }
771
835
  }
772
836
  :root .rui-calendar__day[aria-current='date']:not([aria-selected='true']) {
773
837
  text-decoration-line: none;
@@ -966,10 +1030,7 @@
966
1030
  @supports (color: color-mix(in lab, red, red)) {
967
1031
  border: 1px solid color-mix(in srgb, var(--macos-text) 12%, transparent);
968
1032
  }
969
- background-color: var(--macos-text);
970
- @supports (color: color-mix(in lab, red, red)) {
971
- background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
972
- }
1033
+ background-color: var(--macos-surface);
973
1034
  padding: var(--rui-tabs-panel-padding);
974
1035
  padding-top: calc(var(--rui-tabs-panel-padding) + 0.75rem);
975
1036
  }
package/dist/compiled/themes/windows95/compact.css CHANGED
@@ -680,6 +680,17 @@
680
680
  :root .rui-combobox__listbox .rui-listbox {
681
681
  background-color: transparent;
682
682
  }
683
+ :root .rui-popover[role='dialog']:has(> rui-calendar, > .rui-calendar) {
684
+ padding: 0;
685
+ }
686
+ :root .rui-popover .rui-calendar {
687
+ padding: 3px;
688
+ background-color: transparent;
689
+ box-shadow: none;
690
+ }
691
+ :root .rui-popover .rui-calendar :is(.rui-calendar__weekdays, .rui-calendar__grid, .rui-calendar__footer) {
692
+ padding-inline: var(--space-2);
693
+ }
683
694
  :root .rui-tooltip__content {
684
695
  --rui-tooltip-surface: #ffffe1;
685
696
  --rui-tooltip-color: #000000;
package/dist/compiled/themes/windows95.css CHANGED
@@ -680,6 +680,17 @@
680
680
  :root .rui-combobox__listbox .rui-listbox {
681
681
  background-color: transparent;
682
682
  }
683
+ :root .rui-popover[role='dialog']:has(> rui-calendar, > .rui-calendar) {
684
+ padding: 0;
685
+ }
686
+ :root .rui-popover .rui-calendar {
687
+ padding: 3px;
688
+ background-color: transparent;
689
+ box-shadow: none;
690
+ }
691
+ :root .rui-popover .rui-calendar :is(.rui-calendar__weekdays, .rui-calendar__grid, .rui-calendar__footer) {
692
+ padding-inline: var(--space-2);
693
+ }
683
694
  :root .rui-tooltip__content {
684
695
  --rui-tooltip-surface: #ffffe1;
685
696
  --rui-tooltip-color: #000000;
package/dist/tokens/components/macos.css CHANGED
@@ -107,7 +107,7 @@
107
107
  color: var(--macos-text);
108
108
  }
109
109
 
110
- :root .rui-button--ghost:hover:not(:disabled) {
110
+ :root .rui-button--ghost:hover:not(:disabled, [aria-pressed='true']) {
111
111
  background-color: var(--macos-hover-fill);
112
112
  }
113
113
 
@@ -285,8 +285,6 @@
285
285
  :root .rui-menu-button__item[aria-checked='true'],
286
286
  :root .rui-menubar__menu-item[aria-checked='true'],
287
287
  :root .rui-tree__node[aria-selected='true'],
288
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
289
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled),
290
288
  :root .rui-navigation-menu__link-list a[aria-current='page'] {
291
289
  @apply rounded-sm;
292
290
  background-color: var(--macos-selection);
@@ -303,12 +301,72 @@
303
301
  padding-block: 0.1875rem;
304
302
  }
305
303
 
304
+ /**
305
+ * Days are circles, as in the macOS date picker: a 28px disc paints hover and selection behind the number, and a
306
+ * range is one continuous band of the selection tint through that disc.
307
+ *
308
+ * @remarks The disc is a `::before` because the day button fills its whole grid column; the band is the button's own
309
+ * background, halved with a gradient on the start and end days so it closes at the disc's center.
310
+ */
306
311
  :root .rui-calendar__day {
307
- @apply h-7 rounded-full;
312
+ @apply h-7 rounded-none;
313
+ isolation: isolate;
314
+ }
315
+
316
+ :root .rui-calendar__day::before {
317
+ content: '';
318
+ position: absolute;
319
+ inset-block: 0;
320
+ inset-inline: calc(50% - 0.875rem);
321
+ z-index: -1;
322
+ border-radius: 9999px;
323
+ }
324
+
325
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true']) {
326
+ background-color: transparent;
327
+ }
328
+
329
+ :root .rui-calendar__day:hover:not(:disabled):not([aria-selected='true'])::before {
330
+ background-color: var(--macos-hover-fill);
331
+ }
332
+
333
+ :root .rui-calendar__day:focus-visible {
334
+ @apply ring-0;
335
+ }
336
+
337
+ :root .rui-calendar__day:focus-visible::before {
338
+ @apply ring-[3px] ring-focus-ring/60;
339
+ }
340
+
341
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']),
342
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']):hover:not(:disabled) {
343
+ background-color: transparent;
344
+ color: var(--macos-selection-text);
345
+ }
346
+
347
+ :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true'])::before {
348
+ background-color: var(--macos-selection);
349
+ }
350
+
351
+ :root .rui-calendar__day[data-range-middle='true'],
352
+ :root .rui-calendar__day[data-range-middle='true']:hover:not(:disabled) {
353
+ background-color: color-mix(in srgb, var(--macos-selection) 16%, transparent);
308
354
  }
309
355
 
310
- :root .rui-calendar__day[aria-selected='true']:not([data-range-middle='true']) {
311
- @apply rounded-full;
356
+ :root .rui-calendar__day[data-range-start='true']:not([data-range-end='true']) {
357
+ background-image: linear-gradient(
358
+ to right,
359
+ transparent 50%,
360
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
361
+ );
362
+ }
363
+
364
+ :root .rui-calendar__day[data-range-end='true']:not([data-range-start='true']) {
365
+ background-image: linear-gradient(
366
+ to left,
367
+ transparent 50%,
368
+ color-mix(in srgb, var(--macos-selection) 16%, transparent) 50%
369
+ );
312
370
  }
313
371
 
314
372
  :root .rui-calendar__day[aria-current='date']:not([aria-selected='true']) {
@@ -513,7 +571,7 @@
513
571
  :root rui-tabs[variant='boxed'] .rui-tabs__panel {
514
572
  @apply rounded-md text-on-surface;
515
573
  border: 1px solid color-mix(in srgb, var(--macos-text) 12%, transparent);
516
- background-color: color-mix(in srgb, var(--macos-text) 4%, transparent);
574
+ background-color: var(--macos-surface);
517
575
  padding: var(--rui-tabs-panel-padding);
518
576
  padding-top: calc(var(--rui-tabs-panel-padding) + 0.75rem);
519
577
  }
package/dist/tokens/components/windows95.css CHANGED
@@ -268,6 +268,24 @@
268
268
  background-color: transparent;
269
269
  }
270
270
 
271
+ /**
272
+ * @remarks A calendar in a date popover shares the popover's bevel instead of drawing a second raised frame inside it.
273
+ * Its title bar sits 3px from that bevel like a dialog's, and the days keep the popover's inset below it.
274
+ */
275
+ :root .rui-popover[role='dialog']:has(> rui-calendar, > .rui-calendar) {
276
+ padding: 0;
277
+ }
278
+
279
+ :root .rui-popover .rui-calendar {
280
+ padding: 3px;
281
+ background-color: transparent;
282
+ box-shadow: none;
283
+ }
284
+
285
+ :root .rui-popover .rui-calendar :is(.rui-calendar__weekdays, .rui-calendar__grid, .rui-calendar__footer) {
286
+ padding-inline: var(--space-2);
287
+ }
288
+
271
289
  /**
272
290
  * @remarks Tooltips use the pale yellow info color with a 1px black frame.
273
291
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ecopages/radiant-themes",
3
- "version": "0.2.4",
3
+ "version": "0.3.0",
4
4
  "description": "Composable color themes and variants for @ecopages/radiant-ui",
5
5
  "repository": {
6
6
  "type": "git",
@@ -19,14 +19,14 @@
19
19
  "**/*.css"
20
20
  ],
21
21
  "peerDependencies": {
22
- "@ecopages/radiant-ui": ">=0.2.4"
22
+ "@ecopages/radiant-ui": ">=0.3.0"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@tailwindcss/postcss": "^4.3.3",
26
26
  "playwright": "^1.62.1",
27
27
  "postcss": "^8.5.24",
28
28
  "tailwindcss": "^4.3.0",
29
- "@ecopages/radiant-ui": "0.2.4"
29
+ "@ecopages/radiant-ui": "0.3.0"
30
30
  },
31
31
  "exports": {
32
32
  "./package.json": "./package.json",