@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/dist/cjs/uno.preset.js CHANGED
@@ -22,10 +22,10 @@ const roundedScaling = {
22
22
  function presetAglio({ scale = 'md', interFontLocation = 'https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf', colorRanges = {
23
23
  light: [90, 40],
24
24
  dark: [0, 60],
25
- }, borderScale = 1, roundedness = 1, saturation = 10, } = {}) {
25
+ }, borderScale = 1, roundedness = 1, cornerScale = roundedness, spacingScale = 1, saturation = 20, } = {}) {
26
26
  const saturationPercent = saturation / 100;
27
27
  const spacingIncrement = spacing[scale];
28
- roundedness *= roundedScaling[scale];
28
+ cornerScale *= roundedScaling[scale];
29
29
  const lightColors = generateColors(...colorRanges.light);
30
30
  const darkColors = generateColors(...colorRanges.dark);
31
31
  const darkModeSaturationTweak = 1;
@@ -114,17 +114,17 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
114
114
  },
115
115
  spacing: makeSpacing(spacingIncrement),
116
116
  borderRadius: {
117
- xs: `calc(${0.25 * roundedness}rem * var(--spacing-scale,1))`,
118
- sm: `calc(${0.5 * roundedness}rem * var(--spacing-scale,1))`,
119
- md: `calc(${roundedness}rem * var(--spacing-scale,1))`,
120
- lg: `calc(${roundedness * 1.25}rem * var(--spacing-scale,1))`,
121
- xl: `calc(${roundedness * 1.5}rem * var(--spacing-scale,1))`,
122
- full: roundedness === 0 ? '0px' : '9999px',
117
+ xs: `calc(0.25rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
118
+ sm: `calc(0.5rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
119
+ md: `calc(1rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
120
+ lg: `calc(1.25rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
121
+ xl: `calc(1.5rem * var(--local-corner-scale, var(--global-corner-scale,1)))`,
122
+ full: cornerScale === 0 ? '0px' : '9999px',
123
123
  },
124
124
  lineWidth: {
125
- DEFAULT: `${borderScale}px`,
125
+ DEFAULT: `calc(1px * var(--global-border-scale,1))`,
126
126
  none: '0',
127
- thick: `${2 * borderScale}px`,
127
+ thick: `calc(2px * var(--global-border-scale,1))`,
128
128
  },
129
129
  width: {
130
130
  content: '700px',
@@ -498,8 +498,61 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
498
498
  },
499
499
  },
500
500
  {
501
- getCSS: (ctx) => `
502
- @layer preflightBase, components, responsive, variants, utilities;
501
+ getCSS: (ctx) => {
502
+ const lightMode = `
503
+ --wash-saturation-tweak: ${lightModeSaturationTweak};
504
+ --mode-mult: 1;
505
+ ${lightColors}
506
+ --color-dark-blend: var(--palette-dark-blend);
507
+ --color-light-blend: var(--palette-light-blend);
508
+ --color-dark-blend-2: var(--palette-dark-blend-2);
509
+ --color-light-blend-2: var(--palette-light-blend-2);
510
+ --color-black: var(--palette-true-black);
511
+ --color-white: var(--palette-white);
512
+ --color-gray-1: var(--palette-gray-1);
513
+ --color-gray-2: var(--palette-gray-2);
514
+ --color-gray-3: var(--palette-gray-3);
515
+ --color-gray-4: var(--palette-gray-4);
516
+ --color-gray-5: var(--palette-gray-5);
517
+ --color-gray-6: var(--palette-gray-6);
518
+ --color-gray-7: var(--palette-gray-7);
519
+ --color-gray-8: var(--palette-gray-8);
520
+ --color-gray-9: var(--palette-gray-9);
521
+ --color-gray-0: var(--palette-gray-0);
522
+ --color-gray-blend: var(--palette-gray-blend);
523
+ --color-gray-dark-blend: var(--palette-gray-dark-blend);
524
+ --color-shadow-1: var(--palette-shadow-2);
525
+ --color-shadow-2: var(--palette-shadow-1);
526
+ --color-overlay: var(--palette-white-overlay);
527
+ `;
528
+ const darkMode = `
529
+ --wash-saturation-tweak: ${darkModeSaturationTweak};
530
+ --mode-mult: -1;
531
+ ${darkColors}
532
+ --color-dark-blend: var(--palette-light-blend);
533
+ --color-light-blend: var(--palette-dark-blend);
534
+ --color-dark-blend-2: var(--palette-light-blend-2);
535
+ --color-light-blend-2: var(--palette-dark-blend-2);
536
+ --color-black: var(--palette-true-white);
537
+ --color-white: var(--palette-black);
538
+ --color-gray-1: var(--palette-gray-ex-2);
539
+ --color-gray-2: var(--palette-gray-ex-1);
540
+ --color-gray-3: var(--palette-gray-0);
541
+ --color-gray-4: var(--palette-gray-9);
542
+ --color-gray-5: var(--palette-gray-8);
543
+ --color-gray-6: var(--palette-gray-7);
544
+ --color-gray-7: var(--palette-gray-6);
545
+ --color-gray-8: var(--palette-gray-5);
546
+ --color-gray-9: var(--palette-gray-4);
547
+ --color-gray-0: var(--palette-gray-3);
548
+ --color-gray-blend: var(--palette-light-gray-blend);
549
+ --color-gray-dark-blend: var(--palette-light-gray-dark-blend);
550
+ --color-shadow-1: var(--palette-shadow-4);
551
+ --color-shadow-2: var(--palette-shadow-3);
552
+ --color-overlay: var(--palette-black-overlay);
553
+ `;
554
+ return `
555
+ @layer preflightBase, preflightVariant, components, responsive, variants, utilities;
503
556
 
504
557
  :root {
505
558
  --palette-red-90: #fff4f0;
@@ -511,8 +564,8 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
511
564
  --palette-red-30: #ae562d;
512
565
  --palette-red-20: #804020;
513
566
  --palette-red-10: #702604;
514
- --palette-red-00:rgb(52, 39, 35);
515
- --palette-green-90: #e8ffef;
567
+ --palette-red-00:rgb(37, 28, 25);
568
+ --palette-green-90:rgb(238, 252, 242);
516
569
  --palette-green-80: #c2ffe9;
517
570
  --palette-green-70: #92f2d1;
518
571
  --palette-green-60: #86efc8;
@@ -527,12 +580,12 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
527
580
  --palette-yellow-70: #ffdf7c;
528
581
  --palette-yellow-60: #ffdb57;
529
582
  --palette-yellow-50: #e1b83c;
530
- --palette-yellow-40: #ac7c04;
531
- --palette-yellow-30: #8e5c00;
532
- --palette-yellow-20: #714d00;
533
- --palette-yellow-10: #634500;
534
- --palette-yellow-00:rgb(56, 50, 30);
535
- --palette-blue-90:rgb(231, 246, 255);
583
+ --palette-yellow-40:rgb(171, 134, 38);
584
+ --palette-yellow-30:rgb(139, 98, 20);
585
+ --palette-yellow-20:rgb(111, 83, 23);
586
+ --palette-yellow-10:rgb(84, 62, 12);
587
+ --palette-yellow-00:rgb(37, 33, 22);
588
+ --palette-blue-90:rgb(236, 244, 249);
536
589
  --palette-blue-80: #c4e7ff;
537
590
  --palette-blue-70: #87d3fc;
538
591
  --palette-blue-60: #5fcefe;
@@ -547,11 +600,11 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
547
600
  --palette-purple-70: #c8cdff;
548
601
  --palette-purple-60: #aab1ff;
549
602
  --palette-purple-50: #8490f4;
550
- --palette-purple-40: #6d78d7;
551
- --palette-purple-30: #6068c0;
552
- --palette-purple-20: #5a62a7;
553
- --palette-purple-10: #464d8a;
554
- --palette-purple-00:rgb(28, 30, 41);
603
+ --palette-purple-40:rgb(95, 103, 184);
604
+ --palette-purple-30:rgb(90, 96, 157);
605
+ --palette-purple-20:rgb(76, 81, 122);
606
+ --palette-purple-10:rgb(64, 67, 101);
607
+ --palette-purple-00:rgb(27, 24, 44);
555
608
  --palette-light-blend: rgba(255, 255, 255, 0.8);
556
609
  --palette-light-blend-2: rgba(255, 255, 255, 0.6);
557
610
  --palette-dark-blend: rgba(0, 0, 0, 0.65);
@@ -578,6 +631,9 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
578
631
  --palette-true-gray-00: #1f1f1f;
579
632
 
580
633
  --final-saturation: calc(${saturationPercent} * var(--global-saturation, 1));
634
+ --global-corner-scale: ${cornerScale};
635
+ --global-border-scale: ${borderScale};
636
+ --global-spacing-scale: ${spacingScale};
581
637
 
582
638
  --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))));
