UNPKG

17.7 kBTypeScriptView Raw
1import * as emotionReact from "./_modules/@emotion-react-types-index";
2import { Interpolation, Keyframes, SerializedStyles } from "./_modules/@emotion-react-types-index";
3declare const animation: {
4 readonly rotate360: Keyframes;
5 readonly glow: Keyframes;
6 readonly float: Keyframes;
7 readonly jiggle: Keyframes;
8 readonly inlineGlow: SerializedStyles;
9 readonly hoverable: SerializedStyles;
10};
11declare const darkenColor: (color: string) => string;
12declare const easing: {
13 rubber: string;
14};
15declare const lightenColor: (color: string) => string;
16export declare const Global: (props: {
17 styles: emotionReact.Interpolation<Theme>;
18}) => React.ReactElement;
19export declare const background: {
20 app: string;
21 bar: string;
22 content: string;
23 gridCellSize: number;
24 hoverable: string;
25 positive: string;
26 negative: string;
27 warning: string;
28 critical: string;
29};
30export declare const color: {
31 primary: string;
32 secondary: string;
33 tertiary: string;
34 ancillary: string;
35 orange: string;
36 gold: string;
37 green: string;
38 seafoam: string;
39 purple: string;
40 ultraviolet: string;
41 lightest: string;
42 lighter: string;
43 light: string;
44 mediumlight: string;
45 medium: string;
46 mediumdark: string;
47 dark: string;
48 darker: string;
49 darkest: string;
50 border: string;
51 positive: string;
52 negative: string;
53 warning: string;
54 critical: string;
55 defaultText: string;
56 inverseText: string;
57};
58export declare const convert: (inherit?: ThemeVars) => Theme;
59export declare const create: (vars?: ThemeVars, rest?: Rest) => ThemeVars;
60export declare const createGlobal: ({ color, background, typography, }: {
61 color: Color;
62 background: Background;
63 typography: Typography;
64}) => Return;
65export declare const createReset: ({ typography }: {
66 typography: Typography;
67}) => Return;
68export declare const ensure: (input: ThemeVars) => Theme;
69export declare const ignoreSsrWarning = "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
70export declare const styled: CreateStyled<Theme>;
71export declare const themes: {
72 light: ThemeVars;
73 dark: ThemeVars;
74 normal: ThemeVars;
75};
76export declare const typography: {
77 fonts: {
78 base: string;
79 mono: string;
80 };
81 weight: {
82 regular: number;
83 bold: number;
84 black: number;
85 };
86 size: {
87 s1: number;
88 s2: number;
89 s3: number;
90 m1: number;
91 m2: number;
92 m3: number;
93 l1: number;
94 l2: number;
95 l3: number;
96 code: number;
97 };
98};
99export declare const useTheme: <TTheme = Theme>() => TTheme;
100export declare const withTheme: <C extends import("react").ComponentType<any>>(component: C) => import("react").FC<AddOptionalTo<JSX.LibraryManagedAttributes<C, import("react").ComponentPropsWithRef<C>>, "theme">>;
101export declare type AddOptionalTo<T, U> = DistributiveOmit<T, U> & Partial<Pick<T, Extract<keyof T, U>>>;
102export declare type Animation = typeof animation;
103export declare type Background = typeof background;
104export declare type Color = typeof color;
105export declare type CreateStyledComponentBase<InnerProps, ExtraProps, StyledInstanceTheme extends object> = object extends StyledInstanceTheme ? CreateStyledComponentBaseThemeless<InnerProps, ExtraProps> : CreateStyledComponentBaseThemed<InnerProps, ExtraProps, StyledInstanceTheme>;
106export declare type CreateStyledComponentExtrinsic<Tag extends React.ComponentType<any>, ExtraProps, Theme extends object> = CreateStyledComponentBase<PropsOf<Tag>, ExtraProps, Theme>;
107export declare type CreateStyledComponentIntrinsic<Tag extends keyof JSXInEl, ExtraProps, Theme extends object> = CreateStyledComponentBase<JSXInEl[Tag], ExtraProps, Theme>;
108export declare type DistributiveOmit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never;
109export declare type Easing = typeof easing;
110export declare type JSXInEl = JSX.IntrinsicElements;
111export declare type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>;
112export declare type PropsOf<C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>;
113export declare type ReactClassPropKeys = keyof React.ClassAttributes<any>;
114export declare type TextSize = number | string;
115export declare type Typography = typeof typography;
116export declare type Value = string | number;
117export declare type WithTheme<P, T> = P extends {
118 theme: infer Theme;
119} ? P & {
120 theme: Exclude<Theme, undefined>;
121} : P & {
122 theme: T;
123};
124export interface BaseCreateStyled<Theme extends object = any> {
125 <Tag extends React.ComponentType<any>, ExtraProps = {}>(tag: Tag, options?: StyledOptions): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme>;
126 <Tag extends keyof JSXInEl, ExtraProps = {}>(tag: Tag, options?: StyledOptions): CreateStyledComponentIntrinsic<Tag, ExtraProps, Theme>;
127}
128export interface Brand {
129 title: string | undefined;
130 url: string | null | undefined;
131 image: string | null | undefined;
132 target: string | null | undefined;
133}
134export interface ComponentSelector {
135 __emotion_styles: any;
136}
137export interface CreateStyled<Theme extends object = any> extends BaseCreateStyled<Theme>, StyledTags<Theme> {
138}
139export interface CreateStyledComponentBaseThemed<InnerProps, ExtraProps, StyledInstanceTheme extends object> {
140 <StyleProps extends DistributiveOmit<Overwrapped<InnerProps, StyleProps>, ReactClassPropKeys> = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>>(...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;
141 <StyleProps extends DistributiveOmit<Overwrapped<InnerProps, StyleProps>, ReactClassPropKeys> = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>>(template: TemplateStringsArray, ...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;
142}
143export interface CreateStyledComponentBaseThemeless<InnerProps, ExtraProps> {
144 <StyleProps extends DistributiveOmit<Overwrapped<InnerProps, StyleProps>, ReactClassPropKeys> = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>, Theme extends object = object>(...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>): StyledComponent<InnerProps, StyleProps, Theme>;
145 <StyleProps extends DistributiveOmit<Overwrapped<InnerProps, StyleProps>, ReactClassPropKeys> = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>, Theme extends object = object>(template: TemplateStringsArray, ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>): StyledComponent<InnerProps, StyleProps, Theme>;
146}
147export interface Rest {
148 [key: string]: any;
149}
150export interface Return {
151 [key: string]: {
152 [key: string]: Value;
153 };
154}
155export interface StyledComponent<InnerProps, StyleProps, Theme extends object> extends React.FC<InnerProps & DistributiveOmit<StyleProps, "theme"> & {
156 theme?: Theme;
157}>, ComponentSelector {
158 /**
159 * @desc this method is type-unsafe
160 */
161 withComponent<NewTag extends keyof JSXInEl>(tag: NewTag): StyledComponent<JSXInEl[NewTag], StyleProps, Theme>;
162 withComponent<Tag extends React.ComponentType<any>>(tag: Tag): StyledComponent<PropsOf<Tag>, StyleProps, Theme>;
163}
164export interface StyledOptions {
165 label?: string;
166 shouldForwardProp?(propName: string): boolean;
167 target?: string;
168}
169export interface StyledTags<Theme extends object> {
170 /**
171 * @desc
172 * HTML tags
173 */
174 a: CreateStyledComponentIntrinsic<"a", {}, Theme>;
175 abbr: CreateStyledComponentIntrinsic<"abbr", {}, Theme>;
176 address: CreateStyledComponentIntrinsic<"address", {}, Theme>;
177 area: CreateStyledComponentIntrinsic<"area", {}, Theme>;
178 article: CreateStyledComponentIntrinsic<"article", {}, Theme>;
179 aside: CreateStyledComponentIntrinsic<"aside", {}, Theme>;
180 audio: CreateStyledComponentIntrinsic<"audio", {}, Theme>;
181 b: CreateStyledComponentIntrinsic<"b", {}, Theme>;
182 base: CreateStyledComponentIntrinsic<"base", {}, Theme>;
183 bdi: CreateStyledComponentIntrinsic<"bdi", {}, Theme>;
184 bdo: CreateStyledComponentIntrinsic<"bdo", {}, Theme>;
185 big: CreateStyledComponentIntrinsic<"big", {}, Theme>;
186 blockquote: CreateStyledComponentIntrinsic<"blockquote", {}, Theme>;
187 body: CreateStyledComponentIntrinsic<"body", {}, Theme>;
188 br: CreateStyledComponentIntrinsic<"br", {}, Theme>;
189 button: CreateStyledComponentIntrinsic<"button", {}, Theme>;
190 canvas: CreateStyledComponentIntrinsic<"canvas", {}, Theme>;
191 caption: CreateStyledComponentIntrinsic<"caption", {}, Theme>;
192 cite: CreateStyledComponentIntrinsic<"cite", {}, Theme>;
193 code: CreateStyledComponentIntrinsic<"code", {}, Theme>;
194 col: CreateStyledComponentIntrinsic<"col", {}, Theme>;
195 colgroup: CreateStyledComponentIntrinsic<"colgroup", {}, Theme>;
196 data: CreateStyledComponentIntrinsic<"data", {}, Theme>;
197 datalist: CreateStyledComponentIntrinsic<"datalist", {}, Theme>;
198 dd: CreateStyledComponentIntrinsic<"dd", {}, Theme>;
199 del: CreateStyledComponentIntrinsic<"del", {}, Theme>;
200 details: CreateStyledComponentIntrinsic<"details", {}, Theme>;
201 dfn: CreateStyledComponentIntrinsic<"dfn", {}, Theme>;
202 dialog: CreateStyledComponentIntrinsic<"dialog", {}, Theme>;
203 div: CreateStyledComponentIntrinsic<"div", {}, Theme>;
204 dl: CreateStyledComponentIntrinsic<"dl", {}, Theme>;
205 dt: CreateStyledComponentIntrinsic<"dt", {}, Theme>;
206 em: CreateStyledComponentIntrinsic<"em", {}, Theme>;
207 embed: CreateStyledComponentIntrinsic<"embed", {}, Theme>;
208 fieldset: CreateStyledComponentIntrinsic<"fieldset", {}, Theme>;
209 figcaption: CreateStyledComponentIntrinsic<"figcaption", {}, Theme>;
210 figure: CreateStyledComponentIntrinsic<"figure", {}, Theme>;
211 footer: CreateStyledComponentIntrinsic<"footer", {}, Theme>;
212 form: CreateStyledComponentIntrinsic<"form", {}, Theme>;
213 h1: CreateStyledComponentIntrinsic<"h1", {}, Theme>;
214 h2: CreateStyledComponentIntrinsic<"h2", {}, Theme>;
215 h3: CreateStyledComponentIntrinsic<"h3", {}, Theme>;
216 h4: CreateStyledComponentIntrinsic<"h4", {}, Theme>;
217 h5: CreateStyledComponentIntrinsic<"h5", {}, Theme>;
218 h6: CreateStyledComponentIntrinsic<"h6", {}, Theme>;
219 head: CreateStyledComponentIntrinsic<"head", {}, Theme>;
220 header: CreateStyledComponentIntrinsic<"header", {}, Theme>;
221 hgroup: CreateStyledComponentIntrinsic<"hgroup", {}, Theme>;
222 hr: CreateStyledComponentIntrinsic<"hr", {}, Theme>;
223 html: CreateStyledComponentIntrinsic<"html", {}, Theme>;
224 i: CreateStyledComponentIntrinsic<"i", {}, Theme>;
225 iframe: CreateStyledComponentIntrinsic<"iframe", {}, Theme>;
226 img: CreateStyledComponentIntrinsic<"img", {}, Theme>;
227 input: CreateStyledComponentIntrinsic<"input", {}, Theme>;
228 ins: CreateStyledComponentIntrinsic<"ins", {}, Theme>;
229 kbd: CreateStyledComponentIntrinsic<"kbd", {}, Theme>;
230 keygen: CreateStyledComponentIntrinsic<"keygen", {}, Theme>;
231 label: CreateStyledComponentIntrinsic<"label", {}, Theme>;
232 legend: CreateStyledComponentIntrinsic<"legend", {}, Theme>;
233 li: CreateStyledComponentIntrinsic<"li", {}, Theme>;
234 link: CreateStyledComponentIntrinsic<"link", {}, Theme>;
235 main: CreateStyledComponentIntrinsic<"main", {}, Theme>;
236 map: CreateStyledComponentIntrinsic<"map", {}, Theme>;
237 mark: CreateStyledComponentIntrinsic<"mark", {}, Theme>;
238 /**
239 * @desc
240 * marquee tag is not supported by @types/react
241 */
242 menu: CreateStyledComponentIntrinsic<"menu", {}, Theme>;
243 menuitem: CreateStyledComponentIntrinsic<"menuitem", {}, Theme>;
244 meta: CreateStyledComponentIntrinsic<"meta", {}, Theme>;
245 meter: CreateStyledComponentIntrinsic<"meter", {}, Theme>;
246 nav: CreateStyledComponentIntrinsic<"nav", {}, Theme>;
247 noscript: CreateStyledComponentIntrinsic<"noscript", {}, Theme>;
248 object: CreateStyledComponentIntrinsic<"object", {}, Theme>;
249 ol: CreateStyledComponentIntrinsic<"ol", {}, Theme>;
250 optgroup: CreateStyledComponentIntrinsic<"optgroup", {}, Theme>;
251 option: CreateStyledComponentIntrinsic<"option", {}, Theme>;
252 output: CreateStyledComponentIntrinsic<"output", {}, Theme>;
253 p: CreateStyledComponentIntrinsic<"p", {}, Theme>;
254 param: CreateStyledComponentIntrinsic<"param", {}, Theme>;
255 picture: CreateStyledComponentIntrinsic<"picture", {}, Theme>;
256 pre: CreateStyledComponentIntrinsic<"pre", {}, Theme>;
257 progress: CreateStyledComponentIntrinsic<"progress", {}, Theme>;
258 q: CreateStyledComponentIntrinsic<"q", {}, Theme>;
259 rp: CreateStyledComponentIntrinsic<"rp", {}, Theme>;
260 rt: CreateStyledComponentIntrinsic<"rt", {}, Theme>;
261 ruby: CreateStyledComponentIntrinsic<"ruby", {}, Theme>;
262 s: CreateStyledComponentIntrinsic<"s", {}, Theme>;
263 samp: CreateStyledComponentIntrinsic<"samp", {}, Theme>;
264 script: CreateStyledComponentIntrinsic<"script", {}, Theme>;
265 section: CreateStyledComponentIntrinsic<"section", {}, Theme>;
266 select: CreateStyledComponentIntrinsic<"select", {}, Theme>;
267 small: CreateStyledComponentIntrinsic<"small", {}, Theme>;
268 source: CreateStyledComponentIntrinsic<"source", {}, Theme>;
269 span: CreateStyledComponentIntrinsic<"span", {}, Theme>;
270 strong: CreateStyledComponentIntrinsic<"strong", {}, Theme>;
271 style: CreateStyledComponentIntrinsic<"style", {}, Theme>;
272 sub: CreateStyledComponentIntrinsic<"sub", {}, Theme>;
273 summary: CreateStyledComponentIntrinsic<"summary", {}, Theme>;
274 sup: CreateStyledComponentIntrinsic<"sup", {}, Theme>;
275 table: CreateStyledComponentIntrinsic<"table", {}, Theme>;
276 tbody: CreateStyledComponentIntrinsic<"tbody", {}, Theme>;
277 td: CreateStyledComponentIntrinsic<"td", {}, Theme>;
278 textarea: CreateStyledComponentIntrinsic<"textarea", {}, Theme>;
279 tfoot: CreateStyledComponentIntrinsic<"tfoot", {}, Theme>;
280 th: CreateStyledComponentIntrinsic<"th", {}, Theme>;
281 thead: CreateStyledComponentIntrinsic<"thead", {}, Theme>;
282 time: CreateStyledComponentIntrinsic<"time", {}, Theme>;
283 title: CreateStyledComponentIntrinsic<"title", {}, Theme>;
284 tr: CreateStyledComponentIntrinsic<"tr", {}, Theme>;
285 track: CreateStyledComponentIntrinsic<"track", {}, Theme>;
286 u: CreateStyledComponentIntrinsic<"u", {}, Theme>;
287 ul: CreateStyledComponentIntrinsic<"ul", {}, Theme>;
288 var: CreateStyledComponentIntrinsic<"var", {}, Theme>;
289 video: CreateStyledComponentIntrinsic<"video", {}, Theme>;
290 wbr: CreateStyledComponentIntrinsic<"wbr", {}, Theme>;
291 /**
292 * @desc
293 * SVG tags
294 */
295 circle: CreateStyledComponentIntrinsic<"circle", {}, Theme>;
296 clipPath: CreateStyledComponentIntrinsic<"clipPath", {}, Theme>;
297 defs: CreateStyledComponentIntrinsic<"defs", {}, Theme>;
298 ellipse: CreateStyledComponentIntrinsic<"ellipse", {}, Theme>;
299 foreignObject: CreateStyledComponentIntrinsic<"foreignObject", {}, Theme>;
300 g: CreateStyledComponentIntrinsic<"g", {}, Theme>;
301 image: CreateStyledComponentIntrinsic<"image", {}, Theme>;
302 line: CreateStyledComponentIntrinsic<"line", {}, Theme>;
303 linearGradient: CreateStyledComponentIntrinsic<"linearGradient", {}, Theme>;
304 mask: CreateStyledComponentIntrinsic<"mask", {}, Theme>;
305 path: CreateStyledComponentIntrinsic<"path", {}, Theme>;
306 pattern: CreateStyledComponentIntrinsic<"pattern", {}, Theme>;
307 polygon: CreateStyledComponentIntrinsic<"polygon", {}, Theme>;
308 polyline: CreateStyledComponentIntrinsic<"polyline", {}, Theme>;
309 radialGradient: CreateStyledComponentIntrinsic<"radialGradient", {}, Theme>;
310 rect: CreateStyledComponentIntrinsic<"rect", {}, Theme>;
311 stop: CreateStyledComponentIntrinsic<"stop", {}, Theme>;
312 svg: CreateStyledComponentIntrinsic<"svg", {}, Theme>;
313 text: CreateStyledComponentIntrinsic<"text", {}, Theme>;
314 tspan: CreateStyledComponentIntrinsic<"tspan", {}, Theme>;
315}
316export interface Theme {
317 color: Color;
318 background: Background;
319 typography: Typography;
320 animation: Animation;
321 easing: Easing;
322 input: {
323 border: string;
324 background: string;
325 color: string;
326 borderRadius: number;
327 };
328 layoutMargin: number;
329 appBorderColor: string;
330 appBorderRadius: number;
331 barTextColor: string;
332 barSelectedColor: string;
333 barBg: string;
334 brand: Brand;
335 code: {
336 [key: string]: string | object;
337 };
338 [key: string]: any;
339}
340export interface ThemeVars {
341 base: "light" | "dark";
342 colorPrimary?: string;
343 colorSecondary?: string;
344 appBg?: string;
345 appContentBg?: string;
346 appBorderColor?: string;
347 appBorderRadius?: number;
348 fontBase?: string;
349 fontCode?: string;
350 textColor?: string;
351 textInverseColor?: string;
352 textMutedColor?: string;
353 barTextColor?: string;
354 barSelectedColor?: string;
355 barBg?: string;
356 inputBg?: string;
357 inputBorder?: string;
358 inputTextColor?: string;
359 inputBorderRadius?: number;
360 brandTitle?: string;
361 brandUrl?: string;
362 brandImage?: string;
363 brandTarget?: string;
364 gridCellSize?: number;
365}
366export type { CSSObject, Keyframes } from "./_modules/@emotion-react-types-index";
367export { default as createCache } from "./_modules/@emotion-cache-types-index";
368export { default as isPropValid } from "./_modules/@emotion-is-prop-valid-types-index";
369export { keyframes, css, jsx, ClassNames, ThemeProvider, CacheProvider } from "./_modules/@emotion-react-types-index";
370export { darkenColor as darken, lightenColor as lighten, };
371export {};
\No newline at end of file