@acorex/styles 21.0.0-next.7 → 21.0.0-next.9

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 (3) hide show
  1. package/index.css +1 -19
  2. package/package.json +5 -4
  3. package/themes/default.css +60 -50
package/index.css CHANGED
@@ -3,23 +3,5 @@
3
3
  @forward './mixins/index.scss';
4
4
  @forward './utils/index.scss';
5
5
  @forward './variables/index.scss'; */
6
- @import './components/index.css';
7
-
6
+ @import './components';
8
7
  @import '@angular/cdk/overlay-prebuilt.css';
9
-
10
-
11
- :root {
12
- --ax-overlay-full-width: 93;
13
- --ax-sys-transition-duration: 150ms;
14
- --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
15
- }
16
-
17
- html {
18
- background-color: rgba(var(--ax-sys-color-lightest-surface));
19
- color: rgba(var(--ax-sys-color-on-lightest-surface));
20
- }
21
-
22
- html.dark {
23
- background-color: rgba(var(--ax-sys-color-darkest-surface));
24
- color: rgba(var(--ax-sys-color-on-darkest-surface));
25
- }
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "21.0.0-next.7",
3
+ "version": "21.0.0-next.9",
4
4
  "main": "index.js",
5
5
  "author": "Ali Safari",
6
6
  "license": "ISC",
7
7
  "peerDependencies": {
8
- "animated-tailwindcss": ">=4.0.0",
9
- "tailwindcss": ">=3.4.17"
8
+ "tw-animate": "^1.0.0",
9
+ "tailwindcss": "^4.0.0",
10
+ "@angular/cdk": "^20.0.0"
10
11
  }
11
- }
12
+ }
package/themes/default.css CHANGED
@@ -1,4 +1,6 @@
1
- @import 'tailwindcss';
1
+ @import "tailwindcss";
2
+ @import "tw-animate";
3
+
2
4
  @custom-variant dark (&:where(.dark, .dark *));
3
5
 
4
6
  :root {
@@ -14,6 +16,12 @@
14
16
  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
15
17
  }
16
18
 
