@vaneui/md 0.9.0-alpha.20260105111433.5364a62 → 0.9.0-alpha.20260106191130.bc0ea5f

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 +89 -139
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +89 -139
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/index.css +332 -539
  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,100 @@
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));
214
- --py: calc(var(--py-unit) * var(--spacing));
169
+ /* Default: breakpoint-specific unit vars inherit from base unit vars.
170
+ Responsive components override these with specific numeric values. */
171
+ --py-unit-desktop: var(--py-unit);
172
+ --py-unit-tablet: var(--py-unit);
173
+ --py-unit-mobile: var(--py-unit);
174
+ --gap-unit-desktop: var(--gap-unit);
175
+ --gap-unit-tablet: var(--gap-unit);
176
+ --gap-unit-mobile: var(--gap-unit);
177
+ --fs-unit-desktop: var(--fs-unit);
178
+ --fs-unit-tablet: var(--fs-unit);
179
+ --fs-unit-mobile: var(--fs-unit);
180
+
181
+ /* Breakpoint-specific computed variables */
182
+ --py-desktop: calc(var(--py-unit-desktop) * var(--spacing));
183
+ --py-tablet: calc(var(--py-unit-tablet) * var(--spacing));
184
+ --py-mobile: calc(var(--py-unit-mobile) * var(--spacing));
185
+
186
+ --px-desktop: calc(var(--aspect-ratio) * var(--py-unit-desktop) * var(--spacing));
187
+ --px-tablet: calc(var(--aspect-ratio) * var(--py-unit-tablet) * var(--spacing));
188
+ --px-mobile: calc(var(--aspect-ratio) * var(--py-unit-mobile) * var(--spacing));
189
+
190
+ --gap-desktop: calc(var(--gap-unit-desktop) * var(--spacing));
191
+ --gap-tablet: calc(var(--gap-unit-tablet) * var(--spacing));
192
+ --gap-mobile: calc(var(--gap-unit-mobile) * var(--spacing));
193
+
194
+ --fs-desktop: calc(var(--fs-unit-desktop) * var(--fs-base));
195
+ --fs-tablet: calc(var(--fs-unit-tablet) * var(--fs-base));
196
+ --fs-mobile: calc(var(--fs-unit-mobile) * var(--fs-base));
197
+
198
+ /* Non-breakpoint computed variables */
199
+ --pl: calc(var(--py-unit) * var(--spacing));
215
200
  --size: calc(var(--size-unit) * var(--spacing));
216
201
  --br: calc(var(--br-unit) * var(--br-base));
217
- --fs: calc(var(--fs-unit) * var(--fs-base));
218
- --pl: calc(var(--py-unit) * var(--spacing));
219
202
  }
220
203
  }
221
204
  @layer components {
205
+ /* ========================================
206
+ TYPE-BASED DEFAULTS
207
+ Sets --br-unit, --gap-unit, --shadow, --shadow-hover
208
+ based on data-vane-type and data-size attributes.
209
+ Components inherit these unless they override.
210
+ ======================================== */
211
+
212
+ /* UI type defaults (compact spacing, with hover shadows using Tailwind shadow vars) */
213
+ [data-vane-type="ui"][data-size="xs"] { --br-unit: 1; --gap-unit: 1; --shadow-base: var(--shadow-2xs); --shadow-hover: var(--shadow-xs); }
214
+ [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); }
215
+ [data-vane-type="ui"][data-size="md"] { --br-unit: 2; --gap-unit: 2; --shadow-base: var(--shadow-sm); --shadow-hover: var(--shadow); }
216
+ [data-vane-type="ui"][data-size="lg"] { --br-unit: 2.5; --gap-unit: 2.5; --shadow-base: var(--shadow); --shadow-hover: var(--shadow-md); }
217
+ [data-vane-type="ui"][data-size="xl"] { --br-unit: 3; --gap-unit: 3; --shadow-base: var(--shadow-md); --shadow-hover: var(--shadow-lg); }
218
+
219
+ /* Layout type defaults (generous spacing, static shadows using Tailwind shadow vars) */
220
+ [data-vane-type="layout"][data-size="xs"] { --br-unit: 3; --gap-unit: 2; --shadow-base: var(--shadow-xs); }
221
+ [data-vane-type="layout"][data-size="sm"] { --br-unit: 4; --gap-unit: 3; --shadow-base: var(--shadow-sm); }
222
+ [data-vane-type="layout"][data-size="md"] { --br-unit: 5; --gap-unit: 4; --shadow-base: var(--shadow); }
223
+ [data-vane-type="layout"][data-size="lg"] { --br-unit: 6; --gap-unit: 5; --shadow-base: var(--shadow-md); }
224
+ [data-vane-type="layout"][data-size="xl"] { --br-unit: 7; --gap-unit: 6; --shadow-base: var(--shadow-lg); }
225
+
222
226
  /* NON-RESPONSIVE COMPONENTS */
223
227
 
