-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
115 lines (110 loc) · 3.91 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
const colors = require("tailwindcss/colors");
const { fontFamily } = require("tailwindcss/defaultTheme");
const { getThemeReplacementsValues } = require("./utils/convert");
const themeReplacementsValues = getThemeReplacementsValues("global.css");
let customColors = {
transparent: "transparent",
"semi-10": "hsla(0, 0%, 0%, 0.1)",
"semi-20": "hsla(0, 0%, 0%, 0.2)",
"semi-25": "hsla(0, 0%, 0%, 0.25)",
"semi-30": "hsla(0, 0%, 0%, 0.3)",
"semi-40": "hsla(0, 0%, 0%, 0.4)",
"semi-50": "hsla(0, 0%, 0%, 0.5)",
"semi-60": "hsla(0, 0%, 0%, 0.6)",
"semi-70": "hsla(0, 0%, 0%, 0.7)",
"semi-75": "hsla(0, 0%, 0%, 0.75)",
"semi-80": "hsla(0, 0%, 0%, 0.8)",
"semi-90": "hsla(0, 0%, 0%, 0.9)",
white: "hsl(0, 0%, 100%)",
grey: "hsl(0, 0%, 50%)",
black: "hsl(0, 0%, 0%)",
l1: "hsl(0, 0%, 90%)",
l2: "hsl(0, 0%, 80%)",
l3: "hsl(0, 0%, 70%)",
l4: "hsl(0, 0%, 60%)",
l5: "hsl(0, 0%, 50%)",
l6: "hsl(0, 0%, 40%)",
l7: "hsl(0, 0%, 30%)",
l8: "hsl(0, 0%, 20%)",
l9: "hsl(0, 0%, 10%)",
manoj: "var(--primary-color)",
};
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
"./pages/**/*.{html,js,ts,jsx,tsx}",
"./components/**/*.{html,js,ts,jsx,tsx}",
`src/**/*.{html,js,ts,jsx,tsx}`,
// include packages if not transpiling
"../../packages/**/*.{html,js,ts,jsx,tsx}",
"../../packages/wmx-ui/**/*.{html,js,ts,jsx,tsx}",
],
darkMode: ["class", ".theme-dark"],
theme: {
extend: {
screens: {
mobile: "375px",
tablet: "765px",
},
colors: customColors,
fontSize: {
"xs-regular": ["0.75rem", { lineHeight: "14.52px", fontWeight: "400" }],
"xs-bold": ["0.75rem", { lineHeight: "14.52px", fontWeight: "700" }],
"sm-regular": [
"0.875rem",
{ lineHeight: "16.94px", fontWeight: "400" },
],
"sm-bold": ["0.875rem", { lineHeight: "16.94px", fontWeight: "700" }],
"base-regular": ["1rem", { lineHeight: "19.36px", fontWeight: "400" }],
"base-medium": ["1rem", { lineHeight: "19.36px", fontWeight: "500" }],
"base-bold": ["1rem", { lineHeight: "19.36px", fontWeight: "700" }],
"lg-regular": ["1.25rem", { lineHeight: "24.2px", fontWeight: "400" }],
"lg-medium": ["1.25rem", { lineHeight: "24.2px", fontWeight: "500" }],
"lg-bold": ["1.25rem", { lineHeight: "24.2px", fontWeight: "700" }],
"xl-regular": ["1.5rem", { lineHeight: "29.05px", fontWeight: "400" }],
"xl-bold": ["1.5rem", { lineHeight: "29.05px", fontWeight: "700" }],
"2xl-regular": ["2rem", { lineHeight: "38.73px", fontWeight: "400" }],
"2xl-bold": ["2rem", { lineHeight: "38.73px", fontWeight: "700" }],
},
fontWeights: {
hairline: 100,
thin: 200,
light: 300,
book: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
fontFamily: {
inter: ["Inter"],
borel: ["Borel", ...fontFamily.sans],
},
boxShadow: {
md: "0px 4px 4px rgba(0, 0, 0, 0.1)",
1: "0px 2px 4px 0px rgba(0, 0, 0, 0.25)",
2: "0px 4px 8px 0px rgba(0, 0, 0, 0.20)",
3: "0px 8px 16px 0px rgba(0, 0, 0, 0.15)",
4: "0px 16px 24px 0px rgba(0, 0, 0, 0.10)",
},
dropShadow: {
md: "0px 4px 4px rgba(0, 0, 0, 0.1)",
},
width: {
sidebar: "272px",
},
// Viewer Config
configViewer: {
typographyExample:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
fonts: [
"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap",
"https://fonts.googleapis.com/css2?family=Borel&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap",
],
themeReplacements: themeReplacementsValues,
},
},
},
};