@a-type/ui 1.8.0 → 1.8.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 (29) hide show
  1. package/dist/cjs/components/box/Box.js +1 -1
  2. package/dist/cjs/components/box/Box.js.map +1 -1
  3. package/dist/cjs/components/camera/Camera.js +2 -2
  4. package/dist/cjs/components/camera/Camera.js.map +1 -1
  5. package/dist/cjs/components/layouts/PageRoot.js +1 -1
  6. package/dist/cjs/components/layouts/PageRoot.js.map +1 -1
  7. package/dist/cjs/components/typography/typography.js +4 -4
  8. package/dist/cjs/components/typography/typography.js.map +1 -1
  9. package/dist/cjs/uno.preset.d.ts +4 -1
  10. package/dist/cjs/uno.preset.js +248 -279
  11. package/dist/cjs/uno.preset.js.map +1 -1
  12. package/dist/css/main.css +227 -212
  13. package/dist/esm/components/box/Box.js +1 -1
  14. package/dist/esm/components/box/Box.js.map +1 -1
  15. package/dist/esm/components/camera/Camera.js +2 -2
  16. package/dist/esm/components/camera/Camera.js.map +1 -1
  17. package/dist/esm/components/layouts/PageRoot.js +1 -1
  18. package/dist/esm/components/layouts/PageRoot.js.map +1 -1
  19. package/dist/esm/components/typography/typography.js +4 -4
  20. package/dist/esm/components/typography/typography.js.map +1 -1
  21. package/dist/esm/uno.preset.d.ts +4 -1
  22. package/dist/esm/uno.preset.js +248 -279
  23. package/dist/esm/uno.preset.js.map +1 -1
  24. package/package.json +1 -1
  25. package/src/components/box/Box.tsx +1 -0
  26. package/src/components/camera/Camera.tsx +2 -1
  27. package/src/components/layouts/PageRoot.tsx +2 -1
  28. package/src/components/typography/typography.tsx +8 -4
  29. package/src/uno.preset.ts +252 -278
