-
Notifications
You must be signed in to change notification settings - Fork 1
/
tailwind.config.js
140 lines (139 loc) · 3.57 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
/** @type {import("tailwindcss").Config} */
const plugin = require("tailwindcss");
module.exports = {
content: ["./src/**/*.tsx"],
theme: {
colors: {
blue: {
DEFAULT: "var(--colour-blue)",
dark: "var(--colour-blue-dark)",
light: "var(--colour-blue-light)",
soft: "var(--colour-blue-soft)"
},
green: {
DEFAULT: "var(--colour-green)",
dark: "var(--colour-green-dark)",
light: "var(--colour-green-light)",
soft: "var(--colour-green-soft)"
},
orange: {
DEFAULT: "var(--colour-orange)",
dark: "var(--colour-orange-dark)",
light: "var(--colour-orange-light)",
soft: "var(--colour-orange-soft)"
},
red: {
DEFAULT: "var(--colour-red)",
dark: "var(--colour-red-dark)",
light: "var(--colour-red-light)",
soft: "var(--colour-red-soft)"
},
cyan: {
DEFAULT: "var(--colour-cyan)",
dark: "var(--colour-cyan-dark)",
light: "var(--colour-cyan-light)",
soft: "var(--colour-cyan-soft)"
},
silver: {
DEFAULT: "var(--colour-silver)",
dark: "var(--colour-silver-dark)",
light: "var(--colour-silver-light)"
},
grey: {
"75": "var(--colour-grey-75)",
"100": "var(--colour-grey-100)",
"200": "var(--colour-grey-200)",
"300": "var(--colour-grey-300)",
"400": "var(--colour-grey-400)",
"500": "var(--colour-grey-500)",
"600": "var(--colour-grey-600)",
"700": "var(--colour-grey-700)",
"800": "var(--colour-grey-800)",
"900": "var(--colour-grey-900)"
},
black: "#000000",
txt: {
DEFAULT: "var(--colour-text)",
muted: "var(--colour-text-muted)",
white: "var(--colour-text-white)"
},
bg: {
light: {
DEFAULT: "var(--colour-surface-light)",
transparant: "#ffffff77",
secondary: "var(--colour-surface-light-secondary)"
},
dark: {
DEFAULT: "var(--colour-surface-dark)",
transparant: "#10122577",
secondary: "var(--colour-surface-dark-secondary)"
}
}
},
fontSize: {
"2xl": "18px",
xl: "16px",
l: "14px",
md: "12px",
sm: "10px",
s: "8px"
},
fontWeight: {
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700
},
borderRadius: {
0: "0px",
50: "4px",
100: "8px",
200: "16px",
300: "24px",
400: "32px",
full: "999px"
},
extend: {
maxHeight: {
"10vh": "10vh",
"20vh": "20vh",
"30vh": "30vh",
"40vh": "40vh",
"50vh": "50vh",
"60vh": "60vh",
"70vh": "70vh",
"80vh": "80vh",
"90vh": "90vh"
},
maxWidth: {
"10vw": "10vw",
"20vw": "20vw",
"30vw": "30vw",
"40vw": "40vw",
"50vw": "50vw",
"60vw": "60vw",
"70vw": "70vw",
"80vw": "80vw",
"90vw": "90vw"
},
}
},
plugins: [
plugin(({ addVariant, e, postcss }) => {
addVariant("firefox", ({ container, separator }) => {
const isFirefoxRule = postcss.atRule({
name: "-moz-document",
params: "url-prefix()"
});
isFirefoxRule.append(container.nodes);
container.append(isFirefoxRule);
isFirefoxRule.walkRules((rule) => {
rule.selector = `.${e(
`firefox${separator}${rule.selector.slice(1)}`
)}`;
});
});
})
]
};