@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/prism.css CHANGED
@@ -65,15 +65,6 @@
65
65
  --color-info: #2563eb;
66
66
  --color-info-foreground: #ffffff;
67
67
 
68
- /* Typography - Tech: Inter body, JetBrains Mono for numerics */
69
- --font-family:
70
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
71
- --font-weight-normal: 400;
72
- --font-weight-medium: 500;
73
- --font-weight-bold: 600;
74
- --letter-spacing: -0.01em;
75
- --line-height: 1.4;
76
-
77
68
  /* Icon styling - Thin */
78
69
  --icon-stroke-width: 1.5;
79
70
  --icon-color: currentColor;
@@ -96,86 +87,6 @@
96
87
  --focus-ring-offset: 2px;
97
88
  --focus-ring-color: #7c3aed;
98
89
 
99
- /* Density axis - COMPACT 4pt rhythm */
100
- --space-0: 0px;
101
- --space-1: 4px;
102
- --space-2: 8px;
103
- --space-3: 12px;
104
- --space-4: 16px;
105
- --space-5: 20px;
106
- --space-6: 24px;
107
- --space-7: 28px;
108
- --space-8: 32px;
109
- --space-9: 36px;
110
- --space-10: 40px;
111
- --space-11: 44px;
112
- --space-12: 48px;
113
- /* Density axis - tight heights */
114
- --button-height-sm: 24px;
115
- --button-height-md: 28px;
116
- --button-height-lg: 36px;
117
- --input-height-sm: 24px;
118
- --input-height-md: 28px;
119
- --input-height-lg: 36px;
120
- --row-height-compact: 28px;
121
- --row-height-normal: 32px;
122
- --row-height-spacious: 40px;
123
- /* Density axis - tight padding 8/12/16 */
124
- --card-padding-sm: 8px;
125
- --card-padding-md: 12px;
126
- --card-padding-lg: 16px;
127
- --dialog-padding: 20px;
128
- --section-gap: 24px;
129
- /* Type axis - Inter body, JetBrains Mono numerics */
130
- --font-family-display:
131
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
132
- --font-family-body:
133
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
134
- --font-family-mono:
135
- "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
136
- /* Type axis - tighter scale (body 13/18, heading-major 22/26) */
137
- --text-xs: 11px;
138
- --leading-xs: 14px;
139
- --text-sm: 13px;
140
- --leading-sm: 18px;
141
- --text-base: 14px;
142
- --leading-base: 20px;
143
- --text-lg: 16px;
144
- --leading-lg: 22px;
145
- --text-xl: 18px;
146
- --leading-xl: 24px;
147
- --text-2xl: 22px;
148
- --leading-2xl: 26px;
149
- --text-3xl: 28px;
150
- --leading-3xl: 32px;
151
- --text-4xl: 34px;
152
- --leading-4xl: 38px;
153
- --text-display-1: 44px;
154
- --leading-display-1: 48px;
155
- --text-display-2: 56px;
156
- --leading-display-2: 60px;
157
- /* Type axis - intent mapping (numeric/caption forced to mono) */
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-sm);
165
- --intent-body-emphasis-weight: var(--font-weight-medium);
166
- --intent-body-emphasis-leading: var(--leading-sm);
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
90
  /* Motion axis - snappy, mechanical linear */
180
91
  --duration-instant: 0ms;
181
92
  --duration-fast: 80ms;
@@ -265,15 +176,6 @@
265
176
  --color-info: #60a5fa;
266
177
  --color-info-foreground: #000000;
267
178
 
268
- /* Typography - Tech */
269
- --font-family:
270
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
271
- --font-weight-normal: 400;
272
- --font-weight-medium: 500;
273
- --font-weight-bold: 600;
274
- --letter-spacing: -0.01em;
275
- --line-height: 1.4;
276
-
277
179
  /* Icon styling - Thin */
278
180
  --icon-stroke-width: 1.5;
279
181
  --icon-color: currentColor;
@@ -296,86 +198,6 @@
296
198
  --focus-ring-offset: 2px;
297
199
  --focus-ring-color: #a78bfa;
298
200
 
