UNPKG

7.29 kBJavaScriptView Raw
1// src/theme.ts
2var ratios = (start, end) => {
3 const result = {};
4 do {
5 for (let dividend = 1; dividend < start; dividend++) {
6 result[`${dividend}/${start}`] = Number((dividend / start * 100).toFixed(6)) + "%";
7 }
8 } while (++start <= end);
9 return result;
10};
11var exponential = (stop, unit, start = 0) => {
12 const result = {};
13 for (; start <= stop; start = start * 2 || 1) {
14 result[start] = start + unit;
15 }
16 return result;
17};
18var linear = (stop, unit = "", divideBy = 1, start = 0, step = 1) => {
19 const result = {};
20 for (; start <= stop; start += step) {
21 result[start] = start / divideBy + unit;
22 }
23 return result;
24};
25var theme = {
26 extend: {
27 colors: {
28 black: "#000",
29 white: "#fff",
30 "gray-50": "#f9fafb",
31 "gray-100": "#f3f4f6",
32 "gray-200": "#e5e7eb",
33 "gray-300": "#d1d5db",
34 "gray-400": "#9ca3af",
35 "gray-500": "#6b7280",
36 "gray-600": "#4b5563",
37 "gray-700": "#374151",
38 "gray-800": "#1f2937",
39 "gray-900": "#111827",
40 "red-50": "#fef2f2",
41 "red-100": "#fee2e2",
42 "red-200": "#fecaca",
43 "red-300": "#fca5a5",
44 "red-400": "#f87171",
45 "red-500": "#ef4444",
46 "red-600": "#dc2626",
47 "red-700": "#b91c1c",
48 "red-800": "#991b1b",
49 "red-900": "#7f1d1d",
50 "yellow-50": "#fffbeb",
51 "yellow-100": "#fef3c7",
52 "yellow-200": "#fde68a",
53 "yellow-300": "#fcd34d",
54 "yellow-400": "#fbbf24",
55 "yellow-500": "#f59e0b",
56 "yellow-600": "#d97706",
57 "yellow-700": "#b45309",
58 "yellow-800": "#92400e",
59 "yellow-900": "#78350f",
60 "green-50": "#ecfdf5",
61 "green-100": "#d1fae5",
62 "green-200": "#a7f3d0",
63 "green-300": "#6ee7b7",
64 "green-400": "#34d399",
65 "green-500": "#10b981",
66 "green-600": "#059669",
67 "green-700": "#047857",
68 "green-800": "#065f46",
69 "green-900": "#064e3b",
70 "blue-50": "#eff6ff",
71 "blue-100": "#dbeafe",
72 "blue-200": "#bfdbfe",
73 "blue-300": "#93c5fd",
74 "blue-400": "#60a5fa",
75 "blue-500": "#3b82f6",
76 "blue-600": "#2563eb",
77 "blue-700": "#1d4ed8",
78 "blue-800": "#1e40af",
79 "blue-900": "#1e3a8a",
80 "indigo-50": "#eef2ff",
81 "indigo-100": "#e0e7ff",
82 "indigo-200": "#c7d2fe",
83 "indigo-300": "#a5b4fc",
84 "indigo-400": "#818cf8",
85 "indigo-500": "#6366f1",
86 "indigo-600": "#4f46e5",
87 "indigo-700": "#4338ca",
88 "indigo-800": "#3730a3",
89 "indigo-900": "#312e81",
90 "purple-50": "#f5f3ff",
91 "purple-100": "#ede9fe",
92 "purple-200": "#ddd6fe",
93 "purple-300": "#c4b5fd",
94 "purple-400": "#a78bfa",
95 "purple-500": "#8b5cf6",
96 "purple-600": "#7c3aed",
97 "purple-700": "#6d28d9",
98 "purple-800": "#5b21b6",
99 "purple-900": "#4c1d95",
100 "pink-50": "#fdf2f8",
101 "pink-100": "#fce7f3",
102 "pink-200": "#fbcfe8",
103 "pink-300": "#f9a8d4",
104 "pink-400": "#f472b6",
105 "pink-500": "#ec4899",
106 "pink-600": "#db2777",
107 "pink-700": "#be185d",
108 "pink-800": "#9d174d",
109 "pink-900": "#831843"
110 },
111 spacing: {
112 ...linear(4, "rem", 4, 0.5, 0.5),
113 ...linear(12, "rem", 4, 5),
114 14: "3.5rem",
115 ...linear(64, "rem", 4, 16, 4),
116 72: "18rem",
117 80: "20rem",
118 96: "24rem"
119 },
120 durations: {
121 75: "75ms",
122 100: "100ms",
123 150: "150ms",
124 200: "200ms",
125 300: "300ms",
126 500: "500ms",
127 700: "700ms",
128 1e3: "1000ms"
129 },
130 animation: {
131 spin: ["1s linear infinite"],
132 ping: ["1s cubic-bezier(0,0,0.2,1) infinite"],
133 pulse: ["2s cubic-bezier(0.4,0,0.6,1) infinite"],
134 bounce: ["1s infinite"]
135 },
136 borderColor: {
137 DEFAULT: (theme3) => theme3("colors", "gray-200", "currentColor")
138 },
139 borderRadius: {
140 sm: "0.125rem",
141 md: "0.375rem",
142 lg: "0.5rem",
143 xl: "0.75rem",
144 "2xl": "1rem",
145 "3xl": "1.5rem"
146 },
147 borderWidth: {
148 DEFAULT: "1px",
149 ...exponential(8, "px")
150 },
151 boxShadow: {
152 sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
153 DEFAULT: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
154 md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
155 lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
156 xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
157 "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
158 inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
159 },
160 fontFamily: {
161 sans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
162 serif: 'ui-serif,Georgia,Cambria,"Times New Roman",Times,serif',
163 mono: 'ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace'
164 },
165 height: ratios(2, 6),
166 inset: ratios(2, 4),
167 keyframes: {
168 spin: {
169 from: {
170 transform: "rotate(0deg)"
171 },
172 to: {
173 transform: "rotate(360deg)"
174 }
175 },
176 ping: {
177 "0%": {
178 transform: "scale(1)",
179 opacity: "1"
180 },
181 "75%,100%": {
182 transform: "scale(2)",
183 opacity: "0"
184 }
185 },
186 pulse: {
187 "0%,100%": {
188 opacity: "1"
189 },
190 "50%": {
191 opacity: ".5"
192 }
193 },
194 bounce: {
195 "0%, 100%": {
196 transform: "translateY(-25%)",
197 "animation-timing-function": "cubic-bezier(0.8,0,1,1)"
198 },
199 "50%": {
200 transform: "none",
201 "animation-timing-function": "cubic-bezier(0,0,0.2,1)"
202 }
203 }
204 },
205 lineHeight: linear(10, "rem", 4, 3),
206 maxWidth: {
207 xs: "20rem",
208 sm: "24rem",
209 md: "28rem",
210 lg: "32rem",
211 xl: "36rem",
212 "2xl": "42rem",
213 "3xl": "48rem",
214 "4xl": "56rem",
215 "5xl": "64rem",
216 "6xl": "72rem",
217 "7xl": "80rem",
218 prose: "65ch"
219 },
220 opacity: {
221 5: "0.05",
222 ...linear(90, "", 100, 10, 10),
223 95: "0.95"
224 },
225 order: linear(12, "", 1, 1),
226 outline: {
227 white: ["2px dotted white", "2px"],
228 black: ["2px dotted black", "2px"]
229 },
230 ringColor: {
231 DEFAULT: (theme3) => theme3("colors", "blue-500", "#3b82f6")
232 },
233 ringOffsetWidth: exponential(8, "px"),
234 ringWidth: exponential(8, "px"),
235 rotate: {
236 ...exponential(2, "deg"),
237 ...exponential(12, "deg", 3),
238 ...exponential(180, "deg", 45)
239 },
240 scale: {
241 0: "0",
242 50: ".5",
243 75: ".75",
244 ...linear(110, "", 100, 90, 5),
245 125: "1.25",
246 150: "1.5"
247 },
248 skew: {
249 ...exponential(2, "deg"),
250 ...exponential(12, "deg", 3)
251 },
252 strokeWidth: linear(2),
253 transitionTimingFunction: {
254 linear: "linear",
255 in: "cubic-bezier(0.4, 0, 1, 1)",
256 out: "cubic-bezier(0, 0, 0.2, 1)",
257 "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
258 },
259 translate: ratios(2, 4),
260 width: {
261 ...ratios(2, 6),
262 ...ratios(12, 12)
263 },
264 zIndex: linear(50, "", 1, 0, 10)
265 }
266};
267
268// src/index.ts
269var src_default = () => ({theme});
270export {
271 src_default as default
272};