@almadar/ui 5.146.3 → 5.147.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 (19) hide show
  1. package/dist/avl/index.cjs +266 -33
  2. package/dist/avl/index.js +266 -33
  3. package/dist/{cn-BdGFhYe3.d.cts → cn-BAn68sNO.d.cts} +92 -2
  4. package/dist/{cn-DNkqAWZK.d.ts → cn-CWxxLkri.d.ts} +92 -2
  5. package/dist/components/index.cjs +267 -34
  6. package/dist/components/index.d.cts +93 -175
  7. package/dist/components/index.d.ts +93 -175
  8. package/dist/components/index.js +267 -34
  9. package/dist/lib/index.cjs +104 -0
  10. package/dist/lib/index.d.cts +2 -1
  11. package/dist/lib/index.d.ts +2 -1
  12. package/dist/lib/index.js +104 -1
  13. package/dist/providers/index.cjs +266 -33
  14. package/dist/providers/index.js +266 -33
  15. package/dist/runtime/index.cjs +266 -33
  16. package/dist/runtime/index.js +266 -33
  17. package/package.json +6 -6
  18. package/themes/bloomberg-dense.css +266 -229
  19. package/themes/retro.css +30 -30
package/themes/bloomberg-dense.css CHANGED
@@ -1,18 +1,29 @@
1
1
  /**
2
- * Bloomberg Dense Theme
2
+ * Bloomberg Dense Theme — "Data Cockpit"
3
3
  *
4
- * Personality: trading-terminal / data-cockpit feel. Very dark navy canvas, cyan +
5
- * amber data accents, JetBrains Mono everywhere, sharp 0-radius corners with thick
6
- * 2px borders carrying hierarchy. Mechanical linear motion under 200ms.
4
+ * Personality: a modern trading terminal — dense, dark, instrument-grade, but
5
+ * refined rather than brutalist. Deep cool-navy canvas with a cyan primary and
6
+ * amber data accent, panels lifted by soft layered shadows carrying a faint
7
+ * cyan glow, small-but-present radii, and a clean grotesque body paired with a
8
+ * mono used only for numerics. Motion is smooth (emphasized-decel) with a
9
+ * subtle spring, not the old mechanical linear. The 4pt rhythm and compact
10
+ * element heights keep it unmistakably a data cockpit.
11
+ *
12
+ * What changed from the original bloomberg-dense (de-boxified):
13
+ * Geometry sharp 0px radius + 2px black borders → 3-6px radii + 1px hairlines
14
+ * Elevation flat (no shadows) → layered depth with a faint cyan glow
15
+ * Type JetBrains Mono everywhere → Inter body + mono numerics only
16
+ * Motion linear 100/150/200ms → emphasized-decel 120/180/260ms + spring
17
+ * Iconography phosphor-fill (heavy) → lucide 1.5px (clean)
7
18
  *
8
19
  * Spec axes (per docs/Almadar_Std_Variations.md §2.4):
9
- * Color very dark navy/black + cyan/amber data accents
10
- * Density compact (4pt rhythm, 24/28/32 buttons — tighter than linear)
11
- * Type dense (JetBrains Mono everywhere, 1.3 leading, base 14px)
12
- * Geometry sharp (radius 0, borders 2px thick)
13
- * Elevation outline (no shadows — borders carry hierarchy)
14
- * Motion mechanical (linear easing, 100/150/200ms)
15
- * Iconography filled (phosphor-fill, 0 stroke)
20
+ * Color deep cool-navy + cyan primary + amber data accent
21
+ * Density compact (4pt rhythm, 26/30/34 buttons)
22
+ * Type dense grotesque (Inter body, JetBrains Mono numerics, 1.45 leading)
23
+ * Geometry refined (3-6px radius, 1px hairline borders)
24
+ * Elevation depth-glowed (layered shadows w/ faint cyan tint)
25
+ * Motion smooth (emphasized-decel, subtle spring, 120/180/260ms)
26
+ * Iconography outline (lucide, stroke 1.5)
16
27
  * Illustration text-only (no imagery in empty states)
17
28
  */
18
29
 
@@ -20,99 +31,106 @@
20
31
  * LIGHT MODE
