@tenerife.music/ui 4.0.0 → 5.0.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.
@@ -1,1216 +0,0 @@
1
- /**
2
- * Border Radius System Tokens
3
- *
4
- * Complete border radius system for Tenerife UI based on design system specifications.
5
- * Includes: radius scale (none..3xl, full), component-specific radius standards,
6
- * and CSS variable definitions.
7
- *
8
- * Base unit: 4px (0.25rem)
9
- * All radius values follow a consistent scale for visual harmony.
10
- */
11
- /**
12
- * Border Radius Scale
13
- * Values: none, xs, sm, md, lg, xl, 2xl, 3xl, full
14
- */
15
- declare const borderRadius: {
16
- readonly none: "0";
17
- readonly xs: "0.125rem";
18
- readonly sm: "0.25rem";
19
- readonly DEFAULT: "0.25rem";
20
- readonly base: "0.25rem";
21
- readonly md: "0.375rem";
22
- readonly lg: "0.5rem";
23
- readonly xl: "0.75rem";
24
- readonly "2xl": "1rem";
25
- readonly "3xl": "1.5rem";
26
- readonly full: "9999px";
27
- };
28
- /**
29
- * Component-Specific Radius Standards
30
- * Defines recommended radius values for different component types
31
- */
32
- declare const componentRadius: {
33
- readonly button: {
34
- readonly sm: "0.25rem";
35
- readonly md: "0.375rem";
36
- readonly lg: "0.5rem";
37
- readonly pill: "9999px";
38
- };
39
- readonly card: {
40
- readonly sm: "0.25rem";
41
- readonly md: "0.375rem";
42
- readonly lg: "0.5rem";
43
- readonly xl: "0.75rem";
44
- };
45
- readonly input: {
46
- readonly sm: "0.25rem";
47
- readonly md: "0.375rem";
48
- readonly lg: "0.5rem";
49
- };
50
- readonly badge: {
51
- readonly sm: "0.125rem";
52
- readonly md: "0.25rem";
53
- readonly lg: "0.375rem";
54
- readonly pill: "9999px";
55
- };
56
- readonly avatar: {
57
- readonly sm: "9999px";
58
- readonly md: "9999px";
59
- readonly lg: "9999px";
60
- readonly square: "0.375rem";
61
- };
62
- readonly modal: {
63
- readonly sm: "0.375rem";
64
- readonly md: "0.5rem";
65
- readonly lg: "0.75rem";
66
- readonly xl: "1rem";
67
- };
68
- readonly tooltip: {
69
- readonly sm: "0.25rem";
70
- readonly md: "0.375rem";
71
- };
72
- readonly toast: {
73
- readonly sm: "0.375rem";
74
- readonly md: "0.5rem";
75
- readonly lg: "0.75rem";
76
- };
77
- readonly chip: {
78
- readonly sm: "0.125rem";
79
- readonly md: "0.25rem";
80
- readonly lg: "0.375rem";
81
- readonly pill: "9999px";
82
- };
83
- readonly image: {
84
- readonly none: "0";
85
- readonly sm: "0.25rem";
86
- readonly md: "0.375rem";
87
- readonly lg: "0.5rem";
88
- readonly xl: "0.75rem";
89
- readonly full: "9999px";
90
- };
91
- };
92
- /**
93
- * CSS Custom Properties for Border Radius
94
- * These will be injected into the theme system
95
- */
96
- declare const radiusCSSVariables: {
97
- readonly "--radius-none": "0";
98
- readonly "--radius-xs": "0.125rem";
99
- readonly "--radius-sm": "0.25rem";
100
- readonly "--radius-base": "0.25rem";
101
- readonly "--radius-md": "0.375rem";
102
- readonly "--radius-lg": "0.5rem";
103
- readonly "--radius-xl": "0.75rem";
104
- readonly "--radius-2xl": "1rem";
105
- readonly "--radius-3xl": "1.5rem";
106
- readonly "--radius-full": "9999px";
107
- readonly "--radius": "0.375rem";
108
- readonly "--radius-button": "0.375rem";
109
- readonly "--radius-card": "0.375rem";
110
- readonly "--radius-input": "0.375rem";
111
- readonly "--radius-badge": "0.25rem";
112
- readonly "--radius-modal": "0.5rem";
113
- readonly "--radius-tooltip": "0.25rem";
114
- readonly "--radius-toast": "0.5rem";
115
- readonly "--radius-chip": "0.25rem";
116
- readonly "--radius-image": "0.375rem";
117
- };
118
- /**
119
- * Tailwind Border Radius Config
120
- * Maps to Tailwind theme.extend.borderRadius
121
- */
122
- declare const tailwindRadiusConfig: {
123
- readonly borderRadius: {
124
- readonly button: "0.375rem";
125
- readonly card: "0.375rem";
126
- readonly input: "0.375rem";
127
- readonly badge: "0.25rem";
128
- readonly modal: "0.5rem";
129
- readonly tooltip: "0.25rem";
130
- readonly toast: "0.5rem";
131
- readonly chip: "0.25rem";
132
- readonly image: "0.375rem";
133
- readonly none: "0";
134
- readonly xs: "0.125rem";
135
- readonly sm: "0.25rem";
136
- readonly DEFAULT: "0.25rem";
137
- readonly base: "0.25rem";
138
- readonly md: "0.375rem";
139
- readonly lg: "0.5rem";
140
- readonly xl: "0.75rem";
141
- readonly "2xl": "1rem";
142
- readonly "3xl": "1.5rem";
143
- readonly full: "9999px";
144
- };
145
- };
146
- /**
147
- * Type Exports
148
- */
149
- type BorderRadius = keyof typeof borderRadius;
150
- type ComponentRadius = {
151
- button: keyof typeof componentRadius.button;
152
- card: keyof typeof componentRadius.card;
153
- input: keyof typeof componentRadius.input;
154
- badge: keyof typeof componentRadius.badge;
155
- avatar: keyof typeof componentRadius.avatar;
156
- modal: keyof typeof componentRadius.modal;
157
- tooltip: keyof typeof componentRadius.tooltip;
158
- toast: keyof typeof componentRadius.toast;
159
- chip: keyof typeof componentRadius.chip;
160
- image: keyof typeof componentRadius.image;
161
- };
162
-
163
- /**
164
- * Shadow and Glow System Tokens
165
- *
166
- * Complete shadow system for Tenerife UI based on design system specifications.
167
- * Includes: elevation shadows, colored shadows (primary/accent), glow effects,
168
- * and focus ring tokens for accessibility.
169
- *
170
- * @see docs/tenerife_audit/design_system.md - shadow system section
171
- */
172
- /**
173
- * Shadow Base Tokens
174
- * Base values for shadow generation
175
- */
176
- declare const shadowBase: {
177
- readonly black: "0 0 0";
178
- readonly overlay: "0 0 0";
179
- };
180
- /**
181
- * Shadow Opacity Tokens
182
- * Opacity values for different shadow intensities
183
- */
184
- declare const shadowOpacity: {
185
- readonly xs: "0.05";
186
- readonly sm: "0.1";
187
- readonly md: "0.1";
188
- readonly lg: "0.1";
189
- readonly xl: "0.1";
190
- readonly "2xl": "0.25";
191
- readonly overlay: "0.5";
192
- readonly backdrop: "0.5";
193
- };
194
- /**
195
- * Elevation Shadow Tokens
196
- * Used for component depth and elevation hierarchy
197
- * Values: none, xs, sm, md, lg, xl, 2xl
198
- */
199
- declare const elevationShadows: {
200
- readonly none: "none";
201
- readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
202
- readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
203
- readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
204
- readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
205
- readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
206
- readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
207
- };
208
- /**
209
- * Primary Colored Shadow Tokens
210
- * Used for interactive elements and brand emphasis with primary color
211
- */
212
- declare const primaryColoredShadows: {
213
- readonly xs: "0 1px 2px 0 hsl(var(--primary-500) / 0.15)";
214
- readonly sm: "0 2px 4px 0 hsl(var(--primary-500) / 0.2)";
215
- readonly md: "0 4px 8px 0 hsl(var(--primary-500) / 0.3)";
216
- readonly lg: "0 8px 16px 0 hsl(var(--primary-500) / 0.4)";
217
- readonly xl: "0 12px 24px 0 hsl(var(--primary-500) / 0.5)";
218
- readonly "2xl": "0 16px 32px 0 hsl(var(--primary-500) / 0.6)";
219
- };
220
- /**
221
- * Accent Colored Shadow Tokens
222
- * Used for accent elements and highlights with accent color
223
- */
224
- declare const accentColoredShadows: {
225
- readonly xs: "0 1px 2px 0 hsl(var(--accent-500) / 0.15)";
226
- readonly sm: "0 2px 4px 0 hsl(var(--accent-500) / 0.2)";
227
- readonly md: "0 4px 8px 0 hsl(var(--accent-500) / 0.3)";
228
- readonly lg: "0 8px 16px 0 hsl(var(--accent-500) / 0.4)";
229
- readonly xl: "0 12px 24px 0 hsl(var(--accent-500) / 0.5)";
230
- readonly "2xl": "0 16px 32px 0 hsl(var(--accent-500) / 0.6)";
231
- };
232
- /**
233
- * Glow Effect Tokens
234
- * Used for focus states, brand emphasis, and interactive feedback
235
- */
236
- declare const glowEffects: {
237
- readonly "glow-primary": "0 0 20px 0 hsl(var(--primary-500) / 0.5), 0 0 40px 0 hsl(var(--primary-500) / 0.3)";
238
- readonly "glow-primary-subtle": "0 0 8px 0 hsl(var(--primary-500) / 0.3)";
239
- readonly "glow-primary-medium": "0 0 16px 0 hsl(var(--primary-500) / 0.5)";
240
- readonly "glow-primary-strong": "0 0 24px 0 hsl(var(--primary-500) / 0.6)";
241
- readonly "glow-accent": "0 0 20px 0 hsl(var(--accent-500) / 0.5), 0 0 40px 0 hsl(var(--accent-500) / 0.3)";
242
- readonly "glow-accent-subtle": "0 0 8px 0 hsl(var(--accent-500) / 0.3)";
243
- readonly "glow-accent-medium": "0 0 16px 0 hsl(var(--accent-500) / 0.5)";
244
- readonly "glow-accent-strong": "0 0 24px 0 hsl(var(--accent-500) / 0.6)";
245
- };
246
- /**
247
- * Focus Ring Tokens
248
- * Used for keyboard focus indicators (accessibility)
249
- */
250
- declare const focusRings: {
251
- readonly default: "0 0 0 3px hsl(var(--tm-focus-ring) / 0.5)";
252
- readonly primary: "0 0 0 3px hsl(var(--primary-500) / 0.3)";
253
- readonly accent: "0 0 0 3px hsl(var(--accent-500) / 0.3)";
254
- readonly "focus-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)";
255
- readonly "focus-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)";
256
- };
257
- /**
258
- * CSS Custom Properties for Shadows
259
- * These will be injected into the theme system
260
- */
261
- declare const shadowCSSVariables: {
262
- readonly "--shadow-none": "none";
263
- readonly "--shadow-xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)";
264
- readonly "--shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
265
- readonly "--shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
266
- readonly "--shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
267
- readonly "--shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
268
- readonly "--shadow-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
269
- readonly "--shadow-primary-xs": "0 1px 2px 0 hsl(var(--primary-500) / 0.15)";
270
- readonly "--shadow-primary-sm": "0 2px 4px 0 hsl(var(--primary-500) / 0.2)";
271
- readonly "--shadow-primary-md": "0 4px 8px 0 hsl(var(--primary-500) / 0.3)";
272
- readonly "--shadow-primary-lg": "0 8px 16px 0 hsl(var(--primary-500) / 0.4)";
273
- readonly "--shadow-primary-xl": "0 12px 24px 0 hsl(var(--primary-500) / 0.5)";
274
- readonly "--shadow-primary-2xl": "0 16px 32px 0 hsl(var(--primary-500) / 0.6)";
275
- readonly "--shadow-accent-xs": "0 1px 2px 0 hsl(var(--accent-500) / 0.15)";
276
- readonly "--shadow-accent-sm": "0 2px 4px 0 hsl(var(--accent-500) / 0.2)";
277
- readonly "--shadow-accent-md": "0 4px 8px 0 hsl(var(--accent-500) / 0.3)";
278
- readonly "--shadow-accent-lg": "0 8px 16px 0 hsl(var(--accent-500) / 0.4)";
279
- readonly "--shadow-accent-xl": "0 12px 24px 0 hsl(var(--accent-500) / 0.5)";
280
- readonly "--shadow-accent-2xl": "0 16px 32px 0 hsl(var(--accent-500) / 0.6)";
281
- readonly "--glow-primary": "0 0 20px 0 hsl(var(--primary-500) / 0.5), 0 0 40px 0 hsl(var(--primary-500) / 0.3)";
282
- readonly "--glow-primary-subtle": "0 0 8px 0 hsl(var(--primary-500) / 0.3)";
283
- readonly "--glow-primary-medium": "0 0 16px 0 hsl(var(--primary-500) / 0.5)";
284
- readonly "--glow-primary-strong": "0 0 24px 0 hsl(var(--primary-500) / 0.6)";
285
- readonly "--glow-accent": "0 0 20px 0 hsl(var(--accent-500) / 0.5), 0 0 40px 0 hsl(var(--accent-500) / 0.3)";
286
- readonly "--glow-accent-subtle": "0 0 8px 0 hsl(var(--accent-500) / 0.3)";
287
- readonly "--glow-accent-medium": "0 0 16px 0 hsl(var(--accent-500) / 0.5)";
288
- readonly "--glow-accent-strong": "0 0 24px 0 hsl(var(--accent-500) / 0.6)";
289
- readonly "--focus-ring-default": "0 0 0 3px hsl(var(--tm-focus-ring) / 0.5)";
290
- readonly "--focus-ring-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)";
291
- readonly "--focus-ring-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)";
292
- readonly "--focus-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)";
293
- readonly "--focus-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)";
294
- };
295
- /**
296
- * Component Shadow Mapping
297
- * Defines which shadow level to use for different component states
298
- */
299
- declare const componentShadowMapping: {
300
- readonly card: {
301
- readonly default: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
302
- readonly hover: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
303
- readonly active: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
304
- readonly selected: "0 2px 4px 0 hsl(var(--primary-500) / 0.2)";
305
- };
306
- readonly button: {
307
- readonly default: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
308
- readonly hover: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
309
- readonly active: "none";
310
- readonly focus: "0 0 0 3px hsl(var(--primary-500) / 0.3)";
311
- };
312
- readonly "button-accent": {
313
- readonly default: "0 1px 2px 0 hsl(var(--accent-500) / 0.15)";
314
- readonly hover: "0 2px 4px 0 hsl(var(--accent-500) / 0.2)";
315
- readonly active: "none";
316
- readonly focus: "0 0 0 3px hsl(var(--accent-500) / 0.3)";
317
- };
318
- readonly modal: {
319
- readonly default: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
320
- readonly backdrop: "rgba(0 0 0, 0.5)";
321
- };
322
- readonly dropdown: {
323
- readonly default: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
324
- readonly hover: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
325
- };
326
- readonly tooltip: {
327
- readonly default: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
328
- };
329
- readonly toast: {
330
- readonly default: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
331
- readonly success: "0 10px 15px -3px hsl(var(--tm-status-success) / 0.3)";
332
- readonly error: "0 10px 15px -3px hsl(var(--tm-status-error) / 0.3)";
333
- };
334
- };
335
- /**
336
- * Tailwind Shadow Config
337
- * Maps to Tailwind theme.extend.boxShadow
338
- */
339
- declare const tailwindShadowConfig: {
340
- readonly boxShadow: {
341
- readonly none: "none";
342
- readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
343
- readonly sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
344
- readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
345
- readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
346
- readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
347
- readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
348
- readonly "primary-xs": "0 1px 2px 0 hsl(var(--primary-500) / 0.15)";
349
- readonly "primary-sm": "0 2px 4px 0 hsl(var(--primary-500) / 0.2)";
350
- readonly "primary-md": "0 4px 8px 0 hsl(var(--primary-500) / 0.3)";
351
- readonly "primary-lg": "0 8px 16px 0 hsl(var(--primary-500) / 0.4)";
352
- readonly "primary-xl": "0 12px 24px 0 hsl(var(--primary-500) / 0.5)";
353
- readonly "primary-2xl": "0 16px 32px 0 hsl(var(--primary-500) / 0.6)";
354
- readonly "accent-xs": "0 1px 2px 0 hsl(var(--accent-500) / 0.15)";
355
- readonly "accent-sm": "0 2px 4px 0 hsl(var(--accent-500) / 0.2)";
356
- readonly "accent-md": "0 4px 8px 0 hsl(var(--accent-500) / 0.3)";
357
- readonly "accent-lg": "0 8px 16px 0 hsl(var(--accent-500) / 0.4)";
358
- readonly "accent-xl": "0 12px 24px 0 hsl(var(--accent-500) / 0.5)";
359
- readonly "accent-2xl": "0 16px 32px 0 hsl(var(--accent-500) / 0.6)";
360
- readonly "glow-primary": "0 0 20px 0 hsl(var(--primary-500) / 0.5), 0 0 40px 0 hsl(var(--primary-500) / 0.3)";
361
- readonly "glow-primary-subtle": "0 0 8px 0 hsl(var(--primary-500) / 0.3)";
362
- readonly "glow-primary-medium": "0 0 16px 0 hsl(var(--primary-500) / 0.5)";
363
- readonly "glow-primary-strong": "0 0 24px 0 hsl(var(--primary-500) / 0.6)";
364
- readonly "glow-accent": "0 0 20px 0 hsl(var(--accent-500) / 0.5), 0 0 40px 0 hsl(var(--accent-500) / 0.3)";
365
- readonly "glow-accent-subtle": "0 0 8px 0 hsl(var(--accent-500) / 0.3)";
366
- readonly "glow-accent-medium": "0 0 16px 0 hsl(var(--accent-500) / 0.5)";
367
- readonly "glow-accent-strong": "0 0 24px 0 hsl(var(--accent-500) / 0.6)";
368
- readonly "focus-ring": "0 0 0 3px hsl(var(--tm-focus-ring) / 0.5)";
369
- readonly "focus-primary": "0 0 0 3px hsl(var(--primary-500) / 0.3)";
370
- readonly "focus-accent": "0 0 0 3px hsl(var(--accent-500) / 0.3)";
371
- };
372
- readonly ringWidth: {
373
- readonly DEFAULT: "3px";
374
- readonly sm: "2px";
375
- readonly md: "3px";
376
- readonly lg: "4px";
377
- };
378
- readonly ringColor: {
379
- readonly DEFAULT: "hsl(var(--tm-focus-ring) / 0.5)";
380
- readonly primary: "hsl(var(--primary-500) / 0.3)";
381
- readonly accent: "hsl(var(--accent-500) / 0.3)";
382
- readonly "focus-primary": "hsl(var(--primary-500) / 0.3)";
383
- readonly "focus-accent": "hsl(var(--accent-500) / 0.3)";
384
- };
385
- };
386
- /**
387
- * Type Exports
388
- */
389
- type ElevationShadow = keyof typeof elevationShadows;
390
- type ColoredShadow = keyof typeof primaryColoredShadows | keyof typeof accentColoredShadows;
391
- type GlowEffect = keyof typeof glowEffects;
392
- type FocusRing = keyof typeof focusRings;
393
-
394
- /**
395
- * Spacing System Tokens
396
- *
397
- * Complete spacing system for Tenerife UI based on 8px grid system.
398
- * Includes: base spacing scale (0-96), semantic spacing tokens (xs..5xl),
399
- * and layout spacing tokens (sections, containers, grids).
400
- *
401
- * Base unit: 8px (0.5rem)
402
- * All spacing values are multiples of 8px for consistent layout rhythm.
403
- */
404
- /**
405
- * Base Spacing Scale
406
- * Values from 0 to 96 based on 8px grid system
407
- * Format: numeric keys map to rem values
408
- */
409
- declare const spacing: {
410
- readonly 0: "0";
411
- readonly px: "1px";
412
- readonly 0.5: "0.125rem";
413
- readonly 1: "0.25rem";
414
- readonly 1.5: "0.375rem";
415
- readonly 2: "0.5rem";
416
- readonly 2.5: "0.625rem";
417
- readonly 3: "0.75rem";
418
- readonly 3.5: "0.875rem";
419
- readonly 4: "1rem";
420
- readonly 5: "1.25rem";
421
- readonly 6: "1.5rem";
422
- readonly 7: "1.75rem";
423
- readonly 8: "2rem";
424
- readonly 9: "2.25rem";
425
- readonly 10: "2.5rem";
426
- readonly 11: "2.75rem";
427
- readonly 12: "3rem";
428
- readonly 14: "3.5rem";
429
- readonly 16: "4rem";
430
- readonly 20: "5rem";
431
- readonly 24: "6rem";
432
- readonly 28: "7rem";
433
- readonly 32: "8rem";
434
- readonly 36: "9rem";
435
- readonly 40: "10rem";
436
- readonly 44: "11rem";
437
- readonly 48: "12rem";
438
- readonly 52: "13rem";
439
- readonly 56: "14rem";
440
- readonly 60: "15rem";
441
- readonly 64: "16rem";
442
- readonly 72: "18rem";
443
- readonly 80: "20rem";
444
- readonly 96: "24rem";
445
- };
446
- /**
447
- * Semantic Spacing Tokens
448
- * Named tokens for common spacing use cases
449
- * Maps to base spacing scale
450
- */
451
- declare const semanticSpacing: {
452
- readonly xs: "0.25rem";
453
- readonly sm: "0.5rem";
454
- readonly md: "1rem";
455
- readonly lg: "1.5rem";
456
- readonly xl: "2rem";
457
- readonly "2xl": "3rem";
458
- readonly "3xl": "4rem";
459
- readonly "4xl": "5rem";
460
- readonly "5xl": "6rem";
461
- readonly none: "0";
462
- };
463
- /**
464
- * Layout Spacing Tokens
465
- * Spacing for common layout patterns
466
- */
467
- declare const layoutSpacing: {
468
- readonly section: {
469
- readonly xs: "1.5rem";
470
- readonly sm: "2rem";
471
- readonly md: "3rem";
472
- readonly lg: "4rem";
473
- readonly xl: "5rem";
474
- readonly "2xl": "6rem";
475
- };
476
- readonly container: {
477
- readonly xs: "0.5rem";
478
- readonly sm: "1rem";
479
- readonly md: "1.5rem";
480
- readonly lg: "2rem";
481
- readonly xl: "3rem";
482
- };
483
- readonly grid: {
484
- readonly xs: "0.5rem";
485
- readonly sm: "1rem";
486
- readonly md: "1.5rem";
487
- readonly lg: "2rem";
488
- readonly xl: "3rem";
489
- };
490
- readonly stack: {
491
- readonly xs: "0.25rem";
492
- readonly sm: "0.5rem";
493
- readonly md: "1rem";
494
- readonly lg: "1.5rem";
495
- readonly xl: "2rem";
496
- };
497
- readonly component: {
498
- readonly xs: "0.25rem";
499
- readonly sm: "0.5rem";
500
- readonly md: "1rem";
501
- readonly lg: "1.5rem";
502
- readonly xl: "2rem";
503
- };
504
- };
505
- /**
506
- * CSS Custom Properties for Spacing
507
- * These will be injected into the theme system
508
- */
509
- declare const spacingCSSVariables: {
510
- readonly "--spacing-0": "0";
511
- readonly "--spacing-px": "1px";
512
- readonly "--spacing-0-5": "0.125rem";
513
- readonly "--spacing-1": "0.25rem";
514
- readonly "--spacing-1-5": "0.375rem";
515
- readonly "--spacing-2": "0.5rem";
516
- readonly "--spacing-2-5": "0.625rem";
517
- readonly "--spacing-3": "0.75rem";
518
- readonly "--spacing-3-5": "0.875rem";
519
- readonly "--spacing-4": "1rem";
520
- readonly "--spacing-5": "1.25rem";
521
- readonly "--spacing-6": "1.5rem";
522
- readonly "--spacing-7": "1.75rem";
523
- readonly "--spacing-8": "2rem";
524
- readonly "--spacing-9": "2.25rem";
525
- readonly "--spacing-10": "2.5rem";
526
- readonly "--spacing-11": "2.75rem";
527
- readonly "--spacing-12": "3rem";
528
- readonly "--spacing-14": "3.5rem";
529
- readonly "--spacing-16": "4rem";
530
- readonly "--spacing-20": "5rem";
531
- readonly "--spacing-24": "6rem";
532
- readonly "--spacing-xs": "0.25rem";
533
- readonly "--spacing-sm": "0.5rem";
534
- readonly "--spacing-md": "1rem";
535
- readonly "--spacing-lg": "1.5rem";
536
- readonly "--spacing-xl": "2rem";
537
- readonly "--spacing-2xl": "3rem";
538
- readonly "--spacing-3xl": "4rem";
539
- readonly "--spacing-4xl": "5rem";
540
- readonly "--spacing-5xl": "6rem";
541
- readonly "--spacing-none": "0";
542
- readonly "--layout-section-xs": "1.5rem";
543
- readonly "--layout-section-sm": "2rem";
544
- readonly "--layout-section-md": "3rem";
545
- readonly "--layout-section-lg": "4rem";
546
- readonly "--layout-section-xl": "5rem";
547
- readonly "--layout-section-2xl": "6rem";
548
- readonly "--layout-container-xs": "0.5rem";
549
- readonly "--layout-container-sm": "1rem";
550
- readonly "--layout-container-md": "1.5rem";
551
- readonly "--layout-container-lg": "2rem";
552
- readonly "--layout-container-xl": "3rem";
553
- readonly "--layout-grid-xs": "0.5rem";
554
- readonly "--layout-grid-sm": "1rem";
555
- readonly "--layout-grid-md": "1.5rem";
556
- readonly "--layout-grid-lg": "2rem";
557
- readonly "--layout-grid-xl": "3rem";
558
- readonly "--layout-stack-xs": "0.25rem";
559
- readonly "--layout-stack-sm": "0.5rem";
560
- readonly "--layout-stack-md": "1rem";
561
- readonly "--layout-stack-lg": "1.5rem";
562
- readonly "--layout-stack-xl": "2rem";
563
- readonly "--layout-component-xs": "0.25rem";
564
- readonly "--layout-component-sm": "0.5rem";
565
- readonly "--layout-component-md": "1rem";
566
- readonly "--layout-component-lg": "1.5rem";
567
- readonly "--layout-component-xl": "2rem";
568
- };
569
- /**
570
- * Tailwind Spacing Config
571
- * Maps to Tailwind theme.extend.spacing
572
- */
573
- declare const tailwindSpacingConfig: {
574
- readonly spacing: {
575
- readonly xs: "0.25rem";
576
- readonly sm: "0.5rem";
577
- readonly md: "1rem";
578
- readonly lg: "1.5rem";
579
- readonly xl: "2rem";
580
- readonly "2xl": "3rem";
581
- readonly "3xl": "4rem";
582
- readonly "4xl": "5rem";
583
- readonly "5xl": "6rem";
584
- readonly none: "0";
585
- readonly 0: "0";
586
- readonly px: "1px";
587
- readonly 0.5: "0.125rem";
588
- readonly 1: "0.25rem";
589
- readonly 1.5: "0.375rem";
590
- readonly 2: "0.5rem";
591
- readonly 2.5: "0.625rem";
592
- readonly 3: "0.75rem";
593
- readonly 3.5: "0.875rem";
594
- readonly 4: "1rem";
595
- readonly 5: "1.25rem";
596
- readonly 6: "1.5rem";
597
- readonly 7: "1.75rem";
598
- readonly 8: "2rem";
599
- readonly 9: "2.25rem";
600
- readonly 10: "2.5rem";
601
- readonly 11: "2.75rem";
602
- readonly 12: "3rem";
603
- readonly 14: "3.5rem";
604
- readonly 16: "4rem";
605
- readonly 20: "5rem";
606
- readonly 24: "6rem";
607
- readonly 28: "7rem";
608
- readonly 32: "8rem";
609
- readonly 36: "9rem";
610
- readonly 40: "10rem";
611
- readonly 44: "11rem";
612
- readonly 48: "12rem";
613
- readonly 52: "13rem";
614
- readonly 56: "14rem";
615
- readonly 60: "15rem";
616
- readonly 64: "16rem";
617
- readonly 72: "18rem";
618
- readonly 80: "20rem";
619
- readonly 96: "24rem";
620
- };
621
- };
622
- /**
623
- * Type Exports
624
- */
625
- type Spacing = keyof typeof spacing;
626
- type SemanticSpacing = keyof typeof semanticSpacing;
627
- type SectionSpacing = keyof typeof layoutSpacing.section;
628
- type ContainerSpacing = keyof typeof layoutSpacing.container;
629
- type GridSpacing = keyof typeof layoutSpacing.grid;
630
- type StackSpacing = keyof typeof layoutSpacing.stack;
631
- type ComponentSpacing = keyof typeof layoutSpacing.component;
632
-
633
- /**
634
- * Typography System Tokens
635
- *
636
- * Complete typography system for Tenerife UI based on design system specifications.
637
- * Includes: font families (Inter, Satoshi, Clash Display), fluid type scale using clamp(),
638
- * font weights, line heights, letter spacing, and predefined text styles.
639
- *
640
- * NOTE: Fonts are consumer-owned. This library does NOT ship font files and does NOT
641
- * assume display fonts are available at runtime. System fallbacks must remain valid.
642
- *
643
- * @see docs/tenerife_audit/design_system.md - typography system section
644
- */
645
- /**
646
- * Font Families
647
- * Inter (primary), Satoshi (optional), Clash Display (headings/hero)
648
- */
649
- declare const fontFamily: {
650
- readonly sans: readonly ["Inter", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"];
651
- readonly satoshi: readonly ["Satoshi", "Inter", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"];
652
- readonly display: readonly ["Clash Display", "Inter", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"];
653
- readonly serif: readonly ["ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"];
654
- readonly mono: readonly ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
655
- };
656
- /**
657
- * Fluid Typography Scale
658
- * Uses clamp() for responsive type scaling
659
- * Values: text-xs through text-6xl
660
- *
661
- * Format: clamp(min, preferred, max)
662
- * min: smallest size (mobile)
663
- * preferred: fluid calculation
664
- * max: largest size (desktop)
665
- *
666
- * **IMPORTANT:** The line-height values in fontSize tuples (e.g., fontSize.xs[1].lineHeight)
667
- * are INTERNAL-ONLY and used exclusively for Tailwind config generation.
668
- * Do NOT use these directly in components. Instead:
669
- * - Use `textStyles` for complete typography styles (includes line-height from role policy)
670
- * - Use `lineHeight` tokens directly (lineHeight.none, lineHeight.tight, etc.)
671
- * - Follow Typography Rhythm Policy v1 for role-based line-height assignments
672
- *
673
- * @see docs/architecture/typography/TYPOGRAPHY_RHYTHM_POLICY_v1.md
674
- */
675
- declare const fontSize: {
676
- readonly xs: readonly ["clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)", {
677
- readonly lineHeight: "1rem";
678
- readonly letterSpacing: "0.05em";
679
- }];
680
- readonly sm: readonly ["clamp(0.875rem, 0.8rem + 0.25vw, 1rem)", {
681
- readonly lineHeight: "1.25rem";
682
- readonly letterSpacing: "0.025em";
683
- }];
684
- readonly base: readonly ["clamp(1rem, 0.95rem + 0.25vw, 1.125rem)", {
685
- readonly lineHeight: "1.5rem";
686
- readonly letterSpacing: "0em";
687
- }];
688
- readonly lg: readonly ["clamp(1.125rem, 1rem + 0.5vw, 1.25rem)", {
689
- readonly lineHeight: "1.75rem";
690
- readonly letterSpacing: "-0.025em";
691
- }];
692
- readonly xl: readonly ["clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)", {
693
- readonly lineHeight: "1.75rem";
694
- readonly letterSpacing: "-0.025em";
695
- }];
696
- readonly "2xl": readonly ["clamp(1.5rem, 1.25rem + 1.25vw, 2rem)", {
697
- readonly lineHeight: "2rem";
698
- readonly letterSpacing: "-0.05em";
699
- }];
700
- readonly "3xl": readonly ["clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)", {
701
- readonly lineHeight: "2.25rem";
702
- readonly letterSpacing: "-0.05em";
703
- }];
704
- readonly "4xl": readonly ["clamp(2.25rem, 1.75rem + 2.5vw, 3rem)", {
705
- readonly lineHeight: "2.5rem";
706
- readonly letterSpacing: "-0.025em";
707
- }];
708
- readonly "5xl": readonly ["clamp(3rem, 2rem + 5vw, 4rem)", {
709
- readonly lineHeight: "1";
710
- readonly letterSpacing: "-0.025em";
711
- }];
712
- readonly "6xl": readonly ["clamp(3.75rem, 2.5rem + 6.25vw, 5rem)", {
713
- readonly lineHeight: "1";
714
- readonly letterSpacing: "-0.05em";
715
- }];
716
- readonly "7xl": readonly ["clamp(4.5rem, 3rem + 7.5vw, 6rem)", {
717
- readonly lineHeight: "1";
718
- readonly letterSpacing: "-0.05em";
719
- }];
720
- readonly "8xl": readonly ["clamp(6rem, 4rem + 10vw, 8rem)", {
721
- readonly lineHeight: "1";
722
- readonly letterSpacing: "-0.05em";
723
- }];
724
- readonly "9xl": readonly ["clamp(8rem, 5rem + 15vw, 12rem)", {
725
- readonly lineHeight: "1";
726
- readonly letterSpacing: "-0.05em";
727
- }];
728
- };
729
- /**
730
- * Font Weight Tokens
731
- * Range: 300 (light) to 800 (extrabold)
732
- */
733
- declare const fontWeight: {
734
- readonly thin: "100";
735
- readonly extralight: "200";
736
- readonly light: "300";
737
- readonly normal: "400";
738
- readonly medium: "500";
739
- readonly semibold: "600";
740
- readonly bold: "700";
741
- readonly extrabold: "800";
742
- readonly black: "900";
743
- };
744
- /**
745
- * Line Height Tokens
746
- * Used for vertical rhythm and readability
747
- */
748
- declare const lineHeight: {
749
- readonly none: "1";
750
- readonly tight: "1.25";
751
- readonly snug: "1.375";
752
- readonly normal: "1.5";
753
- readonly relaxed: "1.625";
754
- readonly loose: "2";
755
- };
756
- /**
757
- * Letter Spacing Tokens
758
- * Used for tracking (character spacing)
759
- */
760
- declare const letterSpacing: {
761
- readonly tighter: "-0.05em";
762
- readonly tight: "-0.025em";
763
- readonly normal: "0em";
764
- readonly wide: "0.025em";
765
- readonly wider: "0.05em";
766
- readonly widest: "0.1em";
767
- };
768
- /**
769
- * CSS Custom Properties for Typography
770
- * These will be injected into the theme system
771
- */
772
- declare const typographyCSSVariables: {
773
- readonly "--font-sans": string;
774
- readonly "--font-satoshi": string;
775
- readonly "--font-display": string;
776
- readonly "--font-serif": string;
777
- readonly "--font-mono": string;
778
- readonly "--font-size-xs": "clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)";
779
- readonly "--font-size-sm": "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)";
780
- readonly "--font-size-base": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)";
781
- readonly "--font-size-lg": "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)";
782
- readonly "--font-size-xl": "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)";
783
- readonly "--font-size-2xl": "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)";
784
- readonly "--font-size-3xl": "clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)";
785
- readonly "--font-size-4xl": "clamp(2.25rem, 1.75rem + 2.5vw, 3rem)";
786
- readonly "--font-size-5xl": "clamp(3rem, 2rem + 5vw, 4rem)";
787
- readonly "--font-size-6xl": "clamp(3.75rem, 2.5rem + 6.25vw, 5rem)";
788
- readonly "--font-weight-thin": "100";
789
- readonly "--font-weight-extralight": "200";
790
- readonly "--font-weight-light": "300";
791
- readonly "--font-weight-normal": "400";
792
- readonly "--font-weight-medium": "500";
793
- readonly "--font-weight-semibold": "600";
794
- readonly "--font-weight-bold": "700";
795
- readonly "--font-weight-extrabold": "800";
796
- readonly "--font-weight-black": "900";
797
- readonly "--line-height-none": "1";
798
- readonly "--line-height-tight": "1.25";
799
- readonly "--line-height-snug": "1.375";
800
- readonly "--line-height-normal": "1.5";
801
- readonly "--line-height-relaxed": "1.625";
802
- readonly "--line-height-loose": "2";
803
- readonly "--letter-spacing-tighter": "-0.05em";
804
- readonly "--letter-spacing-tight": "-0.025em";
805
- readonly "--letter-spacing-normal": "0em";
806
- readonly "--letter-spacing-wide": "0.025em";
807
- readonly "--letter-spacing-wider": "0.05em";
808
- readonly "--letter-spacing-widest": "0.1em";
809
- };
810
- /**
811
- * Predefined Text Styles
812
- * Common combinations for headings, body text, etc.
813
- */
814
- declare const textStyles: {
815
- readonly display: {
816
- readonly fontFamily: string;
817
- readonly fontSize: "clamp(3.75rem, 2.5rem + 6.25vw, 5rem)";
818
- readonly fontWeight: "700";
819
- readonly lineHeight: "1";
820
- readonly letterSpacing: "-0.025em";
821
- };
822
- readonly h1: {
823
- readonly fontFamily: string;
824
- readonly fontSize: "clamp(3rem, 2rem + 5vw, 4rem)";
825
- readonly fontWeight: "700";
826
- readonly lineHeight: "1.25";
827
- readonly letterSpacing: "-0.025em";
828
- };
829
- readonly h2: {
830
- readonly fontFamily: string;
831
- readonly fontSize: "clamp(2.25rem, 1.75rem + 2.5vw, 3rem)";
832
- readonly fontWeight: "700";
833
- readonly lineHeight: "1.25";
834
- readonly letterSpacing: "-0.025em";
835
- };
836
- readonly h3: {
837
- readonly fontFamily: string;
838
- readonly fontSize: "clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)";
839
- readonly fontWeight: "600";
840
- readonly lineHeight: "1.375";
841
- readonly letterSpacing: "0em";
842
- };
843
- readonly h4: {
844
- readonly fontFamily: string;
845
- readonly fontSize: "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)";
846
- readonly fontWeight: "600";
847
- readonly lineHeight: "1.375";
848
- readonly letterSpacing: "0em";
849
- };
850
- readonly h5: {
851
- readonly fontFamily: string;
852
- readonly fontSize: "clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)";
853
- readonly fontWeight: "500";
854
- readonly lineHeight: "1.5";
855
- readonly letterSpacing: "0em";
856
- };
857
- readonly h6: {
858
- readonly fontFamily: string;
859
- readonly fontSize: "clamp(1.125rem, 1rem + 0.5vw, 1.25rem)";
860
- readonly fontWeight: "500";
861
- readonly lineHeight: "1.5";
862
- readonly letterSpacing: "0em";
863
- };
864
- readonly body: {
865
- readonly fontFamily: string;
866
- readonly fontSize: "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)";
867
- readonly fontWeight: "400";
868
- readonly lineHeight: "1.625";
869
- readonly letterSpacing: "0em";
870
- };
871
- readonly "body-sm": {
872
- readonly fontFamily: string;
873
- readonly fontSize: "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)";
874
- readonly fontWeight: "400";
875
- readonly lineHeight: "1.5";
876
- readonly letterSpacing: "0em";
877
- };
878
- readonly "body-xs": {
879
- readonly fontFamily: string;
880
- readonly fontSize: "clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)";
881
- readonly fontWeight: "400";
882
- readonly lineHeight: "1.5";
883
- readonly letterSpacing: "0.025em";
884
- };
885
- readonly label: {
886
- readonly fontFamily: string;
887
- readonly fontSize: "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)";
888
- readonly fontWeight: "500";
889
- readonly lineHeight: "1.5";
890
- readonly letterSpacing: "0.025em";
891
- };
892
- readonly "label-sm": {
893
- readonly fontFamily: string;
894
- readonly fontSize: "clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)";
895
- readonly fontWeight: "500";
896
- readonly lineHeight: "1.5";
897
- readonly letterSpacing: "0.05em";
898
- };
899
- readonly caption: {
900
- readonly fontFamily: string;
901
- readonly fontSize: "clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)";
902
- readonly fontWeight: "400";
903
- readonly lineHeight: "1.5";
904
- readonly letterSpacing: "0.025em";
905
- };
906
- readonly meta: {
907
- readonly fontFamily: string;
908
- readonly fontSize: "clamp(0.875rem, 0.8rem + 0.25vw, 1rem)";
909
- readonly fontWeight: "400";
910
- readonly lineHeight: "1.5";
911
- readonly letterSpacing: "0.025em";
912
- };
913
- };
914
- /**
915
- * Tailwind Typography Config
916
- * Maps to Tailwind theme.extend.typography
917
- * Note: Typed as tuples for Tailwind compatibility
918
- */
919
- declare const tailwindTypographyConfig: {
920
- readonly fontFamily: {
921
- readonly sans: string[];
922
- readonly satoshi: string[];
923
- readonly display: string[];
924
- readonly serif: string[];
925
- readonly mono: string[];
926
- };
927
- readonly fontSize: {
928
- readonly xs: [string, {
929
- lineHeight: string;
930
- letterSpacing: string;
931
- }];
932
- readonly sm: [string, {
933
- lineHeight: string;
934
- letterSpacing: string;
935
- }];
936
- readonly md: [string, {
937
- lineHeight: string;
938
- letterSpacing: string;
939
- }];
940
- readonly base: [string, {
941
- lineHeight: string;
942
- letterSpacing: string;
943
- }];
944
- readonly lg: [string, {
945
- lineHeight: string;
946
- letterSpacing: string;
947
- }];
948
- readonly xl: [string, {
949
- lineHeight: string;
950
- letterSpacing: string;
951
- }];
952
- readonly "2xl": [string, {
953
- lineHeight: string;
954
- letterSpacing: string;
955
- }];
956
- readonly "3xl": [string, {
957
- lineHeight: string;
958
- letterSpacing: string;
959
- }];
960
- readonly "4xl": [string, {
961
- lineHeight: string;
962
- letterSpacing: string;
963
- }];
964
- readonly "5xl": [string, {
965
- lineHeight: string;
966
- letterSpacing: string;
967
- }];
968
- readonly "6xl": [string, {
969
- lineHeight: string;
970
- letterSpacing: string;
971
- }];
972
- readonly "7xl": [string, {
973
- lineHeight: string;
974
- letterSpacing: string;
975
- }];
976
- readonly "8xl": [string, {
977
- lineHeight: string;
978
- letterSpacing: string;
979
- }];
980
- readonly "9xl": [string, {
981
- lineHeight: string;
982
- letterSpacing: string;
983
- }];
984
- };
985
- readonly fontWeight: {
986
- readonly thin: "100";
987
- readonly extralight: "200";
988
- readonly light: "300";
989
- readonly normal: "400";
990
- readonly medium: "500";
991
- readonly semibold: "600";
992
- readonly bold: "700";
993
- readonly extrabold: "800";
994
- readonly black: "900";
995
- };
996
- readonly lineHeight: {
997
- readonly none: "1";
998
- readonly tight: "1.25";
999
- readonly snug: "1.375";
1000
- readonly normal: "1.5";
1001
- readonly relaxed: "1.625";
1002
- readonly loose: "2";
1003
- };
1004
- readonly letterSpacing: {
1005
- readonly tighter: "-0.05em";
1006
- readonly tight: "-0.025em";
1007
- readonly normal: "0em";
1008
- readonly wide: "0.025em";
1009
- readonly wider: "0.05em";
1010
- readonly widest: "0.1em";
1011
- };
1012
- };
1013
- /**
1014
- * Canonical Typography Types
1015
- * Restricted to canonical values for component APIs
1016
- */
1017
- /**
1018
- * Canonical font weight tokens
1019
- * Only these four weights should be used in typography components
1020
- */
1021
- type CanonicalFontWeight = "normal" | "medium" | "semibold" | "bold";
1022
- /**
1023
- * Canonical font size scale tokens
1024
- * Used for typography components
1025
- */
1026
- type CanonicalFontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
1027
- /**
1028
- * Canonical line height tokens
1029
- * Used for typography components
1030
- */
1031
- type CanonicalLineHeight = "tight" | "normal" | "loose";
1032
- /**
1033
- * Canonical letter spacing (tracking) tokens
1034
- * Used for typography components
1035
- */
1036
- type CanonicalLetterSpacing = "tight" | "normal" | "wide";
1037
- /**
1038
- * Canonical text color tokens
1039
- * Semantic text colors for typography components
1040
- * @see docs/architecture/typography/TYPOGRAPHY_COLOR_POLICY_v1.md
1041
- */
1042
- type CanonicalTextColor = "primary" | "secondary" | "tertiary" | "muted" | "inverse" | "disabled" | "success" | "warning" | "error" | "info";
1043
- /**
1044
- * Font size mapping for md (maps to base)
1045
- */
1046
- declare const fontSizeWithMd: {
1047
- readonly md: readonly ["clamp(1rem, 0.95rem + 0.25vw, 1.125rem)", {
1048
- readonly lineHeight: "1.5rem";
1049
- readonly letterSpacing: "0em";
1050
- }];
1051
- readonly xs: readonly ["clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem)", {
1052
- readonly lineHeight: "1rem";
1053
- readonly letterSpacing: "0.05em";
1054
- }];
1055
- readonly sm: readonly ["clamp(0.875rem, 0.8rem + 0.25vw, 1rem)", {
1056
- readonly lineHeight: "1.25rem";
1057
- readonly letterSpacing: "0.025em";
1058
- }];
1059
- readonly base: readonly ["clamp(1rem, 0.95rem + 0.25vw, 1.125rem)", {
1060
- readonly lineHeight: "1.5rem";
1061
- readonly letterSpacing: "0em";
1062
- }];
1063
- readonly lg: readonly ["clamp(1.125rem, 1rem + 0.5vw, 1.25rem)", {
1064
- readonly lineHeight: "1.75rem";
1065
- readonly letterSpacing: "-0.025em";
1066
- }];
1067
- readonly xl: readonly ["clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem)", {
1068
- readonly lineHeight: "1.75rem";
1069
- readonly letterSpacing: "-0.025em";
1070
- }];
1071
- readonly "2xl": readonly ["clamp(1.5rem, 1.25rem + 1.25vw, 2rem)", {
1072
- readonly lineHeight: "2rem";
1073
- readonly letterSpacing: "-0.05em";
1074
- }];
1075
- readonly "3xl": readonly ["clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)", {
1076
- readonly lineHeight: "2.25rem";
1077
- readonly letterSpacing: "-0.05em";
1078
- }];
1079
- readonly "4xl": readonly ["clamp(2.25rem, 1.75rem + 2.5vw, 3rem)", {
1080
- readonly lineHeight: "2.5rem";
1081
- readonly letterSpacing: "-0.025em";
1082
- }];
1083
- readonly "5xl": readonly ["clamp(3rem, 2rem + 5vw, 4rem)", {
1084
- readonly lineHeight: "1";
1085
- readonly letterSpacing: "-0.025em";
1086
- }];
1087
- readonly "6xl": readonly ["clamp(3.75rem, 2.5rem + 6.25vw, 5rem)", {
1088
- readonly lineHeight: "1";
1089
- readonly letterSpacing: "-0.05em";
1090
- }];
1091
- readonly "7xl": readonly ["clamp(4.5rem, 3rem + 7.5vw, 6rem)", {
1092
- readonly lineHeight: "1";
1093
- readonly letterSpacing: "-0.05em";
1094
- }];
1095
- readonly "8xl": readonly ["clamp(6rem, 4rem + 10vw, 8rem)", {
1096
- readonly lineHeight: "1";
1097
- readonly letterSpacing: "-0.05em";
1098
- }];
1099
- readonly "9xl": readonly ["clamp(8rem, 5rem + 15vw, 12rem)", {
1100
- readonly lineHeight: "1";
1101
- readonly letterSpacing: "-0.05em";
1102
- }];
1103
- };
1104
- declare const typographyRolePolicy: {
1105
- readonly display: {
1106
- readonly allowedText: readonly ["primary", "inverse"];
1107
- readonly minContrast: 3;
1108
- readonly category: "display";
1109
- readonly notes: "inverse only on dark surfaces";
1110
- };
1111
- readonly h1: {
1112
- readonly allowedText: readonly ["primary", "secondary"];
1113
- readonly minContrast: 3;
1114
- readonly category: "heading";
1115
- };
1116
- readonly h2: {
1117
- readonly allowedText: readonly ["primary", "secondary"];
1118
- readonly minContrast: 3;
1119
- readonly category: "heading";
1120
- };
1121
- readonly h3: {
1122
- readonly allowedText: readonly ["primary", "secondary"];
1123
- readonly minContrast: 3;
1124
- readonly category: "heading";
1125
- };
1126
- readonly h4: {
1127
- readonly allowedText: readonly ["primary", "secondary"];
1128
- readonly minContrast: 3;
1129
- readonly category: "heading";
1130
- };
1131
- readonly h5: {
1132
- readonly allowedText: readonly ["primary", "secondary"];
1133
- readonly minContrast: 3;
1134
- readonly category: "heading";
1135
- };
1136
- readonly h6: {
1137
- readonly allowedText: readonly ["primary", "secondary"];
1138
- readonly minContrast: 3;
1139
- readonly category: "heading";
1140
- };
1141
- readonly body: {
1142
- readonly allowedText: readonly ["primary", "secondary"];
1143
- readonly minContrast: 4.5;
1144
- readonly category: "body";
1145
- };
1146
- readonly "body-sm": {
1147
- readonly allowedText: readonly ["primary", "secondary"];
1148
- readonly minContrast: 4.5;
1149
- readonly category: "body";
1150
- };
1151
- readonly "body-xs": {
1152
- readonly allowedText: readonly ["primary", "secondary"];
1153
- readonly minContrast: 4.5;
1154
- readonly category: "body";
1155
- };
1156
- readonly label: {
1157
- readonly allowedText: readonly ["primary", "secondary"];
1158
- readonly minContrast: 4.5;
1159
- readonly category: "label";
1160
- };
1161
- readonly "label-sm": {
1162
- readonly allowedText: readonly ["primary", "secondary"];
1163
- readonly minContrast: 4.5;
1164
- readonly category: "label";
1165
- };
1166
- readonly caption: {
1167
- readonly allowedText: readonly ["primary"];
1168
- readonly minContrast: 4.5;
1169
- readonly category: "caption";
1170
- };
1171
- readonly meta: {
1172
- readonly allowedText: readonly ["muted", "tertiary"];
1173
- readonly minContrast: 4.5;
1174
- readonly category: "meta";
1175
- };
1176
- readonly status: {
1177
- readonly allowedText: readonly ["success", "warning", "error", "info"];
1178
- readonly minContrast: 4.5;
1179
- readonly category: "status";
1180
- readonly notes: "status colors for explicit status messaging only";
1181
- };
1182
- readonly disabled: {
1183
- readonly allowedText: readonly ["disabled"];
1184
- readonly minContrast: "inherits";
1185
- readonly category: "disabled";
1186
- readonly notes: "follows A11Y disabled policy";
1187
- };
1188
- };
1189
- /**
1190
- * Typography Role Policy Type Helpers
1191
- * Type-level enforcement for Typography Color Policy v1
1192
- * @see docs/architecture/typography/TYPOGRAPHY_COLOR_POLICY_v1.md
1193
- */
1194
- /**
1195
- * Typography Role union type
1196
- * All valid typography roles
1197
- */
1198
- type TypographyRole = keyof typeof typographyRolePolicy;
1199
- /**
1200
- * Helper type: Get allowed text tokens for a role
1201
- * @example
1202
- * type DisplayAllowed = AllowedTextForRole<"display">; // "primary" | "inverse"
1203
- * type BodyAllowed = AllowedTextForRole<"body">; // "primary" | "secondary"
1204
- */
1205
- type AllowedTextForRole<R extends TypographyRole> = (typeof typographyRolePolicy)[R]["allowedText"][number];
1206
- /**
1207
- * Type Exports
1208
- */
1209
- type FontFamily = keyof typeof fontFamily;
1210
- type FontSize = keyof typeof fontSize;
1211
- type FontWeight = keyof typeof fontWeight;
1212
- type LetterSpacing = keyof typeof letterSpacing;
1213
- type LineHeight = keyof typeof lineHeight;
1214
- type TextStyle = keyof typeof textStyles;
1215
-
1216
- export { typographyCSSVariables as $, type AllowedTextForRole as A, type BorderRadius as B, type ComponentRadius as C, type SemanticSpacing as D, type ElevationShadow as E, type FocusRing as F, type GlowEffect as G, type Spacing as H, type StackSpacing as I, spacingCSSVariables as J, tailwindSpacingConfig as K, type CanonicalFontSize as L, type CanonicalFontWeight as M, type CanonicalLetterSpacing as N, type CanonicalLineHeight as O, type CanonicalTextColor as P, type FontFamily as Q, type FontSize as R, type SectionSpacing as S, type TypographyRole as T, type FontWeight as U, type LetterSpacing as V, type LineHeight as W, type TextStyle as X, fontSizeWithMd as Y, tailwindTypographyConfig as Z, textStyles as _, accentColoredShadows as a, borderRadius as b, semanticSpacing as c, fontSize as d, elevationShadows as e, focusRings as f, glowEffects as g, fontWeight as h, lineHeight as i, fontFamily as j, letterSpacing as k, layoutSpacing as l, componentRadius as m, type ColoredShadow as n, componentShadowMapping as o, primaryColoredShadows as p, shadowBase as q, radiusCSSVariables as r, spacing as s, tailwindRadiusConfig as t, shadowCSSVariables as u, shadowOpacity as v, tailwindShadowConfig as w, type ComponentSpacing as x, type ContainerSpacing as y, type GridSpacing as z };