@vaneui/md 0.3.1-alpha.20260104192853.8b57fd2 → 0.9.0-alpha.20260105111433.5364a62

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 +5 -5
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +5 -5
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles/index.css +352 -271
  6. package/package.json +2 -2
package/dist/styles/index.css CHANGED
@@ -156,6 +156,56 @@
156
156
  --size-unit: 1;
157
157
  --bw: 1px; /* Border width */
158
158
  --rw: 1px; /* Ring width */
159
+
160
+ /* ========================================
161
+ COMMON SIZE SCALES
162
+ Reusable scale values for consistent sizing
163
+ ======================================== */
164
+
165
+ /* 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;
206
+
207
+ /* Common line height */
208
+ --lh-base: 1.6;
159
209
  }
160
210
  @layer base {
161
211
  [data-size] {
@@ -173,27 +223,27 @@
173
223
 
174
224
  /* Button */
175
225
  .vane-button { --lh: 1.3; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
176
- .vane-button[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; --gap-unit: 1; }
177
- .vane-button[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; --gap-unit: 1.5; }
178
- .vane-button[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; --gap-unit: 2; }
179
- .vane-button[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; --gap-unit: 2.5; }
180
- .vane-button[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; --gap-unit: 3; }
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); }
181
231
 
182
232
  /* Badge */
183
- .vane-badge { --lh: 1.6; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
184
- .vane-badge[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; --gap-unit: 1; }
185
- .vane-badge[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; --gap-unit: 1.5; }
186
- .vane-badge[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; --gap-unit: 2; }
187
- .vane-badge[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; --gap-unit: 2.5; }
188
- .vane-badge[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; --gap-unit: 3; }
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); }
189
239
 
190
240
  /* Chip */
191
241
  .vane-chip { --lh: 1.2; --br-unit: 2; --py-unit: 1.5; --aspect-ratio: 2; --gap-unit: 2; }
192
- .vane-chip[data-size="xs"] { --fs-unit: 6; --py-unit: 0.5; --br-unit: 1; --gap-unit: 1; }
193
- .vane-chip[data-size="sm"] { --fs-unit: 7; --py-unit: 1; --br-unit: 1.5; --gap-unit: 1.5; }
194
- .vane-chip[data-size="md"] { --fs-unit: 8; --py-unit: 1.5; --br-unit: 2; --gap-unit: 2; }
195
- .vane-chip[data-size="lg"] { --fs-unit: 9; --py-unit: 2; --br-unit: 2.5; --gap-unit: 2.5; }
196
- .vane-chip[data-size="xl"] { --fs-unit: 10; --py-unit: 2.5; --br-unit: 3; --gap-unit: 3; }
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); }
197
247
 
198
248
  /* Code */
199
249
  .vane-code { --lh: 1; --br-unit: 1.5; --py-unit: 0.8; --aspect-ratio: 1.8; }
@@ -204,12 +254,12 @@
204
254
  .vane-code[data-size="xl"] { --fs-unit: 9; --py-unit: 1.2; --br-unit: 2.5; }
205
255
 
206
256
  /* Input */
207
- .vane-input { --lh: 1.6; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; }
208
- .vane-input[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; }
209
- .vane-input[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; }
210
- .vane-input[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; }
211
- .vane-input[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; }
212
- .vane-input[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; }
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); }
213
263
 
214
264
  /* Checkbox */
215
265
  .vane-checkbox { --br-unit: 1; }
@@ -220,114 +270,114 @@
220
270
  .vane-checkbox[data-size="xl"] { --size-unit: 5; --br-unit: 1.5; }
221
271
 
222
272
  /* Label */
223
- .vane-label { --lh: 1.6; --gap-unit: 2; }
224
- .vane-label[data-size="xs"] { --fs-unit: 6; --gap-unit: 1; }
225
- .vane-label[data-size="sm"] { --fs-unit: 7; --gap-unit: 1.5; }
226
- .vane-label[data-size="md"] { --fs-unit: 8; --gap-unit: 2; }
227
- .vane-label[data-size="lg"] { --fs-unit: 9; --gap-unit: 2.5; }
228
- .vane-label[data-size="xl"] { --fs-unit: 10; --gap-unit: 3; }
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); }
229
279
 
230
280
  /* Card */
231
281
  .vane-card { --br-unit: 5; --py-unit: 6; --aspect-ratio: 1; --gap-unit: 4; }
