@octavius2929-personal/design-system 0.25.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs +156 -185
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +574 -574
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +392 -260
  6. package/dist/index.d.ts +392 -260
  7. package/dist/index.js +156 -185
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -1,66 +1,44 @@
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
- bg1: string;
43
- bg2: string;
44
- bg3: string;
45
- bgInset: string;
46
- fg1: string;
47
- fg2: string;
48
- fg3: string;
49
- fgOnAccent: string;
50
- border1: string;
51
- border2: string;
52
- borderStrong: string;
53
- accent: string;
54
- accentHover: string;
55
- accentSoft: string;
56
- accentText: string;
57
- ok: string;
58
- warn: string;
59
- danger: string;
60
- dangerHover: string;
61
- dangerSoft: string;
62
- dangerText: string;
63
- info: string;
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
+ };
64
42
  focus: string;
65
43
  scrim: string;
66
44
  };
@@ -187,28 +165,40 @@ declare const schemas: {
187
165
  };
188
166
  dark: {
189
167
  color: {
190
- bg1: string;
191
- bg2: string;
192
- bg3: string;
193
- bgInset: string;
194
- fg1: string;
195
- fg2: string;
196
- fg3: string;
197
- fgOnAccent: string;
198
- border1: string;
199
- border2: string;
200
- borderStrong: string;
201
- accent: string;
202
- accentHover: string;
203
- accentSoft: string;
204
- accentText: string;
205
- ok: string;
206
- warn: string;
207
- danger: string;
208
- dangerHover: string;
209
- dangerSoft: string;
210
- dangerText: string;
211
- info: string;
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
+ };
212
202
  focus: string;
213
203
  scrim: string;
214
204
  };
@@ -335,28 +325,40 @@ declare const schemas: {
335
325
  };
336
326
  sepia: {
337
327
  color: {
338
- bg1: string;
339
- bg2: string;
340
- bg3: string;
341
- bgInset: string;
342
- fg1: string;
343
- fg2: string;
344
- fg3: string;
345
- fgOnAccent: string;
346
- border1: string;
347
- border2: string;
348
- borderStrong: string;
349
- accent: string;
350
- accentHover: string;
351
- accentSoft: string;
352
- accentText: string;
353
- ok: string;
354
- warn: string;
355
- danger: string;
356
- dangerHover: string;
357
- dangerSoft: string;
358
- dangerText: string;
359
- info: string;
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
+ };
360
362
  focus: string;
361
363
  scrim: string;
362
364
  };
@@ -483,28 +485,40 @@ declare const schemas: {
483
485
  };
484
486
  contrast: {
485
487
  color: {
486
- bg1: string;
487
- bg2: string;
488
- bg3: string;
489
- bgInset: string;
490
- fg1: string;
491
- fg2: string;
492
- fg3: string;
493
- fgOnAccent: string;
494
- border1: string;
495
- border2: string;
496
- borderStrong: string;
497
- accent: string;
498
- accentHover: string;
499
- accentSoft: string;
500
- accentText: string;
501
- ok: string;
502
- warn: string;
503
- danger: string;
504
- dangerHover: string;
505
- dangerSoft: string;
506
- dangerText: string;
507
- info: string;
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
+ };
508
522
  focus: string;
509
523
  scrim: string;
510
524
  };
