-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
255 lines (245 loc) · 9.7 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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
module.exports = {
darkMode: "class",
content: ["./pages/**/*.js", "./components/**/*.js", "./lib/**/*.js"],
theme: {
container: {
center: true,
},
extend: {
aspectRatio: {
hd: "16 / 9",
cinema: "21 / 9",
ultra: "32 / 9",
},
backgroundImage: {
"excel-import": "url('/img/excel-file-origin.png')",
"excel-import-dark": "url('/img/excel-file-origin-dark.png')",
"help-banner": "url('/img/help-banner.jpg')",
"help-banner-dark": "url('/img/help-banner-dark.jpg')",
},
colors: {
background: "var(--color-background)",
brand: "var(--color-brand)",
"brand-accent": "var(--color-brand-accent)",
"nav-highlight": "var(--color-nav-highlight)",
"nav-border": "var(--color-nav-border)",
"title-border": "var(--color-title-border)",
"data-background": "var(--color-data-background)",
"data-border": "var(--color-data-border)",
highlight: "var(--color-highlight)",
"highlight-border": "var(--color-highlight-border)",
"modal-border": "var(--color-modal-border)",
// Data items on an object page
"data-title": "var(--color-data-title)",
"data-label": "var(--color-data-label)",
"data-value": "var(--color-data-value)",
},
backgroundColor: {
panel: "var(--color-panel-background)",
"form-element": "var(--color-form-element-background)",
"button-primary": "var(--color-button-primary-background)",
"button-secondary": "var(--color-button-secondary-background)",
"button-warning": "var(--color-button-warning-background)",
"button-selected": "var(--color-button-selected-background)",
"button-primary-disabled":
"var(--color-button-primary-background-disabled)",
"button-secondary-disabled":
"var(--color-button-secondary-background-disabled)",
"button-warning-disabled":
"var(--color-button-warning-background-disabled)",
"button-selected-disabled":
"var(--color-button-selected-background-disabled)",
"button-audit-open": "var(--color-button-audit-open-background)",
"button-audit-closed": "var(--color-button-audit-closed-background)",
"button-audit-level-detail": "var(--color-button-audit-level-detail)",
"audit-level-detail": "var(--color-audit-level-detail-background)",
"facet-group-button": "var(--color-facet-group-button-background)",
"facet-group-button-selected":
"var(--color-facet-group-button-selected-background)",
"facet-title": "var(--color-facet-title-background)",
"site-search-header": "var(--color-site-search-header-background)",
},
borderColor: {
panel: "var(--color-panel-border)",
"form-element": "var(--color-form-element-border)",
"form-element-disabled": "var(--color-form-element-border-disabled)",
"button-primary": "var(--color-button-primary-border)",
"button-secondary": "var(--color-button-secondary-border)",
"button-warning": "var(--color-button-warning-border)",
"button-selected": "var(--color-button-selected-border)",
"button-primary-disabled":
"var(--color-button-primary-border-disabled)",
"button-secondary-disabled":
"var(--color-button-secondary-border-disabled)",
"button-warning-disabled":
"var(--color-button-warning-border-disabled)",
"button-selected-disabled":
"var(--color-button-selected-border-disabled)",
"button-audit": "var(--color-button-audit-border)",
"facet-group-button": "var(--color-facet-group-button-border)",
"facet-group-button-selected":
"var(--color-facet-group-button-selected-border)",
"tab-group": "var(--color-tab-group-border)",
"tab-selected": "var(--color-tab-selected-border)",
"tab-unselected": "var(--color-tab-unselected-border)",
"tab-disabled": "var(--color-tab-disabled-border)",
"tab-hover": "var(--color-tab-hover-border)",
},
fontSize: {
xxs: "0.7rem",
},
textColor: {
"button-primary": "var(--color-button-primary-label)",
"button-secondary": "var(--color-button-secondary-label)",
"button-warning": "var(--color-button-warning-label)",
"button-primary-disabled": "var(--color-button-primary-label-disabled)",
"button-secondary-disabled":
"var(--color-button-secondary-label-disabled)",
"button-warning-disabled": "var(--color-button-warning-label-disabled)",
"button-selected-disabled":
"var(--color-button-selected-label-disabled)",
"form-element": "var(--color-form-element-label)",
"form-element-disabled": "var(--color-form-element-label-disabled)",
"button-facet-group": "var(--color-button-facet-group-text)",
"button-facet-group-selected":
"var(--color-button-facet-group-selected-text)",
"facet-title": "var(--color-facet-title-text)",
"tab-title-selected": "var(--color-tab-title-selected-text)",
"tab-title-unselected": "var(--color-tab-title-unselected-text)",
"tab-title-disabled": "var(--color-tab-title-disabled-text)",
"tab-title-hover": "var(--color-tab-title-hover-text)",
},
boxShadow: {
// Status badges
status: "0 0 0 1px #a0a0a0",
},
fill: {
"button-primary": "var(--color-button-primary-label)",
"button-secondary": "var(--color-button-secondary-label)",
"button-warning": "var(--color-button-warning-label)",
"button-selected": "var(--color-button-selected-label)",
"button-primary-disabled": "var(--color-button-primary-label-disabled)",
"button-secondary-disabled":
"var(--color-button-secondary-label-disabled)",
"button-warning-disabled": "var(--color-button-warning-label-disabled)",
"button-selected-disabled":
"var(--color-button-selected-label-disabled)",
"form-element": "var(--color-form-element-label)",
"form-element-disabled": "var(--color-form-element-label-disabled)",
// Document icon tag colors
"document-autosql": "var(--color-document-autosql)",
"document-html": "var(--color-document-html)",
"document-json": "var(--color-document-json)",
"document-pdf": "var(--color-document-pdf)",
"document-svs": "var(--color-document-svs)",
"document-txt": "var(--color-document-txt)",
"document-tiff": "var(--color-document-tiff)",
"document-tsv": "var(--color-document-tsv)",
},
gridTemplateColumns: {
"min-2": "repeat(2, minmax(0, min-content))",
"data-item": "fit-content(200px) 1fr",
},
stroke: {
"nav-collapse": "var(--color-nav-collapse)",
},
typography: {
DEFAULT: {
css: {
"max-width": "none",
h1: {
"font-weight": 600,
"margin-bottom": "1rem",
},
h2: {
"font-weight": 600,
"font-size": "1.7rem",
"margin-top": "2rem",
"margin-bottom": "1rem",
"&:first-child": {
"margin-top": "0",
},
},
h3: {
"font-weight": 600,
"font-size": "1.4rem",
"margin-top": "1.8rem",
"margin-bottom": "0.9rem",
},
h4: {
"font-weight": 600,
"font-size": "1.2rem",
"margin-top": "1.6rem",
"margin-bottom": "0.8rem",
},
h5: {
"font-weight": 500,
"font-size": "1.2rem",
"margin-top": "1.5rem",
"margin-bottom": "0.6rem",
},
h6: {
"font-weight": 500,
"font-size": "1rem",
"margin-top": "1.3rem",
"margin-bottom": "0.4rem",
},
p: {
"margin-top": "0.5rem",
"margin-bottom": "0.5rem",
"line-height": "1.375",
"&:first-child": {
"margin-top": "0.5rem",
},
"&:last-child": {
"margin-bottom": "0.5rem",
},
},
li: {
"margin-top": "0.4rem",
"margin-bottom": "0.4rem",
},
blockquote: {
"font-style": "normal",
"font-weight": "normal",
},
td: {
padding: "0.2rem 0.4rem",
"border-color": "var(--color-panel-border)",
"border-width": "1px",
"border-style": "solid",
},
th: {
padding: "0.2rem 0.4rem",
"border-color": "var(--color-panel-border)",
"border-width": "1px",
"border-style": "solid",
"background-color": "var(--color-data-header-background)",
},
pre: {
"background-color": "var(--color-code-background)",
color: "var(--color-code-text)",
},
code: {
"background-color": "var(--color-code-background)",
padding: "0.1rem 0.4rem",
"border-radius": "0.2rem",
"font-weight": "normal",
},
// Removes the backticks from code blocks
"code::before": {
content: '""',
},
"code::after": {
content: '""',
},
},
},
},
},
},
plugins: [
require("@tailwindcss/typography"),
require("@tailwindcss/container-queries"),
],
};