@vanduo-oss/framework 1.3.9 → 1.4.1

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 (124) hide show
  1. package/README.md +89 -42
  2. package/css/components/affix.css +12 -12
  3. package/css/components/alerts.css +70 -70
  4. package/css/components/avatar.css +78 -78
  5. package/css/components/badges.css +67 -67
  6. package/css/components/breadcrumbs.css +32 -32
  7. package/css/components/bubble.css +40 -40
  8. package/css/components/button-group.css +2 -2
  9. package/css/components/buttons.css +157 -157
  10. package/css/components/cards.css +79 -79
  11. package/css/components/chips.css +50 -50
  12. package/css/components/code-snippet.css +132 -132
  13. package/css/components/collapsible.css +67 -67
  14. package/css/components/collections.css +68 -68
  15. package/css/components/datepicker.css +54 -54
  16. package/css/components/doc-search.css +96 -103
  17. package/css/components/doc-tabs.css +11 -11
  18. package/css/components/draggable.css +77 -77
  19. package/css/components/dropdown.css +50 -50
  20. package/css/components/expanding-cards.css +1 -1
  21. package/css/components/fab.css +61 -61
  22. package/css/components/flow.css +55 -55
  23. package/css/components/footer.css +62 -62
  24. package/css/components/forms.css +437 -425
  25. package/css/components/image-box.css +50 -54
  26. package/css/components/modals.css +51 -51
  27. package/css/components/music-player.css +150 -150
  28. package/css/components/navbar.css +80 -80
  29. package/css/components/pagination.css +51 -51
  30. package/css/components/preloader.css +19 -19
  31. package/css/components/progress.css +20 -20
  32. package/css/components/rating.css +19 -19
  33. package/css/components/ripple.css +10 -10
  34. package/css/components/sidenav.css +72 -72
  35. package/css/components/skeleton.css +17 -16
  36. package/css/components/spinner.css +33 -33
  37. package/css/components/spotlight.css +33 -33
  38. package/css/components/stepper.css +39 -39
  39. package/css/components/suggest.css +37 -37
  40. package/css/components/tabs.css +60 -60
  41. package/css/components/theme-customizer.css +154 -154
  42. package/css/components/timeline.css +50 -50
  43. package/css/components/timepicker.css +29 -29
  44. package/css/components/toast.css +53 -53
  45. package/css/components/tooltips.css +78 -78
  46. package/css/components/transfer.css +37 -37
  47. package/css/components/tree.css +28 -28
  48. package/css/components/waypoint.css +12 -12
  49. package/css/core/colors.css +640 -640
  50. package/css/core/grid.css +127 -132
  51. package/css/core/helpers.css +349 -349
  52. package/css/core/tokens.css +133 -67
  53. package/css/core/typography.css +105 -103
  54. package/css/effects/morph.css +21 -21
  55. package/css/effects/parallax.css +6 -6
  56. package/css/utilities/color-utilities.css +273 -273
  57. package/css/utilities/media.css +4 -4
  58. package/css/utilities/shadow.css +75 -75
  59. package/css/utilities/table.css +64 -64
  60. package/css/utilities/transitions.css +53 -41
  61. package/css/vanduo.css +14 -35
  62. package/dist/build-info.json +3 -3
  63. package/dist/vanduo.cjs.js +947 -307
  64. package/dist/vanduo.cjs.js.map +3 -3
  65. package/dist/vanduo.cjs.min.js +7 -7
  66. package/dist/vanduo.cjs.min.js.map +3 -3
  67. package/dist/vanduo.css +9650 -9656
  68. package/dist/vanduo.css.map +1 -1
  69. package/dist/vanduo.esm.js +947 -307
  70. package/dist/vanduo.esm.js.map +3 -3
  71. package/dist/vanduo.esm.min.js +7 -7
  72. package/dist/vanduo.esm.min.js.map +3 -3
  73. package/dist/vanduo.js +947 -307
  74. package/dist/vanduo.js.map +3 -3
  75. package/dist/vanduo.min.css +2 -2
  76. package/dist/vanduo.min.css.map +1 -1
  77. package/dist/vanduo.min.js +7 -7
  78. package/dist/vanduo.min.js.map +3 -3
  79. package/js/components/affix.js +4 -4
  80. package/js/components/bubble.js +3 -3
  81. package/js/components/code-snippet.js +129 -5
  82. package/js/components/collapsible.js +2 -3
  83. package/js/components/datepicker.js +2 -2
  84. package/js/components/doc-search.js +69 -11
  85. package/js/components/draggable.js +4 -4
  86. package/js/components/dropdown.js +2 -3
  87. package/js/components/expanding-cards.js +2 -2
  88. package/js/components/flow.js +2 -2
  89. package/js/components/font-switcher.js +23 -13
  90. package/js/components/glass.js +2 -2
  91. package/js/components/grid.js +19 -8
  92. package/js/components/image-box.js +51 -12
  93. package/js/components/lazy-load.js +81 -9
  94. package/js/components/modals.js +28 -12
  95. package/js/components/morph.js +3 -3
  96. package/js/components/music-player.js +13 -13
  97. package/js/components/navbar.js +3 -3
  98. package/js/components/pagination.js +2 -3
  99. package/js/components/parallax.js +9 -10
  100. package/js/components/preloader.js +15 -6
  101. package/js/components/rating.js +2 -2
  102. package/js/components/ripple.js +2 -2
  103. package/js/components/select.js +2 -3
  104. package/js/components/sidenav.js +43 -14
  105. package/js/components/spotlight.js +2 -2
  106. package/js/components/stepper.js +2 -2
  107. package/js/components/suggest.js +9 -3
  108. package/js/components/tabs.js +2 -2
  109. package/js/components/theme-customizer.js +155 -25
  110. package/js/components/theme-switcher.js +27 -16
  111. package/js/components/timeline.js +41 -12
  112. package/js/components/timepicker.js +2 -2
  113. package/js/components/toast.js +1 -1
  114. package/js/components/tooltips.js +4 -4
  115. package/js/components/transfer.js +2 -2
  116. package/js/components/tree.js +2 -2
  117. package/js/components/validate.js +2 -2
  118. package/js/components/vd-hex.js +10 -6
  119. package/js/components/waypoint.js +2 -2
  120. package/js/utils/helpers.js +7 -4
  121. package/js/utils/lifecycle.js +158 -83
  122. package/js/vanduo.js +203 -34
  123. package/package.json +2 -1
  124. package/css/core/vd-aliases.css +0 -60