@@ -633,28 +647,40 @@ declare const schemas: {
633
647
  readonly docslingo: {
634
648
  light: {
635
649
  color: {
636
- bg1: string;
637
- bg2: string;
638
- bg3: string;
639
- bgInset: string;
640
- fg1: string;
641
- fg2: string;
642
- fg3: string;
643
- fgOnAccent: string;
644
- border1: string;
645
- border2: string;
646
- borderStrong: string;
647
- accent: string;
648
- accentHover: string;
649
- accentSoft: string;
650
- accentText: string;
651
- ok: string;
652
- warn: string;
653
- danger: string;
654
- dangerHover: string;
655
- dangerSoft: string;
656
- dangerText: string;
657
- info: string;
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
+ };
658
684
  focus: string;
659
685
  scrim: string;
660
686
  };
@@ -781,28 +807,40 @@ declare const schemas: {
781
807
  };
782
808
  dark: {
783
809
  color: {
784
- bg1: string;
785
- bg2: string;
786
- bg3: string;
787
- bgInset: string;
788
- fg1: string;
789
- fg2: string;
790
- fg3: string;
791
- fgOnAccent: string;
792
- border1: string;
793
- border2: string;
794
- borderStrong: string;
795
- accent: string;
796
- accentHover: string;
797
- accentSoft: string;
798
- accentText: string;
799
- ok: string;
800
- warn: string;
801
- danger: string;
802
- dangerHover: string;
803
- dangerSoft: string;
804
- dangerText: string;
805
- info: string;
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
+ };
806
844
  focus: string;
807
845
  scrim: string;
808
846
  };
@@ -929,28 +967,40 @@ declare const schemas: {
929
967
  };
930
968
  sepia: {
931
969
  color: {
932
- bg1: string;
933
- bg2: string;
934
- bg3: string;
935
- bgInset: string;
936
- fg1: string;
937
- fg2: string;
938
- fg3: string;
939
- fgOnAccent: string;
940
- border1: string;
941
- border2: string;
942
- borderStrong: string;
943
- accent: string;
944
- accentHover: string;
945
- accentSoft: string;
946
- accentText: string;
947
- ok: string;
948
- warn: string;
949
- danger: string;
950
- dangerHover: string;
951
- dangerSoft: string;
952
- dangerText: string;
953
- info: string;
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
+ };
954
1004
  focus: string;
955
1005
  scrim: string;
956
1006
  };
@@ -1077,28 +1127,40 @@ declare const schemas: {
1077
1127
  };
1078
1128
  contrast: {
1079
1129
  color: {
1080
- bg1: string;
1081
- bg2: string;
1082
- bg3: string;
1083
- bgInset: string;
1084
- fg1: string;
1085
- fg2: string;
1086
- fg3: string;
1087
- fgOnAccent: string;
1088
- border1: string;
1089
- border2: string;
1090
- borderStrong: string;
1091
- accent: string;
1092
- accentHover: string;
1093
- accentSoft: string;
1094
- accentText: string;
1095
- ok: string;
1096
- warn: string;
1097
- danger: string;
1098
- dangerHover: string;
1099
- dangerSoft: string;
1100
- dangerText: string;
1101
- info: string;
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
+ };
1102
1164
  focus: string;
1103
1165
  scrim: string;
1104
1166
  };
@@ -1227,6 +1289,52 @@ declare const schemas: {
1227
1289
  };
1228
1290
  type SchemaName = keyof typeof schemas;
1229
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"];
1230
1338
  /**
1231
1339
  * Núcleo platform-agnostic del tema: estado resuelto + acciones. Web y native
1232
1340
  * lo extienden con sus extras de plataforma (web: `themeClass`; native:
@@ -1245,55 +1353,79 @@ interface ThemeState {
1245
1353
  }
1246
1354
 
1247
1355
  declare const colorVars: {
1248
- bg1: `var(--${string})`;
1249
- bg2: `var(--${string})`;
1250
- bg3: `var(--${string})`;
1251
- bgInset: `var(--${string})`;
1252
- fg1: `var(--${string})`;
1253
- fg2: `var(--${string})`;
1254
- fg3: `var(--${string})`;
1255
- fgOnAccent: `var(--${string})`;
1256
- border1: `var(--${string})`;
1257
- border2: `var(--${string})`;
1258
- borderStrong: `var(--${string})`;
1259
- accent: `var(--${string})`;
1260
- accentHover: `var(--${string})`;
1261
- accentSoft: `var(--${string})`;
1262
- accentText: `var(--${string})`;
1263
- ok: `var(--${string})`;
1264
- warn: `var(--${string})`;
1265
- danger: `var(--${string})`;
1266
- dangerHover: `var(--${string})`;
1267
- dangerSoft: `var(--${string})`;
1268
- dangerText: `var(--${string})`;
1269
- info: `var(--${string})`;
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
+ };
1270
1390
  focus: `var(--${string})`;
1271
1391
  scrim: `var(--${string})`;
1272
1392
  };
1273
1393
  declare const vars: {
1274
1394
  color: {
1275
- bg1: `var(--${string})`;
1276
- bg2: `var(--${string})`;
1277
- bg3: `var(--${string})`;
1278
- bgInset: `var(--${string})`;
1279
- fg1: `var(--${string})`;
1280
- fg2: `var(--${string})`;
1281
- fg3: `var(--${string})`;
1282
- fgOnAccent: `var(--${string})`;
1283
- border1: `var(--${string})`;
1284
- border2: `var(--${string})`;
1285
- borderStrong: `var(--${string})`;
1286
- accent: `var(--${string})`;
1287
- accentHover: `var(--${string})`;
1288
- accentSoft: `var(--${string})`;
1289
- accentText: `var(--${string})`;
1290
- ok: `var(--${string})`;
1291
- warn: `var(--${string})`;
1292
- danger: `var(--${string})`;
1293
- dangerHover: `var(--${string})`;
1294
- dangerSoft: `var(--${string})`;
1295
- dangerText: `var(--${string})`;
1296
- info: `var(--${string})`;
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
+ };
1297
1429
  focus: `var(--${string})`;
1298
1430
  scrim: `var(--${string})`;
1299
1431
  };
@@ -1418,7 +1550,7 @@ declare const vars: {
1418
1550
  readonly lg: `var(--${string})`;
1419
1551
  };
1420
1552
  };
1421
- declare const themes: Record<SchemaName, Record<Mode, string>>;
1553
+ declare const themes: Record<"tinta" | "docslingo", Record<Mode, string>>;
1422
1554
 
1423
1555
  declare function usePrevious<T>(value: T, initial: T): T;
1424
1556
  declare function usePrevious<T>(value: T, initial?: T): T | undefined;
@@ -1438,8 +1570,8 @@ declare const sprinkles: ((props: {
1438
1570
  gap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1439
1571
  rowGap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1440
1572
  columnGap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1441
- background?: keyof ColorTokens | undefined;
1442
- color?: keyof ColorTokens | undefined;
1573
+ background?: string | undefined;
1574
+ color?: string | undefined;
1443
1575
  borderRadius?: "none" | "sm" | "md" | "lg" | "base" | "full" | undefined;
1444
1576
  display?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | undefined;
1445
1577
  flexDirection?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
@@ -1460,10 +1592,10 @@ declare const sprinkles: ((props: {
1460
1592
  mr?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1461
1593
  mb?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1462
1594
  ml?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1463
- bg?: keyof ColorTokens | undefined;
1595
+ bg?: string | undefined;
1464
1596
  radius?: "none" | "sm" | "md" | "lg" | "base" | "full" | undefined;
1465
1597
  }) => string) & {
1466
- 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" | "bg">;
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">;
1467
1599
  };
1468
1600
  type Sprinkles = Parameters<typeof sprinkles>[0];
1469
1601
 
@@ -1494,7 +1626,7 @@ declare const Surface: <E extends ElementType = "div">(props: SurfaceProps<E> &
1494
1626
  }) => ReturnType<typeof SurfaceInner>;
1495
1627
 
1496
1628
  type TypographyVariant = "display" | "h1" | "h2" | "h3" | "h4" | "body" | "lead" | "small" | "caption" | "eyebrow" | "code" | "blackletter";
1497
- type TypographyColor = "fg1" | "fg2" | "fg3" | "accent" | "danger" | "ok" | "warn" | "info";
1629
+ type TypographyColor = "strong" | "muted" | "subtle" | "accent" | "danger" | "ok" | "warn" | "info";
1498
1630
  type TypographyAlign = "left" | "center" | "right";
1499
1631
  type TypographyOwnProps<E extends ElementType> = {
1500
1632
  variant: TypographyVariant;