232
- .vane-card[data-size="xs"] { --py-unit: 2; --gap-unit: 2; --br-unit: 3; }
233
- .vane-card[data-size="sm"] { --py-unit: 4; --gap-unit: 3; --br-unit: 4; }
234
- .vane-card[data-size="md"] { --py-unit: 6; --gap-unit: 4; --br-unit: 5; }
235
- .vane-card[data-size="lg"] { --py-unit: 8; --gap-unit: 5; --br-unit: 6; }
236
- .vane-card[data-size="xl"] { --py-unit: 10; --gap-unit: 6; --br-unit: 7; }
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); }
237
287
 
238
288
  /* Stack */
239
289
  .vane-stack { --gap-unit: 4; --py-unit: 4; --aspect-ratio: 1; --br-unit: 5; }
240
- .vane-stack[data-size="xs"] { --gap-unit: 2; --py-unit: 2; --br-unit: 3; }
241
- .vane-stack[data-size="sm"] { --gap-unit: 3; --py-unit: 3; --br-unit: 4; }
242
- .vane-stack[data-size="md"] { --gap-unit: 4; --py-unit: 4; --br-unit: 5; }
243
- .vane-stack[data-size="lg"] { --gap-unit: 5; --py-unit: 5; --br-unit: 6; }
244
- .vane-stack[data-size="xl"] { --gap-unit: 6; --py-unit: 6; --br-unit: 7; }
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); }
245
295
 
246
296
  /* Row */
247
297
  .vane-row { --gap-unit: 4; --br-unit: 5; }
248
- .vane-row[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
249
- .vane-row[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
250
- .vane-row[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
251
- .vane-row[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
252
- .vane-row[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
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); }
253
303
 
254
304
  /* Col */
255
305
  .vane-col { --gap-unit: 4; --br-unit: 5; }
256
- .vane-col[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
257
- .vane-col[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
258
- .vane-col[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
259
- .vane-col[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
260
- .vane-col[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
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); }
261
311
 
262
312
  /* Container */
263
313
  .vane-container { --py-unit: 8; --aspect-ratio: 2; --br-unit: 5; --gap-unit: 4; }
264
- .vane-container[data-size="xs"] { --py-unit: 4; --br-unit: 3; --gap-unit: 2; }
265
- .vane-container[data-size="sm"] { --py-unit: 6; --br-unit: 4; --gap-unit: 3; }
266
- .vane-container[data-size="md"] { --py-unit: 8; --br-unit: 5; --gap-unit: 4; }
267
- .vane-container[data-size="lg"] { --py-unit: 10; --br-unit: 6; --gap-unit: 5; }
268
- .vane-container[data-size="xl"] { --py-unit: 12; --br-unit: 7; --gap-unit: 6; }
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); }
269
319
 
270
320
  /* Grid */
271
321
  .vane-grid { --gap-unit: 4; --br-unit: 5; }
272
- .vane-grid[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
273
- .vane-grid[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
274
- .vane-grid[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
275
- .vane-grid[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
276
- .vane-grid[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
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); }
277
327
 
278
328
  /* Divider */
279
329
  .vane-divider { --py-unit: 4; }
280
- .vane-divider[data-size="xs"] { --py-unit: 2; }
281
- .vane-divider[data-size="sm"] { --py-unit: 3; }
282
- .vane-divider[data-size="md"] { --py-unit: 4; }
283
- .vane-divider[data-size="lg"] { --py-unit: 5; }
284
- .vane-divider[data-size="xl"] { --py-unit: 6; }
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); }
285
335
 
286
336
  /* Img */
287
337
  .vane-img { --br-unit: 5; }
288
- .vane-img[data-size="xs"] { --br-unit: 3; }
289
- .vane-img[data-size="sm"] { --br-unit: 4; }
290
- .vane-img[data-size="md"] { --br-unit: 5; }
291
- .vane-img[data-size="lg"] { --br-unit: 6; }
292
- .vane-img[data-size="xl"] { --br-unit: 7; }
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); }
293
343
 
294
344
  /* List */
295
- .vane-list { --lh: 1.6; --py-unit: 3; }
296
- .vane-list[data-size="xs"] { --fs-unit: 6; --py-unit: 1; }
297
- .vane-list[data-size="sm"] { --fs-unit: 7; --py-unit: 2; }
298
- .vane-list[data-size="md"] { --fs-unit: 8; --py-unit: 3; }
299
- .vane-list[data-size="lg"] { --fs-unit: 9; --py-unit: 4; }
300
- .vane-list[data-size="xl"] { --fs-unit: 10; --py-unit: 5; }
345
+ .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; }
301
351
 
302
352
  /* Text */
303
- .vane-text { --lh: 1.6; }
304
- .vane-text[data-size="xs"] { --fs-unit: 6; }
305
- .vane-text[data-size="sm"] { --fs-unit: 7; }
306
- .vane-text[data-size="md"] { --fs-unit: 8; }
307
- .vane-text[data-size="lg"] { --fs-unit: 9; }
308
- .vane-text[data-size="xl"] { --fs-unit: 10; }
353
+ .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); }
309
359
 
