-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.ts
194 lines (192 loc) · 5.97 KB
/
tailwind.config.ts
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
import type { Config } from "tailwindcss"
import { fontFamily } from "tailwindcss/defaultTheme"
const config = {
darkMode: ["class", '[data-theme="dark"]'],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
grey: {
50: "#F6F6F6",
100: "#e8e8e8",
200: "#dbdbdb",
300: "#c2c2c2",
400: "#aaa",
500: "#69696c",
600: "#3e3d3d",
650: "#353536",
700: "#2b2b2b",
800: "#242424",
900: "#1d1d1d",
950: "#0D0D0D",
},
blue: {
50: "#eceff9",
100: "#dce2f4",
200: "#bac5e8",
300: "#97a8dd",
400: "#758bd1",
500: "#526dc6",
600: "#3852a9",
700: "#2a3e7f",
800: "#1c2954",
900: "#0e152a",
950: "#060913",
},
green: {
50: "#f2f7ee",
100: "#e4eedd",
200: "#c7dcb7",
300: "#accb95",
400: "#8fb96f",
500: "#75a550",
600: "#5c833f",
700: "#476430",
800: "#2e4120",
900: "#182211",
950: "#0c1108",
},
accent: {
50: "#f3f2f2",
100: "#e4e2e1",
200: "#cac6c4",
300: "#afa9a6",
400: "#958d89",
500: "#79716d",
600: "#615a57",
700: "#484441",
800: "#302d2c",
900: "#181716",
950: "#0d0d0c",
},
red: {
50: "#f9ebeb",
100: "#f3d8d8",
200: "#e7b1b1",
300: "#dc8989",
400: "#d06262",
500: "#c43b3b",
600: "#9d2f2f",
700: "#762323",
800: "#4e1818",
900: "#270c0c",
950: "#140606",
},
white: {
DEFAULT: "#fff",
0: "#fff",
},
surface: {
default: "var(--surface-default)",
subtle: "var(--surface-subtle)",
muted: "var(--surface-muted)",
subdued: "var(--surface-subdued)",
emphasis: "var(--surface-emphasis)",
accent: "var(--surface-accent)",
success: "var(--surface-success)",
"success-emphasis": "var(--surface-success-emphasis)",
critical: "var(--surface-critical)",
"critical-emphasis": "var(--surface-critical-emphasis)",
"blur-90": "var(--surface-blur-90)",
"blur-95": "var(--surface-blur-95)",
},
text: {
default: "var(--text-default)",
subtle: "var(--text-subtle)",
muted: "var(--text-muted)",
contrast: "var(--text-contrast)",
emphasis: "var(--text-emphasis)",
success: "var(--text-success)",
critical: "var(--text-critical)",
},
icon: {
default: "var(--icon-default)",
subtle: "var(--icon-subtle)",
muted: "var(--icon-muted)",
contrast: "var(--icon-contrast)",
accent: "var(--icon-accent)",
success: "var(--icon-success)",
critical: "var(--icon-critical)",
},
border: {
default: "var(--border-default)",
subtle: "var(--border-subtle)",
muted: "var(--border-muted)",
success: "var(--border-success)",
critical: "var(--border-critical)",
},
button: {
primary: "var(--button-primary)",
"primary-hover": "var(--button-primary-hover)",
"primary-pressed": "var(--button-primary-pressed)",
secondary: "var(--button-secondary)",
"secondary-hover": "var(--button-secondary-hover)",
"secondary-pressed": "var(--button-secondary-pressed)",
tertiary: "var(--button-tertiary)",
"tertiary-hover": "var(--button-tertiary-hover)",
"tertiary-pressed": "var(--button-tertiary-pressed)",
"tertiary-disabled": "var(--button-tertiary-disabled)",
contrast: "var(--button-contrast)",
"contrast-hover": "var(--button-contrast-hover)",
"contrast-pressed": "var(--button-contrast-pressed)",
blur: "var(--button-blur)",
"border-secondary": "var(--button-border-secondary)",
"border-secondary-hover": "var(--button-border-secondary-hover)",
"border-secondary-pressed": "var(--button-border-secondary-pressed)",
"border-secondary-disabled":
"var(--button-border-secondary-disabled)",
},
},
fontFamily: {
inter: ["Inter", ...fontFamily.sans],
serif: ["PT Serif", ...fontFamily.serif],
},
fontSize: {
sm: "clamp(0.7rem, 0.09vi + 0.68rem, 0.75rem)",
base: "clamp(0.88rem, 0.23vi + 0.82rem, 1rem)",
lg: "clamp(1.09rem, 0.43vi + 0.98rem, 1.33rem)",
xl: "clamp(1.37rem, 0.74vi + 1.18rem, 1.78rem)",
"2xl": "clamp(1.71rem, 1.2vi + 1.41rem, 2.37rem)",
"3xl": "clamp(2.14rem, 1.86vi + 1.67rem, 3.16rem)",
"4xl": "clamp(2.67rem, 2.8vi + 1.97rem, 4.21rem)",
"5xl": "clamp(3.34rem, 4.13vi + 2.3rem, 5.61rem)",
"6xl": "clamp(4.17rem, 6.01vi + 2.67rem, 7.48rem)",
},
borderRadius: {
button: "300px",
},
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" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
spacing: {
"navigation-height": "var(--navigation-height)",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config
export default config