UNPKG

7.69 kBTypeScriptView Raw
1import type { PropertiesFallback } from "csstype";
2import type { Dict, DistributiveOmit } from "../utils";
3import type { ConditionalValue, CssKeyframes, Nested, SystemStyleObject } from "./css.types";
4import type { RecipeCreatorFn, RecipeDefinition, SlotRecipeConfig, SlotRecipeCreatorFn } from "./recipe.types";
5export type CssProperty = keyof PropertiesFallback;
6export type CssVarProperties = {
7 [key in `--${string}`]?: ConditionalValue<string | number>;
8};
9export interface CssProperties extends PropertiesFallback<String | Number>, CssVarProperties {
10}
11interface Recursive<T> {
12 [key: string]: T | Recursive<T>;
13}
14export type TokenCategory = "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "assets" | "cursor" | "borderWidths" | "breakpoints" | "borderStyles" | "aspectRatios";
15export interface TokenSchema<T = any> {
16 value: T;
17 description?: string;
18}
19type PrimitiveTokenValue = string | number;
20export type TokenDefinition = {
21 [key in TokenCategory]?: Recursive<TokenSchema<PrimitiveTokenValue>>;
22};
23export type SemanticTokenDefinition = {
24 [key in TokenCategory]?: Recursive<TokenSchema<PrimitiveTokenValue | Record<string, PrimitiveTokenValue>>>;
25};
26export interface TokenCssVar {
27 var: string;
28 ref: string;
29}
30export interface TokenFormatOptions {
31 formatTokenName(path: string[]): string;
32 formatCssVar(path: string[], prefix: string): TokenCssVar;
33}
34export type TokenEnforcePhase = "pre" | "post";
35export interface TokenMiddleware {
36 enforce: TokenEnforcePhase;
37 transform(dict: TokenDictionary): void;
38}
39export interface TokenTransformer {
40 name: string;
41 enforce: TokenEnforcePhase;
42 type: "value" | "name" | "extensions";
43 match?(token: Token): boolean;
44 transform(token: Token, dictionary: TokenDictionary): any;
45}
46export interface TokenDictionary extends TokenFormatOptions {
47 prefix: string;
48 allTokens: Token[];
49 tokenMap: Map<string, Token>;
50 flatMap: Map<string, string>;
51 cssVarMap: Map<string, Map<string, string>>;
52 categoryMap: Map<string, Map<string, Token>>;
53 colorPaletteMap: Map<string, Map<string, string>>;
54 registerToken(token: Token, phase?: TokenEnforcePhase): void;
55 getVar(value: string, fallback?: string): string | undefined;
56 getCategoryValues(category: string): Dict;
57 getByName(name: string): Token | undefined;
58 expandReferenceInValue(value: string): string;
59}
60interface ColorPaletteExtension {
61 value: string;
62 roots: string[][];
63 keys: string[][];
64}
65export interface TokenExtensions {
66 originalPath: string[];
67 category: string;
68 prop: string;
69 default?: boolean;
70 condition?: string;
71 virtual?: boolean;
72 negative?: boolean;
73 conditions?: Dict;
74 cssVar?: TokenCssVar;
75 colorPalette?: ColorPaletteExtension;
76 references?: Dict<Token>;
77 pixelValue?: string;
78}
79export interface Token<T = any> {
80 value: T;
81 description?: string;
82 originalValue: any;
83 name: string;
84 path: string[];
85 extensions: TokenExtensions;
86}
87type ThemeFn = (token: (path: string) => any) => Record<string, string>;
88interface UtilityTokenFn {
89 (path: string): string | undefined;
90 raw: (path: string) => Token | undefined;
91}
92export interface ColorMixResult {
93 invalid: boolean;
94 value: string;
95 color?: string;
96}
97export interface TransformUtils {
98 colorMix(value: string): ColorMixResult;
99}
100export interface TransformArgs<T = any> {
101 token: UtilityTokenFn;
102 raw: T;
103 utils: TransformUtils;
104}
105export type PropertyTransform = (value: any, args: TransformArgs) => Nested<CssProperties> | undefined;
106export type PropertyValues = TokenCategory | string[] | {
107 type: string;
108} | Record<string, string> | ThemeFn;
109export interface UtilityPropertyConfig {
110 /**
111 * The css style object this property will generate.
112 */
113 transform?: PropertyTransform;
114 /**
115 * The possible values this property can have.
116 */
117 values?: PropertyValues;
118 /**
119 * The css property this utility maps to.
120 */
121 property?: CssProperty;
122 /**
123 * The shorthand of the property.
124 */
125 shorthand?: string | string[];
126}
127export type UtilityConfig = {
128 [property in CssProperty]?: UtilityPropertyConfig;
129} & {
130 [property: string]: UtilityPropertyConfig;
131};
132export interface Utility {
133 keys(): string[];
134 shorthands: Map<string, string>;
135 hasShorthand: boolean;
136 resolveShorthand(key: string): string;
137 transform(key: string, value: any): Dict | undefined;
138 register(property: string, config: UtilityPropertyConfig): void;
139 getTypes(): Map<string, string[]>;
140 addPropertyType(property: string, type: string[]): void;
141}
142export interface BreakpointEntry {
143 name: string;
144 min?: string | null;
145 max?: string | null;
146}
147export interface Breakpoint {
148 up(key: string): string;
149 down(key: string): string;
150 only(key: string): string;
151 keys(): string[];
152 values: BreakpointEntry[];
153 conditions: Dict;
154 getCondition(key: string): string;
155}
156export interface Condition {
157 keys(): string[];
158 sort(paths: string[]): string[];
159 has(key: string): boolean;
160 resolve(key: string): string;
161 breakpoints: string[];
162 expandAtRule(key: string): string;
163}
164export interface ConditionRecord {
165 [key: string]: string | string[];
166}
167export interface ConditionConfig {
168 breakpoints: Breakpoint;
169 conditions: ConditionRecord;
170}
171export interface TokenFn {
172 (path: string, fallback?: any): any;
173 var(path: string, fallback?: any): any;
174}
175export type CssFn = (...styles: (SystemStyleObject | undefined)[]) => SystemStyleObject;
176export interface Layers {
177 wrap(layer: CascadeLayer, styles: Dict): Dict;
178 names: string[];
179 atRule: string;
180}
181export interface SystemContext {
182 $$chakra: true;
183 _config: SystemConfig;
184 utility: Utility;
185 conditions: Condition;
186 tokens: TokenDictionary;
187 breakpoints: Breakpoint;
188 properties: Set<string>;
189 isValidProperty(prop: string): boolean;
190 normalizeValue(value: any): any;
191 splitCssProps<T extends SystemStyleObject>(props: T): [SystemStyleObject, DistributiveOmit<T, keyof SystemStyleObject>];
192 getTokenCss(): Dict;
193 getGlobalCss(): Dict;
194 getPreflightCss(): Dict;
195 css: CssFn;
196 cva: RecipeCreatorFn;
197 sva: SlotRecipeCreatorFn;
198 getRecipe(key: string, fallback?: any): any;
199 getSlotRecipe(key: string, fallback?: any): any;
200 isRecipe(key: string): boolean;
201 isSlotRecipe(key: string): boolean;
202 hasRecipe(key: string): boolean;
203 token: TokenFn;
204 layers: Layers;
205}
206export interface ThemingConfig {
207 breakpoints?: Record<string, string>;
208 keyframes?: CssKeyframes;
209 tokens?: TokenDefinition;
210 semanticTokens?: SemanticTokenDefinition;
211 textStyles?: Record<string, Dict>;
212 layerStyles?: Record<string, Dict>;
213 animationStyles?: Record<string, Dict>;
214 recipes?: Record<string, RecipeDefinition>;
215 slotRecipes?: Record<string, SlotRecipeConfig>;
216}
217export interface PreflightConfig {
218 preflight?: boolean | {
219 scope?: string;
220 level?: "parent" | "element";
221 };
222}
223export type CascadeLayer = "reset" | "base" | "tokens" | "recipes";
224export interface SystemConfig extends PreflightConfig {
225 cssVarsRoot?: string;
226 cssVarsPrefix?: string;
227 globalCss?: Record<string, SystemStyleObject>;
228 disableLayers?: boolean;
229 layers?: Record<CascadeLayer, string>;
230 theme?: ThemingConfig;
231 utilities?: UtilityConfig;
232 conditions?: Dict;
233 strictTokens?: boolean;
234}
235export {};