@vaneui/md 0.9.0-alpha.20260105111433.5364a62 → 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 +263 -512
  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;
@@ -157,93 +154,86 @@
157
154
  --bw: 1px; /* Border width */
158
155
  --rw: 1px; /* Ring width */
159
156
 
160
- /* ========================================
161
- COMMON SIZE SCALES
162
- Reusable scale values for consistent sizing
163
- ======================================== */
164
-
165
157
  /* Font size scale (used by Text, Link, ListItem, Label, List, Button, Badge, Chip) */
166
- --fs-scale-xs: 6;
167
- --fs-scale-sm: 7;
168
- --fs-scale-md: 8;
169
- --fs-scale-lg: 9;
170
- --fs-scale-xl: 10;
171
-
172
- /* UI padding scale (used by Button, Badge, Input) */
173
- --py-ui-scale-xs: 1;
174
- --py-ui-scale-sm: 1.5;
175
- --py-ui-scale-md: 2;
176
- --py-ui-scale-lg: 2.5;
177
- --py-ui-scale-xl: 3;
178
-
179
- /* UI border radius scale (used by Button, Badge, Chip, Input) */
180
- --br-ui-scale-xs: 1;
181
- --br-ui-scale-sm: 1.5;
182
- --br-ui-scale-md: 2;
183
- --br-ui-scale-lg: 2.5;
184
- --br-ui-scale-xl: 3;
185
-
186
- /* UI gap scale (used by Button, Badge, Chip, Label) */
187
- --gap-ui-scale-xs: 1;
188
- --gap-ui-scale-sm: 1.5;
189
- --gap-ui-scale-md: 2;
190
- --gap-ui-scale-lg: 2.5;
191
- --gap-ui-scale-xl: 3;
192
-
193
- /* Layout border radius scale (used by Row, Col, Stack, Card, Grid, Container, Img) */
194
- --br-layout-scale-xs: 3;
195
- --br-layout-scale-sm: 4;
196
- --br-layout-scale-md: 5;
197
- --br-layout-scale-lg: 6;
198
- --br-layout-scale-xl: 7;
199
-
200
- /* Layout gap scale (used by Row, Col, Stack, Card, Grid, Container) */
201
- --gap-layout-scale-xs: 2;
202
- --gap-layout-scale-sm: 3;
203
- --gap-layout-scale-md: 4;
204
- --gap-layout-scale-lg: 5;
205
- --gap-layout-scale-xl: 6;
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;
206
163
 
207
164
  /* Common line height */
208
165
  --lh-base: 1.6;
209
166
  }
210
167
  @layer base {
211
168
  [data-size] {
212
- --gap: calc(var(--gap-unit) * var(--spacing));
213
- --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 */
214
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));
215
185
  --size: calc(var(--size-unit) * var(--spacing));
216
186
  --br: calc(var(--br-unit) * var(--br-base));
217
- --fs: calc(var(--fs-unit) * var(--fs-base));
218
187
  --pl: calc(var(--py-unit) * var(--spacing));
219
188
  }
220
189
  }
221
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
+
222
212
  /* NON-RESPONSIVE COMPONENTS */
223
213
 
224
214
  /* Button */
225
- .vane-button { --lh: 1.3; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
226
- .vane-button[data-size="xs"] { --fs-unit: var(--fs-scale-xs); --py-unit: var(--py-ui-scale-xs); --br-unit: var(--br-ui-scale-xs); --gap-unit: var(--gap-ui-scale-xs); }
227
- .vane-button[data-size="sm"] { --fs-unit: var(--fs-scale-sm); --py-unit: var(--py-ui-scale-sm); --br-unit: var(--br-ui-scale-sm); --gap-unit: var(--gap-ui-scale-sm); }
228
- .vane-button[data-size="md"] { --fs-unit: var(--fs-scale-md); --py-unit: var(--py-ui-scale-md); --br-unit: var(--br-ui-scale-md); --gap-unit: var(--gap-ui-scale-md); }
229
- .vane-button[data-size="lg"] { --fs-unit: var(--fs-scale-lg); --py-unit: var(--py-ui-scale-lg); --br-unit: var(--br-ui-scale-lg); --gap-unit: var(--gap-ui-scale-lg); }
230
- .vane-button[data-size="xl"] { --fs-unit: var(--fs-scale-xl); --py-unit: var(--py-ui-scale-xl); --br-unit: var(--br-ui-scale-xl); --gap-unit: var(--gap-ui-scale-xl); }
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; }
231
221
 
232
222
  /* Badge */
233
- .vane-badge { --lh: var(--lh-base); --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
234
- .vane-badge[data-size="xs"] { --fs-unit: var(--fs-scale-xs); --py-unit: var(--py-ui-scale-xs); --br-unit: var(--br-ui-scale-xs); --gap-unit: var(--gap-ui-scale-xs); }
235
- .vane-badge[data-size="sm"] { --fs-unit: var(--fs-scale-sm); --py-unit: var(--py-ui-scale-sm); --br-unit: var(--br-ui-scale-sm); --gap-unit: var(--gap-ui-scale-sm); }
236
- .vane-badge[data-size="md"] { --fs-unit: var(--fs-scale-md); --py-unit: var(--py-ui-scale-md); --br-unit: var(--br-ui-scale-md); --gap-unit: var(--gap-ui-scale-md); }
237
- .vane-badge[data-size="lg"] { --fs-unit: var(--fs-scale-lg); --py-unit: var(--py-ui-scale-lg); --br-unit: var(--br-ui-scale-lg); --gap-unit: var(--gap-ui-scale-lg); }
238
- .vane-badge[data-size="xl"] { --fs-unit: var(--fs-scale-xl); --py-unit: var(--py-ui-scale-xl); --br-unit: var(--br-ui-scale-xl); --gap-unit: var(--gap-ui-scale-xl); }
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; }
239
229
 
240
230
  /* Chip */
241
- .vane-chip { --lh: 1.2; --br-unit: 2; --py-unit: 1.5; --aspect-ratio: 2; --gap-unit: 2; }
242
- .vane-chip[data-size="xs"] { --fs-unit: var(--fs-scale-xs); --py-unit: 0.5; --br-unit: var(--br-ui-scale-xs); --gap-unit: var(--gap-ui-scale-xs); }
243
- .vane-chip[data-size="sm"] { --fs-unit: var(--fs-scale-sm); --py-unit: 1; --br-unit: var(--br-ui-scale-sm); --gap-unit: var(--gap-ui-scale-sm); }
244
- .vane-chip[data-size="md"] { --fs-unit: var(--fs-scale-md); --py-unit: 1.5; --br-unit: var(--br-ui-scale-md); --gap-unit: var(--gap-ui-scale-md); }
245
- .vane-chip[data-size="lg"] { --fs-unit: var(--fs-scale-lg); --py-unit: 2; --br-unit: var(--br-ui-scale-lg); --gap-unit: var(--gap-ui-scale-lg); }
246
- .vane-chip[data-size="xl"] { --fs-unit: var(--fs-scale-xl); --py-unit: 2.5; --br-unit: var(--br-ui-scale-xl); --gap-unit: var(--gap-ui-scale-xl); }
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; }
247
237
 
