-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtailwind.config.js
109 lines (108 loc) · 6.04 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
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
/** @type {import('tailwindcss').Config} */
module.exports = {
plugins: [require("@tailwindcss/typography")],
content: ["./components/**/*.tsx", "./pages/**/*.tsx"],
variants: {},
theme: {
extend: {
brightness: {
30: ".3",
60: ".6",
},
boxShadow: {
"1-up":
"0 -3px 8px -4px rgba(0, 0, 0, 0.08), 0 -4.5px 14px 0 rgba(0, 0, 0, 0.05), 0 -6px 24px 8px rgba(0, 0, 0, 0.03)",
"1-down":
"0 3px 8px -4px rgba(0, 0, 0, 0.08), 0 4.5px 14px 0 rgba(0, 0, 0, 0.05), 0 6px 24px 8px rgba(0, 0, 0, 0.03)",
"1-left":
"-6px 0 8px -8px rgba(0, 0, 0, 0.08), -4.5px 0 14px 0 rgba(0, 0, 0, 0.05), -6px 0 24px 8px rgba(0, 0, 0, 0.03)",
"1-right":
"6px 0 8px -8px rgba(0, 0, 0, 0.08), 4.5px 0 14px 0 rgba(0, 0, 0, 0.05), 6px 0 24px 8px rgba(0, 0, 0, 0.03)",
2: "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 8px 0 rgba(0, 0, 0, 0.08), 0 4.5px 14px 8px rgba(0, 0, 0, 0.05)",
indentedSm: `inset 3px 4px 10px 2px rgba(0, 0, 0, 0.2), inset -3px -4px 10px 2px ${colors.neutral[100]}a0`,
indented: `inset 5px 6px 14px 2px rgba(0, 0, 0, 0.2), inset -5px -6px 14px 2px ${colors.neutral[100]}a0`,
raisedXs: `1px 2px 6px 1px rgba(0, 0, 0, 0.2), -1px -2px 6px 1px ${colors.neutral[100]}a0`,
raisedSm: `3px 4px 10px 2px rgba(0, 0, 0, 0.2), -3px -4px 10px 2px ${colors.neutral[100]}a0`,
raised: `5px 6px 14px 2px rgba(0, 0, 0, 0.2), -5px -6px 14px 2px ${colors.neutral[100]}a0`,
simpleBorder: `inset 0 0 0 4px ${colors.neutral[500]},
inset 0 0 2px 6px rgba(0, 0, 0, 0.2)`,
lightUpBorder: `inset 0 0 0 2px ${colors.neutral[500]},
inset 0 0 0 6px ${colors.neutral[700]},
inset 0 0 0 8px ${colors.neutral[500]},
inset 0 0 2px 10px rgba(0, 0, 0, 0.2)`,
lightUpBorderHover: `inset 0 0 0 2px ${colors.neutral[500]},
inset 0 0 0 6px #ffffff,
inset 0 0 0 8px ${colors.neutral[500]},
inset 0 0 2px 10px rgba(0, 0, 0, 0.2),
0 0 80px 30px rgba(253, 252, 235, 0.8),
inset 0 0 25px 4px rgba(253, 252, 235, 0.1)`,
lightUpBorderActive: `inset 0 0 0 2px ${colors.neutral[500]},
inset 0 0 0 6px ${colors.orange[600]},
inset 0 0 0 8px ${colors.neutral[500]},
inset 0 0 2px 12px rgba(0, 0, 0, 0.2),
0 0 200px 15px ${colors.orange[600]},
inset 0 0 25px 4px ${colors.orange[600]}`,
button: `3px 4px 10px 2px ${colors.neutral[300]}ff,
-3px -4px 10px 2px ${colors.neutral[50]}ff,
inset 0 0 0 2px ${colors.neutral[200]},
inset 0 0 0 6px ${colors.neutral[300]},
inset 0 0 0 8px ${colors.neutral[200]},
inset 0 0 2px 10px rgba(0, 0, 0, 0.2)`,
buttonHover: `3px 4px 10px 2px ${colors.neutral[300]}ff,
-3px -4px 10px 2px ${colors.neutral[50]}ff,
inset 0 0 0 2px ${colors.neutral[200]},
inset 0 0 0 6px ${colors.white},
inset 0 0 0 8px ${colors.neutral[200]},
inset 0 0 2px 10px rgba(0, 0, 0, 0.2),
0 0 80px 30px rgba(253, 252, 235, 0.8),
inset 0 0 25px 4px rgba(253, 252, 235, 0.1)`,
buttonActive: `3px 4px 10px 2px ${colors.neutral[300]}ff,
-3px -4px 10px 2px ${colors.neutral[50]}ff,
inset 0 0 0 2px ${colors.neutral[200]},
inset 0 0 0 6px ${colors.orange[400]},
inset 0 0 0 8px ${colors.neutral[200]},
inset 0 0 2px 12px rgba(0, 0, 0, 0.2),
0 0 200px 15px ${colors.orange[400]},
inset 0 0 25px 4px ${colors.orange[400]}`,
image: `inset 3px 4px 10px 2px ${colors.neutral[300]},
inset -3px -4px 10px 2px ${colors.neutral[50]},
inset 0 0 0 8px ${colors.neutral[200]},
inset 0 0 2px 6px rgba(0, 0, 0, 0.2)`,
portfolioCard: `0 3px 8px -4px rgba(0, 0, 0, 0.08),
0 4.5px 14px 0 rgba(0, 0, 0, 0.05),
0 6px 24px 8px rgba(0, 0, 0, 0.03),
inset 0 0 0 2px ${colors.neutral[200]},
inset 0 0 0 6px ${colors.neutral[300]},
inset 0 0 0 8px ${colors.neutral[200]}`,
portfolioCardHover: `0 3px 8px -4px rgba(0, 0, 0, 0.08),
0 4.5px 14px 0 rgba(0, 0, 0, 0.05),
0 6px 24px 8px rgba(0, 0, 0, 0.03),
inset 0 0 0 2px ${colors.neutral[200]},
inset 0 0 0 6px ${colors.white},
inset 0 0 0 8px ${colors.neutral[200]},
0 0 80px 30px rgba(253, 252, 235, 0.8),
inset 0 0 25px 4px rgba(253, 252, 235, 0.1)`,
portfolioCardActive: `0 3px 8px -4px rgba(0, 0, 0, 0.08),
0 4.5px 14px 0 rgba(0, 0, 0, 0.05),
0 6px 24px 8px rgba(0, 0, 0, 0.03),
inset 0 0 0 2px ${colors.neutral[200]},
inset 0 0 0 6px ${colors.orange[400]},
inset 0 0 0 8px ${colors.neutral[200]},
0 0 200px 15px ${colors.orange[400]},
inset 0 0 25px 4px ${colors.orange[400]}`,
tag: `inset 1px 2px 4px 2px ${colors.neutral[50]},
inset -1px -2px 4px 2px ${colors.neutral[300]},
inset 0 0 0 4px ${colors.neutral[200]},
inset 0 0 2px 6px rgba(0, 0, 0, 0.2)`,
},
scale: {
101: "1.01",
},
fontFamily: {
defaultFont: ["Inter", ...defaultTheme.fontFamily.sans],
},
},
},
};