310
360
  /* Link */
311
- .vane-link { --lh: 1.6; }
312
- .vane-link[data-size="xs"] { --fs-unit: 6; }
313
- .vane-link[data-size="sm"] { --fs-unit: 7; }
314
- .vane-link[data-size="md"] { --fs-unit: 8; }
315
- .vane-link[data-size="lg"] { --fs-unit: 9; }
316
- .vane-link[data-size="xl"] { --fs-unit: 10; }
361
+ .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); }
317
367
 
318
368
  /* ListItem */
319
- .vane-list-item { --lh: 1.6; }
320
- .vane-list-item[data-size="xs"] { --fs-unit: 6; }
321
- .vane-list-item[data-size="sm"] { --fs-unit: 7; }
322
- .vane-list-item[data-size="md"] { --fs-unit: 8; }
323
- .vane-list-item[data-size="lg"] { --fs-unit: 9; }
324
- .vane-list-item[data-size="xl"] { --fs-unit: 10; }
369
+ .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); }
325
375
 
326
376
  /* RESPONSIVE COMPONENTS */
327
377
 
328
378
  /* Section */
329
379
  .vane-section {
330
- --lh: 1.6;
380
+ --lh: var(--lh-base);
331
381
  --py-unit-desktop: 8;
332
382
  --py-unit-tablet: 6;
333
383
  --py-unit-mobile: 4;
@@ -878,6 +928,37 @@
878
928
  --size-unit: 1;
879
929
  --bw: 1px;
880
930
  --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;
961
+ --lh-base: 1.6;
881
962
  }
882
963
  }
883
964
  @layer base {
@@ -2351,71 +2432,71 @@
2351
2432
  --gap-unit: 2;
2352
2433
  }
2353
2434
  .vane-button[data-size="xs"] {
2354
- --fs-unit: 6;
2355
- --py-unit: 1;
2356
- --br-unit: 1;
2357
- --gap-unit: 1;
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);
2358
2439
  }
2359
2440
  .vane-button[data-size="sm"] {
2360
- --fs-unit: 7;
2361
- --py-unit: 1.5;
2362
- --br-unit: 1.5;
2363
- --gap-unit: 1.5;
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);
2364
2445
  }
2365
2446
  .vane-button[data-size="md"] {
2366
- --fs-unit: 8;
2367
- --py-unit: 2;
2368
- --br-unit: 2;
2369
- --gap-unit: 2;
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);
2370
2451
  }
2371
2452
  .vane-button[data-size="lg"] {
2372
- --fs-unit: 9;
2373
- --py-unit: 2.5;
2374
- --br-unit: 2.5;
2375
- --gap-unit: 2.5;
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);
2376
2457
  }
2377
2458
  .vane-button[data-size="xl"] {
2378
- --fs-unit: 10;
2379
- --py-unit: 3;
2380
- --br-unit: 3;
2381
- --gap-unit: 3;
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);
2382
2463
  }
2383
2464
  .vane-badge {
2384
- --lh: 1.6;
2465
+ --lh: var(--lh-base);
2385
2466
  --br-unit: 2;
2386
2467
  --py-unit: 2;
2387
2468
  --aspect-ratio: 2;
2388
2469
  --gap-unit: 2;
2389
2470
  }
2390
2471
  .vane-badge[data-size="xs"] {
2391
- --fs-unit: 6;
2392
- --py-unit: 1;
2393
- --br-unit: 1;
2394
- --gap-unit: 1;
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);
2395
2476
  }
2396
2477
  .vane-badge[data-size="sm"] {
2397
- --fs-unit: 7;
2398
- --py-unit: 1.5;
2399
- --br-unit: 1.5;
2400
- --gap-unit: 1.5;
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);
2401
2482
  }
2402
2483
  .vane-badge[data-size="md"] {
2403
- --fs-unit: 8;
2404
- --py-unit: 2;
2405
- --br-unit: 2;
2406
- --gap-unit: 2;
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);
2407
2488
  }
2408
2489
  .vane-badge[data-size="lg"] {
2409
- --fs-unit: 9;
2410
- --py-unit: 2.5;
2411
- --br-unit: 2.5;
2412
- --gap-unit: 2.5;
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);
2413
2494
  }
2414
2495
  .vane-badge[data-size="xl"] {
2415
- --fs-unit: 10;
2416
- --py-unit: 3;
2417
- --br-unit: 3;
2418
- --gap-unit: 3;
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);
2419
2500
  }
2420
2501
  .vane-chip {
2421
2502
  --lh: 1.2;
@@ -2425,34 +2506,34 @@
2425
2506
  --gap-unit: 2;
2426
2507
  }
