@almadar/ui 5.1.5 → 5.2.0

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 (21) hide show
  1. package/dist/avl/index.cjs +39 -19
  2. package/dist/avl/index.d.cts +18 -2
  3. package/dist/avl/index.js +39 -19
  4. package/dist/components/molecules/avl/avl-preview-converter.d.ts +4 -4
  5. package/package.json +1 -1
  6. package/themes/_base.css +124 -0
  7. package/themes/almadar-website.css +0 -170
  8. package/themes/almadar.css +0 -172
  9. package/themes/arctic.css +0 -172
  10. package/themes/copper.css +0 -172
  11. package/themes/ember.css +0 -172
  12. package/themes/forest.css +0 -172
  13. package/themes/index.css +6 -0
  14. package/themes/lavender.css +0 -172
  15. package/themes/midnight.css +0 -172
  16. package/themes/ocean.css +0 -172
  17. package/themes/prism.css +0 -178
  18. package/themes/rose.css +0 -172
  19. package/themes/sand.css +0 -172
  20. package/themes/slate.css +0 -172
  21. package/themes/sunset.css +0 -172
package/themes/almadar-website.css CHANGED
@@ -68,14 +68,6 @@
68
68
  --color-info: #3b82f6;
69
69
  --color-info-foreground: #ffffff;
70
70
 
71
- /* Typography - Plus Jakarta Sans per brand guidelines */
72
- --font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
73
- --font-weight-normal: 400;
74
- --font-weight-medium: 500;
75
- --font-weight-bold: 700;
76
- --letter-spacing: -0.02em;
77
- --line-height: 1.6;
78
-
79
71
  /* Icon styling */
80
72
  --icon-stroke-width: 1.75;
81
73
  --icon-color: #14b8a6;
@@ -99,83 +91,6 @@
99
91
  --focus-ring-color: #14b8a6;
100
92
 
101
93
  /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
102
- /* Density axis — spacing scale */
103
- --space-0: 0px;
104
- --space-1: 4px;
105
- --space-2: 8px;
106
- --space-3: 12px;
107
- --space-4: 16px;
108
- --space-5: 20px;
109
- --space-6: 24px;
110
- --space-7: 28px;
111
- --space-8: 32px;
112
- --space-9: 36px;
113
- --space-10: 40px;
114
- --space-11: 44px;
115
- --space-12: 48px;
116
- /* Density axis — per-element heights */
117
- --button-height-sm: 28px;
118
- --button-height-md: 36px;
119
- --button-height-lg: 44px;
120
- --input-height-sm: 28px;
121
- --input-height-md: 36px;
122
- --input-height-lg: 44px;
123
- --row-height-compact: 32px;
124
- --row-height-normal: 40px;
125
- --row-height-spacious: 48px;
126
- /* Density axis — per-element padding */
127
- --card-padding-sm: 12px;
128
- --card-padding-md: 16px;
129
- --card-padding-lg: 24px;
130
- --dialog-padding: 24px;
131
- --section-gap: 32px;
132
- /* Type axis — family triplet (aliases existing --font-family for backward compat) */
133
- --font-family-display: var(--font-family);
134
- --font-family-body: var(--font-family);
135
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
136
- /* Type axis — size scale */
137
- --text-xs: 12px;
138
- --leading-xs: 16px;
139
- --text-sm: 14px;
140
- --leading-sm: 20px;
141
- --text-base: 16px;
142
- --leading-base: 24px;
143
- --text-lg: 18px;
144
- --leading-lg: 28px;
145
- --text-xl: 20px;
146
- --leading-xl: 28px;
147
- --text-2xl: 24px;
148
- --leading-2xl: 32px;
149
- --text-3xl: 30px;
150
- --leading-3xl: 36px;
151
- --text-4xl: 36px;
152
- --leading-4xl: 40px;
153
- --text-display-1: 48px;
154
- --leading-display-1: 52px;
155
- --text-display-2: 60px;
156
- --leading-display-2: 64px;
157
- /* Type axis — intent mapping (calibrated to existing component usage) */
158
- --intent-heading-major-size: var(--text-2xl);
159
- --intent-heading-major-weight: var(--font-weight-bold);
160
- --intent-heading-major-leading: var(--leading-2xl);
161
- --intent-heading-minor-size: var(--text-lg);
162
- --intent-heading-minor-weight: var(--font-weight-bold);
163
- --intent-heading-minor-leading: var(--leading-lg);
164
- --intent-body-emphasis-size: var(--text-base);
165
- --intent-body-emphasis-weight: var(--font-weight-medium);
166
- --intent-body-emphasis-leading: var(--leading-base);
167
- --intent-body-default-size: var(--text-sm);
168
- --intent-body-default-weight: var(--font-weight-normal);
169
- --intent-body-default-leading: var(--leading-sm);
170
- --intent-body-quiet-size: var(--text-sm);
171
- --intent-body-quiet-weight: var(--font-weight-normal);
172
- --intent-body-quiet-leading: var(--leading-sm);
173
- --intent-caption-size: var(--text-xs);
174
- --intent-caption-weight: var(--font-weight-normal);
175
- --intent-caption-leading: var(--leading-xs);
176
- --intent-numeric-size: var(--text-sm);
177
- --intent-numeric-weight: var(--font-weight-medium);
178
- --intent-numeric-leading: var(--leading-sm);
179
94
  /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