224
228
  /* 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); }
229
+ .vane-button { --lh: 1.3; --py-unit: 2; --aspect-ratio: 2; }
230
+ .vane-button[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 1; }
231
+ .vane-button[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 1.5; }
232
+ .vane-button[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 2; }
233
+ .vane-button[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 2.5; }
234
+ .vane-button[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 3; }
231
235
 
232
236
  /* 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); }
237
+ .vane-badge { --lh: var(--lh-base); --py-unit: 2; --aspect-ratio: 2; }
238
+ .vane-badge[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 1; }
239
+ .vane-badge[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 1.5; }
240
+ .vane-badge[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 2; }
241
+ .vane-badge[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 2.5; }
242
+ .vane-badge[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 3; }
239
243
 
240
244
  /* 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); }
245
+ .vane-chip { --lh: 1.2; --py-unit: 1.5; --aspect-ratio: 2; }
246
+ .vane-chip[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 0.5; }
247
+ .vane-chip[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 1; }
248
+ .vane-chip[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 1.5; }
249
+ .vane-chip[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 2; }
250
+ .vane-chip[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 2.5; }
247
251
 
248
252
  /* Code */
249
253
  .vane-code { --lh: 1; --br-unit: 1.5; --py-unit: 0.8; --aspect-ratio: 1.8; }
@@ -254,12 +258,12 @@
254
258
  .vane-code[data-size="xl"] { --fs-unit: 9; --py-unit: 1.2; --br-unit: 2.5; }
255
259
 
256
260
  /* 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); }
261
+ .vane-input { --lh: var(--lh-base); --py-unit: 2; --aspect-ratio: 2; }
262
+ .vane-input[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 1; }
263
+ .vane-input[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 1.5; }
264
+ .vane-input[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 2; }
265
+ .vane-input[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 2.5; }
266
+ .vane-input[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 3; }
263
267
 
264
268
  /* Checkbox */
265
269
  .vane-checkbox { --br-unit: 1; }
@@ -270,108 +274,78 @@
270
274
  .vane-checkbox[data-size="xl"] { --size-unit: 5; --br-unit: 1.5; }
271
275
 
272
276
  /* 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); }
277
+ .vane-label {
278
+ --lh: var(--lh-base);
279
+ }
280
+ .vane-label[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
281
+ .vane-label[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
282
+ .vane-label[data-size="md"] { --fs-unit: var(--fs-unit-md); }
283
+ .vane-label[data-size="lg"] { --fs-unit: var(--fs-unit-lg); }
284
+ .vane-label[data-size="xl"] { --fs-unit: var(--fs-unit-xl); }
279
285
 
280
286
  /* 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); }
287
+ .vane-card { --py-unit: 6; --aspect-ratio: 1; }
288
+ .vane-card[data-size="xs"] { --py-unit: 2; }
289
+ .vane-card[data-size="sm"] { --py-unit: 4; }
290
+ .vane-card[data-size="md"] { --py-unit: 6; }
291
+ .vane-card[data-size="lg"] { --py-unit: 8; }
292
+ .vane-card[data-size="xl"] { --py-unit: 10; }
287
293
 
288
294
  /* 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); }
295
+ .vane-stack { --py-unit: 4; --aspect-ratio: 1; }
296
+ .vane-stack[data-size="xs"] { --py-unit: 2; }
297
+ .vane-stack[data-size="sm"] { --py-unit: 3; }
298
+ .vane-stack[data-size="md"] { --py-unit: 4; }
299
+ .vane-stack[data-size="lg"] { --py-unit: 5; }
300
+ .vane-stack[data-size="xl"] { --py-unit: 6; }
311
301
 
312
302
  /* 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); }
303
+ .vane-container { --py-unit: 8; --aspect-ratio: 2; }
304
+ .vane-container[data-size="xs"] { --py-unit: 4; }
305
+ .vane-container[data-size="sm"] { --py-unit: 6; }
306
+ .vane-container[data-size="md"] { --py-unit: 8; }
307
+ .vane-container[data-size="lg"] { --py-unit: 10; }
308
+ .vane-container[data-size="xl"] { --py-unit: 12; }
327
309
 
328
310
  /* Divider */
329
311
  .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); }
312
+ .vane-divider[data-size="xs"] { --py-unit: 2; }
313
+ .vane-divider[data-size="sm"] { --py-unit: 3; }
314
+ .vane-divider[data-size="md"] { --py-unit: 4; }
315
+ .vane-divider[data-size="lg"] { --py-unit: 5; }
316
+ .vane-divider[data-size="xl"] { --py-unit: 6; }
343
317
 
344
318
  /* List */
345
319
  .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; }
320
+ .vane-list[data-size="xs"] { --fs-unit: var(--fs-unit-xs); --py-unit: 1; }
321
+ .vane-list[data-size="sm"] { --fs-unit: var(--fs-unit-sm); --py-unit: 2; }
322
+ .vane-list[data-size="md"] { --fs-unit: var(--fs-unit-md); --py-unit: 3; }
323
+ .vane-list[data-size="lg"] { --fs-unit: var(--fs-unit-lg); --py-unit: 4; }
324
+ .vane-list[data-size="xl"] { --fs-unit: var(--fs-unit-xl); --py-unit: 5; }
351
325
 
352
326
  /* Text */
353
327
  .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); }
328
+ .vane-text[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
329
+ .vane-text[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
330
+ .vane-text[data-size="md"] { --fs-unit: var(--fs-unit-md); }
331
+ .vane-text[data-size="lg"] { --fs-unit: var(--fs-unit-lg); }
332
+ .vane-text[data-size="xl"] { --fs-unit: var(--fs-unit-xl); }
359
333
 
360
334
  /* Link */
361
335
  .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); }
336
+ .vane-link[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
337
+ .vane-link[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
338
+ .vane-link[data-size="md"] { --fs-unit: var(--fs-unit-md); }
339
+ .vane-link[data-size="lg"] { --fs-unit: var(--fs-unit-lg); }
340
+ .vane-link[data-size="xl"] { --fs-unit: var(--fs-unit-xl); }
367
341
 
368
342
  /* ListItem */
369
343
  .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); }
