@almadar/ui 5.2.1 → 5.3.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 (5) hide show
  1. package/package.json +1 -1
  2. package/themes/bloomberg-dense.css +403 -0
  3. package/themes/index.css +3 -0
  4. package/themes/linear-clean.css +403 -0
  5. package/themes/notion-editorial.css +403 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@almadar/ui",
3
- "version": "5.2.1",
3
+ "version": "5.3.0",
4
4
  "description": "React UI components, hooks, and providers for Almadar",
5
5
  "type": "module",
6
6
  "sideEffects": [
package/themes/bloomberg-dense.css ADDED
@@ -0,0 +1,403 @@
1
+ /**
2
+ * Bloomberg Dense Theme
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.
7
+ *
8
+ * 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)
16
+ * Illustration text-only (no imagery in empty states)
17
+ */
18
+
19
+ /* ==========================================================================
20
+ * LIGHT MODE
21
+ * ========================================================================== */
22
+ [data-theme="bloomberg-dense-light"] {
23
+ --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
+
31
+ --radius-none: 0px;
32
+ --radius-sm: 0px;
33
+ --radius-md: 0px;
34
+ --radius-lg: 0px;
35
+ --radius-xl: 0px;
36
+ --radius-full: 9999px;
37
+
38
+ --border-width: 2px;
39
+ --border-width-thin: 1px;
40
+ --border-width-thick: 3px;
41
+
42
+ --color-primary: #06b6d4;
43
+ --color-primary-hover: #0891b2;
44
+ --color-primary-foreground: #0a0e1a;
45
+
46
+ --color-secondary: #e4e9f2;
47
+ --color-secondary-hover: #d6dce8;
48
+ --color-secondary-foreground: #0a0e1a;
49
+
50
+ --color-accent: #f59e0b;
51
+ --color-accent-foreground: #0a0e1a;
52
+
53
+ --color-muted: #e4e9f2;
54
+ --color-muted-foreground: #4a5568;
55
+
56
+ --color-background: #f5f7fa;
57
+ --color-foreground: #0a0e1a;
58
+ --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;
73
+ --color-error-foreground: #ffffff;
74
+ --color-success: #16a34a;
75
+ --color-success-foreground: #ffffff;
76
+ --color-warning: #f59e0b;
77
+ --color-warning-foreground: #0a0e1a;
78
+ --color-info: #06b6d4;
79
+ --color-info-foreground: #0a0e1a;
80
+
81
+ --font-family:
82
+ "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
83
+ --font-family-display:
84
+ "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
85
+ --font-family-body:
86
+ "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
87
+ --font-family-mono:
88
+ "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
89
+ --font-weight-normal: 400;
90
+ --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;
99
+ --text-base: 14px;
100
+ --leading-base: 18px;
101
+ --text-lg: 16px;
102
+ --leading-lg: 20px;
103
+ --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;
114
+ --leading-display-2: 62px;
115
+
116
+ --intent-heading-major-size: var(--text-xl);
117
+ --intent-heading-major-weight: var(--font-weight-bold);
118
+ --intent-heading-major-leading: var(--leading-xl);
119
+ --intent-heading-minor-size: var(--text-base);
120
+ --intent-heading-minor-weight: var(--font-weight-bold);
121
+ --intent-heading-minor-leading: var(--leading-base);
122
+ --intent-body-emphasis-size: var(--text-sm);
123
+ --intent-body-emphasis-weight: var(--font-weight-medium);
124
+ --intent-body-emphasis-leading: var(--leading-sm);
125
+ --intent-body-default-size: var(--text-sm);
126
+ --intent-body-default-weight: var(--font-weight-normal);
127
+ --intent-body-default-leading: var(--leading-sm);
128
+ --intent-body-quiet-size: var(--text-xs);
129
+ --intent-body-quiet-weight: var(--font-weight-normal);
130
+ --intent-body-quiet-leading: var(--leading-xs);
131
+ --intent-caption-size: var(--text-xs);
132
+ --intent-caption-weight: var(--font-weight-normal);
133
+ --intent-caption-leading: var(--leading-xs);
134
+ --intent-numeric-size: var(--text-sm);
135
+ --intent-numeric-weight: var(--font-weight-bold);
136
+ --intent-numeric-leading: var(--leading-sm);
137
+ --intent-numeric-family: var(--font-family-mono);
138
+
139
+ --space-0: 0px;
140
+ --space-1: 4px;
141
+ --space-2: 8px;
142
+ --space-3: 12px;
143
+ --space-4: 16px;
144
+ --space-5: 20px;
145
+ --space-6: 24px;
146
+ --space-7: 28px;
147
+ --space-8: 32px;
148
+ --space-9: 36px;
149
+ --space-10: 40px;
150
+ --space-11: 44px;
151
+ --space-12: 48px;
152
+
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
+ --icon-color: currentColor;
173
+
174
+ --elevation-card: none;
175
+ --elevation-popover: none;
176
+ --elevation-dialog: none;
177
+ --elevation-toast: none;
178
+
179
+ --radius-container: 0px;
180
+ --radius-interactive: 0px;
181
+ --radius-pill: 9999px;
182
+ --border-hairline: 1px;
183
+ --border-standard: 2px;
184
+ --border-heavy: 3px;
185
+
186
+ --transition-fast: 100ms;
187
+ --transition-normal: 150ms;
188
+ --transition-slow: 200ms;
189
+ --transition-timing: linear;
190
+
191
+ --duration-instant: 0ms;
192
+ --duration-fast: 100ms;
193
+ --duration-normal: 150ms;
194
+ --duration-slow: 200ms;
195
+ --duration-dramatic: 300ms;
196
+ --easing-linear: linear;
197
+ --easing-standard: linear;
198
+ --easing-emphasized: linear;
199
+ --easing-spring: linear;
200
+
201
+ --hover-scale: 1;
202
+ --hover-translate-y: 0;
203
+ --hover-translate-x: 0;
204
+ --active-scale: 1;
205
+ --active-translate-y: 0;
206
+
207
+ --focus-ring-width: 2px;
208
+ --focus-ring-offset: 0px;
209
+ --focus-ring-color: #06b6d4;
210
+ }
211
+
212
+ /* ==========================================================================
213
+ * DARK MODE
214
+ * ========================================================================== */
215
+ [data-theme="bloomberg-dense-dark"] {
216
+ --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
+
224
+ --radius-none: 0px;
225
+ --radius-sm: 0px;
226
+ --radius-md: 0px;
227
+ --radius-lg: 0px;
228
+ --radius-xl: 0px;
229
+ --radius-full: 9999px;
230
+
231
+ --border-width: 2px;
232
+ --border-width-thin: 1px;
233
+ --border-width-thick: 3px;
234
+
235
+ --color-primary: #22d3ee;
236
+ --color-primary-hover: #67e8f9;
237
+ --color-primary-foreground: #0a0e1a;
238
+
239
+ --color-secondary: #131826;
240
+ --color-secondary-hover: #1c2236;
241
+ --color-secondary-foreground: #c7d2e0;
242
+
243
+ --color-accent: #fbbf24;
244
+ --color-accent-foreground: #0a0e1a;
245
+
246
+ --color-muted: #131826;
247
+ --color-muted-foreground: #6b7a94;
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;
256
+ --color-ring: #22d3ee;
257
+
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;
264
+
265
+ --color-error: #f87171;
266
+ --color-error-foreground: #0a0e1a;
267
+ --color-success: #4ade80;
268
+ --color-success-foreground: #0a0e1a;
269
+ --color-warning: #fbbf24;
270
+ --color-warning-foreground: #0a0e1a;
271
+ --color-info: #22d3ee;
272
+ --color-info-foreground: #0a0e1a;
273
+
274
+ --font-family:
275
+ "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
276
+ --font-family-display:
277
+ "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
278
+ --font-family-body:
279
+ "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
280
+ --font-family-mono:
281
+ "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;
282
+ --font-weight-normal: 400;
283
+ --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;
292
+ --text-base: 14px;
293
+ --leading-base: 18px;
294
+ --text-lg: 16px;
295
+ --leading-lg: 20px;
296
+ --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;
307
+ --leading-display-2: 62px;
308
+
309
+ --intent-heading-major-size: var(--text-xl);
310
+ --intent-heading-major-weight: var(--font-weight-bold);
311
+ --intent-heading-major-leading: var(--leading-xl);
312
+ --intent-heading-minor-size: var(--text-base);
313
+ --intent-heading-minor-weight: var(--font-weight-bold);
314
+ --intent-heading-minor-leading: var(--leading-base);
315
+ --intent-body-emphasis-size: var(--text-sm);
316
+ --intent-body-emphasis-weight: var(--font-weight-medium);
317
+ --intent-body-emphasis-leading: var(--leading-sm);
318
+ --intent-body-default-size: var(--text-sm);
319
+ --intent-body-default-weight: var(--font-weight-normal);
320
+ --intent-body-default-leading: var(--leading-sm);
321
+ --intent-body-quiet-size: var(--text-xs);
322
+ --intent-body-quiet-weight: var(--font-weight-normal);
323
+ --intent-body-quiet-leading: var(--leading-xs);
324
+ --intent-caption-size: var(--text-xs);
325
+ --intent-caption-weight: var(--font-weight-normal);
326
+ --intent-caption-leading: var(--leading-xs);
327
+ --intent-numeric-size: var(--text-sm);
328
+ --intent-numeric-weight: var(--font-weight-bold);
329
+ --intent-numeric-leading: var(--leading-sm);
330
+ --intent-numeric-family: var(--font-family-mono);
331
+
332
+ --space-0: 0px;
333
+ --space-1: 4px;
334
+ --space-2: 8px;
335
+ --space-3: 12px;
336
+ --space-4: 16px;
337
+ --space-5: 20px;
338
+ --space-6: 24px;
339
+ --space-7: 28px;
340
+ --space-8: 32px;
341
+ --space-9: 36px;
342
+ --space-10: 40px;
343
+ --space-11: 44px;
344
+ --space-12: 48px;
345
+
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;
365
+ --icon-color: currentColor;
366
+
367
+ --elevation-card: none;
368
+ --elevation-popover: none;
369
+ --elevation-dialog: none;
370
+ --elevation-toast: none;
371
+
372
+ --radius-container: 0px;
373
+ --radius-interactive: 0px;
374
+ --radius-pill: 9999px;
375
+ --border-hairline: 1px;
376
+ --border-standard: 2px;
377
+ --border-heavy: 3px;
378
+
379
+ --transition-fast: 100ms;
380
+ --transition-normal: 150ms;
381
+ --transition-slow: 200ms;
382
+ --transition-timing: linear;
383
+
384
+ --duration-instant: 0ms;
385
+ --duration-fast: 100ms;
386
+ --duration-normal: 150ms;
387
+ --duration-slow: 200ms;
388
+ --duration-dramatic: 300ms;
389
+ --easing-linear: linear;
390
+ --easing-standard: linear;
391
+ --easing-emphasized: linear;
392
+ --easing-spring: linear;
393
+
394
+ --hover-scale: 1;
395
+ --hover-translate-y: 0;
396
+ --hover-translate-x: 0;
397
+ --active-scale: 1;
398
+ --active-translate-y: 0;
399
+
400
+ --focus-ring-width: 2px;
401
+ --focus-ring-offset: 0px;
402
+ --focus-ring-color: #22d3ee;
403
+ }
package/themes/index.css CHANGED
@@ -46,6 +46,9 @@
46
46
  @import "./terminal.css";
47
47
  @import "./atelier.css";
48
48
  @import "./kiosk.css";
49
+ @import "./linear-clean.css";
50
+ @import "./notion-editorial.css";
51
+ @import "./bloomberg-dense.css";
49
52
 
50
53
  /**
51
54
  * Minimal element reset for @almadar/ui components.
package/themes/linear-clean.css ADDED
@@ -0,0 +1,403 @@
1
+ /**
2
+ * Linear Clean Theme
3
+ *
4
+ * Personality: minimalist product-tool aesthetic — Linear/Stripe lineage. Warm-grey
5
+ * neutrals, a single confident blue accent, snappy linear motion, and outline icons.
6
+ * Tight 4pt rhythm and small button heights signal speed without being cramped.
7
+ *
8
+ * Spec axes (per docs/Almadar_Std_Variations.md §2.4):
9
+ * Color warm-grey + single blue accent
10
+ * Density compact (4pt rhythm, 28/32/36 buttons)
11
+ * Type tech (Inter everywhere, mono numerics, tight leading)
12
+ * Geometry soft (4/8/12 radius, hairline borders)
13
+ * Elevation flat (no shadows, borders only)
14
+ * Motion snappy (linear, 80/120/180ms)
15
+ * Iconography outline (lucide, stroke 1.5)
16
+ * Illustration minimal (icon+text empty states)
17
+ */
18
+
19
+ /* ==========================================================================
20
+ * LIGHT MODE
21
+ * ========================================================================== */
22
+ [data-theme="linear-clean-light"] {
23
+ --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
+
31
+ --radius-none: 0px;
32
+ --radius-sm: 4px;
33
+ --radius-md: 8px;
34
+ --radius-lg: 12px;
35
+ --radius-xl: 12px;
36
+ --radius-full: 9999px;
37
+
38
+ --border-width: 1px;
39
+ --border-width-thin: 1px;
40
+ --border-width-thick: 1px;
41
+
42
+ --color-primary: #0066ff;
43
+ --color-primary-hover: #0052cc;
44
+ --color-primary-foreground: #ffffff;
45
+
46
+ --color-secondary: #f4f4f2;
47
+ --color-secondary-hover: #ececea;
48
+ --color-secondary-foreground: #0a0a0a;
49
+
50
+ --color-accent: #0066ff;
51
+ --color-accent-foreground: #ffffff;
52
+
53
+ --color-muted: #f4f4f2;
54
+ --color-muted-foreground: #6b6b66;
55
+
56
+ --color-background: #fafafa;
57
+ --color-foreground: #0a0a0a;
58
+ --color-card: #ffffff;
59
+ --color-card-foreground: #0a0a0a;
60
+ --color-surface: #f7f7f5;
61
+ --color-border: #e6e6e2;
62
+ --color-input: #d8d8d4;
63
+ --color-ring: #0066ff;
64
+
65
+ --color-table-header: #f7f7f5;
66
+ --color-table-border: #e6e6e2;
67
+ --color-table-row-hover: #f4f4f2;
68
+ --color-surface-hover: #ececea;
69
+ --color-border-hover: #c9c9c4;
70
+ --color-placeholder: #9a998f;
71
+
72
+ --color-error: #d92d20;
73
+ --color-error-foreground: #ffffff;
74
+ --color-success: #079455;
75
+ --color-success-foreground: #ffffff;
76
+ --color-warning: #b54708;
77
+ --color-warning-foreground: #ffffff;
78
+ --color-info: #0066ff;
79
+ --color-info-foreground: #ffffff;
80
+
81
+ --font-family:
82
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
83
+ --font-family-display:
84
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
85
+ --font-family-body:
86
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
87
+ --font-family-mono:
88
+ "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
89
+ --font-weight-normal: 400;
90
+ --font-weight-medium: 500;
91
+ --font-weight-bold: 600;
92
+ --letter-spacing: -0.01em;
93
+ --line-height: 1.4;
94
+
95
+ --text-xs: 11px;
96
+ --leading-xs: 14px;
97
+ --text-sm: 13px;
98
+ --leading-sm: 18px;
99
+ --text-base: 14px;
100
+ --leading-base: 20px;
101
+ --text-lg: 16px;
102
+ --leading-lg: 22px;
103
+ --text-xl: 18px;
104
+ --leading-xl: 24px;
105
+ --text-2xl: 22px;
106
+ --leading-2xl: 28px;
107
+ --text-3xl: 28px;
108
+ --leading-3xl: 34px;
109
+ --text-4xl: 34px;
110
+ --leading-4xl: 40px;
111
+ --text-display-1: 44px;
112
+ --leading-display-1: 48px;
113
+ --text-display-2: 56px;
114
+ --leading-display-2: 60px;
115
+
116
+ --intent-heading-major-size: var(--text-2xl);
117
+ --intent-heading-major-weight: var(--font-weight-bold);
118
+ --intent-heading-major-leading: var(--leading-2xl);
119
+ --intent-heading-minor-size: var(--text-lg);
120
+ --intent-heading-minor-weight: var(--font-weight-bold);
121
+ --intent-heading-minor-leading: var(--leading-lg);
122
+ --intent-body-emphasis-size: var(--text-sm);
123
+ --intent-body-emphasis-weight: var(--font-weight-medium);
124
+ --intent-body-emphasis-leading: var(--leading-sm);
125
+ --intent-body-default-size: var(--text-sm);
126
+ --intent-body-default-weight: var(--font-weight-normal);
127
+ --intent-body-default-leading: var(--leading-sm);
128
+ --intent-body-quiet-size: var(--text-xs);
129
+ --intent-body-quiet-weight: var(--font-weight-normal);
130
+ --intent-body-quiet-leading: var(--leading-xs);
131
+ --intent-caption-size: var(--text-xs);
132
+ --intent-caption-weight: var(--font-weight-medium);
133
+ --intent-caption-leading: var(--leading-xs);
134
+ --intent-numeric-size: var(--text-sm);
135
+ --intent-numeric-weight: var(--font-weight-medium);
136
+ --intent-numeric-leading: var(--leading-sm);
137
+ --intent-numeric-family: var(--font-family-mono);
138
+
139
+ --space-0: 0px;
140
+ --space-1: 4px;
141
+ --space-2: 8px;
142
+ --space-3: 12px;
143
+ --space-4: 16px;
144
+ --space-5: 20px;
145
+ --space-6: 24px;
146
+ --space-7: 28px;
147
+ --space-8: 32px;
148
+ --space-9: 36px;
149
+ --space-10: 40px;
150
+ --space-11: 44px;
151
+ --space-12: 48px;
152
+
153
+ --button-height-sm: 28px;
154
+ --button-height-md: 32px;
155
+ --button-height-lg: 36px;
156
+ --input-height-sm: 28px;
157
+ --input-height-md: 32px;
158
+ --input-height-lg: 36px;
159
+ --row-height-compact: 32px;
160
+ --row-height-normal: 36px;
161
+ --row-height-spacious: 44px;
162
+
163
+ --card-padding-sm: 12px;
164
+ --card-padding-md: 16px;
165
+ --card-padding-lg: 20px;
166
+ --dialog-padding: 24px;
167
+ --section-gap: 32px;
168
+
169
+ --icon-family: lucide;
170
+ --icon-default-size: 16px;
171
+ --icon-stroke-width: 1.5;
172
+ --icon-color: currentColor;
173
+
174
+ --elevation-card: none;
175
+ --elevation-popover: none;
176
+ --elevation-dialog: none;
177
+ --elevation-toast: none;
178
+
179
+ --radius-container: 8px;
180
+ --radius-interactive: 6px;
181
+ --radius-pill: 9999px;
182
+ --border-hairline: 1px;
183
+ --border-standard: 1px;
184
+ --border-heavy: 1px;
185
+
186
+ --transition-fast: 80ms;
187
+ --transition-normal: 120ms;
188
+ --transition-slow: 180ms;
189
+ --transition-timing: linear;
190
+
191
+ --duration-instant: 0ms;
192
+ --duration-fast: 80ms;
193
+ --duration-normal: 120ms;
194
+ --duration-slow: 180ms;
195
+ --duration-dramatic: 240ms;
196
+ --easing-linear: linear;
197
+ --easing-standard: linear;
198
+ --easing-emphasized: linear;
199
+ --easing-spring: linear;
200
+
201
+ --hover-scale: 1;
202
+ --hover-translate-y: 0;
203
+ --hover-translate-x: 0;
204
+ --active-scale: 1;
205
+ --active-translate-y: 0;
206
+
207
+ --focus-ring-width: 2px;
208
+ --focus-ring-offset: 2px;
209
+ --focus-ring-color: #0066ff;
210
+ }
211
+
212
+ /* ==========================================================================
213
+ * DARK MODE
214
+ * ========================================================================== */
215
+ [data-theme="linear-clean-dark"] {
216
+ --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
+
224
+ --radius-none: 0px;
225
+ --radius-sm: 4px;
226
+ --radius-md: 8px;
227
+ --radius-lg: 12px;
228
+ --radius-xl: 12px;
229
+ --radius-full: 9999px;
230
+
231
+ --border-width: 1px;
232
+ --border-width-thin: 1px;
233
+ --border-width-thick: 1px;
234
+
235
+ --color-primary: #4d8bff;
236
+ --color-primary-hover: #6ea2ff;
237
+ --color-primary-foreground: #0a0a0c;
238
+
239
+ --color-secondary: #18181b;
240
+ --color-secondary-hover: #222226;
241
+ --color-secondary-foreground: #fafafa;
242
+
243
+ --color-accent: #4d8bff;
244
+ --color-accent-foreground: #0a0a0c;
245
+
246
+ --color-muted: #18181b;
247
+ --color-muted-foreground: #8b8b90;
248
+
249
+ --color-background: #0a0a0c;
250
+ --color-foreground: #fafafa;
251
+ --color-card: #121214;
252
+ --color-card-foreground: #fafafa;
253
+ --color-surface: #18181b;
254
+ --color-border: #26262b;
255
+ --color-input: #2e2e34;
256
+ --color-ring: #4d8bff;
257
+
258
+ --color-table-header: #18181b;
259
+ --color-table-border: #26262b;
260
+ --color-table-row-hover: #161618;
261
+ --color-surface-hover: #222226;
262
+ --color-border-hover: #3a3a40;
263
+ --color-placeholder: #6b6b70;
264
+
265
+ --color-error: #f97066;
266
+ --color-error-foreground: #0a0a0c;
267
+ --color-success: #47cd89;
268
+ --color-success-foreground: #0a0a0c;
269
+ --color-warning: #fdb022;
270
+ --color-warning-foreground: #0a0a0c;
271
+ --color-info: #4d8bff;
272
+ --color-info-foreground: #0a0a0c;
273
+
274
+ --font-family:
275
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
276
+ --font-family-display:
277
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
278
+ --font-family-body:
279
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
280
+ --font-family-mono:
281
+ "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
282
+ --font-weight-normal: 400;
283
+ --font-weight-medium: 500;
284
+ --font-weight-bold: 600;
285
+ --letter-spacing: -0.01em;
286
+ --line-height: 1.4;
287
+
288
+ --text-xs: 11px;
289
+ --leading-xs: 14px;
290
+ --text-sm: 13px;
291
+ --leading-sm: 18px;
292
+ --text-base: 14px;
293
+ --leading-base: 20px;
294
+ --text-lg: 16px;
295
+ --leading-lg: 22px;
296
+ --text-xl: 18px;
297
+ --leading-xl: 24px;
298
+ --text-2xl: 22px;
299
+ --leading-2xl: 28px;
300
+ --text-3xl: 28px;
301
+ --leading-3xl: 34px;
302
+ --text-4xl: 34px;
303
+ --leading-4xl: 40px;
304
+ --text-display-1: 44px;
305
+ --leading-display-1: 48px;
306
+ --text-display-2: 56px;
307
+ --leading-display-2: 60px;
308
+
309
+ --intent-heading-major-size: var(--text-2xl);
310
+ --intent-heading-major-weight: var(--font-weight-bold);
311
+ --intent-heading-major-leading: var(--leading-2xl);
312
+ --intent-heading-minor-size: var(--text-lg);
313
+ --intent-heading-minor-weight: var(--font-weight-bold);
314
+ --intent-heading-minor-leading: var(--leading-lg);
315
+ --intent-body-emphasis-size: var(--text-sm);
316
+ --intent-body-emphasis-weight: var(--font-weight-medium);
317
+ --intent-body-emphasis-leading: var(--leading-sm);
318
+ --intent-body-default-size: var(--text-sm);
319
+ --intent-body-default-weight: var(--font-weight-normal);
320
+ --intent-body-default-leading: var(--leading-sm);
321
+ --intent-body-quiet-size: var(--text-xs);
322
+ --intent-body-quiet-weight: var(--font-weight-normal);
323
+ --intent-body-quiet-leading: var(--leading-xs);
324
+ --intent-caption-size: var(--text-xs);
325
+ --intent-caption-weight: var(--font-weight-medium);
326
+ --intent-caption-leading: var(--leading-xs);
327
+ --intent-numeric-size: var(--text-sm);
328
+ --intent-numeric-weight: var(--font-weight-medium);
329
+ --intent-numeric-leading: var(--leading-sm);
330
+ --intent-numeric-family: var(--font-family-mono);
331
+
332
+ --space-0: 0px;
333
+ --space-1: 4px;
334
+ --space-2: 8px;
335
+ --space-3: 12px;
336
+ --space-4: 16px;
337
+ --space-5: 20px;
338
+ --space-6: 24px;
339
+ --space-7: 28px;
340
+ --space-8: 32px;
341
+ --space-9: 36px;
342
+ --space-10: 40px;
343
+ --space-11: 44px;
344
+ --space-12: 48px;
345
+
346
+ --button-height-sm: 28px;
347
+ --button-height-md: 32px;
348
+ --button-height-lg: 36px;
349
+ --input-height-sm: 28px;
350
+ --input-height-md: 32px;
351
+ --input-height-lg: 36px;
352
+ --row-height-compact: 32px;
353
+ --row-height-normal: 36px;
354
+ --row-height-spacious: 44px;
355
+
356
+ --card-padding-sm: 12px;
357
+ --card-padding-md: 16px;
358
+ --card-padding-lg: 20px;
359
+ --dialog-padding: 24px;
360
+ --section-gap: 32px;
361
+
362
+ --icon-family: lucide;
363
+ --icon-default-size: 16px;
364
+ --icon-stroke-width: 1.5;
365
+ --icon-color: currentColor;
366
+
367
+ --elevation-card: none;
368
+ --elevation-popover: none;
369
+ --elevation-dialog: none;
370
+ --elevation-toast: none;
371
+
372
+ --radius-container: 8px;
373
+ --radius-interactive: 6px;
374
+ --radius-pill: 9999px;
375
+ --border-hairline: 1px;
376
+ --border-standard: 1px;
377
+ --border-heavy: 1px;
378
+
379
+ --transition-fast: 80ms;
380
+ --transition-normal: 120ms;
381
+ --transition-slow: 180ms;
382
+ --transition-timing: linear;
383
+
384
+ --duration-instant: 0ms;
385
+ --duration-fast: 80ms;
386
+ --duration-normal: 120ms;
387
+ --duration-slow: 180ms;
388
+ --duration-dramatic: 240ms;
389
+ --easing-linear: linear;
390
+ --easing-standard: linear;
391
+ --easing-emphasized: linear;
392
+ --easing-spring: linear;
393
+
394
+ --hover-scale: 1;
395
+ --hover-translate-y: 0;
396
+ --hover-translate-x: 0;
397
+ --active-scale: 1;
398
+ --active-translate-y: 0;
399
+
400
+ --focus-ring-width: 2px;
401
+ --focus-ring-offset: 2px;
402
+ --focus-ring-color: #4d8bff;
403
+ }
package/themes/notion-editorial.css ADDED
@@ -0,0 +1,403 @@
1
+ /**
2
+ * Notion Editorial Theme
3
+ *
4
+ * Personality: warm editorial document feel — Notion / Medium / NYT-lineage. Serif
5
+ * display for headings, generous 8pt rhythm, soft Material-style shadows, organic
6
+ * ease-out motion, duotone phosphor icons.
7
+ *
8
+ * Spec axes (per docs/Almadar_Std_Variations.md §2.4):
9
+ * Color warm off-white + dark slate ink
10
+ * Density spacious (8pt rhythm, 36/44/52 buttons)
11
+ * Type editorial (Fraunces serif display + Inter body, 1.7 leading)
12
+ * Geometry soft (8/12/16 radius, thin borders)
13
+ * Elevation shadowed (Material 1-5 shadows)
14
+ * Motion organic (cubic-bezier ease-out, 200/350/500ms)
15
+ * Iconography duotone (phosphor-duotone)
16
+ * Illustration illustrated (svg illustration empty states)
17
+ */
18
+
19
+ /* ==========================================================================
20
+ * LIGHT MODE
21
+ * ========================================================================== */
22
+ [data-theme="notion-editorial-light"] {
23
+ --shadow-none: none;
24
+ --shadow-sm: 0 1px 2px rgba(25, 25, 25, 0.06);
25
+ --shadow-main: 0 2px 6px rgba(25, 25, 25, 0.08), 0 1px 2px rgba(25, 25, 25, 0.04);
26
+ --shadow-lg: 0 10px 24px rgba(25, 25, 25, 0.10), 0 4px 8px rgba(25, 25, 25, 0.06);
27
+ --shadow-inner: inset 0 1px 2px rgba(25, 25, 25, 0.06);
28
+ --shadow-hover: 0 4px 12px rgba(25, 25, 25, 0.10);
29
+ --shadow-active: 0 1px 2px rgba(25, 25, 25, 0.06);
30
+
31
+ --radius-none: 0px;
32
+ --radius-sm: 6px;
33
+ --radius-md: 10px;
34
+ --radius-lg: 14px;
35
+ --radius-xl: 20px;
36
+ --radius-full: 9999px;
37
+
38
+ --border-width: 1px;
39
+ --border-width-thin: 1px;
40
+ --border-width-thick: 1px;
41
+
42
+ --color-primary: #ff6b35;
43
+ --color-primary-hover: #e55a26;
44
+ --color-primary-foreground: #fefdf9;
45
+
46
+ --color-secondary: #f4f1ea;
47
+ --color-secondary-hover: #ebe7dc;
48
+ --color-secondary-foreground: #191919;
49
+
50
+ --color-accent: #ff6b35;
51
+ --color-accent-foreground: #fefdf9;
52
+
53
+ --color-muted: #f4f1ea;
54
+ --color-muted-foreground: #6b6660;
55
+
56
+ --color-background: #fefdf9;
57
+ --color-foreground: #191919;
58
+ --color-card: #ffffff;
59
+ --color-card-foreground: #191919;
60
+ --color-surface: #f9f6ef;
61
+ --color-border: #e8e3d6;
62
+ --color-input: #d8d2c2;
63
+ --color-ring: #ff6b35;
64
+
65
+ --color-table-header: #f4f1ea;
66
+ --color-table-border: #e8e3d6;
67
+ --color-table-row-hover: #f9f6ef;
68
+ --color-surface-hover: #ebe7dc;
69
+ --color-border-hover: #c8c1ad;
70
+ --color-placeholder: #a39c8f;
71
+
72
+ --color-error: #b42318;
73
+ --color-error-foreground: #fefdf9;
74
+ --color-success: #067647;
75
+ --color-success-foreground: #fefdf9;
76
+ --color-warning: #b54708;
77
+ --color-warning-foreground: #fefdf9;
78
+ --color-info: #1849a9;
79
+ --color-info-foreground: #fefdf9;
80
+
81
+ --font-family:
82
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
83
+ --font-family-display:
84
+ "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
85
+ --font-family-body:
86
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
87
+ --font-family-mono:
88
+ "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
89
+ --font-weight-normal: 400;
90
+ --font-weight-medium: 500;
91
+ --font-weight-bold: 700;
92
+ --letter-spacing: -0.005em;
93
+ --line-height: 1.7;
94
+
95
+ --text-xs: 13px;
96
+ --leading-xs: 22px;
97
+ --text-sm: 15px;
98
+ --leading-sm: 26px;
99
+ --text-base: 17px;
100
+ --leading-base: 30px;
101
+ --text-lg: 21px;
102
+ --leading-lg: 34px;
103
+ --text-xl: 26px;
104
+ --leading-xl: 38px;
105
+ --text-2xl: 32px;
106
+ --leading-2xl: 44px;
107
+ --text-3xl: 42px;
108
+ --leading-3xl: 52px;
109
+ --text-4xl: 56px;
110
+ --leading-4xl: 64px;
111
+ --text-display-1: 72px;
112
+ --leading-display-1: 80px;
113
+ --text-display-2: 96px;
114
+ --leading-display-2: 104px;
115
+
116
+ --intent-heading-major-size: var(--text-3xl);
117
+ --intent-heading-major-weight: var(--font-weight-bold);
118
+ --intent-heading-major-leading: var(--leading-3xl);
119
+ --intent-heading-minor-size: var(--text-xl);
120
+ --intent-heading-minor-weight: var(--font-weight-bold);
121
+ --intent-heading-minor-leading: var(--leading-xl);
122
+ --intent-body-emphasis-size: var(--text-base);
123
+ --intent-body-emphasis-weight: var(--font-weight-medium);
124
+ --intent-body-emphasis-leading: var(--leading-base);
125
+ --intent-body-default-size: var(--text-base);
126
+ --intent-body-default-weight: var(--font-weight-normal);
127
+ --intent-body-default-leading: var(--leading-base);
128
+ --intent-body-quiet-size: var(--text-sm);
129
+ --intent-body-quiet-weight: var(--font-weight-normal);
130
+ --intent-body-quiet-leading: var(--leading-sm);
131
+ --intent-caption-size: var(--text-xs);
132
+ --intent-caption-weight: var(--font-weight-medium);
133
+ --intent-caption-leading: var(--leading-xs);
134
+ --intent-numeric-size: var(--text-4xl);
135
+ --intent-numeric-weight: var(--font-weight-bold);
136
+ --intent-numeric-leading: var(--leading-4xl);
137
+ --intent-numeric-family: var(--font-family-display);
138
+
139
+ --space-0: 0px;
140
+ --space-1: 4px;
141
+ --space-2: 8px;
142
+ --space-3: 16px;
143
+ --space-4: 24px;
144
+ --space-5: 32px;
145
+ --space-6: 40px;
146
+ --space-7: 48px;
147
+ --space-8: 56px;
148
+ --space-9: 64px;
149
+ --space-10: 72px;
150
+ --space-11: 80px;
151
+ --space-12: 96px;
152
+
153
+ --button-height-sm: 36px;
154
+ --button-height-md: 44px;
155
+ --button-height-lg: 52px;
156
+ --input-height-sm: 36px;
157
+ --input-height-md: 44px;
158
+ --input-height-lg: 52px;
159
+ --row-height-compact: 48px;
160
+ --row-height-normal: 56px;
161
+ --row-height-spacious: 72px;
162
+
163
+ --card-padding-sm: 24px;
164
+ --card-padding-md: 32px;
165
+ --card-padding-lg: 48px;
166
+ --dialog-padding: 48px;
167
+ --section-gap: 80px;
168
+
169
+ --icon-family: phosphor-duotone;
170
+ --icon-default-size: 20px;
171
+ --icon-stroke-width: 1.5;
172
+ --icon-color: currentColor;
173
+
174
+ --elevation-card: 0 1px 2px rgba(25, 25, 25, 0.06);
175
+ --elevation-popover: 0 4px 12px rgba(25, 25, 25, 0.10), 0 1px 2px rgba(25, 25, 25, 0.04);
176
+ --elevation-dialog: 0 24px 48px rgba(25, 25, 25, 0.18), 0 8px 16px rgba(25, 25, 25, 0.08);
177
+ --elevation-toast: 0 8px 24px rgba(25, 25, 25, 0.14), 0 2px 6px rgba(25, 25, 25, 0.06);
178
+
179
+ --radius-container: 14px;
180
+ --radius-interactive: 10px;
181
+ --radius-pill: 9999px;
182
+ --border-hairline: 1px;
183
+ --border-standard: 1px;
184
+ --border-heavy: 1px;
185
+
186
+ --transition-fast: 200ms;
187
+ --transition-normal: 350ms;
188
+ --transition-slow: 500ms;
189
+ --transition-timing: cubic-bezier(0.0, 0.0, 0.2, 1);
190
+
191
+ --duration-instant: 0ms;
192
+ --duration-fast: 200ms;
193
+ --duration-normal: 350ms;
194
+ --duration-slow: 500ms;
195
+ --duration-dramatic: 700ms;
196
+ --easing-linear: linear;
197
+ --easing-standard: cubic-bezier(0.0, 0.0, 0.2, 1);
198
+ --easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1);
199
+ --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
200
+
201
+ --hover-scale: 1.02;
202
+ --hover-translate-y: -2px;
203
+ --hover-translate-x: 0;
204
+ --active-scale: 0.98;
205
+ --active-translate-y: 0;
206
+
207
+ --focus-ring-width: 3px;
208
+ --focus-ring-offset: 2px;
209
+ --focus-ring-color: #ff6b35;
210
+ }
211
+
212
+ /* ==========================================================================
213
+ * DARK MODE
214
+ * ========================================================================== */
215
+ [data-theme="notion-editorial-dark"] {
216
+ --shadow-none: none;
217
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
218
+ --shadow-main: 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
219
+ --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
220
+ --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
221
+ --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.55);
222
+ --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.4);
223
+
224
+ --radius-none: 0px;
225
+ --radius-sm: 6px;
226
+ --radius-md: 10px;
227
+ --radius-lg: 14px;
228
+ --radius-xl: 20px;
229
+ --radius-full: 9999px;
230
+
231
+ --border-width: 1px;
232
+ --border-width-thin: 1px;
233
+ --border-width-thick: 1px;
234
+
235
+ --color-primary: #ff8557;
236
+ --color-primary-hover: #ff9a73;
237
+ --color-primary-foreground: #1a1a17;
238
+
239
+ --color-secondary: #26241f;
240
+ --color-secondary-hover: #2f2d27;
241
+ --color-secondary-foreground: #f5f1e6;
242
+
243
+ --color-accent: #ff8557;
244
+ --color-accent-foreground: #1a1a17;
245
+
246
+ --color-muted: #26241f;
247
+ --color-muted-foreground: #a39c8f;
248
+
249
+ --color-background: #1a1a17;
250
+ --color-foreground: #f5f1e6;
251
+ --color-card: #22211d;
252
+ --color-card-foreground: #f5f1e6;
253
+ --color-surface: #26241f;
254
+ --color-border: #3a3730;
255
+ --color-input: #45413a;
256
+ --color-ring: #ff8557;
257
+
258
+ --color-table-header: #26241f;
259
+ --color-table-border: #3a3730;
260
+ --color-table-row-hover: #201f1b;
261
+ --color-surface-hover: #2f2d27;
262
+ --color-border-hover: #524d44;
263
+ --color-placeholder: #807a6e;
264
+
265
+ --color-error: #f97066;
266
+ --color-error-foreground: #1a1a17;
267
+ --color-success: #75e0a7;
268
+ --color-success-foreground: #1a1a17;
269
+ --color-warning: #fdb022;
270
+ --color-warning-foreground: #1a1a17;
271
+ --color-info: #84caff;
272
+ --color-info-foreground: #1a1a17;
273
+
274
+ --font-family:
275
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
276
+ --font-family-display:
277
+ "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
278
+ --font-family-body:
279
+ "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
280
+ --font-family-mono:
281
+ "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
282
+ --font-weight-normal: 400;
283
+ --font-weight-medium: 500;
284
+ --font-weight-bold: 700;
285
+ --letter-spacing: -0.005em;
286
+ --line-height: 1.7;
287
+
288
+ --text-xs: 13px;
289
+ --leading-xs: 22px;
290
+ --text-sm: 15px;
291
+ --leading-sm: 26px;
292
+ --text-base: 17px;
293
+ --leading-base: 30px;
294
+ --text-lg: 21px;
295
+ --leading-lg: 34px;
296
+ --text-xl: 26px;
297
+ --leading-xl: 38px;
298
+ --text-2xl: 32px;
299
+ --leading-2xl: 44px;
300
+ --text-3xl: 42px;
301
+ --leading-3xl: 52px;
302
+ --text-4xl: 56px;
303
+ --leading-4xl: 64px;
304
+ --text-display-1: 72px;
305
+ --leading-display-1: 80px;
306
+ --text-display-2: 96px;
307
+ --leading-display-2: 104px;
308
+
309
+ --intent-heading-major-size: var(--text-3xl);
310
+ --intent-heading-major-weight: var(--font-weight-bold);
311
+ --intent-heading-major-leading: var(--leading-3xl);
312
+ --intent-heading-minor-size: var(--text-xl);
313
+ --intent-heading-minor-weight: var(--font-weight-bold);
314
+ --intent-heading-minor-leading: var(--leading-xl);
315
+ --intent-body-emphasis-size: var(--text-base);
316
+ --intent-body-emphasis-weight: var(--font-weight-medium);
317
+ --intent-body-emphasis-leading: var(--leading-base);
318
+ --intent-body-default-size: var(--text-base);
319
+ --intent-body-default-weight: var(--font-weight-normal);
320
+ --intent-body-default-leading: var(--leading-base);
321
+ --intent-body-quiet-size: var(--text-sm);
322
+ --intent-body-quiet-weight: var(--font-weight-normal);
323
+ --intent-body-quiet-leading: var(--leading-sm);
324
+ --intent-caption-size: var(--text-xs);
325
+ --intent-caption-weight: var(--font-weight-medium);
326
+ --intent-caption-leading: var(--leading-xs);
327
+ --intent-numeric-size: var(--text-4xl);
328
+ --intent-numeric-weight: var(--font-weight-bold);
329
+ --intent-numeric-leading: var(--leading-4xl);
330
+ --intent-numeric-family: var(--font-family-display);
331
+
332
+ --space-0: 0px;
333
+ --space-1: 4px;
334
+ --space-2: 8px;
335
+ --space-3: 16px;
336
+ --space-4: 24px;
337
+ --space-5: 32px;
338
+ --space-6: 40px;
339
+ --space-7: 48px;
340
+ --space-8: 56px;
341
+ --space-9: 64px;
342
+ --space-10: 72px;
343
+ --space-11: 80px;
344
+ --space-12: 96px;
345
+
346
+ --button-height-sm: 36px;
347
+ --button-height-md: 44px;
348
+ --button-height-lg: 52px;
349
+ --input-height-sm: 36px;
350
+ --input-height-md: 44px;
351
+ --input-height-lg: 52px;
352
+ --row-height-compact: 48px;
353
+ --row-height-normal: 56px;
354
+ --row-height-spacious: 72px;
355
+
356
+ --card-padding-sm: 24px;
357
+ --card-padding-md: 32px;
358
+ --card-padding-lg: 48px;
359
+ --dialog-padding: 48px;
360
+ --section-gap: 80px;
361
+
362
+ --icon-family: phosphor-duotone;
363
+ --icon-default-size: 20px;
364
+ --icon-stroke-width: 1.5;
365
+ --icon-color: currentColor;
366
+
367
+ --elevation-card: 0 1px 2px rgba(0, 0, 0, 0.4);
368
+ --elevation-popover: 0 4px 12px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3);
369
+ --elevation-dialog: 0 24px 48px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.5);
370
+ --elevation-toast: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
371
+
372
+ --radius-container: 14px;
373
+ --radius-interactive: 10px;
374
+ --radius-pill: 9999px;
375
+ --border-hairline: 1px;
376
+ --border-standard: 1px;
377
+ --border-heavy: 1px;
378
+
379
+ --transition-fast: 200ms;
380
+ --transition-normal: 350ms;
381
+ --transition-slow: 500ms;
382
+ --transition-timing: cubic-bezier(0.0, 0.0, 0.2, 1);
383
+
384
+ --duration-instant: 0ms;
385
+ --duration-fast: 200ms;
386
+ --duration-normal: 350ms;
387
+ --duration-slow: 500ms;
388
+ --duration-dramatic: 700ms;
389
+ --easing-linear: linear;
390
+ --easing-standard: cubic-bezier(0.0, 0.0, 0.2, 1);
391
+ --easing-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1);
392
+ --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
393
+
394
+ --hover-scale: 1.02;
395
+ --hover-translate-y: -2px;
396
+ --hover-translate-x: 0;
397
+ --active-scale: 0.98;
398
+ --active-translate-y: 0;
399
+
400
+ --focus-ring-width: 3px;
401
+ --focus-ring-offset: 2px;
402
+ --focus-ring-color: #ff8557;
403
+ }