180
95
  --duration-instant: 0ms;
181
96
  --duration-fast: var(--transition-fast);
@@ -271,14 +186,6 @@
271
186
  --color-info: #38bdf8;
272
187
  --color-info-foreground: #000000;
273
188
 
274
- /* Typography */
275
- --font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
276
- --font-weight-normal: 400;
277
- --font-weight-medium: 500;
278
- --font-weight-bold: 700;
279
- --letter-spacing: -0.02em;
280
- --line-height: 1.6;
281
-
282
189
  /* Icon styling */
283
190
  --icon-stroke-width: 1.75;
284
191
  --icon-color: #14b8a6;
@@ -302,83 +209,6 @@
302
209
  --focus-ring-color: #14b8a6;
303
210
 
304
211
  /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
305
- /* Density axis — spacing scale */
306
- --space-0: 0px;
307
- --space-1: 4px;
308
- --space-2: 8px;
309
- --space-3: 12px;
310
- --space-4: 16px;
311
- --space-5: 20px;
312
- --space-6: 24px;
313
- --space-7: 28px;
314
- --space-8: 32px;
315
- --space-9: 36px;
316
- --space-10: 40px;
317
- --space-11: 44px;
318
- --space-12: 48px;
319
- /* Density axis — per-element heights */
320
- --button-height-sm: 28px;
321
- --button-height-md: 36px;
322
- --button-height-lg: 44px;
323
- --input-height-sm: 28px;
324
- --input-height-md: 36px;
325
- --input-height-lg: 44px;
326
- --row-height-compact: 32px;
327
- --row-height-normal: 40px;
328
- --row-height-spacious: 48px;
329
- /* Density axis — per-element padding */
330
- --card-padding-sm: 12px;
331
- --card-padding-md: 16px;
332
- --card-padding-lg: 24px;
333
- --dialog-padding: 24px;
334
- --section-gap: 32px;
335
- /* Type axis — family triplet (aliases existing --font-family for backward compat) */
336
- --font-family-display: var(--font-family);
337
- --font-family-body: var(--font-family);
338
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
339
- /* Type axis — size scale */
340
- --text-xs: 12px;
341
- --leading-xs: 16px;
342
- --text-sm: 14px;
343
- --leading-sm: 20px;
344
- --text-base: 16px;
345
- --leading-base: 24px;
346
- --text-lg: 18px;
347
- --leading-lg: 28px;
348
- --text-xl: 20px;
349
- --leading-xl: 28px;
350
- --text-2xl: 24px;
351
- --leading-2xl: 32px;
352
- --text-3xl: 30px;
353
- --leading-3xl: 36px;
354
- --text-4xl: 36px;
355
- --leading-4xl: 40px;
356
- --text-display-1: 48px;
357
- --leading-display-1: 52px;
358
- --text-display-2: 60px;
359
- --leading-display-2: 64px;
360
- /* Type axis — intent mapping (calibrated to existing component usage) */
361
- --intent-heading-major-size: var(--text-2xl);
362
- --intent-heading-major-weight: var(--font-weight-bold);
363
- --intent-heading-major-leading: var(--leading-2xl);
364
- --intent-heading-minor-size: var(--text-lg);
365
- --intent-heading-minor-weight: var(--font-weight-bold);
366
- --intent-heading-minor-leading: var(--leading-lg);
367
- --intent-body-emphasis-size: var(--text-base);
368
- --intent-body-emphasis-weight: var(--font-weight-medium);
369
- --intent-body-emphasis-leading: var(--leading-base);
370
- --intent-body-default-size: var(--text-sm);
371
- --intent-body-default-weight: var(--font-weight-normal);
372
- --intent-body-default-leading: var(--leading-sm);
373
- --intent-body-quiet-size: var(--text-sm);
374
- --intent-body-quiet-weight: var(--font-weight-normal);
375
- --intent-body-quiet-leading: var(--leading-sm);
376
- --intent-caption-size: var(--text-xs);
377
- --intent-caption-weight: var(--font-weight-normal);
378
- --intent-caption-leading: var(--leading-xs);
379
- --intent-numeric-size: var(--text-sm);
380
- --intent-numeric-weight: var(--font-weight-medium);
381
- --intent-numeric-leading: var(--leading-sm);
382
212
  /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
