@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.
- package/README.md +11 -362
- package/package.json +1 -1
- package/dist/Link-B8gB8LrX.d.cts +0 -78
- package/dist/Link-Dg9GiZzj.d.ts +0 -78
- package/dist/agent-contract/index.d.cts +0 -133
- package/dist/ai/index.d.cts +0 -202
- package/dist/colors-BRUYtnG-.d.cts +0 -298
- package/dist/colors-BRUYtnG-.d.ts +0 -298
- package/dist/engine/index.d.cts +0 -135
- package/dist/extensions/next/index.d.cts +0 -37
- package/dist/index-4rLh47Jk.d.cts +0 -1460
- package/dist/index-B9bPI2VR.d.cts +0 -4523
- package/dist/index-Cgj5md_p.d.ts +0 -4523
- package/dist/index-DzJQZ5GE.d.ts +0 -1460
- package/dist/index.d.cts +0 -11680
- package/dist/preset.d.cts +0 -21
- package/dist/safe-native-DQVUNMW7.d.cts +0 -32
- package/dist/safe-native-DQVUNMW7.d.ts +0 -32
- package/dist/styles.cjs +0 -2
- package/dist/styles.d.cts +0 -2
- package/dist/styles.d.ts +0 -2
- package/dist/styles.mjs +0 -1
- package/dist/theme/index.d.cts +0 -368
- package/dist/tokens/index.d.cts +0 -4
- package/dist/types-BBXB5_Tj.d.ts +0 -407
- package/dist/types-BEG5B5HA.d.cts +0 -138
- package/dist/types-C9zHIyTu.d.ts +0 -80
- package/dist/types-CNgJi1zK.d.ts +0 -138
- package/dist/types-CeNHa-BU.d.cts +0 -12
- package/dist/types-CeNHa-BU.d.ts +0 -12
- package/dist/types-CoqbRddt.d.cts +0 -80
- package/dist/types-kjA4Koki.d.cts +0 -407
- package/dist/typography-BsoBDDcG.d.cts +0 -1216
- package/dist/typography-BsoBDDcG.d.ts +0 -1216
- package/dist/ui-node-union-BNt_iPQO.d.cts +0 -272
- package/dist/ui-node-union-BdALN0FB.d.ts +0 -272
|
@@ -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 };
|