21
32
  * ========================================================================== */
22
33
  [data-theme="bloomberg-dense-light"] {
34
+ /* Shadows — soft, neutral, with a faint cyan tint for the data-cockpit glow */
23
35
  --shadow-none: none;
24
- --shadow-sm: none;
25
- --shadow-main: none;
26
- --shadow-lg: none;
27
- --shadow-inner: none;
28
- --shadow-hover: none;
29
- --shadow-active: none;
30
-
36
+ --shadow-sm: 0 1px 2px rgba(12, 20, 36, 0.06);
37
+ --shadow-main: 0 4px 12px rgba(12, 20, 36, 0.08), 0 0 0 1px rgba(14, 116, 144, 0.06);
38
+ --shadow-lg: 0 12px 28px rgba(12, 20, 36, 0.10), 0 2px 6px rgba(12, 20, 36, 0.05);
39
+ --shadow-inner: inset 0 1px 2px rgba(12, 20, 36, 0.05);
40
+ --shadow-hover: 0 6px 16px rgba(12, 20, 36, 0.10), 0 0 0 1px rgba(14, 116, 144, 0.10);
41
+ --shadow-active: 0 1px 3px rgba(12, 20, 36, 0.08);
42
+
43
+ /* Radius — small but present (de-boxified) */
31
44
  --radius-none: 0px;
32
- --radius-sm: 0px;
33
- --radius-md: 0px;
34
- --radius-lg: 0px;
35
- --radius-xl: 0px;
45
+ --radius-sm: 3px;
46
+ --radius-md: 4px;
47
+ --radius-lg: 6px;
48
+ --radius-xl: 8px;
36
49
  --radius-full: 9999px;
37
50
 
38
- --border-width: 2px;
51
+ /* Border width — hairline-led */
52
+ --border-width: 1px;
39
53
  --border-width-thin: 1px;
40
- --border-width-thick: 3px;
54
+ --border-width-thick: 2px;
41
55
 
42
- --color-primary: #06b6d4;
43
- --color-primary-hover: #0891b2;
44
- --color-primary-foreground: #0a0e1a;
56
+ /* Colors — cool off-white canvas, deep navy ink, cyan + amber data accents */
57
+ --color-primary: #0e7490;
58
+ --color-primary-hover: #155e75;
59
+ --color-primary-foreground: #ffffff;
45
60
 
46
- --color-secondary: #e4e9f2;
47
- --color-secondary-hover: #d6dce8;
48
- --color-secondary-foreground: #0a0e1a;
61
+ --color-secondary: #eef2f8;
62
+ --color-secondary-hover: #e1e7f0;
63
+ --color-secondary-foreground: #0c1424;
49
64
 
50
- --color-accent: #f59e0b;
51
- --color-accent-foreground: #0a0e1a;
65
+ --color-accent: #b45309;
66
+ --color-accent-foreground: #ffffff;
52
67
 
53
- --color-muted: #e4e9f2;
54
- --color-muted-foreground: #4a5568;
68
+ --color-muted: #eef2f8;
69
+ --color-muted-foreground: #4a5876;
55
70
 
56
- --color-background: #f5f7fa;
57
- --color-foreground: #0a0e1a;
71
+ --color-background: #f6f8fc;
72
+ --color-foreground: #0c1424;
58
73
  --color-card: #ffffff;
59
- --color-card-foreground: #0a0e1a;
60
- --color-surface: #eceff5;
61
- --color-border: #0a0e1a;
62
- --color-input: #0a0e1a;
63
- --color-ring: #06b6d4;
64
-
65
- --color-table-header: #0a0e1a;
66
- --color-table-border: #0a0e1a;
67
- --color-table-row-hover: #eceff5;
68
- --color-surface-hover: #d6dce8;
69
- --color-border-hover: #0a0e1a;
70
- --color-placeholder: #6b7280;
71
-
72
- --color-error: #dc2626;
74
+ --color-card-foreground: #0c1424;
75
+ --color-surface: #eef2f8;
76
+ --color-border: #d6deeb;
77
+ --color-input: #c2cee0;
78
+ --color-ring: #0e7490;
79
+
80
+ --color-table-header: #eef2f8;
81
+ --color-table-border: #d6deeb;
82
+ --color-table-row-hover: #eef2f8;
83
+ --color-surface-hover: #e1e7f0;
84
+ --color-border-hover: #aab8cd;
85
+ --color-placeholder: #6b7a96;
86
+
87
+ --color-error: #c2410c;
73
88
  --color-error-foreground: #ffffff;
74
- --color-success: #15803d;
89
+ --color-success: #047857;
75
90
  --color-success-foreground: #ffffff;
76
- --color-warning: #f59e0b;
77
- --color-warning-foreground: #0a0e1a;
78
- --color-info: #06b6d4;
79
- --color-info-foreground: #0a0e1a;
91
+ --color-warning: #b45309;
92
+ --color-warning-foreground: #ffffff;
93
+ --color-info: #0e7490;
94
+ --color-info-foreground: #ffffff;
80
95
 
96
+ /* Typography — clean grotesque body, mono reserved for numerics */
81
97
  --font-family:
82
- "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
98
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
83
99
  --font-family-display:
84
- "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
100
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
85
101
  --font-family-body:
86
- "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
102
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
87
103
  --font-family-mono:
88
- "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
104
+ "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
89
105
  --font-weight-normal: 400;
90
106
  --font-weight-medium: 500;
91
- --font-weight-bold: 700;
92
- --letter-spacing: 0;
93
- --line-height: 1.3;
94
-
95
- --text-xs: 10px;
96
- --leading-xs: 13px;
97
- --text-sm: 12px;
98
- --leading-sm: 16px;
107
+ --font-weight-bold: 600;
108
+ --letter-spacing: -0.011em;
109
+ --line-height: 1.45;
110
+
111
+ /* Dense type scale — slightly less squinty than the old 10/12/14 */
112
+ --text-xs: 11px;
113
+ --leading-xs: 15px;
114
+ --text-sm: 13px;
115
+ --leading-sm: 18px;
99
116
  --text-base: 14px;
100
- --leading-base: 18px;
117
+ --leading-base: 20px;
101
118
  --text-lg: 16px;
102
- --leading-lg: 20px;
119
+ --leading-lg: 22px;
103
120
  --text-xl: 18px;
104
- --leading-xl: 23px;
105
- --text-2xl: 20px;
106
- --leading-2xl: 26px;
107
- --text-3xl: 24px;
108
- --leading-3xl: 31px;
109
- --text-4xl: 30px;
110
- --leading-4xl: 39px;
111
- --text-display-1: 38px;
112
- --leading-display-1: 49px;
113
- --text-display-2: 48px;
121
+ --leading-xl: 24px;
122
+ --text-2xl: 21px;
123
+ --leading-2xl: 27px;
124
+ --text-3xl: 25px;
125
+ --leading-3xl: 32px;
126
+ --text-4xl: 31px;
127
+ --leading-4xl: 40px;
128
+ --text-display-1: 40px;
129
+ --leading-display-1: 50px;
130
+ --text-display-2: 52px;
114
131
  --leading-display-2: 62px;
115
132
 
133
+ /* Intent mapping — mono family only on numerics, where it earns its place */
116
134
  --intent-heading-major-size: var(--text-xl);
117
135
  --intent-heading-major-weight: var(--font-weight-bold);
118
136
  --intent-heading-major-leading: var(--leading-xl);
@@ -129,13 +147,14 @@
129
147
  --intent-body-quiet-weight: var(--font-weight-normal);
130
148
  --intent-body-quiet-leading: var(--leading-xs);
131
149
  --intent-caption-size: var(--text-xs);
132
- --intent-caption-weight: var(--font-weight-normal);
150
+ --intent-caption-weight: var(--font-weight-medium);
133
151
  --intent-caption-leading: var(--leading-xs);
134
152
  --intent-numeric-size: var(--text-sm);
135
153
  --intent-numeric-weight: var(--font-weight-bold);
136
154
  --intent-numeric-leading: var(--leading-sm);
137
155
  --intent-numeric-family: var(--font-family-mono);
138
156
 
157
+ /* Density — 4pt rhythm, compact but slightly more breathable than the old 8/12/16 */
139
158
  --space-0: 0px;
140
159
  --space-1: 4px;
141
160
  --space-2: 8px;
@@ -150,162 +169,174 @@
150
169
  --space-11: 44px;
151
170
  --space-12: 48px;
152
171
 
153
- --button-height-sm: 24px;
154
- --button-height-md: 28px;
155
- --button-height-lg: 32px;
156
- --input-height-sm: 24px;
157
- --input-height-md: 28px;
158
- --input-height-lg: 32px;
159
- --row-height-compact: 24px;
160
- --row-height-normal: 28px;
161
- --row-height-spacious: 36px;
162
-
163
- --card-padding-sm: 8px;
164
- --card-padding-md: 12px;
165
- --card-padding-lg: 16px;
166
- --dialog-padding: 20px;
167
- --section-gap: 24px;
168
-
169
- --icon-family: phosphor-fill;
170
- --icon-default-size: 14px;
171
- --icon-stroke-width: 0;
172
+ --button-height-sm: 26px;
173
+ --button-height-md: 30px;
174
+ --button-height-lg: 34px;
175
+ --input-height-sm: 26px;
176
+ --input-height-md: 30px;
177
+ --input-height-lg: 34px;
178
+ --row-height-compact: 30px;
179
+ --row-height-normal: 36px;
180
+ --row-height-spacious: 44px;
181
+
182
+ --card-padding-sm: 12px;
183
+ --card-padding-md: 16px;
184
+ --card-padding-lg: 20px;
185
+ --dialog-padding: 22px;
186
+ --section-gap: 28px;
187
+
188
+ /* Iconography — clean outline (lucide), not the old heavy phosphor-fill */
189
+ --icon-family: lucide;
190
+ --icon-default-size: 15px;
191
+ --icon-stroke-width: 1.5;
172
192
  --icon-color: currentColor;
173
193
 
174
- --elevation-card: none;
175
- --elevation-popover: none;
176
- --elevation-dialog: none;
177
- --elevation-toast: none;
194
+ /* Elevation — per-layer mapping (panels float, popovers/dialogs lift higher) */
195
+ --elevation-card: var(--shadow-sm);
196
+ --elevation-popover: var(--shadow-main);
197
+ --elevation-dialog: var(--shadow-lg);
198
+ --elevation-toast: var(--shadow-main);
178
199
 
179
- --radius-container: 0px;
180
- --radius-interactive: 0px;
200
+ /* Geometry — refined radius + hairline rhythm with intent */
201
+ --radius-container: 6px;
202
+ --radius-interactive: 4px;
181
203
  --radius-pill: 9999px;
182
204
  --border-hairline: 1px;
183
- --border-standard: 2px;
184
- --border-heavy: 3px;
205
+ --border-standard: 1px;
206
+ --border-heavy: 2px;
185
207
 
186
- --transition-fast: 100ms;
187
- --transition-normal: 150ms;
188
- --transition-slow: 200ms;
189
- --transition-timing: linear;
208
+ /* Motion — smooth emphasized-decel + subtle spring (de-mechanized) */
209
+ --transition-fast: 120ms;
210
+ --transition-normal: 180ms;
211
+ --transition-slow: 260ms;
212
+ --transition-timing: cubic-bezier(0.2, 0, 0, 1);
190
213
 
191
214
  --duration-instant: 0ms;
192
- --duration-fast: 100ms;
193
- --duration-normal: 150ms;
194
- --duration-slow: 200ms;
195
- --duration-dramatic: 300ms;
215
+ --duration-fast: 120ms;
216
+ --duration-normal: 180ms;
217
+ --duration-slow: 260ms;
218
+ --duration-dramatic: 420ms;
196
219
  --easing-linear: linear;
197
- --easing-standard: linear;
198
- --easing-emphasized: linear;
199
- --easing-spring: linear;
220
+ --easing-standard: cubic-bezier(0.2, 0, 0, 1);
221
+ --easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
222
+ --easing-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
200
223
 
224
+ /* Interaction — subtle lift (vs old dead-static none) */
201
225
  --hover-scale: 1;
202
- --hover-translate-y: 0;
226
+ --hover-translate-y: -1px;
203
227
  --hover-translate-x: 0;
204
- --active-scale: 1;
228
+ --active-scale: 0.99;
205
229
  --active-translate-y: 0;
206
230
 
207
231
  --focus-ring-width: 2px;
208
- --focus-ring-offset: 0px;
209
- --focus-ring-color: #06b6d4;
232
+ --focus-ring-offset: 2px;
233
+ --focus-ring-color: #0e7490;
210
234
  }