383
213
  --duration-instant: 0ms;
384
214
  --duration-fast: var(--transition-fast);
package/themes/almadar.css CHANGED
@@ -68,15 +68,6 @@
68
68
  --color-info: #0ea5e9;
69
69
  --color-info-foreground: #ffffff;
70
70
 
71
- /* Typography - Modern, clean */
72
- --font-family:
73
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
74
- --font-weight-normal: 400;
75
- --font-weight-medium: 500;
76
- --font-weight-bold: 600;
77
- --letter-spacing: -0.02em;
78
- --line-height: 1.6;
79
-
80
71
  /* Icon styling */
81
72
  --icon-stroke-width: 1.75;
82
73
  --icon-color: #0d9488;
@@ -100,83 +91,6 @@
100
91
  --focus-ring-color: #14b8a6;
101
92
 
102
93
  /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
103
- /* Density axis — spacing scale */
104
- --space-0: 0px;
105
- --space-1: 4px;
106
- --space-2: 8px;
107
- --space-3: 12px;
108
- --space-4: 16px;
109
- --space-5: 20px;
110
- --space-6: 24px;
111
- --space-7: 28px;
112
- --space-8: 32px;
113
- --space-9: 36px;
114
- --space-10: 40px;
115
- --space-11: 44px;
116
- --space-12: 48px;
117
- /* Density axis — per-element heights */
118
- --button-height-sm: 28px;
119
- --button-height-md: 36px;
120
- --button-height-lg: 44px;
121
- --input-height-sm: 28px;
122
- --input-height-md: 36px;
123
- --input-height-lg: 44px;
124
- --row-height-compact: 32px;
125
- --row-height-normal: 40px;
126
- --row-height-spacious: 48px;
127
- /* Density axis — per-element padding */
128
- --card-padding-sm: 12px;
129
- --card-padding-md: 16px;
130
- --card-padding-lg: 24px;
131
- --dialog-padding: 24px;
132
- --section-gap: 32px;
133
- /* Type axis — family triplet (aliases existing --font-family for backward compat) */
134
- --font-family-display: var(--font-family);
135
- --font-family-body: var(--font-family);
136
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
137
- /* Type axis — size scale */
138
- --text-xs: 12px;
139
- --leading-xs: 16px;
140
- --text-sm: 14px;
141
- --leading-sm: 20px;
142
- --text-base: 16px;
143
- --leading-base: 24px;
144
- --text-lg: 18px;
145
- --leading-lg: 28px;
146
- --text-xl: 20px;
147
- --leading-xl: 28px;
148
- --text-2xl: 24px;
149
- --leading-2xl: 32px;
150
- --text-3xl: 30px;
151
- --leading-3xl: 36px;
152
- --text-4xl: 36px;
153
- --leading-4xl: 40px;
154
- --text-display-1: 48px;
155
- --leading-display-1: 52px;
156
- --text-display-2: 60px;
157
- --leading-display-2: 64px;
158
- /* Type axis — intent mapping (calibrated to existing component usage) */
159
- --intent-heading-major-size: var(--text-2xl);
160
- --intent-heading-major-weight: var(--font-weight-bold);
161
- --intent-heading-major-leading: var(--leading-2xl);
162
- --intent-heading-minor-size: var(--text-lg);
163
- --intent-heading-minor-weight: var(--font-weight-bold);
164
- --intent-heading-minor-leading: var(--leading-lg);
165
- --intent-body-emphasis-size: var(--text-base);
166
- --intent-body-emphasis-weight: var(--font-weight-medium);
167
- --intent-body-emphasis-leading: var(--leading-base);
168
- --intent-body-default-size: var(--text-sm);
169
- --intent-body-default-weight: var(--font-weight-normal);
170
- --intent-body-default-leading: var(--leading-sm);
171
- --intent-body-quiet-size: var(--text-sm);
172
- --intent-body-quiet-weight: var(--font-weight-normal);
173
- --intent-body-quiet-leading: var(--leading-sm);
174
- --intent-caption-size: var(--text-xs);
175
- --intent-caption-weight: var(--font-weight-normal);
176
- --intent-caption-leading: var(--leading-xs);
177
- --intent-numeric-size: var(--text-sm);
178
- --intent-numeric-weight: var(--font-weight-medium);
179
- --intent-numeric-leading: var(--leading-sm);
180
94
  /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
