-
Notifications
You must be signed in to change notification settings - Fork 30
/
tailwind.config.js
92 lines (88 loc) · 2.44 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
const defaultTheme = require("tailwindcss/defaultTheme");
// NOTE: copied from:
// https://github.com/getAlby/lightning-browser-extension/blob/1bab35feb58859d0786a9c2807a038395dd87fca/tailwind.config.js#L4-L21
function lighten(color, percent) {
var num = parseInt(color.replace("#", ""), 16),
amt = Math.round(2.55 * percent),
R = (num >> 16) + amt,
B = ((num >> 8) & 0x00ff) + amt,
G = (num & 0x0000ff) + amt;
return (
"#" +
(
0x1000000 +
(R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
(B < 255 ? (B < 1 ? 0 : B) : 255) * 0x100 +
(G < 255 ? (G < 1 ? 0 : G) : 255)
)
.toString(16)
.slice(1)
);
}
const surfaceColor = "#121212";
module.exports = {
content: [
"./views/**/*"
],
theme: {
extend: {
fontFamily: {
mono: defaultTheme.fontFamily.mono,
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
},
colors: {
"alby-grey": "#272828",
"alby-yellow": "#FFDE6E",
"alby-yellow-light": "#FDF0D5",
bitcoin: "#F7931A",
"cold-grey": "#C5C7C8",
light: "#F4F4F4",
primary: "#F8C455",
"warm-grey": "#D2D2D1",
// Material Design Surface Colors
"surface-00dp": surfaceColor,
"surface-01dp": lighten(surfaceColor, 5),
"surface-02dp": lighten(surfaceColor, 7),
"surface-03dp": lighten(surfaceColor, 8),
"surface-04dp": lighten(surfaceColor, 9),
"surface-06dp": lighten(surfaceColor, 11),
"surface-08dp": lighten(surfaceColor, 12),
"surface-12dp": lighten(surfaceColor, 14),
"surface-16dp": lighten(surfaceColor, 15),
"surface-24dp": lighten(surfaceColor, 16),
},
borderRadius: {
"4xl": "1.25rem",
30: "30px",
},
animation: {
wiggle: "wiggle 0.3s ease-in-out",
},
keyframes: {
wiggle: {
"0%, 100%": { transform: "scale(1.0)" },
"50%": { transform: "scale(1.03)" },
},
},
blur: {
xs: "2px",
},
},
fontFamily: {
headline: [
'"Work Sans"',
'"Inter var"',
"Helvetica",
"Arial",
"sans-serif",
],
// required for Chrome, where e.g. ❤️ in Inter is displayed as a black heart :(
emoji: ["sans-serif"],
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/typography"),
],
};