248
238
  /* Code */
249
239
  .vane-code { --lh: 1; --br-unit: 1.5; --py-unit: 0.8; --aspect-ratio: 1.8; }
@@ -254,12 +244,12 @@
254
244
  .vane-code[data-size="xl"] { --fs-unit: 9; --py-unit: 1.2; --br-unit: 2.5; }
255
245
 
256
246
  /* Input */
257
- .vane-input { --lh: var(--lh-base); --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; }
258
- .vane-input[data-size="xs"] { --fs-unit: var(--fs-scale-xs); --py-unit: var(--py-ui-scale-xs); --br-unit: var(--br-ui-scale-xs); }
259
- .vane-input[data-size="sm"] { --fs-unit: var(--fs-scale-sm); --py-unit: var(--py-ui-scale-sm); --br-unit: var(--br-ui-scale-sm); }
260
- .vane-input[data-size="md"] { --fs-unit: var(--fs-scale-md); --py-unit: var(--py-ui-scale-md); --br-unit: var(--br-ui-scale-md); }
261
- .vane-input[data-size="lg"] { --fs-unit: var(--fs-scale-lg); --py-unit: var(--py-ui-scale-lg); --br-unit: var(--br-ui-scale-lg); }
262
- .vane-input[data-size="xl"] { --fs-unit: var(--fs-scale-xl); --py-unit: var(--py-ui-scale-xl); --br-unit: var(--br-ui-scale-xl); }
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; }
263
253
 
264
254
  /* Checkbox */
265
255
  .vane-checkbox { --br-unit: 1; }
@@ -270,108 +260,76 @@
270
260
  .vane-checkbox[data-size="xl"] { --size-unit: 5; --br-unit: 1.5; }
271
261
 
272
262
  /* Label */
273
- .vane-label { --lh: var(--lh-base); --gap-unit: 2; }
274
- .vane-label[data-size="xs"] { --fs-unit: var(--fs-scale-xs); --gap-unit: var(--gap-ui-scale-xs); }
275
- .vane-label[data-size="sm"] { --fs-unit: var(--fs-scale-sm); --gap-unit: var(--gap-ui-scale-sm); }
276
- .vane-label[data-size="md"] { --fs-unit: var(--fs-scale-md); --gap-unit: var(--gap-ui-scale-md); }
277
- .vane-label[data-size="lg"] { --fs-unit: var(--fs-scale-lg); --gap-unit: var(--gap-ui-scale-lg); }
278
- .vane-label[data-size="xl"] { --fs-unit: var(--fs-scale-xl); --gap-unit: var(--gap-ui-scale-xl); }
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); }
279
269
 
280
270
  /* Card */
281
- .vane-card { --br-unit: 5; --py-unit: 6; --aspect-ratio: 1; --gap-unit: 4; }
282
- .vane-card[data-size="xs"] { --py-unit: 2; --gap-unit: var(--gap-layout-scale-xs); --br-unit: var(--br-layout-scale-xs); }
283
- .vane-card[data-size="sm"] { --py-unit: 4; --gap-unit: var(--gap-layout-scale-sm); --br-unit: var(--br-layout-scale-sm); }
284
- .vane-card[data-size="md"] { --py-unit: 6; --gap-unit: var(--gap-layout-scale-md); --br-unit: var(--br-layout-scale-md); }
285
- .vane-card[data-size="lg"] { --py-unit: 8; --gap-unit: var(--gap-layout-scale-lg); --br-unit: var(--br-layout-scale-lg); }
286
- .vane-card[data-size="xl"] { --py-unit: 10; --gap-unit: var(--gap-layout-scale-xl); --br-unit: var(--br-layout-scale-xl); }
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; }
287
277
 
288
278
  /* Stack */
289
- .vane-stack { --gap-unit: 4; --py-unit: 4; --aspect-ratio: 1; --br-unit: 5; }
290
- .vane-stack[data-size="xs"] { --gap-unit: var(--gap-layout-scale-xs); --py-unit: 2; --br-unit: var(--br-layout-scale-xs); }
291
- .vane-stack[data-size="sm"] { --gap-unit: var(--gap-layout-scale-sm); --py-unit: 3; --br-unit: var(--br-layout-scale-sm); }
292
- .vane-stack[data-size="md"] { --gap-unit: var(--gap-layout-scale-md); --py-unit: 4; --br-unit: var(--br-layout-scale-md); }
293
- .vane-stack[data-size="lg"] { --gap-unit: var(--gap-layout-scale-lg); --py-unit: 5; --br-unit: var(--br-layout-scale-lg); }
294
- .vane-stack[data-size="xl"] { --gap-unit: var(--gap-layout-scale-xl); --py-unit: 6; --br-unit: var(--br-layout-scale-xl); }
295
-
296
- /* Row */
297
- .vane-row { --gap-unit: 4; --br-unit: 5; }
298
- .vane-row[data-size="xs"] { --gap-unit: var(--gap-layout-scale-xs); --br-unit: var(--br-layout-scale-xs); }
299
- .vane-row[data-size="sm"] { --gap-unit: var(--gap-layout-scale-sm); --br-unit: var(--br-layout-scale-sm); }
300
- .vane-row[data-size="md"] { --gap-unit: var(--gap-layout-scale-md); --br-unit: var(--br-layout-scale-md); }
301
- .vane-row[data-size="lg"] { --gap-unit: var(--gap-layout-scale-lg); --br-unit: var(--br-layout-scale-lg); }
302
- .vane-row[data-size="xl"] { --gap-unit: var(--gap-layout-scale-xl); --br-unit: var(--br-layout-scale-xl); }
303
-
304
- /* Col */
305
- .vane-col { --gap-unit: 4; --br-unit: 5; }
306
- .vane-col[data-size="xs"] { --gap-unit: var(--gap-layout-scale-xs); --br-unit: var(--br-layout-scale-xs); }
307
- .vane-col[data-size="sm"] { --gap-unit: var(--gap-layout-scale-sm); --br-unit: var(--br-layout-scale-sm); }
308
- .vane-col[data-size="md"] { --gap-unit: var(--gap-layout-scale-md); --br-unit: var(--br-layout-scale-md); }
309
- .vane-col[data-size="lg"] { --gap-unit: var(--gap-layout-scale-lg); --br-unit: var(--br-layout-scale-lg); }
310
- .vane-col[data-size="xl"] { --gap-unit: var(--gap-layout-scale-xl); --br-unit: var(--br-layout-scale-xl); }
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; }
311
285
 