2427
2508
  .vane-chip[data-size="xs"] {
2428
- --fs-unit: 6;
2509
+ --fs-unit: var(--fs-scale-xs);
2429
2510
  --py-unit: 0.5;
2430
- --br-unit: 1;
2431
- --gap-unit: 1;
2511
+ --br-unit: var(--br-ui-scale-xs);
2512
+ --gap-unit: var(--gap-ui-scale-xs);
2432
2513
  }
2433
2514
  .vane-chip[data-size="sm"] {
2434
- --fs-unit: 7;
2515
+ --fs-unit: var(--fs-scale-sm);
2435
2516
  --py-unit: 1;
2436
- --br-unit: 1.5;
2437
- --gap-unit: 1.5;
2517
+ --br-unit: var(--br-ui-scale-sm);
2518
+ --gap-unit: var(--gap-ui-scale-sm);
2438
2519
  }
2439
2520
  .vane-chip[data-size="md"] {
2440
- --fs-unit: 8;
2521
+ --fs-unit: var(--fs-scale-md);
2441
2522
  --py-unit: 1.5;
2442
- --br-unit: 2;
2443
- --gap-unit: 2;
2523
+ --br-unit: var(--br-ui-scale-md);
2524
+ --gap-unit: var(--gap-ui-scale-md);
2444
2525
  }
2445
2526
  .vane-chip[data-size="lg"] {
2446
- --fs-unit: 9;
2527
+ --fs-unit: var(--fs-scale-lg);
2447
2528
  --py-unit: 2;
2448
- --br-unit: 2.5;
2449
- --gap-unit: 2.5;
2529
+ --br-unit: var(--br-ui-scale-lg);
2530
+ --gap-unit: var(--gap-ui-scale-lg);
2450
2531
  }
2451
2532
  .vane-chip[data-size="xl"] {
2452
- --fs-unit: 10;
2533
+ --fs-unit: var(--fs-scale-xl);
2453
2534
  --py-unit: 2.5;
2454
- --br-unit: 3;
2455
- --gap-unit: 3;
2535
+ --br-unit: var(--br-ui-scale-xl);
2536
+ --gap-unit: var(--gap-ui-scale-xl);
2456
2537
  }
2457
2538
  .vane-code {
2458
2539
  --lh: 1;
@@ -2486,35 +2567,35 @@
2486
2567
  --br-unit: 2.5;
2487
2568
  }
2488
2569
  .vane-input {
2489
- --lh: 1.6;
2570
+ --lh: var(--lh-base);
2490
2571
  --br-unit: 2;
2491
2572
  --py-unit: 2;
2492
2573
  --aspect-ratio: 2;
2493
2574
  }
2494
2575
  .vane-input[data-size="xs"] {
2495
- --fs-unit: 6;
2496
- --py-unit: 1;
2497
- --br-unit: 1;
2576
+ --fs-unit: var(--fs-scale-xs);
2577
+ --py-unit: var(--py-ui-scale-xs);
2578
+ --br-unit: var(--br-ui-scale-xs);
2498
2579
  }
2499
2580
  .vane-input[data-size="sm"] {
2500
- --fs-unit: 7;
2501
- --py-unit: 1.5;
2502
- --br-unit: 1.5;
2581
+ --fs-unit: var(--fs-scale-sm);
2582
+ --py-unit: var(--py-ui-scale-sm);
2583
+ --br-unit: var(--br-ui-scale-sm);
2503
2584
  }
2504
2585
  .vane-input[data-size="md"] {
2505
- --fs-unit: 8;
2506
- --py-unit: 2;
2507
- --br-unit: 2;
2586
+ --fs-unit: var(--fs-scale-md);
2587
+ --py-unit: var(--py-ui-scale-md);
2588
+ --br-unit: var(--br-ui-scale-md);
2508
2589
  }
2509
2590
  .vane-input[data-size="lg"] {
2510
- --fs-unit: 9;
2511
- --py-unit: 2.5;
2512
- --br-unit: 2.5;
2591
+ --fs-unit: var(--fs-scale-lg);
2592
+ --py-unit: var(--py-ui-scale-lg);
2593
+ --br-unit: var(--br-ui-scale-lg);
2513
2594
  }
2514
2595
  .vane-input[data-size="xl"] {
2515
- --fs-unit: 10;
2516
- --py-unit: 3;
2517
- --br-unit: 3;
2596
+ --fs-unit: var(--fs-scale-xl);
2597
+ --py-unit: var(--py-ui-scale-xl);
2598
+ --br-unit: var(--br-ui-scale-xl);
2518
2599
  }