583
639
  --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--final-saturation, 1)) calc(l * 1.125));
@@ -618,281 +674,188 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
618
674
  --z-overdraw: 100000;
619
675
  }
620
676
 
621
- /* LIGHT THEME */
622
- html {
623
- --wash-saturation-tweak: ${lightModeSaturationTweak};
624
-
625
- ${lightColors}
626
- --color-dark-blend: var(--palette-dark-blend);
627
- --color-light-blend: var(--palette-light-blend);
628
- --color-dark-blend-2: var(--palette-dark-blend-2);
629
- --color-light-blend-2: var(--palette-light-blend-2);
630
- --color-black: var(--palette-true-black);
631
- --color-white: var(--palette-white);
632
- --color-gray-1: var(--palette-gray-1);
633
- --color-gray-2: var(--palette-gray-2);
634
- --color-gray-3: var(--palette-gray-3);
635
- --color-gray-4: var(--palette-gray-4);
636
- --color-gray-5: var(--palette-gray-5);
637
- --color-gray-6: var(--palette-gray-6);
638
- --color-gray-7: var(--palette-gray-7);
639
- --color-gray-8: var(--palette-gray-8);
640
- --color-gray-9: var(--palette-gray-9);
641
- --color-gray-0: var(--palette-gray-0);
642
- --color-gray-blend: var(--palette-gray-blend);
643
- --color-gray-dark-blend: var(--palette-gray-dark-blend);
644
- --color-shadow-1: var(--palette-shadow-2);
645
- --color-shadow-2: var(--palette-shadow-1);
646
- --color-overlay: var(--palette-white-overlay);
647
-
648
-
649
- /* DEFAULT THEME (LEMON) */
650
- --color-attention-light: var(--color-red-light);
651
- --color-attention: var(--color-red);
652
- --color-attention-dark: var(--color-red-dark);
653
- --color-attention-wash: var(--color-red-wash);
654
- --color-accent: var(--color-green);
655
- --color-accent-wash: var(--color-green-wash);
656
- --color-accent-light: var(--color-green-light);
657
- --color-accent-dark: var(--color-green-dark);
658
- --color-primary: var(--color-yellow);
659
- --color-primary-light: var(--color-yellow-light);
660
- --color-primary-dark: var(--color-yellow-dark);
661
- --color-primary-wash: var(--color-yellow-wash);
662
- --gray-hue-tweak: -30;
663
- }
664
-
665
- /* INTRINSIC DARK THEME */
666
- @media(prefers-color-scheme: dark) {
677
+ @layer preflightBase {
678
+ /* LIGHT THEME */
667
679
  html {
668
- --wash-saturation-tweak: ${darkModeSaturationTweak};
669
- --mode-mult: -1;
670
- ${darkColors}
671
- --color-dark-blend: var(--palette-light-blend);
672
- --color-light-blend: var(--palette-dark-blend);
673
- --color-dark-blend-2: var(--palette-light-blend-2);
674
- --color-light-blend-2: var(--palette-dark-blend-2);
675
- --color-black: var(--palette-true-white);
676
- --color-white: var(--palette-black);
677
- --color-gray-1: var(--palette-gray-ex-2);
678
- --color-gray-2: var(--palette-gray-ex-1);
679
- --color-gray-3: var(--palette-gray-0);
680
- --color-gray-4: var(--palette-gray-9);
681
- --color-gray-5: var(--palette-gray-8);
682
- --color-gray-6: var(--palette-gray-7);
683
- --color-gray-7: var(--palette-gray-6);
684
- --color-gray-8: var(--palette-gray-5);
685
- --color-gray-9: var(--palette-gray-4);
686
- --color-gray-0: var(--palette-gray-3);
687
- --color-gray-blend: var(--palette-light-gray-blend);
688
- --color-gray-dark-blend: var(--palette-light-gray-dark-blend);
689
- --color-shadow-1: var(--palette-shadow-4);
690
- --color-shadow-2: var(--palette-shadow-3);
691
- --color-overlay: var(--palette-black-overlay);
680
+ ${lightMode}
681
+
682
+ /* DEFAULT THEME (LEMON) */
683
+ --color-attention-light: var(--color-red-light);
684
+ --color-attention: var(--color-red);
685
+ --color-attention-dark: var(--color-red-dark);
686
+ --color-attention-wash: var(--color-red-wash);
687
+ --color-accent: var(--color-green);
688
+ --color-accent-wash: var(--color-green-wash);
689
+ --color-accent-light: var(--color-green-light);
690
+ --color-accent-dark: var(--color-green-dark);
691
+ --color-primary: var(--color-yellow);
692
+ --color-primary-light: var(--color-yellow-light);
693
+ --color-primary-dark: var(--color-yellow-dark);
694
+ --color-primary-wash: var(--color-yellow-wash);
695
+ --gray-hue-tweak: -30;
692
696
  }
693
- }
694
697
 
695
- /** SYSTEM OVERRIDES **/
696
- @media(prefers-color-scheme: dark) {
697
- html.override-light {
698
- --wash-saturation-tweak: ${lightModeSaturationTweak};
699
- --mode-mult: 1;
700
- ${lightColors}
701
- --color-dark-blend: var(--palette-dark-blend);
702
- --color-light-blend: var(--palette-light-blend);
703
- --color-dark-blend-2: var(--palette-dark-blend-2);
704
- --color-light-blend-2: var(--palette-light-blend-2);
705
- --color-black: var(--palette-true-black);
706
- --color-white: var(--palette-white);
707
- --color-gray-1: var(--palette-gray-1);
708
- --color-gray-2: var(--palette-gray-2);
709
- --color-gray-3: var(--palette-gray-3);
710
- --color-gray-4: var(--palette-gray-4);
711
- --color-gray-5: var(--palette-gray-5);
712
- --color-gray-6: var(--palette-gray-6);
713
- --color-gray-7: var(--palette-gray-7);
714
- --color-gray-8: var(--palette-gray-8);
715
- --color-gray-9: var(--palette-gray-9);
716
- --color-gray-0: var(--palette-gray-0);
717
- --color-gray-blend: var(--palette-gray-blend);
718
- --color-gray-dark-blend: var(--palette-gray-dark-blend);
719
- --color-shadow-1: var(--palette-shadow-2);
720
- --color-shadow-2: var(--palette-shadow-1);
721
- --color-overlay: var(--palette-white-overlay);
698
+ /* INTRINSIC DARK THEME */
699
+ @media(prefers-color-scheme: dark) {
700
+ html {
701
+ ${darkMode}
702
+ }
722
703
  }
723
- }
724
704
 
725
- @media(prefers-color-scheme: light) {
726
- html.override-dark {
727
- --wash-saturation-tweak: ${darkModeSaturationTweak};
728
- --mode-mult: -1;
729
- ${darkColors}
730
- --color-dark-blend: var(--palette-light-blend);
731
- --color-light-blend: var(--palette-dark-blend);
732
- --color-dark-blend-2: var(--palette-light-blend-2);
733
- --color-light-blend-2: var(--palette-dark-blend-2);
734
- --color-black: var(--palette-true-white);
735
- --color-white: var(--palette-black);
736
- --color-gray-1: var(--palette-gray-ex-2);
737
- --color-gray-2: var(--palette-gray-ex-1);
738
- --color-gray-3: var(--palette-gray-0);
739
- --color-gray-4: var(--palette-gray-9);
740
- --color-gray-5: var(--palette-gray-8);
741
- --color-gray-6: var(--palette-gray-7);
742
- --color-gray-7: var(--palette-gray-6);
743
- --color-gray-8: var(--palette-gray-5);
744
- --color-gray-9: var(--palette-gray-4);
745
- --color-gray-0: var(--palette-gray-3);
746
- --color-gray-blend: var(--palette-light-gray-blend);
747
- --color-gray-dark-blend: var(--palette-light-gray-dark-blend);
748
- --color-shadow-1: var(--palette-shadow-4);
749
- --color-shadow-2: var(--palette-shadow-3);
750
- --color-overlay: var(--palette-black-overlay);
705
+ .theme-lemon {
706
+ --color-attention-light: var(--color-red-light);
707
+ --color-attention: var(--color-red);
708
+ --color-attention-dark: var(--color-red-dark);
709
+ --color-attention-wash: var(--color-red-wash);
710
+ --color-accent: var(--color-green);
711
+ --color-accent-wash: var(--color-green-wash);
712
+ --color-accent-light: var(--color-green-light);
713
+ --color-accent-dark: var(--color-green-dark);
714
+ --color-primary: var(--color-yellow);
715
+ --color-primary-light: var(--color-yellow-light);
716
+ --color-primary-dark: var(--color-yellow-dark);
717
+ --color-primary-wash: var(--color-yellow-wash);
718
+
719
+ --gray-hue-tweak: -20;
751
720
  }
752
- }
753
721
 
754
- .theme-lemon {
755
- --color-attention-light: var(--color-red-light);
756
- --color-attention: var(--color-red);
757
- --color-attention-dark: var(--color-red-dark);
758
- --color-attention-wash: var(--color-red-wash);
759
- --color-accent: var(--color-green);
760
- --color-accent-wash: var(--color-green-wash);
761
- --color-accent-light: var(--color-green-light);
762
- --color-accent-dark: var(--color-green-dark);
763
- --color-primary: var(--color-yellow);
764
- --color-primary-light: var(--color-yellow-light);
765
- --color-primary-dark: var(--color-yellow-dark);
766
- --color-primary-wash: var(--color-yellow-wash);
767
-
768
- --gray-hue-tweak: -20;
769
- }
722
+ /* fix yellow hue in dark mode */
723
+ @media(prefers-color-scheme: dark) {
724
+ .theme-lemon {
725
+ --gray-hue-tweak: 0;
726
+ }
770
727
 
771
- /* fix yellow hue in dark mode */
772
- @media(prefers-color-scheme: dark) {
773
- .theme-lemon {
728
+ html.override-light.theme-lemon, html.override-light .theme-lemon {
729
+ --gray-hue-tweak: -20;
730
+ }
731
+ }
732
+
733
+ html.override-dark.theme-lemon, html.override-dark .theme-lemon {
774
734
  --gray-hue-tweak: 0;
775
735
  }
776
736
 
777
- html.override-light.theme-lemon, html.override-light .theme-lemon {
737
+ .theme-blueberry {
738
+ --color-attention-light: var(--color-red-light);
739
+ --color-attention: var(--color-red);
740
+ --color-attention-dark: var(--color-red-dark);
741
+ --color-attention-wash: var(--color-red-wash);
742
+ --color-accent: var(--color-green);
743
+ --color-accent-wash: var(--color-green-wash);
744
+ --color-accent-light: var(--color-green-light);
745
+ --color-accent-dark: var(--color-green-dark);
746
+ --color-primary: var(--color-blue);
747
+ --color-primary-light: var(--color-blue-light);
748
+ --color-primary-dark: var(--color-blue-dark);
749
+ --color-primary-wash: var(--color-blue-wash);
750
+
751
+ --gray-hue-tweak: 20;
752
+ }
753
+
754
+ .theme-eggplant {
755
+ --color-attention-light: var(--color-red-light);
756
+ --color-attention: var(--color-red);
757
+ --color-attention-dark: var(--color-red-dark);
758
+ --color-attention-wash: var(--color-red-wash);
759
+ --color-accent: var(--color-green);
760
+ --color-accent-wash: var(--color-green-wash);
761
+ --color-accent-light: var(--color-green-light);
762
+ --color-accent-dark: var(--color-green-dark);
763
+ --color-primary: var(--color-purple);
764
+ --color-primary-light: var(--color-purple-light);
765
+ --color-primary-dark: var(--color-purple-dark);
766
+ --color-primary-wash: var(--color-purple-wash);
767
+
778
768
  --gray-hue-tweak: -20;
779
769
  }
780
- }
781
770
 
782
- html.override-dark.theme-lemon, html.override-dark .theme-lemon {
783
- --gray-hue-tweak: 0;
784
- }
771
+ .theme-leek {
772
+ --color-attention-light: var(--color-red-light);
773
+ --color-attention: var(--color-red);
774
+ --color-attention-dark: var(--color-red-dark);
775
+ --color-attention-wash: var(--color-red-wash);
776
+ --color-accent: var(--color-blue);
777
+ --color-accent-wash: var(--color-blue-wash);
778
+ --color-accent-light: var(--color-blue-light);
779
+ --color-accent-dark: var(--color-blue-dark);
780
+ --color-primary: var(--color-green);
781
+ --color-primary-light: var(--color-green-light);
782
+ --color-primary-dark: var(--color-green-dark);
783
+ --color-primary-wash: var(--color-green-wash);
784
+
785
+ --gray-hue-tweak: 20;
786
+ }
785
787
 
786
- .theme-blueberry {
787
- --color-attention-light: var(--color-red-light);
788
- --color-attention: var(--color-red);
789
- --color-attention-dark: var(--color-red-dark);
790
- --color-attention-wash: var(--color-red-wash);
791
- --color-accent: var(--color-green);
792
- --color-accent-wash: var(--color-green-wash);
793
- --color-accent-light: var(--color-green-light);
794
- --color-accent-dark: var(--color-green-dark);
795
- --color-primary: var(--color-blue);
796
- --color-primary-light: var(--color-blue-light);
797
- --color-primary-dark: var(--color-blue-dark);
798
- --color-primary-wash: var(--color-blue-wash);
799
-
800
- --gray-hue-tweak: 20;
801
- }
788
+ .theme-tomato {
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: hsl(from var(--color-red) calc(h - 20) s l);
798
+ --color-primary-light: hsl(from var(--color-red-light) calc(h - 20) s l);
799
+ --color-primary-dark: hsl(from var(--color-red-dark) calc(h - 20) s l);
800
+ --color-primary-wash: hsl(from var(--color-red-wash) calc(h - 20) s l);
802
801
 
803
- .theme-eggplant {
804
- --color-attention-light: var(--color-red-light);
805
- --color-attention: var(--color-red);
806
- --color-attention-dark: var(--color-red-dark);
807
- --color-attention-wash: var(--color-red-wash);
808
- --color-accent: var(--color-green);
809
- --color-accent-wash: var(--color-green-wash);
810
- --color-accent-light: var(--color-green-light);
811
- --color-accent-dark: var(--color-green-dark);
812
- --color-primary: var(--color-purple);
813
- --color-primary-light: var(--color-purple-light);
814
- --color-primary-dark: var(--color-purple-dark);
815
- --color-primary-wash: var(--color-purple-wash);
816
-
817
- --gray-hue-tweak: -20;
818
- }
802
+ --gray-hue-tweak: -20;
803
+ }
819
804
 
820
- .theme-leek {
821
- --color-attention-light: var(--color-red-light);
822
- --color-attention: var(--color-red);
823
- --color-attention-dark: var(--color-red-dark);
824
- --color-attention-wash: var(--color-red-wash);
825
- --color-accent: var(--color-blue);
826
- --color-accent-wash: var(--color-blue-wash);
827
- --color-accent-light: var(--color-blue-light);
828
- --color-accent-dark: var(--color-blue-dark);
829
- --color-primary: var(--color-green);
830
- --color-primary-light: var(--color-green-light);
831
- --color-primary-dark: var(--color-green-dark);
832
- --color-primary-wash: var(--color-green-wash);
833
-
834
- --gray-hue-tweak: 20;
835
- }
805
+ .theme-salt {
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-primary: var(--color-true-gray);
811
+ --color-primary-wash: var(--color-true-gray-wash);
812
+ --color-primary-light: var(--color-true-gray-light);
813
+ --color-primary-dark: var(--color-true-gray-dark);
814
+ --color-accent: var(--color-true-gray-light);
815
+ --color-accent-light: var(--color-true-gray-wash);
816
+ --color-accent-dark: var(--color-true-gray);
817
+ --color-accent-wash: var(--color-white);
818
+
819
+ --global-saturation: 0;
820
+ }
836
821
 
837
- .theme-tomato {
838
- --color-attention-light: var(--color-red-light);
839
- --color-attention: var(--color-red);
840
- --color-attention-dark: var(--color-red-dark);
841
- --color-attention-wash: var(--color-red-wash);
842
- --color-accent: var(--color-green);
843
- --color-accent-wash: var(--color-green-wash);
844
- --color-accent-light: var(--color-green-light);
845
- --color-accent-dark: var(--color-green-dark);
846
- --color-primary: hsl(from var(--color-red) calc(h - 20) s l);
847
- --color-primary-light: hsl(from var(--color-red-light) calc(h - 20) s l);
848
- --color-primary-dark: hsl(from var(--color-red-dark) calc(h - 20) s l);
849
- --color-primary-wash: hsl(from var(--color-red-wash) calc(h - 20) s l);
850
-
851
- --gray-hue-tweak: -20;
852
- }
822
+ html, body {
823
+ margin: 0;
824
+ padding: 0;
825
+ font-family: "Inter", sans-serif;
826
+ font-size: 16px;
827
+ height: 100%;
828
+ --webkit-font-smoothing: antialiased;
829
+ }
853
830
 
854
- .theme-salt {
855
- --color-attention-light: var(--color-red-light);
856
- --color-attention: var(--color-red);
857
- --color-attention-dark: var(--color-red-dark);
858
- --color-attention-wash: var(--color-red-wash);
859
- --color-primary: var(--color-true-gray);
860
- --color-primary-wash: var(--color-true-gray-wash);
861
- --color-primary-light: var(--color-true-gray-light);
862
- --color-primary-dark: var(--color-true-gray-dark);
863
- --color-accent: var(--color-true-gray-light);
864
- --color-accent-light: var(--color-true-gray-wash);
865
- --color-accent-dark: var(--color-true-gray);
866
- --color-accent-wash: var(--color-white);
867
-
868
- --global-saturation: 0;
869
- }
831
+ body {
832
+ height: 100%;
833
+ background-color: var(--color-wash);
834
+ color: var(--color-black);
835
+ overflow: overlay;
836
+ }
870
837
 
871
- html, body {
872
- margin: 0;
873
- padding: 0;
874
- font-family: "Inter", sans-serif;
875
- font-size: 16px;
876
- height: 100%;
877
- --webkit-font-smoothing: antialiased;
878
- }
838
+ a {
839
+ color: inherit;
840
+ text-decoration: none;
841
+ }
879
842
 
880
- body {
881
- height: 100%;
882
- background-color: var(--color-wash);
883
- color: var(--color-black);
884
- overflow: overlay;
885
- }
843
+ * {
844
+ box-sizing: border-box;
845
+ -webkit-tap-highlight-color: transparent;
846
+ }
847
+ }
886
848
 
887
- a {
888
- color: inherit;
889
- text-decoration: none;
890
- }
849
+ @layer preflightVariants {
850
+ /** SYSTEM OVERRIDES **/
851
+ .override-light {
852
+ ${lightMode}
853
+ }
891
854
 
892
- * {
893
- box-sizing: border-box;
894
- -webkit-tap-highlight-color: transparent;
895
- }
855
+ .override-dark {
856
+ ${darkMode}
857
+ }
858
+ }
896
859
 
897
860
  @font-face {
898
861
  font-family: "Inter";
@@ -922,7 +885,13 @@ function presetAglio({ scale = 'md', interFontLocation = 'https://resources.bisc
922
885
  syntax: "*";
923
886
  inherits: false;
924
887
  }
925
- `,
888
+
889
+ @property --local-corner-scale {
890
+ syntax: "*";
891
+ inherits: false;
892
+ }
893
+ `;
894
+ },
926
895
  },
927
896
  ],
928
897
  presets: [
@@ -957,7 +926,7 @@ function makeSpacing(increment) {
957
926
  .reduce((acc, cur, i) => {
958
927
  acc[i] = cur;
959
928
  return acc;
960
- }, {})), { xs: 'calc(0.25rem * var(--spacing-scale,1))', sm: 'calc(0.5rem * var(--spacing-scale,1))', md: 'calc(1rem * var(--spacing-scale,1))', lg: 'calc(2rem * var(--spacing-scale,1))', xl: 'calc(3rem * var(--spacing-scale,1))' });
929
+ }, {})), { xs: 'calc(0.25rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))', sm: 'calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))', md: 'calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))', lg: 'calc(2rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))', xl: 'calc(3rem * var(--spacing-scale,1) * var(--global-spacing-scale,1))' });
961
930
  }
962
931
  function resolveThemeColor(color, theme) {
963
932
  if (typeof color === 'string' &&