312
286
  /* Container */
313
- .vane-container { --py-unit: 8; --aspect-ratio: 2; --br-unit: 5; --gap-unit: 4; }
314
- .vane-container[data-size="xs"] { --py-unit: 4; --br-unit: var(--br-layout-scale-xs); --gap-unit: var(--gap-layout-scale-xs); }
315
- .vane-container[data-size="sm"] { --py-unit: 6; --br-unit: var(--br-layout-scale-sm); --gap-unit: var(--gap-layout-scale-sm); }
316
- .vane-container[data-size="md"] { --py-unit: 8; --br-unit: var(--br-layout-scale-md); --gap-unit: var(--gap-layout-scale-md); }
317
- .vane-container[data-size="lg"] { --py-unit: 10; --br-unit: var(--br-layout-scale-lg); --gap-unit: var(--gap-layout-scale-lg); }
318
- .vane-container[data-size="xl"] { --py-unit: 12; --br-unit: var(--br-layout-scale-xl); --gap-unit: var(--gap-layout-scale-xl); }
319
-
320
- /* Grid */
321
- .vane-grid { --gap-unit: 4; --br-unit: 5; }
322
- .vane-grid[data-size="xs"] { --gap-unit: var(--gap-layout-scale-xs); --br-unit: var(--br-layout-scale-xs); }
323
- .vane-grid[data-size="sm"] { --gap-unit: var(--gap-layout-scale-sm); --br-unit: var(--br-layout-scale-sm); }
324
- .vane-grid[data-size="md"] { --gap-unit: var(--gap-layout-scale-md); --br-unit: var(--br-layout-scale-md); }
325
- .vane-grid[data-size="lg"] { --gap-unit: var(--gap-layout-scale-lg); --br-unit: var(--br-layout-scale-lg); }
326
- .vane-grid[data-size="xl"] { --gap-unit: var(--gap-layout-scale-xl); --br-unit: var(--br-layout-scale-xl); }
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; }
327
293
 
328
294
  /* Divider */
329
295
  .vane-divider { --py-unit: 4; }
330
- .vane-divider[data-size="xs"] { --py-unit: var(--gap-layout-scale-xs); }
331
- .vane-divider[data-size="sm"] { --py-unit: var(--gap-layout-scale-sm); }
332
- .vane-divider[data-size="md"] { --py-unit: var(--gap-layout-scale-md); }
333
- .vane-divider[data-size="lg"] { --py-unit: var(--gap-layout-scale-lg); }
334
- .vane-divider[data-size="xl"] { --py-unit: var(--gap-layout-scale-xl); }
335
-
336
- /* Img */
337
- .vane-img { --br-unit: 5; }
338
- .vane-img[data-size="xs"] { --br-unit: var(--br-layout-scale-xs); }
339
- .vane-img[data-size="sm"] { --br-unit: var(--br-layout-scale-sm); }
340
- .vane-img[data-size="md"] { --br-unit: var(--br-layout-scale-md); }
341
- .vane-img[data-size="lg"] { --br-unit: var(--br-layout-scale-lg); }
342
- .vane-img[data-size="xl"] { --br-unit: var(--br-layout-scale-xl); }
296
+ .vane-divider[data-size="xs"] { --py-unit: 2; }
297
+ .vane-divider[data-size="sm"] { --py-unit: 3; }
298
+ .vane-divider[data-size="md"] { --py-unit: 4; }
299
+ .vane-divider[data-size="lg"] { --py-unit: 5; }
300
+ .vane-divider[data-size="xl"] { --py-unit: 6; }
343
301
 
344
302
  /* List */
345
303
  .vane-list { --lh: var(--lh-base); --py-unit: 3; }
346
- .vane-list[data-size="xs"] { --fs-unit: var(--fs-scale-xs); --py-unit: 1; }
347
- .vane-list[data-size="sm"] { --fs-unit: var(--fs-scale-sm); --py-unit: 2; }
348
- .vane-list[data-size="md"] { --fs-unit: var(--fs-scale-md); --py-unit: 3; }
349
- .vane-list[data-size="lg"] { --fs-unit: var(--fs-scale-lg); --py-unit: 4; }
350
- .vane-list[data-size="xl"] { --fs-unit: var(--fs-scale-xl); --py-unit: 5; }
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; }
351
309
 
352
310
  /* Text */
353
311
  .vane-text { --lh: var(--lh-base); }
354
- .vane-text[data-size="xs"] { --fs-unit: var(--fs-scale-xs); }
355
- .vane-text[data-size="sm"] { --fs-unit: var(--fs-scale-sm); }
356
- .vane-text[data-size="md"] { --fs-unit: var(--fs-scale-md); }
357
- .vane-text[data-size="lg"] { --fs-unit: var(--fs-scale-lg); }
358
- .vane-text[data-size="xl"] { --fs-unit: var(--fs-scale-xl); }
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); }
359
317
 
360
318
  /* Link */
361
319
  .vane-link { --lh: var(--lh-base); }
362
- .vane-link[data-size="xs"] { --fs-unit: var(--fs-scale-xs); }
363
- .vane-link[data-size="sm"] { --fs-unit: var(--fs-scale-sm); }
364
- .vane-link[data-size="md"] { --fs-unit: var(--fs-scale-md); }
365
- .vane-link[data-size="lg"] { --fs-unit: var(--fs-scale-lg); }
366
- .vane-link[data-size="xl"] { --fs-unit: var(--fs-scale-xl); }
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); }
367
325
 
368
326
  /* ListItem */
369
327
  .vane-list-item { --lh: var(--lh-base); }
370
- .vane-list-item[data-size="xs"] { --fs-unit: var(--fs-scale-xs); }
371
- .vane-list-item[data-size="sm"] { --fs-unit: var(--fs-scale-sm); }
372
- .vane-list-item[data-size="md"] { --fs-unit: var(--fs-scale-md); }
373
- .vane-list-item[data-size="lg"] { --fs-unit: var(--fs-scale-lg); }
374
- .vane-list-item[data-size="xl"] { --fs-unit: var(--fs-scale-xl); }
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); }
375
333
 
