-
-
Notifications
You must be signed in to change notification settings - Fork 13
/
tailwind.config.js
128 lines (124 loc) · 3.69 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
/** @type {import('tailwindcss').Config} */
import plugin from "tailwindcss/plugin";
export const content = [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
];
export const darkMode = "class";
export const theme = {
extend: {
boxShadow: {
"card-hover-dark":
"0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 2px -1px rgba(255, 255, 255, 0.32), 0px 2px 8px 0px rgba(0, 0, 0, 0.64)",
"card-hover-light":
"0px 0px 0px 1px rgba(17, 24, 28, 0.08), 0px 1px 2px -1px rgba(17, 24, 28, 0.08), 0px 2px 8px 0px rgba(17, 24, 28, 0.1)",
"card-rest-dark":
"0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px rgba(255, 255, 255, 0.16), 0px 2px 4px rgba(0, 0, 0, 0.32);",
},
backgroundColor: {
"base-dark": "#1C1C1C",
"base-light": "#FFFFFF",
"button-hover": "#2E2E32",
"button-inverted-hover": "#F4F2F4",
"code-base-dark": "#1C1C1F",
"code-header-dark": "#161618",
"field-dark": "#232326",
"field-light": "#F8F9FA",
"subtle-dark": "#161618",
"subtle-light": "#F8F9FA",
"subtle-darker": "#7E7D86",
"subtle-lighter": "#687076",
"overlay-dark": "rgba(22, 22, 24, 0.7)",
"overlay-light": "rgba(17, 24, 28, 0.4)",
"tag-neutral-dark": "#28282C",
"tag-neutral-light": "#F1F3F5",
"tag-blue-dark": "#102A4C",
"tag-blue-light": "#E1F0FF",
focus: "#6E56CF",
},
borderColor: {
"base-dark": "#2E2E32",
"base-light": "#E6E8EB",
"neutral-button-dark": "rgba(255, 255, 255, 0.12)",
"neutral-button-light": "rgba(17, 24, 28, 0.1)",
"color-button-dark": "#FFFFFF",
"color-button-light": "#11181C",
"tag-neutral-dark": "#34343A",
"tag-neutral-light": "#DFE3E6",
"tag-blue-dark": "#0D3868",
"tag-blue-light": "#B7D9F8",
focus: "#6E56CF",
},
textColor: {
"base-dark": "#FFFFFF",
"base-light": "#11181C",
"muted-dark": "#706F78",
"muted-light": "#889096",
"subtle-dark": "#7E7D86",
"subtle-light": "#687076",
"error-dark": "#E5484D",
"error-light": "#E5484D",
"tag-neutral-dark": "#A09FA6",
"tag-neutral-light": "#687076",
"tag-blue-dark": "#52A9FF",
"tag-blue-light": "#006ADC",
"tag-purple": "#9E8CFC",
"icon-base-dark": "#EDEDEF",
"icon-base-light": "#11181C",
"icon-subtle-dark": "#7E7D86",
"icon-subtle-light": "#687076",
"icon-muted-dark": "#706F78",
"icon-muted-light": "#889096",
},
outlineColor: {
focus: "#6E56CF",
},
fontSize: {
"labels-large": ["16px", "20px"],
"labels-regular": ["14px", "20px"],
"labels-small": ["13px", "20px"],
"labels-xsmall": ["12px", "20px"],
"body-regular": ["14px", "24px"],
"headers-h2": ["32px", "44px"],
"headers-h3": ["24px", "32px"],
"headers-h4": ["18px", "28px"],
},
keyframes: {
fadeIn: {
from: { opacity: 0 },
to: { opacity: 1 },
},
fadeOut: {
from: { opacity: 1 },
to: { opacity: 0 },
},
blink: {
"0%": { opacity: 0.2 },
"20%": { opacity: 1 },
"100% ": { opacity: 0.2 },
},
},
animation: {
fadeIn: "fadeIn .3s ease-in-out",
fadeOut: "fadeOut .3s ease-in-out",
blink: "blink 1.4s both infinite",
},
},
};
export const plugins = [
plugin(({ matchUtilities, theme }) => {
matchUtilities(
{
"animation-delay": (value) => {
return {
"animation-delay": value,
};
},
},
{
values: theme("transitionDelay"),
}
);
}),
];