import type { Config } from "tailwindcss"; import tailwindcssAnimate from "tailwindcss-animate"; import typography from "@tailwindcss/typography"; import defaultTheme from "tailwindcss/defaultTheme"; export default { darkMode: "class", content: ["./src/**/*.{ts,tsx}"], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { fontFamily: { sans: ["Geist Sans", ...defaultTheme.fontFamily.sans], mono: ["Geist Mono", ...defaultTheme.fontFamily.mono], display: ['"Instrument Serif"', "Georgia", "serif"], }, colors: { 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))", }, indigo: { 50: "hsl(var(--indigo-50))", 100: "hsl(var(--indigo-100))", 200: "hsl(var(--indigo-200))", 300: "hsl(var(--indigo-300))", 400: "hsl(var(--indigo-400))", 500: "hsl(var(--indigo-500))", 600: "hsl(var(--indigo-600))", 700: "hsl(var(--indigo-700))", 800: "hsl(var(--indigo-800))", 900: "hsl(var(--indigo-900))", }, status: { "active-bg": "hsl(var(--status-active-bg))", "active-fg": "hsl(var(--status-active-fg))", "active-border": "hsl(var(--status-active-border))", "active-dot": "hsl(var(--status-active-dot))", "success-bg": "hsl(var(--status-success-bg))", "success-fg": "hsl(var(--status-success-fg))", "success-border": "hsl(var(--status-success-border))", "success-dot": "hsl(var(--status-success-dot))", "warning-bg": "hsl(var(--status-warning-bg))", "warning-fg": "hsl(var(--status-warning-fg))", "warning-border": "hsl(var(--status-warning-border))", "warning-dot": "hsl(var(--status-warning-dot))", "error-bg": "hsl(var(--status-error-bg))", "error-fg": "hsl(var(--status-error-fg))", "error-border": "hsl(var(--status-error-border))", "error-dot": "hsl(var(--status-error-dot))", "neutral-bg": "hsl(var(--status-neutral-bg))", "neutral-fg": "hsl(var(--status-neutral-fg))", "neutral-border": "hsl(var(--status-neutral-border))", "neutral-dot": "hsl(var(--status-neutral-dot))", "urgent-bg": "hsl(var(--status-urgent-bg))", "urgent-fg": "hsl(var(--status-urgent-fg))", "urgent-border": "hsl(var(--status-urgent-border))", "urgent-dot": "hsl(var(--status-urgent-dot))", }, terminal: { DEFAULT: "hsl(var(--terminal-bg))", fg: "hsl(var(--terminal-fg))", muted: "hsl(var(--terminal-muted))", border: "hsl(var(--terminal-border))", system: "hsl(var(--terminal-system))", tool: "hsl(var(--terminal-tool))", result: "hsl(var(--terminal-result))", error: "hsl(var(--terminal-error))", cursor: "hsl(var(--terminal-cursor))", link: "hsl(var(--terminal-link))", warning: "hsl(var(--terminal-warning))", "line-number": "hsl(var(--terminal-line-number))", }, diff: { "add-bg": "hsl(var(--diff-add-bg))", "add-fg": "hsl(var(--diff-add-fg))", "add-border": "hsl(var(--diff-add-border))", "remove-bg": "hsl(var(--diff-remove-bg))", "remove-fg": "hsl(var(--diff-remove-fg))", "remove-border":"hsl(var(--diff-remove-border))", "hunk-bg": "hsl(var(--diff-hunk-bg))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, boxShadow: { xs: "var(--shadow-xs)", sm: "var(--shadow-sm)", md: "var(--shadow-md)", lg: "var(--shadow-lg)", xl: "var(--shadow-xl)", }, transitionDuration: { instant: "var(--duration-instant)", fast: "var(--duration-fast)", normal: "var(--duration-normal)", slow: "var(--duration-slow)", }, transitionTimingFunction: { default: "var(--ease-default)", in: "var(--ease-in)", out: "var(--ease-out)", spring: "var(--ease-spring)", }, zIndex: { base: "var(--z-base)", raised: "var(--z-raised)", sticky: "var(--z-sticky)", sidebar: "var(--z-sidebar)", dropdown: "var(--z-dropdown)", overlay: "var(--z-overlay)", modal: "var(--z-modal)", toast: "var(--z-toast)", command: "var(--z-command)", tooltip: "var(--z-tooltip)", }, 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" }, }, "status-pulse": { "0%, 100%": { opacity: "1" }, "50%": { opacity: "0.4" }, }, shimmer: { "0%": { backgroundPosition: "-200% 0" }, "100%": { backgroundPosition: "200% 0" }, }, "glow-pulse": { "0%, 100%": { boxShadow: "0 0 4px var(--glow-color, hsl(239 84% 67% / 0.3))" }, "50%": { boxShadow: "0 0 12px var(--glow-color, hsl(239 84% 67% / 0.5))" }, }, "fade-in-up": { "0%": { opacity: "0", transform: "translateY(8px)" }, "100%": { opacity: "1", transform: "translateY(0)" }, }, "fade-in": { "0%": { opacity: "0" }, "100%": { opacity: "1" }, }, "scale-in": { "0%": { opacity: "0", transform: "scale(0.95)" }, "100%": { opacity: "1", transform: "scale(1)" }, }, "slide-in-right": { "0%": { opacity: "0", transform: "translateX(16px)" }, "100%": { opacity: "1", transform: "translateX(0)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "status-pulse": "status-pulse 2s ease-in-out infinite", shimmer: "shimmer 1.5s infinite", "glow-pulse": "glow-pulse 2s ease-in-out infinite", "fade-in-up": "fade-in-up 0.4s var(--ease-out) forwards", "fade-in": "fade-in 0.3s var(--ease-out) forwards", "scale-in": "scale-in 0.3s var(--ease-out) forwards", "slide-in-right": "slide-in-right 0.3s var(--ease-out) forwards", }, }, }, plugins: [tailwindcssAnimate, typography], } satisfies Config;