-
Notifications
You must be signed in to change notification settings - Fork 3
/
tailwind.config.js
201 lines (201 loc) · 9.64 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
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "media",
content: [
"./App.{tsx,jsx,ts,js}",
"./components/**/*.{tsx,jsx,ts,js}",
"./cases/**/*.{tsx,jsx,ts,js}",
"./navigation/**/*.{tsx,jsx,ts,js}",
],
presets: [require("nativewind/preset")],
safelist: [
{
pattern:
/(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark)/,
},
],
theme: {
extend: {
colors: {
primary: {
0: "rgb(var(--color-primary-0)/<alpha-value>)",
50: "rgb(var(--color-primary-50)/<alpha-value>)",
100: "rgb(var(--color-primary-100)/<alpha-value>)",
200: "rgb(var(--color-primary-200)/<alpha-value>)",
300: "rgb(var(--color-primary-300)/<alpha-value>)",
400: "rgb(var(--color-primary-400)/<alpha-value>)",
500: "rgb(var(--color-primary-500)/<alpha-value>)",
600: "rgb(var(--color-primary-600)/<alpha-value>)",
700: "rgb(var(--color-primary-700)/<alpha-value>)",
800: "rgb(var(--color-primary-800)/<alpha-value>)",
900: "rgb(var(--color-primary-900)/<alpha-value>)",
950: "rgb(var(--color-primary-950)/<alpha-value>)",
},
secondary: {
0: "rgb(var(--color-secondary-0)/<alpha-value>)",
50: "rgb(var(--color-secondary-50)/<alpha-value>)",
100: "rgb(var(--color-secondary-100)/<alpha-value>)",
200: "rgb(var(--color-secondary-200)/<alpha-value>)",
300: "rgb(var(--color-secondary-300)/<alpha-value>)",
400: "rgb(var(--color-secondary-400)/<alpha-value>)",
500: "rgb(var(--color-secondary-500)/<alpha-value>)",
600: "rgb(var(--color-secondary-600)/<alpha-value>)",
700: "rgb(var(--color-secondary-700)/<alpha-value>)",
800: "rgb(var(--color-secondary-800)/<alpha-value>)",
900: "rgb(var(--color-secondary-900)/<alpha-value>)",
950: "rgb(var(--color-secondary-950)/<alpha-value>)",
},
tertiary: {
50: "rgb(var(--color-tertiary-50)/<alpha-value>)",
100: "rgb(var(--color-tertiary-100)/<alpha-value>)",
200: "rgb(var(--color-tertiary-200)/<alpha-value>)",
300: "rgb(var(--color-tertiary-300)/<alpha-value>)",
400: "rgb(var(--color-tertiary-400)/<alpha-value>)",
500: "rgb(var(--color-tertiary-500)/<alpha-value>)",
600: "rgb(var(--color-tertiary-600)/<alpha-value>)",
700: "rgb(var(--color-tertiary-700)/<alpha-value>)",
800: "rgb(var(--color-tertiary-800)/<alpha-value>)",
900: "rgb(var(--color-tertiary-900)/<alpha-value>)",
950: "rgb(var(--color-tertiary-950)/<alpha-value>)",
},
error: {
0: "rgb(var(--color-error-0)/<alpha-value>)",
50: "rgb(var(--color-error-50)/<alpha-value>)",
100: "rgb(var(--color-error-100)/<alpha-value>)",
200: "rgb(var(--color-error-200)/<alpha-value>)",
300: "rgb(var(--color-error-300)/<alpha-value>)",
400: "rgb(var(--color-error-400)/<alpha-value>)",
500: "rgb(var(--color-error-500)/<alpha-value>)",
600: "rgb(var(--color-error-600)/<alpha-value>)",
700: "rgb(var(--color-error-700)/<alpha-value>)",
800: "rgb(var(--color-error-800)/<alpha-value>)",
900: "rgb(var(--color-error-900)/<alpha-value>)",
950: "rgb(var(--color-error-950)/<alpha-value>)",
},
success: {
0: "rgb(var(--color-success-0)/<alpha-value>)",
50: "rgb(var(--color-success-50)/<alpha-value>)",
100: "rgb(var(--color-success-100)/<alpha-value>)",
200: "rgb(var(--color-success-200)/<alpha-value>)",
300: "rgb(var(--color-success-300)/<alpha-value>)",
400: "rgb(var(--color-success-400)/<alpha-value>)",
500: "rgb(var(--color-success-500)/<alpha-value>)",
600: "rgb(var(--color-success-600)/<alpha-value>)",
700: "rgb(var(--color-success-700)/<alpha-value>)",
800: "rgb(var(--color-success-800)/<alpha-value>)",
900: "rgb(var(--color-success-900)/<alpha-value>)",
950: "rgb(var(--color-success-950)/<alpha-value>)",
},
warning: {
0: "rgb(var(--color-warning-0)/<alpha-value>)",
50: "rgb(var(--color-warning-50)/<alpha-value>)",
100: "rgb(var(--color-warning-100)/<alpha-value>)",
200: "rgb(var(--color-warning-200)/<alpha-value>)",
300: "rgb(var(--color-warning-300)/<alpha-value>)",
400: "rgb(var(--color-warning-400)/<alpha-value>)",
500: "rgb(var(--color-warning-500)/<alpha-value>)",
600: "rgb(var(--color-warning-600)/<alpha-value>)",
700: "rgb(var(--color-warning-700)/<alpha-value>)",
800: "rgb(var(--color-warning-800)/<alpha-value>)",
900: "rgb(var(--color-warning-900)/<alpha-value>)",
950: "rgb(var(--color-warning-950)/<alpha-value>)",
},
info: {
0: "rgb(var(--color-info-0)/<alpha-value>)",
50: "rgb(var(--color-info-50)/<alpha-value>)",
100: "rgb(var(--color-info-100)/<alpha-value>)",
200: "rgb(var(--color-info-200)/<alpha-value>)",
300: "rgb(var(--color-info-300)/<alpha-value>)",
400: "rgb(var(--color-info-400)/<alpha-value>)",
500: "rgb(var(--color-info-500)/<alpha-value>)",
600: "rgb(var(--color-info-600)/<alpha-value>)",
700: "rgb(var(--color-info-700)/<alpha-value>)",
800: "rgb(var(--color-info-800)/<alpha-value>)",
900: "rgb(var(--color-info-900)/<alpha-value>)",
950: "rgb(var(--color-info-950)/<alpha-value>)",
},
typography: {
0: "rgb(var(--color-typography-0)/<alpha-value>)",
50: "rgb(var(--color-typography-50)/<alpha-value>)",
100: "rgb(var(--color-typography-100)/<alpha-value>)",
200: "rgb(var(--color-typography-200)/<alpha-value>)",
300: "rgb(var(--color-typography-300)/<alpha-value>)",
400: "rgb(var(--color-typography-400)/<alpha-value>)",
500: "rgb(var(--color-typography-500)/<alpha-value>)",
600: "rgb(var(--color-typography-600)/<alpha-value>)",
700: "rgb(var(--color-typography-700)/<alpha-value>)",
800: "rgb(var(--color-typography-800)/<alpha-value>)",
900: "rgb(var(--color-typography-900)/<alpha-value>)",
950: "rgb(var(--color-typography-950)/<alpha-value>)",
white: "#FFFFFF",
gray: "#D4D4D4",
black: "#181718",
},
outline: {
0: "rgb(var(--color-outline-0)/<alpha-value>)",
50: "rgb(var(--color-outline-50)/<alpha-value>)",
100: "rgb(var(--color-outline-100)/<alpha-value>)",
200: "rgb(var(--color-outline-200)/<alpha-value>)",
300: "rgb(var(--color-outline-300)/<alpha-value>)",
400: "rgb(var(--color-outline-400)/<alpha-value>)",
500: "rgb(var(--color-outline-500)/<alpha-value>)",
600: "rgb(var(--color-outline-600)/<alpha-value>)",
700: "rgb(var(--color-outline-700)/<alpha-value>)",
800: "rgb(var(--color-outline-800)/<alpha-value>)",
900: "rgb(var(--color-outline-900)/<alpha-value>)",
950: "rgb(var(--color-outline-950)/<alpha-value>)",
},
background: {
0: "rgb(var(--color-background-0)/<alpha-value>)",
50: "rgb(var(--color-background-50)/<alpha-value>)",
100: "rgb(var(--color-background-100)/<alpha-value>)",
200: "rgb(var(--color-background-200)/<alpha-value>)",
300: "rgb(var(--color-background-300)/<alpha-value>)",
400: "rgb(var(--color-background-400)/<alpha-value>)",
500: "rgb(var(--color-background-500)/<alpha-value>)",
600: "rgb(var(--color-background-600)/<alpha-value>)",
700: "rgb(var(--color-background-700)/<alpha-value>)",
800: "rgb(var(--color-background-800)/<alpha-value>)",
900: "rgb(var(--color-background-900)/<alpha-value>)",
950: "rgb(var(--color-background-950)/<alpha-value>)",
error: "rgb(var(--color-background-error)/<alpha-value>)",
warning: "rgb(var(--color-background-warning)/<alpha-value>)",
muted: "rgb(var(--color-background-muted)/<alpha-value>)",
success: "rgb(var(--color-background-success)/<alpha-value>)",
info: "rgb(var(--color-background-info)/<alpha-value>)",
light: "#FBFBFB",
dark: "#181719",
},
indicator: {
primary: "rgb(var(--color-indicator-primary)/<alpha-value>)",
info: "rgb(var(--color-indicator-info)/<alpha-value>)",
error: "rgb(var(--color-indicator-error)/<alpha-value>)",
},
},
fontFamily: {
heading: undefined,
body: undefined,
mono: undefined,
roboto: ["Roboto", "sans-serif"],
},
fontWeight: {
extrablack: "950",
},
fontSize: {
"2xs": "10px",
},
boxShadow: {
"hard-1": "-2px 2px 8px 0px rgba(38, 38, 38, 0.20)",
"hard-2": "0px 3px 10px 0px rgba(38, 38, 38, 0.20)",
"hard-3": "2px 2px 8px 0px rgba(38, 38, 38, 0.20)",
"hard-4": "0px -3px 10px 0px rgba(38, 38, 38, 0.20)",
"hard-5": "0px 2px 10px 0px rgba(38, 38, 38, 0.10)",
"soft-1": "0px 0px 10px rgba(38, 38, 38, 0.1)",
"soft-2": "0px 0px 20px rgba(38, 38, 38, 0.2)",
"soft-3": "0px 0px 30px rgba(38, 38, 38, 0.1)",
"soft-4": "0px 0px 40px rgba(38, 38, 38, 0.1)",
},
},
plugins: [],
},
};