refactor: tailwind config

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: {
+    padding: SPACING_SCALE,
-      0: "0",
+    margin: SPACING_SCALE,
-      0.5: "0.1125rem",
+    space: SPACING_SCALE,
-      1: "0.225rem",
+    gap: SPACING_SCALE,
-      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",
-    },
     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"),

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;