@octavius2929-personal/design-system 0.24.0 → 1.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/dist/index.cjs +191 -99
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +586 -482
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +898 -172
- package/dist/index.d.ts +898 -172
- package/dist/index.js +191 -99
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,66 +1,686 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ElementType, ComponentPropsWithoutRef, Ref, SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
|
-
interface ColorTokens {
|
|
5
|
-
bg1: string;
|
|
6
|
-
bg2: string;
|
|
7
|
-
bg3: string;
|
|
8
|
-
bgInset: string;
|
|
9
|
-
fg1: string;
|
|
10
|
-
fg2: string;
|
|
11
|
-
fg3: string;
|
|
12
|
-
fgOnAccent: string;
|
|
13
|
-
border1: string;
|
|
14
|
-
border2: string;
|
|
15
|
-
borderStrong: string;
|
|
16
|
-
accent: string;
|
|
17
|
-
accentHover: string;
|
|
18
|
-
accentSoft: string;
|
|
19
|
-
/** Accent como TEXTO sobre el fondo de página (outline/ghost, links). Cumple AA (≥4.5);
|
|
20
|
-
* en dark es más claro que `accent` (que es un fondo de relleno y debe ser oscuro). */
|
|
21
|
-
accentText: string;
|
|
22
|
-
ok: string;
|
|
23
|
-
warn: string;
|
|
24
|
-
danger: string;
|
|
25
|
-
dangerHover: string;
|
|
26
|
-
dangerSoft: string;
|
|
27
|
-
/** Danger como TEXTO sobre el fondo de página (errores, outline/ghost). Cumple AA (≥4.5). */
|
|
28
|
-
dangerText: string;
|
|
29
|
-
info: string;
|
|
30
|
-
focus: string;
|
|
31
|
-
scrim: string;
|
|
32
|
-
}
|
|
33
|
-
type Mode = "light" | "dark" | "sepia" | "contrast";
|
|
34
|
-
/** El usuario puede fijar un modo concreto o "system" (seguir las preferencias del SO). */
|
|
35
|
-
type ModePreference = Mode | "system";
|
|
36
|
-
declare const modeNames: readonly ["light", "dark", "sepia", "contrast"];
|
|
37
|
-
|
|
38
4
|
declare const schemas: {
|
|
39
5
|
readonly tinta: {
|
|
40
6
|
light: {
|
|
41
7
|
color: {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
8
|
+
bg: {
|
|
9
|
+
page: string;
|
|
10
|
+
surface: string;
|
|
11
|
+
sunken: string;
|
|
12
|
+
inset: string;
|
|
13
|
+
};
|
|
14
|
+
fg: {
|
|
15
|
+
strong: string;
|
|
16
|
+
muted: string;
|
|
17
|
+
subtle: string;
|
|
18
|
+
onAccent: string;
|
|
19
|
+
};
|
|
20
|
+
border: {
|
|
21
|
+
subtle: string;
|
|
22
|
+
default: string;
|
|
23
|
+
strong: string;
|
|
24
|
+
};
|
|
25
|
+
accent: {
|
|
26
|
+
base: string;
|
|
27
|
+
hover: string;
|
|
28
|
+
soft: string;
|
|
29
|
+
text: string;
|
|
30
|
+
};
|
|
31
|
+
danger: {
|
|
32
|
+
base: string;
|
|
33
|
+
hover: string;
|
|
34
|
+
soft: string;
|
|
35
|
+
text: string;
|
|
36
|
+
};
|
|
37
|
+
status: {
|
|
38
|
+
ok: string;
|
|
39
|
+
warn: string;
|
|
40
|
+
info: string;
|
|
41
|
+
};
|
|
42
|
+
focus: string;
|
|
43
|
+
scrim: string;
|
|
44
|
+
};
|
|
45
|
+
font: {
|
|
46
|
+
readonly display: "'DM Serif Display', 'Times New Roman', serif";
|
|
47
|
+
readonly text: "'Newsreader', Georgia, serif";
|
|
48
|
+
readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
|
|
49
|
+
readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
|
|
50
|
+
};
|
|
51
|
+
text: {
|
|
52
|
+
readonly eyebrow: {
|
|
53
|
+
readonly size: "0.694rem";
|
|
54
|
+
readonly lineHeight: "1.2";
|
|
55
|
+
readonly weight: "500";
|
|
56
|
+
readonly letterSpacing: "0.14em";
|
|
57
|
+
};
|
|
58
|
+
readonly display: {
|
|
59
|
+
readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
|
|
60
|
+
readonly lineHeight: "1.05";
|
|
61
|
+
readonly weight: "600";
|
|
62
|
+
readonly letterSpacing: "-0.01em";
|
|
63
|
+
};
|
|
64
|
+
readonly h1: {
|
|
65
|
+
readonly size: "2.9rem";
|
|
66
|
+
readonly lineHeight: "1.05";
|
|
67
|
+
readonly weight: "600";
|
|
68
|
+
readonly letterSpacing: "-0.01em";
|
|
69
|
+
};
|
|
70
|
+
readonly h2: {
|
|
71
|
+
readonly size: "2.1rem";
|
|
72
|
+
readonly lineHeight: "1.2";
|
|
73
|
+
readonly weight: "600";
|
|
74
|
+
readonly letterSpacing: "0";
|
|
75
|
+
};
|
|
76
|
+
readonly h3: {
|
|
77
|
+
readonly size: "1.563rem";
|
|
78
|
+
readonly lineHeight: "1.2";
|
|
79
|
+
readonly weight: "500";
|
|
80
|
+
readonly letterSpacing: "0";
|
|
81
|
+
};
|
|
82
|
+
readonly h4: {
|
|
83
|
+
readonly size: "1.25rem";
|
|
84
|
+
readonly lineHeight: "1.2";
|
|
85
|
+
readonly weight: "600";
|
|
86
|
+
readonly letterSpacing: "0";
|
|
87
|
+
};
|
|
88
|
+
readonly body: {
|
|
89
|
+
readonly size: "1rem";
|
|
90
|
+
readonly lineHeight: "1.7";
|
|
91
|
+
readonly weight: "400";
|
|
92
|
+
readonly letterSpacing: "0";
|
|
93
|
+
};
|
|
94
|
+
readonly lead: {
|
|
95
|
+
readonly size: "1.25rem";
|
|
96
|
+
readonly lineHeight: "1.7";
|
|
97
|
+
readonly weight: "400";
|
|
98
|
+
readonly letterSpacing: "0";
|
|
99
|
+
};
|
|
100
|
+
readonly small: {
|
|
101
|
+
readonly size: "0.95rem";
|
|
102
|
+
readonly lineHeight: "1.5";
|
|
103
|
+
readonly weight: "400";
|
|
104
|
+
readonly letterSpacing: "0";
|
|
105
|
+
};
|
|
106
|
+
readonly caption: {
|
|
107
|
+
readonly size: "0.833rem";
|
|
108
|
+
readonly lineHeight: "1.5";
|
|
109
|
+
readonly weight: "400";
|
|
110
|
+
readonly letterSpacing: "0.04em";
|
|
111
|
+
};
|
|
112
|
+
};
|
|
113
|
+
space: {
|
|
114
|
+
readonly s0: "0";
|
|
115
|
+
readonly s1: "0.25rem";
|
|
116
|
+
readonly s2: "0.5rem";
|
|
117
|
+
readonly s3: "0.75rem";
|
|
118
|
+
readonly s4: "1rem";
|
|
119
|
+
readonly s5: "1.5rem";
|
|
120
|
+
readonly s6: "2rem";
|
|
121
|
+
readonly s7: "3rem";
|
|
122
|
+
readonly s8: "4rem";
|
|
123
|
+
readonly s9: "6rem";
|
|
124
|
+
};
|
|
125
|
+
radius: {
|
|
126
|
+
readonly none: "0px";
|
|
127
|
+
readonly sm: "3px";
|
|
128
|
+
readonly md: "5px";
|
|
129
|
+
readonly lg: "8px";
|
|
130
|
+
readonly base: "4px";
|
|
131
|
+
readonly full: "999px";
|
|
132
|
+
};
|
|
133
|
+
border: {
|
|
134
|
+
readonly hair: "1px";
|
|
135
|
+
readonly rule: "1.5px";
|
|
136
|
+
readonly heavy: "2px";
|
|
137
|
+
};
|
|
138
|
+
tracking: {
|
|
139
|
+
readonly tight: "-0.01em";
|
|
140
|
+
readonly normal: "0";
|
|
141
|
+
readonly wide: "0.04em";
|
|
142
|
+
readonly wider: "0.1em";
|
|
143
|
+
readonly widest: "0.14em";
|
|
144
|
+
};
|
|
145
|
+
weight: {
|
|
146
|
+
readonly light: "300";
|
|
147
|
+
readonly regular: "400";
|
|
148
|
+
readonly medium: "500";
|
|
149
|
+
readonly semibold: "600";
|
|
150
|
+
readonly bold: "700";
|
|
151
|
+
};
|
|
152
|
+
dur: {
|
|
153
|
+
readonly fast: "120ms";
|
|
154
|
+
readonly base: "200ms";
|
|
155
|
+
readonly slow: "360ms";
|
|
156
|
+
};
|
|
157
|
+
ease: {
|
|
158
|
+
readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
|
|
159
|
+
};
|
|
160
|
+
shadow: {
|
|
161
|
+
readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
|
|
162
|
+
readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
|
|
163
|
+
readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
|
|
164
|
+
};
|
|
165
|
+
};
|
|
166
|
+
dark: {
|
|
167
|
+
color: {
|
|
168
|
+
bg: {
|
|
169
|
+
page: string;
|
|
170
|
+
surface: string;
|
|
171
|
+
sunken: string;
|
|
172
|
+
inset: string;
|
|
173
|
+
};
|
|
174
|
+
fg: {
|
|
175
|
+
strong: string;
|
|
176
|
+
muted: string;
|
|
177
|
+
subtle: string;
|
|
178
|
+
onAccent: string;
|
|
179
|
+
};
|
|
180
|
+
border: {
|
|
181
|
+
subtle: string;
|
|
182
|
+
default: string;
|
|
183
|
+
strong: string;
|
|
184
|
+
};
|
|
185
|
+
accent: {
|
|
186
|
+
base: string;
|
|
187
|
+
hover: string;
|
|
188
|
+
soft: string;
|
|
189
|
+
text: string;
|
|
190
|
+
};
|
|
191
|
+
danger: {
|
|
192
|
+
base: string;
|
|
193
|
+
hover: string;
|
|
194
|
+
soft: string;
|
|
195
|
+
text: string;
|
|
196
|
+
};
|
|
197
|
+
status: {
|
|
198
|
+
ok: string;
|
|
199
|
+
warn: string;
|
|
200
|
+
info: string;
|
|
201
|
+
};
|
|
202
|
+
focus: string;
|
|
203
|
+
scrim: string;
|
|
204
|
+
};
|
|
205
|
+
font: {
|
|
206
|
+
readonly display: "'DM Serif Display', 'Times New Roman', serif";
|
|
207
|
+
readonly text: "'Newsreader', Georgia, serif";
|
|
208
|
+
readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
|
|
209
|
+
readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
|
|
210
|
+
};
|
|
211
|
+
text: {
|
|
212
|
+
readonly eyebrow: {
|
|
213
|
+
readonly size: "0.694rem";
|
|
214
|
+
readonly lineHeight: "1.2";
|
|
215
|
+
readonly weight: "500";
|
|
216
|
+
readonly letterSpacing: "0.14em";
|
|
217
|
+
};
|
|
218
|
+
readonly display: {
|
|
219
|
+
readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
|
|
220
|
+
readonly lineHeight: "1.05";
|
|
221
|
+
readonly weight: "600";
|
|
222
|
+
readonly letterSpacing: "-0.01em";
|
|
223
|
+
};
|
|
224
|
+
readonly h1: {
|
|
225
|
+
readonly size: "2.9rem";
|
|
226
|
+
readonly lineHeight: "1.05";
|
|
227
|
+
readonly weight: "600";
|
|
228
|
+
readonly letterSpacing: "-0.01em";
|
|
229
|
+
};
|
|
230
|
+
readonly h2: {
|
|
231
|
+
readonly size: "2.1rem";
|
|
232
|
+
readonly lineHeight: "1.2";
|
|
233
|
+
readonly weight: "600";
|
|
234
|
+
readonly letterSpacing: "0";
|
|
235
|
+
};
|
|
236
|
+
readonly h3: {
|
|
237
|
+
readonly size: "1.563rem";
|
|
238
|
+
readonly lineHeight: "1.2";
|
|
239
|
+
readonly weight: "500";
|
|
240
|
+
readonly letterSpacing: "0";
|
|
241
|
+
};
|
|
242
|
+
readonly h4: {
|
|
243
|
+
readonly size: "1.25rem";
|
|
244
|
+
readonly lineHeight: "1.2";
|
|
245
|
+
readonly weight: "600";
|
|
246
|
+
readonly letterSpacing: "0";
|
|
247
|
+
};
|
|
248
|
+
readonly body: {
|
|
249
|
+
readonly size: "1rem";
|
|
250
|
+
readonly lineHeight: "1.7";
|
|
251
|
+
readonly weight: "400";
|
|
252
|
+
readonly letterSpacing: "0";
|
|
253
|
+
};
|
|
254
|
+
readonly lead: {
|
|
255
|
+
readonly size: "1.25rem";
|
|
256
|
+
readonly lineHeight: "1.7";
|
|
257
|
+
readonly weight: "400";
|
|
258
|
+
readonly letterSpacing: "0";
|
|
259
|
+
};
|
|
260
|
+
readonly small: {
|
|
261
|
+
readonly size: "0.95rem";
|
|
262
|
+
readonly lineHeight: "1.5";
|
|
263
|
+
readonly weight: "400";
|
|
264
|
+
readonly letterSpacing: "0";
|
|
265
|
+
};
|
|
266
|
+
readonly caption: {
|
|
267
|
+
readonly size: "0.833rem";
|
|
268
|
+
readonly lineHeight: "1.5";
|
|
269
|
+
readonly weight: "400";
|
|
270
|
+
readonly letterSpacing: "0.04em";
|
|
271
|
+
};
|
|
272
|
+
};
|
|
273
|
+
space: {
|
|
274
|
+
readonly s0: "0";
|
|
275
|
+
readonly s1: "0.25rem";
|
|
276
|
+
readonly s2: "0.5rem";
|
|
277
|
+
readonly s3: "0.75rem";
|
|
278
|
+
readonly s4: "1rem";
|
|
279
|
+
readonly s5: "1.5rem";
|
|
280
|
+
readonly s6: "2rem";
|
|
281
|
+
readonly s7: "3rem";
|
|
282
|
+
readonly s8: "4rem";
|
|
283
|
+
readonly s9: "6rem";
|
|
284
|
+
};
|
|
285
|
+
radius: {
|
|
286
|
+
readonly none: "0px";
|
|
287
|
+
readonly sm: "3px";
|
|
288
|
+
readonly md: "5px";
|
|
289
|
+
readonly lg: "8px";
|
|
290
|
+
readonly base: "4px";
|
|
291
|
+
readonly full: "999px";
|
|
292
|
+
};
|
|
293
|
+
border: {
|
|
294
|
+
readonly hair: "1px";
|
|
295
|
+
readonly rule: "1.5px";
|
|
296
|
+
readonly heavy: "2px";
|
|
297
|
+
};
|
|
298
|
+
tracking: {
|
|
299
|
+
readonly tight: "-0.01em";
|
|
300
|
+
readonly normal: "0";
|
|
301
|
+
readonly wide: "0.04em";
|
|
302
|
+
readonly wider: "0.1em";
|
|
303
|
+
readonly widest: "0.14em";
|
|
304
|
+
};
|
|
305
|
+
weight: {
|
|
306
|
+
readonly light: "300";
|
|
307
|
+
readonly regular: "400";
|
|
308
|
+
readonly medium: "500";
|
|
309
|
+
readonly semibold: "600";
|
|
310
|
+
readonly bold: "700";
|
|
311
|
+
};
|
|
312
|
+
dur: {
|
|
313
|
+
readonly fast: "120ms";
|
|
314
|
+
readonly base: "200ms";
|
|
315
|
+
readonly slow: "360ms";
|
|
316
|
+
};
|
|
317
|
+
ease: {
|
|
318
|
+
readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
|
|
319
|
+
};
|
|
320
|
+
shadow: {
|
|
321
|
+
readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
|
|
322
|
+
readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
|
|
323
|
+
readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
|
|
324
|
+
};
|
|
325
|
+
};
|
|
326
|
+
sepia: {
|
|
327
|
+
color: {
|
|
328
|
+
bg: {
|
|
329
|
+
page: string;
|
|
330
|
+
surface: string;
|
|
331
|
+
sunken: string;
|
|
332
|
+
inset: string;
|
|
333
|
+
};
|
|
334
|
+
fg: {
|
|
335
|
+
strong: string;
|
|
336
|
+
muted: string;
|
|
337
|
+
subtle: string;
|
|
338
|
+
onAccent: string;
|
|
339
|
+
};
|
|
340
|
+
border: {
|
|
341
|
+
subtle: string;
|
|
342
|
+
default: string;
|
|
343
|
+
strong: string;
|
|
344
|
+
};
|
|
345
|
+
accent: {
|
|
346
|
+
base: string;
|
|
347
|
+
hover: string;
|
|
348
|
+
soft: string;
|
|
349
|
+
text: string;
|
|
350
|
+
};
|
|
351
|
+
danger: {
|
|
352
|
+
base: string;
|
|
353
|
+
hover: string;
|
|
354
|
+
soft: string;
|
|
355
|
+
text: string;
|
|
356
|
+
};
|
|
357
|
+
status: {
|
|
358
|
+
ok: string;
|
|
359
|
+
warn: string;
|
|
360
|
+
info: string;
|
|
361
|
+
};
|
|
362
|
+
focus: string;
|
|
363
|
+
scrim: string;
|
|
364
|
+
};
|
|
365
|
+
font: {
|
|
366
|
+
readonly display: "'DM Serif Display', 'Times New Roman', serif";
|
|
367
|
+
readonly text: "'Newsreader', Georgia, serif";
|
|
368
|
+
readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
|
|
369
|
+
readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
|
|
370
|
+
};
|
|
371
|
+
text: {
|
|
372
|
+
readonly eyebrow: {
|
|
373
|
+
readonly size: "0.694rem";
|
|
374
|
+
readonly lineHeight: "1.2";
|
|
375
|
+
readonly weight: "500";
|
|
376
|
+
readonly letterSpacing: "0.14em";
|
|
377
|
+
};
|
|
378
|
+
readonly display: {
|
|
379
|
+
readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
|
|
380
|
+
readonly lineHeight: "1.05";
|
|
381
|
+
readonly weight: "600";
|
|
382
|
+
readonly letterSpacing: "-0.01em";
|
|
383
|
+
};
|
|
384
|
+
readonly h1: {
|
|
385
|
+
readonly size: "2.9rem";
|
|
386
|
+
readonly lineHeight: "1.05";
|
|
387
|
+
readonly weight: "600";
|
|
388
|
+
readonly letterSpacing: "-0.01em";
|
|
389
|
+
};
|
|
390
|
+
readonly h2: {
|
|
391
|
+
readonly size: "2.1rem";
|
|
392
|
+
readonly lineHeight: "1.2";
|
|
393
|
+
readonly weight: "600";
|
|
394
|
+
readonly letterSpacing: "0";
|
|
395
|
+
};
|
|
396
|
+
readonly h3: {
|
|
397
|
+
readonly size: "1.563rem";
|
|
398
|
+
readonly lineHeight: "1.2";
|
|
399
|
+
readonly weight: "500";
|
|
400
|
+
readonly letterSpacing: "0";
|
|
401
|
+
};
|
|
402
|
+
readonly h4: {
|
|
403
|
+
readonly size: "1.25rem";
|
|
404
|
+
readonly lineHeight: "1.2";
|
|
405
|
+
readonly weight: "600";
|
|
406
|
+
readonly letterSpacing: "0";
|
|
407
|
+
};
|
|
408
|
+
readonly body: {
|
|
409
|
+
readonly size: "1rem";
|
|
410
|
+
readonly lineHeight: "1.7";
|
|
411
|
+
readonly weight: "400";
|
|
412
|
+
readonly letterSpacing: "0";
|
|
413
|
+
};
|
|
414
|
+
readonly lead: {
|
|
415
|
+
readonly size: "1.25rem";
|
|
416
|
+
readonly lineHeight: "1.7";
|
|
417
|
+
readonly weight: "400";
|
|
418
|
+
readonly letterSpacing: "0";
|
|
419
|
+
};
|
|
420
|
+
readonly small: {
|
|
421
|
+
readonly size: "0.95rem";
|
|
422
|
+
readonly lineHeight: "1.5";
|
|
423
|
+
readonly weight: "400";
|
|
424
|
+
readonly letterSpacing: "0";
|
|
425
|
+
};
|
|
426
|
+
readonly caption: {
|
|
427
|
+
readonly size: "0.833rem";
|
|
428
|
+
readonly lineHeight: "1.5";
|
|
429
|
+
readonly weight: "400";
|
|
430
|
+
readonly letterSpacing: "0.04em";
|
|
431
|
+
};
|
|
432
|
+
};
|
|
433
|
+
space: {
|
|
434
|
+
readonly s0: "0";
|
|
435
|
+
readonly s1: "0.25rem";
|
|
436
|
+
readonly s2: "0.5rem";
|
|
437
|
+
readonly s3: "0.75rem";
|
|
438
|
+
readonly s4: "1rem";
|
|
439
|
+
readonly s5: "1.5rem";
|
|
440
|
+
readonly s6: "2rem";
|
|
441
|
+
readonly s7: "3rem";
|
|
442
|
+
readonly s8: "4rem";
|
|
443
|
+
readonly s9: "6rem";
|
|
444
|
+
};
|
|
445
|
+
radius: {
|
|
446
|
+
readonly none: "0px";
|
|
447
|
+
readonly sm: "3px";
|
|
448
|
+
readonly md: "5px";
|
|
449
|
+
readonly lg: "8px";
|
|
450
|
+
readonly base: "4px";
|
|
451
|
+
readonly full: "999px";
|
|
452
|
+
};
|
|
453
|
+
border: {
|
|
454
|
+
readonly hair: "1px";
|
|
455
|
+
readonly rule: "1.5px";
|
|
456
|
+
readonly heavy: "2px";
|
|
457
|
+
};
|
|
458
|
+
tracking: {
|
|
459
|
+
readonly tight: "-0.01em";
|
|
460
|
+
readonly normal: "0";
|
|
461
|
+
readonly wide: "0.04em";
|
|
462
|
+
readonly wider: "0.1em";
|
|
463
|
+
readonly widest: "0.14em";
|
|
464
|
+
};
|
|
465
|
+
weight: {
|
|
466
|
+
readonly light: "300";
|
|
467
|
+
readonly regular: "400";
|
|
468
|
+
readonly medium: "500";
|
|
469
|
+
readonly semibold: "600";
|
|
470
|
+
readonly bold: "700";
|
|
471
|
+
};
|
|
472
|
+
dur: {
|
|
473
|
+
readonly fast: "120ms";
|
|
474
|
+
readonly base: "200ms";
|
|
475
|
+
readonly slow: "360ms";
|
|
476
|
+
};
|
|
477
|
+
ease: {
|
|
478
|
+
readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
|
|
479
|
+
};
|
|
480
|
+
shadow: {
|
|
481
|
+
readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
|
|
482
|
+
readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
|
|
483
|
+
readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
|
|
484
|
+
};
|
|
485
|
+
};
|
|
486
|
+
contrast: {
|
|
487
|
+
color: {
|
|
488
|
+
bg: {
|
|
489
|
+
page: string;
|
|
490
|
+
surface: string;
|
|
491
|
+
sunken: string;
|
|
492
|
+
inset: string;
|
|
493
|
+
};
|
|
494
|
+
fg: {
|
|
495
|
+
strong: string;
|
|
496
|
+
muted: string;
|
|
497
|
+
subtle: string;
|
|
498
|
+
onAccent: string;
|
|
499
|
+
};
|
|
500
|
+
border: {
|
|
501
|
+
subtle: string;
|
|
502
|
+
default: string;
|
|
503
|
+
strong: string;
|
|
504
|
+
};
|
|
505
|
+
accent: {
|
|
506
|
+
base: string;
|
|
507
|
+
hover: string;
|
|
508
|
+
soft: string;
|
|
509
|
+
text: string;
|
|
510
|
+
};
|
|
511
|
+
danger: {
|
|
512
|
+
base: string;
|
|
513
|
+
hover: string;
|
|
514
|
+
soft: string;
|
|
515
|
+
text: string;
|
|
516
|
+
};
|
|
517
|
+
status: {
|
|
518
|
+
ok: string;
|
|
519
|
+
warn: string;
|
|
520
|
+
info: string;
|
|
521
|
+
};
|
|
522
|
+
focus: string;
|
|
523
|
+
scrim: string;
|
|
524
|
+
};
|
|
525
|
+
font: {
|
|
526
|
+
readonly display: "'DM Serif Display', 'Times New Roman', serif";
|
|
527
|
+
readonly text: "'Newsreader', Georgia, serif";
|
|
528
|
+
readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
|
|
529
|
+
readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
|
|
530
|
+
};
|
|
531
|
+
text: {
|
|
532
|
+
readonly eyebrow: {
|
|
533
|
+
readonly size: "0.694rem";
|
|
534
|
+
readonly lineHeight: "1.2";
|
|
535
|
+
readonly weight: "500";
|
|
536
|
+
readonly letterSpacing: "0.14em";
|
|
537
|
+
};
|
|
538
|
+
readonly display: {
|
|
539
|
+
readonly size: "clamp(2.75rem, 1.4rem + 5.6vw, 5.6rem)";
|
|
540
|
+
readonly lineHeight: "1.05";
|
|
541
|
+
readonly weight: "600";
|
|
542
|
+
readonly letterSpacing: "-0.01em";
|
|
543
|
+
};
|
|
544
|
+
readonly h1: {
|
|
545
|
+
readonly size: "2.9rem";
|
|
546
|
+
readonly lineHeight: "1.05";
|
|
547
|
+
readonly weight: "600";
|
|
548
|
+
readonly letterSpacing: "-0.01em";
|
|
549
|
+
};
|
|
550
|
+
readonly h2: {
|
|
551
|
+
readonly size: "2.1rem";
|
|
552
|
+
readonly lineHeight: "1.2";
|
|
553
|
+
readonly weight: "600";
|
|
554
|
+
readonly letterSpacing: "0";
|
|
555
|
+
};
|
|
556
|
+
readonly h3: {
|
|
557
|
+
readonly size: "1.563rem";
|
|
558
|
+
readonly lineHeight: "1.2";
|
|
559
|
+
readonly weight: "500";
|
|
560
|
+
readonly letterSpacing: "0";
|
|
561
|
+
};
|
|
562
|
+
readonly h4: {
|
|
563
|
+
readonly size: "1.25rem";
|
|
564
|
+
readonly lineHeight: "1.2";
|
|
565
|
+
readonly weight: "600";
|
|
566
|
+
readonly letterSpacing: "0";
|
|
567
|
+
};
|
|
568
|
+
readonly body: {
|
|
569
|
+
readonly size: "1rem";
|
|
570
|
+
readonly lineHeight: "1.7";
|
|
571
|
+
readonly weight: "400";
|
|
572
|
+
readonly letterSpacing: "0";
|
|
573
|
+
};
|
|
574
|
+
readonly lead: {
|
|
575
|
+
readonly size: "1.25rem";
|
|
576
|
+
readonly lineHeight: "1.7";
|
|
577
|
+
readonly weight: "400";
|
|
578
|
+
readonly letterSpacing: "0";
|
|
579
|
+
};
|
|
580
|
+
readonly small: {
|
|
581
|
+
readonly size: "0.95rem";
|
|
582
|
+
readonly lineHeight: "1.5";
|
|
583
|
+
readonly weight: "400";
|
|
584
|
+
readonly letterSpacing: "0";
|
|
585
|
+
};
|
|
586
|
+
readonly caption: {
|
|
587
|
+
readonly size: "0.833rem";
|
|
588
|
+
readonly lineHeight: "1.5";
|
|
589
|
+
readonly weight: "400";
|
|
590
|
+
readonly letterSpacing: "0.04em";
|
|
591
|
+
};
|
|
592
|
+
};
|
|
593
|
+
space: {
|
|
594
|
+
readonly s0: "0";
|
|
595
|
+
readonly s1: "0.25rem";
|
|
596
|
+
readonly s2: "0.5rem";
|
|
597
|
+
readonly s3: "0.75rem";
|
|
598
|
+
readonly s4: "1rem";
|
|
599
|
+
readonly s5: "1.5rem";
|
|
600
|
+
readonly s6: "2rem";
|
|
601
|
+
readonly s7: "3rem";
|
|
602
|
+
readonly s8: "4rem";
|
|
603
|
+
readonly s9: "6rem";
|
|
604
|
+
};
|
|
605
|
+
radius: {
|
|
606
|
+
readonly none: "0px";
|
|
607
|
+
readonly sm: "3px";
|
|
608
|
+
readonly md: "5px";
|
|
609
|
+
readonly lg: "8px";
|
|
610
|
+
readonly base: "4px";
|
|
611
|
+
readonly full: "999px";
|
|
612
|
+
};
|
|
613
|
+
border: {
|
|
614
|
+
readonly hair: "1px";
|
|
615
|
+
readonly rule: "1.5px";
|
|
616
|
+
readonly heavy: "2px";
|
|
617
|
+
};
|
|
618
|
+
tracking: {
|
|
619
|
+
readonly tight: "-0.01em";
|
|
620
|
+
readonly normal: "0";
|
|
621
|
+
readonly wide: "0.04em";
|
|
622
|
+
readonly wider: "0.1em";
|
|
623
|
+
readonly widest: "0.14em";
|
|
624
|
+
};
|
|
625
|
+
weight: {
|
|
626
|
+
readonly light: "300";
|
|
627
|
+
readonly regular: "400";
|
|
628
|
+
readonly medium: "500";
|
|
629
|
+
readonly semibold: "600";
|
|
630
|
+
readonly bold: "700";
|
|
631
|
+
};
|
|
632
|
+
dur: {
|
|
633
|
+
readonly fast: "120ms";
|
|
634
|
+
readonly base: "200ms";
|
|
635
|
+
readonly slow: "360ms";
|
|
636
|
+
};
|
|
637
|
+
ease: {
|
|
638
|
+
readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
|
|
639
|
+
};
|
|
640
|
+
shadow: {
|
|
641
|
+
readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
|
|
642
|
+
readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
|
|
643
|
+
readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
|
|
644
|
+
};
|
|
645
|
+
};
|
|
646
|
+
};
|
|
647
|
+
readonly docslingo: {
|
|
648
|
+
light: {
|
|
649
|
+
color: {
|
|
650
|
+
bg: {
|
|
651
|
+
page: string;
|
|
652
|
+
surface: string;
|
|
653
|
+
sunken: string;
|
|
654
|
+
inset: string;
|
|
655
|
+
};
|
|
656
|
+
fg: {
|
|
657
|
+
strong: string;
|
|
658
|
+
muted: string;
|
|
659
|
+
subtle: string;
|
|
660
|
+
onAccent: string;
|
|
661
|
+
};
|
|
662
|
+
border: {
|
|
663
|
+
subtle: string;
|
|
664
|
+
default: string;
|
|
665
|
+
strong: string;
|
|
666
|
+
};
|
|
667
|
+
accent: {
|
|
668
|
+
base: string;
|
|
669
|
+
hover: string;
|
|
670
|
+
soft: string;
|
|
671
|
+
text: string;
|
|
672
|
+
};
|
|
673
|
+
danger: {
|
|
674
|
+
base: string;
|
|
675
|
+
hover: string;
|
|
676
|
+
soft: string;
|
|
677
|
+
text: string;
|
|
678
|
+
};
|
|
679
|
+
status: {
|
|
680
|
+
ok: string;
|
|
681
|
+
warn: string;
|
|
682
|
+
info: string;
|
|
683
|
+
};
|
|
64
684
|
focus: string;
|
|
65
685
|
scrim: string;
|
|
66
686
|
};
|
|
@@ -187,28 +807,40 @@ declare const schemas: {
|
|
|
187
807
|
};
|
|
188
808
|
dark: {
|
|
189
809
|
color: {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
810
|
+
bg: {
|
|
811
|
+
page: string;
|
|
812
|
+
surface: string;
|
|
813
|
+
sunken: string;
|
|
814
|
+
inset: string;
|
|
815
|
+
};
|
|
816
|
+
fg: {
|
|
817
|
+
strong: string;
|
|
818
|
+
muted: string;
|
|
819
|
+
subtle: string;
|
|
820
|
+
onAccent: string;
|
|
821
|
+
};
|
|
822
|
+
border: {
|
|
823
|
+
subtle: string;
|
|
824
|
+
default: string;
|
|
825
|
+
strong: string;
|
|
826
|
+
};
|
|
827
|
+
accent: {
|
|
828
|
+
base: string;
|
|
829
|
+
hover: string;
|
|
830
|
+
soft: string;
|
|
831
|
+
text: string;
|
|
832
|
+
};
|
|
833
|
+
danger: {
|
|
834
|
+
base: string;
|
|
835
|
+
hover: string;
|
|
836
|
+
soft: string;
|
|
837
|
+
text: string;
|
|
838
|
+
};
|
|
839
|
+
status: {
|
|
840
|
+
ok: string;
|
|
841
|
+
warn: string;
|
|
842
|
+
info: string;
|
|
843
|
+
};
|
|
212
844
|
focus: string;
|
|
213
845
|
scrim: string;
|
|
214
846
|
};
|
|
@@ -335,28 +967,40 @@ declare const schemas: {
|
|
|
335
967
|
};
|
|
336
968
|
sepia: {
|
|
337
969
|
color: {
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
970
|
+
bg: {
|
|
971
|
+
page: string;
|
|
972
|
+
surface: string;
|
|
973
|
+
sunken: string;
|
|
974
|
+
inset: string;
|
|
975
|
+
};
|
|
976
|
+
fg: {
|
|
977
|
+
strong: string;
|
|
978
|
+
muted: string;
|
|
979
|
+
subtle: string;
|
|
980
|
+
onAccent: string;
|
|
981
|
+
};
|
|
982
|
+
border: {
|
|
983
|
+
subtle: string;
|
|
984
|
+
default: string;
|
|
985
|
+
strong: string;
|
|
986
|
+
};
|
|
987
|
+
accent: {
|
|
988
|
+
base: string;
|
|
989
|
+
hover: string;
|
|
990
|
+
soft: string;
|
|
991
|
+
text: string;
|
|
992
|
+
};
|
|
993
|
+
danger: {
|
|
994
|
+
base: string;
|
|
995
|
+
hover: string;
|
|
996
|
+
soft: string;
|
|
997
|
+
text: string;
|
|
998
|
+
};
|
|
999
|
+
status: {
|
|
1000
|
+
ok: string;
|
|
1001
|
+
warn: string;
|
|
1002
|
+
info: string;
|
|
1003
|
+
};
|
|
360
1004
|
focus: string;
|
|
361
1005
|
scrim: string;
|
|
362
1006
|
};
|
|
@@ -483,28 +1127,40 @@ declare const schemas: {
|
|
|
483
1127
|
};
|
|
484
1128
|
contrast: {
|
|
485
1129
|
color: {
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
1130
|
+
bg: {
|
|
1131
|
+
page: string;
|
|
1132
|
+
surface: string;
|
|
1133
|
+
sunken: string;
|
|
1134
|
+
inset: string;
|
|
1135
|
+
};
|
|
1136
|
+
fg: {
|
|
1137
|
+
strong: string;
|
|
1138
|
+
muted: string;
|
|
1139
|
+
subtle: string;
|
|
1140
|
+
onAccent: string;
|
|
1141
|
+
};
|
|
1142
|
+
border: {
|
|
1143
|
+
subtle: string;
|
|
1144
|
+
default: string;
|
|
1145
|
+
strong: string;
|
|
1146
|
+
};
|
|
1147
|
+
accent: {
|
|
1148
|
+
base: string;
|
|
1149
|
+
hover: string;
|
|
1150
|
+
soft: string;
|
|
1151
|
+
text: string;
|
|
1152
|
+
};
|
|
1153
|
+
danger: {
|
|
1154
|
+
base: string;
|
|
1155
|
+
hover: string;
|
|
1156
|
+
soft: string;
|
|
1157
|
+
text: string;
|
|
1158
|
+
};
|
|
1159
|
+
status: {
|
|
1160
|
+
ok: string;
|
|
1161
|
+
warn: string;
|
|
1162
|
+
info: string;
|
|
1163
|
+
};
|
|
508
1164
|
focus: string;
|
|
509
1165
|
scrim: string;
|
|
510
1166
|
};
|
|
@@ -633,6 +1289,52 @@ declare const schemas: {
|
|
|
633
1289
|
};
|
|
634
1290
|
type SchemaName = keyof typeof schemas;
|
|
635
1291
|
declare const schemaNames: SchemaName[];
|
|
1292
|
+
|
|
1293
|
+
interface ColorTokens {
|
|
1294
|
+
bg: {
|
|
1295
|
+
page: string;
|
|
1296
|
+
surface: string;
|
|
1297
|
+
sunken: string;
|
|
1298
|
+
inset: string;
|
|
1299
|
+
};
|
|
1300
|
+
fg: {
|
|
1301
|
+
strong: string;
|
|
1302
|
+
muted: string;
|
|
1303
|
+
subtle: string;
|
|
1304
|
+
onAccent: string;
|
|
1305
|
+
};
|
|
1306
|
+
border: {
|
|
1307
|
+
subtle: string;
|
|
1308
|
+
default: string;
|
|
1309
|
+
strong: string;
|
|
1310
|
+
};
|
|
1311
|
+
/** `base` = relleno · `hover` = relleno activo · `soft` = tinte · `text` = accent como TEXTO
|
|
1312
|
+
* sobre el fondo (outline/ghost, links); en dark `text` es más claro que `base` (AA ≥ 4.5). */
|
|
1313
|
+
accent: {
|
|
1314
|
+
base: string;
|
|
1315
|
+
hover: string;
|
|
1316
|
+
soft: string;
|
|
1317
|
+
text: string;
|
|
1318
|
+
};
|
|
1319
|
+
/** Igual estructura que `accent`; `text` es danger como TEXTO sobre el fondo (AA ≥ 4.5). */
|
|
1320
|
+
danger: {
|
|
1321
|
+
base: string;
|
|
1322
|
+
hover: string;
|
|
1323
|
+
soft: string;
|
|
1324
|
+
text: string;
|
|
1325
|
+
};
|
|
1326
|
+
status: {
|
|
1327
|
+
ok: string;
|
|
1328
|
+
warn: string;
|
|
1329
|
+
info: string;
|
|
1330
|
+
};
|
|
1331
|
+
focus: string;
|
|
1332
|
+
scrim: string;
|
|
1333
|
+
}
|
|
1334
|
+
type Mode = "light" | "dark" | "sepia" | "contrast";
|
|
1335
|
+
/** El usuario puede fijar un modo concreto o "system" (seguir las preferencias del SO). */
|
|
1336
|
+
type ModePreference = Mode | "system";
|
|
1337
|
+
declare const modeNames: readonly ["light", "dark", "sepia", "contrast"];
|
|
636
1338
|
/**
|
|
637
1339
|
* Núcleo platform-agnostic del tema: estado resuelto + acciones. Web y native
|
|
638
1340
|
* lo extienden con sus extras de plataforma (web: `themeClass`; native:
|
|
@@ -651,55 +1353,79 @@ interface ThemeState {
|
|
|
651
1353
|
}
|
|
652
1354
|
|
|
653
1355
|
declare const colorVars: {
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
1356
|
+
bg: {
|
|
1357
|
+
page: `var(--${string})`;
|
|
1358
|
+
surface: `var(--${string})`;
|
|
1359
|
+
sunken: `var(--${string})`;
|
|
1360
|
+
inset: `var(--${string})`;
|
|
1361
|
+
};
|
|
1362
|
+
fg: {
|
|
1363
|
+
strong: `var(--${string})`;
|
|
1364
|
+
muted: `var(--${string})`;
|
|
1365
|
+
subtle: `var(--${string})`;
|
|
1366
|
+
onAccent: `var(--${string})`;
|
|
1367
|
+
};
|
|
1368
|
+
border: {
|
|
1369
|
+
subtle: `var(--${string})`;
|
|
1370
|
+
default: `var(--${string})`;
|
|
1371
|
+
strong: `var(--${string})`;
|
|
1372
|
+
};
|
|
1373
|
+
accent: {
|
|
1374
|
+
base: `var(--${string})`;
|
|
1375
|
+
hover: `var(--${string})`;
|
|
1376
|
+
soft: `var(--${string})`;
|
|
1377
|
+
text: `var(--${string})`;
|
|
1378
|
+
};
|
|
1379
|
+
danger: {
|
|
1380
|
+
base: `var(--${string})`;
|
|
1381
|
+
hover: `var(--${string})`;
|
|
1382
|
+
soft: `var(--${string})`;
|
|
1383
|
+
text: `var(--${string})`;
|
|
1384
|
+
};
|
|
1385
|
+
status: {
|
|
1386
|
+
ok: `var(--${string})`;
|
|
1387
|
+
warn: `var(--${string})`;
|
|
1388
|
+
info: `var(--${string})`;
|
|
1389
|
+
};
|
|
676
1390
|
focus: `var(--${string})`;
|
|
677
1391
|
scrim: `var(--${string})`;
|
|
678
1392
|
};
|
|
679
1393
|
declare const vars: {
|
|
680
1394
|
color: {
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
1395
|
+
bg: {
|
|
1396
|
+
page: `var(--${string})`;
|
|
1397
|
+
surface: `var(--${string})`;
|
|
1398
|
+
sunken: `var(--${string})`;
|
|
1399
|
+
inset: `var(--${string})`;
|
|
1400
|
+
};
|
|
1401
|
+
fg: {
|
|
1402
|
+
strong: `var(--${string})`;
|
|
1403
|
+
muted: `var(--${string})`;
|
|
1404
|
+
subtle: `var(--${string})`;
|
|
1405
|
+
onAccent: `var(--${string})`;
|
|
1406
|
+
};
|
|
1407
|
+
border: {
|
|
1408
|
+
subtle: `var(--${string})`;
|
|
1409
|
+
default: `var(--${string})`;
|
|
1410
|
+
strong: `var(--${string})`;
|
|
1411
|
+
};
|
|
1412
|
+
accent: {
|
|
1413
|
+
base: `var(--${string})`;
|
|
1414
|
+
hover: `var(--${string})`;
|
|
1415
|
+
soft: `var(--${string})`;
|
|
1416
|
+
text: `var(--${string})`;
|
|
1417
|
+
};
|
|
1418
|
+
danger: {
|
|
1419
|
+
base: `var(--${string})`;
|
|
1420
|
+
hover: `var(--${string})`;
|
|
1421
|
+
soft: `var(--${string})`;
|
|
1422
|
+
text: `var(--${string})`;
|
|
1423
|
+
};
|
|
1424
|
+
status: {
|
|
1425
|
+
ok: `var(--${string})`;
|
|
1426
|
+
warn: `var(--${string})`;
|
|
1427
|
+
info: `var(--${string})`;
|
|
1428
|
+
};
|
|
703
1429
|
focus: `var(--${string})`;
|
|
704
1430
|
scrim: `var(--${string})`;
|
|
705
1431
|
};
|
|
@@ -824,7 +1550,7 @@ declare const vars: {
|
|
|
824
1550
|
readonly lg: `var(--${string})`;
|
|
825
1551
|
};
|
|
826
1552
|
};
|
|
827
|
-
declare const themes: Record<
|
|
1553
|
+
declare const themes: Record<"tinta" | "docslingo", Record<Mode, string>>;
|
|
828
1554
|
|
|
829
1555
|
declare function usePrevious<T>(value: T, initial: T): T;
|
|
830
1556
|
declare function usePrevious<T>(value: T, initial?: T): T | undefined;
|
|
@@ -844,8 +1570,8 @@ declare const sprinkles: ((props: {
|
|
|
844
1570
|
gap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
|
|
845
1571
|
rowGap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
|
|
846
1572
|
columnGap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
|
|
847
|
-
background?:
|
|
848
|
-
color?:
|
|
1573
|
+
background?: string | undefined;
|
|
1574
|
+
color?: string | undefined;
|
|
849
1575
|
borderRadius?: "none" | "sm" | "md" | "lg" | "base" | "full" | undefined;
|
|
850
1576
|
display?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | undefined;
|
|
851
1577
|
flexDirection?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
|
|
@@ -866,10 +1592,10 @@ declare const sprinkles: ((props: {
|
|
|
866
1592
|
mr?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
|
|
867
1593
|
mb?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
|
|
868
1594
|
ml?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
|
|
869
|
-
bg?:
|
|
1595
|
+
bg?: string | undefined;
|
|
870
1596
|
radius?: "none" | "sm" | "md" | "lg" | "base" | "full" | undefined;
|
|
871
1597
|
}) => string) & {
|
|
872
|
-
properties: Set<"display" | "radius" | "alignItems" | "color" | "columnGap" | "flexDirection" | "flexWrap" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "background" | "borderRadius" | "gap" | "padding" | "p" | "px" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml"
|
|
1598
|
+
properties: Set<"display" | "radius" | "bg" | "alignItems" | "color" | "columnGap" | "flexDirection" | "flexWrap" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "background" | "borderRadius" | "gap" | "padding" | "p" | "px" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml">;
|
|
873
1599
|
};
|
|
874
1600
|
type Sprinkles = Parameters<typeof sprinkles>[0];
|
|
875
1601
|
|
|
@@ -900,7 +1626,7 @@ declare const Surface: <E extends ElementType = "div">(props: SurfaceProps<E> &
|
|
|
900
1626
|
}) => ReturnType<typeof SurfaceInner>;
|
|
901
1627
|
|
|
902
1628
|
type TypographyVariant = "display" | "h1" | "h2" | "h3" | "h4" | "body" | "lead" | "small" | "caption" | "eyebrow" | "code" | "blackletter";
|
|
903
|
-
type TypographyColor = "
|
|
1629
|
+
type TypographyColor = "strong" | "muted" | "subtle" | "accent" | "danger" | "ok" | "warn" | "info";
|
|
904
1630
|
type TypographyAlign = "left" | "center" | "right";
|
|
905
1631
|
type TypographyOwnProps<E extends ElementType> = {
|
|
906
1632
|
variant: TypographyVariant;
|