@thesage/ui 0.0.9
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/dist/fontThemes-Bwf7_lFg.d.mts +842 -0
- package/dist/fontThemes-Bwf7_lFg.d.ts +842 -0
- package/dist/hooks-C8PrmIXy.d.mts +225 -0
- package/dist/hooks-Ct9RBhg-.d.ts +225 -0
- package/dist/hooks.d.mts +3 -0
- package/dist/hooks.d.ts +3 -0
- package/dist/hooks.js +1342 -0
- package/dist/hooks.js.map +1 -0
- package/dist/hooks.mjs +1314 -0
- package/dist/hooks.mjs.map +1 -0
- package/dist/index-CsnncHSm.d.mts +23 -0
- package/dist/index-CsnncHSm.d.ts +23 -0
- package/dist/index.d.mts +2830 -0
- package/dist/index.d.ts +2830 -0
- package/dist/index.js +12637 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +12319 -0
- package/dist/index.mjs.map +1 -0
- package/dist/providers-Dv3LFGtJ.d.mts +17 -0
- package/dist/providers-Dv3LFGtJ.d.ts +17 -0
- package/dist/providers.d.mts +2 -0
- package/dist/providers.d.ts +2 -0
- package/dist/providers.js +1944 -0
- package/dist/providers.js.map +1 -0
- package/dist/providers.mjs +1918 -0
- package/dist/providers.mjs.map +1 -0
- package/dist/tokens.d.mts +831 -0
- package/dist/tokens.d.ts +831 -0
- package/dist/tokens.js +2399 -0
- package/dist/tokens.js.map +1 -0
- package/dist/tokens.mjs +2319 -0
- package/dist/tokens.mjs.map +1 -0
- package/dist/utils-DlJKRVzQ.d.mts +986 -0
- package/dist/utils-xrpHqxXR.d.ts +986 -0
- package/dist/utils.d.mts +4 -0
- package/dist/utils.d.ts +4 -0
- package/dist/utils.js +873 -0
- package/dist/utils.js.map +1 -0
- package/dist/utils.mjs +805 -0
- package/dist/utils.mjs.map +1 -0
- package/dist/validation-Bj1ye-v_.d.mts +114 -0
- package/dist/validation-Bj1ye-v_.d.ts +114 -0
- package/package.json +117 -0
|
@@ -0,0 +1,842 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typography Tokens
|
|
3
|
+
*
|
|
4
|
+
* Central typography system for the design system.
|
|
5
|
+
* Defines font families, sizes, weights, line heights, and letter spacing.
|
|
6
|
+
*
|
|
7
|
+
* Architecture:
|
|
8
|
+
* - Font families are theme-specific and loaded via Next.js font optimization
|
|
9
|
+
* - Sizes, weights, etc. are universal across all themes
|
|
10
|
+
* - Easily extensible for new themes/font sets
|
|
11
|
+
*
|
|
12
|
+
* Usage:
|
|
13
|
+
* 1. Import in theme-specific apps to load fonts
|
|
14
|
+
* 2. Reference via CSS variables (--font-*, --text-*, etc.)
|
|
15
|
+
* 3. Add to Customizer for theme switching
|
|
16
|
+
*/
|
|
17
|
+
/**
|
|
18
|
+
* Font Family Definitions
|
|
19
|
+
*
|
|
20
|
+
* Each theme has its own font personality:
|
|
21
|
+
* - Studio: Modern, geometric, professional
|
|
22
|
+
* - Sage: Elegant, serif + sans combo
|
|
23
|
+
* - Volt: Tech-forward, consistent throughout
|
|
24
|
+
*
|
|
25
|
+
* To add a new theme:
|
|
26
|
+
* 1. Add entry to fontFamilies
|
|
27
|
+
* 2. Load fonts in consuming app's layout
|
|
28
|
+
* 3. Map to CSS variables in ThemeProvider
|
|
29
|
+
*/
|
|
30
|
+
declare const fontFamilies: {
|
|
31
|
+
readonly studio: {
|
|
32
|
+
readonly heading: "Outfit";
|
|
33
|
+
readonly body: "Manrope";
|
|
34
|
+
readonly mono: "Fira Code";
|
|
35
|
+
readonly description: "Modern geometric sans-serif with clean readability";
|
|
36
|
+
readonly usage: {
|
|
37
|
+
readonly heading: "Headlines, titles, emphasis";
|
|
38
|
+
readonly body: "Paragraphs, UI text, readable content";
|
|
39
|
+
readonly mono: "Code blocks, technical content";
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
readonly sage: {
|
|
43
|
+
readonly heading: "Lora";
|
|
44
|
+
readonly body: "Instrument Sans";
|
|
45
|
+
readonly serif: "Lora";
|
|
46
|
+
readonly sans: "Instrument Sans";
|
|
47
|
+
readonly mono: "Fira Code";
|
|
48
|
+
readonly description: "Elegant serif headings with modern sans body";
|
|
49
|
+
readonly usage: {
|
|
50
|
+
readonly heading: "Elegant headings, article titles";
|
|
51
|
+
readonly body: "Long-form content, UI text";
|
|
52
|
+
readonly serif: "Pull quotes, emphasis";
|
|
53
|
+
readonly sans: "UI elements, captions";
|
|
54
|
+
readonly mono: "Code blocks, technical content";
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
readonly volt: {
|
|
58
|
+
readonly heading: "Space Grotesk";
|
|
59
|
+
readonly body: "Space Grotesk";
|
|
60
|
+
readonly sans: "Space Grotesk";
|
|
61
|
+
readonly mono: "Fira Code";
|
|
62
|
+
readonly description: "Tech-forward, consistent geometric throughout";
|
|
63
|
+
readonly usage: {
|
|
64
|
+
readonly heading: "All headlines";
|
|
65
|
+
readonly body: "All body text (unified typography)";
|
|
66
|
+
readonly sans: "All sans-serif needs";
|
|
67
|
+
readonly mono: "Code blocks, technical content";
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
/**
|
|
72
|
+
* Type-safe theme names based on font families
|
|
73
|
+
*/
|
|
74
|
+
type TypographyTheme = keyof typeof fontFamilies;
|
|
75
|
+
/**
|
|
76
|
+
* Font loading configuration for Next.js
|
|
77
|
+
* Use this to load fonts in app layouts
|
|
78
|
+
*/
|
|
79
|
+
declare const fontLoadingConfig: {
|
|
80
|
+
readonly studio: {
|
|
81
|
+
readonly heading: {
|
|
82
|
+
readonly family: "Outfit";
|
|
83
|
+
readonly weights: readonly ["300", "400", "500", "600", "700", "800"];
|
|
84
|
+
};
|
|
85
|
+
readonly body: {
|
|
86
|
+
readonly family: "Manrope";
|
|
87
|
+
readonly weights: readonly ["300", "400", "500", "600", "700", "800"];
|
|
88
|
+
};
|
|
89
|
+
readonly mono: {
|
|
90
|
+
readonly family: "Fira Code";
|
|
91
|
+
readonly weights: readonly ["400", "500", "600", "700"];
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
readonly sage: {
|
|
95
|
+
readonly heading: {
|
|
96
|
+
readonly family: "Lora";
|
|
97
|
+
readonly weights: readonly ["400", "500", "600", "700"];
|
|
98
|
+
};
|
|
99
|
+
readonly body: {
|
|
100
|
+
readonly family: "Instrument Sans";
|
|
101
|
+
readonly weights: readonly ["400", "500", "600", "700"];
|
|
102
|
+
};
|
|
103
|
+
readonly mono: {
|
|
104
|
+
readonly family: "Fira Code";
|
|
105
|
+
readonly weights: readonly ["400", "500", "600", "700"];
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
readonly volt: {
|
|
109
|
+
readonly heading: {
|
|
110
|
+
readonly family: "Space Grotesk";
|
|
111
|
+
readonly weights: readonly ["300", "400", "500", "600", "700"];
|
|
112
|
+
};
|
|
113
|
+
readonly body: {
|
|
114
|
+
readonly family: "Space Grotesk";
|
|
115
|
+
readonly weights: readonly ["300", "400", "500", "600", "700"];
|
|
116
|
+
};
|
|
117
|
+
readonly mono: {
|
|
118
|
+
readonly family: "Fira Code";
|
|
119
|
+
readonly weights: readonly ["400", "500", "600", "700"];
|
|
120
|
+
};
|
|
121
|
+
};
|
|
122
|
+
};
|
|
123
|
+
/**
|
|
124
|
+
* Font Size Scale
|
|
125
|
+
*
|
|
126
|
+
* Based on a modular scale for harmonious typography.
|
|
127
|
+
* Mobile-first with responsive scaling.
|
|
128
|
+
*
|
|
129
|
+
* Naming convention:
|
|
130
|
+
* - xs, sm, base, lg, xl, 2xl, etc. for body text
|
|
131
|
+
* - Numeric for headings (aligns with h1-h6)
|
|
132
|
+
*/
|
|
133
|
+
declare const fontSizes: {
|
|
134
|
+
readonly xs: {
|
|
135
|
+
readonly base: "0.75rem";
|
|
136
|
+
readonly mobile: "0.75rem";
|
|
137
|
+
};
|
|
138
|
+
readonly sm: {
|
|
139
|
+
readonly base: "0.875rem";
|
|
140
|
+
readonly mobile: "0.875rem";
|
|
141
|
+
};
|
|
142
|
+
readonly base: {
|
|
143
|
+
readonly base: "1rem";
|
|
144
|
+
readonly mobile: "1rem";
|
|
145
|
+
};
|
|
146
|
+
readonly lg: {
|
|
147
|
+
readonly base: "1.125rem";
|
|
148
|
+
readonly mobile: "1rem";
|
|
149
|
+
};
|
|
150
|
+
readonly xl: {
|
|
151
|
+
readonly base: "1.25rem";
|
|
152
|
+
readonly mobile: "1.125rem";
|
|
153
|
+
};
|
|
154
|
+
readonly '2xl': {
|
|
155
|
+
readonly base: "1.5rem";
|
|
156
|
+
readonly mobile: "1.25rem";
|
|
157
|
+
};
|
|
158
|
+
readonly '3xl': {
|
|
159
|
+
readonly base: "1.875rem";
|
|
160
|
+
readonly mobile: "1.5rem";
|
|
161
|
+
};
|
|
162
|
+
readonly '4xl': {
|
|
163
|
+
readonly base: "2.25rem";
|
|
164
|
+
readonly mobile: "1.875rem";
|
|
165
|
+
};
|
|
166
|
+
readonly '5xl': {
|
|
167
|
+
readonly base: "3rem";
|
|
168
|
+
readonly mobile: "2.25rem";
|
|
169
|
+
};
|
|
170
|
+
readonly '6xl': {
|
|
171
|
+
readonly base: "3.75rem";
|
|
172
|
+
readonly mobile: "2.5rem";
|
|
173
|
+
};
|
|
174
|
+
readonly '7xl': {
|
|
175
|
+
readonly base: "4.5rem";
|
|
176
|
+
readonly mobile: "3rem";
|
|
177
|
+
};
|
|
178
|
+
readonly '8xl': {
|
|
179
|
+
readonly base: "6rem";
|
|
180
|
+
readonly mobile: "3.75rem";
|
|
181
|
+
};
|
|
182
|
+
readonly '9xl': {
|
|
183
|
+
readonly base: "8rem";
|
|
184
|
+
readonly mobile: "4.5rem";
|
|
185
|
+
};
|
|
186
|
+
};
|
|
187
|
+
/**
|
|
188
|
+
* Semantic font size mappings
|
|
189
|
+
* Maps semantic names to scale values
|
|
190
|
+
*/
|
|
191
|
+
declare const semanticSizes: {
|
|
192
|
+
readonly 'heading-1': "hero";
|
|
193
|
+
readonly 'heading-2': "5xl";
|
|
194
|
+
readonly 'heading-3': "4xl";
|
|
195
|
+
readonly 'heading-4': "2xl";
|
|
196
|
+
readonly 'heading-5': "xl";
|
|
197
|
+
readonly 'heading-6': "lg";
|
|
198
|
+
readonly 'body-large': "lg";
|
|
199
|
+
readonly body: "base";
|
|
200
|
+
readonly 'body-small': "sm";
|
|
201
|
+
readonly caption: "xs";
|
|
202
|
+
};
|
|
203
|
+
/**
|
|
204
|
+
* Font Weight Scale
|
|
205
|
+
*
|
|
206
|
+
* Standard numeric weights with semantic aliases.
|
|
207
|
+
* Not all fonts support all weights - check font-specific availability.
|
|
208
|
+
*/
|
|
209
|
+
declare const fontWeights: {
|
|
210
|
+
readonly thin: "100";
|
|
211
|
+
readonly extralight: "200";
|
|
212
|
+
readonly light: "300";
|
|
213
|
+
readonly normal: "400";
|
|
214
|
+
readonly medium: "500";
|
|
215
|
+
readonly semibold: "600";
|
|
216
|
+
readonly bold: "700";
|
|
217
|
+
readonly extrabold: "800";
|
|
218
|
+
readonly black: "900";
|
|
219
|
+
};
|
|
220
|
+
/**
|
|
221
|
+
* Semantic weight mappings
|
|
222
|
+
*/
|
|
223
|
+
declare const semanticWeights: {
|
|
224
|
+
readonly heading: "bold";
|
|
225
|
+
readonly 'heading-light': "semibold";
|
|
226
|
+
readonly 'heading-heavy': "extrabold";
|
|
227
|
+
readonly body: "normal";
|
|
228
|
+
readonly 'body-emphasis': "medium";
|
|
229
|
+
readonly 'body-strong': "semibold";
|
|
230
|
+
readonly caption: "normal";
|
|
231
|
+
};
|
|
232
|
+
/**
|
|
233
|
+
* Line Height Scale
|
|
234
|
+
*
|
|
235
|
+
* Unitless values for better scalability.
|
|
236
|
+
* Tighter for headings, relaxed for body text.
|
|
237
|
+
*/
|
|
238
|
+
declare const lineHeights: {
|
|
239
|
+
readonly none: "1";
|
|
240
|
+
readonly tight: "1.25";
|
|
241
|
+
readonly snug: "1.375";
|
|
242
|
+
readonly normal: "1.5";
|
|
243
|
+
readonly relaxed: "1.625";
|
|
244
|
+
readonly loose: "1.75";
|
|
245
|
+
readonly extraloose: "2";
|
|
246
|
+
};
|
|
247
|
+
/**
|
|
248
|
+
* Semantic line height mappings
|
|
249
|
+
*/
|
|
250
|
+
declare const semanticLineHeights: {
|
|
251
|
+
readonly heading: "tight";
|
|
252
|
+
readonly 'heading-display': "none";
|
|
253
|
+
readonly body: "normal";
|
|
254
|
+
readonly 'body-relaxed': "relaxed";
|
|
255
|
+
readonly caption: "snug";
|
|
256
|
+
};
|
|
257
|
+
/**
|
|
258
|
+
* Letter Spacing (Tracking) Scale
|
|
259
|
+
*
|
|
260
|
+
* In ems for scalability across font sizes.
|
|
261
|
+
* Negative for headings, positive for small caps.
|
|
262
|
+
*/
|
|
263
|
+
declare const letterSpacing: {
|
|
264
|
+
readonly tighter: "-0.05em";
|
|
265
|
+
readonly tight: "-0.025em";
|
|
266
|
+
readonly normal: "0";
|
|
267
|
+
readonly wide: "0.025em";
|
|
268
|
+
readonly wider: "0.05em";
|
|
269
|
+
readonly widest: "0.1em";
|
|
270
|
+
};
|
|
271
|
+
/**
|
|
272
|
+
* Semantic letter spacing mappings
|
|
273
|
+
*/
|
|
274
|
+
declare const semanticLetterSpacing: {
|
|
275
|
+
readonly heading: "tight";
|
|
276
|
+
readonly 'heading-display': "tighter";
|
|
277
|
+
readonly body: "normal";
|
|
278
|
+
readonly 'small-caps': "wider";
|
|
279
|
+
readonly 'all-caps': "widest";
|
|
280
|
+
};
|
|
281
|
+
/**
|
|
282
|
+
* Complete typography presets for common use cases
|
|
283
|
+
* Combines size, weight, line-height, and letter-spacing
|
|
284
|
+
*
|
|
285
|
+
* Usage: Apply entire preset to a component
|
|
286
|
+
*/
|
|
287
|
+
declare const typePresets: {
|
|
288
|
+
readonly 'display-large': {
|
|
289
|
+
readonly size: {
|
|
290
|
+
readonly base: "6rem";
|
|
291
|
+
readonly mobile: "3.75rem";
|
|
292
|
+
};
|
|
293
|
+
readonly weight: "700";
|
|
294
|
+
readonly lineHeight: "1";
|
|
295
|
+
readonly letterSpacing: "-0.05em";
|
|
296
|
+
readonly description: "Large hero text, landing pages";
|
|
297
|
+
};
|
|
298
|
+
readonly display: {
|
|
299
|
+
readonly size: {
|
|
300
|
+
readonly base: "4.5rem";
|
|
301
|
+
readonly mobile: "3rem";
|
|
302
|
+
};
|
|
303
|
+
readonly weight: "700";
|
|
304
|
+
readonly lineHeight: "1.25";
|
|
305
|
+
readonly letterSpacing: "-0.025em";
|
|
306
|
+
readonly description: "Hero sections, major headings";
|
|
307
|
+
};
|
|
308
|
+
readonly 'heading-1': {
|
|
309
|
+
readonly size: {
|
|
310
|
+
readonly base: "3.75rem";
|
|
311
|
+
readonly mobile: "2.5rem";
|
|
312
|
+
};
|
|
313
|
+
readonly weight: "700";
|
|
314
|
+
readonly lineHeight: "1.25";
|
|
315
|
+
readonly letterSpacing: "-0.025em";
|
|
316
|
+
readonly description: "Page titles, h1";
|
|
317
|
+
};
|
|
318
|
+
readonly 'heading-2': {
|
|
319
|
+
readonly size: {
|
|
320
|
+
readonly base: "3rem";
|
|
321
|
+
readonly mobile: "2.25rem";
|
|
322
|
+
};
|
|
323
|
+
readonly weight: "700";
|
|
324
|
+
readonly lineHeight: "1.25";
|
|
325
|
+
readonly letterSpacing: "0";
|
|
326
|
+
readonly description: "Section titles, h2";
|
|
327
|
+
};
|
|
328
|
+
readonly 'heading-3': {
|
|
329
|
+
readonly size: {
|
|
330
|
+
readonly base: "2.25rem";
|
|
331
|
+
readonly mobile: "1.875rem";
|
|
332
|
+
};
|
|
333
|
+
readonly weight: "600";
|
|
334
|
+
readonly lineHeight: "1.375";
|
|
335
|
+
readonly letterSpacing: "0";
|
|
336
|
+
readonly description: "Subsection titles, h3";
|
|
337
|
+
};
|
|
338
|
+
readonly 'heading-4': {
|
|
339
|
+
readonly size: {
|
|
340
|
+
readonly base: "1.5rem";
|
|
341
|
+
readonly mobile: "1.25rem";
|
|
342
|
+
};
|
|
343
|
+
readonly weight: "600";
|
|
344
|
+
readonly lineHeight: "1.375";
|
|
345
|
+
readonly letterSpacing: "0";
|
|
346
|
+
readonly description: "Component titles, h4";
|
|
347
|
+
};
|
|
348
|
+
readonly 'heading-5': {
|
|
349
|
+
readonly size: {
|
|
350
|
+
readonly base: "1.25rem";
|
|
351
|
+
readonly mobile: "1.125rem";
|
|
352
|
+
};
|
|
353
|
+
readonly weight: "500";
|
|
354
|
+
readonly lineHeight: "1.5";
|
|
355
|
+
readonly letterSpacing: "0";
|
|
356
|
+
readonly description: "Small headings, h5";
|
|
357
|
+
};
|
|
358
|
+
readonly 'heading-6': {
|
|
359
|
+
readonly size: {
|
|
360
|
+
readonly base: "1.125rem";
|
|
361
|
+
readonly mobile: "1rem";
|
|
362
|
+
};
|
|
363
|
+
readonly weight: "500";
|
|
364
|
+
readonly lineHeight: "1.5";
|
|
365
|
+
readonly letterSpacing: "0";
|
|
366
|
+
readonly description: "Tiny headings, h6";
|
|
367
|
+
};
|
|
368
|
+
readonly 'body-large': {
|
|
369
|
+
readonly size: {
|
|
370
|
+
readonly base: "1.125rem";
|
|
371
|
+
readonly mobile: "1rem";
|
|
372
|
+
};
|
|
373
|
+
readonly weight: "400";
|
|
374
|
+
readonly lineHeight: "1.625";
|
|
375
|
+
readonly letterSpacing: "0";
|
|
376
|
+
readonly description: "Lead paragraphs, intro text";
|
|
377
|
+
};
|
|
378
|
+
readonly body: {
|
|
379
|
+
readonly size: {
|
|
380
|
+
readonly base: "1rem";
|
|
381
|
+
readonly mobile: "1rem";
|
|
382
|
+
};
|
|
383
|
+
readonly weight: "400";
|
|
384
|
+
readonly lineHeight: "1.5";
|
|
385
|
+
readonly letterSpacing: "0";
|
|
386
|
+
readonly description: "Default body text";
|
|
387
|
+
};
|
|
388
|
+
readonly 'body-small': {
|
|
389
|
+
readonly size: {
|
|
390
|
+
readonly base: "0.875rem";
|
|
391
|
+
readonly mobile: "0.875rem";
|
|
392
|
+
};
|
|
393
|
+
readonly weight: "400";
|
|
394
|
+
readonly lineHeight: "1.5";
|
|
395
|
+
readonly letterSpacing: "0";
|
|
396
|
+
readonly description: "Small body text, fine print";
|
|
397
|
+
};
|
|
398
|
+
readonly caption: {
|
|
399
|
+
readonly size: {
|
|
400
|
+
readonly base: "0.75rem";
|
|
401
|
+
readonly mobile: "0.75rem";
|
|
402
|
+
};
|
|
403
|
+
readonly weight: "400";
|
|
404
|
+
readonly lineHeight: "1.375";
|
|
405
|
+
readonly letterSpacing: "0.025em";
|
|
406
|
+
readonly description: "Captions, labels, metadata";
|
|
407
|
+
};
|
|
408
|
+
readonly overline: {
|
|
409
|
+
readonly size: {
|
|
410
|
+
readonly base: "0.75rem";
|
|
411
|
+
readonly mobile: "0.75rem";
|
|
412
|
+
};
|
|
413
|
+
readonly weight: "600";
|
|
414
|
+
readonly lineHeight: "1.5";
|
|
415
|
+
readonly letterSpacing: "0.1em";
|
|
416
|
+
readonly description: "Eyebrows, categories, all-caps labels";
|
|
417
|
+
};
|
|
418
|
+
};
|
|
419
|
+
/**
|
|
420
|
+
* Get CSS variable name for a font family
|
|
421
|
+
*/
|
|
422
|
+
declare function getFontVariable(theme: TypographyTheme, type: 'heading' | 'body' | 'mono' | 'serif' | 'sans'): string;
|
|
423
|
+
/**
|
|
424
|
+
* Get all font family CSS variables for a theme
|
|
425
|
+
*/
|
|
426
|
+
declare function getThemeFontVariables(theme: TypographyTheme): Record<string, string>;
|
|
427
|
+
/**
|
|
428
|
+
* Get responsive font size CSS
|
|
429
|
+
*/
|
|
430
|
+
declare function getResponsiveFontSize(sizeKey: keyof typeof fontSizes): string;
|
|
431
|
+
/**
|
|
432
|
+
* Complete typography system export
|
|
433
|
+
* Import this for access to entire typography token set
|
|
434
|
+
*
|
|
435
|
+
* Note: This is the comprehensive typography system with font families,
|
|
436
|
+
* scales, presets, and utilities. For simple semantic aliases compatible
|
|
437
|
+
* with existing code, use `typography` from './base'
|
|
438
|
+
*/
|
|
439
|
+
declare const typographySystem: {
|
|
440
|
+
readonly families: {
|
|
441
|
+
readonly studio: {
|
|
442
|
+
readonly heading: "Outfit";
|
|
443
|
+
readonly body: "Manrope";
|
|
444
|
+
readonly mono: "Fira Code";
|
|
445
|
+
readonly description: "Modern geometric sans-serif with clean readability";
|
|
446
|
+
readonly usage: {
|
|
447
|
+
readonly heading: "Headlines, titles, emphasis";
|
|
448
|
+
readonly body: "Paragraphs, UI text, readable content";
|
|
449
|
+
readonly mono: "Code blocks, technical content";
|
|
450
|
+
};
|
|
451
|
+
};
|
|
452
|
+
readonly sage: {
|
|
453
|
+
readonly heading: "Lora";
|
|
454
|
+
readonly body: "Instrument Sans";
|
|
455
|
+
readonly serif: "Lora";
|
|
456
|
+
readonly sans: "Instrument Sans";
|
|
457
|
+
readonly mono: "Fira Code";
|
|
458
|
+
readonly description: "Elegant serif headings with modern sans body";
|
|
459
|
+
readonly usage: {
|
|
460
|
+
readonly heading: "Elegant headings, article titles";
|
|
461
|
+
readonly body: "Long-form content, UI text";
|
|
462
|
+
readonly serif: "Pull quotes, emphasis";
|
|
463
|
+
readonly sans: "UI elements, captions";
|
|
464
|
+
readonly mono: "Code blocks, technical content";
|
|
465
|
+
};
|
|
466
|
+
};
|
|
467
|
+
readonly volt: {
|
|
468
|
+
readonly heading: "Space Grotesk";
|
|
469
|
+
readonly body: "Space Grotesk";
|
|
470
|
+
readonly sans: "Space Grotesk";
|
|
471
|
+
readonly mono: "Fira Code";
|
|
472
|
+
readonly description: "Tech-forward, consistent geometric throughout";
|
|
473
|
+
readonly usage: {
|
|
474
|
+
readonly heading: "All headlines";
|
|
475
|
+
readonly body: "All body text (unified typography)";
|
|
476
|
+
readonly sans: "All sans-serif needs";
|
|
477
|
+
readonly mono: "Code blocks, technical content";
|
|
478
|
+
};
|
|
479
|
+
};
|
|
480
|
+
};
|
|
481
|
+
readonly sizes: {
|
|
482
|
+
readonly xs: {
|
|
483
|
+
readonly base: "0.75rem";
|
|
484
|
+
readonly mobile: "0.75rem";
|
|
485
|
+
};
|
|
486
|
+
readonly sm: {
|
|
487
|
+
readonly base: "0.875rem";
|
|
488
|
+
readonly mobile: "0.875rem";
|
|
489
|
+
};
|
|
490
|
+
readonly base: {
|
|
491
|
+
readonly base: "1rem";
|
|
492
|
+
readonly mobile: "1rem";
|
|
493
|
+
};
|
|
494
|
+
readonly lg: {
|
|
495
|
+
readonly base: "1.125rem";
|
|
496
|
+
readonly mobile: "1rem";
|
|
497
|
+
};
|
|
498
|
+
readonly xl: {
|
|
499
|
+
readonly base: "1.25rem";
|
|
500
|
+
readonly mobile: "1.125rem";
|
|
501
|
+
};
|
|
502
|
+
readonly '2xl': {
|
|
503
|
+
readonly base: "1.5rem";
|
|
504
|
+
readonly mobile: "1.25rem";
|
|
505
|
+
};
|
|
506
|
+
readonly '3xl': {
|
|
507
|
+
readonly base: "1.875rem";
|
|
508
|
+
readonly mobile: "1.5rem";
|
|
509
|
+
};
|
|
510
|
+
readonly '4xl': {
|
|
511
|
+
readonly base: "2.25rem";
|
|
512
|
+
readonly mobile: "1.875rem";
|
|
513
|
+
};
|
|
514
|
+
readonly '5xl': {
|
|
515
|
+
readonly base: "3rem";
|
|
516
|
+
readonly mobile: "2.25rem";
|
|
517
|
+
};
|
|
518
|
+
readonly '6xl': {
|
|
519
|
+
readonly base: "3.75rem";
|
|
520
|
+
readonly mobile: "2.5rem";
|
|
521
|
+
};
|
|
522
|
+
readonly '7xl': {
|
|
523
|
+
readonly base: "4.5rem";
|
|
524
|
+
readonly mobile: "3rem";
|
|
525
|
+
};
|
|
526
|
+
readonly '8xl': {
|
|
527
|
+
readonly base: "6rem";
|
|
528
|
+
readonly mobile: "3.75rem";
|
|
529
|
+
};
|
|
530
|
+
readonly '9xl': {
|
|
531
|
+
readonly base: "8rem";
|
|
532
|
+
readonly mobile: "4.5rem";
|
|
533
|
+
};
|
|
534
|
+
};
|
|
535
|
+
readonly weights: {
|
|
536
|
+
readonly thin: "100";
|
|
537
|
+
readonly extralight: "200";
|
|
538
|
+
readonly light: "300";
|
|
539
|
+
readonly normal: "400";
|
|
540
|
+
readonly medium: "500";
|
|
541
|
+
readonly semibold: "600";
|
|
542
|
+
readonly bold: "700";
|
|
543
|
+
readonly extrabold: "800";
|
|
544
|
+
readonly black: "900";
|
|
545
|
+
};
|
|
546
|
+
readonly lineHeights: {
|
|
547
|
+
readonly none: "1";
|
|
548
|
+
readonly tight: "1.25";
|
|
549
|
+
readonly snug: "1.375";
|
|
550
|
+
readonly normal: "1.5";
|
|
551
|
+
readonly relaxed: "1.625";
|
|
552
|
+
readonly loose: "1.75";
|
|
553
|
+
readonly extraloose: "2";
|
|
554
|
+
};
|
|
555
|
+
readonly letterSpacing: {
|
|
556
|
+
readonly tighter: "-0.05em";
|
|
557
|
+
readonly tight: "-0.025em";
|
|
558
|
+
readonly normal: "0";
|
|
559
|
+
readonly wide: "0.025em";
|
|
560
|
+
readonly wider: "0.05em";
|
|
561
|
+
readonly widest: "0.1em";
|
|
562
|
+
};
|
|
563
|
+
readonly presets: {
|
|
564
|
+
readonly 'display-large': {
|
|
565
|
+
readonly size: {
|
|
566
|
+
readonly base: "6rem";
|
|
567
|
+
readonly mobile: "3.75rem";
|
|
568
|
+
};
|
|
569
|
+
readonly weight: "700";
|
|
570
|
+
readonly lineHeight: "1";
|
|
571
|
+
readonly letterSpacing: "-0.05em";
|
|
572
|
+
readonly description: "Large hero text, landing pages";
|
|
573
|
+
};
|
|
574
|
+
readonly display: {
|
|
575
|
+
readonly size: {
|
|
576
|
+
readonly base: "4.5rem";
|
|
577
|
+
readonly mobile: "3rem";
|
|
578
|
+
};
|
|
579
|
+
readonly weight: "700";
|
|
580
|
+
readonly lineHeight: "1.25";
|
|
581
|
+
readonly letterSpacing: "-0.025em";
|
|
582
|
+
readonly description: "Hero sections, major headings";
|
|
583
|
+
};
|
|
584
|
+
readonly 'heading-1': {
|
|
585
|
+
readonly size: {
|
|
586
|
+
readonly base: "3.75rem";
|
|
587
|
+
readonly mobile: "2.5rem";
|
|
588
|
+
};
|
|
589
|
+
readonly weight: "700";
|
|
590
|
+
readonly lineHeight: "1.25";
|
|
591
|
+
readonly letterSpacing: "-0.025em";
|
|
592
|
+
readonly description: "Page titles, h1";
|
|
593
|
+
};
|
|
594
|
+
readonly 'heading-2': {
|
|
595
|
+
readonly size: {
|
|
596
|
+
readonly base: "3rem";
|
|
597
|
+
readonly mobile: "2.25rem";
|
|
598
|
+
};
|
|
599
|
+
readonly weight: "700";
|
|
600
|
+
readonly lineHeight: "1.25";
|
|
601
|
+
readonly letterSpacing: "0";
|
|
602
|
+
readonly description: "Section titles, h2";
|
|
603
|
+
};
|
|
604
|
+
readonly 'heading-3': {
|
|
605
|
+
readonly size: {
|
|
606
|
+
readonly base: "2.25rem";
|
|
607
|
+
readonly mobile: "1.875rem";
|
|
608
|
+
};
|
|
609
|
+
readonly weight: "600";
|
|
610
|
+
readonly lineHeight: "1.375";
|
|
611
|
+
readonly letterSpacing: "0";
|
|
612
|
+
readonly description: "Subsection titles, h3";
|
|
613
|
+
};
|
|
614
|
+
readonly 'heading-4': {
|
|
615
|
+
readonly size: {
|
|
616
|
+
readonly base: "1.5rem";
|
|
617
|
+
readonly mobile: "1.25rem";
|
|
618
|
+
};
|
|
619
|
+
readonly weight: "600";
|
|
620
|
+
readonly lineHeight: "1.375";
|
|
621
|
+
readonly letterSpacing: "0";
|
|
622
|
+
readonly description: "Component titles, h4";
|
|
623
|
+
};
|
|
624
|
+
readonly 'heading-5': {
|
|
625
|
+
readonly size: {
|
|
626
|
+
readonly base: "1.25rem";
|
|
627
|
+
readonly mobile: "1.125rem";
|
|
628
|
+
};
|
|
629
|
+
readonly weight: "500";
|
|
630
|
+
readonly lineHeight: "1.5";
|
|
631
|
+
readonly letterSpacing: "0";
|
|
632
|
+
readonly description: "Small headings, h5";
|
|
633
|
+
};
|
|
634
|
+
readonly 'heading-6': {
|
|
635
|
+
readonly size: {
|
|
636
|
+
readonly base: "1.125rem";
|
|
637
|
+
readonly mobile: "1rem";
|
|
638
|
+
};
|
|
639
|
+
readonly weight: "500";
|
|
640
|
+
readonly lineHeight: "1.5";
|
|
641
|
+
readonly letterSpacing: "0";
|
|
642
|
+
readonly description: "Tiny headings, h6";
|
|
643
|
+
};
|
|
644
|
+
readonly 'body-large': {
|
|
645
|
+
readonly size: {
|
|
646
|
+
readonly base: "1.125rem";
|
|
647
|
+
readonly mobile: "1rem";
|
|
648
|
+
};
|
|
649
|
+
readonly weight: "400";
|
|
650
|
+
readonly lineHeight: "1.625";
|
|
651
|
+
readonly letterSpacing: "0";
|
|
652
|
+
readonly description: "Lead paragraphs, intro text";
|
|
653
|
+
};
|
|
654
|
+
readonly body: {
|
|
655
|
+
readonly size: {
|
|
656
|
+
readonly base: "1rem";
|
|
657
|
+
readonly mobile: "1rem";
|
|
658
|
+
};
|
|
659
|
+
readonly weight: "400";
|
|
660
|
+
readonly lineHeight: "1.5";
|
|
661
|
+
readonly letterSpacing: "0";
|
|
662
|
+
readonly description: "Default body text";
|
|
663
|
+
};
|
|
664
|
+
readonly 'body-small': {
|
|
665
|
+
readonly size: {
|
|
666
|
+
readonly base: "0.875rem";
|
|
667
|
+
readonly mobile: "0.875rem";
|
|
668
|
+
};
|
|
669
|
+
readonly weight: "400";
|
|
670
|
+
readonly lineHeight: "1.5";
|
|
671
|
+
readonly letterSpacing: "0";
|
|
672
|
+
readonly description: "Small body text, fine print";
|
|
673
|
+
};
|
|
674
|
+
readonly caption: {
|
|
675
|
+
readonly size: {
|
|
676
|
+
readonly base: "0.75rem";
|
|
677
|
+
readonly mobile: "0.75rem";
|
|
678
|
+
};
|
|
679
|
+
readonly weight: "400";
|
|
680
|
+
readonly lineHeight: "1.375";
|
|
681
|
+
readonly letterSpacing: "0.025em";
|
|
682
|
+
readonly description: "Captions, labels, metadata";
|
|
683
|
+
};
|
|
684
|
+
readonly overline: {
|
|
685
|
+
readonly size: {
|
|
686
|
+
readonly base: "0.75rem";
|
|
687
|
+
readonly mobile: "0.75rem";
|
|
688
|
+
};
|
|
689
|
+
readonly weight: "600";
|
|
690
|
+
readonly lineHeight: "1.5";
|
|
691
|
+
readonly letterSpacing: "0.1em";
|
|
692
|
+
readonly description: "Eyebrows, categories, all-caps labels";
|
|
693
|
+
};
|
|
694
|
+
};
|
|
695
|
+
readonly semantic: {
|
|
696
|
+
readonly sizes: {
|
|
697
|
+
readonly 'heading-1': "hero";
|
|
698
|
+
readonly 'heading-2': "5xl";
|
|
699
|
+
readonly 'heading-3': "4xl";
|
|
700
|
+
readonly 'heading-4': "2xl";
|
|
701
|
+
readonly 'heading-5': "xl";
|
|
702
|
+
readonly 'heading-6': "lg";
|
|
703
|
+
readonly 'body-large': "lg";
|
|
704
|
+
readonly body: "base";
|
|
705
|
+
readonly 'body-small': "sm";
|
|
706
|
+
readonly caption: "xs";
|
|
707
|
+
};
|
|
708
|
+
readonly weights: {
|
|
709
|
+
readonly heading: "bold";
|
|
710
|
+
readonly 'heading-light': "semibold";
|
|
711
|
+
readonly 'heading-heavy': "extrabold";
|
|
712
|
+
readonly body: "normal";
|
|
713
|
+
readonly 'body-emphasis': "medium";
|
|
714
|
+
readonly 'body-strong': "semibold";
|
|
715
|
+
readonly caption: "normal";
|
|
716
|
+
};
|
|
717
|
+
readonly lineHeights: {
|
|
718
|
+
readonly heading: "tight";
|
|
719
|
+
readonly 'heading-display': "none";
|
|
720
|
+
readonly body: "normal";
|
|
721
|
+
readonly 'body-relaxed': "relaxed";
|
|
722
|
+
readonly caption: "snug";
|
|
723
|
+
};
|
|
724
|
+
readonly letterSpacing: {
|
|
725
|
+
readonly heading: "tight";
|
|
726
|
+
readonly 'heading-display': "tighter";
|
|
727
|
+
readonly body: "normal";
|
|
728
|
+
readonly 'small-caps': "wider";
|
|
729
|
+
readonly 'all-caps': "widest";
|
|
730
|
+
};
|
|
731
|
+
};
|
|
732
|
+
readonly utils: {
|
|
733
|
+
readonly getFontVariable: typeof getFontVariable;
|
|
734
|
+
readonly getThemeFontVariables: typeof getThemeFontVariables;
|
|
735
|
+
readonly getResponsiveFontSize: typeof getResponsiveFontSize;
|
|
736
|
+
};
|
|
737
|
+
};
|
|
738
|
+
/**
|
|
739
|
+
* Type exports for TypeScript consumers
|
|
740
|
+
*/
|
|
741
|
+
type FontSize = keyof typeof fontSizes;
|
|
742
|
+
type FontWeight = keyof typeof fontWeights;
|
|
743
|
+
type LineHeight = keyof typeof lineHeights;
|
|
744
|
+
type LetterSpacing = keyof typeof letterSpacing;
|
|
745
|
+
type TypePreset = keyof typeof typePresets;
|
|
746
|
+
|
|
747
|
+
/**
|
|
748
|
+
* Curated Font Theme Library
|
|
749
|
+
* Pre-designed, harmonious font pairings for quick customization
|
|
750
|
+
*
|
|
751
|
+
* Philosophy: Provide expert font pairings with clear guidance (constraints),
|
|
752
|
+
* while enabling creative freedom through custom themes. Typography is as
|
|
753
|
+
* crucial to brand identity as color—treat it with systematic rigor.
|
|
754
|
+
*/
|
|
755
|
+
interface FontTheme {
|
|
756
|
+
id: string;
|
|
757
|
+
name: string;
|
|
758
|
+
description: string;
|
|
759
|
+
category: FontThemeCategory;
|
|
760
|
+
heading: string;
|
|
761
|
+
body: string;
|
|
762
|
+
mono: string;
|
|
763
|
+
headingWeight?: string;
|
|
764
|
+
bodyWeight?: string;
|
|
765
|
+
letterSpacing?: {
|
|
766
|
+
heading?: string;
|
|
767
|
+
body?: string;
|
|
768
|
+
};
|
|
769
|
+
lineHeight?: {
|
|
770
|
+
heading?: string;
|
|
771
|
+
body?: string;
|
|
772
|
+
};
|
|
773
|
+
isCustom?: boolean;
|
|
774
|
+
wcagReadable?: boolean;
|
|
775
|
+
mood?: string[];
|
|
776
|
+
bestFor?: string;
|
|
777
|
+
pairing?: string;
|
|
778
|
+
scale?: TypographyScale;
|
|
779
|
+
}
|
|
780
|
+
type FontThemeCategory = 'professional' | 'creative' | 'editorial' | 'tech' | 'friendly' | 'minimal' | 'luxury' | 'playful' | 'custom';
|
|
781
|
+
/**
|
|
782
|
+
* Type Level
|
|
783
|
+
* Detailed properties for a single type level (Display, H1, Body, etc.)
|
|
784
|
+
*/
|
|
785
|
+
interface TypeLevel {
|
|
786
|
+
fontFamily: string;
|
|
787
|
+
weight: number;
|
|
788
|
+
size: number;
|
|
789
|
+
lineHeight: number;
|
|
790
|
+
letterSpacing: string;
|
|
791
|
+
}
|
|
792
|
+
/**
|
|
793
|
+
* Typography Scale
|
|
794
|
+
* Complete type scale with all 8 levels for granular control
|
|
795
|
+
*/
|
|
796
|
+
interface TypographyScale {
|
|
797
|
+
display: TypeLevel;
|
|
798
|
+
h1: TypeLevel;
|
|
799
|
+
h2: TypeLevel;
|
|
800
|
+
h3: TypeLevel;
|
|
801
|
+
h4: TypeLevel;
|
|
802
|
+
body: TypeLevel;
|
|
803
|
+
small: TypeLevel;
|
|
804
|
+
code: TypeLevel;
|
|
805
|
+
}
|
|
806
|
+
/**
|
|
807
|
+
* Curated Font Theme Collection
|
|
808
|
+
*
|
|
809
|
+
* Each theme represents a carefully chosen font pairing that works well together.
|
|
810
|
+
* Pairings consider contrast (serif vs sans), readability, mood, and use case.
|
|
811
|
+
*/
|
|
812
|
+
declare const fontThemes: FontTheme[];
|
|
813
|
+
/**
|
|
814
|
+
* Get font themes by category
|
|
815
|
+
*/
|
|
816
|
+
declare function getFontThemesByCategory(category: FontThemeCategory): FontTheme[];
|
|
817
|
+
/**
|
|
818
|
+
* Get font themes by mood/tag
|
|
819
|
+
*/
|
|
820
|
+
declare function getFontThemesByMood(mood: string): FontTheme[];
|
|
821
|
+
/**
|
|
822
|
+
* Search font themes by use case
|
|
823
|
+
*/
|
|
824
|
+
declare function getFontThemesForUseCase(useCase: string): FontTheme[];
|
|
825
|
+
/**
|
|
826
|
+
* Get accessible font themes only (WCAG-readable)
|
|
827
|
+
*/
|
|
828
|
+
declare function getAccessibleFontThemes(): FontTheme[];
|
|
829
|
+
/**
|
|
830
|
+
* Get font theme by ID
|
|
831
|
+
*/
|
|
832
|
+
declare function getFontThemeById(id: string): FontTheme | undefined;
|
|
833
|
+
/**
|
|
834
|
+
* Generate a detailed typography scale from a simple FontTheme
|
|
835
|
+
* Uses modular scale (1.25 ratio) for sizes and sensible defaults for other properties
|
|
836
|
+
*
|
|
837
|
+
* @param fontTheme - The simple font theme to generate a scale from
|
|
838
|
+
* @returns TypographyScale with all 8 type levels populated with sensible defaults
|
|
839
|
+
*/
|
|
840
|
+
declare function generateScale(fontTheme: FontTheme): TypographyScale;
|
|
841
|
+
|
|
842
|
+
export { getAccessibleFontThemes as A, getFontThemeById as B, generateScale as C, type FontSize as F, type LineHeight as L, type TypographyTheme as T, fontLoadingConfig as a, fontSizes as b, fontWeights as c, semanticWeights as d, semanticLineHeights as e, fontFamilies as f, letterSpacing as g, semanticLetterSpacing as h, getFontVariable as i, getThemeFontVariables as j, getResponsiveFontSize as k, lineHeights as l, typographySystem as m, type FontWeight as n, type LetterSpacing as o, type TypePreset as p, type FontTheme as q, type FontThemeCategory as r, semanticSizes as s, typePresets as t, type TypeLevel as u, type TypographyScale as v, fontThemes as w, getFontThemesByCategory as x, getFontThemesByMood as y, getFontThemesForUseCase as z };
|