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