376
334
  /* RESPONSIVE COMPONENTS */
377
335
 
@@ -657,29 +615,6 @@
657
615
  --checked-bg-color: var(--color-bg-filled-brand);
658
616
  }
659
617
 
660
- /* -----------------------------------------
661
- TRANSPARENT STATE
662
- Overrides colors when data-transparent is set
663
- ----------------------------------------- */
664
- [data-transparent="true"] {
665
- --bg-color: transparent;
666
- --bg-hover-color: transparent;
667
- --bg-active-color: transparent;
668
- --accent-color: transparent;
669
- --checked-bg-color: transparent;
670
- }
671
-
672
- /* Typography components: transparent affects text color */
673
- .vane-text[data-transparent="true"],
674
- .vane-link[data-transparent="true"],
675
- .vane-title[data-transparent="true"],
676
- .vane-section-title[data-transparent="true"],
677
- .vane-page-title[data-transparent="true"],
678
- .vane-label[data-transparent="true"],
679
- .vane-list-item[data-transparent="true"] {
680
- --text-color: transparent;
681
- }
682
-
683
618
  }
684
619
  /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
685
620
  @layer theme {
@@ -816,6 +751,11 @@
816
751
  --leading-loose: 2;
817
752
  --radius-lg: 0.5rem;
818
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);
819
759
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
820
760
  --animate-bounce: bounce 1s infinite;
821
761
  --default-transition-duration: 150ms;
@@ -928,36 +868,11 @@
928
868
  --size-unit: 1;
929
869
  --bw: 1px;
930
870
  --rw: 1px;
931
- --fs-scale-xs: 6;
932
- --fs-scale-sm: 7;
933
- --fs-scale-md: 8;
934
- --fs-scale-lg: 9;
935
- --fs-scale-xl: 10;
936
- --py-ui-scale-xs: 1;
937
- --py-ui-scale-sm: 1.5;
938
- --py-ui-scale-md: 2;
939
- --py-ui-scale-lg: 2.5;
940
- --py-ui-scale-xl: 3;
941
- --br-ui-scale-xs: 1;
942
- --br-ui-scale-sm: 1.5;
943
- --br-ui-scale-md: 2;
944
- --br-ui-scale-lg: 2.5;
945
- --br-ui-scale-xl: 3;
946
- --gap-ui-scale-xs: 1;
947
- --gap-ui-scale-sm: 1.5;
948
- --gap-ui-scale-md: 2;
949
- --gap-ui-scale-lg: 2.5;
950
- --gap-ui-scale-xl: 3;
951
- --br-layout-scale-xs: 3;
952
- --br-layout-scale-sm: 4;
953
- --br-layout-scale-md: 5;
954
- --br-layout-scale-lg: 6;
955
- --br-layout-scale-xl: 7;
956
- --gap-layout-scale-xs: 2;
957
- --gap-layout-scale-sm: 3;
958
- --gap-layout-scale-md: 4;
959
- --gap-layout-scale-lg: 5;
960
- --gap-layout-scale-xl: 6;
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;
961
876
  --lh-base: 1.6;
962
877
  }
963
878
  }
@@ -1567,9 +1482,6 @@
1567
1482
  .border-sky-400 {
1568
1483
  border-color: var(--color-sky-400);
1569
1484
  }
1570
- .border-transparent {
1571
- border-color: transparent;
1572
- }
1573
1485
  .border-violet-400 {
1574
1486
  border-color: var(--color-violet-400);
1575
1487
  }
@@ -1858,9 +1770,6 @@
1858
1770
  .text-slate-800 {
1859
1771
  color: var(--color-slate-800);
1860
1772
  }
1861
- .text-transparent {
1862
- color: transparent;
1863
- }
1864
1773
  .text-violet-600 {
1865
1774
  color: var(--color-violet-600);
1866
1775
  }
@@ -1913,12 +1822,12 @@
1913
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));
1914
1823
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1915
1824
  }
1916
- .shadow-2xl {
1917
- --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);
1918
1827
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1919
1828
  }
1920
- .shadow-2xs {
1921
- --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));
1922
1831
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1923
1832
  }
1924
1833
  .shadow-lg {
@@ -1929,14 +1838,6 @@
1929
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));
1930
1839
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1931
1840
  }
1932
- .shadow-sm {
1933
- --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));
1934
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1935
- }
1936
- .shadow-xs {
1937
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1938
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1939
- }
1940
1841
  .ring {
1941
1842
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1942
1843
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1949,12 +1850,6 @@
1949
1850
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--rw) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1950
1851
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1951
1852
  }
1952
- .shadow-orange-500\/50 {
1953
- --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
1954
- @supports (color: color-mix(in lab, red, red)) {
1955
- --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-orange-500) 50%, transparent) var(--tw-shadow-alpha), transparent);
1956
- }
1957
- }
1958
1853
  .shadow-red-500 {
1959
1854
  --tw-shadow-color: oklch(63.7% 0.237 25.331);
1960
1855
  @supports (color: color-mix(in lab, red, red)) {
@@ -2179,26 +2074,10 @@
2179
2074
  }
2180
2075
  }
2181
2076
  }
2182
- .hover\:shadow-lg {
2183
- &:hover {
2184
- @media (hover: hover) {
2185
- --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));
2186
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2187
- }
2188
- }
2189
- }
2190
- .hover\:shadow-md {
2191
- &:hover {
2192
- @media (hover: hover) {
2193
- --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));
2194
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2195
- }
2196
- }
2197
- }
2198
- .hover\:shadow-sm {
2077
+ .hover\:shadow-\(--shadow-hover\) {
2199
2078
  &:hover {
2200
2079
  @media (hover: hover) {
2201
- --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);
2202
2081
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2203
2082
  }
2204
2083
  }
@@ -2211,14 +2090,6 @@
2211
2090
  }
2212
2091
  }
2213
2092
  }
