web: added the base for the web project

apps/web/tailwind.config.ts

@@ -1,28 +1,105 @@
-import { type Config } from "tailwindcss";
+const colors = [
+  "#7856ff",
+  "#ff7557",
+  "#7fe1d8",
+  "#f8bc3c",
+  "#b3596e",
+  "#72bef4",
+  "#ffb27a",
+  "#0f7ea0",
+  "#3ba974",
+  "#febbb2",
+  "#cb80dc",
+  "#5cb7af",
+];
 
-export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+/** @type {import('tailwindcss').Config} */
+const config = {
+  safelist: [
+    ...colors.map((color) => `chart-${color}`),
+  ],
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
       colors: {
-        'chart-0': '',
-        'chart-1': '',
-        'chart-2': '',
-        'chart-3': '',
-        'chart-4': '',
-        'chart-5': '',
-        'chart-6': '',
-        'chart-7': '',
-        'chart-8': '',
-        'chart-9': '',
-        'chart-10': '',
-        'chart-11': '',
-        'chart-12': '',
-        'chart-13': '',
-        'chart-14': '',
-        'chart-15': '',
-      }
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        ...colors.reduce((acc, color, index) => {
+          return {
+            ...acc,
+            [`chart-${index}`]: color,
+          };
+        }, {}),
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      boxShadow: {
+        DEFAULT: '0 5px 10px rgb(0 0 0 / 5%)'
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
     },
   },
-  plugins: [],
-} satisfies Config;
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config