299
- /* Density axis - COMPACT 4pt rhythm */
300
- --space-0: 0px;
301
- --space-1: 4px;
302
- --space-2: 8px;
303
- --space-3: 12px;
304
- --space-4: 16px;
305
- --space-5: 20px;
306
- --space-6: 24px;
307
- --space-7: 28px;
308
- --space-8: 32px;
309
- --space-9: 36px;
310
- --space-10: 40px;
311
- --space-11: 44px;
312
- --space-12: 48px;
313
- /* Density axis - tight heights */
314
- --button-height-sm: 24px;
315
- --button-height-md: 28px;
316
- --button-height-lg: 36px;
317
- --input-height-sm: 24px;
318
- --input-height-md: 28px;
319
- --input-height-lg: 36px;
320
- --row-height-compact: 28px;
321
- --row-height-normal: 32px;
322
- --row-height-spacious: 40px;
323
- /* Density axis - tight padding 8/12/16 */
324
- --card-padding-sm: 8px;
325
- --card-padding-md: 12px;
326
- --card-padding-lg: 16px;
327
- --dialog-padding: 20px;
328
- --section-gap: 24px;
329
- /* Type axis - Inter body, JetBrains Mono numerics */
330
- --font-family-display:
331
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
332
- --font-family-body:
333
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
334
- --font-family-mono:
335
- "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
336
- /* Type axis - tighter scale (body 13/18, heading-major 22/26) */
337
- --text-xs: 11px;
338
- --leading-xs: 14px;
339
- --text-sm: 13px;
340
- --leading-sm: 18px;
341
- --text-base: 14px;
342
- --leading-base: 20px;
343
- --text-lg: 16px;
344
- --leading-lg: 22px;
345
- --text-xl: 18px;
346
- --leading-xl: 24px;
347
- --text-2xl: 22px;
348
- --leading-2xl: 26px;
349
- --text-3xl: 28px;
350
- --leading-3xl: 32px;
351
- --text-4xl: 34px;
352
- --leading-4xl: 38px;
353
- --text-display-1: 44px;
354
- --leading-display-1: 48px;
355
- --text-display-2: 56px;
356
- --leading-display-2: 60px;
357
- /* Type axis - intent mapping */
358
- --intent-heading-major-size: var(--text-2xl);
359
- --intent-heading-major-weight: var(--font-weight-bold);
360
- --intent-heading-major-leading: var(--leading-2xl);
361
- --intent-heading-minor-size: var(--text-lg);
362
- --intent-heading-minor-weight: var(--font-weight-bold);
363
- --intent-heading-minor-leading: var(--leading-lg);
364
- --intent-body-emphasis-size: var(--text-sm);
365
- --intent-body-emphasis-weight: var(--font-weight-medium);
366
- --intent-body-emphasis-leading: var(--leading-sm);
367
- --intent-body-default-size: var(--text-sm);
368
- --intent-body-default-weight: var(--font-weight-normal);
369
- --intent-body-default-leading: var(--leading-sm);
370
- --intent-body-quiet-size: var(--text-sm);
371
- --intent-body-quiet-weight: var(--font-weight-normal);
372
- --intent-body-quiet-leading: var(--leading-sm);
373
- --intent-caption-size: var(--text-xs);
374
- --intent-caption-weight: var(--font-weight-normal);
375
- --intent-caption-leading: var(--leading-xs);
376
- --intent-numeric-size: var(--text-sm);
377
- --intent-numeric-weight: var(--font-weight-medium);
378
- --intent-numeric-leading: var(--leading-sm);
379
201
  /* Motion axis - snappy, mechanical linear */
380
202
  --duration-instant: 0ms;
381
203
  --duration-fast: 80ms;
package/themes/rose.css CHANGED
@@ -67,15 +67,6 @@
67
67
  --color-info: #2563eb;
68
68
  --color-info-foreground: #ffffff;
69
69
 
70
- /* Typography - Light, elegant */
71
- --font-family:
72
- "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
73
- --font-weight-normal: 300;
74
- --font-weight-medium: 450;
75
- --font-weight-bold: 600;
76
- --letter-spacing: -0.01em;
77
- --line-height: 1.65;
78
-
79
70
  /* Icon styling - Rose tint */
80
71
  --icon-stroke-width: 1.5;
81
72
  --icon-color: #e11d48;
@@ -99,83 +90,6 @@
99
90
  --focus-ring-color: #e11d48;
100
91
 
101
92
  /* 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 */
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
93
  /* Motion axis — duration palette */
180
94
  --duration-instant: 0ms;
181
95
  --duration-fast: var(--transition-fast);
@@ -266,15 +180,6 @@
266
180
  --color-info: #60a5fa;
267
181
  --color-info-foreground: #000000;
268
182
 
