Skip to content

Commit c7b52d9

Browse files
atrakhConvex, Inc.
atrakh
authored and
Convex, Inc.
committed
include tailwind config in ui package src (#36395)
GitOrigin-RevId: 4faa2dce2d3e722f507b5503369c84ad011dff85
1 parent d680098 commit c7b52d9

File tree

2 files changed

+298
-294
lines changed

2 files changed

+298
-294
lines changed

‎npm-packages/ui/src/tailwind.config.ts

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
import tailwindScrollbar from "tailwind-scrollbar";
2+
import tailwindForms from "@tailwindcss/forms";
3+
4+
export const numberedColors = {
5+
red: {
6+
/* eslint-disable no-restricted-syntax */
7+
100: `rgba(var(--red-100), <alpha-value>)`,
8+
200: `rgba(var(--red-200), <alpha-value>)`,
9+
300: `rgba(var(--red-300), <alpha-value>)`,
10+
400: `rgba(var(--red-400), <alpha-value>)`,
11+
500: `rgba(var(--red-500), <alpha-value>)`,
12+
700: `rgba(var(--red-700), <alpha-value>)`,
13+
900: `rgba(var(--red-900), <alpha-value>)`,
14+
},
15+
purple: {
16+
100: `rgba(var(--purple-100), <alpha-value>)`,
17+
200: `rgba(var(--purple-200), <alpha-value>)`,
18+
500: `rgba(var(--purple-500), <alpha-value>)`,
19+
700: `rgba(var(--purple-700), <alpha-value>)`,
20+
900: `rgba(var(--purple-900), <alpha-value>)`,
21+
},
22+
blue: {
23+
100: `rgba(var(--blue-100), <alpha-value>)`,
24+
200: `rgba(var(--blue-200), <alpha-value>)`,
25+
500: `rgba(var(--blue-500), <alpha-value>)`,
26+
700: `rgba(var(--blue-700), <alpha-value>)`,
27+
900: `rgba(var(--blue-900), <alpha-value>)`,
28+
},
29+
cyan: {
30+
200: `rgba(var(--cyan-200), <alpha-value>)`,
31+
500: `rgba(var(--cyan-500), <alpha-value>)`,
32+
700: `rgba(var(--cyan-700), <alpha-value>)`,
33+
900: `rgba(var(--cyan-900), <alpha-value>)`,
34+
},
35+
green: {
36+
100: `rgba(var(--green-100), <alpha-value>)`,
37+
200: `rgba(var(--green-200), <alpha-value>)`,
38+
500: `rgba(var(--green-500), <alpha-value>)`,
39+
700: `rgba(var(--green-700), <alpha-value>)`,
40+
900: `rgba(var(--green-900), <alpha-value>)`,
41+
},
42+
yellow: {
43+
50: `rgba(var(--yellow-50), <alpha-value>)`,
44+
100: `rgba(var(--yellow-100), <alpha-value>)`,
45+
200: `rgba(var(--yellow-200), <alpha-value>)`,
46+
500: `rgba(var(--yellow-500), <alpha-value>)`,
47+
700: `rgba(var(--yellow-700), <alpha-value>)`,
48+
900: `rgba(var(--yellow-900), <alpha-value>)`,
49+
},
50+
neutral: {
51+
1: `rgba(var(--neutral-1), <alpha-value>)`,
52+
2: `rgba(var(--neutral-2), <alpha-value>)`,
53+
3: `rgba(var(--neutral-3), <alpha-value>)`,
54+
4: `rgba(var(--neutral-4), <alpha-value>)`,
55+
5: `rgba(var(--neutral-5), <alpha-value>)`,
56+
6: `rgba(var(--neutral-6), <alpha-value>)`,
57+
7: `rgba(var(--neutral-7), <alpha-value>)`,
58+
8: `rgba(var(--neutral-8), <alpha-value>)`,
59+
9: `rgba(var(--neutral-9), <alpha-value>)`,
60+
10: `rgba(var(--neutral-10), <alpha-value>)`,
61+
11: `rgba(var(--neutral-11), <alpha-value>)`,
62+
12: `rgba(var(--neutral-12), <alpha-value>)`,
63+
},
64+
};
65+
66+
type ThemeColors = {
67+
background: {
68+
brand: string;
69+
primary: string;
70+
secondary: string;
71+
tertiary: string;
72+
success: string;
73+
warning: string;
74+
error: string;
75+
errorSecondary: string;
76+
};
77+
chart: {
78+
line: {
79+
1: string;
80+
2: string;
81+
3: string;
82+
4: string;
83+
5: string;
84+
6: string;
85+
7: string;
86+
8: string;
87+
};
88+
};
89+
content: {
90+
primary: string;
91+
secondary: string;
92+
tertiary: string;
93+
accent: string;
94+
success: string;
95+
warning: string;
96+
error: string;
97+
errorSecondary: string;
98+
link: string;
99+
};
100+
border: {
101+
transparent: string;
102+
selected: string;
103+
};
104+
};
105+
106+
export const themeColors: ThemeColors = {
107+
background: {
108+
brand: "rgba(var(--background-brand), <alpha-value>)",
109+
primary: `rgba(var(--background-primary), <alpha-value>)`,
110+
secondary: `rgba(var(--background-secondary), <alpha-value>)`,
111+
tertiary: `rgba(var(--background-tertiary), <alpha-value>)`,
112+
success: `rgba(var(--background-success), <alpha-value>)`,
113+
warning: `rgba(var(--background-warning), <alpha-value>)`,
114+
error: `rgba(var(--background-error), <alpha-value>)`,
115+
errorSecondary: `rgba(var(--background-error-secondary), <alpha-value>)`,
116+
},
117+
content: {
118+
primary: `rgba(var(--content-primary), <alpha-value>)`,
119+
secondary: `rgba(var(--content-secondary), <alpha-value>)`,
120+
tertiary: `rgba(var(--content-tertiary), <alpha-value>)`,
121+
accent: `rgba(var(--content-accent), <alpha-value>)`,
122+
success: `rgba(var(--content-success), <alpha-value>)`,
123+
warning: `rgba(var(--content-warning), <alpha-value>)`,
124+
error: `rgba(var(--content-error), <alpha-value>)`,
125+
errorSecondary: `rgba(var(--content-error-secondary), <alpha-value>)`,
126+
link: `rgba(var(--content-link), <alpha-value>)`,
127+
},
128+
chart: {
129+
line: {
130+
1: `rgba(var(--chart-line-1), <alpha-value>)`,
131+
2: `rgba(var(--chart-line-2), <alpha-value>)`,
132+
3: `rgba(var(--chart-line-3), <alpha-value>)`,
133+
4: `rgba(var(--chart-line-4), <alpha-value>)`,
134+
5: `rgba(var(--chart-line-5), <alpha-value>)`,
135+
6: `rgba(var(--chart-line-6), <alpha-value>)`,
136+
7: `rgba(var(--chart-line-7), <alpha-value>)`,
137+
8: `rgba(var(--chart-line-8), <alpha-value>)`,
138+
},
139+
},
140+
border: {
141+
// Transparent border color already has it's own alpha.
142+
transparent: `rgba(var(--border-transparent))`,
143+
selected: `rgba(var(--border-selected), <alpha-value>)`,
144+
},
145+
};
146+
147+
export const utilColors = {
148+
accent: `rgba(var(--accent), <alpha-value>)`,
149+
info: `rgba(var(--info), <alpha-value>)`,
150+
success: `rgba(var(--success), <alpha-value>)`,
151+
warning: `rgba(var(--warning), <alpha-value>)`,
152+
danger: `rgba(var(--error), <alpha-value>)`,
153+
brand: {
154+
purple: `rgba(var(--brand-purple), <alpha-value>)`,
155+
red: `rgba(var(--brand-red), <alpha-value>)`,
156+
yellow: `rgba(var(--brand-yellow), <alpha-value>)`,
157+
},
158+
};
159+
160+
// eslint-disable-next-line import/no-default-export
161+
export default {
162+
darkMode: "class",
163+
content: [
164+
"../ui/src/**/*.{js,ts,jsx,tsx}",
165+
"../ui/src/*.{js,ts,jsx,tsx}",
166+
"../dashboard/src/**/*.{js,ts,jsx,tsx}",
167+
"../dashboard-common/src/**/*.{js,ts,jsx,tsx}",
168+
"../dashboard-self-hosted/src/**/*.{js,ts,jsx,tsx}",
169+
],
170+
theme: {
171+
extend: {
172+
animation: {
173+
blink: "blink 2s linear infinite",
174+
bounceIn: "bounceIn 0.5s ease-in-out",
175+
highlight: "highlight 1s",
176+
highlightBorder: "highlightBorder 1s",
177+
loading: "fadeIn 1.2s, shimmer 1.2s infinite",
178+
fadeIn: "fadeIn 1s",
179+
fadeInFromLoading: "fadeIn 0.3s",
180+
vhs: "vhs 0.5s linear 0.25s 1 normal forwards",
181+
blinkFill: "blinkFill 1.2s ease-in-out infinite",
182+
rotate: "fadeIn 1.2s, rotate 1.2s ease-in-out infinite",
183+
},
184+
keyframes: {
185+
rotate: {
186+
"0%": { transform: "rotate(0deg)" },
187+
"100%": { transform: "rotate(360deg)" },
188+
},
189+
blinkFill: {
190+
"0%": {
191+
fillOpacity: 1,
192+
opacity: 1,
193+
},
194+
"50%": {
195+
fillOpacity: 0.75,
196+
opacity: 0.75,
197+
},
198+
"100%": {
199+
fillOpacity: 1,
200+
opacity: 1,
201+
},
202+
},
203+
shimmer: {
204+
"100%": {
205+
transform: "translateX(100%)",
206+
},
207+
},
208+
blink: {
209+
"0%": {
210+
opacity: 1,
211+
},
212+
"50%": {
213+
opacity: 0.5,
214+
},
215+
"100%": {
216+
opacity: 1,
217+
},
218+
},
219+
vhs: {
220+
"0%": {
221+
height: "0%",
222+
transform: "skew(-90deg)",
223+
marginLeft: "-2rem",
224+
},
225+
"100%": {
226+
height: "100%",
227+
transform: "skew(0deg)",
228+
marginRight: "0px",
229+
},
230+
},
231+
bounceIn: {
232+
"0%": { transform: "translateY(0);" },
233+
"25%": { transform: "translateY(-0.5rem);" },
234+
"50%": { transform: "translateY(0px);" },
235+
"75%": { transform: "translateY(-0.25rem);" },
236+
"100%": { transform: "translateY(0px);" },
237+
},
238+
highlight: {
239+
// <alpha-value> does not get propogated within tailwind config, so we have to specify values here
240+
// instead of using the constants above
241+
"0%": { backgroundColor: "rgb(var(--background-secondary))" },
242+
"50%": { backgroundColor: "rgb(var(--background-highlight))" },
243+
"100%": { backgroundColor: "rgb(var(--background-secondary))" },
244+
},
245+
highlightBorder: {
246+
// <alpha-value> does not get propogated within tailwind config, so we have to specify values here
247+
// instead of using the constants above
248+
"0%": { backgroundColor: "rgb(var(--border-transparent))" },
249+
"50%": { backgroundColor: "rgb(var(--content-success))" },
250+
"100%": { backgroundColor: "rgb(var(--border-transparent))" },
251+
},
252+
fadeIn: {
253+
"0%": {
254+
opacity: 0,
255+
},
256+
"100%": {
257+
opacity: 1,
258+
},
259+
},
260+
indeterminateProgressBar: {
261+
"0%": { transform: "none" },
262+
"100%": { transform: "translateX(-1rem)" },
263+
},
264+
},
265+
colors: {
266+
util: utilColors,
267+
...themeColors,
268+
...numberedColors,
269+
},
270+
fontFamily: {
271+
marketing: [
272+
"GT America",
273+
"Inter Variable",
274+
"ui-sans-serif",
275+
"system-ui",
276+
"-apple-system",
277+
"BlinkMacSystemFont",
278+
"Segoe UI",
279+
"Roboto",
280+
"Helvetica Neue",
281+
"Arial",
282+
"Noto Sans",
283+
"sans-serif",
284+
"Apple Color Emoji",
285+
"Segoe UI Emoji",
286+
"Segoe UI Symbol",
287+
"Noto Color Emoji",
288+
"sans-serif",
289+
],
290+
},
291+
},
292+
},
293+
plugins: [
294+
tailwindScrollbar({ nocompatible: true }),
295+
tailwindForms({ strategy: "class" }),
296+
],
297+
};

0 commit comments

Comments
 (0)