diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js index 3f54a4cc8..ec614baed 100644 --- a/packages/tailwind-config-custom/tailwind.config.js +++ b/packages/tailwind-config-custom/tailwind.config.js @@ -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"), diff --git a/web/styles/globals.css b/web/styles/globals.css index 9d1e9cc80..7000ada44 100644 --- a/web/styles/globals.css +++ b/web/styles/globals.css @@ -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;