344
+ .vane-list-item[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
345
+ .vane-list-item[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
346
+ .vane-list-item[data-size="md"] { --fs-unit: var(--fs-unit-md); }
347
+ .vane-list-item[data-size="lg"] { --fs-unit: var(--fs-unit-lg); }
348
+ .vane-list-item[data-size="xl"] { --fs-unit: var(--fs-unit-xl); }
375
349
 
376
350
  /* RESPONSIVE COMPONENTS */
377
351
 
@@ -657,29 +631,6 @@
657
631
  --checked-bg-color: var(--color-bg-filled-brand);
658
632
  }
659
633
 
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
634
  }
684
635
  /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
685
636
  @layer theme {
@@ -816,6 +767,11 @@
816
767
  --leading-loose: 2;
817
768
  --radius-lg: 0.5rem;
818
769
  --radius-2xl: 1rem;
770
+ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
771
+ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
772
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
773
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
774
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
819
775
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
820
776
  --animate-bounce: bounce 1s infinite;
821
777
  --default-transition-duration: 150ms;
@@ -928,36 +884,11 @@
928
884
  --size-unit: 1;
929
885
  --bw: 1px;
930
886
  --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;
887
+ --fs-unit-xs: 6;
888
+ --fs-unit-sm: 7;
889
+ --fs-unit-md: 8;
890
+ --fs-unit-lg: 9;
891
+ --fs-unit-xl: 10;
961
892
  --lh-base: 1.6;
962
893
  }
963
894
  }
@@ -1376,6 +1307,9 @@
1376
1307
  .gap-\(--gap\) {
1377
1308
  gap: var(--gap);
1378
1309
  }
1310
+ .gap-\(--gap-desktop\) {
1311
+ gap: var(--gap-desktop);
1312
+ }
1379
1313
  .gap-0 {
1380
1314
  gap: calc(var(--spacing) * 0);
1381
1315
  }
@@ -1567,9 +1501,6 @@
1567
1501
  .border-sky-400 {
1568
1502
  border-color: var(--color-sky-400);
1569
1503
  }
1570
- .border-transparent {
1571
- border-color: transparent;
1572
- }
1573
1504
  .border-violet-400 {
1574
1505
  border-color: var(--color-violet-400);
1575
1506
  }
@@ -1656,6 +1587,9 @@
1656
1587
  .px-\(--px\) {
1657
1588
  padding-inline: var(--px);
1658
1589
  }
1590
+ .px-\(--px-desktop\) {
1591
+ padding-inline: var(--px-desktop);
1592
+ }
1659
1593
  .px-1 {
1660
1594
  padding-inline: calc(var(--spacing) * 1);
1661
1595
  }
@@ -1671,6 +1605,9 @@
1671
1605
  .py-\(--py\) {
1672
1606
  padding-block: var(--py);
1673
1607
  }
1608
+ .py-\(--py-desktop\) {
1609
+ padding-block: var(--py-desktop);
1610
+ }
1674
1611
  .py-2 {
1675
1612
  padding-block: calc(var(--spacing) * 2);
1676
1613
  }
@@ -1739,6 +1676,9 @@
1739
1676
  .text-\(length\:--fs\) {
1740
1677
  font-size: var(--fs);
1741
1678
  }
1679
+ .text-\(length\:--fs-desktop\) {
1680
+ font-size: var(--fs-desktop);
1681
+ }
1742
1682
  .text-\[10px\] {
1743
1683
  font-size: 10px;
1744
1684
  }
@@ -1858,9 +1798,6 @@
1858
1798
  .text-slate-800 {
1859
1799
  color: var(--color-slate-800);
1860
1800
  }
1861
- .text-transparent {
1862
- color: transparent;
1863
- }
1864
1801
  .text-violet-600 {
1865
1802
  color: var(--color-violet-600);
1866
1803
  }
@@ -1913,12 +1850,12 @@
1913
1850
  --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
1851
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1915
1852
  }
1916
- .shadow-2xl {
1917
- --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1853
+ .shadow-\(--shadow-base\) {
1854
+ --tw-shadow: var(--shadow-base);
1918
1855
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1919
1856
  }
1920
- .shadow-2xs {
1921
- --tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / 0.05));
1857
+ .shadow-2xl {
1858
+ --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
1922
1859
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1923
1860
  }
1924
1861
  .shadow-lg {
@@ -1929,14 +1866,6 @@
1929
1866
  --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
1867
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1931
1868
  }
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
1869
  .ring {
1941
1870
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1942
1871
  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 +1878,6 @@
1949
1878
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--rw) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1950
1879
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1951
1880
  }
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
1881
  .shadow-red-500 {
1959
1882
  --tw-shadow-color: oklch(63.7% 0.237 25.331);
1960
1883
  @supports (color: color-mix(in lab, red, red)) {
@@ -2035,15 +1958,9 @@
2035
1958
  .\[--fs-unit\:15\] {
2036
1959
  --fs-unit: 15;
2037
1960
  }
2038
- .\[--fs-unit\:var\(--fs-unit-desktop\)\] {
2039
- --fs-unit: var(--fs-unit-desktop);
2040
- }
2041
1961
  .\[--gap-unit\:2\] {
2042
1962
  --gap-unit: 2;
2043
1963
  }
2044
- .\[--gap-unit\:var\(--gap-unit-desktop\)\] {
2045
- --gap-unit: var(--gap-unit-desktop);
2046
- }
2047
1964
  .\[--lh\:1\.3\] {
2048
1965
  --lh: 1.3;
2049
1966
  }
@@ -2065,9 +1982,6 @@
2065
1982
  .\[--py-unit\:3\] {
2066
1983
  --py-unit: 3;
2067
1984
  }
2068
- .\[--py-unit\:var\(--py-unit-desktop\)\] {
2069
- --py-unit: var(--py-unit-desktop);
2070
- }
2071
1985
  .\[--size-unit\:4\] {
2072
1986
  --size-unit: 4;
2073
1987
  }
@@ -2179,26 +2093,10 @@
2179
2093
  }
2180
2094
  }