2214
- .hover\:shadow-xs {
2215
- &:hover {
2216
- @media (hover: hover) {
2217
- --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
2218
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2219
- }
2220
- }
2221
- }
2222
2093
  .hover\:ring {
2223
2094
  &:hover {
2224
2095
  @media (hover: hover) {
@@ -2414,126 +2285,154 @@
2414
2285
  @layer theme {
2415
2286
  @layer base {
2416
2287
  [data-size] {
2417
- --gap: calc(var(--gap-unit) * var(--spacing));
2418
- --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);
2419
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));
2420
2301
  --size: calc(var(--size-unit) * var(--spacing));
2421
2302
  --br: calc(var(--br-unit) * var(--br-base));
2422
- --fs: calc(var(--fs-unit) * var(--fs-base));
2423
2303
  --pl: calc(var(--py-unit) * var(--spacing));
2424
2304
  }
2425
2305
  }
2426
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
+ }
2427
2362
  .vane-button {
2428
2363
  --lh: 1.3;
2429
- --br-unit: 2;
2430
2364
  --py-unit: 2;
2431
2365
  --aspect-ratio: 2;
2432
- --gap-unit: 2;
2433
2366
  }
2434
2367
  .vane-button[data-size="xs"] {
2435
- --fs-unit: var(--fs-scale-xs);
2436
- --py-unit: var(--py-ui-scale-xs);
2437
- --br-unit: var(--br-ui-scale-xs);
2438
- --gap-unit: var(--gap-ui-scale-xs);
2368
+ --fs-unit: var(--fs-unit-xs);
2369
+ --py-unit: 1;
2439
2370
  }
2440
2371
  .vane-button[data-size="sm"] {
2441
- --fs-unit: var(--fs-scale-sm);
2442
- --py-unit: var(--py-ui-scale-sm);
2443
- --br-unit: var(--br-ui-scale-sm);
2444
- --gap-unit: var(--gap-ui-scale-sm);
2372
+ --fs-unit: var(--fs-unit-sm);
2373
+ --py-unit: 1.5;
2445
2374
  }
2446
2375
  .vane-button[data-size="md"] {
2447
- --fs-unit: var(--fs-scale-md);
2448
- --py-unit: var(--py-ui-scale-md);
2449
- --br-unit: var(--br-ui-scale-md);
2450
- --gap-unit: var(--gap-ui-scale-md);
2376
+ --fs-unit: var(--fs-unit-md);
2377
+ --py-unit: 2;
2451
2378
  }
2452
2379
  .vane-button[data-size="lg"] {
2453
- --fs-unit: var(--fs-scale-lg);
2454
- --py-unit: var(--py-ui-scale-lg);
2455
- --br-unit: var(--br-ui-scale-lg);
2456
- --gap-unit: var(--gap-ui-scale-lg);
2380
+ --fs-unit: var(--fs-unit-lg);
2381
+ --py-unit: 2.5;
2457
2382
  }
2458
2383
  .vane-button[data-size="xl"] {
2459
- --fs-unit: var(--fs-scale-xl);
2460
- --py-unit: var(--py-ui-scale-xl);
2461
- --br-unit: var(--br-ui-scale-xl);
2462
- --gap-unit: var(--gap-ui-scale-xl);
2384
+ --fs-unit: var(--fs-unit-xl);
2385
+ --py-unit: 3;
2463
2386
  }
2464
2387
  .vane-badge {
2465
2388
  --lh: var(--lh-base);
2466
- --br-unit: 2;
2467
2389
  --py-unit: 2;
2468
2390
  --aspect-ratio: 2;
2469
- --gap-unit: 2;
2470
2391
  }
2471
2392
  .vane-badge[data-size="xs"] {
2472
- --fs-unit: var(--fs-scale-xs);
2473
- --py-unit: var(--py-ui-scale-xs);
2474
- --br-unit: var(--br-ui-scale-xs);
2475
- --gap-unit: var(--gap-ui-scale-xs);
2393
+ --fs-unit: var(--fs-unit-xs);
2394
+ --py-unit: 1;
2476
2395
  }
2477
2396
  .vane-badge[data-size="sm"] {
2478
- --fs-unit: var(--fs-scale-sm);
2479
- --py-unit: var(--py-ui-scale-sm);
2480
- --br-unit: var(--br-ui-scale-sm);
2481
- --gap-unit: var(--gap-ui-scale-sm);
2397
+ --fs-unit: var(--fs-unit-sm);
2398
+ --py-unit: 1.5;
2482
2399
  }
2483
2400
  .vane-badge[data-size="md"] {
2484
- --fs-unit: var(--fs-scale-md);
2485
- --py-unit: var(--py-ui-scale-md);
2486
- --br-unit: var(--br-ui-scale-md);
2487
- --gap-unit: var(--gap-ui-scale-md);
2401
+ --fs-unit: var(--fs-unit-md);
2402
+ --py-unit: 2;
2488
2403
  }
2489
2404
  .vane-badge[data-size="lg"] {
2490
- --fs-unit: var(--fs-scale-lg);
2491
- --py-unit: var(--py-ui-scale-lg);
2492
- --br-unit: var(--br-ui-scale-lg);
2493
- --gap-unit: var(--gap-ui-scale-lg);
2405
+ --fs-unit: var(--fs-unit-lg);
2406
+ --py-unit: 2.5;
2494
2407
  }
2495
2408
  .vane-badge[data-size="xl"] {
2496
- --fs-unit: var(--fs-scale-xl);
2497
- --py-unit: var(--py-ui-scale-xl);
2498
- --br-unit: var(--br-ui-scale-xl);
2499
- --gap-unit: var(--gap-ui-scale-xl);
2409
+ --fs-unit: var(--fs-unit-xl);
2410
+ --py-unit: 3;
2500
2411
  }
2501
2412
  .vane-chip {
2502
2413
  --lh: 1.2;
2503
- --br-unit: 2;
2504
2414
  --py-unit: 1.5;
2505
2415
  --aspect-ratio: 2;
2506
- --gap-unit: 2;
2507
2416
  }
2508
2417
  .vane-chip[data-size="xs"] {
2509
- --fs-unit: var(--fs-scale-xs);
2418
+ --fs-unit: var(--fs-unit-xs);
2510
2419
  --py-unit: 0.5;
2511
- --br-unit: var(--br-ui-scale-xs);
2512
- --gap-unit: var(--gap-ui-scale-xs);
2513
2420
  }
2514
2421
  .vane-chip[data-size="sm"] {
2515
- --fs-unit: var(--fs-scale-sm);
2422
+ --fs-unit: var(--fs-unit-sm);
2516
2423
  --py-unit: 1;
2517
- --br-unit: var(--br-ui-scale-sm);
2518
- --gap-unit: var(--gap-ui-scale-sm);
2519
2424
  }
2520
2425
  .vane-chip[data-size="md"] {
2521
- --fs-unit: var(--fs-scale-md);
2426
+ --fs-unit: var(--fs-unit-md);
2522
2427
  --py-unit: 1.5;
2523
- --br-unit: var(--br-ui-scale-md);
2524
- --gap-unit: var(--gap-ui-scale-md);
2525
2428
  }
