UNPKG

3.89 kBTypeScriptView Raw
1// import * as StyledSystem from "styled-system";
2import { Icons } from "./icons";
3import { Omit } from "../common-types";
4import * as SS from "styled-system";
5
6interface Shadows {
7 sm: string;
8 md: string;
9 lg: string;
10 xl: string;
11 "2xl": string;
12 outline: string;
13 inner: string;
14 none: string;
15}
16
17export interface ColorHues {
18 50: string;
19 100: string;
20 200: string;
21 300: string;
22 400: string;
23 500: string;
24 600: string;
25 700: string;
26 800: string;
27 900: string;
28}
29
30type Breakpoints =
31 | string[]
32 | { sm: string; md: string; lg: string; xl: string };
33
34type StringOrNumber = string | number;
35interface ZIndices {
36 hide: number;
37 auto: string;
38 base: number;
39 docked: number;
40 dropdown: number;
41 sticky: number;
42 banner: number;
43 overlay: number;
44 modal: number;
45 popover: number;
46 skipLink: number;
47 toast: number;
48 tooltip: number;
49}
50
51interface Radii {
52 none: string;
53 sm: string;
54 md: string;
55 lg: string;
56 full: string;
57}
58
59interface Borders {
60 none: StringOrNumber;
61 "1px": StringOrNumber;
62 "2px": StringOrNumber;
63 "4px": StringOrNumber;
64}
65
66interface Colors {
67 transparent: string;
68 current: string;
69 black: string;
70 white: string;
71 whiteAlpha: ColorHues;
72 blackAlpha: ColorHues;
73 gray: ColorHues;
74 red: ColorHues;
75 orange: ColorHues;
76 yellow: ColorHues;
77 green: ColorHues;
78 teal: ColorHues;
79 blue: ColorHues;
80 cyan: ColorHues;
81 purple: ColorHues;
82 pink: ColorHues;
83 linkedin: ColorHues;
84 facebook: ColorHues;
85 messenger: ColorHues;
86 whatsapp: ColorHues;
87 twitter: ColorHues;
88 telegram: ColorHues;
89}
90
91export type VariantColor = keyof Omit<Colors, "transparent" | "current">;
92
93interface BaseSizes {
94 px: string;
95 "0": string;
96 "1": string;
97 "2": string;
98 "3": string;
99 "4": string;
100 "5": string;
101 "6": string;
102 "8": string;
103 "10": string;
104 "12": string;
105 "16": string;
106 "20": string;
107 "24": string;
108 "32": string;
109 "40": string;
110 "48": string;
111 "56": string;
112 "64": string;
113}
114
115interface LargeSizes {
116 full: string;
117 "3xs": string;
118 "2xs": string;
119 xs: string;
120 sm: string;
121 md: string;
122 lg: string;
123 xl: string;
124 "2xl": string;
125 "3xl": string;
126 "4xl": string;
127 "5xl": string;
128 "6xl": string;
129}
130
131interface Containers {
132 sm: string;
133 md: string;
134 lg: string;
135 xl: string;
136}
137
138type Sizes = BaseSizes &
139 LargeSizes & {
140 containers: Containers;
141 };
142
143interface LetterSpacings {
144 tighter: string;
145 tight: string;
146 normal: string;
147 wide: string;
148 wider: string;
149 widest: string;
150}
151
152interface LineHeights {
153 normal: string;
154 none: string;
155 shorter: string;
156 short: string;
157 base: string;
158 tall: string;
159 taller: string;
160}
161
162interface FontWeights {
163 hairline: number;
164 thin: number;
165 light: number;
166 normal: number;
167 medium: number;
168 semibold: number;
169 bold: number;
170 extrabold: number;
171 black: number;
172}
173
174interface Fonts {
175 heading: string;
176 body: string;
177 mono: string;
178}
179
180interface FontSizes {
181 xs: string;
182 sm: string;
183 md: string;
184 lg: string;
185 xl: string;
186 "2xl": string;
187 "3xl": string;
188 "4xl": string;
189 "5xl": string;
190 "6xl": string;
191}
192
193interface Typography {
194 letterSpacings: LetterSpacings;
195 lineHeights: LineHeights;
196 fontWeights: FontWeights;
197 fonts: Fonts;
198 fontSizes: FontSizes;
199}
200
201interface Opacity {
202 "0": string;
203 "20%": string;
204 "40%": string;
205 "60%": string;
206 "80%": string;
207 "100%": string;
208}
209
210export interface DefaultTheme extends Typography {
211 breakpoints: Breakpoints;
212 zIndices: ZIndices;
213 radii: Radii;
214 opacity: Opacity;
215 borders: Borders;
216 colors: Colors;
217 sizes: Sizes;
218 shadows: Shadows;
219 space: BaseSizes;
220 icons: Record<string, Icon>;
221}
222
223interface Icon {
224 path: JSX.Element;
225 viewBox?: string;
226}
227
228export type IconsType = Record<string, Icon>;
229
230export interface CustomTheme extends SS.Theme {
231 icons: IconsType;
232}
233
234export type ITheme = DefaultTheme;
235
236declare const theme: ITheme;
237
238export default theme;