211
235
 
212
236
  /* ==========================================================================
213
237
  * DARK MODE
214
238
  * ========================================================================== */
215
239
  [data-theme="bloomberg-dense-dark"] {
240
+ /* Shadows — deep layered drops carrying the faint cyan data-cockpit glow */
216
241
  --shadow-none: none;
217
- --shadow-sm: none;
218
- --shadow-main: none;
219
- --shadow-lg: none;
220
- --shadow-inner: none;
221
- --shadow-hover: none;
222
- --shadow-active: none;
223
-
242
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
243
+ --shadow-main: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(34, 211, 238, 0.06);
244
+ --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 26px rgba(34, 211, 238, 0.07);
245
+ --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
246
+ --shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(34, 211, 238, 0.12);
247
+ --shadow-active: 0 1px 3px rgba(0, 0, 0, 0.45);
248
+
249
+ /* Radius — small but present (de-boxified) */
224
250
  --radius-none: 0px;
225
- --radius-sm: 0px;
226
- --radius-md: 0px;
227
- --radius-lg: 0px;
228
- --radius-xl: 0px;
251
+ --radius-sm: 3px;
252
+ --radius-md: 4px;
253
+ --radius-lg: 6px;
254
+ --radius-xl: 8px;
229
255
  --radius-full: 9999px;
230
256
 
231
- --border-width: 2px;
257
+ /* Border width — hairline-led */
258
+ --border-width: 1px;
232
259
  --border-width-thin: 1px;
233
- --border-width-thick: 3px;
260
+ --border-width-thick: 2px;
234
261
 
262
+ /* Colors — deep cool-navy canvas, soft-cool foreground, cyan + amber accents */
235
263
  --color-primary: #22d3ee;
236
264
  --color-primary-hover: #67e8f9;
237
- --color-primary-foreground: #0a0e1a;
265
+ --color-primary-foreground: #06131a;
238
266
 
239
- --color-secondary: #131826;
240
- --color-secondary-hover: #1c2236;
241
- --color-secondary-foreground: #c7d2e0;
267
+ --color-secondary: #16233d;
268
+ --color-secondary-hover: #1d2d4c;
269
+ --color-secondary-foreground: #d6e0ef;
242
270
 
243
271
  --color-accent: #fbbf24;
244
- --color-accent-foreground: #0a0e1a;
245
-
246
- --color-muted: #131826;
247
- --color-muted-foreground: #8a98b3;
248
-
249
- --color-background: #0a0e1a;
250
- --color-foreground: #c7d2e0;
251
- --color-card: #0e1322;
252
- --color-card-foreground: #c7d2e0;
253
- --color-surface: #131826;
254
- --color-border: #22d3ee;
255
- --color-input: #22d3ee;
272
+ --color-accent-foreground: #1a1206;
273
+
274
+ --color-muted: #131f36;
275
+ --color-muted-foreground: #8e9db8;
276
+
277
+ --color-background: #0a0f1c;
278
+ --color-foreground: #e6edf7;
279
+ --color-card: #0f1626;
280
+ --color-card-foreground: #e6edf7;
281
+ --color-surface: #131f36;
282
+ --color-border: #20304e;
283
+ --color-input: #2d4163;
256
284
  --color-ring: #22d3ee;
257
285
 
258
- --color-table-header: #131826;
259
- --color-table-border: #22d3ee;
260
- --color-table-row-hover: #131826;
261
- --color-surface-hover: #1c2236;
262
- --color-border-hover: #67e8f9;
263
- --color-placeholder: #4a5772;
286
+ --color-table-header: #131f36;
287
+ --color-table-border: #20304e;
288
+ --color-table-row-hover: #16233d;
289
+ --color-surface-hover: #1d2d4c;
290
+ --color-border-hover: #36506f;
291
+ --color-placeholder: #5a6b88;
264
292
 
265
293
  --color-error: #f87171;
266
- --color-error-foreground: #0a0e1a;
267
- --color-success: #4ade80;
268
- --color-success-foreground: #0a0e1a;
294
+ --color-error-foreground: #1a0a0a;
295
+ --color-success: #34d399;
296
+ --color-success-foreground: #06170f;
269
297
  --color-warning: #fbbf24;
270
- --color-warning-foreground: #0a0e1a;
271
- --color-info: #22d3ee;
272
- --color-info-foreground: #0a0e1a;
298
+ --color-warning-foreground: #1a1206;
299
+ --color-info: #38bdf8;
300
+ --color-info-foreground: #061318;
273
301
 
302
+ /* Typography — clean grotesque body, mono reserved for numerics */
274
303
  --font-family:
275
- "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
304
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
276
305
  --font-family-display:
277
- "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
306
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
278
307
  --font-family-body:
279
- "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
308
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
280
309
  --font-family-mono:
281
- "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
310
+ "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
282
311
  --font-weight-normal: 400;
283
312
  --font-weight-medium: 500;
284
- --font-weight-bold: 700;
285
- --letter-spacing: 0;
286
- --line-height: 1.3;
287
-
288
- --text-xs: 10px;
289
- --leading-xs: 13px;
290
- --text-sm: 12px;
291
- --leading-sm: 16px;
313
+ --font-weight-bold: 600;
314
+ --letter-spacing: -0.011em;
315
+ --line-height: 1.45;
316
+
317
+ /* Dense type scale */
318
+ --text-xs: 11px;
319
+ --leading-xs: 15px;
320
+ --text-sm: 13px;
321
+ --leading-sm: 18px;
292
322
  --text-base: 14px;
293
- --leading-base: 18px;
323
+ --leading-base: 20px;
294
324
  --text-lg: 16px;
295
- --leading-lg: 20px;
325
+ --leading-lg: 22px;
296
326
  --text-xl: 18px;
297
- --leading-xl: 23px;
298
- --text-2xl: 20px;
299
- --leading-2xl: 26px;
300
- --text-3xl: 24px;
301
- --leading-3xl: 31px;
302
- --text-4xl: 30px;
303
- --leading-4xl: 39px;
304
- --text-display-1: 38px;
305
- --leading-display-1: 49px;
306
- --text-display-2: 48px;
327
+ --leading-xl: 24px;
328
+ --text-2xl: 21px;
329
+ --leading-2xl: 27px;
330
+ --text-3xl: 25px;
331
+ --leading-3xl: 32px;
332
+ --text-4xl: 31px;
333
+ --leading-4xl: 40px;
334
+ --text-display-1: 40px;
335
+ --leading-display-1: 50px;
336
+ --text-display-2: 52px;
307
337
  --leading-display-2: 62px;
308
338
 
339
+ /* Intent mapping — mono family only on numerics */
309
340
  --intent-heading-major-size: var(--text-xl);
310
341
  --intent-heading-major-weight: var(--font-weight-bold);
311
342
  --intent-heading-major-leading: var(--leading-xl);
@@ -322,13 +353,14 @@
322
353
  --intent-body-quiet-weight: var(--font-weight-normal);
323
354
  --intent-body-quiet-leading: var(--leading-xs);
324
355
  --intent-caption-size: var(--text-xs);
325
- --intent-caption-weight: var(--font-weight-normal);
356
+ --intent-caption-weight: var(--font-weight-medium);
326
357
  --intent-caption-leading: var(--leading-xs);
327
358
  --intent-numeric-size: var(--text-sm);
328
359
  --intent-numeric-weight: var(--font-weight-bold);
329
360
  --intent-numeric-leading: var(--leading-sm);
330
361
  --intent-numeric-family: var(--font-family-mono);
331
362
 
363
+ /* Density — 4pt rhythm */
332
364
  --space-0: 0px;
333
365
  --space-1: 4px;
334
366
  --space-2: 8px;
@@ -343,61 +375,66 @@
343
375
  --space-11: 44px;
344
376
  --space-12: 48px;
345
377
 
346
- --button-height-sm: 24px;
347
- --button-height-md: 28px;
348
- --button-height-lg: 32px;
349
- --input-height-sm: 24px;
350
- --input-height-md: 28px;
351
- --input-height-lg: 32px;
352
- --row-height-compact: 24px;
353
- --row-height-normal: 28px;
354
- --row-height-spacious: 36px;
355
-
356
- --card-padding-sm: 8px;
357
- --card-padding-md: 12px;
358
- --card-padding-lg: 16px;
359
- --dialog-padding: 20px;
360
- --section-gap: 24px;
361
-
362
- --icon-family: phosphor-fill;
363
- --icon-default-size: 14px;
364
- --icon-stroke-width: 0;
378
+ --button-height-sm: 26px;
379
+ --button-height-md: 30px;
380
+ --button-height-lg: 34px;
381
+ --input-height-sm: 26px;
382
+ --input-height-md: 30px;
383
+ --input-height-lg: 34px;
384
+ --row-height-compact: 30px;
385
+ --row-height-normal: 36px;
386
+ --row-height-spacious: 44px;
387
+
388
+ --card-padding-sm: 12px;
389
+ --card-padding-md: 16px;
390
+ --card-padding-lg: 20px;
391
+ --dialog-padding: 22px;
392
+ --section-gap: 28px;
393
+
394
+ /* Iconography — clean outline (lucide) */
395
+ --icon-family: lucide;
396
+ --icon-default-size: 15px;
397
+ --icon-stroke-width: 1.5;
365
398
  --icon-color: currentColor;
366
399
 
367
- --elevation-card: none;
368
- --elevation-popover: none;
369
- --elevation-dialog: none;
370
- --elevation-toast: none;
400
+ /* Elevation — per-layer mapping */
401
+ --elevation-card: var(--shadow-sm);
402
+ --elevation-popover: var(--shadow-main);
403
+ --elevation-dialog: var(--shadow-lg);
404
+ --elevation-toast: var(--shadow-main);
371
405
 
372
- --radius-container: 0px;
373
- --radius-interactive: 0px;
406
+ /* Geometry — refined radius + hairline rhythm */
407
+ --radius-container: 6px;
408
+ --radius-interactive: 4px;
374
409
  --radius-pill: 9999px;
375
410
  --border-hairline: 1px;
376
- --border-standard: 2px;
377
- --border-heavy: 3px;
411
+ --border-standard: 1px;
412
+ --border-heavy: 2px;
378
413
 
379
- --transition-fast: 100ms;
380
- --transition-normal: 150ms;
381
- --transition-slow: 200ms;
382
- --transition-timing: linear;
414
+ /* Motion — smooth emphasized-decel + subtle spring */
415
+ --transition-fast: 120ms;
416
+ --transition-normal: 180ms;
417
+ --transition-slow: 260ms;
418
+ --transition-timing: cubic-bezier(0.2, 0, 0, 1);
383
419
 
384
420
  --duration-instant: 0ms;
385
- --duration-fast: 100ms;
386
- --duration-normal: 150ms;
387
- --duration-slow: 200ms;
388
- --duration-dramatic: 300ms;
421
+ --duration-fast: 120ms;
422
+ --duration-normal: 180ms;
423
+ --duration-slow: 260ms;
424
+ --duration-dramatic: 420ms;
389
425
  --easing-linear: linear;
390
- --easing-standard: linear;
391
- --easing-emphasized: linear;
392
- --easing-spring: linear;
426
+ --easing-standard: cubic-bezier(0.2, 0, 0, 1);
427
+ --easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
428
+ --easing-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
393
429
 
430
+ /* Interaction — subtle lift */
394
431
  --hover-scale: 1;
395
- --hover-translate-y: 0;
432
+ --hover-translate-y: -1px;
396
433
  --hover-translate-x: 0;
397
- --active-scale: 1;
434
+ --active-scale: 0.99;
398
435
  --active-translate-y: 0;
399
436
 
400
437
  --focus-ring-width: 2px;
401
- --focus-ring-offset: 0px;
438
+ --focus-ring-offset: 2px;
402
439
  --focus-ring-color: #22d3ee;
403
440
  }