@almadar/ui 5.1.6 → 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.
- package/package.json +1 -1
- package/themes/_base.css +124 -0
- package/themes/almadar-website.css +0 -170
- package/themes/almadar.css +0 -172
- package/themes/arctic.css +0 -172
- package/themes/copper.css +0 -172
- package/themes/ember.css +0 -172
- package/themes/forest.css +0 -172
- package/themes/index.css +6 -0
- package/themes/lavender.css +0 -172
- package/themes/midnight.css +0 -172
- package/themes/ocean.css +0 -172
- package/themes/prism.css +0 -178
- package/themes/rose.css +0 -172
- package/themes/sand.css +0 -172
- package/themes/slate.css +0 -172
- package/themes/sunset.css +0 -172
package/package.json
CHANGED
package/themes/_base.css
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* _base.css — Shared Typography + Density base
|
|
3
|
+
*
|
|
4
|
+
* Lifted from `atelier.css` so the editorial type rhythm and generous
|
|
5
|
+
* 10pt spacing scale are the default across every theme that doesn't
|
|
6
|
+
* deliberately opt out. Themes can still override any token by declaring
|
|
7
|
+
* it in their own [data-theme="..."] block — that selector is more
|
|
8
|
+
* specific than :root and wins via the CSS cascade.
|
|
9
|
+
*
|
|
10
|
+
* Personality themes that DO opt out today (keep their own typography
|
|
11
|
+
* and/or density): terminal (monospace), wireframe (chunky), neon (tight
|
|
12
|
+
* glow), kiosk (oversized), gazette (serif), minimalist (compact),
|
|
13
|
+
* trait-wars (gamer). All others inherit from this file.
|
|
14
|
+
*
|
|
15
|
+
* Loaded FIRST in themes/index.css so individual theme blocks override
|
|
16
|
+
* cleanly. The contract reference is `themes/_contract.md`.
|
|
17
|
+
*/
|
|
18
|
+
:root {
|
|
19
|
+
/* ----------------------------------------------------------------
|
|
20
|
+
* Typography
|
|
21
|
+
* ----------------------------------------------------------------
|
|
22
|
+
* Inter for body + UI, JetBrains Mono for code, optional display
|
|
23
|
+
* family for hero numerics. Mid-weight 500 reads as confident but
|
|
24
|
+
* not heavy; tight letter-spacing + 1.625 line-height give the
|
|
25
|
+
* editorial feel.
|
|
26
|
+
*/
|
|
27
|
+
--font-family:
|
|
28
|
+
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
29
|
+
--font-family-display:
|
|
30
|
+
"Söhne", "Inter Display", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
31
|
+
--font-family-body:
|
|
32
|
+
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
33
|
+
--font-family-mono:
|
|
34
|
+
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
35
|
+
|
|
36
|
+
--font-weight-normal: 400;
|
|
37
|
+
--font-weight-medium: 500;
|
|
38
|
+
--font-weight-bold: 700;
|
|
39
|
+
--letter-spacing: -0.02em;
|
|
40
|
+
--line-height: 1.625;
|
|
41
|
+
|
|
42
|
+
/* Type scale */
|
|
43
|
+
--text-xs: 12px;
|
|
44
|
+
--leading-xs: 18px;
|
|
45
|
+
--text-sm: 14px;
|
|
46
|
+
--leading-sm: 22px;
|
|
47
|
+
--text-base: 16px;
|
|
48
|
+
--leading-base: 26px;
|
|
49
|
+
--text-lg: 20px;
|
|
50
|
+
--leading-lg: 30px;
|
|
51
|
+
--text-xl: 24px;
|
|
52
|
+
--leading-xl: 32px;
|
|
53
|
+
--text-2xl: 32px;
|
|
54
|
+
--leading-2xl: 38px;
|
|
55
|
+
--text-3xl: 40px;
|
|
56
|
+
--leading-3xl: 44px;
|
|
57
|
+
--text-4xl: 52px;
|
|
58
|
+
--leading-4xl: 56px;
|
|
59
|
+
--text-display-1: 64px;
|
|
60
|
+
--leading-display-1: 68px;
|
|
61
|
+
--text-display-2: 80px;
|
|
62
|
+
--leading-display-2: 84px;
|
|
63
|
+
|
|
64
|
+
/* Intent mapping — what component variants resolve to. */
|
|
65
|
+
--intent-heading-major-size: var(--text-3xl);
|
|
66
|
+
--intent-heading-major-weight: var(--font-weight-bold);
|
|
67
|
+
--intent-heading-major-leading: var(--leading-3xl);
|
|
68
|
+
--intent-heading-minor-size: var(--text-xl);
|
|
69
|
+
--intent-heading-minor-weight: var(--font-weight-bold);
|
|
70
|
+
--intent-heading-minor-leading: var(--leading-xl);
|
|
71
|
+
--intent-body-emphasis-size: var(--text-base);
|
|
72
|
+
--intent-body-emphasis-weight: var(--font-weight-medium);
|
|
73
|
+
--intent-body-emphasis-leading: var(--leading-base);
|
|
74
|
+
--intent-body-default-size: var(--text-base);
|
|
75
|
+
--intent-body-default-weight: var(--font-weight-normal);
|
|
76
|
+
--intent-body-default-leading: var(--leading-base);
|
|
77
|
+
--intent-body-quiet-size: var(--text-sm);
|
|
78
|
+
--intent-body-quiet-weight: var(--font-weight-normal);
|
|
79
|
+
--intent-body-quiet-leading: var(--leading-sm);
|
|
80
|
+
--intent-caption-size: var(--text-xs);
|
|
81
|
+
--intent-caption-weight: var(--font-weight-medium);
|
|
82
|
+
--intent-caption-leading: var(--leading-xs);
|
|
83
|
+
--intent-numeric-size: var(--text-4xl);
|
|
84
|
+
--intent-numeric-weight: var(--font-weight-bold);
|
|
85
|
+
--intent-numeric-leading: var(--leading-4xl);
|
|
86
|
+
--intent-numeric-family: var(--font-family-display);
|
|
87
|
+
|
|
88
|
+
/* ----------------------------------------------------------------
|
|
89
|
+
* Density — generous 10pt rhythm
|
|
90
|
+
* ----------------------------------------------------------------
|
|
91
|
+
* Slightly larger than Tailwind defaults so cards / dialogs / rows
|
|
92
|
+
* read as airy without feeling sparse. Per-element heights tuned to
|
|
93
|
+
* comfortable click targets (44px md is also the iOS HIG minimum).
|
|
94
|
+
*/
|
|
95
|
+
--space-0: 0px;
|
|
96
|
+
--space-1: 4px;
|
|
97
|
+
--space-2: 6px;
|
|
98
|
+
--space-3: 10px;
|
|
99
|
+
--space-4: 14px;
|
|
100
|
+
--space-5: 20px;
|
|
101
|
+
--space-6: 28px;
|
|
102
|
+
--space-7: 36px;
|
|
103
|
+
--space-8: 44px;
|
|
104
|
+
--space-9: 52px;
|
|
105
|
+
--space-10: 60px;
|
|
106
|
+
--space-11: 68px;
|
|
107
|
+
--space-12: 80px;
|
|
108
|
+
|
|
109
|
+
--button-height-sm: 36px;
|
|
110
|
+
--button-height-md: 44px;
|
|
111
|
+
--button-height-lg: 56px;
|
|
112
|
+
--input-height-sm: 36px;
|
|
113
|
+
--input-height-md: 44px;
|
|
114
|
+
--input-height-lg: 56px;
|
|
115
|
+
--row-height-compact: 48px;
|
|
116
|
+
--row-height-normal: 64px;
|
|
117
|
+
--row-height-spacious: 80px;
|
|
118
|
+
|
|
119
|
+
--card-padding-sm: 20px;
|
|
120
|
+
--card-padding-md: 28px;
|
|
121
|
+
--card-padding-lg: 40px;
|
|
122
|
+
--dialog-padding: 40px;
|
|
123
|
+
--section-gap: 64px;
|
|
124
|
+
}
|
|
@@ -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);
|