forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1const tailwindColors = require("tailwindcss/colors")
2
3
4// Colors
5// ------
6
7const colors = {
8 base00: "rgb(45, 45, 45)",
9 base01: "rgb(63, 63, 63)",
10 base02: "rgb(79, 79, 79)",
11 base03: "rgb(119, 119, 119)",
12 base04: "rgb(140, 140, 140)",
13 base05: "rgb(163, 163, 163)",
14 base06: "rgb(186, 186, 186)",
15 base07: "rgb(232, 232, 232)",
16 base08: "rgb(239, 97, 85)",
17 base09: "rgb(249, 155, 21)",
18 base0a: "rgb(254, 196, 24)",
19 base0b: "rgb(72, 182, 133)",
20 base0c: "rgb(91, 196, 191)",
21 base0d: "rgb(6, 182, 239)",
22 base0e: "rgb(129, 91, 164)",
23 base0f: "rgb(233, 107, 168)"
24}
25
26
27
28// Config
29// ------
30
31module.exports = {
32
33 theme: {
34
35 // Animations
36 // ----------
37
38 animations: {
39
40 "fadeIn": {
41 from: { opacity: "0" },
42 to: { opacity: "1" },
43 }
44
45 },
46
47 animationDelay: {
48 "50ms": "50ms"
49 },
50
51
52 // Fonts
53 // -----
54
55 fontFamily: {
56 body: '"Source Sans Pro", sans-serif',
57 display: '"Montserrat", Futura, "Trebuchet MS", Arial, sans-serif',
58 mono: 'Hack, Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace'
59 },
60
61
62 // Colors
63 // ------
64
65 colors: {
66 ...colors,
67
68 black: tailwindColors.black,
69 current: tailwindColors.current,
70 inherit: tailwindColors.inherit,
71 transparent: tailwindColors.transparent,
72 white: tailwindColors.white,
73
74 gray: tailwindColors.gray,
75 neutral: tailwindColors.neutral,
76
77 "accent-btn": "hsl(219, 20.2%, 38.8%)",
78 "accent-dark": "hsl(304.3, 9.6%, 71.4%)",
79 "accent-light": "hsl(228.4, 15.3%, 60.2%)",
80 "background": "rgb(2, 7, 14)",
81 "base01-15": "rgba(63, 63, 63, 0.15)",
82 "base01-55": "rgba(63, 63, 63, 0.55)",
83 "black-05": "rgba(0, 0, 0, 0.05)",
84 "black-35": "rgba(0, 0, 0, 0.35)",
85 "black-50": "rgba(0, 0, 0, 0.5)",
86 "current-color": "currentColor",
87 "white-025": "rgba(255, 255, 255, 0.025)",
88 "white-20": "rgba(255, 255, 255, 0.2)",
89 "white-60": "rgba(255, 255, 255, 0.6)",
90 "white-90": "rgba(255, 255, 255, 0.9)",
91
92 // Darkest hour
93
94 "darkest-hour": "hsl(0, 0%, 14%)",
95 "near-darkest-hour": "hsl(0, 0%, 15%)",
96
97 // Shades of gray
98
99 gray: {
100 "100": "hsl(0, 0%, 98.8%)",
101 "200": "hsl(0, 0%, 97.3%)",
102 "300": "hsl(0, 0%, 93.3%)",
103 "400": "hsl(0, 0%, 88.2%)",
104 "500": "hsl(0, 0%, 86.3%)",
105 "600": "hsl(0, 0%, 77.6%)"
106 }
107 },
108
109
110 // Extensions
111 // ----------
112
113 extend: {
114
115 boxShadow: {
116 "md-darker": "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.36)"
117 },
118
119 fontSize: {
120 "0": 0,
121 "almost-sm": "0.78125rem",
122 "nearly-sm": "0.8125rem",
123 "xxs": "0.6875rem",
124 },
125
126 letterSpacing: {
127 "tad-closer": "-0.015em",
128 "tad-further": "0.015em",
129 },
130
131 lineHeight: {
132 "0": 0
133 },
134
135 maxWidth : {
136 "insulation": "107.5vh",
137 "screen": "100vw"
138 },
139
140 minWidth: {
141 "3xl": "48rem",
142 "tiny": "13.125rem"
143 },
144
145 screens: {
146 "dark": { "raw": "(prefers-color-scheme: dark)" }
147 },
148
149 spacing: {
150 "1/2": "50%",
151 "1/3": "33.333333%",
152 "2/3": "66.666667%",
153 "1/4": "25%",
154 "2/4": "50%",
155 "3/4": "75%",
156 "1/5": "20%",
157 "2/5": "40%",
158 "3/5": "60%",
159 "4/5": "80%",
160 "1/6": "16.666667%",
161 "2/6": "33.333333%",
162 "3/6": "50%",
163 "4/6": "66.666667%",
164 "5/6": "83.333333%",
165 "1/7": "14.28571429%",
166 "1/8": "12.5%",
167 "1/10": "10%",
168 "1/12": "8.333333%",
169 "1/16": "6.25%",
170 "1/20": "5%",
171 "2/12": "16.666667%",
172 "3/12": "25%",
173 "4/12": "33.333333%",
174 "5/12": "41.666667%",
175 "6/12": "50%",
176 "7/12": "58.333333%",
177 "8/12": "66.666667%",
178 "9/12": "75%",
179 "10/12": "83.333333%",
180 "11/12": "91.666667%",
181 "-full": "-100%",
182 "full": "100%",
183 }
184
185 },
186
187
188 // Inset
189 // -----
190
191 inset: {
192 "0": 0,
193 "1/2": "50%",
194 "full": "100%",
195 "-px": "-1px"
196 },
197
198
199 // Opacity
200 // -------
201
202 opacity: {
203 "0": "0",
204 "025": ".025",
205 "05": ".05",
206 "10": ".1",
207 "20": ".2",
208 "25": ".25",
209 "30": ".3",
210 "40": ".4",
211 "50": ".5",
212 "60": ".6",
213 "70": ".7",
214 "75": ".75",
215 "80": ".8",
216 "90": ".9",
217 "95": ".95",
218 "100": "1"
219 },
220
221 },
222
223
224
225 // PLUGINS
226
227
228 plugins: [
229
230 require("tailwindcss-animations"),
231 require("tailwindcss-interaction-variants"),
232
233 // Add variant for `:focus:not(:active)`
234 function({ addVariant, e }) {
235 addVariant("inactive-focus", ({ modifySelectors, separator }) => {
236 modifySelectors(({ className }) => {
237 return `.${e(`fixate${separator}${className}`)}:focus:not(:active)`
238 })
239 })
240 }
241
242 ],
243
244
245
246 // VARIANTS
247
248
249 variants: {
250
251 backgroundColor: [ "focus", "hover", "inactive-focus", "responsive" ],
252 borderColor: [ "first", "focus", "hover", "inactive-focus", "last", "responsive" ],
253 borderWidth: [ "first", "last" ],
254 cursor: [ "first", "last" ],
255 margin: [ "first", "last", "responsive" ],
256 opacity: [ "focus", "hocus", "hover", "responsive" ],
257 padding: [ "first", "last", "responsive" ],
258 textColor: [ "focus", "focus-within", "hover", "inactive-focus", "responsive" ],
259
260 }
261
262}