@vaneui/md 0.3.1-alpha.20260104201635.7d81a8e → 0.9.0-alpha.20260105192120.1be78c6

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 (6) hide show
  1. package/dist/index.esm.js +99 -135
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +99 -135
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/index.css +257 -425
  6. package/package.json +2 -2
package/dist/styles/index.css CHANGED
@@ -26,7 +26,6 @@
26
26
  --color-text-filled-danger: var(--color-red-100);
27
27
  --color-text-filled-warning: var(--color-amber-100);
28
28
  --color-text-filled-info: var(--color-cyan-100);
29
- --color-text-filled-transparent: transparent;
30
29
 
31
30
  /* UI Background Colors */
32
31
  --color-bg-primary: var(--color-white);
@@ -104,7 +103,6 @@
104
103
  --color-bg-layout-danger: var(--color-red-50);
105
104
  --color-bg-layout-warning: var(--color-yellow-50);
106
105
  --color-bg-layout-info: var(--color-blue-50);
107
- --color-bg-layout-transparent: transparent;
108
106
 
109
107
  /* Layout Filled Background Colors */
110
108
  --color-bg-filled-layout-primary: var(--color-gray-700);
@@ -116,7 +114,6 @@
116
114
  --color-bg-filled-layout-danger: var(--color-red-700);
117
115
  --color-bg-filled-layout-warning: var(--color-yellow-800);
118
116
  --color-bg-filled-layout-info: var(--color-blue-700);
119
- --color-bg-filled-layout-transparent: transparent;
120
117
 
121
118
  /* Border Colors */
122
119
  --color-border-primary: var(--color-gray-200);
@@ -144,7 +141,7 @@
144
141
  --fs-base: calc(var(--spacing) * 0.5);
145
142
 
146
143
  --breakpoint-mobile: 48rem;
147
- --breakpoint-tablet: 64rem;
144
+ --breakpoint-tablet: 64rem;
148
145
  --breakpoint-desktop: 80rem;
149
146
 
150
147
  --lh: 1;
@@ -156,44 +153,87 @@
156
153
  --size-unit: 1;
157
154
  --bw: 1px; /* Border width */
158
155
  --rw: 1px; /* Ring width */
156
+
157
+ /* Font size scale (used by Text, Link, ListItem, Label, List, Button, Badge, Chip) */
158
+ --fs-unit-xs: 6;
159
+ --fs-unit-sm: 7;
160
+ --fs-unit-md: 8;
161
+ --fs-unit-lg: 9;
162
+ --fs-unit-xl: 10;
163
+
164
+ /* Common line height */
165
+ --lh-base: 1.6;
159
166
  }
160
167
  @layer base {
161
168
  [data-size] {
162
- --gap: calc(var(--gap-unit) * var(--spacing));
163
- --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
169
+ /* Breakpoint vars default to base unit */
170
+ --py-unit-desktop: var(--py-unit);
171
+ --py-unit-tablet: var(--py-unit);
172
+ --py-unit-mobile: var(--py-unit);
173
+ --gap-unit-desktop: var(--gap-unit);
174
+ --gap-unit-tablet: var(--gap-unit);
175
+ --gap-unit-mobile: var(--gap-unit);
176
+ --fs-unit-desktop: var(--fs-unit);
177
+ --fs-unit-tablet: var(--fs-unit);
178
+ --fs-unit-mobile: var(--fs-unit);
179
+
180
+ /* Single formulas - unit vars are switched via Tailwind classes */
164
181
  --py: calc(var(--py-unit) * var(--spacing));
182
+ --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
183
+ --gap: calc(var(--gap-unit) * var(--spacing));
184
+ --fs: calc(var(--fs-unit) * var(--fs-base));
165
185
  --size: calc(var(--size-unit) * var(--spacing));
166
186
  --br: calc(var(--br-unit) * var(--br-base));
167
- --fs: calc(var(--fs-unit) * var(--fs-base));
168
187
  --pl: calc(var(--py-unit) * var(--spacing));
169
188
  }
170
189
  }