19
+ @layer base {
20
+ * {
21
+ border-color: var(--color-border-default);
22
+ }
23
+ }
24
+
17
25
  html {
18
26
  background-color: rgba(var(--ax-sys-color-lightest-surface));
19
27
  color: rgba(var(--ax-sys-color-on-lightest-surface));
@@ -98,7 +106,7 @@ html.dark {
98
106
  --ax-sys-color-warning-200: 255, 221, 174;
99
107
  --ax-sys-color-warning-300: 255, 198, 128;
100
108
  --ax-sys-color-warning-400: 255, 168, 40;
101
- --ax-sys-color-warning-500: 253, 154, 0;
109
+ --ax-sys-color-warning-500: 253, 154, 1;
102
110
  --ax-sys-color-warning-600: 224, 127, 0;
103
111
  --ax-sys-color-warning-700: 181, 100, 0;
104
112
  --ax-sys-color-warning-800: 144, 81, 20;
@@ -213,9 +221,9 @@ html.dark {
213
221
  --ax-sys-color-on-warning-light-surface: 71, 36, 0;
214
222
  --ax-sys-color-border-warning-light-surface: 255, 182, 92;
215
223
 
216
- --ax-sys-color-warning-surface: 253, 154, 0;
224
+ --ax-sys-color-warning-surface: 253, 154, 1;
217
225
  --ax-sys-color-on-warning-surface: 255, 250, 231;
218
- --ax-sys-color-border-warning-surface: 217, 132, 0;
226
+ --ax-sys-color-border-warning-surface: 217, 132, 1;
219
227
 
220
228
  --ax-sys-color-warning-dark-surface: 224, 127, 0;
221
229
  --ax-sys-color-on-warning-dark-surface: 255, 249, 233;
@@ -256,6 +264,7 @@ html.dark {
256
264
  --ax-sys-color-danger-darkest-surface: 159, 23, 47;
257
265
  --ax-sys-color-on-danger-darkest-surface: 255, 247, 247;
258
266
  --ax-sys-color-border-danger-darkest-surface: 128, 18, 38;
267
+
259
268
  }
260
269
 
261
270
  .dark:root {
@@ -334,7 +343,7 @@ html.dark {
334
343
  --ax-sys-color-warning-400: 255, 195, 120;
335
344
  --ax-sys-color-warning-500: 255, 180, 82;
336
345
  --ax-sys-color-warning-600: 255, 165, 33;
337
- --ax-sys-color-warning-700: 253, 154, 0;
346
+ --ax-sys-color-warning-700: 253, 154, 1;
338
347
  --ax-sys-color-warning-800: 230, 133, 0;
339
348
  --ax-sys-color-warning-900: 203, 114, 0;
340
349
  --ax-sys-color-warning-950: 190, 105, 0;
@@ -455,9 +464,9 @@ html.dark {
455
464
  --ax-sys-color-on-warning-dark-surface: 40, 14, 0;
456
465
  --ax-sys-color-border-warning-dark-surface: 255, 184, 79;
457
466
 
458
- --ax-sys-color-warning-darker-surface: 253, 154, 0;
467
+ --ax-sys-color-warning-darker-surface: 253, 154, 1;
459
468
  --ax-sys-color-on-warning-darker-surface: 41, 13, 0;
460
- --ax-sys-color-border-warning-darker-surface: 255, 172, 44;
469
+ --ax-sys-color-border-warning-darker-surface: 254, 172, 46;
461
470
 
462
471
  --ax-sys-color-warning-darkest-surface: 230, 133, 0;
463
472
  --ax-sys-color-on-warning-darkest-surface: 42, 12, 0;
@@ -490,6 +499,7 @@ html.dark {
490
499
  --ax-sys-color-danger-darkest-surface: 234, 80, 109;
491
500
  --ax-sys-color-on-danger-darkest-surface: 54, 0, 8;
492
501
  --ax-sys-color-border-danger-darkest-surface: 239, 121, 143;
502
+
493
503
  }
494
504
 
495
505
  @theme {
@@ -713,43 +723,43 @@ html.dark {
713
723
  @utility lightest-surface {
714
724
  background-color: var(--color-lightest);
715
725
  color: var(--color-on-lightest);
716
- border: var(--color-border-lightest);
726
+ border: var(--color-border-lightest)
717
727
  }
718
728
 
719
729
  @utility lighter-surface {
720
730
  background-color: var(--color-lighter);
721
731
  color: var(--color-on-lighter);
722
- border: var(--color-border-lighter);
732
+ border: var(--color-border-lighter)
723
733
  }
724
734
 
725
735
  @utility light-surface {
726
736
  background-color: var(--color-light);
727
737
  color: var(--color-on-light);
728
- border: var(--color-border-light);
738
+ border: var(--color-border-light)
729
739
  }
730
740
 
731
741
  @utility surface {
732
742
  background-color: var(--color-surface);
733
743
  color: var(--color-on-surface);
734
- border: var(--color-border-surface);
744
+ border: var(--color-border-surface)
735
745
  }
736
746
 
737
747
  @utility dark-surface {
738
748
  background-color: var(--color-dark);
739
749
  color: var(--color-on-dark);
740
- border: var(--color-border-dark);
750
+ border: var(--color-border-dark)
741
751
  }
742
752
 
743
753
  @utility darker-surface {
744
754
  background-color: var(--color-darker);
745
755
  color: var(--color-on-darker);
746
- border: var(--color-border-darker);
756
+ border: var(--color-border-darker)
747
757
  }
748
758
 
749
759
  @utility darkest-surface {
750
760
  background-color: var(--color-darkest);
751
761
  color: var(--color-on-darkest);
752
- border: var(--color-border-darkest);
762
+ border: var(--color-border-darkest)
753
763
  }
754
764
 
755
765
  /* Primary Surfaces */
@@ -757,43 +767,43 @@ html.dark {
757
767
  @utility primary-lightest {
758
768
  background-color: var(--color-primary-lightest);
759
769
  color: var(--color-on-primary-lightest);
760
- border: var(--color-border-primary-lightest);
770
+ border: var(--color-border-primary-lightest)
761
771
  }
762
772
 
763
773
  @utility primary-lighter {
764
774
  background-color: var(--color-primary-lighter);
765
775
  color: var(--color-on-primary-lighter);
766
- border: var(--color-border-primary-lighter);
776
+ border: var(--color-border-primary-lighter)
767
777
  }
768
778
 
769
779
  @utility primary-light {
770
780
  background-color: var(--color-primary-light);
771
781
  color: var(--color-on-primary-light);
772
- border: var(--color-border-primary-light);
782
+ border: var(--color-border-primary-light)
773
783
  }
774
784
 
775
785
  @utility primary {
776
786
  background-color: var(--color-primary);
777
787
  color: var(--color-on-primary);
778
- border: var(--color-border-primary);
788
+ border: var(--color-border-primary)
779
789
  }
780
790
 
781
791
  @utility primary-dark {
782
792
  background-color: var(--color-primary-dark);
783
793
  color: var(--color-on-primary-dark);
784
- border: var(--color-border-primary-dark);
794
+ border: var(--color-border-primary-dark)
785
795
  }
786
796
 
787
797
  @utility primary-darker {
788
798
  background-color: var(--color-primary-darker);
789
799
  color: var(--color-on-primary-darker);
790
- border: var(--color-border-primary-darker);
800
+ border: var(--color-border-primary-darker)
791
801
  }
792
802
 
793
803
  @utility primary-darkest {
794
804
  background-color: var(--color-primary-darkest);
795
805
  color: var(--color-on-primary-darkest);
796
- border: var(--color-border-primary-darkest);
806
+ border: var(--color-border-primary-darkest)
797
807
  }
798
808
 
799
809
  /* Secondary Surfaces */
@@ -801,43 +811,43 @@ html.dark {
801
811
  @utility secondary-lightest {
802
812
  background-color: var(--color-secondary-lightest);
803
813
  color: var(--color-on-secondary-lightest);
804
- border: var(--color-border-secondary-lightest);
814
+ border: var(--color-border-secondary-lightest)
805
815
  }
806
816
 
807
817
  @utility secondary-lighter {
808
818
  background-color: var(--color-secondary-lighter);
809
819
  color: var(--color-on-secondary-lighter);
810
- border: var(--color-border-secondary-lighter);
820
+ border: var(--color-border-secondary-lighter)
811
821
  }
812
822
 
813
823
  @utility secondary-light {
814
824
  background-color: var(--color-secondary-light);
815
825
  color: var(--color-on-secondary-light);
816
- border: var(--color-border-secondary-light);
826
+ border: var(--color-border-secondary-light)
817
827
  }
818
828
 
819
829
  @utility secondary {
820
830
  background-color: var(--color-secondary);
821
831
  color: var(--color-on-secondary);
822
- border: var(--color-border-secondary);
832
+ border: var(--color-border-secondary)
823
833
  }
824
834
 
825
835
  @utility secondary-dark {
826
836
  background-color: var(--color-secondary-dark);
827
837
  color: var(--color-on-secondary-dark);
828
- border: var(--color-border-secondary-dark);
838
+ border: var(--color-border-secondary-dark)
829
839
  }
830
840
 
831
841
  @utility secondary-darker {
832
842
  background-color: var(--color-secondary-darker);
833
843
  color: var(--color-on-secondary-darker);
834
- border: var(--color-border-secondary-darker);
844
+ border: var(--color-border-secondary-darker)
835
845
  }
836
846
 
837
847
  @utility secondary-darkest {
838
848
  background-color: var(--color-secondary-darkest);
839
849
  color: var(--color-on-secondary-darkest);
840
- border: var(--color-border-secondary-darkest);
850
+ border: var(--color-border-secondary-darkest)
841
851
  }
842
852
 
843
853
  /* Success Surfaces */
@@ -845,43 +855,43 @@ html.dark {
845
855
  @utility success-lightest {
846
856
  background-color: var(--color-success-lightest);
847
857
  color: var(--color-on-success-lightest);
848
- border: var(--color-border-success-lightest);
858
+ border: var(--color-border-success-lightest)
849
859
  }
850
860
 
851
861
  @utility success-lighter {
852
862
  background-color: var(--color-success-lighter);
853
863
  color: var(--color-on-success-lighter);
854
- border: var(--color-border-success-lighter);
864
+ border: var(--color-border-success-lighter)
855
865
  }
856
866
 
857
867
  @utility success-light {
858
868
  background-color: var(--color-success-light);
859
869
  color: var(--color-on-success-light);
860
- border: var(--color-border-success-light);
870
+ border: var(--color-border-success-light)
861
871
  }
862
872
 
863
873
  @utility success {
864
874
  background-color: var(--color-success);
865
875
  color: var(--color-on-success);
866
- border: var(--color-border-success);
876
+ border: var(--color-border-success)
867
877
  }
868
878
 
869
879
  @utility success-dark {
870
880
  background-color: var(--color-success-dark);
871
881
  color: var(--color-on-success-dark);
872
- border: var(--color-border-success-dark);
882
+ border: var(--color-border-success-dark)
873
883
  }
874
884
 
875
885
  @utility success-darker {
876
886
  background-color: var(--color-success-darker);
877
887
  color: var(--color-on-success-darker);
878
- border: var(--color-border-success-darker);
888
+ border: var(--color-border-success-darker)
879
889
  }
880
890
 
881
891
  @utility success-darkest {
882
892
  background-color: var(--color-success-darkest);
883
893
  color: var(--color-on-success-darkest);
884
- border: var(--color-border-success-darkest);
894
+ border: var(--color-border-success-darkest)
885
895
  }
886
896
 
887
897
  /* Warning Surfaces */
@@ -889,43 +899,43 @@ html.dark {
889
899
  @utility warning-lightest {
890
900
  background-color: var(--color-warning-lightest);
891
901
  color: var(--color-on-warning-lightest);
892
- border: var(--color-border-warning-lightest);
902
+ border: var(--color-border-warning-lightest)
893
903
  }
894
904
 
895
905
  @utility warning-lighter {
896
906
  background-color: var(--color-warning-lighter);
897
907
  color: var(--color-on-warning-lighter);
898
- border: var(--color-border-warning-lighter);
908
+ border: var(--color-border-warning-lighter)
899
909
  }
900
910
 
901
911
  @utility warning-light {
902
912
  background-color: var(--color-warning-light);
903
913
  color: var(--color-on-warning-light);
904
- border: var(--color-border-warning-light);
914
+ border: var(--color-border-warning-light)
905
915
  }
906
916
 
907
917
  @utility warning {
908
918
  background-color: var(--color-warning);
909
919
  color: var(--color-on-warning);
910
- border: var(--color-border-warning);
920
+ border: var(--color-border-warning)
911
921
  }
912
922
 
913
923
  @utility warning-dark {
914
924
  background-color: var(--color-warning-dark);
915
925
  color: var(--color-on-warning-dark);
916
- border: var(--color-border-warning-dark);
926
+ border: var(--color-border-warning-dark)
917
927
  }
918
928
 
919
929
  @utility warning-darker {
920
930
  background-color: var(--color-warning-darker);
921
931
  color: var(--color-on-warning-darker);
922
- border: var(--color-border-warning-darker);
932
+ border: var(--color-border-warning-darker)
923
933
  }
924
934
 
925
935
  @utility warning-darkest {
926
936
  background-color: var(--color-warning-darkest);
927
937
  color: var(--color-on-warning-darkest);
928
- border: var(--color-border-warning-darkest);
938
+ border: var(--color-border-warning-darkest)
929
939
  }
930
940
 
931
941
  /* Danger Surfaces */
@@ -933,41 +943,41 @@ html.dark {
933
943
  @utility danger-lightest {
934
944
  background-color: var(--color-danger-lightest);
935
945
  color: var(--color-on-danger-lightest);
936
- border: var(--color-border-danger-lightest);
946
+ border: var(--color-border-danger-lightest)
937
947
  }
938
948
 
939
949
  @utility danger-lighter {
940
950
  background-color: var(--color-danger-lighter);
941
951
  color: var(--color-on-danger-lighter);
942
- border: var(--color-border-danger-lighter);
952
+ border: var(--color-border-danger-lighter)
943
953
  }
944
954
 
945
955
  @utility danger-light {
946
956
  background-color: var(--color-danger-light);
947
957
  color: var(--color-on-danger-light);
948
- border: var(--color-border-danger-light);
958
+ border: var(--color-border-danger-light)
949
959
  }
950
960
 
951
961
  @utility danger {
952
962
  background-color: var(--color-danger);
953
963
  color: var(--color-on-danger);
954
- border: var(--color-border-danger);
964
+ border: var(--color-border-danger)
955
965
  }
956
966
 
957
967
  @utility danger-dark {
958
968
  background-color: var(--color-danger-dark);
959
969
  color: var(--color-on-danger-dark);
960
- border: var(--color-border-danger-dark);
970
+ border: var(--color-border-danger-dark)
961
971
  }
962
972
 
963
973
  @utility danger-darker {
964
974
  background-color: var(--color-danger-darker);
965
975
  color: var(--color-on-danger-darker);
966
- border: var(--color-border-danger-darker);
976
+ border: var(--color-border-danger-darker)
967
977
  }
968
978
 
969
979
  @utility danger-darkest {
970
980
  background-color: var(--color-danger-darkest);
971
981
  color: var(--color-on-danger-darkest);
972
- border: var(--color-border-danger-darkest);
973
- }
982
+ border: var(--color-border-danger-darkest)
983
+ }