2181
2095
  }
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 {
2096
+ .hover\:shadow-\(--shadow-hover\) {
2199
2097
  &:hover {
2200
2098
  @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));
2099
+ --tw-shadow: var(--shadow-hover);
2202
2100
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2203
2101
  }
2204
2102
  }
@@ -2211,14 +2109,6 @@
2211
2109
  }
2212
2110
  }
2213
2111
  }
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
2112
  .hover\:ring {
2223
2113
  &:hover {
2224
2114
  @media (hover: hover) {
@@ -2330,24 +2220,29 @@
2330
2220
  flex-direction: column;
2331
2221
  }
2332
2222
  }
2333
- .max-tablet\:\[--fs-unit\:9\] {
2223
+ .max-tablet\:gap-\(--gap-tablet\) {
2334
2224
  @media (width < 64rem) {
2335
- --fs-unit: 9;
2225
+ gap: var(--gap-tablet);
2336
2226
  }
2337
2227
  }
2338
- .max-tablet\:\[--fs-unit\:var\(--fs-unit-tablet\)\] {
2228
+ .max-tablet\:px-\(--px-tablet\) {
2339
2229
  @media (width < 64rem) {
2340
- --fs-unit: var(--fs-unit-tablet);
2230
+ padding-inline: var(--px-tablet);
2341
2231
  }
2342
2232
  }
2343
- .max-tablet\:\[--gap-unit\:var\(--gap-unit-tablet\)\] {
2233
+ .max-tablet\:py-\(--py-tablet\) {
2344
2234
  @media (width < 64rem) {
2345
- --gap-unit: var(--gap-unit-tablet);
2235
+ padding-block: var(--py-tablet);
2346
2236
  }
2347
2237
  }
2348
- .max-tablet\:\[--py-unit\:var\(--py-unit-tablet\)\] {
2238
+ .max-tablet\:text-\(length\:--fs-tablet\) {
2349
2239
  @media (width < 64rem) {
2350
- --py-unit: var(--py-unit-tablet);
2240
+ font-size: var(--fs-tablet);
2241
+ }
2242
+ }
2243
+ .max-tablet\:\[--fs-unit\:12\] {
2244
+ @media (width < 64rem) {
2245
+ --fs-unit: 12;
2351
2246
  }
2352
2247
  }
2353
2248
  .max-mobile\:hidden {
@@ -2360,19 +2255,29 @@
2360
2255
  flex-direction: column;
2361
2256
  }
2362
2257
  }
2363
- .max-mobile\:\[--fs-unit\:var\(--fs-unit-mobile\)\] {
2258
+ .max-mobile\:gap-\(--gap-mobile\) {
2259
+ @media (width < 48rem) {
2260
+ gap: var(--gap-mobile);
2261
+ }
2262
+ }
2263
+ .max-mobile\:px-\(--px-mobile\) {
2364
2264
  @media (width < 48rem) {
2365
- --fs-unit: var(--fs-unit-mobile);
2265
+ padding-inline: var(--px-mobile);
2366
2266
  }
2367
2267
  }
2368
- .max-mobile\:\[--gap-unit\:var\(--gap-unit-mobile\)\] {
2268
+ .max-mobile\:py-\(--py-mobile\) {
2369
2269
  @media (width < 48rem) {
2370
- --gap-unit: var(--gap-unit-mobile);
2270
+ padding-block: var(--py-mobile);
2371
2271
  }
2372
2272
  }
2373
- .max-mobile\:\[--py-unit\:var\(--py-unit-mobile\)\] {
2273
+ .max-mobile\:text-\(length\:--fs-mobile\) {
2374
2274
  @media (width < 48rem) {
2375
- --py-unit: var(--py-unit-mobile);
2275
+ font-size: var(--fs-mobile);
2276
+ }
2277
+ }
2278
+ .max-mobile\:\[--fs-unit\:9\] {
2279
+ @media (width < 48rem) {
2280
+ --fs-unit: 9;
2376
2281
  }
2377
2282
  }
2378
2283
  .sm\:grid-cols-2 {
@@ -2414,126 +2319,162 @@
2414
2319
  @layer theme {
2415
2320
  @layer base {
2416
2321
  [data-size] {
2417
- --gap: calc(var(--gap-unit) * var(--spacing));
2418
- --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
2419
- --py: calc(var(--py-unit) * var(--spacing));
2322
+ --py-unit-desktop: var(--py-unit);
2323
+ --py-unit-tablet: var(--py-unit);
2324
+ --py-unit-mobile: var(--py-unit);
2325
+ --gap-unit-desktop: var(--gap-unit);
2326
+ --gap-unit-tablet: var(--gap-unit);
2327
+ --gap-unit-mobile: var(--gap-unit);
2328
+ --fs-unit-desktop: var(--fs-unit);
2329
+ --fs-unit-tablet: var(--fs-unit);
2330
+ --fs-unit-mobile: var(--fs-unit);
2331
+ --py-desktop: calc(var(--py-unit-desktop) * var(--spacing));
2332
+ --py-tablet: calc(var(--py-unit-tablet) * var(--spacing));
2333
+ --py-mobile: calc(var(--py-unit-mobile) * var(--spacing));
2334
+ --px-desktop: calc(var(--aspect-ratio) * var(--py-unit-desktop) * var(--spacing));
2335
+ --px-tablet: calc(var(--aspect-ratio) * var(--py-unit-tablet) * var(--spacing));
2336
+ --px-mobile: calc(var(--aspect-ratio) * var(--py-unit-mobile) * var(--spacing));
2337
+ --gap-desktop: calc(var(--gap-unit-desktop) * var(--spacing));
2338
+ --gap-tablet: calc(var(--gap-unit-tablet) * var(--spacing));
2339
+ --gap-mobile: calc(var(--gap-unit-mobile) * var(--spacing));
2340
+ --fs-desktop: calc(var(--fs-unit-desktop) * var(--fs-base));
2341
+ --fs-tablet: calc(var(--fs-unit-tablet) * var(--fs-base));
2342
+ --fs-mobile: calc(var(--fs-unit-mobile) * var(--fs-base));
2343
+ --pl: calc(var(--py-unit) * var(--spacing));
2420
2344
  --size: calc(var(--size-unit) * var(--spacing));
2421
2345
  --br: calc(var(--br-unit) * var(--br-base));
2422
- --fs: calc(var(--fs-unit) * var(--fs-base));
2423
- --pl: calc(var(--py-unit) * var(--spacing));
2424
2346
  }
2425
2347
  }
2426
2348
  @layer components {
2349
+ [data-vane-type="ui"][data-size="xs"] {
2350
+ --br-unit: 1;
2351
+ --gap-unit: 1;
2352
+ --shadow-base: var(--shadow-2xs);
2353
+ --shadow-hover: var(--shadow-xs);
2354
+ }
2355
+ [data-vane-type="ui"][data-size="sm"] {
2356
+ --br-unit: 1.5;
2357
+ --gap-unit: 1.5;
2358
+ --shadow-base: var(--shadow-xs);
2359
+ --shadow-hover: var(--shadow-sm);
2360
+ }
2361
+ [data-vane-type="ui"][data-size="md"] {
2362
+ --br-unit: 2;
2363
+ --gap-unit: 2;
2364
+ --shadow-base: var(--shadow-sm);
2365
+ --shadow-hover: var(--shadow);
2366
+ }
2367
+ [data-vane-type="ui"][data-size="lg"] {
2368
+ --br-unit: 2.5;
2369
+ --gap-unit: 2.5;
2370
+ --shadow-base: var(--shadow);
2371
+ --shadow-hover: var(--shadow-md);
2372
+ }
2373
+ [data-vane-type="ui"][data-size="xl"] {
2374
+ --br-unit: 3;
2375
+ --gap-unit: 3;
2376
+ --shadow-base: var(--shadow-md);
2377
+ --shadow-hover: var(--shadow-lg);
2378
+ }
2379
+ [data-vane-type="layout"][data-size="xs"] {
2380
+ --br-unit: 3;
2381
+ --gap-unit: 2;
2382
+ --shadow-base: var(--shadow-xs);
2383
+ }
2384
+ [data-vane-type="layout"][data-size="sm"] {
2385
+ --br-unit: 4;
2386
+ --gap-unit: 3;
2387
+ --shadow-base: var(--shadow-sm);
2388
+ }
2389
+ [data-vane-type="layout"][data-size="md"] {
2390
+ --br-unit: 5;
2391
+ --gap-unit: 4;
2392
+ --shadow-base: var(--shadow);
2393
+ }
2394
+ [data-vane-type="layout"][data-size="lg"] {
2395
+ --br-unit: 6;
2396
+ --gap-unit: 5;
2397
+ --shadow-base: var(--shadow-md);
2398
+ }
2399
+ [data-vane-type="layout"][data-size="xl"] {
2400
+ --br-unit: 7;
2401
+ --gap-unit: 6;
2402
+ --shadow-base: var(--shadow-lg);
2403
+ }
2427
2404
  .vane-button {
2428
2405
  --lh: 1.3;
2429
- --br-unit: 2;
2430
2406
  --py-unit: 2;
2431
2407
  --aspect-ratio: 2;
2432
- --gap-unit: 2;
2433
2408
  }
2434
2409
  .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);
2410
+ --fs-unit: var(--fs-unit-xs);
2411
+ --py-unit: 1;
2439
2412
  }
2440
2413
  .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);
2414
+ --fs-unit: var(--fs-unit-sm);
2415
+ --py-unit: 1.5;
2445
2416
  }
2446
2417
  .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);
2418
+ --fs-unit: var(--fs-unit-md);
2419
+ --py-unit: 2;
2451
2420
  }
2452
2421
  .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);
2422
+ --fs-unit: var(--fs-unit-lg);
2423
+ --py-unit: 2.5;
2457
2424
  }
2458
2425
  .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);
2426
+ --fs-unit: var(--fs-unit-xl);
2427
+ --py-unit: 3;
2463
2428
  }
