@octavius2929-personal/design-system 0.22.0 → 0.23.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.
Files changed (9) hide show
  1. package/dist/index.cjs +62 -14
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +242 -216
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +67 -609
  6. package/dist/index.d.ts +67 -609
  7. package/dist/index.js +62 -14
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -1,6 +1,40 @@
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
+
4
38
  declare const schemas: {
5
39
  readonly tinta: {
6
40
  light: {
@@ -19,11 +53,13 @@ declare const schemas: {
19
53
  accent: string;
20
54
  accentHover: string;
21
55
  accentSoft: string;
56
+ accentText: string;
22
57
  ok: string;
23
58
  warn: string;
24
59
  danger: string;
25
60
  dangerHover: string;
26
61
  dangerSoft: string;
62
+ dangerText: string;
27
63
  info: string;
28
64
  focus: string;
29
65
  scrim: string;
@@ -165,11 +201,13 @@ declare const schemas: {
165
201
  accent: string;
166
202
  accentHover: string;
167
203
  accentSoft: string;
204
+ accentText: string;
168
205
  ok: string;
169
206
  warn: string;
170
207
  danger: string;
171
208
  dangerHover: string;
172
209
  dangerSoft: string;
210
+ dangerText: string;
173
211
  info: string;
174
212
  focus: string;
175
213
  scrim: string;
@@ -311,11 +349,13 @@ declare const schemas: {
311
349
  accent: string;
312
350
  accentHover: string;
313
351
  accentSoft: string;
352
+ accentText: string;
314
353
  ok: string;
315
354
  warn: string;
316
355
  danger: string;
317
356
  dangerHover: string;
318
357
  dangerSoft: string;
358
+ dangerText: string;
319
359
  info: string;
320
360
  focus: string;
321
361
  scrim: string;
@@ -457,11 +497,13 @@ declare const schemas: {
457
497
  accent: string;
458
498
  accentHover: string;
459
499
  accentSoft: string;
500
+ accentText: string;
460
501
  ok: string;
461
502
  warn: string;
462
503
  danger: string;
463
504
  dangerHover: string;
464
505
  dangerSoft: string;
506
+ dangerText: string;
465
507
  info: string;
466
508
  focus: string;
467
509
  scrim: string;
@@ -589,601 +631,24 @@ declare const schemas: {
589
631
  };
590
632
  };
591
633
  };
592
-
593
- declare const tintaSchema: {
594
- light: {
595
- color: {
596
- bg1: string;
597
- bg2: string;
598
- bg3: string;
599
- bgInset: string;
600
- fg1: string;
601
- fg2: string;
602
- fg3: string;
603
- fgOnAccent: string;
604
- border1: string;
605
- border2: string;
606
- borderStrong: string;
607
- accent: string;
608
- accentHover: string;
609
- accentSoft: string;
610
- ok: string;
611
- warn: string;
612
- danger: string;
613
- dangerHover: string;
614
- dangerSoft: string;
615
- info: string;
616
- focus: string;
617
- scrim: string;
618
- };
619
- font: {
620
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
621
- readonly text: "'Newsreader', Georgia, serif";
622
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
623
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
624
- };
625
- text: {
626
- readonly eyebrow: {
627
- readonly size: "0.694rem";
628
- readonly lineHeight: "1.2";
629
- readonly weight: "500";
630
- readonly letterSpacing: "0.14em";
631
- };
632
- readonly display: {
633
- readonly size: "5.6rem";
634
- readonly lineHeight: "1.05";
635
- readonly weight: "600";
636
- readonly letterSpacing: "-0.01em";
637
- };
638
- readonly h1: {
639
- readonly size: "2.9rem";
640
- readonly lineHeight: "1.05";
641
- readonly weight: "600";
642
- readonly letterSpacing: "-0.01em";
643
- };
644
- readonly h2: {
645
- readonly size: "2.1rem";
646
- readonly lineHeight: "1.2";
647
- readonly weight: "600";
648
- readonly letterSpacing: "0";
649
- };
650
- readonly h3: {
651
- readonly size: "1.563rem";
652
- readonly lineHeight: "1.2";
653
- readonly weight: "500";
654
- readonly letterSpacing: "0";
655
- };
656
- readonly h4: {
657
- readonly size: "1.25rem";
658
- readonly lineHeight: "1.2";
659
- readonly weight: "600";
660
- readonly letterSpacing: "0";
661
- };
662
- readonly body: {
663
- readonly size: "1rem";
664
- readonly lineHeight: "1.7";
665
- readonly weight: "400";
666
- readonly letterSpacing: "0";
667
- };
668
- readonly lead: {
669
- readonly size: "1.25rem";
670
- readonly lineHeight: "1.7";
671
- readonly weight: "400";
672
- readonly letterSpacing: "0";
673
- };
674
- readonly small: {
675
- readonly size: "0.95rem";
676
- readonly lineHeight: "1.5";
677
- readonly weight: "400";
678
- readonly letterSpacing: "0";
679
- };
680
- readonly caption: {
681
- readonly size: "0.833rem";
682
- readonly lineHeight: "1.5";
683
- readonly weight: "400";
684
- readonly letterSpacing: "0.04em";
685
- };
686
- };
687
- space: {
688
- readonly s0: "0";
689
- readonly s1: "0.25rem";
690
- readonly s2: "0.5rem";
691
- readonly s3: "0.75rem";
692
- readonly s4: "1rem";
693
- readonly s5: "1.5rem";
694
- readonly s6: "2rem";
695
- readonly s7: "3rem";
696
- readonly s8: "4rem";
697
- readonly s9: "6rem";
698
- };
699
- radius: {
700
- readonly none: "0px";
701
- readonly sm: "3px";
702
- readonly md: "5px";
703
- readonly lg: "8px";
704
- readonly base: "4px";
705
- readonly full: "999px";
706
- };
707
- border: {
708
- readonly hair: "1px";
709
- readonly rule: "1.5px";
710
- readonly heavy: "2px";
711
- };
712
- tracking: {
713
- readonly tight: "-0.01em";
714
- readonly normal: "0";
715
- readonly wide: "0.04em";
716
- readonly wider: "0.1em";
717
- readonly widest: "0.14em";
718
- };
719
- weight: {
720
- readonly light: "300";
721
- readonly regular: "400";
722
- readonly medium: "500";
723
- readonly semibold: "600";
724
- readonly bold: "700";
725
- };
726
- dur: {
727
- readonly fast: "120ms";
728
- readonly base: "200ms";
729
- readonly slow: "360ms";
730
- };
731
- ease: {
732
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
733
- };
734
- shadow: {
735
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
736
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
737
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
738
- };
739
- };
740
- dark: {
741
- color: {
742
- bg1: string;
743
- bg2: string;
744
- bg3: string;
745
- bgInset: string;
746
- fg1: string;
747
- fg2: string;
748
- fg3: string;
749
- fgOnAccent: string;
750
- border1: string;
751
- border2: string;
752
- borderStrong: string;
753
- accent: string;
754
- accentHover: string;
755
- accentSoft: string;
756
- ok: string;
757
- warn: string;
758
- danger: string;
759
- dangerHover: string;
760
- dangerSoft: string;
761
- info: string;
762
- focus: string;
763
- scrim: string;
764
- };
765
- font: {
766
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
767
- readonly text: "'Newsreader', Georgia, serif";
768
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
769
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
770
- };
771
- text: {
772
- readonly eyebrow: {
773
- readonly size: "0.694rem";
774
- readonly lineHeight: "1.2";
775
- readonly weight: "500";
776
- readonly letterSpacing: "0.14em";
777
- };
778
- readonly display: {
779
- readonly size: "5.6rem";
780
- readonly lineHeight: "1.05";
781
- readonly weight: "600";
782
- readonly letterSpacing: "-0.01em";
783
- };
784
- readonly h1: {
785
- readonly size: "2.9rem";
786
- readonly lineHeight: "1.05";
787
- readonly weight: "600";
788
- readonly letterSpacing: "-0.01em";
789
- };
790
- readonly h2: {
791
- readonly size: "2.1rem";
792
- readonly lineHeight: "1.2";
793
- readonly weight: "600";
794
- readonly letterSpacing: "0";
795
- };
796
- readonly h3: {
797
- readonly size: "1.563rem";
798
- readonly lineHeight: "1.2";
799
- readonly weight: "500";
800
- readonly letterSpacing: "0";
801
- };
802
- readonly h4: {
803
- readonly size: "1.25rem";
804
- readonly lineHeight: "1.2";
805
- readonly weight: "600";
806
- readonly letterSpacing: "0";
807
- };
808
- readonly body: {
809
- readonly size: "1rem";
810
- readonly lineHeight: "1.7";
811
- readonly weight: "400";
812
- readonly letterSpacing: "0";
813
- };
814
- readonly lead: {
815
- readonly size: "1.25rem";
816
- readonly lineHeight: "1.7";
817
- readonly weight: "400";
818
- readonly letterSpacing: "0";
819
- };
820
- readonly small: {
821
- readonly size: "0.95rem";
822
- readonly lineHeight: "1.5";
823
- readonly weight: "400";
824
- readonly letterSpacing: "0";
825
- };
826
- readonly caption: {
827
- readonly size: "0.833rem";
828
- readonly lineHeight: "1.5";
829
- readonly weight: "400";
830
- readonly letterSpacing: "0.04em";
831
- };
832
- };
833
- space: {
834
- readonly s0: "0";
835
- readonly s1: "0.25rem";
836
- readonly s2: "0.5rem";
837
- readonly s3: "0.75rem";
838
- readonly s4: "1rem";
839
- readonly s5: "1.5rem";
840
- readonly s6: "2rem";
841
- readonly s7: "3rem";
842
- readonly s8: "4rem";
843
- readonly s9: "6rem";
844
- };
845
- radius: {
846
- readonly none: "0px";
847
- readonly sm: "3px";
848
- readonly md: "5px";
849
- readonly lg: "8px";
850
- readonly base: "4px";
851
- readonly full: "999px";
852
- };
853
- border: {
854
- readonly hair: "1px";
855
- readonly rule: "1.5px";
856
- readonly heavy: "2px";
857
- };
858
- tracking: {
859
- readonly tight: "-0.01em";
860
- readonly normal: "0";
861
- readonly wide: "0.04em";
862
- readonly wider: "0.1em";
863
- readonly widest: "0.14em";
864
- };
865
- weight: {
866
- readonly light: "300";
867
- readonly regular: "400";
868
- readonly medium: "500";
869
- readonly semibold: "600";
870
- readonly bold: "700";
871
- };
872
- dur: {
873
- readonly fast: "120ms";
874
- readonly base: "200ms";
875
- readonly slow: "360ms";
876
- };
877
- ease: {
878
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
879
- };
880
- shadow: {
881
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
882
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
883
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
884
- };
885
- };
886
- sepia: {
887
- color: {
888
- bg1: string;
889
- bg2: string;
890
- bg3: string;
891
- bgInset: string;
892
- fg1: string;
893
- fg2: string;
894
- fg3: string;
895
- fgOnAccent: string;
896
- border1: string;
897
- border2: string;
898
- borderStrong: string;
899
- accent: string;
900
- accentHover: string;
901
- accentSoft: string;
902
- ok: string;
903
- warn: string;
904
- danger: string;
905
- dangerHover: string;
906
- dangerSoft: string;
907
- info: string;
908
- focus: string;
909
- scrim: string;
910
- };
911
- font: {
912
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
913
- readonly text: "'Newsreader', Georgia, serif";
914
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
915
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
916
- };
917
- text: {
918
- readonly eyebrow: {
919
- readonly size: "0.694rem";
920
- readonly lineHeight: "1.2";
921
- readonly weight: "500";
922
- readonly letterSpacing: "0.14em";
923
- };
924
- readonly display: {
925
- readonly size: "5.6rem";
926
- readonly lineHeight: "1.05";
927
- readonly weight: "600";
928
- readonly letterSpacing: "-0.01em";
929
- };
930
- readonly h1: {
931
- readonly size: "2.9rem";
932
- readonly lineHeight: "1.05";
933
- readonly weight: "600";
934
- readonly letterSpacing: "-0.01em";
935
- };
936
- readonly h2: {
937
- readonly size: "2.1rem";
938
- readonly lineHeight: "1.2";
939
- readonly weight: "600";
940
- readonly letterSpacing: "0";
941
- };
942
- readonly h3: {
943
- readonly size: "1.563rem";
944
- readonly lineHeight: "1.2";
945
- readonly weight: "500";
946
- readonly letterSpacing: "0";
947
- };
948
- readonly h4: {
949
- readonly size: "1.25rem";
950
- readonly lineHeight: "1.2";
951
- readonly weight: "600";
952
- readonly letterSpacing: "0";
953
- };
954
- readonly body: {
955
- readonly size: "1rem";
956
- readonly lineHeight: "1.7";
957
- readonly weight: "400";
958
- readonly letterSpacing: "0";
959
- };
960
- readonly lead: {
961
- readonly size: "1.25rem";
962
- readonly lineHeight: "1.7";
963
- readonly weight: "400";
964
- readonly letterSpacing: "0";
965
- };
966
- readonly small: {
967
- readonly size: "0.95rem";
968
- readonly lineHeight: "1.5";
969
- readonly weight: "400";
970
- readonly letterSpacing: "0";
971
- };
972
- readonly caption: {
973
- readonly size: "0.833rem";
974
- readonly lineHeight: "1.5";
975
- readonly weight: "400";
976
- readonly letterSpacing: "0.04em";
977
- };
978
- };
979
- space: {
980
- readonly s0: "0";
981
- readonly s1: "0.25rem";
982
- readonly s2: "0.5rem";
983
- readonly s3: "0.75rem";
984
- readonly s4: "1rem";
985
- readonly s5: "1.5rem";
986
- readonly s6: "2rem";
987
- readonly s7: "3rem";
988
- readonly s8: "4rem";
989
- readonly s9: "6rem";
990
- };
991
- radius: {
992
- readonly none: "0px";
993
- readonly sm: "3px";
994
- readonly md: "5px";
995
- readonly lg: "8px";
996
- readonly base: "4px";
997
- readonly full: "999px";
998
- };
999
- border: {
1000
- readonly hair: "1px";
1001
- readonly rule: "1.5px";
1002
- readonly heavy: "2px";
1003
- };
1004
- tracking: {
1005
- readonly tight: "-0.01em";
1006
- readonly normal: "0";
1007
- readonly wide: "0.04em";
1008
- readonly wider: "0.1em";
1009
- readonly widest: "0.14em";
1010
- };
1011
- weight: {
1012
- readonly light: "300";
1013
- readonly regular: "400";
1014
- readonly medium: "500";
1015
- readonly semibold: "600";
1016
- readonly bold: "700";
1017
- };
1018
- dur: {
1019
- readonly fast: "120ms";
1020
- readonly base: "200ms";
1021
- readonly slow: "360ms";
1022
- };
1023
- ease: {
1024
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
1025
- };
1026
- shadow: {
1027
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
1028
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
1029
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
1030
- };
1031
- };
1032
- contrast: {
1033
- color: {
1034
- bg1: string;
1035
- bg2: string;
1036
- bg3: string;
1037
- bgInset: string;
1038
- fg1: string;
1039
- fg2: string;
1040
- fg3: string;
1041
- fgOnAccent: string;
1042
- border1: string;
1043
- border2: string;
1044
- borderStrong: string;
1045
- accent: string;
1046
- accentHover: string;
1047
- accentSoft: string;
1048
- ok: string;
1049
- warn: string;
1050
- danger: string;
1051
- dangerHover: string;
1052
- dangerSoft: string;
1053
- info: string;
1054
- focus: string;
1055
- scrim: string;
1056
- };
1057
- font: {
1058
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
1059
- readonly text: "'Newsreader', Georgia, serif";
1060
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
1061
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
1062
- };
1063
- text: {
1064
- readonly eyebrow: {
1065
- readonly size: "0.694rem";
1066
- readonly lineHeight: "1.2";
1067
- readonly weight: "500";
1068
- readonly letterSpacing: "0.14em";
1069
- };
1070
- readonly display: {
1071
- readonly size: "5.6rem";
1072
- readonly lineHeight: "1.05";
1073
- readonly weight: "600";
1074
- readonly letterSpacing: "-0.01em";
1075
- };
1076
- readonly h1: {
1077
- readonly size: "2.9rem";
1078
- readonly lineHeight: "1.05";
1079
- readonly weight: "600";
1080
- readonly letterSpacing: "-0.01em";
1081
- };
1082
- readonly h2: {
1083
- readonly size: "2.1rem";
1084
- readonly lineHeight: "1.2";
1085
- readonly weight: "600";
1086
- readonly letterSpacing: "0";
1087
- };
1088
- readonly h3: {
1089
- readonly size: "1.563rem";
1090
- readonly lineHeight: "1.2";
1091
- readonly weight: "500";
1092
- readonly letterSpacing: "0";
1093
- };
1094
- readonly h4: {
1095
- readonly size: "1.25rem";
1096
- readonly lineHeight: "1.2";
1097
- readonly weight: "600";
1098
- readonly letterSpacing: "0";
1099
- };
1100
- readonly body: {
1101
- readonly size: "1rem";
1102
- readonly lineHeight: "1.7";
1103
- readonly weight: "400";
1104
- readonly letterSpacing: "0";
1105
- };
1106
- readonly lead: {
1107
- readonly size: "1.25rem";
1108
- readonly lineHeight: "1.7";
1109
- readonly weight: "400";
1110
- readonly letterSpacing: "0";
1111
- };
1112
- readonly small: {
1113
- readonly size: "0.95rem";
1114
- readonly lineHeight: "1.5";
1115
- readonly weight: "400";
1116
- readonly letterSpacing: "0";
1117
- };
1118
- readonly caption: {
1119
- readonly size: "0.833rem";
1120
- readonly lineHeight: "1.5";
1121
- readonly weight: "400";
1122
- readonly letterSpacing: "0.04em";
1123
- };
1124
- };
1125
- space: {
1126
- readonly s0: "0";
1127
- readonly s1: "0.25rem";
1128
- readonly s2: "0.5rem";
1129
- readonly s3: "0.75rem";
1130
- readonly s4: "1rem";
1131
- readonly s5: "1.5rem";
1132
- readonly s6: "2rem";
1133
- readonly s7: "3rem";
1134
- readonly s8: "4rem";
1135
- readonly s9: "6rem";
1136
- };
1137
- radius: {
1138
- readonly none: "0px";
1139
- readonly sm: "3px";
1140
- readonly md: "5px";
1141
- readonly lg: "8px";
1142
- readonly base: "4px";
1143
- readonly full: "999px";
1144
- };
1145
- border: {
1146
- readonly hair: "1px";
1147
- readonly rule: "1.5px";
1148
- readonly heavy: "2px";
1149
- };
1150
- tracking: {
1151
- readonly tight: "-0.01em";
1152
- readonly normal: "0";
1153
- readonly wide: "0.04em";
1154
- readonly wider: "0.1em";
1155
- readonly widest: "0.14em";
1156
- };
1157
- weight: {
1158
- readonly light: "300";
1159
- readonly regular: "400";
1160
- readonly medium: "500";
1161
- readonly semibold: "600";
1162
- readonly bold: "700";
1163
- };
1164
- dur: {
1165
- readonly fast: "120ms";
1166
- readonly base: "200ms";
1167
- readonly slow: "360ms";
1168
- };
1169
- ease: {
1170
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
1171
- };
1172
- shadow: {
1173
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
1174
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
1175
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
1176
- };
1177
- };
1178
- };
1179
-
1180
634
  type SchemaName = keyof typeof schemas;
1181
- type Mode = "light" | "dark" | "sepia" | "contrast";
1182
- type ColorTokens = typeof tintaSchema.light.color;
1183
- /** El usuario puede fijar un modo concreto o "system" (seguir las preferencias del SO). */
1184
- type ModePreference = Mode | "system";
1185
- declare const schemaNames: readonly SchemaName[];
1186
- declare const modeNames: readonly Mode[];
635
+ declare const schemaNames: SchemaName[];
636
+ /**
637
+ * Núcleo platform-agnostic del tema: estado resuelto + acciones. Web y native
638
+ * lo extienden con sus extras de plataforma (web: `themeClass`; native:
639
+ * `colorTokens` + `tokens`). Una sola fuente para la forma común.
640
+ */
641
+ interface ThemeState {
642
+ schema: SchemaName;
643
+ /** Modo efectivo ya resuelto (nunca "system"). */
644
+ mode: Mode;
645
+ /** La preferencia cruda elegida (puede ser "system"). */
646
+ preference: ModePreference;
647
+ setSchema: (schema: SchemaName) => void;
648
+ setMode: (mode: ModePreference) => void;
649
+ toggleMode: () => void;
650
+ cycleMode: () => void;
651
+ }
1187
652
 
1188
653
  declare const colorVars: {
1189
654
  bg1: `var(--${string})`;
@@ -1200,11 +665,13 @@ declare const colorVars: {
1200
665
  accent: `var(--${string})`;
1201
666
  accentHover: `var(--${string})`;
1202
667
  accentSoft: `var(--${string})`;
668
+ accentText: `var(--${string})`;
1203
669
  ok: `var(--${string})`;
1204
670
  warn: `var(--${string})`;
1205
671
  danger: `var(--${string})`;
1206
672
  dangerHover: `var(--${string})`;
1207
673
  dangerSoft: `var(--${string})`;
674
+ dangerText: `var(--${string})`;
1208
675
  info: `var(--${string})`;
1209
676
  focus: `var(--${string})`;
1210
677
  scrim: `var(--${string})`;
@@ -1225,11 +692,13 @@ declare const vars: {
1225
692
  accent: `var(--${string})`;
1226
693
  accentHover: `var(--${string})`;
1227
694
  accentSoft: `var(--${string})`;
695
+ accentText: `var(--${string})`;
1228
696
  ok: `var(--${string})`;
1229
697
  warn: `var(--${string})`;
1230
698
  danger: `var(--${string})`;
1231
699
  dangerHover: `var(--${string})`;
1232
700
  dangerSoft: `var(--${string})`;
701
+ dangerText: `var(--${string})`;
1233
702
  info: `var(--${string})`;
1234
703
  focus: `var(--${string})`;
1235
704
  scrim: `var(--${string})`;
@@ -1375,8 +844,8 @@ declare const sprinkles: ((props: {
1375
844
  gap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1376
845
  rowGap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1377
846
  columnGap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1378
- background?: "bg1" | "bg2" | "bg3" | "bgInset" | "fg1" | "fg2" | "fg3" | "fgOnAccent" | "border1" | "border2" | "borderStrong" | "accent" | "accentHover" | "accentSoft" | "ok" | "warn" | "danger" | "dangerHover" | "dangerSoft" | "info" | "focus" | "scrim" | undefined;
1379
- color?: "bg1" | "bg2" | "bg3" | "bgInset" | "fg1" | "fg2" | "fg3" | "fgOnAccent" | "border1" | "border2" | "borderStrong" | "accent" | "accentHover" | "accentSoft" | "ok" | "warn" | "danger" | "dangerHover" | "dangerSoft" | "info" | "focus" | "scrim" | undefined;
847
+ background?: keyof ColorTokens | undefined;
848
+ color?: keyof ColorTokens | undefined;
1380
849
  borderRadius?: "none" | "sm" | "md" | "lg" | "base" | "full" | undefined;
1381
850
  display?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | undefined;
1382
851
  flexDirection?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
@@ -1397,7 +866,7 @@ declare const sprinkles: ((props: {
1397
866
  mr?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1398
867
  mb?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1399
868
  ml?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1400
- bg?: "bg1" | "bg2" | "bg3" | "bgInset" | "fg1" | "fg2" | "fg3" | "fgOnAccent" | "border1" | "border2" | "borderStrong" | "accent" | "accentHover" | "accentSoft" | "ok" | "warn" | "danger" | "dangerHover" | "dangerSoft" | "info" | "focus" | "scrim" | undefined;
869
+ bg?: keyof ColorTokens | undefined;
1401
870
  radius?: "none" | "sm" | "md" | "lg" | "base" | "full" | undefined;
1402
871
  }) => string) & {
1403
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" | "bg">;
@@ -2047,19 +1516,8 @@ declare const iconCatalog: {
2047
1516
  Icon: Icon;
2048
1517
  }[];
2049
1518
 
2050
- interface ThemeContextValue {
2051
- schema: SchemaName;
2052
- /** Modo efectivo ya resuelto (nunca "system"). */
2053
- mode: Mode;
2054
- /** La preferencia cruda elegida (puede ser "system"). */
2055
- preference: ModePreference;
1519
+ interface ThemeContextValue extends ThemeState {
2056
1520
  themeClass: string;
2057
- setSchema: (schema: SchemaName) => void;
2058
- setMode: (mode: ModePreference) => void;
2059
- /** Alterna binario claro↔oscuro a partir del modo efectivo. */
2060
- toggleMode: () => void;
2061
- /** Rota por los cuatro modos en orden. */
2062
- cycleMode: () => void;
2063
1521
  }
2064
1522
  interface ThemeProviderProps {
2065
1523
  children: ReactNode;