-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtailwind.config.js
375 lines (373 loc) · 18.1 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
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
const { fontFamily, fontSize } = require('tailwindcss/defaultTheme');
function withOpacityValue(variable) {
return ({ opacityValue }) => {
if (opacityValue === undefined) {
return `rgb(var(${variable}))`;
}
return `rgb(var(${variable}) / ${opacityValue})`;
};
}
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
screens: {
DEFAULT: '1440px',
mobileS: '320px',
// => @media (min-width: 320px) { ... }
mobileM: '375px',
// => @media (min-width: 375px) { ... }
mobileL: '425px',
// => @media (min-width: 425px) { ... }
tabletS: '640px',
// => @media (min-width: 640px) { ... }
tablet: '768px',
// => @media (min-width: 768px) { ... }
laptop: '1024px',
// => @media (min-width: 1024px) { ... }
laptopM: '1280px',
// => @media (min-width: 1280px) { ... }
laptopL: '1440px',
// => @media (min-width: 1440px) { ... }
xl: '1536px',
// => @media (min-width: 1536px) { ... }
'2xl': '1920px',
// => @media (min-width: 1920px) { ... }
'3xl': '2560px',
// => @media (min-width: 2560px) { ... }
'4xl': '3440px',
// => @media (min-width: 3440px) { ... }
},
fontSize: {
heading1: ['80px', { lineHeight: '96px', letterSpacing: '-0.5px' }],
heading2: ['64px', { lineHeight: '77px', letterSpacing: '-0.5px' }],
heading3: ['48px', { lineHeight: '58px', letterSpacing: '-0.5px' }],
'large-title1': [
'34px',
{ lineHeight: '44px', letterSpacing: '-0.25px' },
],
'large-title2': [
'32px',
{ lineHeight: '42px', letterSpacing: '-0.25px' },
],
title1: ['28px', { lineHeight: '39px', letterSpacing: '-0.25px' }],
title2: ['24px', '34px'],
title3: ['20px', '28px'],
subheadline: ['18px', '25px'],
body: ['17px', '24px'],
'body-reading': ['17px', '26px'],
callout: ['16px', '22px'],
'callout-reading': ['16px', '24px'],
caption: ['14px', '21px'],
'caption-reading': ['14px', '25px'],
caption2: ['12px', '18px'],
caption3: ['10px', '15px'],
caption4: ['8px', '12px'],
...fontSize,
},
boxShadow: {
'bLeft-xs': '-1px 1px 4px rgba(6, 15, 51, 0.06)',
'bLeft-sm': '-2px 2px 8px rgba(6, 15, 51, 0.04)',
'bLeft-md': '-6px 8px 16px rgba(6, 15, 51, 0.04)',
'bLeft-lg': '-8px 12px 24px rgba(6, 15, 51, 0.04)',
'center-xs':
'0px -1px 4px rgba(6, 15, 51, 0.04), 0px 1px 4px rgba(6, 15, 51, 0.06)',
'center-sm':
'0px -2px 8px rgba(6, 15, 51, 0.02), 0px 2px 8px rgba(6, 15, 51, 0.04)',
'center-md':
'0px -8px 16px rgba(6, 15, 51, 0.02), 0px 8px 16px rgba(6, 15, 51, 0.04)',
'center-lg':
'0px -10px 24px rgba(6, 15, 51, 0.02), 0px 10px 24px rgba(6, 15, 51, 0.04)',
'top-xs': '0px -1px 4px rgba(6, 15, 51, 0.06)',
'top-sm': '0px -2px 8px rgba(6, 15, 51, 0.04)',
'top-md': '0px -8px 16px rgba(6, 15, 51, 0.04)',
'top-lg': '0px -12px 24px rgba(6, 15, 51, 0.04)',
'bottom-xs': '0px 1px 4px rgba(6, 15, 51, 0.06)',
'bottom-sm': '0px 2px 8px rgba(6, 15, 51, 0.04)',
'bottom-md': '0px 8px 16px rgba(6, 15, 51, 0.04)',
'bottom-lg': '0px 12px 24px rgba(6, 15, 51, 0.04)',
},
extend: {
fontFamily: {
sans: ['"Circular XX TT"', ...fontFamily.sans],
},
// Customize it on globals.css :root
colors: {
'brand-main': {
100: withOpacityValue('--tw-color-brand-main-100'),
200: withOpacityValue('--tw-color-brand-main-200'),
300: withOpacityValue('--tw-color-brand-main-300'),
400: withOpacityValue('--tw-color-brand-main-400'),
500: withOpacityValue('--tw-color-brand-main-500'),
600: withOpacityValue('--tw-color-brand-main-600'),
700: withOpacityValue('--tw-color-brand-main-700'),
},
'brand-light': {
100: withOpacityValue('--tw-color-brand-light-100'),
200: withOpacityValue('--tw-color-brand-light-200'),
300: withOpacityValue('--tw-color-brand-light-300'),
400: withOpacityValue('--tw-color-brand-light-400'),
500: withOpacityValue('--tw-color-brand-light-500'),
600: withOpacityValue('--tw-color-brand-light-600'),
700: withOpacityValue('--tw-color-brand-light-700'),
},
neutrals: {
0: withOpacityValue('--tw-color-neutrals-0'),
10: withOpacityValue('--tw-color-neutrals-10'),
20: withOpacityValue('--tw-color-neutrals-20'),
30: withOpacityValue('--tw-color-neutrals-30'),
40: withOpacityValue('--tw-color-neutrals-40'),
50: withOpacityValue('--tw-color-neutrals-50'),
60: withOpacityValue('--tw-color-neutrals-60'),
70: withOpacityValue('--tw-color-neutrals-70'),
80: withOpacityValue('--tw-color-neutrals-80'),
90: withOpacityValue('--tw-color-neutrals-90'),
100: withOpacityValue('--tw-color-neutrals-100'),
200: withOpacityValue('--tw-color-neutrals-200'),
300: withOpacityValue('--tw-color-neutrals-300'),
400: withOpacityValue('--tw-color-neutrals-400'),
500: withOpacityValue('--tw-color-neutrals-500'),
600: withOpacityValue('--tw-color-neutrals-600'),
700: withOpacityValue('--tw-color-neutrals-700'),
800: withOpacityValue('--tw-color-neutrals-800'),
},
'semantic-positive1': {
100: withOpacityValue('--tw-color-semantic-positive1-100'),
200: withOpacityValue('--tw-color-semantic-positive1-200'),
300: withOpacityValue('--tw-color-semantic-positive1-300'),
400: withOpacityValue('--tw-color-semantic-positive1-400'),
500: withOpacityValue('--tw-color-semantic-positive1-500'),
600: withOpacityValue('--tw-color-semantic-positive1-600'),
700: withOpacityValue('--tw-color-semantic-positive1-700'),
},
'semantic-positive2': {
100: withOpacityValue('--tw-color-semantic-positive2-100'),
200: withOpacityValue('--tw-color-semantic-positive2-200'),
300: withOpacityValue('--tw-color-semantic-positive2-300'),
400: withOpacityValue('--tw-color-semantic-positive2-400'),
500: withOpacityValue('--tw-color-semantic-positive2-500'),
600: withOpacityValue('--tw-color-semantic-positive2-600'),
700: withOpacityValue('--tw-color-semantic-positive2-700'),
},
'semantic-negative1': {
100: withOpacityValue('--tw-color-semantic-negative1-100'),
200: withOpacityValue('--tw-color-semantic-negative1-200'),
300: withOpacityValue('--tw-color-semantic-negative1-300'),
400: withOpacityValue('--tw-color-semantic-negative1-400'),
500: withOpacityValue('--tw-color-semantic-negative1-500'),
600: withOpacityValue('--tw-color-semantic-negative1-600'),
700: withOpacityValue('--tw-color-semantic-negative1-700'),
},
'semantic-negative2': {
100: withOpacityValue('--tw-color-semantic-negative2-100'),
200: withOpacityValue('--tw-color-semantic-negative2-200'),
300: withOpacityValue('--tw-color-semantic-negative2-300'),
400: withOpacityValue('--tw-color-semantic-negative2-400'),
500: withOpacityValue('--tw-color-semantic-negative2-500'),
600: withOpacityValue('--tw-color-semantic-negative2-600'),
700: withOpacityValue('--tw-color-semantic-negative2-700'),
},
'semantic-warning1': {
100: withOpacityValue('--tw-color-semantic-warning1-100'),
200: withOpacityValue('--tw-color-semantic-warning1-200'),
300: withOpacityValue('--tw-color-semantic-warning1-300'),
400: withOpacityValue('--tw-color-semantic-warning1-400'),
500: withOpacityValue('--tw-color-semantic-warning1-500'),
600: withOpacityValue('--tw-color-semantic-warning1-600'),
700: withOpacityValue('--tw-color-semantic-warning1-700'),
},
'semantic-warning2': {
100: withOpacityValue('--tw-color-semantic-warning2-100'),
200: withOpacityValue('--tw-color-semantic-warning2-200'),
300: withOpacityValue('--tw-color-semantic-warning2-300'),
400: withOpacityValue('--tw-color-semantic-warning2-400'),
500: withOpacityValue('--tw-color-semantic-warning2-500'),
600: withOpacityValue('--tw-color-semantic-warning2-600'),
700: withOpacityValue('--tw-color-semantic-warning2-700'),
},
'semantic-alert': {
100: withOpacityValue('--tw-color-semantic-alert-100'),
200: withOpacityValue('--tw-color-semantic-alert-200'),
300: withOpacityValue('--tw-color-semantic-alert-300'),
400: withOpacityValue('--tw-color-semantic-alert-400'),
500: withOpacityValue('--tw-color-semantic-alert-500'),
600: withOpacityValue('--tw-color-semantic-alert-600'),
700: withOpacityValue('--tw-color-semantic-alert-700'),
},
'accent-mariner': {
100: withOpacityValue('--tw-color-mariner-100'),
200: withOpacityValue('--tw-color-mariner-200'),
300: withOpacityValue('--tw-color-mariner-300'),
400: withOpacityValue('--tw-color-mariner-400'),
500: withOpacityValue('--tw-color-mariner-500'),
600: withOpacityValue('--tw-color-mariner-600'),
700: withOpacityValue('--tw-color-mariner-700'),
},
'extension-sulu': {
100: withOpacityValue('--tw-color-extension-sulu-100'),
200: withOpacityValue('--tw-color-extension-sulu-200'),
300: withOpacityValue('--tw-color-extension-sulu-300'),
400: withOpacityValue('--tw-color-extension-sulu-400'),
500: withOpacityValue('--tw-color-extension-sulu-500'),
600: withOpacityValue('--tw-color-extension-sulu-600'),
700: withOpacityValue('--tw-color-extension-sulu-700'),
},
'extension-mantis': {
100: withOpacityValue('--tw-color-extension-mantis-100'),
200: withOpacityValue('--tw-color-extension-mantis-200'),
300: withOpacityValue('--tw-color-extension-mantis-300'),
400: withOpacityValue('--tw-color-extension-mantis-400'),
500: withOpacityValue('--tw-color-extension-mantis-500'),
600: withOpacityValue('--tw-color-extension-mantis-600'),
700: withOpacityValue('--tw-color-extension-mantis-700'),
},
'extension-lagoon': {
100: withOpacityValue('--tw-color-extension-lagoon-100'),
200: withOpacityValue('--tw-color-extension-lagoon-200'),
300: withOpacityValue('--tw-color-extension-lagoon-300'),
400: withOpacityValue('--tw-color-extension-lagoon-400'),
500: withOpacityValue('--tw-color-extension-lagoon-500'),
600: withOpacityValue('--tw-color-extension-lagoon-600'),
700: withOpacityValue('--tw-color-extension-lagoon-700'),
},
'extension-torquoise': {
100: withOpacityValue('--tw-color-extension-torquoise-100'),
200: withOpacityValue('--tw-color-extension-torquoise-200'),
300: withOpacityValue('--tw-color-extension-torquoise-300'),
400: withOpacityValue('--tw-color-extension-torquoise-400'),
500: withOpacityValue('--tw-color-extension-torquoise-500'),
600: withOpacityValue('--tw-color-extension-torquoise-600'),
700: withOpacityValue('--tw-color-extension-torquoise-700'),
},
'extensio-orchid': {
100: withOpacityValue('--tw-color-extension-orchid-100'),
200: withOpacityValue('--tw-color-extension-orchid-200'),
300: withOpacityValue('--tw-color-extension-orchid-300'),
400: withOpacityValue('--tw-color-extension-orchid-400'),
500: withOpacityValue('--tw-color-extension-orchid-500'),
600: withOpacityValue('--tw-color-extension-orchid-600'),
700: withOpacityValue('--tw-color-extension-orchid-700'),
},
'extension-sunglo': {
100: withOpacityValue('--tw-color-extension-sunglo-100'),
200: withOpacityValue('--tw-color-extension-sunglo-200'),
300: withOpacityValue('--tw-color-extension-sunglo-300'),
400: withOpacityValue('--tw-color-extension-sunglo-400'),
500: withOpacityValue('--tw-color-extension-sunglo-500'),
600: withOpacityValue('--tw-color-extension-sunglo-600'),
700: withOpacityValue('--tw-color-extension-sunglo-700'),
},
'extension-buttercup': {
100: withOpacityValue('--tw-color-extension-buttercup-100'),
200: withOpacityValue('--tw-color-extension-buttercup-200'),
300: withOpacityValue('--tw-color-extension-buttercup-300'),
400: withOpacityValue('--tw-color-extension-buttercup-400'),
500: withOpacityValue('--tw-color-extension-buttercup-500'),
600: withOpacityValue('--tw-color-extension-buttercup-600'),
700: withOpacityValue('--tw-color-extension-buttercup-700'),
},
'extension-corn': {
100: withOpacityValue('--tw-color-extension-corn-100'),
200: withOpacityValue('--tw-color-extension-corn-200'),
300: withOpacityValue('--tw-color-extension-corn-300'),
400: withOpacityValue('--tw-color-extension-corn-400'),
500: withOpacityValue('--tw-color-extension-corn-500'),
600: withOpacityValue('--tw-color-extension-corn-600'),
700: withOpacityValue('--tw-color-extension-corn-700'),
},
black: withOpacityValue('--tw-color-black'),
white: withOpacityValue('--tw-color-white'),
tangaroa: withOpacityValue('--tw-color-tangaroa'),
guide: {
1: withOpacityValue('--tw-color-guide-1'),
2: withOpacityValue('--tw-color-guide-2'),
3: withOpacityValue('--tw-color-guide-3'),
4: withOpacityValue('--tw-color-guide-4'),
5: withOpacityValue('--tw-color-guide-5'),
6: withOpacityValue('--tw-color-guide-6'),
7: withOpacityValue('--tw-color-guide-7'),
8: withOpacityValue('--tw-color-guide-8'),
9: withOpacityValue('--tw-color-guide-9'),
10: withOpacityValue('--tw-color-guide-10'),
11: withOpacityValue('--tw-color-guide-11'),
12: withOpacityValue('--tw-color-guide-12'),
13: withOpacityValue('--tw-color-guide-13'),
14: withOpacityValue('--tw-color-guide-14'),
15: withOpacityValue('--tw-color-guide-15'),
16: withOpacityValue('--tw-color-guide-16'),
17: withOpacityValue('--tw-color-guide-17'),
},
'recycling-yellow': {
100: withOpacityValue('--tw-color-recycling-yellow-100'),
200: withOpacityValue('--tw-color-recycling-yellow-200'),
300: withOpacityValue('--tw-color-recycling-yellow-300'),
400: withOpacityValue('--tw-color-recycling-yellow-400'),
500: withOpacityValue('--tw-color-recycling-yellow-500'),
600: withOpacityValue('--tw-color-recycling-yellow-600'),
700: withOpacityValue('--tw-color-recycling-yellow-700'),
},
'recycling-green': {
100: withOpacityValue('--tw-color-recycling-green-100'),
200: withOpacityValue('--tw-color-recycling-green-200'),
300: withOpacityValue('--tw-color-recycling-green-300'),
400: withOpacityValue('--tw-color-recycling-green-400'),
500: withOpacityValue('--tw-color-recycling-green-500'),
600: withOpacityValue('--tw-color-recycling-green-600'),
700: withOpacityValue('--tw-color-recycling-green-700'),
},
'recycling-blue': {
100: withOpacityValue('--tw-color-recycling-blue-100'),
200: withOpacityValue('--tw-color-recycling-blue-200'),
300: withOpacityValue('--tw-color-recycling-blue-300'),
400: withOpacityValue('--tw-color-recycling-blue-400'),
500: withOpacityValue('--tw-color-recycling-blue-500'),
600: withOpacityValue('--tw-color-recycling-blue-600'),
700: withOpacityValue('--tw-color-recycling-blue-700'),
},
'recycling-brown': {
100: withOpacityValue('--tw-color-recycling-brown-100'),
200: withOpacityValue('--tw-color-recycling-brown-200'),
300: withOpacityValue('--tw-color-recycling-brown-300'),
400: withOpacityValue('--tw-color-recycling-brown-400'),
500: withOpacityValue('--tw-color-recycling-brown-500'),
600: withOpacityValue('--tw-color-recycling-brown-600'),
700: withOpacityValue('--tw-color-recycling-brown-700'),
},
'recycling-shady': {
100: withOpacityValue('--tw-color-recycling-shady-100'),
200: withOpacityValue('--tw-color-recycling-shady-200'),
300: withOpacityValue('--tw-color-recycling-shady-300'),
400: withOpacityValue('--tw-color-recycling-shady-400'),
500: withOpacityValue('--tw-color-recycling-shady-500'),
600: withOpacityValue('--tw-color-recycling-shady-600'),
700: withOpacityValue('--tw-color-recycling-shady-700'),
},
'recycling-grey': {
100: withOpacityValue('--tw-color-recycling-grey-100'),
200: withOpacityValue('--tw-color-recycling-grey-200'),
300: withOpacityValue('--tw-color-recycling-grey-300'),
400: withOpacityValue('--tw-color-recycling-grey-400'),
500: withOpacityValue('--tw-color-recycling-grey-500'),
600: withOpacityValue('--tw-color-recycling-grey-600'),
700: withOpacityValue('--tw-color-recycling-grey-700'),
},
},
},
keyframes: {
flicker: {
'0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%': {
opacity: 0.99,
filter:
'drop-shadow(0 0 1px rgba(252, 211, 77)) drop-shadow(0 0 15px rgba(245, 158, 11)) drop-shadow(0 0 1px rgba(252, 211, 77))',
},
'20%, 21.999%, 63%, 63.999%, 65%, 69.999%': {
opacity: 0.4,
filter: 'none',
},
},
},
animation: {
flicker: 'flicker 3s linear infinite',
},
},
plugins: [require('@tailwindcss/forms')],
};