forked from anderm18/HassPathwaysV2.0
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathtailwind.config.js
More file actions
371 lines (371 loc) · 15.5 KB
/
tailwind.config.js
File metadata and controls
371 lines (371 loc) · 15.5 KB
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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
darkMode: ["class"],
theme: {
extend: {
screens: {
fold: '300px',
sm: '400px',
md: '768px',
ipad: '1080px',
lg: '1200px',
xl: '1280px',
'2xl': '1400px',
'1.5xl': '1500px',
'1.75xl': '1700px',
'2.5xl': '1900px',
'3xl': '2500px',
'4xl': '3000px'
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
}
},
fontSize: {
'display-2xl': ["4.5rem", { lineHeight: "5.625rem", tracking: "-2%" }],
'display-xl': ["3.75rem", { lineHeight: "4.5rem", tracking: "-2%" }],
'display-lg': ["3rem", { lineHeight: "3.75rem", tracking: "-2%" }],
'display-md': ["2.25rem", { lineHeight: "2.75rem", tracking: "-2%" }],
'display-sm': ["1.875rem", { lineHeight: "2.375rem" }],
'display-xs': ["1.5rem", { lineHeight: "2rem" }],
xl: ["1.25rem", { lineHeight: "1.875rem" }],
lg: ["1.125rem", { lineHeight: "1.75rem" }],
md: ["1rem", { lineHeight: "1.5rem" }],
sm: ["0.875rem", { lineHeight: "1.25rem" }],
xs: ["0.75rem", { lineHeight: "1.125rem" }]
},
colors: {
text: {
primary: 'rgba(var(--text-primary), <alpha-value>)',
'primary_on-brand': 'rgba(var(--text-primary_on-brand), <alpha-value>)',
secondary: 'rgba(var(--text-secondary), <alpha-value>)',
secondary_hover: 'rgba(var(--text-secondary_hover), <alpha-value>)',
'secondary_on-brand': 'rgba(var(--text-secondary_on-brand), <alpha-value>)',
tertiary: 'rgba(var(--text-tertiary), <alpha-value>)',
tertiary_hover: 'rgba(var(--text-tertiary_hover), <alpha-value>)',
'tertiary_on-brand': 'rgba(var(--text-tertiary_on-brand), <alpha-value>)',
quaternary: 'rgba(var(--text-quaternary), <alpha-value>)',
'quaternary_on-brand': 'rgba(var(--text-quaternary_on-brand), <alpha-value>)',
disabled: 'rgba(var(--text-disabled), <alpha-value>)',
placeholder: 'rgba(var(--text-placeholder), <alpha-value>)',
placeholder_subtle: 'rgba(var(--text-placeholder_subtle), <alpha-value>)',
brand: {
primary: 'rgba(var(--text-brand-primary), <alpha-value>)',
secondary: 'rgba(var(--text-brand-secondary), <alpha-value>)',
tertiary: 'rgba(var(--text-brand-tertiary), <alpha-value>)',
tertiary_alt: 'rgba(var(--text-brand-tertiary_alt), <alpha-value>)'
},
success: 'rgba(var(--text-success-primary), <alpha-value>)',
warning: 'rgba(var(--text-warning-primary), <alpha-value>)',
error: 'rgba(var(--text-error-primary), <alpha-value>)',
white: 'rgba(var(--text-white), <alpha-value>)'
},
border: {
primary: 'rgba(var(--border-primary), <alpha-value>)',
secondary: 'rgba(var(--border-secondary), <alpha-value>)',
tertiary: 'rgba(var(--border-tertiary), <alpha-value>)',
disabled: 'rgba(var(--border-disabled), <alpha-value>)',
brand: {
solid: 'rgba(var(--border-brand-solid), <alpha-value>)',
solid_alt: 'rgba(var(--border-brand-solid_alt), <alpha-value>)',
brand: 'rgba(var(--border-brand), <alpha-value>)'
},
error: 'rgba(var(--border-error), <alpha-value>)',
icon: {
modern: 'rgba(var(--icon-modern-border), <alpha-value>)'
}
},
bg: {
primary: 'rgba(var(--bg-primary), <alpha-value>)',
'primary-solid': 'rgba(var(--bg-primary-solid), <alpha-value>)',
primary_hover: 'rgba(var(--bg-primary_hover), <alpha-value>)',
secondary: 'rgba(var(--bg-secondary), <alpha-value>)',
secondary_hover: 'rgba(var(--bg-secondary_hover), <alpha-value>)',
tertiary: 'rgba(var(--bg-tertiary), <alpha-value>)',
error: {
primary: 'rgba(var(--bg-error-primary), <alpha-value>)',
secondary: 'rgba(var(--bg-error-secondary), <alpha-value>)',
solid: 'rgba(var(--bg-error-solid), <alpha-value>)'
},
success: {
primary: 'rgba(var(--bg-success-primary), <alpha-value>)',
secondary: 'rgba(var(--bg-success-secondary), <alpha-value>)',
solid: 'rgba(var(--bg-success-solid), <alpha-value>)'
},
warning: {
primary: 'rgba(var(--bg-warning-primary), <alpha-value>)',
secondary: 'rgba(var(--bg-warning-secondary), <alpha-value>)',
solid: 'rgba(var(--bg-warning-solid), <alpha-value>)'
},
brand: {
secondary: 'rgba(var(--bg-brand-secondary), <alpha-value>)'
}
},
fg: {
brand: {
primary: 'rgba(var(--fg-brand-primary), <alpha-value>)',
primary_alt: 'rgba(var( --fg-brand-primary_alt), <alpha-value>)',
secondary: 'rgba(var( --fg-brand-secondary), <alpha-value>)'
},
disabled: 'rgba(var( --fg-disabled), <alpha-value>)',
disabled_subtle: 'rgba(var( --fg-disabled_subtle), <alpha-value>)',
error: {
primary: 'rgba(var( --fg-error-primary), <alpha-value>)',
secondary: 'rgba(var( --fg-error-secondary), <alpha-value>)'
},
primary: 'rgba(var( --fg-primary), <alpha-value>)',
quaternary: 'rgba(var( --fg-quaternary), <alpha-value>)',
quaternary_hover: 'rgba(var( --fg-quaternary_hover), <alpha-value>)',
quinary: 'rgba(var( --fg-quinary), <alpha-value>)',
quinary_hover: 'rgba(var( --fg-quinary_hover), <alpha-value>)',
secondary: 'rgba(var( --fg-secondary), <alpha-value>)',
secondary_hover: 'rgba(var( --fg-secondary_hover), <alpha-value>)',
senary: 'rgba(var( --fg-senary), <alpha-value>)',
success: {
primary: 'rgba(var( --fg-success-primary), <alpha-value>)',
secondary: 'rgba(var( --fg-success-secondary), <alpha-value>)'
},
tertiary: 'rgba(var( --fg-tertiary), <alpha-value>)',
tertiary_hover: 'rgba(var( --fg-tertiary_hover), <alpha-value>)',
warning: {
primary: 'rgba(var( --fg-warning-primary), <alpha-value>)',
secondary: 'rgba(var( --fg-warning-secondary), <alpha-value>)'
},
white: 'rgba(var( --fg-white), <alpha-value>)'
},
nav: {
item: {
button: {
icon: {
fg: 'rgba(var(--nav-item-button-icon-fg), <alpha-value>)',
fg_active: 'rgba(var(--nav-item-button-icon-fg_active), <alpha-value>)'
}
},
icon: {
fg: 'rgba(var(--nav-item-icon-fg), <alpha-value>)',
fg_active: 'rgba(var(--nav-item-icon-fg_active), <alpha-value>)'
}
}
},
button: {
primary: {
bg: 'rgba(var(--button-primary-bg), <alpha-value>)',
bg_hover: 'rgba(var(--button-primary-bg_hover), <alpha-value>)',
border: 'rgba(var(--button-primary-border), <alpha-value>)',
border_hover: 'rgba(var(--button-primary-border_hover), <alpha-value>)',
fg: 'rgba(var(--button-primary-fg), <alpha-value>)',
fg_hover: 'rgba(var(--button-primary-fg_hover), <alpha-value>)',
error: {
bg: 'rgba(var(--button-primary-error-bg), <alpha-value>)',
bg_hover: 'rgba(var(--button-primary-error-bg_hover), <alpha-value>)',
border: 'rgba(var(--button-primary-error-border), <alpha-value>)',
border_hover: 'rgba(var(--button-primary-error-border_hover), <alpha-value>)',
fg: 'rgba(var(--button-primary-error-fg), <alpha-value>)',
fg_hover: 'rgba(var(--button-primary-error-fg_hover), <alpha-value>)'
}
},
secondary: {
bg: 'rgba(var(--button-secondary-bg), <alpha-value>)',
bg_hover: 'rgba(var(--button-secondary-bg_hover), <alpha-value>)',
border: 'rgba(var(--button-secondary-border), <alpha-value>)',
border_hover: 'rgba(var(--button-secondary-border_hover), <alpha-value>)',
fg: 'rgba(var(--button-secondary-fg), <alpha-value>)',
fg_hover: 'rgba(var(--button-secondary-fg_hover), <alpha-value>)',
color: {
bg: 'rgba(var(--button-secondary-color-bg), <alpha-value>)',
bg_hover: 'rgba(var(--button-secondary-color-bg_hover), <alpha-value>)',
border: 'rgba(var(--button-secondary-color-border), <alpha-value>)',
border_hover: 'rgba(var(--button-secondary-color-border_hover), <alpha-value>)',
fg: 'rgba(var(--button-secondary-color-fg), <alpha-value>)',
fg_hover: 'rgba(var(--button-secondary-color-fg_hover), <alpha-value>)'
},
error: {
bg: 'rgba(var(--button-secondary-error-bg), <alpha-value>)',
bg_hover: 'rgba(var(--button-secondary-error-bg_hover), <alpha-value>)',
border: 'rgba(var(--button-secondary-error-border), <alpha-value>)',
border_hover: 'rgba(var(--button-secondary-error-border_hover), <alpha-value>)',
fg: 'rgba(var(--button-secondary-error-fg), <alpha-value>)',
fg_hover: 'rgba(var(--button-secondary-error-fg_hover), <alpha-value>)'
}
},
tertiary: {
bg_hover: 'rgba(var(--button-tertiary-bg_hover), <alpha-value>)',
fg: 'rgba(var(--button-tertiary-fg), <alpha-value>)',
fg_hover: 'rgba(var(--button-tertiary-fg_hover), <alpha-value>)',
color: {
bg_hover: 'rgba(var(--button-tertiary-color-bg_hover), <alpha-value>)',
fg: 'rgba(var(--button-tertiary-color-fg), <alpha-value>)',
fg_hover: 'rgba(var(--button-tertiary-color-fg_hover), <alpha-value>)'
},
error: {
bg_hover: 'rgba(var(--button-tertiary-error-bg_hover), <alpha-value>)',
fg: 'rgba(var(--button-tertiary-error-fg), <alpha-value>)',
fg_hover: 'rgba(var(--button-tertiary-error-fg_hover), <alpha-value>)'
}
}
},
footer: {
badge: {
bg: 'rgba(var(--footer-badge-bg), <alpha-value>)',
border: 'rgba(var(--footer-badge-border), <alpha-value>)',
fg: 'rgba(var(--footer-badge-fg), <alpha-value>)'
},
button: {
fg: 'rgba(var(--footer-button-fg), <alpha-value>)',
fg_hover: 'rgba(var(--footer-button-fg_hover), <alpha-value>)'
}
},
header: {
abstract: {
'100': {
bg: 'rgba(var(--header-abstract-100-bg), <alpha-value>)'
},
'200': {
bg: 'rgba(var(--header-abstract-200-bg), <alpha-value>)'
},
'300': {
bg: 'rgba(var(--header-abstract-300-bg), <alpha-value>)'
},
'50': {
bg: 'rgba(var(--header-abstract-50-bg), <alpha-value>)'
}
}
},
utility: {
brand: {
'100': 'rgba(var(--utility-brand-100), <alpha-value>)',
'100_alt': 'rgba(var(--utility-brand-100_alt), <alpha-value>)',
'50': 'rgba(var(--utility-brand-50), <alpha-value>)',
'200': 'rgba(var(--utility-brand-200), <alpha-value>)',
'200_alt': 'rgba(var(--utility-brand-200_alt), <alpha-value>)',
'300': 'rgba(var(--utility-brand-300), <alpha-value>)',
'300_alt': 'rgba(var(--utility-brand-300_alt), <alpha-value>)',
'400': 'rgba(var(--utility-brand-400), <alpha-value>)',
'400_alt': 'rgba(var(--utility-brand-400_alt), <alpha-value>)',
'500': 'rgba(var(--utility-brand-500), <alpha-value>)',
'500_alt': 'rgba(var(--utility-brand-500_alt), <alpha-value>)',
'50_alt': 'rgba(var(--utility-brand-50_alt), <alpha-value>)',
'600': 'rgba(var(--utility-brand-600), <alpha-value>)',
'600_alt': 'rgba(var(--utility-brand-600_alt), <alpha-value>)',
'700': 'rgba(var(--utility-brand-700), <alpha-value>)',
'700_alt': 'rgba(var(--utility-brand-700_alt), <alpha-value>)',
'800': 'rgba(var(--utility-brand-800), <alpha-value>)',
'800_alt': 'rgba(var(--utility-brand-800_alt), <alpha-value>)',
'900': 'rgba(var(--utility-brand-900), <alpha-value>)',
'900_alt': 'rgba(var(--utility-brand-900_alt), <alpha-value>)'
},
error: {
'50': 'rgba(var(--utility-error-50), <alpha-value>)',
'100': 'rgba(var(--utility-error-100), <alpha-value>)',
'200': 'rgba(var(--utility-error-200), <alpha-value>)',
'300': 'rgba(var(--utility-error-300), <alpha-value>)',
'400': 'rgba(var(--utility-error-400), <alpha-value>)',
'500': 'rgba(var(--utility-error-500), <alpha-value>)',
'600': 'rgba(var(--utility-error-600), <alpha-value>)',
'700': 'rgba(var(--utility-error-700), <alpha-value>)'
},
gray: {
'50': 'rgba(var(--utility-gray-50), <alpha-value>)',
'100': 'rgba(var(--utility-gray-100), <alpha-value>)',
'200': 'rgba(var(--utility-gray-200), <alpha-value>)',
'300': 'rgba(var(--utility-gray-300), <alpha-value>)',
'400': 'rgba(var(--utility-gray-400), <alpha-value>)',
'500': 'rgba(var(--utility-gray-500), <alpha-value>)',
'600': 'rgba(var(--utility-gray-600), <alpha-value>)',
'700': 'rgba(var(--utility-gray-700), <alpha-value>)',
'800': 'rgba(var(--utility-gray-800), <alpha-value>)',
'900': 'rgba(var(--utility-gray-900), <alpha-value>)'
},
success: {
'50': 'rgba(var(--utility-success-50), <alpha-value>)',
'100': 'rgba(var(--utility-success-100), <alpha-value>)',
'200': 'rgba(var(--utility-success-200), <alpha-value>)',
'300': 'rgba(var(--utility-success-300), <alpha-value>)',
'400': 'rgba(var(--utility-success-400), <alpha-value>)',
'500': 'rgba(var(--utility-success-500), <alpha-value>)',
'600': 'rgba(var(--utility-success-600), <alpha-value>)',
'700': 'rgba(var(--utility-success-700), <alpha-value>)'
},
warning: {
'50': 'rgba(var(--utility-warning-50), <alpha-value>)',
'100': 'rgba(var(--utility-warning-100), <alpha-value>)',
'200': 'rgba(var(--utility-warning-200), <alpha-value>)',
'300': 'rgba(var(--utility-warning-300), <alpha-value>)',
'400': 'rgba(var(--utility-warning-400), <alpha-value>)',
'500': 'rgba(var(--utility-warning-500), <alpha-value>)',
'600': 'rgba(var(--utility-warning-600), <alpha-value>)',
'700': 'rgba(var(--utility-warning-700), <alpha-value>)'
},
'blue-light': {
'50': 'rgba(var(--utility-blue-light-50), <alpha-value>)',
'100': 'rgba(var(--utility-blue-light-100), <alpha-value>)',
'200': 'rgba(var(--utility-blue-light-200), <alpha-value>)',
'300': 'rgba(var(--utility-blue-light-300), <alpha-value>)',
'400': 'rgba(var(--utility-blue-light-400), <alpha-value>)',
'500': 'rgba(var(--utility-blue-light-500), <alpha-value>)',
'600': 'rgba(var(--utility-blue-light-600), <alpha-value>)',
'700': 'rgba(var(--utility-blue-light-700), <alpha-value>)'
}
},
featured: {
icon: {
light: {
fg: {
brand: 'rgba(var(--featured-icon-light-fg-brand), <alpha-value>)'
}
}
}
}
}
},
plugins: [require("tailwindcss-animate")],
};