2526
2429
  .vane-chip[data-size="lg"] {
2527
- --fs-unit: var(--fs-scale-lg);
2430
+ --fs-unit: var(--fs-unit-lg);
2528
2431
  --py-unit: 2;
2529
- --br-unit: var(--br-ui-scale-lg);
2530
- --gap-unit: var(--gap-ui-scale-lg);
2531
2432
  }
2532
2433
  .vane-chip[data-size="xl"] {
2533
- --fs-unit: var(--fs-scale-xl);
2434
+ --fs-unit: var(--fs-unit-xl);
2534
2435
  --py-unit: 2.5;
2535
- --br-unit: var(--br-ui-scale-xl);
2536
- --gap-unit: var(--gap-ui-scale-xl);
2537
2436
  }
2538
2437
  .vane-code {
2539
2438
  --lh: 1;
@@ -2568,34 +2467,28 @@
2568
2467
  }
2569
2468
  .vane-input {
2570
2469
  --lh: var(--lh-base);
2571
- --br-unit: 2;
2572
2470
  --py-unit: 2;
2573
2471
  --aspect-ratio: 2;
2574
2472
  }
2575
2473
  .vane-input[data-size="xs"] {
2576
- --fs-unit: var(--fs-scale-xs);
2577
- --py-unit: var(--py-ui-scale-xs);
2578
- --br-unit: var(--br-ui-scale-xs);
2474
+ --fs-unit: var(--fs-unit-xs);
2475
+ --py-unit: 1;
2579
2476
  }
2580
2477
  .vane-input[data-size="sm"] {
2581
- --fs-unit: var(--fs-scale-sm);
2582
- --py-unit: var(--py-ui-scale-sm);
2583
- --br-unit: var(--br-ui-scale-sm);
2478
+ --fs-unit: var(--fs-unit-sm);
2479
+ --py-unit: 1.5;
2584
2480
  }
2585
2481
  .vane-input[data-size="md"] {
2586
- --fs-unit: var(--fs-scale-md);
2587
- --py-unit: var(--py-ui-scale-md);
2588
- --br-unit: var(--br-ui-scale-md);
2482
+ --fs-unit: var(--fs-unit-md);
2483
+ --py-unit: 2;
2589
2484
  }
2590
2485
  .vane-input[data-size="lg"] {
2591
- --fs-unit: var(--fs-scale-lg);
2592
- --py-unit: var(--py-ui-scale-lg);
2593
- --br-unit: var(--br-ui-scale-lg);
2486
+ --fs-unit: var(--fs-unit-lg);
2487
+ --py-unit: 2.5;
2594
2488
  }
2595
2489
  .vane-input[data-size="xl"] {
2596
- --fs-unit: var(--fs-scale-xl);
2597
- --py-unit: var(--py-ui-scale-xl);
2598
- --br-unit: var(--br-ui-scale-xl);
2490
+ --fs-unit: var(--fs-unit-xl);
2491
+ --py-unit: 3;
2599
2492
  }
2600
2493
  .vane-checkbox {
2601
2494
  --br-unit: 1;
@@ -2622,306 +2515,174 @@
2622
2515
  }
2623
2516
  .vane-label {
2624
2517
  --lh: var(--lh-base);
2625
- --gap-unit: 2;
2626
2518
  }
2627
2519
  .vane-label[data-size="xs"] {
2628
- --fs-unit: var(--fs-scale-xs);
2629
- --gap-unit: var(--gap-ui-scale-xs);
2520
+ --fs-unit: var(--fs-unit-xs);
2630
2521
  }
2631
2522
  .vane-label[data-size="sm"] {
2632
- --fs-unit: var(--fs-scale-sm);
2633
- --gap-unit: var(--gap-ui-scale-sm);
2523
+ --fs-unit: var(--fs-unit-sm);
2634
2524
  }
2635
2525
  .vane-label[data-size="md"] {
2636
- --fs-unit: var(--fs-scale-md);
2637
- --gap-unit: var(--gap-ui-scale-md);
2526
+ --fs-unit: var(--fs-unit-md);
2638
2527
  }
2639
2528
  .vane-label[data-size="lg"] {
2640
- --fs-unit: var(--fs-scale-lg);
2641
- --gap-unit: var(--gap-ui-scale-lg);
2529
+ --fs-unit: var(--fs-unit-lg);
2642
2530
  }
2643
2531
  .vane-label[data-size="xl"] {
2644
- --fs-unit: var(--fs-scale-xl);
2645
- --gap-unit: var(--gap-ui-scale-xl);
2532
+ --fs-unit: var(--fs-unit-xl);
2646
2533
  }
2647
2534
  .vane-card {
2648
- --br-unit: 5;
2649
2535
  --py-unit: 6;
2650
2536
  --aspect-ratio: 1;
2651
- --gap-unit: 4;
2652
2537
  }
2653
2538
  .vane-card[data-size="xs"] {
2654
2539
  --py-unit: 2;
2655
- --gap-unit: var(--gap-layout-scale-xs);
2656
- --br-unit: var(--br-layout-scale-xs);
2657
2540
  }
2658
2541
  .vane-card[data-size="sm"] {
2659
2542
  --py-unit: 4;
2660
- --gap-unit: var(--gap-layout-scale-sm);
2661
- --br-unit: var(--br-layout-scale-sm);
2662
2543
  }
2663
2544
  .vane-card[data-size="md"] {
2664
2545
  --py-unit: 6;
2665
- --gap-unit: var(--gap-layout-scale-md);
2666
- --br-unit: var(--br-layout-scale-md);
2667
2546
  }
2668
2547
  .vane-card[data-size="lg"] {
2669
2548
  --py-unit: 8;
2670
- --gap-unit: var(--gap-layout-scale-lg);
2671
- --br-unit: var(--br-layout-scale-lg);
2672
2549
  }
2673
2550
  .vane-card[data-size="xl"] {
2674
2551
  --py-unit: 10;
2675
- --gap-unit: var(--gap-layout-scale-xl);
2676
- --br-unit: var(--br-layout-scale-xl);
2677
2552
  }
2678
2553
  .vane-stack {
2679
- --gap-unit: 4;
2680
2554
  --py-unit: 4;
2681
2555
  --aspect-ratio: 1;
2682
- --br-unit: 5;
2683
2556
  }
