@phcdevworks/spectre-tokens 3.5.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -108
- package/dist/index.cjs +417 -64
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +321 -0
- package/dist/index.d.cts +403 -25
- package/dist/index.d.ts +403 -25
- package/dist/index.js +417 -62
- package/dist/index.js.map +1 -1
- package/dist/tokens.dtcg.json +1354 -0
- package/package.json +5 -7
- package/tokens/palette.json +341 -1
- package/tokens/typography.json +91 -40
package/dist/index.d.cts
CHANGED
|
@@ -765,6 +765,346 @@ interface SpectreGeneratedTokens {
|
|
|
765
765
|
};
|
|
766
766
|
white: string;
|
|
767
767
|
black: string;
|
|
768
|
+
palette: {
|
|
769
|
+
red: {
|
|
770
|
+
'50': string;
|
|
771
|
+
'100': string;
|
|
772
|
+
'200': string;
|
|
773
|
+
'300': string;
|
|
774
|
+
'400': string;
|
|
775
|
+
'500': string;
|
|
776
|
+
'600': string;
|
|
777
|
+
'700': string;
|
|
778
|
+
'800': string;
|
|
779
|
+
'900': string;
|
|
780
|
+
'950': string;
|
|
781
|
+
};
|
|
782
|
+
orange: {
|
|
783
|
+
'50': string;
|
|
784
|
+
'100': string;
|
|
785
|
+
'200': string;
|
|
786
|
+
'300': string;
|
|
787
|
+
'400': string;
|
|
788
|
+
'500': string;
|
|
789
|
+
'600': string;
|
|
790
|
+
'700': string;
|
|
791
|
+
'800': string;
|
|
792
|
+
'900': string;
|
|
793
|
+
'950': string;
|
|
794
|
+
};
|
|
795
|
+
amber: {
|
|
796
|
+
'50': string;
|
|
797
|
+
'100': string;
|
|
798
|
+
'200': string;
|
|
799
|
+
'300': string;
|
|
800
|
+
'400': string;
|
|
801
|
+
'500': string;
|
|
802
|
+
'600': string;
|
|
803
|
+
'700': string;
|
|
804
|
+
'800': string;
|
|
805
|
+
'900': string;
|
|
806
|
+
'950': string;
|
|
807
|
+
};
|
|
808
|
+
yellow: {
|
|
809
|
+
'50': string;
|
|
810
|
+
'100': string;
|
|
811
|
+
'200': string;
|
|
812
|
+
'300': string;
|
|
813
|
+
'400': string;
|
|
814
|
+
'500': string;
|
|
815
|
+
'600': string;
|
|
816
|
+
'700': string;
|
|
817
|
+
'800': string;
|
|
818
|
+
'900': string;
|
|
819
|
+
'950': string;
|
|
820
|
+
};
|
|
821
|
+
lime: {
|
|
822
|
+
'50': string;
|
|
823
|
+
'100': string;
|
|
824
|
+
'200': string;
|
|
825
|
+
'300': string;
|
|
826
|
+
'400': string;
|
|
827
|
+
'500': string;
|
|
828
|
+
'600': string;
|
|
829
|
+
'700': string;
|
|
830
|
+
'800': string;
|
|
831
|
+
'900': string;
|
|
832
|
+
'950': string;
|
|
833
|
+
};
|
|
834
|
+
green: {
|
|
835
|
+
'50': string;
|
|
836
|
+
'100': string;
|
|
837
|
+
'200': string;
|
|
838
|
+
'300': string;
|
|
839
|
+
'400': string;
|
|
840
|
+
'500': string;
|
|
841
|
+
'600': string;
|
|
842
|
+
'700': string;
|
|
843
|
+
'800': string;
|
|
844
|
+
'900': string;
|
|
845
|
+
'950': string;
|
|
846
|
+
};
|
|
847
|
+
emerald: {
|
|
848
|
+
'50': string;
|
|
849
|
+
'100': string;
|
|
850
|
+
'200': string;
|
|
851
|
+
'300': string;
|
|
852
|
+
'400': string;
|
|
853
|
+
'500': string;
|
|
854
|
+
'600': string;
|
|
855
|
+
'700': string;
|
|
856
|
+
'800': string;
|
|
857
|
+
'900': string;
|
|
858
|
+
'950': string;
|
|
859
|
+
};
|
|
860
|
+
teal: {
|
|
861
|
+
'50': string;
|
|
862
|
+
'100': string;
|
|
863
|
+
'200': string;
|
|
864
|
+
'300': string;
|
|
865
|
+
'400': string;
|
|
866
|
+
'500': string;
|
|
867
|
+
'600': string;
|
|
868
|
+
'700': string;
|
|
869
|
+
'800': string;
|
|
870
|
+
'900': string;
|
|
871
|
+
'950': string;
|
|
872
|
+
};
|
|
873
|
+
cyan: {
|
|
874
|
+
'50': string;
|
|
875
|
+
'100': string;
|
|
876
|
+
'200': string;
|
|
877
|
+
'300': string;
|
|
878
|
+
'400': string;
|
|
879
|
+
'500': string;
|
|
880
|
+
'600': string;
|
|
881
|
+
'700': string;
|
|
882
|
+
'800': string;
|
|
883
|
+
'900': string;
|
|
884
|
+
'950': string;
|
|
885
|
+
};
|
|
886
|
+
sky: {
|
|
887
|
+
'50': string;
|
|
888
|
+
'100': string;
|
|
889
|
+
'200': string;
|
|
890
|
+
'300': string;
|
|
891
|
+
'400': string;
|
|
892
|
+
'500': string;
|
|
893
|
+
'600': string;
|
|
894
|
+
'700': string;
|
|
895
|
+
'800': string;
|
|
896
|
+
'900': string;
|
|
897
|
+
'950': string;
|
|
898
|
+
};
|
|
899
|
+
blue: {
|
|
900
|
+
'50': string;
|
|
901
|
+
'100': string;
|
|
902
|
+
'200': string;
|
|
903
|
+
'300': string;
|
|
904
|
+
'400': string;
|
|
905
|
+
'500': string;
|
|
906
|
+
'600': string;
|
|
907
|
+
'700': string;
|
|
908
|
+
'800': string;
|
|
909
|
+
'900': string;
|
|
910
|
+
'950': string;
|
|
911
|
+
};
|
|
912
|
+
indigo: {
|
|
913
|
+
'50': string;
|
|
914
|
+
'100': string;
|
|
915
|
+
'200': string;
|
|
916
|
+
'300': string;
|
|
917
|
+
'400': string;
|
|
918
|
+
'500': string;
|
|
919
|
+
'600': string;
|
|
920
|
+
'700': string;
|
|
921
|
+
'800': string;
|
|
922
|
+
'900': string;
|
|
923
|
+
'950': string;
|
|
924
|
+
};
|
|
925
|
+
violet: {
|
|
926
|
+
'50': string;
|
|
927
|
+
'100': string;
|
|
928
|
+
'200': string;
|
|
929
|
+
'300': string;
|
|
930
|
+
'400': string;
|
|
931
|
+
'500': string;
|
|
932
|
+
'600': string;
|
|
933
|
+
'700': string;
|
|
934
|
+
'800': string;
|
|
935
|
+
'900': string;
|
|
936
|
+
'950': string;
|
|
937
|
+
};
|
|
938
|
+
purple: {
|
|
939
|
+
'50': string;
|
|
940
|
+
'100': string;
|
|
941
|
+
'200': string;
|
|
942
|
+
'300': string;
|
|
943
|
+
'400': string;
|
|
944
|
+
'500': string;
|
|
945
|
+
'600': string;
|
|
946
|
+
'700': string;
|
|
947
|
+
'800': string;
|
|
948
|
+
'900': string;
|
|
949
|
+
'950': string;
|
|
950
|
+
};
|
|
951
|
+
fuchsia: {
|
|
952
|
+
'50': string;
|
|
953
|
+
'100': string;
|
|
954
|
+
'200': string;
|
|
955
|
+
'300': string;
|
|
956
|
+
'400': string;
|
|
957
|
+
'500': string;
|
|
958
|
+
'600': string;
|
|
959
|
+
'700': string;
|
|
960
|
+
'800': string;
|
|
961
|
+
'900': string;
|
|
962
|
+
'950': string;
|
|
963
|
+
};
|
|
964
|
+
pink: {
|
|
965
|
+
'50': string;
|
|
966
|
+
'100': string;
|
|
967
|
+
'200': string;
|
|
968
|
+
'300': string;
|
|
969
|
+
'400': string;
|
|
970
|
+
'500': string;
|
|
971
|
+
'600': string;
|
|
972
|
+
'700': string;
|
|
973
|
+
'800': string;
|
|
974
|
+
'900': string;
|
|
975
|
+
'950': string;
|
|
976
|
+
};
|
|
977
|
+
rose: {
|
|
978
|
+
'50': string;
|
|
979
|
+
'100': string;
|
|
980
|
+
'200': string;
|
|
981
|
+
'300': string;
|
|
982
|
+
'400': string;
|
|
983
|
+
'500': string;
|
|
984
|
+
'600': string;
|
|
985
|
+
'700': string;
|
|
986
|
+
'800': string;
|
|
987
|
+
'900': string;
|
|
988
|
+
'950': string;
|
|
989
|
+
};
|
|
990
|
+
slate: {
|
|
991
|
+
'50': string;
|
|
992
|
+
'100': string;
|
|
993
|
+
'200': string;
|
|
994
|
+
'300': string;
|
|
995
|
+
'400': string;
|
|
996
|
+
'500': string;
|
|
997
|
+
'600': string;
|
|
998
|
+
'700': string;
|
|
999
|
+
'800': string;
|
|
1000
|
+
'900': string;
|
|
1001
|
+
'950': string;
|
|
1002
|
+
};
|
|
1003
|
+
gray: {
|
|
1004
|
+
'50': string;
|
|
1005
|
+
'100': string;
|
|
1006
|
+
'200': string;
|
|
1007
|
+
'300': string;
|
|
1008
|
+
'400': string;
|
|
1009
|
+
'500': string;
|
|
1010
|
+
'600': string;
|
|
1011
|
+
'700': string;
|
|
1012
|
+
'800': string;
|
|
1013
|
+
'900': string;
|
|
1014
|
+
'950': string;
|
|
1015
|
+
};
|
|
1016
|
+
zinc: {
|
|
1017
|
+
'50': string;
|
|
1018
|
+
'100': string;
|
|
1019
|
+
'200': string;
|
|
1020
|
+
'300': string;
|
|
1021
|
+
'400': string;
|
|
1022
|
+
'500': string;
|
|
1023
|
+
'600': string;
|
|
1024
|
+
'700': string;
|
|
1025
|
+
'800': string;
|
|
1026
|
+
'900': string;
|
|
1027
|
+
'950': string;
|
|
1028
|
+
};
|
|
1029
|
+
neutral: {
|
|
1030
|
+
'50': string;
|
|
1031
|
+
'100': string;
|
|
1032
|
+
'200': string;
|
|
1033
|
+
'300': string;
|
|
1034
|
+
'400': string;
|
|
1035
|
+
'500': string;
|
|
1036
|
+
'600': string;
|
|
1037
|
+
'700': string;
|
|
1038
|
+
'800': string;
|
|
1039
|
+
'900': string;
|
|
1040
|
+
'950': string;
|
|
1041
|
+
};
|
|
1042
|
+
stone: {
|
|
1043
|
+
'50': string;
|
|
1044
|
+
'100': string;
|
|
1045
|
+
'200': string;
|
|
1046
|
+
'300': string;
|
|
1047
|
+
'400': string;
|
|
1048
|
+
'500': string;
|
|
1049
|
+
'600': string;
|
|
1050
|
+
'700': string;
|
|
1051
|
+
'800': string;
|
|
1052
|
+
'900': string;
|
|
1053
|
+
'950': string;
|
|
1054
|
+
};
|
|
1055
|
+
mauve: {
|
|
1056
|
+
'50': string;
|
|
1057
|
+
'100': string;
|
|
1058
|
+
'200': string;
|
|
1059
|
+
'300': string;
|
|
1060
|
+
'400': string;
|
|
1061
|
+
'500': string;
|
|
1062
|
+
'600': string;
|
|
1063
|
+
'700': string;
|
|
1064
|
+
'800': string;
|
|
1065
|
+
'900': string;
|
|
1066
|
+
'950': string;
|
|
1067
|
+
};
|
|
1068
|
+
olive: {
|
|
1069
|
+
'50': string;
|
|
1070
|
+
'100': string;
|
|
1071
|
+
'200': string;
|
|
1072
|
+
'300': string;
|
|
1073
|
+
'400': string;
|
|
1074
|
+
'500': string;
|
|
1075
|
+
'600': string;
|
|
1076
|
+
'700': string;
|
|
1077
|
+
'800': string;
|
|
1078
|
+
'900': string;
|
|
1079
|
+
'950': string;
|
|
1080
|
+
};
|
|
1081
|
+
mist: {
|
|
1082
|
+
'50': string;
|
|
1083
|
+
'100': string;
|
|
1084
|
+
'200': string;
|
|
1085
|
+
'300': string;
|
|
1086
|
+
'400': string;
|
|
1087
|
+
'500': string;
|
|
1088
|
+
'600': string;
|
|
1089
|
+
'700': string;
|
|
1090
|
+
'800': string;
|
|
1091
|
+
'900': string;
|
|
1092
|
+
'950': string;
|
|
1093
|
+
};
|
|
1094
|
+
taupe: {
|
|
1095
|
+
'50': string;
|
|
1096
|
+
'100': string;
|
|
1097
|
+
'200': string;
|
|
1098
|
+
'300': string;
|
|
1099
|
+
'400': string;
|
|
1100
|
+
'500': string;
|
|
1101
|
+
'600': string;
|
|
1102
|
+
'700': string;
|
|
1103
|
+
'800': string;
|
|
1104
|
+
'900': string;
|
|
1105
|
+
'950': string;
|
|
1106
|
+
};
|
|
1107
|
+
};
|
|
768
1108
|
};
|
|
769
1109
|
space: {
|
|
770
1110
|
'0': string;
|
|
@@ -1178,6 +1518,57 @@ interface SpectreGeneratedTokens {
|
|
|
1178
1518
|
letterSpacing: string;
|
|
1179
1519
|
};
|
|
1180
1520
|
};
|
|
1521
|
+
heading: {
|
|
1522
|
+
h1: {
|
|
1523
|
+
fontFamily: string;
|
|
1524
|
+
fontSize: string;
|
|
1525
|
+
lineHeight: string;
|
|
1526
|
+
fontWeight: number;
|
|
1527
|
+
letterSpacing: string;
|
|
1528
|
+
};
|
|
1529
|
+
h2: {
|
|
1530
|
+
fontFamily: string;
|
|
1531
|
+
fontSize: string;
|
|
1532
|
+
lineHeight: string;
|
|
1533
|
+
fontWeight: number;
|
|
1534
|
+
letterSpacing: string;
|
|
1535
|
+
};
|
|
1536
|
+
h3: {
|
|
1537
|
+
fontFamily: string;
|
|
1538
|
+
fontSize: string;
|
|
1539
|
+
lineHeight: string;
|
|
1540
|
+
fontWeight: number;
|
|
1541
|
+
letterSpacing: string;
|
|
1542
|
+
};
|
|
1543
|
+
h4: {
|
|
1544
|
+
fontFamily: string;
|
|
1545
|
+
fontSize: string;
|
|
1546
|
+
lineHeight: string;
|
|
1547
|
+
fontWeight: number;
|
|
1548
|
+
letterSpacing: string;
|
|
1549
|
+
};
|
|
1550
|
+
h5: {
|
|
1551
|
+
fontFamily: string;
|
|
1552
|
+
fontSize: string;
|
|
1553
|
+
lineHeight: string;
|
|
1554
|
+
fontWeight: number;
|
|
1555
|
+
letterSpacing: string;
|
|
1556
|
+
};
|
|
1557
|
+
h6: {
|
|
1558
|
+
fontFamily: string;
|
|
1559
|
+
fontSize: string;
|
|
1560
|
+
lineHeight: string;
|
|
1561
|
+
fontWeight: number;
|
|
1562
|
+
letterSpacing: string;
|
|
1563
|
+
};
|
|
1564
|
+
};
|
|
1565
|
+
body: {
|
|
1566
|
+
fontFamily: string;
|
|
1567
|
+
fontSize: string;
|
|
1568
|
+
lineHeight: string;
|
|
1569
|
+
fontWeight: number;
|
|
1570
|
+
letterSpacing: string;
|
|
1571
|
+
};
|
|
1181
1572
|
};
|
|
1182
1573
|
}
|
|
1183
1574
|
|
|
@@ -1189,9 +1580,20 @@ interface TypographyScaleEntry {
|
|
|
1189
1580
|
fontWeight?: number;
|
|
1190
1581
|
letterSpacing?: string;
|
|
1191
1582
|
}
|
|
1583
|
+
interface TypographyRoleEntry {
|
|
1584
|
+
fontFamily: string;
|
|
1585
|
+
fontSize: string;
|
|
1586
|
+
lineHeight: string;
|
|
1587
|
+
fontWeight: number;
|
|
1588
|
+
letterSpacing: string;
|
|
1589
|
+
}
|
|
1590
|
+
type TypographyHeadingEntry = TypographyRoleEntry;
|
|
1591
|
+
type TypographyBodyEntry = TypographyRoleEntry;
|
|
1192
1592
|
interface TypographyTokens {
|
|
1193
1593
|
families: Record<string, string>;
|
|
1194
1594
|
scale: Record<string, TypographyScaleEntry>;
|
|
1595
|
+
heading: Record<string, TypographyHeadingEntry>;
|
|
1596
|
+
body: TypographyBodyEntry;
|
|
1195
1597
|
}
|
|
1196
1598
|
interface TransitionTokens {
|
|
1197
1599
|
duration: TokenScale;
|
|
@@ -1453,33 +1855,9 @@ interface CssVariableOptions {
|
|
|
1453
1855
|
selector?: string;
|
|
1454
1856
|
prefix?: string;
|
|
1455
1857
|
}
|
|
1456
|
-
interface TailwindTheme {
|
|
1457
|
-
colors: SpectreGeneratedTokens['colors'] | Record<string, string | Record<string, string>>;
|
|
1458
|
-
spacing: SpectreGeneratedTokens['space'];
|
|
1459
|
-
borderRadius: SpectreGeneratedTokens['radii'];
|
|
1460
|
-
fontFamily: Record<string, string[]>;
|
|
1461
|
-
fontSize: Record<string, [string, {
|
|
1462
|
-
lineHeight: string;
|
|
1463
|
-
fontWeight?: number;
|
|
1464
|
-
letterSpacing?: string;
|
|
1465
|
-
}]>;
|
|
1466
|
-
boxShadow: SpectreGeneratedTokens['shadows'];
|
|
1467
|
-
screens: SpectreGeneratedTokens['breakpoints'];
|
|
1468
|
-
zIndex: SpectreGeneratedTokens['zIndex'];
|
|
1469
|
-
transitionDuration: SpectreGeneratedTokens['transitions']['duration'];
|
|
1470
|
-
transitionTimingFunction: SpectreGeneratedTokens['transitions']['easing'];
|
|
1471
|
-
opacity: SpectreGeneratedTokens['opacity'];
|
|
1472
|
-
maxWidth: Record<string, string | undefined>;
|
|
1473
|
-
width: Record<string, string | undefined>;
|
|
1474
|
-
borderWidth: Record<string, string | undefined>;
|
|
1475
|
-
}
|
|
1476
1858
|
|
|
1477
1859
|
declare const generateCssVariables: (tokens: SpectreTokens, options?: CssVariableOptions) => string;
|
|
1478
1860
|
|
|
1479
1861
|
declare const tokens: SpectreTokens;
|
|
1480
|
-
declare const tailwindTheme: TailwindTheme;
|
|
1481
|
-
declare const tailwindPreset: {
|
|
1482
|
-
theme: TailwindTheme;
|
|
1483
|
-
};
|
|
1484
1862
|
|
|
1485
|
-
export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type ComponentBadgeTokens, type ComponentIconBoxTokens, type ComponentPricingCardTokens, type ComponentRatingTokens, type ComponentTestimonialTokens, type ComponentTokens, type FormStateTokens, type LayoutTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type
|
|
1863
|
+
export { type AccessibilityTokens, type AnimationEntry, type ButtonStateTokens, type ColorScale, type ComponentBadgeTokens, type ComponentIconBoxTokens, type ComponentPricingCardTokens, type ComponentRatingTokens, type ComponentTestimonialTokens, type ComponentTokens, type FormStateTokens, type LayoutTokens, type SpectreModeName, type SpectreModeTokens, type SpectreTokens, type TokenScale, type Tokens, type TransitionTokens, type TypographyTokens, tokens as default, generateCssVariables, tokens };
|