2464
2429
  .vane-badge {
2465
2430
  --lh: var(--lh-base);
2466
- --br-unit: 2;
2467
2431
  --py-unit: 2;
2468
2432
  --aspect-ratio: 2;
2469
- --gap-unit: 2;
2470
2433
  }
2471
2434
  .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);
2435
+ --fs-unit: var(--fs-unit-xs);
2436
+ --py-unit: 1;
2476
2437
  }
2477
2438
  .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);
2439
+ --fs-unit: var(--fs-unit-sm);
2440
+ --py-unit: 1.5;
2482
2441
  }
2483
2442
  .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);
2443
+ --fs-unit: var(--fs-unit-md);
2444
+ --py-unit: 2;
2488
2445
  }
2489
2446
  .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);
2447
+ --fs-unit: var(--fs-unit-lg);
2448
+ --py-unit: 2.5;
2494
2449
  }
2495
2450
  .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);
2451
+ --fs-unit: var(--fs-unit-xl);
2452
+ --py-unit: 3;
2500
2453
  }
2501
2454
  .vane-chip {
2502
2455
  --lh: 1.2;
2503
- --br-unit: 2;
2504
2456
  --py-unit: 1.5;
2505
2457
  --aspect-ratio: 2;
2506
- --gap-unit: 2;
2507
2458
  }
