-
Notifications
You must be signed in to change notification settings - Fork 92
/
Copy pathtailwind.config.js
199 lines (199 loc) · 9.32 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
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: ["./src/**/*.{js,jsx,ts,tsx}"],
prefix: "",
theme: {
fontFamily: {
sans: ['"Libre Franklin"', "Helvetica", "Arial", "-apple-system", "BlinkMacSystemFont", "sans-serif"],
},
extend: {
fontWeight: {
medium: "501",
},
fontSize: {
xxs: "0.625rem", // 10px
"2xxs": "0.6875rem", // 11px
"3xxs": "0.75rem", // 12px
ssm: "0.8125rem", // 13px
"2ssm": "0.875em", // 14px
"2xl": "1.5rem",
"3xl": "2rem",
"4xl": "2.625rem",
},
colors: {
primary: "rgb(254, 0, 124)",
secondary: "rgb(107, 20, 249)",
black: "rgb(0,0,0)",
discord: "rgb(88, 101, 242)",
reddit: "rgb(255, 69, 0)",
darkish: "rgb(23, 20, 37)",
pink: {
100: "rgb(252, 221, 236)",
200: "rgb(241, 120, 182)",
300: "rgb(239, 93, 168)",
},
purple: {
100: "rgb(162, 155, 254)",
200: "rgb(120, 121, 241)",
300: "rgb(108, 92, 231)",
},
gray: {
25: "rgb(240, 242, 244)",
50: "rgb(226, 228, 234)",
100: "rgb(196, 201, 213)",
200: "rgb(151, 160, 180)",
300: "rgb(123, 134, 158)",
400: "rgb(107, 119, 148)",
500: "rgb(87, 97, 126)",
600: "rgb(63, 66, 90)",
700: "rgb(48, 51, 73)",
800: "rgb(37, 39, 59)",
900: "rgb(11, 2, 25)",
},
red: {
100: "rgb(255, 107, 107)",
200: "rgb(255, 4, 90)",
},
orange: {
100: "rgb(254, 202, 87)",
200: "rgb(255, 159, 67)",
},
green: {
100: "rgb(85, 239, 196)",
200: "rgb(0, 206, 201)",
},
mint: {
100: "rgb(181, 203, 129)",
200: "rgb(161, 188, 94)",
300: "rgb(135, 162, 67)",
},
teal: {
100: "rgb(95, 206, 221)",
200: "rgb(53, 194, 212)",
300: "rgb(37, 161, 177)",
},
},
backgroundImage: {
appDarkBackground: "url(@Assets/dark/darkBackground.png)",
appLightBackground: "url(@Assets/light/lightBackground.png)",
linear: "linear-gradient(75deg,#FE007C,#6B14F6,#6B14F9,#FE007c)",
linearButton: "linear-gradient(90deg, rgb(254, 0, 124) 0%, rgb(107, 20, 249) 100%)",
configButton:
"linear-gradient(90deg,rgba(255,255,255,0.3) 20%,rgba(255,255,255,0) 100%), linear-gradient(rgba(176,175,194,0.3), rgba(176,175,194,0.3))",
configButtonHover:
"linear-gradient(90deg,rgba(255,255,255,0.4) 20%,rgba(255,255,255,0) 100%), linear-gradient(rgba(196,201,213,0.8), rgba(196,201,213,0.8))",
configButtonActive:
"linear-gradient(90deg,rgba(255,255,255,0) 20%,rgba(255,255,255,0) 100%), linear-gradient(rgba(196,201,213,0), rgba(196,201,213,0))",
configButtonDark:
"linear-gradient(90deg,rgba(255,255,255,0.1) -20%,rgba(255,255,255,0) 120%), linear-gradient(0deg,rgba(87,97,126,0.25), rgba(87,97,126,0.25)), linear-gradient(rgba(11,2,25,0.2), rgba(11,2,25,0.2))",
configButtonDarkHover:
"linear-gradient(90deg,rgba(255,255,255,0.15) -20%,rgba(255,255,255,0) 120%), linear-gradient(rgba(87,97,126,0.6), rgba(87,97,126,0.6))",
configButtonDarkActive:
"linear-gradient(90deg,rgba(255,255,255,0) -20%,rgba(255,255,255,0) 120%), linear-gradient(rgba(87,97,126,0), rgba(87,97,126,0))",
warningBanner:
"linear-gradient(0deg, rgba(254, 202, 87, 0.1) 0%, rgba(254, 202, 87, 0.1) 100%), linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, rgba(254, 255, 255, 0.1) 100%)",
warningBannerDark:
"linear-gradient(0deg, rgba(254, 202, 87, 0.08) 0%, rgba(254, 202, 87, 0.08) 100%), linear-gradient(0deg, rgba(63, 66, 90, 0.02) 0%, rgba(63, 66, 90, 0.02) 100%)",
buttonDisabled: "linear-gradient(90deg, #E8EBEE -20%, #DEE0E4 80%)",
buttonDisabledDark: "linear-gradient(90deg, #57617E -20%, #3F425A 80%)",
blurPink: "linear-gradient(180deg,rgba(0,194,255,0) 0%,#FF29C3 100%)",
blurBlue: "linear-gradient(180deg,rgba(24,75,255,0) 0%,#174AFF 100%)",
body: "url('/assets/images/bg-body.jpg')",
cardDeviceTextureLight: "url('@Assets/light/bg-texture-with-lines.jpg')",
cardDeviceTextureDark: "url('@Assets/dark/bg-texture-with-lines.jpg')",
cardDefyOffLight: "url('@Assets/base/devices/defy-white-offline.png')",
cardDefyOnLight: "url('@Assets/base/devices/defy-white-on.png')",
cardDefyOffDark: "url('@Assets/base/devices/defy-black-offline.png')",
cardDefyOnDark: "url('@Assets/base/devices/defy-black-on.png')",
cardRaiseOffLight: "url('@Assets/base/devices/raise-ansi-white-offline.png')",
cardRaiseOnLight: "url('@Assets/base/devices/raise-ansi-white-on.png')",
cardRaiseOffDark: "url('@Assets/base/devices/raise-ansi-black-offline.png')",
cardRaiseOnDark: "url('@Assets/base/devices/raise-ansi-black-on.png')",
bgCardOfflineLight:
"linear-gradient(180deg, rgba(240, 240, 240, 0.60) 1.33%, rgba(240, 240, 240, 0.00) 51.04%, rgba(240, 240, 245, 0.35) 100%), linear-gradient(rgba(30, 30, 55, 0.20), rgba(30, 30, 55, 0.20))",
bgCardOfflineDark:
"linear-gradient(180deg, rgba(48, 49, 73, 0.60) 1.33%, rgba(48, 57, 73, 0.00) 51.04%, rgba(48, 57, 73, 0.35) 100%), linear-gradient(rgba(48, 51, 73, 0.60), rgba(48, 51, 73, 0.60))",
footer: "url('/assets/images/bg-footer.png')",
noise: "url('/assets/images/noise.png')",
home: "url('/assets/images/home-hero-background.jpg')",
lightAccent: "url('@Assets/base/light-accent--md.png')",
lightAccentLg: "url('@Assets/base/light-accent--lg.png')",
tabMenuDark: "url(@Assets/dark/noise-tabs.jpg)",
tabMenu: "url(@Assets/light/noise-tabs.jpg)",
tabGradientDarkActive:
"linear-gradient(100deg, rgba(240, 242, 244, 0.12) -24%, rgba(255, 255, 255, 0.00) 40%), rgba(18, 19, 36, 0.60))",
gradientWarning: "linear-gradient(180deg, #FE007C 0%, #FF9F43 0.01%, #FECA57 100%)",
gradientDanger: "linear-gradient(180deg, #FE007C 0%, #FE007C 0.01%, #FF6B6B 100%)",
gradientSuccess: "linear-gradient(180deg, #00CEC5 0%, #00CEC9 0.01%, #55EFC4 100%)",
gradientWarningLight:
"linear-gradient(90deg, rgba(255, 107, 107, 0.25) -20%, rgba(255, 159, 67, 0.05) 40%), linear-gradient(rgb(240, 242, 244), rgb(240, 242, 244))",
gradientWarningDark:
"linear-gradient(90deg, rgba(255, 107, 107, 0.25) -10%, rgba(255, 159, 67, 0) 40%), linear-gradient(rgb(37, 39, 59), rgb(37, 39, 59))",
gradientErrorLight:
"linear-gradient(90deg, rgba(255, 4, 90, 0.25) -20%, rgba(255, 4, 67, 0.05) 40%), linear-gradient(rgb(240, 242, 244), rgb(240, 242, 244))",
gradientErrorDark:
"linear-gradient(90deg, rgba(255, 4, 90, 0.25) -10%, rgba(255, 4, 90, 0) 40%), linear-gradient(rgb(37, 39, 59), rgb(37, 39, 59))",
gradientSuccessLight:
"linear-gradient(90deg, rgba(0, 206, 201, 0.25) -20%, rgba(0, 206, 201, 0.05) 40%), linear-gradient(rgb(240, 242, 244), rgb(240, 242, 244))",
gradientSuccessDark:
"linear-gradient(90deg, rgba(0, 206, 201, 0.25) -10%, rgba(0, 206, 201, 0) 40%), linear-gradient(rgb(37, 39, 59), rgb(37, 39, 59))",
},
backgroundPosition: {
position: "left -8rem top -8rem",
positionFooter: "center bottom -124px",
},
borderRadius: {
"2sm": "3px",
regular: "6px",
},
boxShadow: {
dropdown: "0px 32px 72px -32px rgba(26, 17, 46, 0.50), 16px 32px 32px -16px rgba(11, 2, 25, 0.20)",
buttonConfigLight: "0px 2px 0px rgba(141,132,188,0.2), 0px 0px 0px 1px rgba(209,207,234,0.5) inset",
buttonConfigLightHover: "0px 2px 0px rgba(141,132,188,0.4)",
buttonConfigLightActive: "0px 3px 0px rgba(37,39,59,0.05), 0px 16px 16px -8px rgba(76,102,177,0.3)",
buttonConfig: " 0px 2px 0px 0px rgba(0, 0, 0, 0.10)",
buttonConfigHover: "0px 16px 16px -8px rgba(87, 97, 126, 0.30), 0px 3px 0px 0px rgba(37, 39, 59, 0.25)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
"bounce-error": {
"0%, 100%": {
transform: "translateX(0)",
animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)",
},
"50%": {
transform: "translateX(-15px)",
animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
},
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"bounce-error": "bounce-error 0.2s ease-in-out 0s 3",
"spin-fast": "spin 0.4s linear infinite",
},
height: {
"10v": "10vh",
"20v": "20vh",
"30v": "30vh",
"40v": "40vh",
"50v": "50vh",
"60v": "60vh",
"70v": "70vh",
"80v": "80vh",
"90v": "90vh",
"100v": "100vh",
},
},
},
plugins: [require("tailwindcss-animate"), require("@xpd/tailwind-3dtransforms")],
};