@a-type/ui 1.7.2 → 1.7.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 (17) hide show
  1. package/dist/cjs/components/datePicker/DatePicker.js +1 -1
  2. package/dist/cjs/components/datePicker/DatePicker.js.map +1 -1
  3. package/dist/cjs/themes.stories.js +2 -2
  4. package/dist/cjs/themes.stories.js.map +1 -1
  5. package/dist/cjs/uno.preset.js +66 -44
  6. package/dist/cjs/uno.preset.js.map +1 -1
  7. package/dist/css/main.css +82 -41
  8. package/dist/esm/components/datePicker/DatePicker.js +1 -1
  9. package/dist/esm/components/datePicker/DatePicker.js.map +1 -1
  10. package/dist/esm/themes.stories.js +2 -2
  11. package/dist/esm/themes.stories.js.map +1 -1
  12. package/dist/esm/uno.preset.js +66 -44
  13. package/dist/esm/uno.preset.js.map +1 -1
  14. package/package.json +1 -1
  15. package/src/components/datePicker/DatePicker.tsx +1 -1
  16. package/src/themes.stories.tsx +4 -1
  17. package/src/uno.preset.ts +66 -52
package/src/uno.preset.ts CHANGED
@@ -21,7 +21,7 @@ export default function presetAglio({
21
21
  },
22
22
  borderScale = 1,
23
23
  roundedness = 1,
24
- saturation = 20,
24
+ saturation = 10,
25
25
  }: {
26
26
  scale?: 'sm' | 'md' | 'lg';
27
27
  interFontLocation?: string;
@@ -546,7 +546,7 @@ export default function presetAglio({
546
546
  --palette-red-20: #804020;
547
547
  --palette-red-10: #702604;
548
548
  --palette-red-00: #321f19;
549
- --palette-green-90: #f0fff5;
549
+ --palette-green-90: #e8ffef;
550
550
  --palette-green-80: #c2ffe9;
551
551
  --palette-green-70: #92f2d1;
552
552
  --palette-green-60: #86efc8;
@@ -556,7 +556,7 @@ export default function presetAglio({
556
556
  --palette-green-20: #246869;
557
557
  --palette-green-10: #274e50;
558
558
  --palette-green-00: #18352e;
559
- --palette-yellow-90: #fff9ea;
559
+ --palette-yellow-90: #fffbee;
560
560
  --palette-yellow-80: #fff1c7;
561
561
  --palette-yellow-70: #ffdf7c;
562
562
  --palette-yellow-60: #ffdb57;
@@ -566,7 +566,7 @@ export default function presetAglio({
566
566
  --palette-yellow-20: #714d00;
567
567
  --palette-yellow-10: #634500;
568
568
  --palette-yellow-00: #3b1c00;
569
- --palette-blue-90: #eef8fe;
569
+ --palette-blue-90:rgb(231, 246, 255);
570
570
  --palette-blue-80: #c4e7ff;
571
571
  --palette-blue-70: #87d3fc;
572
572
  --palette-blue-60: #5fcefe;
@@ -576,7 +576,7 @@ export default function presetAglio({
576
576
  --palette-blue-20: #005979;
577
577
  --palette-blue-10: #004c69;
578
578
  --palette-blue-00: #092c3a;
579
- --palette-purple-90: #f1efff;
579
+ --palette-purple-90:rgb(239, 236, 255);
580
580
  --palette-purple-80: #e0e0ff;
581
581
  --palette-purple-70: #c8cdff;
582
582
  --palette-purple-60: #aab1ff;
@@ -585,27 +585,11 @@ export default function presetAglio({
585
585
  --palette-purple-30: #6068c0;
586
586
  --palette-purple-20: #5a62a7;
587
587
  --palette-purple-10: #464d8a;
588
- --palette-purple-00: #272a39;
588
+ --palette-purple-00:rgb(28, 30, 41);
589
589
  --palette-light-blend: rgba(255, 255, 255, 0.8);
590
590
  --palette-light-blend-2: rgba(255, 255, 255, 0.6);
591
591
  --palette-dark-blend: rgba(0, 0, 0, 0.65);
592
592
  --palette-dark-blend-2: rgba(0, 0, 0, 0.4);
593
- --palette-black: #303030;
594
- --palette-white: #fff;
595
- --palette-light: #f8f8fb;
596
- --palette-dark: #0a0a0b;
597
- --palette-gray-1: #fafafc;
598
- --palette-gray-2: #f5f5f8;
599
- --palette-gray-3: #eeeef2;
600
- --palette-gray-4: #e0e0e9;
601
- --palette-gray-5: #bdbdc7;
602
- --palette-gray-6: #939eaa;
603
- --palette-gray-7: #6f7a86;
604
- --palette-gray-8: #4d5660;
605
- --palette-gray-9: #3c3c3f;
606
- --palette-gray-0: #2b2b2f;
607
- --palette-gray-ex-1: #232326;
608
- --palette-gray-ex-2: #1b1b1f;
609
593
  --palette-gray-blend: rgba(0, 0, 20, 0.025);
610
594
  --palette-gray-dark-blend: rgba(0, 0, 20, 0.05);
611
595
  --palette-light-gray-blend: rgba(255, 255, 255, 0.05);
@@ -616,20 +600,48 @@ export default function presetAglio({
616
600
  --palette-shadow-4: rgba(0, 0, 0, 0.5);
617
601
  --palette-white-overlay: rgba(255, 255, 255, 0.4);
618
602
  --palette-black-overlay: rgba(0, 0, 0, 0.4);
603
+ --palette-true-gray-90: #fcfcfc;
604
+ --palette-true-gray-80: #f4f4f4;
605
+ --palette-true-gray-70: #e7e7e7;
606
+ --palette-true-gray-60: #d6d6d6;
607
+ --palette-true-gray-50: #a6a6a6;
608
+ --palette-true-gray-40: #7d7d7d;
609
+ --palette-true-gray-30: #6a6a6a;
610
+ --palette-true-gray-20: #4f4f4f;
611
+ --palette-true-gray-10: #383838;
612
+ --palette-true-gray-00: #1f1f1f;
619
613
 
620
- --color-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * ${Math.min(
621
- 1,
622
- saturationPercent,
623
- )} * var(--wash-saturation-tweak, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
624
- --color-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * ${saturationPercent}) calc(l * 1.125));
625
- --color-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * ${
626
- saturationPercent * 0.75
627
- }) calc(l * pow(1.125, var(--mode-mult,1))));
628
- --color-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * ${
629
- saturationPercent * 0.5
630
- }) calc(l * pow(1.25, var(--mode-mult,1))));
614
+ --final-saturation: calc(${saturationPercent} * var(--global-saturation, 1));
615
+
616
+ --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))));
617
+ --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
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--final-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
619
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--final-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
631
620
  --color-wash: var(--color-gray-wash);
632
621
 
622
+ --color-gray-wash: var(--palette-gray-wash);
623
+ --color-gray: var(--palette-gray);
624
+ --color-gray-dark: var(--palette-gray-dark);
625
+ --color-gray-light: var(--palette-gray-light);
626
+
627
+ --palette-gray-1: var(--color-gray-wash);
628
+ --palette-gray-2: var(--color-gray-light);
629
+ --palette-gray-3: var(--color-gray-light);
630
+ --palette-gray-4: var(--color-gray);
631
+ --palette-gray-5: var(--color-gray);
632
+ --palette-gray-6: var(--color-gray);
633
+ --palette-gray-7: var(--color-gray-dark);
634
+ --palette-gray-8: var(--color-gray-dark);
635
+ --palette-gray-9: var(--color-black);
636
+ --palette-gray-0: var(--color-black);
637
+ --palette-gray-ex-1: var(--color-black);
638
+ --palette-gray-ex-2: var(--color-black);
639
+
640
+ --palette-true-white: #ffffff;
641
+ --palette-true-black: #303030;
642
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--final-saturation, 1)) calc(min(100, l + 1 / var(--final-saturation, 1))));
643
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--final-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--final-saturation, 1), 1.5)))));
644
+
633
645
  --z-nowPlaying: 40;