2508
2459
  .vane-chip[data-size="xs"] {
2509
- --fs-unit: var(--fs-scale-xs);
2460
+ --fs-unit: var(--fs-unit-xs);
2510
2461
  --py-unit: 0.5;
2511
- --br-unit: var(--br-ui-scale-xs);
2512
- --gap-unit: var(--gap-ui-scale-xs);
2513
2462
  }
2514
2463
  .vane-chip[data-size="sm"] {
2515
- --fs-unit: var(--fs-scale-sm);
2464
+ --fs-unit: var(--fs-unit-sm);
2516
2465
  --py-unit: 1;
2517
- --br-unit: var(--br-ui-scale-sm);
2518
- --gap-unit: var(--gap-ui-scale-sm);
2519
2466
  }
2520
2467
  .vane-chip[data-size="md"] {
2521
- --fs-unit: var(--fs-scale-md);
2468
+ --fs-unit: var(--fs-unit-md);
2522
2469
  --py-unit: 1.5;
2523
- --br-unit: var(--br-ui-scale-md);
2524
- --gap-unit: var(--gap-ui-scale-md);
2525
2470
  }
2526
2471
  .vane-chip[data-size="lg"] {
2527
- --fs-unit: var(--fs-scale-lg);
2472
+ --fs-unit: var(--fs-unit-lg);
2528
2473
  --py-unit: 2;
2529
- --br-unit: var(--br-ui-scale-lg);
2530
- --gap-unit: var(--gap-ui-scale-lg);
2531
2474
  }
2532
2475
  .vane-chip[data-size="xl"] {
2533
- --fs-unit: var(--fs-scale-xl);
2476
+ --fs-unit: var(--fs-unit-xl);
2534
2477
  --py-unit: 2.5;
2535
- --br-unit: var(--br-ui-scale-xl);
2536
- --gap-unit: var(--gap-ui-scale-xl);
2537
2478
  }
2538
2479
  .vane-code {
2539
2480
  --lh: 1;
@@ -2568,34 +2509,28 @@
2568
2509
  }
2569
2510
  .vane-input {
2570
2511
  --lh: var(--lh-base);
2571
- --br-unit: 2;
2572
2512
  --py-unit: 2;
2573
2513
  --aspect-ratio: 2;
2574
2514
  }
2575
2515
  .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);
2516
+ --fs-unit: var(--fs-unit-xs);
2517
+ --py-unit: 1;
2579
2518
  }
2580
2519
  .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);
2520
+ --fs-unit: var(--fs-unit-sm);
2521
+ --py-unit: 1.5;
2584
2522
  }
2585
2523
  .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);
2524
+ --fs-unit: var(--fs-unit-md);
2525
+ --py-unit: 2;
2589
2526
  }
2590
2527
  .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);
2528
+ --fs-unit: var(--fs-unit-lg);
2529
+ --py-unit: 2.5;
2594
2530
  }
2595
2531
  .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);
2532
+ --fs-unit: var(--fs-unit-xl);
2533
+ --py-unit: 3;
2599
2534
  }
2600
2535
  .vane-checkbox {
2601
2536
  --br-unit: 1;
@@ -2622,306 +2557,174 @@
2622
2557
  }
2623
2558
  .vane-label {
2624
2559
  --lh: var(--lh-base);
2625
- --gap-unit: 2;
2626
2560
  }
2627
2561
  .vane-label[data-size="xs"] {
2628
- --fs-unit: var(--fs-scale-xs);
2629
- --gap-unit: var(--gap-ui-scale-xs);
2562
+ --fs-unit: var(--fs-unit-xs);
2630
2563
  }
2631
2564
  .vane-label[data-size="sm"] {
2632
- --fs-unit: var(--fs-scale-sm);
2633
- --gap-unit: var(--gap-ui-scale-sm);
2565
+ --fs-unit: var(--fs-unit-sm);
2634
2566
  }
2635
2567
  .vane-label[data-size="md"] {
2636
- --fs-unit: var(--fs-scale-md);
2637
- --gap-unit: var(--gap-ui-scale-md);
2568
+ --fs-unit: var(--fs-unit-md);
2638
2569
  }