2684
2557
  .vane-stack[data-size="xs"] {
2685
- --gap-unit: var(--gap-layout-scale-xs);
2686
2558
  --py-unit: 2;
2687
- --br-unit: var(--br-layout-scale-xs);
2688
2559
  }
2689
2560
  .vane-stack[data-size="sm"] {
2690
- --gap-unit: var(--gap-layout-scale-sm);
2691
2561
  --py-unit: 3;
2692
- --br-unit: var(--br-layout-scale-sm);
2693
2562
  }
2694
2563
  .vane-stack[data-size="md"] {
2695
- --gap-unit: var(--gap-layout-scale-md);
2696
2564
  --py-unit: 4;
2697
- --br-unit: var(--br-layout-scale-md);
2698
2565
  }
2699
2566
  .vane-stack[data-size="lg"] {
2700
- --gap-unit: var(--gap-layout-scale-lg);
2701
2567
  --py-unit: 5;
2702
- --br-unit: var(--br-layout-scale-lg);
2703
2568
  }
2704
2569
  .vane-stack[data-size="xl"] {
2705
- --gap-unit: var(--gap-layout-scale-xl);
2706
2570
  --py-unit: 6;
2707
- --br-unit: var(--br-layout-scale-xl);
2708
- }
2709
- .vane-row {
2710
- --gap-unit: 4;
2711
- --br-unit: 5;
2712
- }
2713
- .vane-row[data-size="xs"] {
2714
- --gap-unit: var(--gap-layout-scale-xs);
2715
- --br-unit: var(--br-layout-scale-xs);
2716
- }
2717
- .vane-row[data-size="sm"] {
2718
- --gap-unit: var(--gap-layout-scale-sm);
2719
- --br-unit: var(--br-layout-scale-sm);
2720
- }
2721
- .vane-row[data-size="md"] {
2722
- --gap-unit: var(--gap-layout-scale-md);
2723
- --br-unit: var(--br-layout-scale-md);
2724
- }
2725
- .vane-row[data-size="lg"] {
2726
- --gap-unit: var(--gap-layout-scale-lg);
2727
- --br-unit: var(--br-layout-scale-lg);
2728
- }
2729
- .vane-row[data-size="xl"] {
2730
- --gap-unit: var(--gap-layout-scale-xl);
2731
- --br-unit: var(--br-layout-scale-xl);
2732
- }
2733
- .vane-col {
2734
- --gap-unit: 4;
2735
- --br-unit: 5;
2736
- }
2737
- .vane-col[data-size="xs"] {
2738
- --gap-unit: var(--gap-layout-scale-xs);
2739
- --br-unit: var(--br-layout-scale-xs);
2740
- }
2741
- .vane-col[data-size="sm"] {
2742
- --gap-unit: var(--gap-layout-scale-sm);
2743
- --br-unit: var(--br-layout-scale-sm);
2744
- }
2745
- .vane-col[data-size="md"] {
2746
- --gap-unit: var(--gap-layout-scale-md);
2747
- --br-unit: var(--br-layout-scale-md);
2748
- }
2749
- .vane-col[data-size="lg"] {
2750
- --gap-unit: var(--gap-layout-scale-lg);
2751
- --br-unit: var(--br-layout-scale-lg);
2752
- }
2753
- .vane-col[data-size="xl"] {
2754
- --gap-unit: var(--gap-layout-scale-xl);
2755
- --br-unit: var(--br-layout-scale-xl);
2756
2571
  }
2757
2572
  .vane-container {
2758
2573
  --py-unit: 8;
2759
2574
  --aspect-ratio: 2;
2760
- --br-unit: 5;
2761
- --gap-unit: 4;
2762
2575
  }
2763
2576
  .vane-container[data-size="xs"] {
2764
2577
  --py-unit: 4;
2765
- --br-unit: var(--br-layout-scale-xs);
2766
- --gap-unit: var(--gap-layout-scale-xs);
2767
2578
  }
2768
2579
  .vane-container[data-size="sm"] {
2769
2580
  --py-unit: 6;
2770
- --br-unit: var(--br-layout-scale-sm);
2771
- --gap-unit: var(--gap-layout-scale-sm);
2772
2581
  }
2773
2582
  .vane-container[data-size="md"] {
2774
2583
  --py-unit: 8;
2775
- --br-unit: var(--br-layout-scale-md);
2776
- --gap-unit: var(--gap-layout-scale-md);
2777
2584
  }
2778
2585
  .vane-container[data-size="lg"] {
2779
2586
  --py-unit: 10;
2780
- --br-unit: var(--br-layout-scale-lg);
2781
- --gap-unit: var(--gap-layout-scale-lg);
2782
2587
  }
2783
2588
  .vane-container[data-size="xl"] {
2784
2589
  --py-unit: 12;
2785
- --br-unit: var(--br-layout-scale-xl);
2786
- --gap-unit: var(--gap-layout-scale-xl);
2787
- }
2788
- .vane-grid {
2789
- --gap-unit: 4;
2790
- --br-unit: 5;
2791
- }
2792
- .vane-grid[data-size="xs"] {
2793
- --gap-unit: var(--gap-layout-scale-xs);
2794
- --br-unit: var(--br-layout-scale-xs);
2795
- }
2796
- .vane-grid[data-size="sm"] {
2797
- --gap-unit: var(--gap-layout-scale-sm);
2798
- --br-unit: var(--br-layout-scale-sm);
2799
- }
2800
- .vane-grid[data-size="md"] {
2801
- --gap-unit: var(--gap-layout-scale-md);
2802
- --br-unit: var(--br-layout-scale-md);
2803
- }
2804
- .vane-grid[data-size="lg"] {
2805
- --gap-unit: var(--gap-layout-scale-lg);
2806
- --br-unit: var(--br-layout-scale-lg);
2807
- }
2808
- .vane-grid[data-size="xl"] {
2809
- --gap-unit: var(--gap-layout-scale-xl);
2810
- --br-unit: var(--br-layout-scale-xl);
2811
2590
  }
2812
2591
  .vane-divider {
2813
2592
  --py-unit: 4;
2814
2593
  }
2815
2594
  .vane-divider[data-size="xs"] {
2816
- --py-unit: var(--gap-layout-scale-xs);
2595
+ --py-unit: 2;
2817
2596
  }
2818
2597
  .vane-divider[data-size="sm"] {
2819
- --py-unit: var(--gap-layout-scale-sm);
2598
+ --py-unit: 3;
2820
2599
  }
2821
2600
  .vane-divider[data-size="md"] {
2822
- --py-unit: var(--gap-layout-scale-md);
2601
+ --py-unit: 4;
2823
2602
  }
