UNPKG

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