2639
2570
  .vane-label[data-size="lg"] {
2640
- --fs-unit: var(--fs-scale-lg);
2641
- --gap-unit: var(--gap-ui-scale-lg);
2571
+ --fs-unit: var(--fs-unit-lg);
2642
2572
  }
2643
2573
  .vane-label[data-size="xl"] {
2644
- --fs-unit: var(--fs-scale-xl);
2645
- --gap-unit: var(--gap-ui-scale-xl);
2574
+ --fs-unit: var(--fs-unit-xl);
2646
2575
  }
2647
2576
  .vane-card {
2648
- --br-unit: 5;
2649
2577
  --py-unit: 6;
2650
2578
  --aspect-ratio: 1;
2651
- --gap-unit: 4;
2652
2579
  }
2653
2580
  .vane-card[data-size="xs"] {
2654
2581
  --py-unit: 2;
2655
- --gap-unit: var(--gap-layout-scale-xs);
2656
- --br-unit: var(--br-layout-scale-xs);
2657
2582
  }
2658
2583
  .vane-card[data-size="sm"] {
2659
2584
  --py-unit: 4;
2660
- --gap-unit: var(--gap-layout-scale-sm);
2661
- --br-unit: var(--br-layout-scale-sm);
2662
2585
  }
2663
2586
  .vane-card[data-size="md"] {
2664
2587
  --py-unit: 6;
2665
- --gap-unit: var(--gap-layout-scale-md);
2666
- --br-unit: var(--br-layout-scale-md);
2667
2588
  }
2668
2589
  .vane-card[data-size="lg"] {
2669
2590
  --py-unit: 8;
2670
- --gap-unit: var(--gap-layout-scale-lg);
2671
- --br-unit: var(--br-layout-scale-lg);
2672
2591
  }
2673
2592
  .vane-card[data-size="xl"] {
2674
2593
  --py-unit: 10;
2675
- --gap-unit: var(--gap-layout-scale-xl);
2676
- --br-unit: var(--br-layout-scale-xl);
2677
2594
  }
2678
2595
  .vane-stack {
2679
- --gap-unit: 4;
2680
2596
  --py-unit: 4;
2681
2597
  --aspect-ratio: 1;
2682
- --br-unit: 5;
2683
2598
  }
2684
2599
  .vane-stack[data-size="xs"] {
2685
- --gap-unit: var(--gap-layout-scale-xs);
2686
2600
  --py-unit: 2;
2687
- --br-unit: var(--br-layout-scale-xs);
2688
2601
  }
2689
2602
  .vane-stack[data-size="sm"] {
2690
- --gap-unit: var(--gap-layout-scale-sm);
2691
2603
  --py-unit: 3;
2692
- --br-unit: var(--br-layout-scale-sm);
2693
2604
  }
2694
2605
  .vane-stack[data-size="md"] {
2695
- --gap-unit: var(--gap-layout-scale-md);
2696
2606
  --py-unit: 4;
2697
- --br-unit: var(--br-layout-scale-md);
2698
2607
  }
2699
2608
  .vane-stack[data-size="lg"] {
2700
- --gap-unit: var(--gap-layout-scale-lg);
2701
2609
  --py-unit: 5;
2702
- --br-unit: var(--br-layout-scale-lg);
2703
2610
  }
2704
2611
  .vane-stack[data-size="xl"] {
2705
- --gap-unit: var(--gap-layout-scale-xl);
2706
2612
  --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
2613
  }
2757
2614
  .vane-container {
2758
2615
  --py-unit: 8;
2759
2616
  --aspect-ratio: 2;
2760
- --br-unit: 5;
2761
- --gap-unit: 4;
2762
2617
  }
2763
2618
  .vane-container[data-size="xs"] {
2764
2619
  --py-unit: 4;
2765
- --br-unit: var(--br-layout-scale-xs);
2766
- --gap-unit: var(--gap-layout-scale-xs);
2767
2620
  }
2768
2621
  .vane-container[data-size="sm"] {
2769
2622
  --py-unit: 6;
2770
- --br-unit: var(--br-layout-scale-sm);
2771
- --gap-unit: var(--gap-layout-scale-sm);
2772
2623
  }
2773
2624
  .vane-container[data-size="md"] {
2774
2625
  --py-unit: 8;
2775
- --br-unit: var(--br-layout-scale-md);
2776
- --gap-unit: var(--gap-layout-scale-md);
2777
2626
  }
2778
2627
  .vane-container[data-size="lg"] {
2779
2628
  --py-unit: 10;
2780
- --br-unit: var(--br-layout-scale-lg);
2781
- --gap-unit: var(--gap-layout-scale-lg);
2782
2629
  }
2783
2630
  .vane-container[data-size="xl"] {
2784
2631
  --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
2632
  }
2812
2633
  .vane-divider {
2813
2634
  --py-unit: 4;
2814
2635
  }
2815
2636
  .vane-divider[data-size="xs"] {
2816
- --py-unit: var(--gap-layout-scale-xs);
2637
+ --py-unit: 2;
2817
2638
  }
2818
2639
  .vane-divider[data-size="sm"] {
2819
- --py-unit: var(--gap-layout-scale-sm);
2640
+ --py-unit: 3;
2820
2641
  }
2821
2642
  .vane-divider[data-size="md"] {
2822
- --py-unit: var(--gap-layout-scale-md);
2643
+ --py-unit: 4;
2823
2644
  }