269
- /* Typography */
270
- --font-family:
271
- "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
272
- --font-weight-normal: 300;
273
- --font-weight-medium: 450;
274
- --font-weight-bold: 600;
275
- --letter-spacing: -0.01em;
276
- --line-height: 1.65;
277
-
278
183
  /* Icon styling - Lighter rose for dark */
279
184
  --icon-stroke-width: 1.5;
280
185
  --icon-color: #fb7185;
@@ -298,83 +203,6 @@
298
203
  --focus-ring-color: #fb7185;
299
204
 
300
205
  /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
301
- /* Density axis — spacing scale */
302
- --space-0: 0px;
303
- --space-1: 4px;
304
- --space-2: 8px;
305
- --space-3: 12px;
306
- --space-4: 16px;
307
- --space-5: 20px;
308
- --space-6: 24px;
309
- --space-7: 28px;
310
- --space-8: 32px;
311
- --space-9: 36px;
312
- --space-10: 40px;
313
- --space-11: 44px;
314
- --space-12: 48px;
315
- /* Density axis — per-element heights */
316
- --button-height-sm: 28px;
317
- --button-height-md: 36px;
318
- --button-height-lg: 44px;
319
- --input-height-sm: 28px;
320
- --input-height-md: 36px;
321
- --input-height-lg: 44px;
322
- --row-height-compact: 32px;
323
- --row-height-normal: 40px;
324
- --row-height-spacious: 48px;
325
- /* Density axis — per-element padding */
326
- --card-padding-sm: 12px;
327
- --card-padding-md: 16px;
328
- --card-padding-lg: 24px;
329
- --dialog-padding: 24px;
330
- --section-gap: 32px;
331
- /* Type axis — family triplet (aliases existing --font-family for backward compat) */
332
- --font-family-display: var(--font-family);
333
- --font-family-body: var(--font-family);
334
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
335
- /* Type axis — size scale */
336
- --text-xs: 12px;
337
- --leading-xs: 16px;
338
- --text-sm: 14px;
339
- --leading-sm: 20px;
340
- --text-base: 16px;
341
- --leading-base: 24px;
342
- --text-lg: 18px;
343
- --leading-lg: 28px;
344
- --text-xl: 20px;
345
- --leading-xl: 28px;
346
- --text-2xl: 24px;
347
- --leading-2xl: 32px;
348
- --text-3xl: 30px;
349
- --leading-3xl: 36px;
350
- --text-4xl: 36px;
351
- --leading-4xl: 40px;
352
- --text-display-1: 48px;
353
- --leading-display-1: 52px;
354
- --text-display-2: 60px;
355
- --leading-display-2: 64px;
356
- /* Type axis — intent mapping */
357
- --intent-heading-major-size: var(--text-2xl);
358
- --intent-heading-major-weight: var(--font-weight-bold);
359
- --intent-heading-major-leading: var(--leading-2xl);
360
- --intent-heading-minor-size: var(--text-lg);
361
- --intent-heading-minor-weight: var(--font-weight-bold);
362
- --intent-heading-minor-leading: var(--leading-lg);
363
- --intent-body-emphasis-size: var(--text-base);
364
- --intent-body-emphasis-weight: var(--font-weight-medium);
365
- --intent-body-emphasis-leading: var(--leading-base);
366
- --intent-body-default-size: var(--text-sm);
367
- --intent-body-default-weight: var(--font-weight-normal);
368
- --intent-body-default-leading: var(--leading-sm);
369
- --intent-body-quiet-size: var(--text-sm);
370
- --intent-body-quiet-weight: var(--font-weight-normal);
371
- --intent-body-quiet-leading: var(--leading-sm);
372
- --intent-caption-size: var(--text-xs);
373
- --intent-caption-weight: var(--font-weight-normal);
374
- --intent-caption-leading: var(--leading-xs);
375
- --intent-numeric-size: var(--text-sm);
376
- --intent-numeric-weight: var(--font-weight-medium);
377
- --intent-numeric-leading: var(--leading-sm);
378
206
  /* Motion axis — duration palette */
379
207
  --duration-instant: 0ms;
380
208
  --duration-fast: var(--transition-fast);
package/themes/sand.css CHANGED
@@ -68,15 +68,6 @@
68
68
  --color-info: #2563eb;
69
69
  --color-info-foreground: #ffffff;
70
70
 
71
- /* Typography */
72
- --font-family:
73
- "Plus Jakarta Sans", "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: 0em;
78
- --line-height: 1.6;
79
-
80
71
  /* Icon styling */
81
72
  --icon-stroke-width: 1.75;