2824
2603
  .vane-divider[data-size="lg"] {
2825
- --py-unit: var(--gap-layout-scale-lg);
2604
+ --py-unit: 5;
2826
2605
  }
2827
2606
  .vane-divider[data-size="xl"] {
2828
- --py-unit: var(--gap-layout-scale-xl);
2829
- }
2830
- .vane-img {
2831
- --br-unit: 5;
2832
- }
2833
- .vane-img[data-size="xs"] {
2834
- --br-unit: var(--br-layout-scale-xs);
2835
- }
2836
- .vane-img[data-size="sm"] {
2837
- --br-unit: var(--br-layout-scale-sm);
2838
- }
2839
- .vane-img[data-size="md"] {
2840
- --br-unit: var(--br-layout-scale-md);
2841
- }
2842
- .vane-img[data-size="lg"] {
2843
- --br-unit: var(--br-layout-scale-lg);
2844
- }
2845
- .vane-img[data-size="xl"] {
2846
- --br-unit: var(--br-layout-scale-xl);
2607
+ --py-unit: 6;
2847
2608
  }
2848
2609
  .vane-list {
2849
2610
  --lh: var(--lh-base);
2850
2611
  --py-unit: 3;
2851
2612
  }
2852
2613
  .vane-list[data-size="xs"] {
2853
- --fs-unit: var(--fs-scale-xs);
2614
+ --fs-unit: var(--fs-unit-xs);
2854
2615
  --py-unit: 1;
2855
2616
  }
2856
2617
  .vane-list[data-size="sm"] {
2857
- --fs-unit: var(--fs-scale-sm);
2618
+ --fs-unit: var(--fs-unit-sm);
2858
2619
  --py-unit: 2;
2859
2620
  }
2860
2621
  .vane-list[data-size="md"] {
2861
- --fs-unit: var(--fs-scale-md);
2622
+ --fs-unit: var(--fs-unit-md);
2862
2623
  --py-unit: 3;
2863
2624
  }
2864
2625
  .vane-list[data-size="lg"] {
2865
- --fs-unit: var(--fs-scale-lg);
2626
+ --fs-unit: var(--fs-unit-lg);
2866
2627
  --py-unit: 4;
2867
2628
  }
2868
2629
  .vane-list[data-size="xl"] {
2869
- --fs-unit: var(--fs-scale-xl);
2630
+ --fs-unit: var(--fs-unit-xl);
2870
2631
  --py-unit: 5;
2871
2632
  }
2872
2633
  .vane-text {
2873
2634
  --lh: var(--lh-base);
2874
2635
  }
2875
2636
  .vane-text[data-size="xs"] {
2876
- --fs-unit: var(--fs-scale-xs);
2637
+ --fs-unit: var(--fs-unit-xs);
2877
2638
  }
2878
2639
  .vane-text[data-size="sm"] {
2879
- --fs-unit: var(--fs-scale-sm);
2640
+ --fs-unit: var(--fs-unit-sm);
2880
2641
  }
2881
2642
  .vane-text[data-size="md"] {
2882
- --fs-unit: var(--fs-scale-md);
2643
+ --fs-unit: var(--fs-unit-md);
2883
2644
  }
2884
2645
  .vane-text[data-size="lg"] {
2885
- --fs-unit: var(--fs-scale-lg);
2646
+ --fs-unit: var(--fs-unit-lg);
2886
2647
  }
2887
2648
  .vane-text[data-size="xl"] {
2888
- --fs-unit: var(--fs-scale-xl);
2649
+ --fs-unit: var(--fs-unit-xl);
2889
2650
  }
2890
2651
  .vane-link {
2891
2652
  --lh: var(--lh-base);
2892
2653
  }
2893
2654
  .vane-link[data-size="xs"] {
2894
- --fs-unit: var(--fs-scale-xs);
2655
+ --fs-unit: var(--fs-unit-xs);
2895
2656
  }
2896
2657
  .vane-link[data-size="sm"] {
2897
- --fs-unit: var(--fs-scale-sm);
2658
+ --fs-unit: var(--fs-unit-sm);
2898
2659
  }
2899
2660
  .vane-link[data-size="md"] {
2900
- --fs-unit: var(--fs-scale-md);
2661
+ --fs-unit: var(--fs-unit-md);
2901
2662
  }
2902
2663
  .vane-link[data-size="lg"] {
2903
- --fs-unit: var(--fs-scale-lg);
2664
+ --fs-unit: var(--fs-unit-lg);
2904
2665
  }
2905
2666
  .vane-link[data-size="xl"] {
2906
- --fs-unit: var(--fs-scale-xl);
2667
+ --fs-unit: var(--fs-unit-xl);
2907
2668
  }
2908
2669
  .vane-list-item {
2909
2670
  --lh: var(--lh-base);
2910
2671
  }
2911
2672
  .vane-list-item[data-size="xs"] {
2912
- --fs-unit: var(--fs-scale-xs);
2673
+ --fs-unit: var(--fs-unit-xs);
2913
2674
  }
2914
2675
  .vane-list-item[data-size="sm"] {
2915
- --fs-unit: var(--fs-scale-sm);
2676
+ --fs-unit: var(--fs-unit-sm);
2916
2677
  }
2917
2678
  .vane-list-item[data-size="md"] {
2918
- --fs-unit: var(--fs-scale-md);
2679
+ --fs-unit: var(--fs-unit-md);
2919
2680
  }
2920
2681
  .vane-list-item[data-size="lg"] {
2921
- --fs-unit: var(--fs-scale-lg);
2682
+ --fs-unit: var(--fs-unit-lg);
2922
2683
  }
2923
2684
  .vane-list-item[data-size="xl"] {
2924
- --fs-unit: var(--fs-scale-xl);
2685
+ --fs-unit: var(--fs-unit-xl);
2925
2686
  }
2926
2687
  .vane-section {
2927
2688
  --lh: var(--lh-base);
@@ -3280,16 +3041,6 @@
3280
3041
  --accent-color: var(--color-bg-filled-brand);
3281
3042
  --checked-bg-color: var(--color-bg-filled-brand);
3282
3043
  }
3283
- [data-transparent="true"] {
3284
- --bg-color: transparent;
3285
- --bg-hover-color: transparent;
3286
- --bg-active-color: transparent;
3287
- --accent-color: transparent;
3288
- --checked-bg-color: transparent;
3289
- }
3290
- .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"] {
3291
- --text-color: transparent;
3292
- }
3293
3044
  }
3294
3045
  }
3295
3046
  @property --tw-rotate-x {