-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
214 lines (213 loc) · 7.44 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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
content: [
"../../packages/components/**/*.{js,jsx,ts,tsx}",
"../../packages/screens/**/*.{js,jsx,ts,tsx}",
"./app/**/*.{js,jsx,ts,tsx}",
"./app/*.{js,jsx,ts,tsx}",
],
safelist: [
"gap-x-2",
"gap-y-6",
"pl-4",
"flex-wrap",
"mb-12",
"basis-[10%]",
{
pattern:
/bg-(primary|secondary|tertiary|error|success|warning|muted|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|light|dark|white|gray|black)/,
},
],
presets: [require("nativewind/preset")],
theme: {
extend: {
colors: {
primary: {
0: "var(--color-primary-0)",
50: "var(--color-primary-50)",
100: "var(--color-primary-100)",
200: "var(--color-primary-200)",
300: "var(--color-primary-300)",
400: "var(--color-primary-400)",
500: "var(--color-primary-500)",
600: "var(--color-primary-600)",
700: "var(--color-primary-700)",
800: "var(--color-primary-800)",
900: "var(--color-primary-900)",
950: "var(--color-primary-950)",
},
secondary: {
0: "var(--color-secondary-0)",
50: "var(--color-secondary-50)",
100: "var(--color-secondary-100)",
200: "var(--color-secondary-200)",
300: "var(--color-secondary-300)",
400: "var(--color-secondary-400)",
500: "var(--color-secondary-500)",
600: "var(--color-secondary-600)",
700: "var(--color-secondary-700)",
800: "var(--color-secondary-800)",
900: "var(--color-secondary-900)",
950: "var(--color-secondary-950)",
},
tertiary: {
50: "var(--color-tertiary-50)",
100: "var(--color-tertiary-100)",
200: "var(--color-tertiary-200)",
300: "var(--color-tertiary-300)",
400: "var(--color-tertiary-400)",
500: "var(--color-tertiary-500)",
600: "var(--color-tertiary-600)",
700: "var(--color-tertiary-700)",
800: "var(--color-tertiary-800)",
900: "var(--color-tertiary-900)",
950: "var(--color-tertiary-950)",
},
error: {
0: "var(--color-error-0)",
50: "var(--color-error-50)",
100: "var(--color-error-100)",
200: "var(--color-error-200)",
300: "var(--color-error-300)",
400: "var(--color-error-400)",
500: "var(--color-error-500)",
600: "var(--color-error-600)",
700: "var(--color-error-700)",
800: "var(--color-error-800)",
900: "var(--color-error-900)",
950: "var(--color-error-950)",
},
success: {
0: "var(--color-success-0)",
50: "var(--color-success-50)",
100: "var(--color-success-100)",
200: "var(--color-success-200)",
300: "var(--color-success-300)",
400: "var(--color-success-400)",
500: "var(--color-success-500)",
600: "var(--color-success-600)",
700: "var(--color-success-700)",
800: "var(--color-success-800)",
900: "var(--color-success-900)",
950: "var(--color-success-950)",
},
warning: {
0: "var(--color-warning-0)",
50: "var(--color-warning-50)",
100: "var(--color-warning-100)",
200: "var(--color-warning-200)",
300: "var(--color-warning-300)",
400: "var(--color-warning-400)",
500: "var(--color-warning-500)",
600: "var(--color-warning-600)",
700: "var(--color-warning-700)",
800: "var(--color-warning-800)",
900: "var(--color-warning-900)",
950: "var(--color-warning-950)",
},
info: {
0: "var(--color-info-0)",
50: "var(--color-info-50)",
100: "var(--color-info-100)",
200: "var(--color-info-200)",
300: "var(--color-info-300)",
400: "var(--color-info-400)",
500: "var(--color-info-500)",
600: "var(--color-info-600)",
700: "var(--color-info-700)",
800: "var(--color-info-800)",
900: "var(--color-info-900)",
950: "var(--color-info-950)",
},
typography: {
0: "var(--color-typography-0)",
50: "var(--color-typography-50)",
100: "var(--color-typography-100)",
200: "var(--color-typography-200)",
300: "var(--color-typography-300)",
400: "var(--color-typography-400)",
500: "var(--color-typography-500)",
600: "var(--color-typography-600)",
700: "var(--color-typography-700)",
800: "var(--color-typography-800)",
900: "var(--color-typography-900)",
950: "var(--color-typography-950)",
white: "#FFFFFF",
gray: "#D4D4D4",
black: "#181718",
},
outline: {
0: "var(--color-outline-0)",
50: "var(--color-outline-50)",
100: "var(--color-outline-100)",
200: "var(--color-outline-200)",
300: "var(--color-outline-300)",
400: "var(--color-outline-400)",
500: "var(--color-outline-500)",
600: "var(--color-outline-600)",
700: "var(--color-outline-700)",
800: "var(--color-outline-800)",
900: "var(--color-outline-900)",
950: "var(--color-outline-950)",
},
background: {
0: "var(--color-background-0)",
50: "var(--color-background-50)",
100: "var(--color-background-100)",
200: "var(--color-background-200)",
300: "var(--color-background-300)",
400: "var(--color-background-400)",
500: "var(--color-background-500)",
600: "var(--color-background-600)",
700: "var(--color-background-700)",
800: "var(--color-background-800)",
900: "var(--color-background-900)",
950: "var(--color-background-950)",
error: "var(--color-background-error)",
warning: "var(--color-background-warning)",
muted: "var(--color-background-muted)",
success: "var(--color-background-success)",
info: "var(--color-background-info)",
light: "#FBFBFB",
dark: "#181719",
},
border: {
0: "var(--color-border-0)",
50: "var(--color-border-50)",
100: "var(--color-border-100)",
200: "var(--color-border-200)",
300: "var(--color-border-300)",
400: "var(--color-border-400)",
500: "var(--color-border-500)",
600: "var(--color-border-600)",
700: "var(--color-border-700)",
800: "var(--color-border-800)",
900: "var(--color-border-900)",
950: "var(--color-border-950)",
error: "var(--color-border-error)",
warning: "var(--color-border-warning)",
muted: "var(--color-border-muted)",
success: "var(--color-border-success)",
info: "var(--color-border-info)",
light: "#FBFBFB",
dark: "#181719",
},
},
fontFamily: {
heading: undefined,
body: undefined,
mono: undefined,
roboto: ["Roboto", "sans-serif"],
},
fontWeight: {
hairline: "100",
extraBlack: "950",
},
fontSize: {
"2xs": "10px",
},
},
plugins: [],
},
};