171
190
  @layer components {
191
+ /* ========================================
192
+ TYPE-BASED DEFAULTS
193
+ Sets --br-unit, --gap-unit, --shadow, --shadow-hover
194
+ based on data-vane-type and data-size attributes.
195
+ Components inherit these unless they override.
196
+ ======================================== */
197
+
198
+ /* UI type defaults (compact spacing, with hover shadows using Tailwind shadow vars) */
199
+ [data-vane-type="ui"][data-size="xs"] { --br-unit: 1; --gap-unit: 1; --shadow-base: var(--shadow-2xs); --shadow-hover: var(--shadow-xs); }
200
+ [data-vane-type="ui"][data-size="sm"] { --br-unit: 1.5; --gap-unit: 1.5; --shadow-base: var(--shadow-xs); --shadow-hover: var(--shadow-sm); }
201
+ [data-vane-type="ui"][data-size="md"] { --br-unit: 2; --gap-unit: 2; --shadow-base: var(--shadow-sm); --shadow-hover: var(--shadow); }
202
+ [data-vane-type="ui"][data-size="lg"] { --br-unit: 2.5; --gap-unit: 2.5; --shadow-base: var(--shadow); --shadow-hover: var(--shadow-md); }
203
+ [data-vane-type="ui"][data-size="xl"] { --br-unit: 3; --gap-unit: 3; --shadow-base: var(--shadow-md); --shadow-hover: var(--shadow-lg); }
204
+
205
+ /* Layout type defaults (generous spacing, static shadows using Tailwind shadow vars) */
206
+ [data-vane-type="layout"][data-size="xs"] { --br-unit: 3; --gap-unit: 2; --shadow-base: var(--shadow-xs); }
207
+ [data-vane-type="layout"][data-size="sm"] { --br-unit: 4; --gap-unit: 3; --shadow-base: var(--shadow-sm); }
208
+ [data-vane-type="layout"][data-size="md"] { --br-unit: 5; --gap-unit: 4; --shadow-base: var(--shadow); }
209
+ [data-vane-type="layout"][data-size="lg"] { --br-unit: 6; --gap-unit: 5; --shadow-base: var(--shadow-md); }
210
+ [data-vane-type="layout"][data-size="xl"] { --br-unit: 7; --gap-unit: 6; --shadow-base: var(--shadow-lg); }
211
+
172
212
  /* NON-RESPONSIVE COMPONENTS */
173
213
 
174
214
  /* Button */
175
- .vane-button { --lh: 1.3; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
176
- .vane-button[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; --gap-unit: 1; }
177
- .vane-button[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; --gap-unit: 1.5; }
178
- .vane-button[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; --gap-unit: 2; }
179
- .vane-button[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; --gap-unit: 2.5; }
180
- .vane-button[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; --gap-unit: 3; }
215
+ .vane-button { --lh: 1.3; --py-unit: 2; --aspect-ratio: 2; }
216
+ .vane-button[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 1; }
217
+ .vane-button[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 1.5; }
218
+ .vane-button[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 2; }
219
+ .vane-button[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 2.5; }
220
+ .vane-button[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 3; }
181
221
 
182
222
  /* Badge */
183
- .vane-badge { --lh: 1.6; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
184
- .vane-badge[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; --gap-unit: 1; }
185
- .vane-badge[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; --gap-unit: 1.5; }
186
- .vane-badge[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; --gap-unit: 2; }
187
- .vane-badge[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; --gap-unit: 2.5; }
188
- .vane-badge[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; --gap-unit: 3; }
223
+ .vane-badge { --lh: var(--lh-base); --py-unit: 2; --aspect-ratio: 2; }
224
+ .vane-badge[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 1; }
225
+ .vane-badge[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 1.5; }
226
+ .vane-badge[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 2; }
227
+ .vane-badge[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 2.5; }
228
+ .vane-badge[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 3; }
189
229
 
190
230
  /* Chip */
191
- .vane-chip { --lh: 1.2; --br-unit: 2; --py-unit: 1.5; --aspect-ratio: 2; --gap-unit: 2; }
192
- .vane-chip[data-size="xs"] { --fs-unit: 6; --py-unit: 0.5; --br-unit: 1; --gap-unit: 1; }
193
- .vane-chip[data-size="sm"] { --fs-unit: 7; --py-unit: 1; --br-unit: 1.5; --gap-unit: 1.5; }
194
- .vane-chip[data-size="md"] { --fs-unit: 8; --py-unit: 1.5; --br-unit: 2; --gap-unit: 2; }
195
- .vane-chip[data-size="lg"] { --fs-unit: 9; --py-unit: 2; --br-unit: 2.5; --gap-unit: 2.5; }
196
- .vane-chip[data-size="xl"] { --fs-unit: 10; --py-unit: 2.5; --br-unit: 3; --gap-unit: 3; }
231
+ .vane-chip { --lh: 1.2; --py-unit: 1.5; --aspect-ratio: 2; }
232
+ .vane-chip[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 0.5; }
233
+ .vane-chip[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 1; }
234
+ .vane-chip[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 1.5; }
235
+ .vane-chip[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 2; }
236
+ .vane-chip[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 2.5; }
197
237
 
198
238
  /* Code */
199
239
  .vane-code { --lh: 1; --br-unit: 1.5; --py-unit: 0.8; --aspect-ratio: 1.8; }
@@ -204,12 +244,12 @@
204
244
  .vane-code[data-size="xl"] { --fs-unit: 9; --py-unit: 1.2; --br-unit: 2.5; }
205
245
 
206
246
  /* Input */
207
- .vane-input { --lh: 1.6; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; }
208
- .vane-input[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; }
209
- .vane-input[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; }
210
- .vane-input[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; }
211
- .vane-input[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; }
212
- .vane-input[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; }
247
+ .vane-input { --lh: var(--lh-base); --py-unit: 2; --aspect-ratio: 2; }
248
+ .vane-input[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 1; }
249
+ .vane-input[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 1.5; }
250
+ .vane-input[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 2; }
251
+ .vane-input[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 2.5; }
252
+ .vane-input[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 3; }
213
253
 
214
254
  /* Checkbox */
215
255
  .vane-checkbox { --br-unit: 1; }
@@ -220,60 +260,36 @@
220
260
  .vane-checkbox[data-size="xl"] { --size-unit: 5; --br-unit: 1.5; }
221
261
 
222
262
  /* Label */
223
- .vane-label { --lh: 1.6; --gap-unit: 2; }
224
- .vane-label[data-size="xs"] { --fs-unit: 6; --gap-unit: 1; }
225
- .vane-label[data-size="sm"] { --fs-unit: 7; --gap-unit: 1.5; }
226
- .vane-label[data-size="md"] { --fs-unit: 8; --gap-unit: 2; }
227
- .vane-label[data-size="lg"] { --fs-unit: 9; --gap-unit: 2.5; }
228
- .vane-label[data-size="xl"] { --fs-unit: 10; --gap-unit: 3; }
263
+ .vane-label { --lh: var(--lh-base); }
264
+ .vane-label[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
265
+ .vane-label[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
266
+ .vane-label[data-size="md"] { --fs-unit: var(--fs-unit-md); }
267
+ .vane-label[data-size="lg"] { --fs-unit: var(--fs-unit-lg); }
268
+ .vane-label[data-size="xl"] { --fs-unit: var(--fs-unit-xl); }
229
269
 
230
270
  /* Card */
231
- .vane-card { --br-unit: 5; --py-unit: 6; --aspect-ratio: 1; --gap-unit: 4; }
232
- .vane-card[data-size="xs"] { --py-unit: 2; --gap-unit: 2; --br-unit: 3; }
233
- .vane-card[data-size="sm"] { --py-unit: 4; --gap-unit: 3; --br-unit: 4; }
234
- .vane-card[data-size="md"] { --py-unit: 6; --gap-unit: 4; --br-unit: 5; }
235
- .vane-card[data-size="lg"] { --py-unit: 8; --gap-unit: 5; --br-unit: 6; }
236
- .vane-card[data-size="xl"] { --py-unit: 10; --gap-unit: 6; --br-unit: 7; }
271
+ .vane-card { --py-unit: 6; --aspect-ratio: 1; }
272
+ .vane-card[data-size="xs"] { --py-unit: 2; }
273
+ .vane-card[data-size="sm"] { --py-unit: 4; }
274
+ .vane-card[data-size="md"] { --py-unit: 6; }
275
+ .vane-card[data-size="lg"] { --py-unit: 8; }
276
+ .vane-card[data-size="xl"] { --py-unit: 10; }
237
277
 
238
278
  /* Stack */
239
- .vane-stack { --gap-unit: 4; --py-unit: 4; --aspect-ratio: 1; --br-unit: 5; }
240
- .vane-stack[data-size="xs"] { --gap-unit: 2; --py-unit: 2; --br-unit: 3; }
241
- .vane-stack[data-size="sm"] { --gap-unit: 3; --py-unit: 3; --br-unit: 4; }
242
- .vane-stack[data-size="md"] { --gap-unit: 4; --py-unit: 4; --br-unit: 5; }
243
- .vane-stack[data-size="lg"] { --gap-unit: 5; --py-unit: 5; --br-unit: 6; }
244
- .vane-stack[data-size="xl"] { --gap-unit: 6; --py-unit: 6; --br-unit: 7; }
245
-
246
- /* Row */
247
- .vane-row { --gap-unit: 4; --br-unit: 5; }
248
- .vane-row[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
249
- .vane-row[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
250
- .vane-row[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
251
- .vane-row[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
252
- .vane-row[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
253
-
254
- /* Col */
255
- .vane-col { --gap-unit: 4; --br-unit: 5; }
256
- .vane-col[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
257
- .vane-col[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
258
- .vane-col[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
259
- .vane-col[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
260
- .vane-col[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
279
+ .vane-stack { --py-unit: 4; --aspect-ratio: 1; }
280
+ .vane-stack[data-size="xs"] { --py-unit: 2; }
281
+ .vane-stack[data-size="sm"] { --py-unit: 3; }
282
+ .vane-stack[data-size="md"] { --py-unit: 4; }
283
+ .vane-stack[data-size="lg"] { --py-unit: 5; }
284
+ .vane-stack[data-size="xl"] { --py-unit: 6; }
261
285
 
262
286
  /* Container */
263
- .vane-container { --py-unit: 8; --aspect-ratio: 2; --br-unit: 5; --gap-unit: 4; }
264
- .vane-container[data-size="xs"] { --py-unit: 4; --br-unit: 3; --gap-unit: 2; }
265
- .vane-container[data-size="sm"] { --py-unit: 6; --br-unit: 4; --gap-unit: 3; }
266
- .vane-container[data-size="md"] { --py-unit: 8; --br-unit: 5; --gap-unit: 4; }
267
- .vane-container[data-size="lg"] { --py-unit: 10; --br-unit: 6; --gap-unit: 5; }
268
- .vane-container[data-size="xl"] { --py-unit: 12; --br-unit: 7; --gap-unit: 6; }
269
-
270
- /* Grid */
271
- .vane-grid { --gap-unit: 4; --br-unit: 5; }
272
- .vane-grid[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
273
- .vane-grid[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
274
- .vane-grid[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
275
- .vane-grid[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
276
- .vane-grid[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
287
+ .vane-container { --py-unit: 8; --aspect-ratio: 2; }
288
+ .vane-container[data-size="xs"] { --py-unit: 4; }
289
+ .vane-container[data-size="sm"] { --py-unit: 6; }
290
+ .vane-container[data-size="md"] { --py-unit: 8; }
291
+ .vane-container[data-size="lg"] { --py-unit: 10; }
292
+ .vane-container[data-size="xl"] { --py-unit: 12; }
277
293
 
278
294
  /* Divider */
279
295
  .vane-divider { --py-unit: 4; }
@@ -283,51 +299,43 @@
283
299
  .vane-divider[data-size="lg"] { --py-unit: 5; }
284
300
  .vane-divider[data-size="xl"] { --py-unit: 6; }
285
301
 
286
- /* Img */
287
- .vane-img { --br-unit: 5; }
288
- .vane-img[data-size="xs"] { --br-unit: 3; }
289
- .vane-img[data-size="sm"] { --br-unit: 4; }
290
- .vane-img[data-size="md"] { --br-unit: 5; }
291
- .vane-img[data-size="lg"] { --br-unit: 6; }
292
- .vane-img[data-size="xl"] { --br-unit: 7; }
293
-
294
302
  /* List */
295
- .vane-list { --lh: 1.6; --py-unit: 3; }
296
- .vane-list[data-size="xs"] { --fs-unit: 6; --py-unit: 1; }
297
- .vane-list[data-size="sm"] { --fs-unit: 7; --py-unit: 2; }
298
- .vane-list[data-size="md"] { --fs-unit: 8; --py-unit: 3; }
299
- .vane-list[data-size="lg"] { --fs-unit: 9; --py-unit: 4; }
300
- .vane-list[data-size="xl"] { --fs-unit: 10; --py-unit: 5; }
303
+ .vane-list { --lh: var(--lh-base); --py-unit: 3; }
304
+ .vane-list[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 1; }
305
+ .vane-list[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 2; }
306
+ .vane-list[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 3; }
307
+ .vane-list[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 4; }
308
+ .vane-list[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 5; }
301
309
 
302
310
  /* Text */
303
- .vane-text { --lh: 1.6; }
304
- .vane-text[data-size="xs"] { --fs-unit: 6; }
305
- .vane-text[data-size="sm"] { --fs-unit: 7; }
306
- .vane-text[data-size="md"] { --fs-unit: 8; }
307
- .vane-text[data-size="lg"] { --fs-unit: 9; }
308
- .vane-text[data-size="xl"] { --fs-unit: 10; }
311
+ .vane-text { --lh: var(--lh-base); }
312
+ .vane-text[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
313
+ .vane-text[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
314
+ .vane-text[data-size="md"] { --fs-unit: var(--fs-unit-md); }
315
+ .vane-text[data-size="lg"] { --fs-unit: var(--fs-unit-lg); }
316
+ .vane-text[data-size="xl"] { --fs-unit: var(--fs-unit-xl); }
309
317
 
310
318
  /* Link */
311
- .vane-link { --lh: 1.6; }
312
- .vane-link[data-size="xs"] { --fs-unit: 6; }
313
- .vane-link[data-size="sm"] { --fs-unit: 7; }
314
- .vane-link[data-size="md"] { --fs-unit: 8; }
315
- .vane-link[data-size="lg"] { --fs-unit: 9; }
316
- .vane-link[data-size="xl"] { --fs-unit: 10; }
319
+ .vane-link { --lh: var(--lh-base); }
320
+ .vane-link[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
321
+ .vane-link[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
322
+ .vane-link[data-size="md"] { --fs-unit: var(--fs-unit-md); }
323
+ .vane-link[data-size="lg"] { --fs-unit: var(--fs-unit-lg); }
324
+ .vane-link[data-size="xl"] { --fs-unit: var(--fs-unit-xl); }
317
325
 
318
326
  /* ListItem */
319
- .vane-list-item { --lh: 1.6; }
320
- .vane-list-item[data-size="xs"] { --fs-unit: 6; }
321
- .vane-list-item[data-size="sm"] { --fs-unit: 7; }
322
- .vane-list-item[data-size="md"] { --fs-unit: 8; }
323
- .vane-list-item[data-size="lg"] { --fs-unit: 9; }
324
- .vane-list-item[data-size="xl"] { --fs-unit: 10; }
327
+ .vane-list-item { --lh: var(--lh-base); }
328
+ .vane-list-item[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
329
+ .vane-list-item[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
330
+ .vane-list-item[data-size="md"] { --fs-unit: var(--fs-unit-md); }
331
+ .vane-list-item[data-size="lg"] { --fs-unit: var(--fs-unit-lg); }
332
+ .vane-list-item[data-size="xl"] { --fs-unit: var(--fs-unit-xl); }
325
333
 
326
334
  /* RESPONSIVE COMPONENTS */
327
335
 
328
336
  /* Section */
329
337
  .vane-section {
330
- --lh: 1.6;
338
+ --lh: var(--lh-base);
331
339
  --py-unit-desktop: 8;
332
340
  --py-unit-tablet: 6;
333
341
  --py-unit-mobile: 4;
@@ -607,29 +615,6 @@
607
615
  --checked-bg-color: var(--color-bg-filled-brand);
608
616
  }
609
617
 
610
- /* -----------------------------------------
611
- TRANSPARENT STATE
612
- Overrides colors when data-transparent is set
613
- ----------------------------------------- */
614
- [data-transparent="true"] {
615
- --bg-color: transparent;
616
- --bg-hover-color: transparent;
617
- --bg-active-color: transparent;
618
- --accent-color: transparent;
619
- --checked-bg-color: transparent;
620
- }
621
-
622
- /* Typography components: transparent affects text color */
623
- .vane-text[data-transparent="true"],
624
- .vane-link[data-transparent="true"],
625
- .vane-title[data-transparent="true"],
626
- .vane-section-title[data-transparent="true"],
627
- .vane-page-title[data-transparent="true"],
628
- .vane-label[data-transparent="true"],
629
- .vane-list-item[data-transparent="true"] {
630
- --text-color: transparent;
631
- }
632
-
633
618
  }
634
619
  /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
635
620
  @layer theme {
@@ -766,6 +751,11 @@
766
751
  --leading-loose: 2;
767
752
  --radius-lg: 0.5rem;
768
753
  --radius-2xl: 1rem;
754
+ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
755
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
756
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
757
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
758
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
769
759
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
770
760
  --animate-bounce: bounce 1s infinite;
771
761
  --default-transition-duration: 150ms;
@@ -878,6 +868,12 @@
878
868
  --size-unit: 1;
879
869
  --bw: 1px;
880
870
  --rw: 1px;
871
+ --fs-unit-xs: 6;
872
+ --fs-unit-sm: 7;
873
+ --fs-unit-md: 8;
874
+ --fs-unit-lg: 9;
875
+ --fs-unit-xl: 10;
876
+ --lh-base: 1.6;
881
877
  }
882
878
  }
883
879
  @layer base {
@@ -1486,9 +1482,6 @@
1486
1482
  .border-sky-400 {
1487
1483
  border-color: var(--color-sky-400);
1488
1484
  }
1489
- .border-transparent {
1490
- border-color: transparent;
1491
- }
1492
1485
  .border-violet-400 {
1493
1486
  border-color: var(--color-violet-400);
1494
1487
  }
@@ -1777,9 +1770,6 @@
1777
1770
  .text-slate-800 {
1778
1771
  color: var(--color-slate-800);
1779
1772
  }
1780
- .text-transparent {
1781
- color: transparent;
1782
- }
1783
1773
  .text-violet-600 {
1784
1774
  color: var(--color-violet-600);
1785
1775
  }
@@ -1832,12 +1822,12 @@
1832
1822
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1833
1823
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1834
1824
  }
1835
- .shadow-2xl {
1836
- --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1825
+ .shadow-\(--shadow-base\) {
1826
+ --tw-shadow: var(--shadow-base);
1837
1827
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1838
1828
  }
1839
- .shadow-2xs {
1840
- --tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1829
+ .shadow-2xl {
1830
+ --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1841
1831
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1842
1832
  }
1843
1833
  .shadow-lg {
@@ -1848,14 +1838,6 @@
1848
1838
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1849
1839
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1850
1840
  }
1851
- .shadow-sm {
1852
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1853
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1854
- }
1855
- .shadow-xs {
1856
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1857
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1858
- }
1859
1841
  .ring {
1860
1842
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1861
1843
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1868,12 +1850,6 @@
1868
1850
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--rw) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1869
1851
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1870
1852
  }
1871
- .shadow-orange-500\/50 {
1872
- --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
1873
- @supports (color: color-mix(in lab, red, red)) {
1874
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1875
- }
1876
- }
1877
1853
  .shadow-red-500 {
1878
1854
  --tw-shadow-color: oklch(63.7% 0.237 25.331);
1879
1855
  @supports (color: color-mix(in lab, red, red)) {
@@ -2098,26 +2074,10 @@
2098
2074
  }
2099
2075
  }
2100
2076
  }
2101
- .hover\:shadow-lg {
2102
- &:hover {
2103
- @media (hover: hover) {
2104
- --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2105
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2106
- }
2107
- }
2108
- }
2109
- .hover\:shadow-md {
2077
+ .hover\:shadow-\(--shadow-hover\) {
2110
2078
  &:hover {
2111
2079
  @media (hover: hover) {
2112
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2113
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2114
- }
2115
- }
2116
- }
2117
- .hover\:shadow-sm {
2118
- &:hover {
2119
- @media (hover: hover) {
2120
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
2080
+ --tw-shadow: var(--shadow-hover);
2121
2081
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2122
2082
  }
2123
2083
  }
@@ -2130,14 +2090,6 @@
2130
2090
  }
2131
2091
  }
2132
2092
  }
2133
- .hover\:shadow-xs {
2134
- &:hover {
2135
- @media (hover: hover) {
2136
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2137
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2138
- }
2139
- }
2140
- }
2141
2093
  .hover\:ring {
2142
2094
  &:hover {
2143
2095
  @media (hover: hover) {
@@ -2333,126 +2285,154 @@
2333
2285
  @layer theme {
2334
2286
  @layer base {
2335
2287
  [data-size] {
2336
- --gap: calc(var(--gap-unit) * var(--spacing));
2337
- --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
2288
+ --py-unit-desktop: var(--py-unit);
2289
+ --py-unit-tablet: var(--py-unit);
2290
+ --py-unit-mobile: var(--py-unit);
2291
+ --gap-unit-desktop: var(--gap-unit);
2292
+ --gap-unit-tablet: var(--gap-unit);
2293
+ --gap-unit-mobile: var(--gap-unit);
2294
+ --fs-unit-desktop: var(--fs-unit);
2295
+ --fs-unit-tablet: var(--fs-unit);
2296
+ --fs-unit-mobile: var(--fs-unit);
2338
2297
  --py: calc(var(--py-unit) * var(--spacing));
2298
+ --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
2299
+ --gap: calc(var(--gap-unit) * var(--spacing));
2300
+ --fs: calc(var(--fs-unit) * var(--fs-base));
2339
2301
  --size: calc(var(--size-unit) * var(--spacing));
2340
2302
  --br: calc(var(--br-unit) * var(--br-base));
2341
- --fs: calc(var(--fs-unit) * var(--fs-base));
2342
2303
  --pl: calc(var(--py-unit) * var(--spacing));
2343
2304
  }
2344
2305
  }
2345
2306
  @layer components {
2307
+ [data-vane-type="ui"][data-size="xs"] {
2308
+ --br-unit: 1;
2309
+ --gap-unit: 1;
2310
+ --shadow-base: var(--shadow-2xs);
2311
+ --shadow-hover: var(--shadow-xs);
2312
+ }
2313
+ [data-vane-type="ui"][data-size="sm"] {
2314
+ --br-unit: 1.5;
2315
+ --gap-unit: 1.5;
2316
+ --shadow-base: var(--shadow-xs);
2317
+ --shadow-hover: var(--shadow-sm);
2318
+ }
2319
+ [data-vane-type="ui"][data-size="md"] {
2320
+ --br-unit: 2;
2321
+ --gap-unit: 2;
2322
+ --shadow-base: var(--shadow-sm);
2323
+ --shadow-hover: var(--shadow);
2324
+ }
2325
+ [data-vane-type="ui"][data-size="lg"] {
2326
+ --br-unit: 2.5;
2327
+ --gap-unit: 2.5;
2328
+ --shadow-base: var(--shadow);
2329
+ --shadow-hover: var(--shadow-md);
2330
+ }
2331
+ [data-vane-type="ui"][data-size="xl"] {
2332
+ --br-unit: 3;
2333
+ --gap-unit: 3;
2334
+ --shadow-base: var(--shadow-md);
2335
+ --shadow-hover: var(--shadow-lg);
2336
+ }
2337
+ [data-vane-type="layout"][data-size="xs"] {
2338
+ --br-unit: 3;
2339
+ --gap-unit: 2;
2340
+ --shadow-base: var(--shadow-xs);
2341
+ }
2342
+ [data-vane-type="layout"][data-size="sm"] {
2343
+ --br-unit: 4;
2344
+ --gap-unit: 3;
2345
+ --shadow-base: var(--shadow-sm);
2346
+ }
2347
+ [data-vane-type="layout"][data-size="md"] {
2348
+ --br-unit: 5;
2349
+ --gap-unit: 4;
2350
+ --shadow-base: var(--shadow);
2351
+ }
2352
+ [data-vane-type="layout"][data-size="lg"] {
2353
+ --br-unit: 6;
2354
+ --gap-unit: 5;
2355
+ --shadow-base: var(--shadow-md);
2356
+ }
2357
+ [data-vane-type="layout"][data-size="xl"] {
2358
+ --br-unit: 7;
2359
+ --gap-unit: 6;
2360
+ --shadow-base: var(--shadow-lg);
2361
+ }
2346
2362
  .vane-button {
2347
2363
  --lh: 1.3;
2348
- --br-unit: 2;
2349
2364
  --py-unit: 2;
2350
2365
  --aspect-ratio: 2;
2351
- --gap-unit: 2;
2352
2366
  }
2353
2367
  .vane-button[data-size="xs"] {
2354
- --fs-unit: 6;
2368
+ --fs-unit: var(--fs-unit-xs);
2355
2369
  --py-unit: 1;
2356
- --br-unit: 1;
2357
- --gap-unit: 1;
2358
2370
  }
2359
2371
  .vane-button[data-size="sm"] {
2360
- --fs-unit: 7;
2372
+ --fs-unit: var(--fs-unit-sm);
2361
2373
  --py-unit: 1.5;
2362
- --br-unit: 1.5;
2363
- --gap-unit: 1.5;
2364
2374
  }
2365
2375
  .vane-button[data-size="md"] {
2366
- --fs-unit: 8;
2376
+ --fs-unit: var(--fs-unit-md);
2367
2377
  --py-unit: 2;
2368
- --br-unit: 2;
2369
- --gap-unit: 2;
2370
2378
  }
2371
2379
  .vane-button[data-size="lg"] {
2372
- --fs-unit: 9;
2380
+ --fs-unit: var(--fs-unit-lg);
2373
2381
  --py-unit: 2.5;
2374
- --br-unit: 2.5;
2375
- --gap-unit: 2.5;
2376
2382
  }
2377
2383
  .vane-button[data-size="xl"] {
2378
- --fs-unit: 10;
2384
+ --fs-unit: var(--fs-unit-xl);
2379
2385
  --py-unit: 3;
2380
- --br-unit: 3;
2381
- --gap-unit: 3;
2382
2386
  }
2383
2387
  .vane-badge {
2384
- --lh: 1.6;
2385
- --br-unit: 2;
2388
+ --lh: var(--lh-base);
2386
2389
  --py-unit: 2;
2387
2390
  --aspect-ratio: 2;
2388
- --gap-unit: 2;
2389
2391
  }
2390
2392
  .vane-badge[data-size="xs"] {
2391
- --fs-unit: 6;
2393
+ --fs-unit: var(--fs-unit-xs);
2392
2394
  --py-unit: 1;
2393
- --br-unit: 1;
2394
- --gap-unit: 1;
2395
2395
  }
2396
2396
  .vane-badge[data-size="sm"] {
2397
- --fs-unit: 7;
2397
+ --fs-unit: var(--fs-unit-sm);
2398
2398
  --py-unit: 1.5;
2399
- --br-unit: 1.5;
2400
- --gap-unit: 1.5;
2401
2399
  }
2402
2400
  .vane-badge[data-size="md"] {
2403
- --fs-unit: 8;
2401
+ --fs-unit: var(--fs-unit-md);
2404
2402
  --py-unit: 2;
2405
- --br-unit: 2;
2406
- --gap-unit: 2;
2407
2403
  }
2408
2404
  .vane-badge[data-size="lg"] {
2409
- --fs-unit: 9;
2405
+ --fs-unit: var(--fs-unit-lg);
2410
2406
  --py-unit: 2.5;
2411
- --br-unit: 2.5;
2412
- --gap-unit: 2.5;
2413
2407
  }
2414
2408
  .vane-badge[data-size="xl"] {
2415
- --fs-unit: 10;
2409
+ --fs-unit: var(--fs-unit-xl);
2416
2410
  --py-unit: 3;
2417
- --br-unit: 3;
2418
- --gap-unit: 3;
2419
2411
  }
2420
2412
  .vane-chip {
2421
2413
  --lh: 1.2;
2422
- --br-unit: 2;
2423
2414
  --py-unit: 1.5;
2424
2415
  --aspect-ratio: 2;
2425
- --gap-unit: 2;
2426
2416
  }
2427
2417
  .vane-chip[data-size="xs"] {
2428
- --fs-unit: 6;
2418
+ --fs-unit: var(--fs-unit-xs);
2429
2419
  --py-unit: 0.5;
2430
- --br-unit: 1;
2431
- --gap-unit: 1;
2432
2420
  }
2433
2421
  .vane-chip[data-size="sm"] {
2434
- --fs-unit: 7;
2422
+ --fs-unit: var(--fs-unit-sm);
2435
2423
  --py-unit: 1;
2436
- --br-unit: 1.5;
2437
- --gap-unit: 1.5;
2438
2424
  }
2439
2425
  .vane-chip[data-size="md"] {
2440
- --fs-unit: 8;
2426
+ --fs-unit: var(--fs-unit-md);
2441
2427
  --py-unit: 1.5;
2442
- --br-unit: 2;
2443
- --gap-unit: 2;
2444
2428
  }
2445
2429
  .vane-chip[data-size="lg"] {
2446
- --fs-unit: 9;
2430
+ --fs-unit: var(--fs-unit-lg);
2447
2431
  --py-unit: 2;
2448
- --br-unit: 2.5;
2449
- --gap-unit: 2.5;
2450
2432
  }
2451
2433
  .vane-chip[data-size="xl"] {
2452
- --fs-unit: 10;
2434
+ --fs-unit: var(--fs-unit-xl);
2453
2435
  --py-unit: 2.5;
2454
- --br-unit: 3;
2455
- --gap-unit: 3;
2456
2436
  }
2457
2437
  .vane-code {
2458
2438
  --lh: 1;
@@ -2486,35 +2466,29 @@
2486
2466
  --br-unit: 2.5;
2487
2467
  }
2488
2468
  .vane-input {
2489
- --lh: 1.6;
2490
- --br-unit: 2;
2469
+ --lh: var(--lh-base);
2491
2470
  --py-unit: 2;
2492
2471
  --aspect-ratio: 2;
2493
2472
  }
2494
2473
  .vane-input[data-size="xs"] {
2495
- --fs-unit: 6;
2474
+ --fs-unit: var(--fs-unit-xs);
2496
2475
  --py-unit: 1;
2497
- --br-unit: 1;
2498
2476
  }
2499
2477
  .vane-input[data-size="sm"] {
2500
- --fs-unit: 7;
2478
+ --fs-unit: var(--fs-unit-sm);
2501
2479
  --py-unit: 1.5;
2502
- --br-unit: 1.5;
2503
2480
  }
2504
2481
  .vane-input[data-size="md"] {
2505
- --fs-unit: 8;
2482
+ --fs-unit: var(--fs-unit-md);
2506
2483
  --py-unit: 2;
2507
- --br-unit: 2;
2508
2484
  }
2509
2485
  .vane-input[data-size="lg"] {
2510
- --fs-unit: 9;
2486
+ --fs-unit: var(--fs-unit-lg);
2511
2487
  --py-unit: 2.5;
2512
- --br-unit: 2.5;
2513
2488
  }
2514
2489
  .vane-input[data-size="xl"] {
2515
- --fs-unit: 10;
2490
+ --fs-unit: var(--fs-unit-xl);
2516
2491
  --py-unit: 3;
2517
- --br-unit: 3;
2518
2492
  }
2519
2493
  .vane-checkbox {
2520
2494
  --br-unit: 1;
@@ -2540,193 +2514,79 @@
2540
2514
  --br-unit: 1.5;
2541
2515
  }
2542
2516
  .vane-label {
2543
- --lh: 1.6;
2544
- --gap-unit: 2;
2517
+ --lh: var(--lh-base);
2545
2518
  }
2546
2519
  .vane-label[data-size="xs"] {
2547
- --fs-unit: 6;
2548
- --gap-unit: 1;
2520
+ --fs-unit: var(--fs-unit-xs);
2549
2521
  }
2550
2522
  .vane-label[data-size="sm"] {
2551
- --fs-unit: 7;
2552
- --gap-unit: 1.5;
2523
+ --fs-unit: var(--fs-unit-sm);
2553
2524
  }
2554
2525
  .vane-label[data-size="md"] {
2555
- --fs-unit: 8;
2556
- --gap-unit: 2;
2526
+ --fs-unit: var(--fs-unit-md);
2557
2527
  }
2558
2528
  .vane-label[data-size="lg"] {
2559
- --fs-unit: 9;
2560
- --gap-unit: 2.5;
2529
+ --fs-unit: var(--fs-unit-lg);
2561
2530
  }
2562
2531
  .vane-label[data-size="xl"] {
2563
- --fs-unit: 10;
2564
- --gap-unit: 3;
2532
+ --fs-unit: var(--fs-unit-xl);
2565
2533
  }
2566
2534
  .vane-card {
2567
- --br-unit: 5;
2568
2535
  --py-unit: 6;
2569
2536
  --aspect-ratio: 1;
2570
- --gap-unit: 4;
2571
2537
  }
2572
2538
  .vane-card[data-size="xs"] {
2573
2539
  --py-unit: 2;
2574
- --gap-unit: 2;
2575
- --br-unit: 3;
2576
2540
  }
2577
2541
  .vane-card[data-size="sm"] {
2578
2542
  --py-unit: 4;
2579
- --gap-unit: 3;
2580
- --br-unit: 4;
2581
2543
  }
2582
2544
  .vane-card[data-size="md"] {
2583
2545
  --py-unit: 6;
2584
- --gap-unit: 4;
2585
- --br-unit: 5;
2586
2546
  }
2587
2547
  .vane-card[data-size="lg"] {
2588
2548
  --py-unit: 8;
2589
- --gap-unit: 5;
2590
- --br-unit: 6;
2591
2549
  }
2592
2550
  .vane-card[data-size="xl"] {
2593
2551
  --py-unit: 10;
2594
- --gap-unit: 6;
2595
- --br-unit: 7;
2596
2552
  }
2597
2553
  .vane-stack {
2598
- --gap-unit: 4;
2599
2554
  --py-unit: 4;
2600
2555
  --aspect-ratio: 1;
2601
- --br-unit: 5;
2602
2556
  }
2603
2557
  .vane-stack[data-size="xs"] {
2604
- --gap-unit: 2;
2605
2558
  --py-unit: 2;
2606
- --br-unit: 3;
2607
2559
  }
2608
2560
  .vane-stack[data-size="sm"] {
2609
- --gap-unit: 3;
2610
2561
  --py-unit: 3;
2611
- --br-unit: 4;
2612
2562
  }
2613
2563
  .vane-stack[data-size="md"] {
2614
- --gap-unit: 4;
2615
2564
  --py-unit: 4;
2616
- --br-unit: 5;
2617
2565
  }
2618
2566
  .vane-stack[data-size="lg"] {
2619
- --gap-unit: 5;
2620
2567
  --py-unit: 5;
2621
- --br-unit: 6;
2622
2568
  }
2623
2569
  .vane-stack[data-size="xl"] {
2624
- --gap-unit: 6;
2625
2570
  --py-unit: 6;
2626
- --br-unit: 7;
2627
- }
2628
- .vane-row {
2629
- --gap-unit: 4;
2630
- --br-unit: 5;
2631
- }
2632
- .vane-row[data-size="xs"] {
2633
- --gap-unit: 2;
2634
- --br-unit: 3;
2635
- }
2636
- .vane-row[data-size="sm"] {
2637
- --gap-unit: 3;
2638
- --br-unit: 4;
2639
- }
2640
- .vane-row[data-size="md"] {
2641
- --gap-unit: 4;
2642
- --br-unit: 5;
2643
- }
2644
- .vane-row[data-size="lg"] {
2645
- --gap-unit: 5;
2646
- --br-unit: 6;
2647
- }
2648
- .vane-row[data-size="xl"] {
2649
- --gap-unit: 6;
2650
- --br-unit: 7;
2651
- }
2652
- .vane-col {
2653
- --gap-unit: 4;
2654
- --br-unit: 5;
2655
- }
2656
- .vane-col[data-size="xs"] {
2657
- --gap-unit: 2;
2658
- --br-unit: 3;
2659
- }
2660
- .vane-col[data-size="sm"] {
2661
- --gap-unit: 3;
2662
- --br-unit: 4;
2663
- }
2664
- .vane-col[data-size="md"] {
2665
- --gap-unit: 4;
2666
- --br-unit: 5;
2667
- }
2668
- .vane-col[data-size="lg"] {
2669
- --gap-unit: 5;
2670
- --br-unit: 6;
2671
- }
2672
- .vane-col[data-size="xl"] {
2673
- --gap-unit: 6;
2674
- --br-unit: 7;
2675
2571
  }
2676
2572
  .vane-container {
2677
2573
  --py-unit: 8;
2678
2574
  --aspect-ratio: 2;
2679
- --br-unit: 5;
2680
- --gap-unit: 4;
2681
2575
  }
2682
2576
  .vane-container[data-size="xs"] {
2683
2577
  --py-unit: 4;
2684
- --br-unit: 3;
2685
- --gap-unit: 2;
2686
2578
  }
2687
2579
  .vane-container[data-size="sm"] {
2688
2580
  --py-unit: 6;
2689
- --br-unit: 4;
2690
- --gap-unit: 3;
2691
2581
  }
2692
2582
  .vane-container[data-size="md"] {
2693
2583
  --py-unit: 8;
2694
- --br-unit: 5;
2695
- --gap-unit: 4;
2696
2584
  }
2697
2585
  .vane-container[data-size="lg"] {
2698
2586
  --py-unit: 10;
2699
- --br-unit: 6;
2700
- --gap-unit: 5;
2701
2587
  }
2702
2588
  .vane-container[data-size="xl"] {
2703
2589
  --py-unit: 12;
2704
- --br-unit: 7;
2705
- --gap-unit: 6;
2706
- }
2707
- .vane-grid {
2708
- --gap-unit: 4;
2709
- --br-unit: 5;
2710
- }
2711
- .vane-grid[data-size="xs"] {
2712
- --gap-unit: 2;
2713
- --br-unit: 3;
2714
- }
2715
- .vane-grid[data-size="sm"] {
2716
- --gap-unit: 3;
2717
- --br-unit: 4;
2718
- }
2719
- .vane-grid[data-size="md"] {
2720
- --gap-unit: 4;
2721
- --br-unit: 5;
2722
- }
2723
- .vane-grid[data-size="lg"] {
2724
- --gap-unit: 5;
2725
- --br-unit: 6;
2726
- }
2727
- .vane-grid[data-size="xl"] {
2728
- --gap-unit: 6;
2729
- --br-unit: 7;
2730
2590
  }
2731
2591
  .vane-divider {
2732
2592
  --py-unit: 4;
@@ -2746,104 +2606,86 @@
2746
2606
  .vane-divider[data-size="xl"] {
2747
2607
  --py-unit: 6;
2748
2608
  }
2749
- .vane-img {
2750
- --br-unit: 5;
2751
- }
2752
- .vane-img[data-size="xs"] {
2753
- --br-unit: 3;
2754
- }
2755
- .vane-img[data-size="sm"] {
2756
- --br-unit: 4;
2757
- }
2758
- .vane-img[data-size="md"] {
2759
- --br-unit: 5;
2760
- }
2761
- .vane-img[data-size="lg"] {
2762
- --br-unit: 6;
2763
- }
2764
- .vane-img[data-size="xl"] {
2765
- --br-unit: 7;
2766
- }
2767
2609
  .vane-list {
2768
- --lh: 1.6;
2610
+ --lh: var(--lh-base);
2769
2611
  --py-unit: 3;
2770
2612
  }
2771
2613
  .vane-list[data-size="xs"] {
2772
- --fs-unit: 6;
2614
+ --fs-unit: var(--fs-unit-xs);
2773
2615
  --py-unit: 1;
2774
2616
  }
2775
2617
  .vane-list[data-size="sm"] {
2776
- --fs-unit: 7;
2618
+ --fs-unit: var(--fs-unit-sm);
2777
2619
  --py-unit: 2;
2778
2620
  }
2779
2621
  .vane-list[data-size="md"] {
2780
- --fs-unit: 8;
2622
+ --fs-unit: var(--fs-unit-md);
2781
2623
  --py-unit: 3;
2782
2624
  }
2783
2625
  .vane-list[data-size="lg"] {
2784
- --fs-unit: 9;
2626
+ --fs-unit: var(--fs-unit-lg);
2785
2627
  --py-unit: 4;
2786
2628
  }
2787
2629
  .vane-list[data-size="xl"] {
2788
- --fs-unit: 10;
2630
+ --fs-unit: var(--fs-unit-xl);
2789
2631
  --py-unit: 5;
2790
2632
  }
2791
2633
  .vane-text {
2792
- --lh: 1.6;
2634
+ --lh: var(--lh-base);
2793
2635
  }
2794
2636
  .vane-text[data-size="xs"] {
2795
- --fs-unit: 6;
2637
+ --fs-unit: var(--fs-unit-xs);
2796
2638
  }
2797
2639
  .vane-text[data-size="sm"] {
2798
- --fs-unit: 7;
2640
+ --fs-unit: var(--fs-unit-sm);
2799
2641
  }
2800
2642
  .vane-text[data-size="md"] {
2801
- --fs-unit: 8;
2643
+ --fs-unit: var(--fs-unit-md);
2802
2644
  }
2803
2645
  .vane-text[data-size="lg"] {
2804
- --fs-unit: 9;
2646
+ --fs-unit: var(--fs-unit-lg);
2805
2647
  }
2806
2648
  .vane-text[data-size="xl"] {
2807
- --fs-unit: 10;
2649
+ --fs-unit: var(--fs-unit-xl);
2808
2650
  }
2809
2651
  .vane-link {
2810
- --lh: 1.6;
2652
+ --lh: var(--lh-base);
2811
2653
  }
2812
2654
  .vane-link[data-size="xs"] {
2813
- --fs-unit: 6;
2655
+ --fs-unit: var(--fs-unit-xs);
2814
2656
  }
2815
2657
  .vane-link[data-size="sm"] {
2816
- --fs-unit: 7;
2658
+ --fs-unit: var(--fs-unit-sm);
2817
2659
  }
2818
2660
  .vane-link[data-size="md"] {
2819
- --fs-unit: 8;
2661
+ --fs-unit: var(--fs-unit-md);
2820
2662
  }
2821
2663
  .vane-link[data-size="lg"] {
2822
- --fs-unit: 9;
2664
+ --fs-unit: var(--fs-unit-lg);
2823
2665
  }
2824
2666
  .vane-link[data-size="xl"] {
2825
- --fs-unit: 10;
2667
+ --fs-unit: var(--fs-unit-xl);
2826
2668
  }
2827
2669
  .vane-list-item {
2828
- --lh: 1.6;
2670
+ --lh: var(--lh-base);
2829
2671
  }
2830
2672
  .vane-list-item[data-size="xs"] {
2831
- --fs-unit: 6;
2673
+ --fs-unit: var(--fs-unit-xs);
2832
2674
  }
2833
2675
  .vane-list-item[data-size="sm"] {
2834
- --fs-unit: 7;
2676
+ --fs-unit: var(--fs-unit-sm);
2835
2677
  }
2836
2678
  .vane-list-item[data-size="md"] {
2837
- --fs-unit: 8;
2679
+ --fs-unit: var(--fs-unit-md);
2838
2680
  }
2839
2681
  .vane-list-item[data-size="lg"] {
2840
- --fs-unit: 9;
2682
+ --fs-unit: var(--fs-unit-lg);
2841
2683
  }
2842
2684
  .vane-list-item[data-size="xl"] {
2843
- --fs-unit: 10;
2685
+ --fs-unit: var(--fs-unit-xl);
2844
2686
  }
2845
2687
  .vane-section {
2846
- --lh: 1.6;
2688
+ --lh: var(--lh-base);
2847
2689
  --py-unit-desktop: 8;
2848
2690
  --py-unit-tablet: 6;
2849
2691
  --py-unit-mobile: 4;
@@ -3199,16 +3041,6 @@
3199
3041
  --accent-color: var(--color-bg-filled-brand);
3200
3042
  --checked-bg-color: var(--color-bg-filled-brand);
3201
3043
  }
3202
- [data-transparent="true"] {
3203
- --bg-color: transparent;
3204
- --bg-hover-color: transparent;
3205
- --bg-active-color: transparent;
3206
- --accent-color: transparent;
3207
- --checked-bg-color: transparent;
3208
- }
3209
- .vane-text[data-transparent="true"], .vane-link[data-transparent="true"], .vane-title[data-transparent="true"], .vane-section-title[data-transparent="true"], .vane-page-title[data-transparent="true"], .vane-label[data-transparent="true"], .vane-list-item[data-transparent="true"] {
3210
- --text-color: transparent;
3211
- }
3212
3044
  }
3213
3045
  }
3214
3046
  @property --tw-rotate-x {