181
95
  --duration-instant: 0ms;
182
96
  --duration-fast: var(--transition-fast);
@@ -269,15 +183,6 @@
269
183
  --color-info: #38bdf8;
270
184
  --color-info-foreground: #000000;
271
185
 
272
- /* Typography - Modern, clean */
273
- --font-family:
274
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
275
- --font-weight-normal: 400;
276
- --font-weight-medium: 500;
277
- --font-weight-bold: 600;
278
- --letter-spacing: -0.02em;
279
- --line-height: 1.6;
280
-
281
186
  /* Icon styling - Medium with teal color */
282
187
  --icon-stroke-width: 1.75;
283
188
  --icon-color: #14b8a6;
@@ -301,83 +206,6 @@
301
206
  --focus-ring-color: #14b8a6;
302
207
 
303
208
  /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
304
- /* Density axis — spacing scale */
305
- --space-0: 0px;
306
- --space-1: 4px;
307
- --space-2: 8px;
308
- --space-3: 12px;
309
- --space-4: 16px;
310
- --space-5: 20px;
311
- --space-6: 24px;
312
- --space-7: 28px;
313
- --space-8: 32px;
314
- --space-9: 36px;
315
- --space-10: 40px;
316
- --space-11: 44px;
317
- --space-12: 48px;
318
- /* Density axis — per-element heights */
319
- --button-height-sm: 28px;
320
- --button-height-md: 36px;
321
- --button-height-lg: 44px;
322
- --input-height-sm: 28px;
323
- --input-height-md: 36px;
324
- --input-height-lg: 44px;
325
- --row-height-compact: 32px;
326
- --row-height-normal: 40px;
327
- --row-height-spacious: 48px;
328
- /* Density axis — per-element padding */
329
- --card-padding-sm: 12px;
330
- --card-padding-md: 16px;
331
- --card-padding-lg: 24px;
332
- --dialog-padding: 24px;
333
- --section-gap: 32px;
334
- /* Type axis — family triplet (aliases existing --font-family for backward compat) */
335
- --font-family-display: var(--font-family);
336
- --font-family-body: var(--font-family);
337
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
338
- /* Type axis — size scale */
339
- --text-xs: 12px;
340
- --leading-xs: 16px;
341
- --text-sm: 14px;
342
- --leading-sm: 20px;
343
- --text-base: 16px;
344
- --leading-base: 24px;
345
- --text-lg: 18px;
346
- --leading-lg: 28px;
347
- --text-xl: 20px;
348
- --leading-xl: 28px;
349
- --text-2xl: 24px;
350
- --leading-2xl: 32px;
351
- --text-3xl: 30px;
352
- --leading-3xl: 36px;
353
- --text-4xl: 36px;
354
- --leading-4xl: 40px;
355
- --text-display-1: 48px;
356
- --leading-display-1: 52px;
357
- --text-display-2: 60px;
358
- --leading-display-2: 64px;
359
- /* Type axis — intent mapping (calibrated to existing component usage) */
360
- --intent-heading-major-size: var(--text-2xl);
361
- --intent-heading-major-weight: var(--font-weight-bold);
362
- --intent-heading-major-leading: var(--leading-2xl);
363
- --intent-heading-minor-size: var(--text-lg);
364
- --intent-heading-minor-weight: var(--font-weight-bold);
365
- --intent-heading-minor-leading: var(--leading-lg);
366
- --intent-body-emphasis-size: var(--text-base);
367
- --intent-body-emphasis-weight: var(--font-weight-medium);
368
- --intent-body-emphasis-leading: var(--leading-base);
369
- --intent-body-default-size: var(--text-sm);
370
- --intent-body-default-weight: var(--font-weight-normal);
371
- --intent-body-default-leading: var(--leading-sm);
372
- --intent-body-quiet-size: var(--text-sm);
373
- --intent-body-quiet-weight: var(--font-weight-normal);
374
- --intent-body-quiet-leading: var(--leading-sm);
375
- --intent-caption-size: var(--text-xs);
376
- --intent-caption-weight: var(--font-weight-normal);
377
- --intent-caption-leading: var(--leading-xs);
378
- --intent-numeric-size: var(--text-sm);
379
- --intent-numeric-weight: var(--font-weight-medium);
380
- --intent-numeric-leading: var(--leading-sm);
381
209
  /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