2519
2600
  .vane-checkbox {
2520
2601
  --br-unit: 1;
@@ -2540,28 +2621,28 @@
2540
2621
  --br-unit: 1.5;
2541
2622
  }
2542
2623
  .vane-label {
2543
- --lh: 1.6;
2624
+ --lh: var(--lh-base);
2544
2625
  --gap-unit: 2;
2545
2626
  }
2546
2627
  .vane-label[data-size="xs"] {
2547
- --fs-unit: 6;
2548
- --gap-unit: 1;
2628
+ --fs-unit: var(--fs-scale-xs);
2629
+ --gap-unit: var(--gap-ui-scale-xs);
2549
2630
  }
2550
2631
  .vane-label[data-size="sm"] {
2551
- --fs-unit: 7;
2552
- --gap-unit: 1.5;
2632
+ --fs-unit: var(--fs-scale-sm);
2633
+ --gap-unit: var(--gap-ui-scale-sm);
2553
2634
  }
2554
2635
  .vane-label[data-size="md"] {
2555
- --fs-unit: 8;
2556
- --gap-unit: 2;
2636
+ --fs-unit: var(--fs-scale-md);
2637
+ --gap-unit: var(--gap-ui-scale-md);
2557
2638
  }
2558
2639
  .vane-label[data-size="lg"] {
2559
- --fs-unit: 9;
2560
- --gap-unit: 2.5;
2640
+ --fs-unit: var(--fs-scale-lg);
2641
+ --gap-unit: var(--gap-ui-scale-lg);
2561
2642
  }
2562
2643
  .vane-label[data-size="xl"] {
2563
- --fs-unit: 10;
2564
- --gap-unit: 3;
2644
+ --fs-unit: var(--fs-scale-xl);
2645
+ --gap-unit: var(--gap-ui-scale-xl);
2565
2646
  }
2566
2647
  .vane-card {
2567
2648
  --br-unit: 5;
@@ -2571,28 +2652,28 @@
2571
2652
  }
2572
2653
  .vane-card[data-size="xs"] {
2573
2654
  --py-unit: 2;
2574
- --gap-unit: 2;
2575
- --br-unit: 3;
2655
+ --gap-unit: var(--gap-layout-scale-xs);
2656
+ --br-unit: var(--br-layout-scale-xs);
2576
2657
  }
2577
2658
  .vane-card[data-size="sm"] {
2578
2659
  --py-unit: 4;
2579
- --gap-unit: 3;
2580
- --br-unit: 4;
2660
+ --gap-unit: var(--gap-layout-scale-sm);
2661
+ --br-unit: var(--br-layout-scale-sm);
2581
2662
  }
2582
2663
  .vane-card[data-size="md"] {
2583
2664
  --py-unit: 6;
2584
- --gap-unit: 4;
2585
- --br-unit: 5;
2665
+ --gap-unit: var(--gap-layout-scale-md);
2666
+ --br-unit: var(--br-layout-scale-md);
2586
2667
  }
2587
2668
  .vane-card[data-size="lg"] {
2588
2669
  --py-unit: 8;
2589
- --gap-unit: 5;
2590
- --br-unit: 6;
2670
+ --gap-unit: var(--gap-layout-scale-lg);
2671
+ --br-unit: var(--br-layout-scale-lg);
2591
2672
  }
2592
2673
  .vane-card[data-size="xl"] {
2593
2674
  --py-unit: 10;
2594
- --gap-unit: 6;
2595
- --br-unit: 7;
2675
+ --gap-unit: var(--gap-layout-scale-xl);
2676
+ --br-unit: var(--br-layout-scale-xl);
2596
2677
  }
2597
2678
  .vane-stack {
2598
2679
  --gap-unit: 4;
@@ -2601,77 +2682,77 @@
2601
2682
  --br-unit: 5;
2602
2683
  }
2603
2684
  .vane-stack[data-size="xs"] {
2604
- --gap-unit: 2;
2685
+ --gap-unit: var(--gap-layout-scale-xs);
2605
2686
  --py-unit: 2;
2606
- --br-unit: 3;
2687
+ --br-unit: var(--br-layout-scale-xs);
2607
2688
  }
2608
2689
  .vane-stack[data-size="sm"] {
2609
- --gap-unit: 3;
2690
+ --gap-unit: var(--gap-layout-scale-sm);
2610
2691
  --py-unit: 3;
2611
- --br-unit: 4;
2692
+ --br-unit: var(--br-layout-scale-sm);
2612
2693
  }
2613
2694
  .vane-stack[data-size="md"] {
2614
- --gap-unit: 4;
2695
+ --gap-unit: var(--gap-layout-scale-md);
2615
2696
  --py-unit: 4;
2616
- --br-unit: 5;
2697
+ --br-unit: var(--br-layout-scale-md);
2617
2698
  }
