/
tailwind.config.cjs
215 lines (213 loc) · 7.23 KB
/
tailwind.config.cjs
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
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
darkMode: "class",
theme: {
screens: {
xs: "375px",
sm: "480px",
md: "37.75em", // 604px
lg: "50em", // 800px
xl: "72em", // 1152px
},
extend: {
borderRadius: {
primary: "var(--border-radius-primary)" /* Inputs, Buttons */,
secondary: "var(--border-radius-secondary)" /* Cards */,
reset: "var(--border-radius-reset)" /* Border reset */,
round: "var(--border-radius-round)" /* Rounded icon buttons */,
},
borderWidth: {
"w-primary": "var(--border-width-primary)" /* Inputs */,
"w-secondary": "var(--border-width-secondary)" /* Buttons */,
"w-reset": "var(--border-width-reset)" /* Border reset */,
},
backgroundColor: {
normal: "#FFF0DD",
"dark-normal": "#262626",
highlight: "#FFDEB5",
"dark-highlight": "#3b3b3b",
"callout-note": "#FFF8F3",
"callout-dark-note": "#2E261C",
"callout-caution": "#F8F5E0",
"callout-dark-caution": "#5D4C38",
"callout-danger": "#FFE4DF",
"callout-dark-danger": "#662A1E",
"callout-tip": "#EEEEEE",
"callout-dark-tip": "#3B3B3B",
"link-code": "#ffe7e2",
"link-dark-code": "#33150F",
code: "#dadada",
"dark-code": "#5B5B5B",
},
borderColor: {
primary: "#dadada",
"dark-primary": "#FFF8F34D",
},
colors: {
blue: {
100: "var(--blue-100)",
200: "var(--blue-200)",
300: "var(--blue-300)",
400: "var(--blue-400)",
500: "var(--blue-500)",
600: "var(--blue-600)",
700: "var(--blue-700)",
800: "var(--blue-800)",
900: "var(--blue-900)",
},
gray: {
100: "var(--gray-100)",
200: "var(--gray-200)",
300: "var(--gray-300)",
400: "var(--gray-400)",
500: "var(--gray-500)",
600: "var(--gray-600)",
700: "var(--gray-700)",
800: "var(--gray-800)",
900: "var(--gray-900)",
},
green: {
100: "var(--green-100)",
200: "var(--green-200)",
300: "var(--green-300)",
400: "var(--green-400)",
500: "var(--green-500)",
600: "var(--green-600)",
700: "var(--green-700)",
800: "var(--green-800)",
900: "var(--green-900)",
},
orange: {
100: "var(--orange-100)",
200: "var(--orange-200)",
300: "var(--orange-300)",
400: "var(--orange-400)",
500: "var(--orange-500)",
600: "var(--orange-600)",
700: "var(--orange-700)",
800: "var(--orange-800)",
900: "var(--orange-900)",
},
purple: {
100: "var(--purple-100)",
200: "var(--purple-200)",
300: "var(--purple-300)",
400: "var(--purple-400)",
500: "var(--purple-500)",
600: "var(--purple-600)",
700: "var(--purple-700)",
800: "var(--purple-800)",
900: "var(--purple-900)",
},
red: {
100: "var(--red-100)",
200: "var(--red-200)",
300: "var(--red-300)",
400: "var(--red-400)",
500: "var(--red-500)",
600: "var(--red-600)",
700: "var(--red-700)",
800: "var(--red-800)",
900: "var(--red-900)",
},
yellow: {
100: "var(--yellow-100)",
200: "var(--yellow-200)",
300: "var(--yellow-300)",
400: "var(--yellow-400)",
500: "var(--yellow-500)",
600: "var(--yellow-600)",
700: "var(--yellow-700)",
800: "var(--yellow-800)",
900: "var(--yellow-900)",
},
primary: "var(--color-text-primary)",
secondary: "var(--color-text-secondary)",
heading: "var(--color-text-heading)",
error: "var(--color-text-error)",
warning: "var(--color-text-warning)",
success: "var(--color-text-success)",
info: "var(--color-text-info)",
contrast: "var(--color-text-contrast)",
link: "var(--color-text-link)",
"link-hover": "var(--color-text-link-hover)",
"link-pressed": "var(--color-text-link-pressed)",
disabled: "var(--color-text-disabled)",
placeholder: "var(--color-text-placeholder)",
value: "var(--color-text-value)",
label: "var(--color-text-label)",
text: "var(--theme-text)",
accent: "var(--theme-text-accent)",
light: "var(--theme-text-light)",
lighter: "var(--theme-text-lighter)",
bg: "var(--theme-bg)",
"bg-hover": "var(--theme-bg-hover)",
"bg-offset": "var(--theme-bg-offset)",
"bg-accent": "var(--theme-bg-accent)",
divider: "#000000",
accent: "var(--theme-accent)",
"code-text": "var(--theme-code-text)",
"code-bg": "var(--theme-code-bg)",
"background-primary": "var(--color-background-primary)",
"background-secondary": "var(--color-background-secondary)",
"background-error": "var(--color-background-error)",
"background-contrast": "var(--color-background-contrast)",
"background-warning": "var(--color-background-warning)",
"background-success": "var(--color-background-success)",
"background-info": "var(--color-background-info)",
"background-disabled": "var(--color-background-disabled)",
"code-inline-bg": "var(--theme-code-inline-bg)",
"border-primary": "var(--color-border-primary)",
"border-secondary": "var(--color-border-secondary)",
"border-contrast": "var(--color-border-contrast)",
"border-interactive": "var(--color-border-interactive)",
"border-disabled": "var(--color-border-disabled)",
"border-separator": "var(--color-border-separator)",
"interactive-focus": "var(--color-border-interactive-focus)",
"interactive-hover": "var(--color-border-interactive-hover)",
"interactive-pressed": "var(--color-border-interactive-pressed)",
"interactive-error": "var(--color-border-interactive-error)",
// theme
black: "#101010",
white: "#FFF8F3",
"pure-black": "#000",
"pure-white": "#fff",
},
fontFamily: {
text: "var(--font-family-text)",
code: "var(--font-family-code)",
mono: "var(--font-family-code)",
},
fontWeight: {
normal: "var(--font-weight-normal)",
medium: "var(--font-weight-medium)",
bold: "var(--font-weight-bold)",
},
fontSize: {
base: ["16px", "28px"],
},
textColor: {
"link-code": "#ff684b",
code: "#101010",
"dark-code": "#fff",
marker: "#586474",
"dark-marker": "#FFF8F3",
},
height: {
navbar: "var(--theme-navbar-height)",
},
margin: {
navbar: "var(--theme-navbar-height)",
},
opacity: {
accent: "var(--theme-accent-opacity)",
},
padding: {
modal: "var(--modal-padding)",
doc: "var(--doc-padding)",
},
},
},
plugins: [],
}