vanilla-jui 1.5.1 → 1.5.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 (24) hide show
  1. package/dist/index.d.ts +18 -2
  2. package/dist/index.js +1 -1
  3. package/dist/index.umd.js +1 -1
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
  6. package/src/components/form.ts +51 -14
  7. package/src/components/modal.ts +52 -50
  8. package/src/components/pagination.ts +3 -1
  9. package/src/css/accordion.css +13 -6
  10. package/src/css/color.css +2 -4
  11. package/src/css/color_p3.css +2 -4
  12. package/src/css/content.css +18 -18
  13. package/src/css/drop.css +1 -1
  14. package/src/css/gradient.css +1 -3
  15. package/src/css/layout.css +2 -12
  16. package/src/css/menu.css +4 -3
  17. package/src/css/offcanvas.css +1 -5
  18. package/src/css/swiper.css +1 -1
  19. package/src/css/tabs.css +1 -1
  20. package/src/css/themes/default/drop.css +1 -1
  21. package/src/css/themes/default/swiper.css +1 -1
  22. package/src/css/themes/default/tabs.css +1 -1
  23. package/src/css/tokens.css +17 -34
  24. package/src/css/tooltip.css +1 -1
package/src/css/themes/default/swiper.css CHANGED
@@ -32,4 +32,4 @@
32
32
  --swiper-navigation-size: 32px;
33
33
  }
34
34
  }
35
- }
35
+ }
package/src/css/themes/default/tabs.css CHANGED
@@ -32,4 +32,4 @@
32
32
  .j-tabs .tab-list .tab-item[aria-disabled='true'] {
33
33
  --tab-fg: var(--ui-border-strong);
34
34
  }
35
- }
35
+ }
package/src/css/tokens.css CHANGED
@@ -103,8 +103,7 @@
103
103
  ============================================ */
104
104
 
105
105
  :root,