2618
2699
  .vane-stack[data-size="lg"] {
2619
- --gap-unit: 5;
2700
+ --gap-unit: var(--gap-layout-scale-lg);
2620
2701
  --py-unit: 5;
2621
- --br-unit: 6;
2702
+ --br-unit: var(--br-layout-scale-lg);
2622
2703
  }
2623
2704
  .vane-stack[data-size="xl"] {
2624
- --gap-unit: 6;
2705
+ --gap-unit: var(--gap-layout-scale-xl);
2625
2706
  --py-unit: 6;
2626
- --br-unit: 7;
2707
+ --br-unit: var(--br-layout-scale-xl);
2627
2708
  }
2628
2709
  .vane-row {
2629
2710
  --gap-unit: 4;
2630
2711
  --br-unit: 5;
2631
2712
  }
2632
2713
  .vane-row[data-size="xs"] {
2633
- --gap-unit: 2;
2634
- --br-unit: 3;
2714
+ --gap-unit: var(--gap-layout-scale-xs);
2715
+ --br-unit: var(--br-layout-scale-xs);
2635
2716
  }
2636
2717
  .vane-row[data-size="sm"] {
2637
- --gap-unit: 3;
2638
- --br-unit: 4;
2718
+ --gap-unit: var(--gap-layout-scale-sm);
2719
+ --br-unit: var(--br-layout-scale-sm);
2639
2720
  }
2640
2721
  .vane-row[data-size="md"] {
2641
- --gap-unit: 4;
2642
- --br-unit: 5;
2722
+ --gap-unit: var(--gap-layout-scale-md);
2723
+ --br-unit: var(--br-layout-scale-md);
2643
2724
  }
2644
2725
  .vane-row[data-size="lg"] {
2645
- --gap-unit: 5;
2646
- --br-unit: 6;
2726
+ --gap-unit: var(--gap-layout-scale-lg);
2727
+ --br-unit: var(--br-layout-scale-lg);
2647
2728
  }
2648
2729
  .vane-row[data-size="xl"] {
2649
- --gap-unit: 6;
2650
- --br-unit: 7;
2730
+ --gap-unit: var(--gap-layout-scale-xl);
2731
+ --br-unit: var(--br-layout-scale-xl);
2651
2732
  }
2652
2733
  .vane-col {
2653
2734
  --gap-unit: 4;
2654
2735
  --br-unit: 5;
2655
2736
  }
2656
2737
  .vane-col[data-size="xs"] {
2657
- --gap-unit: 2;
2658
- --br-unit: 3;
2738
+ --gap-unit: var(--gap-layout-scale-xs);
2739
+ --br-unit: var(--br-layout-scale-xs);
2659
2740
  }
2660
2741
  .vane-col[data-size="sm"] {
2661
- --gap-unit: 3;
2662
- --br-unit: 4;
2742
+ --gap-unit: var(--gap-layout-scale-sm);
2743
+ --br-unit: var(--br-layout-scale-sm);
2663
2744
  }
2664
2745
  .vane-col[data-size="md"] {
2665
- --gap-unit: 4;
2666
- --br-unit: 5;
2746
+ --gap-unit: var(--gap-layout-scale-md);
2747
+ --br-unit: var(--br-layout-scale-md);
2667
2748
  }
2668
2749
  .vane-col[data-size="lg"] {
2669
- --gap-unit: 5;
2670
- --br-unit: 6;
2750
+ --gap-unit: var(--gap-layout-scale-lg);
2751
+ --br-unit: var(--br-layout-scale-lg);
2671
2752
  }
2672
2753
  .vane-col[data-size="xl"] {
2673
- --gap-unit: 6;
2674
- --br-unit: 7;
2754
+ --gap-unit: var(--gap-layout-scale-xl);
2755
+ --br-unit: var(--br-layout-scale-xl);
2675
2756
  }
2676
2757
  .vane-container {
2677
2758
  --py-unit: 8;
@@ -2681,169 +2762,169 @@
2681
2762
  }
2682
2763
  .vane-container[data-size="xs"] {
2683
2764
  --py-unit: 4;
2684
- --br-unit: 3;
2685
- --gap-unit: 2;
2765
+ --br-unit: var(--br-layout-scale-xs);
2766
+ --gap-unit: var(--gap-layout-scale-xs);
2686
2767
  }
2687
2768
  .vane-container[data-size="sm"] {
2688
2769
  --py-unit: 6;
2689
- --br-unit: 4;
2690
- --gap-unit: 3;
2770
+ --br-unit: var(--br-layout-scale-sm);
2771
+ --gap-unit: var(--gap-layout-scale-sm);
2691
2772
  }
