-
Notifications
You must be signed in to change notification settings - Fork 17
/
tailwind.config.js
162 lines (156 loc) · 6.96 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
/** @type {import("tailwindcss").Config} */
const colors = require('tailwindcss/colors');
const plugin = require('tailwindcss/plugin');
module.exports = {
content: ['./src/renderer/index.html', './src/renderer/src/**/*.{js,jsx,ts,tsx,ejs}'],
darkMode: 'selector',
theme: {
screens: {
// '3xl': { max: '2000px' },
// // => @media (max-width: 2000px) { ... }
// '2xl': { max: '1535px' },
// // => @media (max-width: 1535px) { ... }
xl: { max: '1279px' },
// => @media (max-width: 1279px) { ... }
lg: { max: '1023px' },
// => @media (max-width: 1023px) { ... }
md: { max: '900px' },
// => @media (max-width: 850px) { ... }
sm: { max: '800px' }
// => @media (max-width: 639px) { ... }
},
extend: {
colors: {
'background-color-1': 'hsl(var(--background-color-1) / <alpha-value>)',
'background-color-2': 'hsl(var(--background-color-2) / <alpha-value>)',
'background-color-3': 'hsl(var(--background-color-3) / <alpha-value>)',
'background-color-dimmed': 'hsl(var(--background-color-dimmed) / <alpha-value>)',
'side-bar-background': 'hsl(var(--side-bar-background) / <alpha-value>)',
'song-background-color': 'var(--background-color-1)', // not
'font-color': 'hsl(var(--text-color) / <alpha-value>)',
'font-color-dimmed': 'hsl(var(--text-color-dimmed) / <alpha-value>)',
'font-color-black': 'hsl(var(--text-color-black) / <alpha-value>)',
'font-color-white': 'hsl(var(--text-color-white) / <alpha-value>)',
'font-color-highlight': 'hsl(var(--text-color-highlight) / <alpha-value>)',
'font-color-crimson': 'hsl(var(--text-color-crimson) / <alpha-value>)',
'seekbar-background-color': 'hsl(var(--seekbar-background-color) / <alpha-value>)',
'seekbar-track-background-color':
'hsl(var(--seekbar-track-background-color) / <alpha-value>)',
'dark-font-color-highlight': 'hsl(var(--dark-text-color-highlight) / <alpha-value>)',
'font-color-highlight-2': 'hsl(var(--text-color-highlight-2) / <alpha-value>)',
'dark-font-color-highlight-2': 'hsl(var(--dark-text-color-highlight-2) / <alpha-value>)',
'context-menu-background': 'hsl(var(--context-menu-background) / <alpha-value>)',
'context-menu-list-hover': 'hsl(var(--context-menu-list-hover) / <alpha-value>)',
'foreground-color-1': 'hsl(var(--foreground-color-1) / <alpha-value>)',
'dark-background-color-1': 'hsl(var(--dark-background-color-1) / <alpha-value>)',
'dark-background-color-2': 'hsl(var(--dark-background-color-2) / <alpha-value>)',
'dark-background-color-3': 'hsl(var(--dark-background-color-3) / <alpha-value>)',
'dark-song-background-color': 'hsl(var(--background-color-2) / <alpha-value>)',
'dark-seekbar-background-color':
'hsl(var(--dark-seekbar-background-color) / <alpha-value>)',
'dark-seekbar-track-background-color':
'hsl(var(--dark-seekbar-track-background-color) / <alpha-value>)',
'dark-side-bar-background': 'hsl(var(--dark-side-bar-background) / <alpha-value>)',
'dark-font-color': 'hsl(var(--dark-text-color) / <alpha-value>)',
'dark-font-color-dimmed': 'hsl(var(--dark-text-color-dimmed) / <alpha-value>)',
'dark-font-color-variant': 'hsl(var(--dark-text-color-variant) / <alpha-value>)',
'dark-context-menu-background': 'hsl(var(--dark-context-menu-background) / <alpha-value>)',
'dark-context-menu-list-hover': 'hsl(var(--dark-context-menu-list-hover) / <alpha-value>)',
// 'background-color-1': 'hsl(0, 0%, 100%)',
// 'background-color-2': 'hsl(212, 48%, 94%)',
// 'background-color-3': 'hsl(213, 80%, 88%)',
// 'background-color-dimmed': 'hsla(0,0%,80%,50%)',
// 'side-bar-background': 'hsl(212, 50%, 94%)',
// 'song-background-color': 'var(background-color-1)',
// 'font-color': 'hsl(0,0%,0%)',
// 'font-color-dimmed': 'hsl(0,0%,50%)',
// 'font-color-black': 'hsl(0,0%,0%)',
// 'font-color-white': 'hsl(0,0%,100%)',
// 'font-color-highlight': 'hsl(203,39%,44%)',
// 'font-color-crimson': 'hsl(348, 83%, 47%)',
// 'seekbar-background-color': 'hsla(210, 17%, 58%, 1)',
// 'dark-font-color-highlight': 'hsl(213, 80%, 88%)',
// 'font-color-highlight-2': 'hsl(247,74%,63%)',
// 'dark-font-color-highlight-2': 'hsl(244,98%,80%)',
// 'context-menu-background': ' hsla(0, 0%, 100%, 90%)',
// 'context-menu-list-hover': ' hsl(198, 18%, 89%)',
// 'foreground-color-1': 'hsl(247,74%,65%)',
// 'dark-background-color-1': 'hsla(228, 7%, 14%, 100%)',
// 'dark-background-color-2': 'hsla(225, 8%, 20%, 100%)',
// 'dark-background-color-3': 'hsla(213, 80%, 88%, 100%)',
// 'dark-song-background-color': "var('background-color-2')",
// 'dark-seekbar-background-color': 'hsla(210, 17%, 58%, 1)',
// 'dark-side-bar-background': 'hsla(228, 7%, 20%, 100%)',
// 'dark-font-color:': 'hsl(0, 0%, 100%)',
// 'dark-font-color-dimmed': 'hsl(0,0%,40%)',
// 'dark-font-color-variant': 'hsl(0, 0%, 0%)',
// 'dark-context-menu-background': 'hsla(228, 7%, 16%, 90%)',
// 'dark-context-menu-list-hover': 'hsl(224, 8%, 28%)',
sky: colors.sky,
cyan: colors.cyan
},
animation: {
'spin-ease': 'spin 1000ms ease-in-out infinite',
'dialog-appear-ease-in-out': 'dialogAppear 100ms ease-out',
'dialog-dissappear-ease-in-out': 'dialogDisappear 100ms ease-in'
},
boxShadow: {
'inner-sm': 'inset 0 1px 2px 0 rgb(0 0 0 / 0.05)',
'inner-md': 'inset 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
'inner-lg': 'inset 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
'inner-xl': 'inset 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'inner-2xl': 'inset 0 25px 50px -12px rgb(0 0 0 / 0.25)'
}
}
},
plugins: [
plugin(({ matchVariant }) => {
matchVariant(
'nth',
(value) => {
return `&:nth-child(${value})`;
},
{
values: {
1: '1',
2: '2',
3: '3'
}
}
);
}),
plugin(({ matchVariant }) => {
matchVariant(
'nth-last',
(value) => {
return `&:nth-last-child(${value})`;
},
{
values: {
1: '1',
2: '2',
3: '3'
}
}
);
}),
plugin(({ matchUtilities, theme }) => {
matchUtilities(
{
'animate-duration': (value) => ({
animationDuration: value
})
},
{ values: theme('transitionDuration') }
);
matchUtilities(
{
'animate-delay': (value) => ({
animationDelay: value
})
},
{ values: theme('transitionDelay') }
);
})
]
};