382
210
  --duration-instant: 0ms;
383
211
  --duration-fast: var(--transition-fast);
package/themes/arctic.css CHANGED
@@ -69,15 +69,6 @@
69
69
  --color-info: #2563eb;
70
70
  --color-info-foreground: #ffffff;
71
71
 
72
- /* Typography */
73
- --font-family:
74
- "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
75
- --font-weight-normal: 400;
76
- --font-weight-medium: 500;
77
- --font-weight-bold: 600;
78
- --letter-spacing: -0.01em;
79
- --line-height: 1.55;
80
-
81
72
  /* Icon styling */
82
73
  --icon-stroke-width: 1.75;
83
74
  --icon-color: #0284c7;
@@ -101,83 +92,6 @@
101
92
  --focus-ring-color: #0284c7;
102
93
 
103
94
  /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
104
- /* Density axis — spacing scale */
105
- --space-0: 0px;
106
- --space-1: 4px;
107
- --space-2: 8px;
108
- --space-3: 12px;
109
- --space-4: 16px;
110
- --space-5: 20px;
111
- --space-6: 24px;
112
- --space-7: 28px;
113
- --space-8: 32px;
114
- --space-9: 36px;
115
- --space-10: 40px;
116
- --space-11: 44px;
117
- --space-12: 48px;
118
- /* Density axis — per-element heights */
119
- --button-height-sm: 28px;
120
- --button-height-md: 36px;
121
- --button-height-lg: 44px;
122
- --input-height-sm: 28px;
123
- --input-height-md: 36px;
124
- --input-height-lg: 44px;
125
- --row-height-compact: 32px;
126
- --row-height-normal: 40px;
127
- --row-height-spacious: 48px;
128
- /* Density axis — per-element padding */
129
- --card-padding-sm: 12px;
130
- --card-padding-md: 16px;
131
- --card-padding-lg: 24px;
132
- --dialog-padding: 24px;
133
- --section-gap: 32px;
134
- /* Type axis — family triplet (aliases existing --font-family for backward compat) */
135
- --font-family-display: var(--font-family);
136
- --font-family-body: var(--font-family);
137
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
138
- /* Type axis — size scale */
139
- --text-xs: 12px;
140
- --leading-xs: 16px;
141
- --text-sm: 14px;
142
- --leading-sm: 20px;
143
- --text-base: 16px;
144
- --leading-base: 24px;
145
- --text-lg: 18px;
146
- --leading-lg: 28px;
147
- --text-xl: 20px;
148
- --leading-xl: 28px;
149
- --text-2xl: 24px;
150
- --leading-2xl: 32px;
151
- --text-3xl: 30px;
152
- --leading-3xl: 36px;
153
- --text-4xl: 36px;
154
- --leading-4xl: 40px;
155
- --text-display-1: 48px;
156
- --leading-display-1: 52px;
157
- --text-display-2: 60px;
158
- --leading-display-2: 64px;
159
- /* Type axis — intent mapping (calibrated to existing component usage) */
160
- --intent-heading-major-size: var(--text-2xl);
161
- --intent-heading-major-weight: var(--font-weight-bold);
162
- --intent-heading-major-leading: var(--leading-2xl);
163
- --intent-heading-minor-size: var(--text-lg);
164
- --intent-heading-minor-weight: var(--font-weight-bold);
165
- --intent-heading-minor-leading: var(--leading-lg);
166
- --intent-body-emphasis-size: var(--text-base);
167
- --intent-body-emphasis-weight: var(--font-weight-medium);
168
- --intent-body-emphasis-leading: var(--leading-base);
169
- --intent-body-default-size: var(--text-sm);
170
- --intent-body-default-weight: var(--font-weight-normal);
171
- --intent-body-default-leading: var(--leading-sm);
172
- --intent-body-quiet-size: var(--text-sm);
173
- --intent-body-quiet-weight: var(--font-weight-normal);
174
- --intent-body-quiet-leading: var(--leading-sm);
175
- --intent-caption-size: var(--text-xs);
176
- --intent-caption-weight: var(--font-weight-normal);
177
- --intent-caption-leading: var(--leading-xs);
178
- --intent-numeric-size: var(--text-sm);
179
- --intent-numeric-weight: var(--font-weight-medium);
180
- --intent-numeric-leading: var(--leading-sm);
181
95
  /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