82
73
  --icon-color: #92400e;
@@ -100,83 +91,6 @@
100
91
  --focus-ring-color: #92400e;
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 */
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 */
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 */
181
95
  --duration-instant: 0ms;
182
96
  --duration-fast: var(--transition-fast);
@@ -267,15 +181,6 @@
267
181
  --color-info: #60a5fa;
268
182
  --color-info-foreground: #000000;
269
183
 
270
- /* Typography */
271
- --font-family:
272
- "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
273
- --font-weight-normal: 400;
274
- --font-weight-medium: 500;
275
- --font-weight-bold: 600;
276
- --letter-spacing: 0em;
277
- --line-height: 1.6;
278
-
279
184
  /* Icon styling */
280
185
  --icon-stroke-width: 1.75;
281
186
  --icon-color: #d97706;
@@ -299,83 +204,6 @@
299
204
  --focus-ring-color: #d97706;
300
205
 
301
206
  /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
302
- /* Density axis — spacing scale */
303
- --space-0: 0px;
304
- --space-1: 4px;
305
- --space-2: 8px;
306
- --space-3: 12px;
307
- --space-4: 16px;
308
- --space-5: 20px;
309
- --space-6: 24px;
310
- --space-7: 28px;
311
- --space-8: 32px;
312
- --space-9: 36px;
313
- --space-10: 40px;
314
- --space-11: 44px;
315
- --space-12: 48px;
316
- /* Density axis — per-element heights */
317
- --button-height-sm: 28px;
318
- --button-height-md: 36px;
319
- --button-height-lg: 44px;
320
- --input-height-sm: 28px;
321
- --input-height-md: 36px;
322
- --input-height-lg: 44px;
323
- --row-height-compact: 32px;
324
- --row-height-normal: 40px;
325
- --row-height-spacious: 48px;
326
- /* Density axis — per-element padding */
327
- --card-padding-sm: 12px;
328
- --card-padding-md: 16px;
329
- --card-padding-lg: 24px;
330
- --dialog-padding: 24px;
331
- --section-gap: 32px;
332
- /* Type axis — family triplet */
333
- --font-family-display: var(--font-family);
334
- --font-family-body: var(--font-family);
335
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
336
- /* Type axis — size scale */
337
- --text-xs: 12px;
338
- --leading-xs: 16px;
339
- --text-sm: 14px;
340
- --leading-sm: 20px;
341
- --text-base: 16px;
342
- --leading-base: 24px;
343
- --text-lg: 18px;
344
- --leading-lg: 28px;
345
- --text-xl: 20px;
346
- --leading-xl: 28px;
347
- --text-2xl: 24px;
348
- --leading-2xl: 32px;
349
- --text-3xl: 30px;
350
- --leading-3xl: 36px;
351
- --text-4xl: 36px;
352
- --leading-4xl: 40px;
353
- --text-display-1: 48px;
354
- --leading-display-1: 52px;
355
- --text-display-2: 60px;
356
- --leading-display-2: 64px;
357
- /* Type axis — intent mapping */
358
- --intent-heading-major-size: var(--text-2xl);
359
- --intent-heading-major-weight: var(--font-weight-bold);
360
- --intent-heading-major-leading: var(--leading-2xl);
361
- --intent-heading-minor-size: var(--text-lg);
362
- --intent-heading-minor-weight: var(--font-weight-bold);
363
- --intent-heading-minor-leading: var(--leading-lg);
364
- --intent-body-emphasis-size: var(--text-base);
365
- --intent-body-emphasis-weight: var(--font-weight-medium);
366
- --intent-body-emphasis-leading: var(--leading-base);
367
- --intent-body-default-size: var(--text-sm);
368
- --intent-body-default-weight: var(--font-weight-normal);
369
- --intent-body-default-leading: var(--leading-sm);
370
- --intent-body-quiet-size: var(--text-sm);
371
- --intent-body-quiet-weight: var(--font-weight-normal);
372
- --intent-body-quiet-leading: var(--leading-sm);
373
- --intent-caption-size: var(--text-xs);
374
- --intent-caption-weight: var(--font-weight-normal);
375
- --intent-caption-leading: var(--leading-xs);
376
- --intent-numeric-size: var(--text-sm);
377
- --intent-numeric-weight: var(--font-weight-medium);
378
- --intent-numeric-leading: var(--leading-sm);
379
207
  /* Motion axis — duration palette */
380
208
  --duration-instant: 0ms;
381
209
  --duration-fast: var(--transition-fast);