634
646
  --z-nav: 50;
635
647
  --z-menu: 100;
@@ -649,7 +661,7 @@ export default function presetAglio({
649
661
  --color-light-blend: var(--palette-light-blend);
650
662
  --color-dark-blend-2: var(--palette-dark-blend-2);
651
663
  --color-light-blend-2: var(--palette-light-blend-2);
652
- --color-black: var(--palette-black);
664
+ --color-black: var(--palette-true-black);
653
665
  --color-white: var(--palette-white);
654
666
  --color-gray-1: var(--palette-gray-1);
655
667
  --color-gray-2: var(--palette-gray-2);
@@ -694,7 +706,7 @@ export default function presetAglio({
694
706
  --color-light-blend: var(--palette-dark-blend);
695
707
  --color-dark-blend-2: var(--palette-light-blend-2);
696
708
  --color-light-blend-2: var(--palette-dark-blend-2);
697
- --color-black: var(--palette-white);
709
+ --color-black: var(--palette-true-white);
698
710
  --color-white: var(--palette-black);
699
711
  --color-gray-1: var(--palette-gray-ex-2);
700
712
  --color-gray-2: var(--palette-gray-ex-1);
@@ -724,7 +736,7 @@ export default function presetAglio({
724
736
  --color-light-blend: var(--palette-light-blend);
725
737
  --color-dark-blend-2: var(--palette-dark-blend-2);
726
738
  --color-light-blend-2: var(--palette-light-blend-2);
727
- --color-black: var(--palette-black);
739
+ --color-black: var(--palette-true-black);
728
740
  --color-white: var(--palette-white);
729
741
  --color-gray-1: var(--palette-gray-1);
730
742
  --color-gray-2: var(--palette-gray-2);
@@ -753,7 +765,7 @@ export default function presetAglio({
753
765
  --color-light-blend: var(--palette-dark-blend);
754
766
  --color-dark-blend-2: var(--palette-light-blend-2);
755
767
  --color-light-blend-2: var(--palette-dark-blend-2);
756
- --color-black: var(--palette-white);
768
+ --color-black: var(--palette-true-white);
757
769
  --color-white: var(--palette-black);
758
770
  --color-gray-1: var(--palette-gray-ex-2);
759
771
  --color-gray-2: var(--palette-gray-ex-1);
@@ -787,7 +799,7 @@ export default function presetAglio({
787
799
  --color-primary-dark: var(--color-yellow-dark);
788
800
  --color-primary-wash: var(--color-yellow-wash);
789
801
 
790
- --gray-hue-tweak: -30;
802
+ --gray-hue-tweak: -10;
791
803
  }
792
804
 
793
805
  .theme-blueberry {
@@ -803,6 +815,8 @@ export default function presetAglio({
803
815
  --color-primary-light: var(--color-blue-light);
804
816
  --color-primary-dark: var(--color-blue-dark);
805
817
  --color-primary-wash: var(--color-blue-wash);
818
+
819
+ --gray-hue-tweak: 20;
806
820
  }
807
821
 
808
822
  .theme-eggplant {
@@ -818,6 +832,8 @@ export default function presetAglio({
818
832
  --color-primary-light: var(--color-purple-light);
819
833
  --color-primary-dark: var(--color-purple-dark);
820
834
  --color-primary-wash: var(--color-purple-wash);
835
+
836
+ --gray-hue-tweak: -20;
821
837
  }
822
838
 
823
839
  .theme-leek {
@@ -834,7 +850,7 @@ export default function presetAglio({
834
850
  --color-primary-dark: var(--color-green-dark);
835
851
  --color-primary-wash: var(--color-green-wash);
836
852
 
837
- --gray-hue-tweak: 50;
853
+ --gray-hue-tweak: 20;
838
854
  }
839
855
 
840
856
  .theme-tomato {
@@ -859,14 +875,16 @@ export default function presetAglio({
859
875
  --color-attention: var(--color-red);
860
876
  --color-attention-dark: var(--color-red-dark);
861
877
  --color-attention-wash: var(--color-red-wash);
862
- --color-accent: var(--color-gray-4);
863
- --color-accent-wash: var(--color-gray-2);
864
- --color-accent-light: var(--color-gray-3);
865
- --color-accent-dark: var(--color-gray-5);
866
- --color-primary: var(--color-gray-5);
867
- --color-primary-light: var(--color-gray-4);
868
- --color-primary-dark: var(--color-gray-6);
869
- --color-primary-wash: var(--color-white);
878
+ --color-primary: var(--color-true-gray);
879
+ --color-primary-wash: var(--color-true-gray-wash);
880
+ --color-primary-light: var(--color-true-gray-light);
881
+ --color-primary-dark: var(--color-true-gray-dark);
882
+ --color-accent: var(--color-true-gray-light);
883
+ --color-accent-light: var(--color-true-gray-wash);
884
+ --color-accent-dark: var(--color-true-gray);
885
+ --color-accent-wash: var(--color-white);
886
+
887
+ --global-saturation: 0;
870
888
  }
871
889
 
872
890
  html, body {
@@ -935,7 +953,7 @@ export default function presetAglio({
935
953
  };
936
954
  }
937
955
 
938
- const themeColors = ['red', 'green', 'yellow', 'blue', 'purple'];
956
+ const themeColors = ['red', 'green', 'yellow', 'blue', 'purple', 'true-gray'];
939
957
  function roundTens(num: number) {
940
958
  return Math.round(num / 10) * 10;
941
959
  }
@@ -1013,10 +1031,6 @@ function resolveThemeColor(color: string, theme: any) {
1013
1031
  return resolvedColor.DEFAULT;
1014
1032
  }
1015
1033
 
1016
- if (color === 'accent-light') {
1017
- console.log(resolveFrom, resolvedColor);
1018
- }
1019
-
1020
1034
  return resolvedColor;
1021
1035
  }
1022
1036