-
Notifications
You must be signed in to change notification settings - Fork 3
/
tailwind.config.js
212 lines (210 loc) · 7.33 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
function withOpacityValue(variable) {
return ({ opacityValue }) => {
if (opacityValue === undefined) {
return `rgb(var(${variable}))`
}
return `rgba(var(${variable}), ${opacityValue})`
}
}
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
safelist: [
{
pattern: /^(.*?)/,
variants: ["lg", "hover", "focus", "lg:hover", "opacity"],
},
],
theme: {
postcss: {
plugins: [require("tailwindcss"), require("autoprefixer")],
},
extend: {
animation: {
"reverse-spin": "reverse-spin 1s linear infinite",
},
keyframes: {
"reverse-spin": {
from: {
transform: "rotate(360deg)",
},
},
},
fontSize: {
"custom-xs": "var(--nds-core-font-xs)",
"custom-2xs": "var(--nds-core-font-2xs)",
"custom-sm": "var(--nds-core-font-sm)",
"custom-md": "var(--nds-core-font-md)",
"custom-lg": "var(--nds-core-font-lg)",
"custom-xl": "var(--nds-core-font-xl)",
"custom-3xl": "var(--nds-core-font-3xl)",
},
letterSpacing: {
"custom-x2wider": "0.04em",
"custom-tight": "-0.01em",
"custom-tighter": "-0.02em",
"custom-x2tighter": "-0.04em",
},
dropShadow: {
xxl: "0 16px 32px rgba(22, 34, 51, 0.16)",
},
boxShadow: {
xxl: "0 4px 12px -4px rgba(22, 34, 51, 0.12)",
"3xl": "0px 8px 16px -4px rgba(22, 34, 51, 0.12)",
},
backdropBlur: {
xxl: "18px",
opaque: "12px",
},
spacing: {
"8xl": "96rem",
"9xl": "128rem",
},
borderRadius: {
"4xl": "2rem",
},
border: {
default: "var(--nds-semantic-color-border-input)",
"custom-white": "var(--nds-core-border-white)",
},
colors: {
"border-menu": "var(--nds-semantic-color-border-menu)",
"surface-button-primary":
"var(--nds-semantic-color-surface-button-primary)",
placeholder: "var(--nds-semantic-color-text-placeholder)",
"default-border": "var(--nds-semantic-color-border-input)",
default: "var(--nds-semantic-color-text)",
"outlined-disabled":
"var(--nds-semantic-color-border-outlined-disabled)",
"brand-tertiary": "var(--nds-semantic-color-brand-tertiary)",
"surface-button-subtle":
"var(--nds-semantic-color-surface-button-subtle)",
"surface-button-subtle-hovered":
"var(--nds-semantic-color-surface-button-subtle-hovered)",
"button-subtle": "var(--nds-semantic-color-on-button-subtle)",
"button-transparent": "var(--nds-semantic-color-on-button-transparent)",
"button-outlined": "var(--nds-semantic-color-on-button-outlined)",
subdued: "var(--nds-semantic-color-text-subdued)",
light: {
default: "var(--nds-semantic-color-text)",
},
blue: {
100: withOpacityValue("--color-blue-100"),
200: withOpacityValue("--color-blue-200"),
300: withOpacityValue("--color-blue-300"),
400: withOpacityValue("--color-blue-400"),
500: withOpacityValue("--color-blue-500"),
600: withOpacityValue("--color-blue-600"),
700: withOpacityValue("--color-blue-700"),
DEFAULT: withOpacityValue("--color-blue-300"),
},
purple: {
100: withOpacityValue("--color-purple-100"),
200: withOpacityValue("--color-purple-200"),
300: withOpacityValue("--color-purple-300"),
400: withOpacityValue("--color-purple-400"),
500: withOpacityValue("--color-purple-500"),
DEFAULT: withOpacityValue("--color-purple-300"),
},
red: {
200: withOpacityValue("--color-red-200"),
300: withOpacityValue("--color-red-300"),
400: withOpacityValue("--color-red-400"),
600: withOpacityValue("--color-red-600"),
DEFAULT: withOpacityValue("--color-red-300"),
},
green: {
200: withOpacityValue("--color-green-200"),
300: withOpacityValue("--color-green-300"),
400: withOpacityValue("--color-green-400"),
DEFAULT: withOpacityValue("--color-green-300"),
},
gray: {
200: withOpacityValue("--color-gray-200"),
300: withOpacityValue("--color-gray-300"),
"300-transparent": withOpacityValue("--color-gray-300-transparent")(
0.5
),
400: withOpacityValue("--color-gray-400"),
500: withOpacityValue("--color-gray-500"),
"500-transparent": withOpacityValue("--color-gray-500-transparent")(
0.5
),
600: withOpacityValue("--color-gray-600"),
700: withOpacityValue("--color-gray-700"),
800: withOpacityValue("--color-gray-800"),
900: withOpacityValue("--color-gray-900"),
"900-transparent": withOpacityValue("--color-gray-900-transparent")(
0.05
),
DEFAULT: withOpacityValue("--color-gray-700"),
},
primary: {
light: withOpacityValue("--color-primary-light"),
DEFAULT: withOpacityValue("--color-primary-light"),
dark: withOpacityValue("--color-primary-dark"),
gray: withOpacityValue("--color-primary-gray"),
yellow: withOpacityValue("--color-primary-yellow"),
},
secondary: {
purple: withOpacityValue("--color-purple-300"),
reg: withOpacityValue("--color-reg-300"),
green: withOpacityValue("--color-green-300"),
gray: withOpacityValue("--color-gray-800"),
},
tertiary: {
red: withOpacityValue("--color-tertiary-red"),
green: withOpacityValue("--color-tertiary-green"),
},
},
textColor: {
emphasis: "var(--nds-semantic-color-text-emphasis)",
default: "var(--nds-semantic-color-text)",
"button-transparent": "var(--nds-semantic-color-on-button-transparent)",
subdued: "var(--nds-semantic-color-text-subdued)",
"button-highlight": "var(--nds-semantic-color-on-button-highlight)",
"button-subtle": "var(--nds-semantic-color-on-button-subtle)",
skin: {
primary: withOpacityValue("--color-text-primary"),
"primary-muted": withOpacityValue("--color-text-primary-muted"),
secondary: withOpacityValue("--color-text-secondary"),
"secondary-muted": withOpacityValue("--color-text-secondary-muted"),
subtle: withOpacityValue("--color-text-subtle"),
"subtle-muted": withOpacityValue("--color-text-subtle-muted"),
inverted: withOpacityValue("--color-text-inverted"),
"inverted-muted": withOpacityValue("--color-text-inverted-muted"),
},
},
backgroundColor: {
"surface-default": "var(--nds-semantic-color-surface-default)",
"button-subtle": "var(--nds-semantic-color-surface-button-subtle)",
"surface-button-subtle-hovered":
"var(--nds-semantic-color-surface-button-subtle-hovered)",
gray: {
"300-transparent": withOpacityValue("--color-gray-300-transparent")(
0.5
),
"900-transparent":
"var(--nds-semantic-color-bg-gray-900-transparent)",
},
"semi-transparent": withOpacityValue("--color-white-transparent")(0.5),
skin: {
primary: withOpacityValue("--color-fill-primary"),
"primary-muted": withOpacityValue("--color-fill-primary-muted"),
secondary: withOpacityValue("--color-fill-secondary"),
"secondary-muted": withOpacityValue("--color-fill-secondary-muted"),
subtle: withOpacityValue("--color-fill-subtle"),
"subtle-muted": withOpacityValue("--color-fill-subtle-muted"),
transparent: withOpacityValue("--color-fill-transparent"),
"transparent-muted": withOpacityValue(
"--color-fill-transparent-muted"
),
inverted: withOpacityValue("--color-fill-inverted"),
"inverted-muted": withOpacityValue("--color-fill-inverted-muted"),
},
},
backgroundImage: {
"black-gray-logo": 'url("/src/assets/LogoTransparent.svg")',
},
},
},
}