-
Notifications
You must be signed in to change notification settings - Fork 20
/
tailwind.config.js
313 lines (309 loc) · 14.9 KB
/
tailwind.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
const colors = require("tailwindcss/colors");
const theme2024 = {
black: "#010101",
};
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./shared/**/*.{js,ts,jsx,tsx,mdx}",
],
safelist: [
// For Tabs.tsx
...[1, 2, 3, 4, 5, 6]
.map((i) => [`grid-cols-${i}`, `sm:grid-cols-${i}`, `w-1/${i}`])
.flat(),
],
theme: {
typography: require("./typography"),
extend: {
colors: {
// Legacy extensions
slate: {
950: "#0C1323",
1000: "#080D19",
1050: "#050911",
},
// Aliases for ease of re-design
body: colors.slate[100],
primary: colors.indigo["500"],
inngestBlack: theme2024.black,
background: theme2024.black, // TODO - Change to carbon-1000
// Redesign 2024
cta: "#10B981",
ctaHover: "#2fe4a8",
// Design System 2024
carbon: {
0: "rgb(var(--color-carbon-0) / <alpha-value>)",
50: "rgb(var(--color-carbon-50) / <alpha-value>)",
100: "rgb(var(--color-carbon-100) / <alpha-value>)",
200: "rgb(var(--color-carbon-200) / <alpha-value>)",
300: "rgb(var(--color-carbon-300) / <alpha-value>)",
400: "rgb(var(--color-carbon-400) / <alpha-value>)",
500: "rgb(var(--color-carbon-500) / <alpha-value>)",
600: "rgb(var(--color-carbon-600) / <alpha-value>)",
700: "rgb(var(--color-carbon-700) / <alpha-value>)",
800: "rgb(var(--color-carbon-800) / <alpha-value>)",
900: "rgb(var(--color-carbon-900) / <alpha-value>)",
1000: "rgb(var(--color-carbon-1000) / <alpha-value>)",
},
matcha: {
0: "rgb(var(--color-matcha-0) / <alpha-value>)",
100: "rgb(var(--color-matcha-100) / <alpha-value>)",
200: "rgb(var(--color-matcha-200) / <alpha-value>)",
300: "rgb(var(--color-matcha-300) / <alpha-value>)",
400: "rgb(var(--color-matcha-400) / <alpha-value>)",
500: "rgb(var(--color-matcha-500) / <alpha-value>)",
600: "rgb(var(--color-matcha-600) / <alpha-value>)",
700: "rgb(var(--color-matcha-700) / <alpha-value>)",
800: "rgb(var(--color-matcha-800) / <alpha-value>)",
900: "rgb(var(--color-matcha-900) / <alpha-value>)",
},
breeze: {
0: "rgb(var(--color-breeze-0) / <alpha-value>)",
100: "rgb(var(--color-breeze-100) / <alpha-value>)",
200: "rgb(var(--color-breeze-200) / <alpha-value>)",
300: "rgb(var(--color-breeze-300) / <alpha-value>)",
400: "rgb(var(--color-breeze-400) / <alpha-value>)",
500: "rgb(var(--color-breeze-500) / <alpha-value>)",
600: "rgb(var(--color-breeze-600) / <alpha-value>)",
700: "rgb(var(--color-breeze-700) / <alpha-value>)",
800: "rgb(var(--color-breeze-800) / <alpha-value>)",
900: "rgb(var(--color-breeze-900) / <alpha-value>)",
},
ruby: {
0: "rgb(var(--color-ruby-0) / <alpha-value>)",
100: "rgb(var(--color-ruby-100) / <alpha-value>)",
200: "rgb(var(--color-ruby-200) / <alpha-value>)",
300: "rgb(var(--color-ruby-300) / <alpha-value>)",
400: "rgb(var(--color-ruby-400) / <alpha-value>)",
500: "rgb(var(--color-ruby-500) / <alpha-value>)",
600: "rgb(var(--color-ruby-600) / <alpha-value>)",
700: "rgb(var(--color-ruby-700) / <alpha-value>)",
800: "rgb(var(--color-ruby-800) / <alpha-value>)",
900: "rgb(var(--color-ruby-900) / <alpha-value>)",
},
honey: {
0: "rgb(var(--color-honey-0) / <alpha-value>)",
100: "rgb(var(--color-honey-100) / <alpha-value>)",
200: "rgb(var(--color-honey-200) / <alpha-value>)",
300: "rgb(var(--color-honey-300) / <alpha-value>)",
400: "rgb(var(--color-honey-400) / <alpha-value>)",
500: "rgb(var(--color-honey-500) / <alpha-value>)",
600: "rgb(var(--color-honey-600) / <alpha-value>)",
700: "rgb(var(--color-honey-700) / <alpha-value>)",
800: "rgb(var(--color-honey-800) / <alpha-value>)",
900: "rgb(var(--color-honey-900) / <alpha-value>)",
},
blush: {
0: "rgb(var(--color-blush-0) / <alpha-value>)",
100: "rgb(var(--color-blush-100) / <alpha-value>)",
200: "rgb(var(--color-blush-200) / <alpha-value>)",
300: "rgb(var(--color-blush-300) / <alpha-value>)",
400: "rgb(var(--color-blush-400) / <alpha-value>)",
500: "rgb(var(--color-blush-500) / <alpha-value>)",
600: "rgb(var(--color-blush-600) / <alpha-value>)",
700: "rgb(var(--color-blush-700) / <alpha-value>)",
800: "rgb(var(--color-blush-800) / <alpha-value>)",
900: "rgb(var(--color-blush-900) / <alpha-value>)",
},
purplehaze: {
0: "rgb(var(--color-purplehaze-0) / <alpha-value>)",
100: "rgb(var(--color-purplehaze-100) / <alpha-value>)",
200: "rgb(var(--color-purplehaze-200) / <alpha-value>)",
300: "rgb(var(--color-purplehaze-300) / <alpha-value>)",
400: "rgb(var(--color-purplehaze-400) / <alpha-value>)",
500: "rgb(var(--color-purplehaze-500) / <alpha-value>)",
600: "rgb(var(--color-purplehaze-600) / <alpha-value>)",
700: "rgb(var(--color-purplehaze-700) / <alpha-value>)",
800: "rgb(var(--color-purplehaze-800) / <alpha-value>)",
900: "rgb(var(--color-purplehaze-900) / <alpha-value>)",
},
primary: {
"2xSubtle": "rgb(var(--color-primary-2xSubtle) / <alpha-value>)",
xSubtle: "rgb(var(--color-primary-xSubtle) / <alpha-value>)",
subtle: "rgb(var(--color-primary-subtle) / <alpha-value>)",
moderate: "rgb(var(--color-primary-moderate) / <alpha-value>)",
intense: "rgb(var(--color-primary-intense) / <alpha-value>)",
xIntense: "rgb(var(--color-primary-xIntense) / <alpha-value>)",
"2xIntense": "rgb(var(--color-primary-2xIntense) / <alpha-value>)",
},
secondary: {
"4xSubtle": "rgb(var(--color-secondary-4xSubtle) / <alpha-value>)",
"3xSubtle": "rgb(var(--color-secondary-3xSubtle) / <alpha-value>)",
"2xSubtle": "rgb(var(--color-secondary-2xSubtle) / <alpha-value>)",
xSubtle: "rgb(var(--color-secondary-xSubtle) / <alpha-value>)",
subtle: "rgb(var(--color-secondary-subtle) / <alpha-value>)",
moderate: "rgb(var(--color-secondary-moderate) / <alpha-value>)",
intense: "rgb(var(--color-secondary-intense) / <alpha-value>)",
xIntense: "rgb(var(--color-secondary-xIntense) / <alpha-value>)",
"2xIntense": "rgb(var(--color-secondary-2xIntense) / <alpha-value>)",
},
tertiary: {
"2xSubtle": "rgb(var(--color-tertiary-2xSubtle) / <alpha-value>)",
xSubtle: "rgb(var(--color-tertiary-xSubtle) / <alpha-value>)",
subtle: "rgb(var(--color-tertiary-subtle) / <alpha-value>)",
moderate: "rgb(var(--color-tertiary-moderate) / <alpha-value>)",
intense: "rgb(var(--color-tertiary-intense) / <alpha-value>)",
xIntense: "rgb(var(--color-tertiary-xIntense) / <alpha-value>)",
"2xIntense": "rgb(var(--color-tertiary-2xIntense) / <alpha-value>)",
},
quaternary: {
coolxSubtle:
"rgb(var(--color-quaternary-cool-xSubtle) / <alpha-value>)",
coolModerate:
"rgb(var(--color-quaternary-cool-moderate) / <alpha-value>)",
coolxIntense:
"rgb(var(--color-quaternary-cool-xIntense) / <alpha-value>)",
},
accent: {
"2xSubtle": "rgb(var(--color-accent-2xSubtle) / <alpha-value>)",
xSubtle: "rgb(var(--color-accent-xSubtle) / <alpha-value>)",
subtle: "rgb(var(--color-accent-subtle) / <alpha-value>)",
moderate: "rgb(var(--color-accent-moderate) / <alpha-value>)",
intense: "rgb(var(--color-accent-intense) / <alpha-value>)",
xIntense: "rgb(var(--color-accent-xIntense) / <alpha-value>)",
"2xIntense": "rgb(var(--color-accent-2xIntense) / <alpha-value>)",
},
status: {
failed: "rgb(var(--color-tertiary-intense) / <alpha-value>)",
running: "rgb(var(--color-secondary-intense) / <alpha-value>)",
runningSubtle: "rgb(var(--color-secondary-xSubtle) / <alpha-value>)",
queued: "rgb(var(--color-quaternary-cool-xIntense) / <alpha-value>)",
queuedSubtle:
"rgb(var(--color-quaternary-cool-xSubtle) / <alpha-value>)",
completed: "rgb(var(--color-primary-intense) / <alpha-value>)",
cancelled: "rgb(var(--color-foreground-cancelled) / <alpha-value>)",
},
},
borderColor: {
subtle: "rgb(var(--color-border-subtle) / <alpha-value>)",
muted: "rgb(var(--color-border-muted) / <alpha-value>)",
contrast: "rgb(var(--color-border-contrast) / <alpha-value>)",
disabled: "rgb(var(--color-border-disabled) / <alpha-value>)",
success: "rgb(var(--color-border-success) / <alpha-value>)",
error: "rgb(var(--color-border-error) / <alpha-value>)",
warning: "rgb(var(--color-border-warning) / <alpha-value>)",
info: "rgb(var(--color-border-info) / <alpha-value>)",
},
backgroundColor: {
canvasBase: "rgb(var(--color-background-canvas-base) / <alpha-value>)",
canvasSubtle:
"rgb(var(--color-background-canvas-subtle) / <alpha-value>)",
canvasMuted:
"rgb(var(--color-background-canvas-muted) / <alpha-value>)",
surfaceBase:
"rgb(var(--color-background-surface-base) / <alpha-value>)",
surfaceSubtle:
"rgb(var(--color-background-surface-subtle) / <alpha-value>)",
surfaceMuted:
"rgb(var(--color-background-surface-muted) / <alpha-value>)",
disabled: "rgb(var(--color-background-disabled) / <alpha-value>)",
contrast: "rgb(var(--color-background-contrast) / <alpha-value>)",
success: "rgb(var(--color-background-success) / <alpha-value>)",
successContrast:
"rgb(var(--color-background-successContrast) / <alpha-value>)",
error: "rgb(var(--color-background-error) / <alpha-value>)",
errorContrast:
"rgb(var(--color-background-errorContrast) / <alpha-value>)",
warning: "rgb(var(--color-background-warning) / <alpha-value>)",
warningContrast:
"rgb(var(--color-background-warningContrast) / <alpha-value>)",
info: "rgb(var(--color-background-info) / <alpha-value>)",
infoContrast:
"rgb(var(--color-background-infoContrast) / <alpha-value>)",
codeEditor: "rgb(var(--color-background-codeEditor) / <alpha-value>)",
btnPrimary: "rgb(var(--color-background-btn-primary) / <alpha-value>)",
btnPrimaryHover:
"rgb(var(--color-background-btn-primaryHover) / <alpha-value>)",
btnPrimaryPressed:
"rgb(var(--color-background-btn-primaryPressed) / <alpha-value>)",
btnPrimaryDisabled:
"rgb(var(--color-background-btn-primaryDisabled) / <alpha-value>)",
btnDanger: "rgb(var(--color-background-btn-danger) / <alpha-value>)",
btnDangerHover:
"rgb(var(--color-background-btn-dangerHover) / <alpha-value>)",
btnDangerPressed:
"rgb(var(--color-background-btn-dangerPressed) / <alpha-value>)",
btnDangerDisabled:
"rgb(var(--color-background-btn-dangerDisabled) / <alpha-value>)",
},
textColor: {
basis: "rgb(var(--color-foreground-base) / <alpha-value>)",
subtle: "rgb(var(--color-foreground-subtle) / <alpha-value>)",
muted: "rgb(var(--color-foreground-muted) / <alpha-value>)",
onContrast: "rgb(var(--color-foreground-onContrast) / <alpha-value>)",
alwaysWhite: "rgb(var(--color-foreground-alwaysWhite) / <alpha-value>)",
alwaysBlack: "rgb(var(--color-foreground-alwaysBlack) / <alpha-value>)",
disabled: "rgb(var(--color-foreground-disabled) / <alpha-value>)",
link: "rgb(var(--color-foreground-link) / <alpha-value>)",
success: "rgb(var(--color-foreground-success) / <alpha-value>)",
error: "rgb(var(--color-foreground-error) / <alpha-value>)",
warning: "rgb(var(--color-foreground-warning) / <alpha-value>)",
info: "rgb(var(--color-foreground-info) / <alpha-value>)",
btnPrimary: "rgb(var(--color-foreground-btn-primary) / <alpha-value>)",
btnPrimaryDisabled:
"rgb(var(--color-foreground-btn-primaryDisabled) / <alpha-value>)",
btnDanger: "rgb(var(--color-foreground-btn-danger) / <alpha-value>)",
btnDangerDisabled:
"rgb(var(--color-foreground-btn-dangerDisabled) / <alpha-value>)",
codeDelimiterBracketJson:
"rgb(var(--color-foreground-code-delimiterBracketJson) / <alpha-value>)",
codeStringKeyJson:
"rgb(var(--color-foreground-code-stringKeyJson) / <alpha-value>)",
codeNumberJson:
"rgb(var(--color-foreground-code-numberJson) / <alpha-value>)",
codeStringValueJson:
"rgb(var(--color-foreground-code-stringValueJson) / <alpha-value>)",
codeKeywordJson:
"rgb(var(--color-foreground-code-keywordJson) / <alpha-value>)",
codeComment:
"rgb(var(--color-foreground-code-comment) / <alpha-value>)",
codeString: "rgb(var(--color-foreground-code-string) / <alpha-value>)",
codeKeyword:
"rgb(var(--color-foreground-code-keyword) / <alpha-value>)",
codeEntityNameFunction:
"rgb(var(--color-foreground-code-entityNameFunction) / <alpha-value>)",
},
textDecorationColor: {
link: "rgb(var(--color-foreground-link) / <alpha-value>)",
},
fontSize: {
"5xl": ["3rem", "1.3"],
"2xs": "0.625rem",
},
maxWidth: {
"container-desktop": "1600px",
lg: "33rem",
"2xl": "40rem",
"3xl": "50rem",
"5xl": "66rem",
},
opacity: {
1: "0.01",
2.5: "0.025",
7.5: "0.075",
15: "0.15",
},
keyframes: {
wiggle: {
"0%, 100%": { transform: "rotate(-4deg)" },
"50%": { transform: "rotate(4deg)" },
},
},
},
fontFamily: {
sans: 'CircularXX, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
heading:
'CircularXX, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
mono: 'CircularXXMono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
// We can use these temporary classes while we transition to the new fonts
circular:
'CircularXX, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
},
},
plugins: [require("@tailwindcss/typography")],
};