182
96
  --duration-instant: 0ms;
183
97
  --duration-fast: var(--transition-fast);
@@ -268,15 +182,6 @@
268
182
  --color-info: #60a5fa;
269
183
  --color-info-foreground: #000000;
270
184
 
271
- /* Typography */
272
- --font-family:
273
- "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
274
- --font-weight-normal: 400;
275
- --font-weight-medium: 500;
276
- --font-weight-bold: 600;
277
- --letter-spacing: -0.01em;
278
- --line-height: 1.55;
279
-
280
185
  /* Icon styling */
281
186
  --icon-stroke-width: 1.75;
282
187
  --icon-color: #67e8f9;
@@ -300,83 +205,6 @@
300
205
  --focus-ring-color: #67e8f9;
301
206
 
302
207
  /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
303
- /* Density axis — spacing scale */
304
- --space-0: 0px;
305
- --space-1: 4px;
306
- --space-2: 8px;
307
- --space-3: 12px;
308
- --space-4: 16px;
309
- --space-5: 20px;
310
- --space-6: 24px;
311
- --space-7: 28px;
312
- --space-8: 32px;
313
- --space-9: 36px;
314
- --space-10: 40px;
315
- --space-11: 44px;
316
- --space-12: 48px;
317
- /* Density axis — per-element heights */
318
- --button-height-sm: 28px;
319
- --button-height-md: 36px;
320
- --button-height-lg: 44px;
321
- --input-height-sm: 28px;
322
- --input-height-md: 36px;
323
- --input-height-lg: 44px;
324
- --row-height-compact: 32px;
325
- --row-height-normal: 40px;
326
- --row-height-spacious: 48px;
327
- /* Density axis — per-element padding */
328
- --card-padding-sm: 12px;
329
- --card-padding-md: 16px;
330
- --card-padding-lg: 24px;
331
- --dialog-padding: 24px;
332
- --section-gap: 32px;
333
- /* Type axis — family triplet (aliases existing --font-family for backward compat) */
334
- --font-family-display: var(--font-family);
335
- --font-family-body: var(--font-family);
336
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
337
- /* Type axis — size scale */
338
- --text-xs: 12px;
339
- --leading-xs: 16px;
340
- --text-sm: 14px;
341
- --leading-sm: 20px;
342
- --text-base: 16px;
343
- --leading-base: 24px;
344
- --text-lg: 18px;
345
- --leading-lg: 28px;
346
- --text-xl: 20px;
347
- --leading-xl: 28px;
348
- --text-2xl: 24px;
349
- --leading-2xl: 32px;
350
- --text-3xl: 30px;
351
- --leading-3xl: 36px;
352
- --text-4xl: 36px;
353
- --leading-4xl: 40px;
354
- --text-display-1: 48px;
355
- --leading-display-1: 52px;
356
- --text-display-2: 60px;
357
- --leading-display-2: 64px;
358
- /* Type axis — intent mapping (calibrated to existing component usage) */
359
- --intent-heading-major-size: var(--text-2xl);
360
- --intent-heading-major-weight: var(--font-weight-bold);
361
- --intent-heading-major-leading: var(--leading-2xl);
362
- --intent-heading-minor-size: var(--text-lg);
363
- --intent-heading-minor-weight: var(--font-weight-bold);
364
- --intent-heading-minor-leading: var(--leading-lg);
365
- --intent-body-emphasis-size: var(--text-base);
366
- --intent-body-emphasis-weight: var(--font-weight-medium);
367
- --intent-body-emphasis-leading: var(--leading-base);
368
- --intent-body-default-size: var(--text-sm);
369
- --intent-body-default-weight: var(--font-weight-normal);
370
- --intent-body-default-leading: var(--leading-sm);
371
- --intent-body-quiet-size: var(--text-sm);
372
- --intent-body-quiet-weight: var(--font-weight-normal);
373
- --intent-body-quiet-leading: var(--leading-sm);
374
- --intent-caption-size: var(--text-xs);
375
- --intent-caption-weight: var(--font-weight-normal);
376
- --intent-caption-leading: var(--leading-xs);
377
- --intent-numeric-size: var(--text-sm);
378
- --intent-numeric-weight: var(--font-weight-medium);
379
- --intent-numeric-leading: var(--leading-sm);
380
208
  /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
381
209
  --duration-instant: 0ms;
382
210
  --duration-fast: var(--transition-fast);