2692
2773
  .vane-container[data-size="md"] {
2693
2774
  --py-unit: 8;
2694
- --br-unit: 5;
2695
- --gap-unit: 4;
2775
+ --br-unit: var(--br-layout-scale-md);
2776
+ --gap-unit: var(--gap-layout-scale-md);
2696
2777
  }
2697
2778
  .vane-container[data-size="lg"] {
2698
2779
  --py-unit: 10;
2699
- --br-unit: 6;
2700
- --gap-unit: 5;
2780
+ --br-unit: var(--br-layout-scale-lg);
2781
+ --gap-unit: var(--gap-layout-scale-lg);
2701
2782
  }
2702
2783
  .vane-container[data-size="xl"] {
2703
2784
  --py-unit: 12;
2704
- --br-unit: 7;
2705
- --gap-unit: 6;
2785
+ --br-unit: var(--br-layout-scale-xl);
2786
+ --gap-unit: var(--gap-layout-scale-xl);
2706
2787
  }
2707
2788
  .vane-grid {
2708
2789
  --gap-unit: 4;
2709
2790
  --br-unit: 5;
2710
2791
  }
2711
2792
  .vane-grid[data-size="xs"] {
2712
- --gap-unit: 2;
2713
- --br-unit: 3;
2793
+ --gap-unit: var(--gap-layout-scale-xs);
2794
+ --br-unit: var(--br-layout-scale-xs);
2714
2795
  }
2715
2796
  .vane-grid[data-size="sm"] {
2716
- --gap-unit: 3;
2717
- --br-unit: 4;
2797
+ --gap-unit: var(--gap-layout-scale-sm);
2798
+ --br-unit: var(--br-layout-scale-sm);
2718
2799
  }
2719
2800
  .vane-grid[data-size="md"] {
2720
- --gap-unit: 4;
2721
- --br-unit: 5;
2801
+ --gap-unit: var(--gap-layout-scale-md);
2802
+ --br-unit: var(--br-layout-scale-md);
2722
2803
  }
2723
2804
  .vane-grid[data-size="lg"] {
2724
- --gap-unit: 5;
2725
- --br-unit: 6;
2805
+ --gap-unit: var(--gap-layout-scale-lg);
2806
+ --br-unit: var(--br-layout-scale-lg);
2726
2807
  }
2727
2808
  .vane-grid[data-size="xl"] {
2728
- --gap-unit: 6;
2729
- --br-unit: 7;
2809
+ --gap-unit: var(--gap-layout-scale-xl);
2810
+ --br-unit: var(--br-layout-scale-xl);
2730
2811
  }
2731
2812
  .vane-divider {
2732
2813
  --py-unit: 4;
2733
2814
  }
2734
2815
  .vane-divider[data-size="xs"] {
2735
- --py-unit: 2;
2816
+ --py-unit: var(--gap-layout-scale-xs);
2736
2817
  }
2737
2818
  .vane-divider[data-size="sm"] {
2738
- --py-unit: 3;
2819
+ --py-unit: var(--gap-layout-scale-sm);
2739
2820
  }
2740
2821
  .vane-divider[data-size="md"] {
2741
- --py-unit: 4;
2822
+ --py-unit: var(--gap-layout-scale-md);
2742
2823
  }
2743
2824
  .vane-divider[data-size="lg"] {
2744
- --py-unit: 5;
2825
+ --py-unit: var(--gap-layout-scale-lg);
2745
2826
  }
2746
2827
  .vane-divider[data-size="xl"] {
2747
- --py-unit: 6;
2828
+ --py-unit: var(--gap-layout-scale-xl);
2748
2829
  }
2749
2830
  .vane-img {
2750
2831
  --br-unit: 5;
2751
2832
  }
2752
2833
  .vane-img[data-size="xs"] {
2753
- --br-unit: 3;
2834
+ --br-unit: var(--br-layout-scale-xs);
2754
2835
  }
2755
2836
  .vane-img[data-size="sm"] {
2756
- --br-unit: 4;
2837
+ --br-unit: var(--br-layout-scale-sm);
2757
2838
  }
2758
2839
  .vane-img[data-size="md"] {
2759
- --br-unit: 5;
2840
+ --br-unit: var(--br-layout-scale-md);
2760
2841
  }
2761
2842
  .vane-img[data-size="lg"] {
2762
- --br-unit: 6;
2843
+ --br-unit: var(--br-layout-scale-lg);
2763
2844
  }
2764
2845
  .vane-img[data-size="xl"] {
2765
- --br-unit: 7;
2846
+ --br-unit: var(--br-layout-scale-xl);
2766
2847
  }
