refactor: tailwind config

This commit is contained in:
Aaryan Khandelwal 2024-02-11 01:39:41 +05:30
parent dbab4807fa
commit 03bcb57aaa
2 changed files with 39 additions and 120 deletions

View File

@ -96,6 +96,37 @@ const generateSaturatedColorShades = (color) => ({
DEFAULT: `var(--color-${color}-90)`,
});
const SPACING_SCALE = {
0: "0",
0.5: "0.1125rem",
1: "0.225rem",
1.5: "0.3375rem",
2: "0.45rem",
2.5: "0.5625rem",
3: "0.675rem",
3.5: "0.7875rem",
4: "0.9rem",
5: "1.125rem",
6: "1.35rem",
7: "1.575rem",
8: "1.8rem",
9: "2.025rem",
10: "2.25rem",
11: "2.475rem",
12: "2.7rem",
16: "3.6rem",
20: "4.5rem",
24: "5.4rem",
32: "7.2rem",
40: "9rem",
48: "10.8rem",
56: "12.6rem",
64: "14.4rem",
72: "16.2rem",
80: "18rem",
96: "21.6rem",
};
/** @type {import('tailwindcss').Config} */
export const darkMode = "class";
export const content = {
@ -203,126 +234,10 @@ export const theme = {
"9xl": "7.2rem",
},
// scale down spacing to 90% of default
padding: {
0: "0",
0.5: "0.1125rem",
1: "0.225rem",
1.5: "0.3375rem",
2: "0.45rem",
2.5: "0.5625rem",
3: "0.675rem",
3.5: "0.7875rem",
4: "0.9rem",
5: "1.125rem",
6: "1.35rem",
7: "1.575rem",
8: "1.8rem",
9: "2.025rem",
10: "2.25rem",
11: "2.475rem",
12: "2.7rem",
16: "3.6rem",
20: "4.5rem",
24: "5.4rem",
32: "7.2rem",
40: "9rem",
48: "10.8rem",
56: "12.6rem",
64: "14.4rem",
72: "16.2rem",
80: "18rem",
96: "21.6rem",
},
margin: {
0: "0",
0.5: "0.1125rem",
1: "0.225rem",
1.5: "0.3375rem",
2: "0.45rem",
2.5: "0.5625rem",
3: "0.675rem",
3.5: "0.7875rem",
4: "0.9rem",
5: "1.125rem",
6: "1.35rem",
7: "1.575rem",
8: "1.8rem",
9: "2.025rem",
10: "2.25rem",
11: "2.475rem",
12: "2.7rem",
16: "3.6rem",
20: "4.5rem",
24: "5.4rem",
32: "7.2rem",
40: "9rem",
48: "10.8rem",
56: "12.6rem",
64: "14.4rem",
72: "16.2rem",
80: "18rem",
96: "21.6rem",
},
space: {
0: "0",
0.5: "0.1125rem",
1: "0.225rem",
1.5: "0.3375rem",
2: "0.45rem",
2.5: "0.5625rem",
3: "0.675rem",
3.5: "0.7875rem",
4: "0.9rem",
5: "1.125rem",
6: "1.35rem",
7: "1.575rem",
8: "1.8rem",
9: "2.025rem",
10: "2.25rem",
11: "2.475rem",
12: "2.7rem",
16: "3.6rem",
20: "4.5rem",
24: "5.4rem",
32: "7.2rem",
40: "9rem",
48: "10.8rem",
56: "12.6rem",
64: "14.4rem",
72: "16.2rem",
80: "18rem",
96: "21.6rem",
},
gap: {
0: "0",
0.5: "0.1125rem",
1: "0.225rem",
1.5: "0.3375rem",
2: "0.45rem",
2.5: "0.5625rem",
3: "0.675rem",
3.5: "0.7875rem",
4: "0.9rem",
5: "1.125rem",
6: "1.35rem",
7: "1.575rem",
8: "1.8rem",
9: "2.025rem",
10: "2.25rem",
11: "2.475rem",
12: "2.7rem",
16: "3.6rem",
20: "4.5rem",
24: "5.4rem",
32: "7.2rem",
40: "9rem",
48: "10.8rem",
56: "12.6rem",
64: "14.4rem",
72: "16.2rem",
80: "18rem",
96: "21.6rem",
},
padding: SPACING_SCALE,
margin: SPACING_SCALE,
space: SPACING_SCALE,
gap: SPACING_SCALE,
backgroundImage: {
"onboarding-gradient-100": "var( --gradient-onboarding-100)",
"onboarding-gradient-200": "var( --gradient-onboarding-200)",
@ -333,6 +248,7 @@ export const theme = {
custom: ["Inter", "sans-serif"],
},
};
export const plugins = [
require("tailwindcss-animate"),
require("@tailwindcss/typography"),

View File

@ -111,6 +111,9 @@
--color-neutral-30: #f0f0f3;
--color-neutral-40: #e8e8ec;
--color-neutral-50: #e0e1e6;
/* --color-neutral-30: #ffffff;
--color-neutral-40: #fafafa;
--color-neutral-50: #f5f5f5; */
--color-neutral-60: #d9d9e0;
--color-neutral-70: #cdced6;
--color-neutral-80: #b9bbc6;