2824
2645
  .vane-divider[data-size="lg"] {
2825
- --py-unit: var(--gap-layout-scale-lg);
2646
+ --py-unit: 5;
2826
2647
  }
2827
2648
  .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);
2649
+ --py-unit: 6;
2847
2650
  }
2848
2651
  .vane-list {
2849
2652
  --lh: var(--lh-base);
2850
2653
  --py-unit: 3;
2851
2654
  }
2852
2655
  .vane-list[data-size="xs"] {
2853
- --fs-unit: var(--fs-scale-xs);
2656
+ --fs-unit: var(--fs-unit-xs);
2854
2657
  --py-unit: 1;
2855
2658
  }
2856
2659
  .vane-list[data-size="sm"] {
2857
- --fs-unit: var(--fs-scale-sm);
2660
+ --fs-unit: var(--fs-unit-sm);
2858
2661
  --py-unit: 2;
2859
2662
  }
2860
2663
  .vane-list[data-size="md"] {
2861
- --fs-unit: var(--fs-scale-md);
2664
+ --fs-unit: var(--fs-unit-md);
2862
2665
  --py-unit: 3;
2863
2666
  }
2864
2667
  .vane-list[data-size="lg"] {
2865
- --fs-unit: var(--fs-scale-lg);
2668
+ --fs-unit: var(--fs-unit-lg);
2866
2669
  --py-unit: 4;
2867
2670
  }
2868
2671
  .vane-list[data-size="xl"] {
2869
- --fs-unit: var(--fs-scale-xl);
2672
+ --fs-unit: var(--fs-unit-xl);
2870
2673
  --py-unit: 5;
2871
2674
  }
2872
2675
  .vane-text {
2873
2676
  --lh: var(--lh-base);
2874
2677
  }
2875
2678
  .vane-text[data-size="xs"] {
2876
- --fs-unit: var(--fs-scale-xs);
2679
+ --fs-unit: var(--fs-unit-xs);
2877
2680
  }
2878
2681
  .vane-text[data-size="sm"] {
2879
- --fs-unit: var(--fs-scale-sm);
2682
+ --fs-unit: var(--fs-unit-sm);
2880
2683
  }
2881
2684
  .vane-text[data-size="md"] {
2882
- --fs-unit: var(--fs-scale-md);
2685
+ --fs-unit: var(--fs-unit-md);
2883
2686
  }
2884
2687
  .vane-text[data-size="lg"] {
2885
- --fs-unit: var(--fs-scale-lg);
2688
+ --fs-unit: var(--fs-unit-lg);
2886
2689
  }
2887
2690
  .vane-text[data-size="xl"] {
2888
- --fs-unit: var(--fs-scale-xl);
2691
+ --fs-unit: var(--fs-unit-xl);
2889
2692
  }
2890
2693
  .vane-link {
2891
2694
  --lh: var(--lh-base);
2892
2695
  }
2893
2696
  .vane-link[data-size="xs"] {
2894
- --fs-unit: var(--fs-scale-xs);
2697
+ --fs-unit: var(--fs-unit-xs);
2895
2698
  }
2896
2699
  .vane-link[data-size="sm"] {
2897
- --fs-unit: var(--fs-scale-sm);
2700
+ --fs-unit: var(--fs-unit-sm);
2898
2701
  }
2899
2702
  .vane-link[data-size="md"] {
2900
- --fs-unit: var(--fs-scale-md);
2703
+ --fs-unit: var(--fs-unit-md);
2901
2704
  }
2902
2705
  .vane-link[data-size="lg"] {
2903
- --fs-unit: var(--fs-scale-lg);
2706
+ --fs-unit: var(--fs-unit-lg);
2904
2707
  }
2905
2708
  .vane-link[data-size="xl"] {
2906
- --fs-unit: var(--fs-scale-xl);
2709
+ --fs-unit: var(--fs-unit-xl);
2907
2710
  }
2908
2711
  .vane-list-item {
2909
2712
  --lh: var(--lh-base);
2910
2713
  }
2911
2714
  .vane-list-item[data-size="xs"] {
2912
- --fs-unit: var(--fs-scale-xs);
2715
+ --fs-unit: var(--fs-unit-xs);
2913
2716
  }
2914
2717
  .vane-list-item[data-size="sm"] {
2915
- --fs-unit: var(--fs-scale-sm);
2718
+ --fs-unit: var(--fs-unit-sm);
2916
2719
  }
2917
2720
  .vane-list-item[data-size="md"] {
2918
- --fs-unit: var(--fs-scale-md);
2721
+ --fs-unit: var(--fs-unit-md);
2919
2722
  }
2920
2723
  .vane-list-item[data-size="lg"] {
2921
- --fs-unit: var(--fs-scale-lg);
2724
+ --fs-unit: var(--fs-unit-lg);
2922
2725
  }
2923
2726
  .vane-list-item[data-size="xl"] {
2924
- --fs-unit: var(--fs-scale-xl);
2727
+ --fs-unit: var(--fs-unit-xl);
2925
2728
  }
2926
2729
  .vane-section {
2927
2730
  --lh: var(--lh-base);
@@ -3280,16 +3083,6 @@
3280
3083
  --accent-color: var(--color-bg-filled-brand);
3281
3084
  --checked-bg-color: var(--color-bg-filled-brand);
3282
3085
  }
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
3086
  }
3294
3087
  }
3295
3088
  @property --tw-rotate-x {