2767
2848
  .vane-list {
2768
- --lh: 1.6;
2849
+ --lh: var(--lh-base);
2769
2850
  --py-unit: 3;
2770
2851
  }
2771
2852
  .vane-list[data-size="xs"] {
2772
- --fs-unit: 6;
2853
+ --fs-unit: var(--fs-scale-xs);
2773
2854
  --py-unit: 1;
2774
2855
  }
2775
2856
  .vane-list[data-size="sm"] {
2776
- --fs-unit: 7;
2857
+ --fs-unit: var(--fs-scale-sm);
2777
2858
  --py-unit: 2;
2778
2859
  }
2779
2860
  .vane-list[data-size="md"] {
2780
- --fs-unit: 8;
2861
+ --fs-unit: var(--fs-scale-md);
2781
2862
  --py-unit: 3;
2782
2863
  }
2783
2864
  .vane-list[data-size="lg"] {
2784
- --fs-unit: 9;
2865
+ --fs-unit: var(--fs-scale-lg);
2785
2866
  --py-unit: 4;
2786
2867
  }
2787
2868
  .vane-list[data-size="xl"] {
2788
- --fs-unit: 10;
2869
+ --fs-unit: var(--fs-scale-xl);
2789
2870
  --py-unit: 5;
2790
2871
  }
2791
2872
  .vane-text {
2792
- --lh: 1.6;
2873
+ --lh: var(--lh-base);
2793
2874
  }
2794
2875
  .vane-text[data-size="xs"] {
2795
- --fs-unit: 6;
2876
+ --fs-unit: var(--fs-scale-xs);
2796
2877
  }
2797
2878
  .vane-text[data-size="sm"] {
2798
- --fs-unit: 7;
2879
+ --fs-unit: var(--fs-scale-sm);
2799
2880
  }
2800
2881
  .vane-text[data-size="md"] {
2801
- --fs-unit: 8;
2882
+ --fs-unit: var(--fs-scale-md);
2802
2883
  }
2803
2884
  .vane-text[data-size="lg"] {
2804
- --fs-unit: 9;
2885
+ --fs-unit: var(--fs-scale-lg);
2805
2886
  }
2806
2887
  .vane-text[data-size="xl"] {
2807
- --fs-unit: 10;
2888
+ --fs-unit: var(--fs-scale-xl);
2808
2889
  }
2809
2890
  .vane-link {
2810
- --lh: 1.6;
2891
+ --lh: var(--lh-base);
2811
2892
  }
2812
2893
  .vane-link[data-size="xs"] {
2813
- --fs-unit: 6;
2894
+ --fs-unit: var(--fs-scale-xs);
2814
2895
  }
2815
2896
  .vane-link[data-size="sm"] {
2816
- --fs-unit: 7;
2897
+ --fs-unit: var(--fs-scale-sm);
2817
2898
  }
2818
2899
  .vane-link[data-size="md"] {
2819
- --fs-unit: 8;
2900
+ --fs-unit: var(--fs-scale-md);
2820
2901
  }
2821
2902
  .vane-link[data-size="lg"] {
2822
- --fs-unit: 9;
2903
+ --fs-unit: var(--fs-scale-lg);
2823
2904
  }
2824
2905
  .vane-link[data-size="xl"] {
2825
- --fs-unit: 10;
2906
+ --fs-unit: var(--fs-scale-xl);
2826
2907
  }
2827
2908
  .vane-list-item {
2828
- --lh: 1.6;
2909
+ --lh: var(--lh-base);
2829
2910
  }
2830
2911
  .vane-list-item[data-size="xs"] {
2831
- --fs-unit: 6;
2912
+ --fs-unit: var(--fs-scale-xs);
2832
2913
  }
2833
2914
  .vane-list-item[data-size="sm"] {
2834
- --fs-unit: 7;
2915
+ --fs-unit: var(--fs-scale-sm);
2835
2916
  }
2836
2917
  .vane-list-item[data-size="md"] {
2837
- --fs-unit: 8;
2918
+ --fs-unit: var(--fs-scale-md);
2838
2919
  }
2839
2920
  .vane-list-item[data-size="lg"] {
2840
- --fs-unit: 9;
2921
+ --fs-unit: var(--fs-scale-lg);
2841
2922
  }
2842
2923
  .vane-list-item[data-size="xl"] {
2843
- --fs-unit: 10;
2924
+ --fs-unit: var(--fs-scale-xl);
2844
2925
  }
2845
2926
  .vane-section {
2846
- --lh: 1.6;
2927
+ --lh: var(--lh-base);
2847
2928
  --py-unit-desktop: 8;
2848
2929
  --py-unit-tablet: 6;
2849
2930
  --py-unit-mobile: 4;