106
- .light,
107
- .light-theme {
106
+ .light {
108
107
  /* UI Structure */
109
108
  --ui-bg: #ffffff;
110
109
  --ui-bg-subtle: #f9fafb;
@@ -293,8 +292,7 @@
293
292
  3. Color Tokens - Dark Mode
294
293
  ============================================ */
295
294
 
296
- .dark,
297
- .dark-theme {
295
+ .dark {
298
296
  /* UI Structure */
299
297
  --ui-bg: #0b0f14;
300
298
  --ui-bg-subtle: #11161d;
@@ -817,8 +815,7 @@
817
815
  6. Dark Theme Variants
818
816
  ============================================ */
819
817
 
820
- .dark.j-theme-gray,
821
- .dark-theme.j-theme-gray {
818
+ .dark.j-theme-gray {
822
819
  --tone-subtle: rgba(255, 255, 255, 0.06);
823
820
  --tone-soft: rgba(255, 255, 255, 0.1);
824
821
  --tone-muted: rgba(255, 255, 255, 0.15);
@@ -837,8 +834,7 @@
837
834
  --tone-link-visited: #9ca3af;
838
835
  }
839
836
 
840
- .dark.j-theme-olive,
841
- .dark-theme.j-theme-olive {
837
+ .dark.j-theme-olive {
842
838
  --tone-subtle: rgba(180, 188, 162, 0.1);
843
839
  --tone-soft: rgba(180, 188, 162, 0.15);
844
840
  --tone-muted: rgba(180, 188, 162, 0.2);
@@ -857,8 +853,7 @@
857
853
  --tone-link-visited: #a8b092;
858
854
  }
859
855
 
860
- .dark.j-theme-tomato,
861
- .dark-theme.j-theme-tomato {
856
+ .dark.j-theme-tomato {
862
857
  --tone-subtle: rgba(248, 113, 113, 0.1);
863
858
  --tone-soft: rgba(248, 113, 113, 0.15);
864
859
  --tone-muted: rgba(248, 113, 113, 0.2);
@@ -877,8 +872,7 @@
877
872
  --tone-link-visited: #f87171;
878
873
  }
879
874
 
880
- .dark.j-theme-ruby,
881
- .dark-theme.j-theme-ruby {
875
+ .dark.j-theme-ruby {
882
876
  --tone-subtle: rgba(251, 113, 133, 0.1);
883
877
  --tone-soft: rgba(251, 113, 133, 0.15);
884
878
  --tone-muted: rgba(251, 113, 133, 0.2);
@@ -897,8 +891,7 @@
897
891
  --tone-link-visited: #fb7185;
898
892
  }
899
893
 
900
- .dark.j-theme-pink,
901
- .dark-theme.j-theme-pink {
894
+ .dark.j-theme-pink {
902
895
  --tone-subtle: rgba(244, 114, 182, 0.1);
903
896
  --tone-soft: rgba(244, 114, 182, 0.15);
904
897
  --tone-muted: rgba(244, 114, 182, 0.2);
@@ -917,8 +910,7 @@
917
910
  --tone-link-visited: #f472b6;
918
911
  }
919
912
 
920
- .dark.j-theme-violet,
921
- .dark-theme.j-theme-violet {
913
+ .dark.j-theme-violet {
922
914
  --tone-subtle: rgba(167, 139, 250, 0.1);
923
915
  --tone-soft: rgba(167, 139, 250, 0.15);
924
916
  --tone-muted: rgba(167, 139, 250, 0.2);
@@ -937,8 +929,7 @@
937
929
  --tone-link-visited: #a78bfa;
938
930
  }
939
931
 
940
- .dark.j-theme-indigo,
941
- .dark-theme.j-theme-indigo {
932
+ .dark.j-theme-indigo {
942
933
  --tone-subtle: rgba(129, 140, 248, 0.1);
943
934
  --tone-soft: rgba(129, 140, 248, 0.15);
944
935
  --tone-muted: rgba(129, 140, 248, 0.2);
@@ -957,8 +948,7 @@
957
948
  --tone-link-visited: #818cf8;
958
949
  }
959
950
 
960
- .dark.j-theme-blue,
961
- .dark-theme.j-theme-blue {
951
+ .dark.j-theme-blue {
962
952
  --tone-subtle: rgba(96, 165, 250, 0.1);
963
953
  --tone-soft: rgba(96, 165, 250, 0.15);
964
954
  --tone-muted: rgba(96, 165, 250, 0.2);
@@ -977,8 +967,7 @@
977
967
  --tone-link-visited: #60a5fa;
978
968
  }
979
969
 
980
- .dark.j-theme-teal,
981
- .dark-theme.j-theme-teal {
970
+ .dark.j-theme-teal {
982
971
  --tone-subtle: rgba(45, 212, 191, 0.1);
983
972
  --tone-soft: rgba(45, 212, 191, 0.15);
984
973
  --tone-muted: rgba(45, 212, 191, 0.2);
@@ -997,8 +986,7 @@
997
986
  --tone-link-visited: #2dd4bf;
998
987
  }
999
988
 
1000
- .dark.j-theme-grass,
1001
- .dark-theme.j-theme-grass {
989
+ .dark.j-theme-grass {
1002
990
  --tone-subtle: rgba(74, 222, 128, 0.1);
1003
991
  --tone-soft: rgba(74, 222, 128, 0.15);
1004
992
  --tone-muted: rgba(74, 222, 128, 0.2);
@@ -1017,8 +1005,7 @@
1017
1005
  --tone-link-visited: #4ade80;
1018
1006
  }
1019
1007
 
1020
- .dark.j-theme-mint,
1021
- .dark-theme.j-theme-mint {
1008
+ .dark.j-theme-mint {
1022
1009
  --tone-subtle: rgba(34, 211, 238, 0.1);
1023
1010
  --tone-soft: rgba(34, 211, 238, 0.15);
1024
1011
  --tone-muted: rgba(34, 211, 238, 0.2);
@@ -1037,8 +1024,7 @@
1037
1024
  --tone-link-visited: #22d3ee;
1038
1025
  }
1039
1026
 
1040
- .dark.j-theme-lime,
1041
- .dark-theme.j-theme-lime {
1027
+ .dark.j-theme-lime {
1042
1028
  --tone-subtle: rgba(163, 230, 53, 0.1);
1043
1029
  --tone-soft: rgba(163, 230, 53, 0.15);
1044
1030
  --tone-muted: rgba(163, 230, 53, 0.2);
@@ -1057,8 +1043,7 @@
1057
1043
  --tone-link-visited: #a3e635;
1058
1044
  }
1059
1045
 
1060
- .dark.j-theme-yellow,
1061
- .dark-theme.j-theme-yellow {
1046
+ .dark.j-theme-yellow {
1062
1047
  --tone-subtle: rgba(250, 204, 21, 0.1);
1063
1048
  --tone-soft: rgba(250, 204, 21, 0.15);
1064
1049
  --tone-muted: rgba(250, 204, 21, 0.2);
@@ -1077,8 +1062,7 @@
1077
1062
  --tone-link-visited: #facc15;
1078
1063
  }
1079
1064
 
1080
- .dark.j-theme-orange,
1081
- .dark-theme.j-theme-orange {
1065
+ .dark.j-theme-orange {
1082
1066
  --tone-subtle: rgba(251, 146, 60, 0.1);
1083
1067
  --tone-soft: rgba(251, 146, 60, 0.15);
1084
1068
  --tone-muted: rgba(251, 146, 60, 0.2);
@@ -1097,8 +1081,7 @@
1097
1081
  --tone-link-visited: #fb923c;
1098
1082
  }
1099
1083
 
1100
- .dark.j-theme-gold,
1101
- .dark-theme.j-theme-gold {
1084
+ .dark.j-theme-gold {
1102
1085
  --tone-subtle: rgba(217, 119, 6, 0.1);
1103
1086
  --tone-soft: rgba(217, 119, 6, 0.15);
1104
1087
  --tone-muted: rgba(217, 119, 6, 0.2);
package/src/css/tooltip.css CHANGED
@@ -18,4 +18,4 @@
18
18
  line-height: var(--tooltip-line-height);
19
19
  position: relative;
20
20
  }
21
- }
21
+ }