tailwind.config.ts

import type { Config } from "tailwindcss";

// import type { PluginCreator } from "tailwindcss/types/config";

export default {
  darkMode: ["class"],
  content: ["./app/**/*.{ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        salmon: {
          50: "#FFF5F5",
          100: "#FFE6E6",
          200: "#FFC9C9",
          300: "#FFA9A9",
          400: "#FF8989",
          500: "#FA8072",
          600: "#E47066",
          700: "#C9605A",
          800: "#AD504E",
          900: "#924042",
          950: "#5B2828",
        },
        ocean: {
          50: "#e5f6f9",
          100: "#ccecf4",
          200: "#99d6e8",
          300: "#66c1dc",
          400: "#33abd1",
          500: "#0b7285",
          600: "#085f6e",
          700: "#064c58",
          800: "#043942",
          900: "#02262b",
          950: "#01141a",
        },
        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))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      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: [
    require("tailwindcss-animate"),
    require("tailwindcss-react-aria-components"),

    // function ({ addBase, theme }) {
    //   function extractColorVars(colorObj: Record<string, string>, colorGroup = ""): Record<string, string> {
    //     return Object.keys(colorObj).reduce((vars, colorKey) => {
    //       const value = colorObj[colorKey];
    //       const cssVariable = colorKey === "DEFAULT" ? `--${colorGroup}` : `--${colorGroup}-${colorKey}`;

    //       const newVars = typeof value === "string" ? { [cssVariable]: value } : extractColorVars(value, colorKey);

    //       return { ...vars, ...newVars };
    //     }, {});
    //   }

    //   addBase({
    //     ":root": extractColorVars(theme("colors")),
    //   });
    // } satisfies PluginCreator,
  ],
} satisfies Config;