// ── Tailwind CSS Theme ───────────────────────────────────────────── // Custom color palette using CSS custom properties (HSL values defined // in globals.css), sidebar theme tokens, and accordion animations. // Dark mode is controlled via the "class" strategy. import type { Config } from "tailwindcss" const config: Config = { // Toggle dark mode by adding "dark" class to darkMode: "class", content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { // UI shell tokens — backgrounds, borders, inputs border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", // Brand primary / action color primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, // Subtle secondary UI secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, // Destructive actions (delete, remove) destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, // Muted / low-emphasis elements muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, // Accent highlights accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, // Popover / dropdown surfaces popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, // Card surfaces card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // Sidebar-specific tokens (separate from main shell colors) sidebar: { DEFAULT: "hsl(var(--sidebar))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, // Utility colors for charts, badges, avatars blue: "hsl(var(--color-blue))", teal: "hsl(var(--color-teal))", "red-tint": "hsl(var(--color-red-tint))", "blue-tint": "hsl(var(--color-blue-tint))", "teal-tint": "hsl(var(--color-teal-tint))", avatar: "hsl(var(--color-avatar))", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, // Radix UI accordion animations for expand/collapse 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: [], } export default config