package/src/uno.preset.ts CHANGED
@@ -25,7 +25,9 @@ export default function presetAglio({
25
25
  },
26
26
  borderScale = 1,
27
27
  roundedness = 1,
28
- saturation = 10,
28
+ cornerScale = roundedness,
29
+ spacingScale = 1,
30
+ saturation = 20,
29
31
  }: {
30
32
  scale?: 'sm' | 'md' | 'lg';
31
33
  interFontLocation?: string;
@@ -34,12 +36,15 @@ export default function presetAglio({
34
36
  dark: [number, number];
35
37
  };
36
38
  borderScale?: number;
39
+ /** @deprecated use cornerScale */
37
40
  roundedness?: number;
41
+ spacingScale?: number;
42
+ cornerScale?: number;
38
43
  saturation?: number;
39
44
  } = {}): Preset {
40
45
  const saturationPercent = saturation / 100;
41
46
  const spacingIncrement = spacing[scale];
42
- roundedness *= roundedScaling[scale];
47
+ cornerScale *= roundedScaling[scale];
43
48
  const lightColors = generateColors(...colorRanges.light);
44
49
  const darkColors = generateColors(...colorRanges.dark);
45
50
 
@@ -130,17 +135,17 @@ export default function presetAglio({
130
135
  },
131
136
  spacing: makeSpacing(spacingIncrement),
132
137
  borderRadius: {
133
- xs: `calc(${0.25 * roundedness}rem * var(--spacing-scale,1))`,
134
- sm: `calc(${0.5 * roundedness}rem * var(--spacing-scale,1))`,
135
- md: `calc(${roundedness}rem * var(--spacing-scale,1))`,
136
- lg: `calc(${roundedness * 1.25}rem * var(--spacing-scale,1))`,
137
- xl: `calc(${roundedness * 1.5}rem * var(--spacing-scale,1))`,
138
- full: roundedness === 0 ? '0px' : '9999px',
138
+ xs: `calc(0.25rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
139
+ sm: `calc(0.5rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
140
+ md: `calc(1rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
141
+ lg: `calc(1.25rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
142
+ xl: `calc(1.5rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
143
+ full: cornerScale === 0 ? '0px' : '9999px',
139
144
  },
140
145
  lineWidth: {
141
- DEFAULT: `${borderScale}px`,
146
+ DEFAULT: `calc(1px * var(--global-border-scale,1))`,
142
147
  none: '0',
143
- thick: `${2 * borderScale}px`,
148
+ thick: `calc(2px * var(--global-border-scale,1))`,
144
149
  },
145
150
  width: {
146
151
  content: '700px',
@@ -544,8 +549,61 @@ export default function presetAglio({
544
549
  },
545
550
  } as any,
546
551
  {
547
- getCSS: (ctx) => `
548
- @layer preflightBase, components, responsive, variants, utilities;
552
+ getCSS: (ctx) => {
553
+ const lightMode = `
554
+ --wash-saturation-tweak: ${lightModeSaturationTweak};
555
+ --mode-mult: 1;
556
+ ${lightColors}
557
+ --color-dark-blend: var(--palette-dark-blend);
558
+ --color-light-blend: var(--palette-light-blend);
559
+ --color-dark-blend-2: var(--palette-dark-blend-2);
560
+ --color-light-blend-2: var(--palette-light-blend-2);
561
+ --color-black: var(--palette-true-black);
562
+ --color-white: var(--palette-white);
563
+ --color-gray-1: var(--palette-gray-1);
564
+ --color-gray-2: var(--palette-gray-2);
565
+ --color-gray-3: var(--palette-gray-3);
566
+ --color-gray-4: var(--palette-gray-4);
567
+ --color-gray-5: var(--palette-gray-5);
568
+ --color-gray-6: var(--palette-gray-6);
569
+ --color-gray-7: var(--palette-gray-7);
570
+ --color-gray-8: var(--palette-gray-8);
571
+ --color-gray-9: var(--palette-gray-9);
572
+ --color-gray-0: var(--palette-gray-0);
573
+ --color-gray-blend: var(--palette-gray-blend);
574
+ --color-gray-dark-blend: var(--palette-gray-dark-blend);
575
+ --color-shadow-1: var(--palette-shadow-2);
576
+ --color-shadow-2: var(--palette-shadow-1);
577
+ --color-overlay: var(--palette-white-overlay);
578
+ `;
579
+ const darkMode = `
580
+ --wash-saturation-tweak: ${darkModeSaturationTweak};
581
+ --mode-mult: -1;
582
+ ${darkColors}
583
+ --color-dark-blend: var(--palette-light-blend);
584
+ --color-light-blend: var(--palette-dark-blend);
585
+ --color-dark-blend-2: var(--palette-light-blend-2);
586
+ --color-light-blend-2: var(--palette-dark-blend-2);
587
+ --color-black: var(--palette-true-white);
588
+ --color-white: var(--palette-black);
589
+ --color-gray-1: var(--palette-gray-ex-2);
590
+ --color-gray-2: var(--palette-gray-ex-1);
591
+ --color-gray-3: var(--palette-gray-0);
592
+ --color-gray-4: var(--palette-gray-9);
593
+ --color-gray-5: var(--palette-gray-8);
594
+ --color-gray-6: var(--palette-gray-7);
595
+ --color-gray-7: var(--palette-gray-6);
596
+ --color-gray-8: var(--palette-gray-5);
597
+ --color-gray-9: var(--palette-gray-4);
598
+ --color-gray-0: var(--palette-gray-3);
599
+ --color-gray-blend: var(--palette-light-gray-blend);
600
+ --color-gray-dark-blend: var(--palette-light-gray-dark-blend);
601
+ --color-shadow-1: var(--palette-shadow-4);
602
+ --color-shadow-2: var(--palette-shadow-3);
603
+ --color-overlay: var(--palette-black-overlay);
604
+ `;
605
+ return `
606
+ @layer preflightBase, preflightVariant, components, responsive, variants, utilities;
549
607
 
550
608
  :root {
551
609
  --palette-red-90: #fff4f0;
@@ -557,8 +615,8 @@ export default function presetAglio({
557
615
  --palette-red-30: #ae562d;
558
616
  --palette-red-20: #804020;
559
617
  --palette-red-10: #702604;
560
- --palette-red-00:rgb(52, 39, 35);
561
- --palette-green-90: #e8ffef;
618
+ --palette-red-00:rgb(37, 28, 25);
619
+ --palette-green-90:rgb(238, 252, 242);
562
620
  --palette-green-80: #c2ffe9;
563
621
  --palette-green-70: #92f2d1;
564
622
  --palette-green-60: #86efc8;
@@ -573,12 +631,12 @@ export default function presetAglio({
573
631
  --palette-yellow-70: #ffdf7c;
574
632
  --palette-yellow-60: #ffdb57;
575
633
  --palette-yellow-50: #e1b83c;
576
- --palette-yellow-40: #ac7c04;
577
- --palette-yellow-30: #8e5c00;
578
- --palette-yellow-20: #714d00;
579
- --palette-yellow-10: #634500;
580
- --palette-yellow-00:rgb(56, 50, 30);
581
- --palette-blue-90:rgb(231, 246, 255);
634
+ --palette-yellow-40:rgb(171, 134, 38);
635
+ --palette-yellow-30:rgb(139, 98, 20);
636
+ --palette-yellow-20:rgb(111, 83, 23);
637
+ --palette-yellow-10:rgb(84, 62, 12);
638
+ --palette-yellow-00:rgb(37, 33, 22);
639
+ --palette-blue-90:rgb(236, 244, 249);
582
640
  --palette-blue-80: #c4e7ff;
583
641
  --palette-blue-70: #87d3fc;
584
642
  --palette-blue-60: #5fcefe;
@@ -593,11 +651,11 @@ export default function presetAglio({
593
651
  --palette-purple-70: #c8cdff;
594
652
  --palette-purple-60: #aab1ff;
595
653
  --palette-purple-50: #8490f4;
596
- --palette-purple-40: #6d78d7;
597
- --palette-purple-30: #6068c0;
598
- --palette-purple-20: #5a62a7;
599
- --palette-purple-10: #464d8a;
600
- --palette-purple-00:rgb(28, 30, 41);
654
+ --palette-purple-40:rgb(95, 103, 184);
655
+ --palette-purple-30:rgb(90, 96, 157);
656
+ --palette-purple-20:rgb(76, 81, 122);
657
+ --palette-purple-10:rgb(64, 67, 101);
658
+ --palette-purple-00:rgb(27, 24, 44);
601
659
  --palette-light-blend: rgba(255, 255, 255, 0.8);
602
660
  --palette-light-blend-2: rgba(255, 255, 255, 0.6);
603
661
  --palette-dark-blend: rgba(0, 0, 0, 0.65);
@@ -624,6 +682,9 @@ export default function presetAglio({
624
682
  --palette-true-gray-00: #1f1f1f;
625
683
 
626
684
  --final-saturation: calc(${saturationPercent} * var(--global-saturation, 1));
685
+ --global-corner-scale: ${cornerScale};
686
+ --global-border-scale: ${borderScale};
687
+ --global-spacing-scale: ${spacingScale};
627
688
 
628
689
  --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--final-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
629
690
  --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--final-saturation, 1)) calc(l * 1.125));
@@ -664,281 +725,188 @@ export default function presetAglio({
664
725
  --z-overdraw: 100000;
665
726
  }
666
727
 
667
- /* LIGHT THEME */
668
- html {
669
- --wash-saturation-tweak: ${lightModeSaturationTweak};
728
+ @layer preflightBase {
729
+ /* LIGHT THEME */
730
+ html {
731
+ ${lightMode}
670
732
 
671
- ${lightColors}
672
- --color-dark-blend: var(--palette-dark-blend);
673
- --color-light-blend: var(--palette-light-blend);
674
- --color-dark-blend-2: var(--palette-dark-blend-2);
675
- --color-light-blend-2: var(--palette-light-blend-2);
676
- --color-black: var(--palette-true-black);
677
- --color-white: var(--palette-white);
678
- --color-gray-1: var(--palette-gray-1);
679
- --color-gray-2: var(--palette-gray-2);
680
- --color-gray-3: var(--palette-gray-3);
681
- --color-gray-4: var(--palette-gray-4);
682
- --color-gray-5: var(--palette-gray-5);
683
- --color-gray-6: var(--palette-gray-6);
684
- --color-gray-7: var(--palette-gray-7);
685
- --color-gray-8: var(--palette-gray-8);
686
- --color-gray-9: var(--palette-gray-9);
687
- --color-gray-0: var(--palette-gray-0);
688
- --color-gray-blend: var(--palette-gray-blend);
689
- --color-gray-dark-blend: var(--palette-gray-dark-blend);
690
- --color-shadow-1: var(--palette-shadow-2);
691
- --color-shadow-2: var(--palette-shadow-1);
692
- --color-overlay: var(--palette-white-overlay);
733
+ /* DEFAULT THEME (LEMON) */
734
+ --color-attention-light: var(--color-red-light);
735
+ --color-attention: var(--color-red);
736
+ --color-attention-dark: var(--color-red-dark);
737
+ --color-attention-wash: var(--color-red-wash);
738
+ --color-accent: var(--color-green);
739
+ --color-accent-wash: var(--color-green-wash);
740
+ --color-accent-light: var(--color-green-light);
741
+ --color-accent-dark: var(--color-green-dark);
742
+ --color-primary: var(--color-yellow);
743
+ --color-primary-light: var(--color-yellow-light);
744
+ --color-primary-dark: var(--color-yellow-dark);
745
+ --color-primary-wash: var(--color-yellow-wash);
746
+ --gray-hue-tweak: -30;
747
+ }
693
748
 
749
+ /* INTRINSIC DARK THEME */
750
+ @media(prefers-color-scheme: dark) {
751
+ html {
752
+ ${darkMode}
753
+ }
754
+ }
694
755
 
695
- /* DEFAULT THEME (LEMON) */
696
- --color-attention-light: var(--color-red-light);
697
- --color-attention: var(--color-red);
698
- --color-attention-dark: var(--color-red-dark);
699
- --color-attention-wash: var(--color-red-wash);
700
- --color-accent: var(--color-green);
701
- --color-accent-wash: var(--color-green-wash);
702
- --color-accent-light: var(--color-green-light);
703
- --color-accent-dark: var(--color-green-dark);
704
- --color-primary: var(--color-yellow);
705
- --color-primary-light: var(--color-yellow-light);
706
- --color-primary-dark: var(--color-yellow-dark);
707
- --color-primary-wash: var(--color-yellow-wash);
708
- --gray-hue-tweak: -30;
709
- }
756
+ .theme-lemon {
757
+ --color-attention-light: var(--color-red-light);
758
+ --color-attention: var(--color-red);
759
+ --color-attention-dark: var(--color-red-dark);
760
+ --color-attention-wash: var(--color-red-wash);
761
+ --color-accent: var(--color-green);
762
+ --color-accent-wash: var(--color-green-wash);
763
+ --color-accent-light: var(--color-green-light);
764
+ --color-accent-dark: var(--color-green-dark);
765
+ --color-primary: var(--color-yellow);
766
+ --color-primary-light: var(--color-yellow-light);
767
+ --color-primary-dark: var(--color-yellow-dark);
768
+ --color-primary-wash: var(--color-yellow-wash);
710
769
 
711
- /* INTRINSIC DARK THEME */
712
- @media(prefers-color-scheme: dark) {
713
- html {
714
- --wash-saturation-tweak: ${darkModeSaturationTweak};
715
- --mode-mult: -1;
716
- ${darkColors}
717
- --color-dark-blend: var(--palette-light-blend);
718
- --color-light-blend: var(--palette-dark-blend);
719
- --color-dark-blend-2: var(--palette-light-blend-2);
720
- --color-light-blend-2: var(--palette-dark-blend-2);
721
- --color-black: var(--palette-true-white);
722
- --color-white: var(--palette-black);
723
- --color-gray-1: var(--palette-gray-ex-2);
724
- --color-gray-2: var(--palette-gray-ex-1);
725
- --color-gray-3: var(--palette-gray-0);
726
- --color-gray-4: var(--palette-gray-9);
727
- --color-gray-5: var(--palette-gray-8);
728
- --color-gray-6: var(--palette-gray-7);
729
- --color-gray-7: var(--palette-gray-6);
730
- --color-gray-8: var(--palette-gray-5);
731
- --color-gray-9: var(--palette-gray-4);
732
- --color-gray-0: var(--palette-gray-3);
733
- --color-gray-blend: var(--palette-light-gray-blend);
734
- --color-gray-dark-blend: var(--palette-light-gray-dark-blend);
735
- --color-shadow-1: var(--palette-shadow-4);
736
- --color-shadow-2: var(--palette-shadow-3);
737
- --color-overlay: var(--palette-black-overlay);
770
+ --gray-hue-tweak: -20;
738
771
  }
739
- }
740
772
 
741
- /** SYSTEM OVERRIDES **/
742
- @media(prefers-color-scheme: dark) {
743
- html.override-light {
744
- --wash-saturation-tweak: ${lightModeSaturationTweak};
745
- --mode-mult: 1;
746
- ${lightColors}
747
- --color-dark-blend: var(--palette-dark-blend);
748
- --color-light-blend: var(--palette-light-blend);
749
- --color-dark-blend-2: var(--palette-dark-blend-2);
750
- --color-light-blend-2: var(--palette-light-blend-2);
751
- --color-black: var(--palette-true-black);
752
- --color-white: var(--palette-white);
753
- --color-gray-1: var(--palette-gray-1);
754
- --color-gray-2: var(--palette-gray-2);
755
- --color-gray-3: var(--palette-gray-3);
756
- --color-gray-4: var(--palette-gray-4);
757
- --color-gray-5: var(--palette-gray-5);
758
- --color-gray-6: var(--palette-gray-6);
759
- --color-gray-7: var(--palette-gray-7);
760
- --color-gray-8: var(--palette-gray-8);
761
- --color-gray-9: var(--palette-gray-9);
762
- --color-gray-0: var(--palette-gray-0);
763
- --color-gray-blend: var(--palette-gray-blend);
764
- --color-gray-dark-blend: var(--palette-gray-dark-blend);
765
- --color-shadow-1: var(--palette-shadow-2);
766
- --color-shadow-2: var(--palette-shadow-1);
767
- --color-overlay: var(--palette-white-overlay);
768
- }
769
- }
773
+ /* fix yellow hue in dark mode */
774
+ @media(prefers-color-scheme: dark) {
775
+ .theme-lemon {
776
+ --gray-hue-tweak: 0;
777
+ }
770
778
 
771
- @media(prefers-color-scheme: light) {
772
- html.override-dark {
773
- --wash-saturation-tweak: ${darkModeSaturationTweak};
774
- --mode-mult: -1;
775
- ${darkColors}
776
- --color-dark-blend: var(--palette-light-blend);
777
- --color-light-blend: var(--palette-dark-blend);
778
- --color-dark-blend-2: var(--palette-light-blend-2);
779
- --color-light-blend-2: var(--palette-dark-blend-2);
780
- --color-black: var(--palette-true-white);
781
- --color-white: var(--palette-black);
782
- --color-gray-1: var(--palette-gray-ex-2);
783
- --color-gray-2: var(--palette-gray-ex-1);
784
- --color-gray-3: var(--palette-gray-0);
785
- --color-gray-4: var(--palette-gray-9);
786
- --color-gray-5: var(--palette-gray-8);
787
- --color-gray-6: var(--palette-gray-7);
788
- --color-gray-7: var(--palette-gray-6);
789
- --color-gray-8: var(--palette-gray-5);
790
- --color-gray-9: var(--palette-gray-4);
791
- --color-gray-0: var(--palette-gray-3);
792
- --color-gray-blend: var(--palette-light-gray-blend);
793
- --color-gray-dark-blend: var(--palette-light-gray-dark-blend);
794
- --color-shadow-1: var(--palette-shadow-4);
795
- --color-shadow-2: var(--palette-shadow-3);
796
- --color-overlay: var(--palette-black-overlay);
779
+ html.override-light.theme-lemon, html.override-light .theme-lemon {
780
+ --gray-hue-tweak: -20;
781
+ }
797
782
  }
798
- }
799
783
 
800
- .theme-lemon {
801
- --color-attention-light: var(--color-red-light);
802
- --color-attention: var(--color-red);
803
- --color-attention-dark: var(--color-red-dark);
804
- --color-attention-wash: var(--color-red-wash);
805
- --color-accent: var(--color-green);
806
- --color-accent-wash: var(--color-green-wash);
807
- --color-accent-light: var(--color-green-light);
808
- --color-accent-dark: var(--color-green-dark);
809
- --color-primary: var(--color-yellow);
810
- --color-primary-light: var(--color-yellow-light);
811
- --color-primary-dark: var(--color-yellow-dark);
812
- --color-primary-wash: var(--color-yellow-wash);
784
+ html.override-dark.theme-lemon, html.override-dark .theme-lemon {
785
+ --gray-hue-tweak: 0;
786
+ }
813
787
 
814
- --gray-hue-tweak: -20;
815
- }
788
+ .theme-blueberry {
789
+ --color-attention-light: var(--color-red-light);
790
+ --color-attention: var(--color-red);
791
+ --color-attention-dark: var(--color-red-dark);
792
+ --color-attention-wash: var(--color-red-wash);
793
+ --color-accent: var(--color-green);
794
+ --color-accent-wash: var(--color-green-wash);
795
+ --color-accent-light: var(--color-green-light);
796
+ --color-accent-dark: var(--color-green-dark);
797
+ --color-primary: var(--color-blue);
798
+ --color-primary-light: var(--color-blue-light);
799
+ --color-primary-dark: var(--color-blue-dark);
800
+ --color-primary-wash: var(--color-blue-wash);
816
801
 
817
- /* fix yellow hue in dark mode */
818
- @media(prefers-color-scheme: dark) {
819
- .theme-lemon {
820
- --gray-hue-tweak: 0;
802
+ --gray-hue-tweak: 20;
821
803
  }
822
804
 
823
- html.override-light.theme-lemon, html.override-light .theme-lemon {
805
+ .theme-eggplant {
806
+ --color-attention-light: var(--color-red-light);
807
+ --color-attention: var(--color-red);
808
+ --color-attention-dark: var(--color-red-dark);
809
+ --color-attention-wash: var(--color-red-wash);
810
+ --color-accent: var(--color-green);
811
+ --color-accent-wash: var(--color-green-wash);
812
+ --color-accent-light: var(--color-green-light);
813
+ --color-accent-dark: var(--color-green-dark);
814
+ --color-primary: var(--color-purple);
815
+ --color-primary-light: var(--color-purple-light);
816
+ --color-primary-dark: var(--color-purple-dark);
817
+ --color-primary-wash: var(--color-purple-wash);
818
+
824
819
  --gray-hue-tweak: -20;
825
820
  }
826
- }
827
-
828
- html.override-dark.theme-lemon, html.override-dark .theme-lemon {
829
- --gray-hue-tweak: 0;
830
- }
831
821
 
832
- .theme-blueberry {
833
- --color-attention-light: var(--color-red-light);
834
- --color-attention: var(--color-red);
835
- --color-attention-dark: var(--color-red-dark);
836
- --color-attention-wash: var(--color-red-wash);
837
- --color-accent: var(--color-green);
838
- --color-accent-wash: var(--color-green-wash);
839
- --color-accent-light: var(--color-green-light);
840
- --color-accent-dark: var(--color-green-dark);
841
- --color-primary: var(--color-blue);
842
- --color-primary-light: var(--color-blue-light);
843
- --color-primary-dark: var(--color-blue-dark);
844
- --color-primary-wash: var(--color-blue-wash);
822
+ .theme-leek {
823
+ --color-attention-light: var(--color-red-light);
824
+ --color-attention: var(--color-red);
825
+ --color-attention-dark: var(--color-red-dark);
826
+ --color-attention-wash: var(--color-red-wash);
827
+ --color-accent: var(--color-blue);
828
+ --color-accent-wash: var(--color-blue-wash);
829
+ --color-accent-light: var(--color-blue-light);
830
+ --color-accent-dark: var(--color-blue-dark);
831
+ --color-primary: var(--color-green);
832
+ --color-primary-light: var(--color-green-light);
833
+ --color-primary-dark: var(--color-green-dark);
834
+ --color-primary-wash: var(--color-green-wash);
845
835
 
846
- --gray-hue-tweak: 20;
847
- }
836
+ --gray-hue-tweak: 20;
837
+ }
848
838
 
849
- .theme-eggplant {
850
- --color-attention-light: var(--color-red-light);
851
- --color-attention: var(--color-red);
852
- --color-attention-dark: var(--color-red-dark);
853
- --color-attention-wash: var(--color-red-wash);
854
- --color-accent: var(--color-green);
855
- --color-accent-wash: var(--color-green-wash);
856
- --color-accent-light: var(--color-green-light);
857
- --color-accent-dark: var(--color-green-dark);
858
- --color-primary: var(--color-purple);
859
- --color-primary-light: var(--color-purple-light);
860
- --color-primary-dark: var(--color-purple-dark);
861
- --color-primary-wash: var(--color-purple-wash);
839
+ .theme-tomato {
840
+ --color-attention-light: var(--color-red-light);
841
+ --color-attention: var(--color-red);
842
+ --color-attention-dark: var(--color-red-dark);
843
+ --color-attention-wash: var(--color-red-wash);
844
+ --color-accent: var(--color-green);
845
+ --color-accent-wash: var(--color-green-wash);
846
+ --color-accent-light: var(--color-green-light);
847
+ --color-accent-dark: var(--color-green-dark);
848
+ --color-primary: hsl(from var(--color-red) calc(h - 20) s l);
849
+ --color-primary-light: hsl(from var(--color-red-light) calc(h - 20) s l);
850
+ --color-primary-dark: hsl(from var(--color-red-dark) calc(h - 20) s l);
851
+ --color-primary-wash: hsl(from var(--color-red-wash) calc(h - 20) s l);
862
852
 
863
- --gray-hue-tweak: -20;
864
- }
853
+ --gray-hue-tweak: -20;
854
+ }
865
855
 
866
- .theme-leek {
867
- --color-attention-light: var(--color-red-light);
868
- --color-attention: var(--color-red);
869
- --color-attention-dark: var(--color-red-dark);
870
- --color-attention-wash: var(--color-red-wash);
871
- --color-accent: var(--color-blue);
872
- --color-accent-wash: var(--color-blue-wash);
873
- --color-accent-light: var(--color-blue-light);
874
- --color-accent-dark: var(--color-blue-dark);
875
- --color-primary: var(--color-green);
876
- --color-primary-light: var(--color-green-light);
877
- --color-primary-dark: var(--color-green-dark);
878
- --color-primary-wash: var(--color-green-wash);
856
+ .theme-salt {
857
+ --color-attention-light: var(--color-red-light);
858
+ --color-attention: var(--color-red);
859
+ --color-attention-dark: var(--color-red-dark);
860
+ --color-attention-wash: var(--color-red-wash);
861
+ --color-primary: var(--color-true-gray);
862
+ --color-primary-wash: var(--color-true-gray-wash);
863
+ --color-primary-light: var(--color-true-gray-light);
864
+ --color-primary-dark: var(--color-true-gray-dark);
865
+ --color-accent: var(--color-true-gray-light);
866
+ --color-accent-light: var(--color-true-gray-wash);
867
+ --color-accent-dark: var(--color-true-gray);
868
+ --color-accent-wash: var(--color-white);
879
869
 
880
- --gray-hue-tweak: 20;
881
- }
870
+ --global-saturation: 0;
871
+ }
882
872
 
883
- .theme-tomato {
884
- --color-attention-light: var(--color-red-light);
885
- --color-attention: var(--color-red);
886
- --color-attention-dark: var(--color-red-dark);
887
- --color-attention-wash: var(--color-red-wash);
888
- --color-accent: var(--color-green);
889
- --color-accent-wash: var(--color-green-wash);
890
- --color-accent-light: var(--color-green-light);
891
- --color-accent-dark: var(--color-green-dark);
892
- --color-primary: hsl(from var(--color-red) calc(h - 20) s l);
893
- --color-primary-light: hsl(from var(--color-red-light) calc(h - 20) s l);
894
- --color-primary-dark: hsl(from var(--color-red-dark) calc(h - 20) s l);
895
- --color-primary-wash: hsl(from var(--color-red-wash) calc(h - 20) s l);
873
+ html, body {
874
+ margin: 0;
875
+ padding: 0;
876
+ font-family: "Inter", sans-serif;
877
+ font-size: 16px;
878
+ height: 100%;
879
+ --webkit-font-smoothing: antialiased;
880
+ }
896
881
 
897
- --gray-hue-tweak: -20;
898
- }
882
+ body {
883
+ height: 100%;
884
+ background-color: var(--color-wash);
885
+ color: var(--color-black);
886
+ overflow: overlay;
887
+ }
899
888
 
900
- .theme-salt {
901
- --color-attention-light: var(--color-red-light);
902
- --color-attention: var(--color-red);
903
- --color-attention-dark: var(--color-red-dark);
904
- --color-attention-wash: var(--color-red-wash);
905
- --color-primary: var(--color-true-gray);
906
- --color-primary-wash: var(--color-true-gray-wash);
907
- --color-primary-light: var(--color-true-gray-light);
908
- --color-primary-dark: var(--color-true-gray-dark);
909
- --color-accent: var(--color-true-gray-light);
910
- --color-accent-light: var(--color-true-gray-wash);
911
- --color-accent-dark: var(--color-true-gray);
912
- --color-accent-wash: var(--color-white);
889
+ a {
890
+ color: inherit;
891
+ text-decoration: none;
892
+ }
913
893
 
914
- --global-saturation: 0;
894
+ * {
895
+ box-sizing: border-box;
896
+ -webkit-tap-highlight-color: transparent;
897
+ }
915
898
  }
916
899
 
917
- html, body {
918
- margin: 0;
919
- padding: 0;
920
- font-family: "Inter", sans-serif;
921
- font-size: 16px;
922
- height: 100%;
923
- --webkit-font-smoothing: antialiased;
924
- }
925
-
926
- body {
927
- height: 100%;
928
- background-color: var(--color-wash);
929
- color: var(--color-black);
930
- overflow: overlay;
931
- }
932
-
933
- a {
934
- color: inherit;
935
- text-decoration: none;
936
- }
900
+ @layer preflightVariants {
901
+ /** SYSTEM OVERRIDES **/
902
+ .override-light {
903
+ ${lightMode}
904
+ }
937
905
 
938
- * {
939
- box-sizing: border-box;
940
- -webkit-tap-highlight-color: transparent;
941
- }
906
+ .override-dark {
907
+ ${darkMode}
908
+ }
909
+ }
942
910
 
943
911
  @font-face {
944
912
  font-family: "Inter";
@@ -968,7 +936,13 @@ export default function presetAglio({
968
936
  syntax: "*";
969
937
  inherits: false;
970
938
  }
971
- `,
939
+
940
+ @property --local-corner-scale {
941
+ syntax: "*";
942
+ inherits: false;
943
+ }
944
+ `;
945
+ },
972
946
  },
973
947
  ],
974
948
 
@@ -1026,11 +1000,11 @@ function makeSpacing(increment: number) {
1026
1000
  {} as Record<string, string>,
1027
1001
  ),
1028
1002
 
1029
- xs: 'calc(0.25rem * var(--spacing-scale,1))',
1030
- sm: 'calc(0.5rem * var(--spacing-scale,1))',
1031
- md: 'calc(1rem * var(--spacing-scale,1))',
1032
- lg: 'calc(2rem * var(--spacing-scale,1))',
1033
- xl: 'calc(3rem * var(--spacing-scale,1))',
1003
+ xs: 'calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
1004
+ sm: 'calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
1005
+ md: 'calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
1006
+ lg: 'calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
1007
+ xl: 'calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))',
1034
1008
  };
1035
1009
  }
1036
1010