package/css/core/tokens.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Vanduo Framework - Design Tokens
3
3
  * Centralized CSS custom properties for consistent theming
4
- * v1.1.1
4
+ * v1.4.1
5
5
  */
6
6
 
7
7
  :root {
@@ -11,49 +11,94 @@
11
11
  * ============================================ */
12
12
 
13
13
  /* Primary Colors */
14
- --vd-color-primary: #0d6efd;
15
- --vd-color-primary-rgb: 13, 110, 253;
16
- --vd-color-primary-hover: #0b5ed7;
17
- --vd-color-primary-active: #0a58ca;
18
- --vd-color-primary-alpha-10: rgba(13, 110, 253, 0.1);
19
- --vd-color-primary-alpha-20: rgba(13, 110, 253, 0.2);
20
- --vd-color-primary-alpha-50: rgba(13, 110, 253, 0.5);
14
+ --vd-color-primary: var(--vd-primary-5);
15
+ --vd-color-primary-light: var(--vd-primary-3);
16
+ --vd-color-primary-dark: var(--vd-primary-7);
17
+ --vd-color-primary-hover: var(--vd-primary-6);
18
+ --vd-color-primary-active: var(--vd-primary-7);
19
+ --vd-color-primary-rgb: 92, 124, 250;
20
+ --vd-color-primary-alpha-5: rgba(92, 124, 250, 0.05);
21
+ --vd-color-primary-alpha-08: rgba(92, 124, 250, 0.08);
22
+ --vd-color-primary-alpha-10: rgba(92, 124, 250, 0.1);
23
+ --vd-color-primary-alpha-15: rgba(92, 124, 250, 0.15);
24
+ --vd-color-primary-alpha-20: rgba(92, 124, 250, 0.2);
25
+ --vd-color-primary-alpha-30: rgba(92, 124, 250, 0.3);
26
+ --vd-color-primary-alpha-40: rgba(92, 124, 250, 0.4);
27
+ --vd-color-primary-alpha-50: rgba(92, 124, 250, 0.5);
21
28
 
22
29
  /* Secondary Colors */
23
- --vd-color-secondary: #6c757d;
24
- --vd-color-secondary-hover: #5c636a;
25
- --vd-color-secondary-active: #565e64;
30
+ --vd-color-secondary: var(--vd-secondary-5);
31
+ --vd-color-secondary-light: var(--vd-secondary-3);
32
+ --vd-color-secondary-dark: var(--vd-secondary-7);
33
+ --vd-color-secondary-hover: var(--vd-secondary-6);
34
+ --vd-color-secondary-active: var(--vd-secondary-7);
35
+ --vd-color-secondary-alpha-10: rgba(32, 201, 151, 0.1);
36
+ --vd-color-secondary-alpha-20: rgba(32, 201, 151, 0.2);
37
+
38
+ /* Accent */
39
+ --vd-color-accent: var(--vd-color-primary);
40
+ --vd-color-accent-light: var(--vd-color-primary-light);
41
+ --vd-color-accent-dark: var(--vd-color-primary-dark);
26
42
 
27
43
  /* Semantic Colors */
28
- --vd-color-success: #198754;
29
- --vd-color-success-rgb: 25, 135, 84;
30
- --vd-color-success-alpha-10: rgba(25, 135, 84, 0.1);
31
-
32
- --vd-color-warning: #ffc107;
33
- --vd-color-warning-rgb: 255, 193, 7;
34
- --vd-color-warning-alpha-10: rgba(255, 193, 7, 0.1);
35
- --vd-color-warning-alpha-30: rgba(255, 193, 7, 0.3);
36
-
37
- --vd-color-error: #dc3545;
38
- --vd-color-error-rgb: 220, 53, 69;
39
- --vd-color-error-alpha-10: rgba(220, 53, 69, 0.1);
40
-
41
- --vd-color-info: #0dcaf0;
42
- --vd-color-info-rgb: 13, 202, 240;
43
- --vd-color-info-alpha-10: rgba(13, 202, 240, 0.1);
44
+ --vd-color-success: var(--vd-success-6);
45
+ --vd-color-success-light: var(--vd-success-4);
46
+ --vd-color-success-dark: var(--vd-success-7);
47
+ --vd-color-success-hover: var(--vd-success-7);
48
+ --vd-color-success-active: var(--vd-success-8);
49
+ --vd-color-success-rgb: 64, 192, 87;
50
+ --vd-color-success-alpha-10: rgba(64, 192, 87, 0.1);
51
+ --vd-color-success-alpha-20: rgba(64, 192, 87, 0.2);
52
+
53
+ --vd-color-warning: var(--vd-warning-6);
54
+ --vd-color-warning-light: var(--vd-warning-4);
55
+ --vd-color-warning-dark: var(--vd-warning-7);
56
+ --vd-color-warning-hover: var(--vd-warning-7);
57
+ --vd-color-warning-active: var(--vd-warning-8);
58
+ --vd-color-warning-rgb: 250, 176, 5;
59
+ --vd-color-warning-alpha-10: rgba(250, 176, 5, 0.1);
60
+ --vd-color-warning-alpha-20: rgba(250, 176, 5, 0.2);
61
+ --vd-color-warning-alpha-30: rgba(250, 176, 5, 0.3);
62
+
63
+ --vd-color-error: var(--vd-danger-6);
64
+ --vd-color-error-light: var(--vd-danger-4);
65
+ --vd-color-error-dark: var(--vd-danger-7);
66
+ --vd-color-error-hover: var(--vd-danger-7);
67
+ --vd-color-error-active: var(--vd-danger-8);
68
+ --vd-color-error-rgb: 250, 82, 82;
69
+ --vd-color-error-alpha-10: rgba(250, 82, 82, 0.1);
70
+ --vd-color-error-alpha-20: rgba(250, 82, 82, 0.2);
71
+
72
+ --vd-color-danger: var(--vd-color-error);
73
+ --vd-color-danger-light: var(--vd-color-error-light);
74
+ --vd-color-danger-dark: var(--vd-color-error-dark);
75
+ --vd-color-danger-hover: var(--vd-color-error-hover);
76
+ --vd-color-danger-active: var(--vd-color-error-active);
77
+ --vd-color-danger-alpha-10: var(--vd-color-error-alpha-10);
78
+ --vd-color-danger-alpha-20: var(--vd-color-error-alpha-20);
79
+
80
+ --vd-color-info: var(--vd-info-6);
81
+ --vd-color-info-light: var(--vd-info-4);
82
+ --vd-color-info-dark: var(--vd-info-7);
83
+ --vd-color-info-hover: var(--vd-info-7);
84
+ --vd-color-info-active: var(--vd-info-8);
85
+ --vd-color-info-rgb: 34, 139, 230;
86
+ --vd-color-info-alpha-10: rgba(34, 139, 230, 0.1);
87
+ --vd-color-info-alpha-20: rgba(34, 139, 230, 0.2);
44
88
 
45
89
  /* Neutral Colors (Open Color) */
46
90
  --vd-color-white: #ffffff;
47
- --vd-color-gray-100: #f8f9fa;
48
- --vd-color-gray-200: #e9ecef;
49
- --vd-color-gray-300: #dee2e6;
50
- --vd-color-gray-400: #ced4da;
51
- --vd-color-gray-500: #adb5bd;
52
- --vd-color-gray-600: #6c757d;
53
- --vd-color-gray-700: #495057;
54
- --vd-color-gray-800: #343a40;
55
- --vd-color-gray-900: #212529;
56
91
  --vd-color-black: #000000;
92
+ --vd-color-gray-50: var(--vd-gray-0);
93
+ --vd-color-gray-100: var(--vd-gray-2);
94
+ --vd-color-gray-200: var(--vd-gray-3);
95
+ --vd-color-gray-300: var(--vd-gray-4);
96
+ --vd-color-gray-400: var(--vd-gray-5);
97
+ --vd-color-gray-500: var(--vd-gray-6);
98
+ --vd-color-gray-600: var(--vd-gray-7);
99
+ --vd-color-gray-700: var(--vd-gray-8);
100
+ --vd-color-gray-800: var(--vd-gray-9);
101
+ --vd-color-gray-900: #1a1d20;
57
102
 
58
103
  /* ============================================
59
104
  * BACKGROUND TOKENS
@@ -61,6 +106,8 @@
61
106
  --vd-bg-primary: var(--vd-color-white);
62
107
  --vd-bg-secondary: var(--vd-color-gray-100);
63
108
  --vd-bg-tertiary: var(--vd-color-gray-200);
109
+ --vd-bg-dark: var(--vd-color-gray-800);
110
+ --vd-bg-darker: var(--vd-color-gray-900);
64
111
 
65
112
  /* ============================================
66
113
  * TEXT TOKENS
@@ -68,13 +115,18 @@
68
115
  --vd-text-primary: var(--vd-color-gray-900);
69
116
  --vd-text-secondary: var(--vd-color-gray-600);
70
117
  --vd-text-muted: var(--vd-color-gray-500);
118
+ --vd-text-light: var(--vd-color-gray-400);
119
+ --vd-text-tertiary: var(--vd-text-secondary);
120
+ --vd-text-disabled: var(--vd-text-muted);
71
121
  --vd-text-on-primary: var(--vd-color-white);
122
+ --vd-text-inverse: var(--vd-color-white);
72
123
 
73
124
  /* ============================================
74
125
  * BORDER TOKENS
75
126
  * ============================================ */
76
127
  --vd-border-color: var(--vd-color-gray-300);
77
128
  --vd-border-color-light: var(--vd-color-gray-200);
129
+ --vd-border-color-dark: var(--vd-color-gray-400);
78
130
  --vd-border-width: 1px;
79
131
  --vd-border-radius-sm: 0.25rem;
80
132
  --vd-border-radius-md: 0.5rem;
@@ -145,29 +197,17 @@
145
197
  /* ============================================
146
198
  * GLASS TOKENS
147
199
  * ============================================ */
148
- --glass-blur: 12px;
149
- --glass-saturate: 1.8;
150
- --glass-bg-opacity: 0.65;
151
- --glass-bg-light: rgba(255, 255, 255, var(--glass-bg-opacity));
152
- --glass-bg-dark: rgba(30, 30, 30, var(--glass-bg-opacity));
153
- --glass-border-alpha: 0.18;
154
- --glass-border-light: rgba(255, 255, 255, var(--glass-border-alpha));
155
- --glass-border-dark: rgba(255, 255, 255, 0.08);
156
- --glass-highlight-alpha: 0.25;
157
- --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
158
- --glass-noise-opacity: 0.03;
159
-
160
- --vd-glass-blur: var(--glass-blur);
161
- --vd-glass-saturate: var(--glass-saturate);
162
- --vd-glass-bg-opacity: var(--glass-bg-opacity);
163
- --vd-glass-bg-light: var(--glass-bg-light);
164
- --vd-glass-bg-dark: var(--glass-bg-dark);
165
- --vd-glass-border-alpha: var(--glass-border-alpha);
166
- --vd-glass-border-light: var(--glass-border-light);
167
- --vd-glass-border-dark: var(--glass-border-dark);
168
- --vd-glass-highlight-alpha: var(--glass-highlight-alpha);
169
- --vd-glass-shadow: var(--glass-shadow);
170
- --vd-glass-noise-opacity: var(--glass-noise-opacity);
200
+ --vd-glass-blur: 12px;
201
+ --vd-glass-saturate: 1.8;
202
+ --vd-glass-bg-opacity: 0.65;
203
+ --vd-glass-bg-light: rgba(255, 255, 255, var(--vd-glass-bg-opacity));
204
+ --vd-glass-bg-dark: rgba(30, 30, 30, var(--vd-glass-bg-opacity));
205
+ --vd-glass-border-alpha: 0.18;
206
+ --vd-glass-border-light: rgba(255, 255, 255, var(--vd-glass-border-alpha));
207
+ --vd-glass-border-dark: rgba(255, 255, 255, 0.08);
208
+ --vd-glass-highlight-alpha: 0.25;
209
+ --vd-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
210
+ --vd-glass-noise-opacity: 0.03;
171
211
 
172
212
  /* ============================================
173
213
  * TRANSITION TOKENS
@@ -206,22 +246,35 @@
206
246
  --vd-bg-primary: var(--vd-color-gray-900);
207
247
  --vd-bg-secondary: var(--vd-color-gray-800);
208
248
  --vd-bg-tertiary: var(--vd-color-gray-700);
249
+ --vd-bg-dark: var(--vd-color-black);
250
+ --vd-bg-darker: #000000;
209
251
 
210
252
  --vd-text-primary: var(--vd-color-gray-100);
211
253
  --vd-text-secondary: var(--vd-color-gray-400);
212
254
  --vd-text-muted: var(--vd-color-gray-500);
255
+ --vd-text-light: var(--vd-color-gray-600);
256
+ --vd-text-inverse: var(--vd-color-gray-900);
213
257
 
214
258
  --vd-border-color: var(--vd-color-gray-700);
215
259
  --vd-border-color-light: var(--vd-color-gray-800);
260
+ --vd-border-color-dark: var(--vd-color-gray-600);
261
+
262
+ --vd-color-primary: var(--vd-primary-4);
263
+ --vd-color-primary-light: var(--vd-primary-3);
264
+ --vd-color-primary-dark: var(--vd-primary-5);
265
+ --vd-color-primary-hover: var(--vd-primary-5);
266
+ --vd-color-primary-active: var(--vd-primary-6);
267
+ --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);
268
+ --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);
216
269
 
217
270
  --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
218
271
  --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
219
272
  --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
220
273
 
221
- --glass-bg-light: var(--glass-bg-dark);
222
- --glass-border-light: var(--glass-border-dark);
223
- --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
224
- --glass-highlight-alpha: 0.16;
274
+ --vd-glass-bg-light: var(--vd-glass-bg-dark);
275
+ --vd-glass-border-light: var(--vd-glass-border-dark);
276
+ --vd-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
277
+ --vd-glass-highlight-alpha: 0.16;
225
278
  }
226
279
 
227
280
  /* Dark mode via prefers-color-scheme */
@@ -230,21 +283,34 @@
230
283
  --vd-bg-primary: var(--vd-color-gray-900);
231
284
  --vd-bg-secondary: var(--vd-color-gray-800);
232
285
  --vd-bg-tertiary: var(--vd-color-gray-700);
286
+ --vd-bg-dark: var(--vd-color-black);
287
+ --vd-bg-darker: #000000;
233
288
 
234
289
  --vd-text-primary: var(--vd-color-gray-100);
235
290
  --vd-text-secondary: var(--vd-color-gray-400);
236
291
  --vd-text-muted: var(--vd-color-gray-500);
292
+ --vd-text-light: var(--vd-color-gray-600);
293
+ --vd-text-inverse: var(--vd-color-gray-900);
237
294
 
238
295
  --vd-border-color: var(--vd-color-gray-700);
239
296
  --vd-border-color-light: var(--vd-color-gray-800);
297
+ --vd-border-color-dark: var(--vd-color-gray-600);
298
+
299
+ --vd-color-primary: var(--vd-primary-4);
300
+ --vd-color-primary-light: var(--vd-primary-3);
301
+ --vd-color-primary-dark: var(--vd-primary-5);
302
+ --vd-color-primary-hover: var(--vd-primary-5);
303
+ --vd-color-primary-active: var(--vd-primary-6);
304
+ --vd-color-primary-alpha-10: rgba(116, 143, 252, 0.15);
305
+ --vd-color-primary-alpha-20: rgba(116, 143, 252, 0.25);
240
306
 
241
307
  --vd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
242
308
  --vd-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
243
309
  --vd-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
244
310
 
245
- --glass-bg-light: var(--glass-bg-dark);
246
- --glass-border-light: var(--glass-border-dark);
247
- --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
248
- --glass-highlight-alpha: 0.16;
311
+ --vd-glass-bg-light: var(--vd-glass-bg-dark);
312
+ --vd-glass-border-light: var(--vd-glass-border-dark);
313
+ --vd-glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
314
+ --vd-glass-highlight-alpha: 0.16;
249
315
  }
250
316
  }