import { CSSProperties } from 'react'; import { ThemeRef } from 'treat'; import { ThemeOrAny } from 'treat/theme'; export declare type Tokens = Extract; export interface ScaleTokens { [key: string]: NonNullable; } export interface CommonTheme { breakpoints: readonly number[]; shorthands: { [key: string]: ReadonlyArray; }; aliases: { [key: string]: keyof CSSProperties | Tokens<'shorthands'>; }; } export interface RuntimeTheme extends CommonTheme { ref: ThemeRef; } export interface StaticTheme extends CommonTheme { scales: { spacing: ScaleTokens<'margin'>; size: ScaleTokens<'width'>; fontFamily: ScaleTokens<'fontFamily'>; fontSize: ScaleTokens<'fontSize'>; fontWeight: ScaleTokens<'fontWeight'>; lineHeight: ScaleTokens<'lineHeight'>; color: ScaleTokens<'color'>; letterSpacing: ScaleTokens<'letterSpacing'>; border: ScaleTokens<'border'>; borderWidth: ScaleTokens<'borderWidth'>; radius: ScaleTokens<'borderRadius'>; shadow: ScaleTokens<'boxShadow'>; opacity: ScaleTokens<'opacity'>; zIndex: ScaleTokens<'zIndex'>; duration: ScaleTokens<'animationDuration'>; }; matchers: { [property in keyof CSSProperties]: keyof this['scales'] | Tokens<'scales'>; }; } export declare function createTheme(tokens: ThemeOrAny & StaticTheme, localDebugName?: string): RuntimeTheme; export declare const defaultTokens: { readonly breakpoints: readonly [640, 768, 1024, 1280]; readonly scales: { readonly spacing: { readonly 0: string | number; readonly 4: string | number; readonly "1px": string | number; readonly 1: string | number; readonly 2: string | number; readonly 3: string | number; readonly 5: string | number; readonly 6: string | number; readonly 8: string | number; readonly 10: string | number; readonly 12: string | number; readonly 16: string | number; readonly 20: string | number; readonly 24: string | number; readonly 32: string | number; readonly 40: string | number; readonly 48: string | number; readonly 56: string | number; readonly 64: string | number; readonly [-1]: string | number; readonly [-2]: string | number; readonly [-3]: string | number; readonly [-4]: string | number; readonly [-5]: string | number; readonly [-6]: string | number; readonly [-8]: string | number; readonly [-10]: string | number; readonly [-12]: string | number; readonly [-16]: string | number; readonly [-20]: string | number; readonly [-24]: string | number; readonly [-32]: string | number; readonly [-40]: string | number; readonly [-48]: string | number; readonly [-56]: string | number; readonly [-64]: string | number; readonly "-1px": string | number; }; readonly size: { readonly auto: "auto"; readonly '100%': "100%"; readonly 0: string | number; readonly 4: string | number; readonly "1px": string | number; readonly 1: string | number; readonly 2: string | number; readonly 3: string | number; readonly 5: string | number; readonly 6: string | number; readonly 8: string | number; readonly 10: string | number; readonly 12: string | number; readonly 16: string | number; readonly 20: string | number; readonly 24: string | number; readonly 32: string | number; readonly 40: string | number; readonly 48: string | number; readonly 56: string | number; readonly 64: string | number; readonly [-1]: string | number; readonly [-2]: string | number; readonly [-3]: string | number; readonly [-4]: string | number; readonly [-5]: string | number; readonly [-6]: string | number; readonly [-8]: string | number; readonly [-10]: string | number; readonly [-12]: string | number; readonly [-16]: string | number; readonly [-20]: string | number; readonly [-24]: string | number; readonly [-32]: string | number; readonly [-40]: string | number; readonly [-48]: string | number; readonly [-56]: string | number; readonly [-64]: string | number; readonly "-1px": string | number; }; readonly fontFamily: {}; readonly fontSize: { readonly 0: string; readonly 4: string; readonly 1: string; readonly 2: string; readonly 3: string; readonly 5: string; readonly 6: string; readonly [-1]: string; readonly [-0.5]: string; }; readonly fontWeight: {}; readonly lineHeight: { readonly 1: 1; readonly tight: 1.25; readonly snug: 1.375; readonly base: 1.5; readonly relaxed: 1.625; readonly loose: 2; }; readonly color: {}; readonly letterSpacing: { readonly tighter: "-0.05em"; readonly tight: "-0.025em"; readonly normal: 0; readonly wide: ".025em"; readonly wider: ".05em"; readonly widest: ".1em"; }; readonly border: {}; readonly borderWidth: { readonly 1: 1; readonly 2: 2; readonly 4: 4; readonly 8: 8; }; readonly radius: { readonly sm: ".125rem"; readonly md: ".25rem"; readonly lg: ".5rem"; readonly full: 9999; }; readonly shadow: { readonly sm: "0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)"; readonly md: "0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)"; readonly lg: "0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)"; readonly xl: "0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)"; readonly inner: "inset 0 2px 4px 0 rgba(0,0,0,.06)"; readonly outline: "0 0 0 3px rgba(66,153,225,.5)"; }; readonly opacity: {}; readonly zIndex: {}; readonly duration: { readonly '75ms': "75ms"; readonly '100ms': ".1s"; readonly '150ms': ".15s"; readonly '200ms': ".2s"; readonly '300ms': ".3s"; readonly '500ms': ".5s"; readonly '700ms': ".7s"; readonly '1000ms': "1s"; }; }; readonly shorthands: { readonly inset: readonly ["top", "right", "bottom", "left"]; readonly insetX: readonly ["left", "right"]; readonly insetY: readonly ["top", "bottom"]; readonly size: readonly ["width", "height"]; readonly paddingX: readonly ["paddingLeft", "paddingRight"]; readonly paddingY: readonly ["paddingTop", "paddingBottom"]; readonly marginX: readonly ["marginLeft", "marginRight"]; readonly marginY: readonly ["marginTop", "marginBottom"]; }; readonly aliases: { readonly p: "padding"; readonly px: "paddingX"; readonly py: "paddingY"; readonly pt: "paddingTop"; readonly pr: "paddingRight"; readonly pb: "paddingBottom"; readonly pl: "paddingLeft"; readonly m: "margin"; readonly mx: "marginX"; readonly my: "marginY"; readonly mt: "marginTop"; readonly mr: "marginRight"; readonly mb: "marginBottom"; readonly ml: "marginLeft"; readonly bg: "background"; }; readonly matchers: { readonly top: "spacing"; readonly right: "spacing"; readonly bottom: "spacing"; readonly left: "spacing"; readonly zIndex: "zIndex"; readonly flexBasis: "size"; readonly gridGap: "spacing"; readonly gridRowGap: "spacing"; readonly gridColumnGap: "spacing"; readonly gap: "spacing"; readonly rowGap: "spacing"; readonly columnGap: "spacing"; readonly width: "size"; readonly minWidth: "size"; readonly maxWidth: "size"; readonly height: "size"; readonly minHeight: "size"; readonly maxHeight: "size"; readonly padding: "spacing"; readonly paddingTop: "spacing"; readonly paddingRight: "spacing"; readonly paddingBottom: "spacing"; readonly margin: "spacing"; readonly marginTop: "spacing"; readonly marginRight: "spacing"; readonly marginBottom: "spacing"; readonly marginLeft: "spacing"; readonly fontFamily: "fontFamily"; readonly fontSize: "fontSize"; readonly fontWeight: "fontWeight"; readonly lineHeight: "lineHeight"; readonly color: "color"; readonly textShadow: "shadow"; readonly letterSpacing: "letterSpacing"; readonly background: "color"; readonly backgroundColor: "color"; readonly border: "border"; readonly borderTop: "border"; readonly borderRight: "border"; readonly borderBottom: "border"; readonly borderLeft: "border"; readonly borderColor: "color"; readonly borderTopColor: "color"; readonly borderRightColor: "color"; readonly borderBottomColor: "color"; readonly borderLeftColor: "color"; readonly borderWidth: "borderWidth"; readonly borderTopWidth: "borderWidth"; readonly borderRightWidth: "borderWidth"; readonly borderBottomWidth: "borderWidth"; readonly borderLeftWidth: "borderWidth"; readonly borderRadius: "radius"; readonly borderTopLeftRadius: "radius"; readonly borderTopRightRadius: "radius"; readonly borderBottomRightRadius: "radius"; readonly borderBottomLeftRadius: "radius"; readonly outlineColor: "color"; readonly boxShadow: "shadow"; readonly opacity: "opacity"; readonly transitionDelay: "duration"; readonly transitionDuration: "duration"; readonly animationDelay: "duration"; readonly animationDuration: "duration"; }; }; //# sourceMappingURL=theme.d.ts.map