/**
 * Default theme for Chart components
 * Uses Tailwind classes with CSS variables for consistency with the design system
 */
const chartTheme = {
    baseStyle: {
        colors: {
            // Default series colors using your design system colors
            series: [
                "fill-[var(--color-primary)] stroke-[var(--color-primary)]", // Primary
                "fill-[var(--color-warning)] stroke-[var(--color-warning)]", // Warning/Orange
                "fill-[var(--color-success)] stroke-[var(--color-success)]", // Success/Green
                "fill-[var(--color-danger)] stroke-[var(--color-danger)]", // Danger/Red
                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]", // Primary lighter
                "fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]", // Warning lighter
                "fill-[var(--color-success-400)] stroke-[var(--color-success-400)]", // Success lighter
                "fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]", // Danger lighter
            ],
            // Chart infrastructure colors
            grid: "stroke-[var(--color-border)]",
            axis: "stroke-[var(--color-border)]",
            text: "fill-[var(--color-text-secondary)]",
            background: "fill-[var(--color-background)]",
            hover: "fill-[var(--color-background-secondary)]",
            disabled: "fill-[var(--color-background-disabled)]",
        },
        opacity: {
            default: "opacity-100",
            hover: "opacity-80",
            disabled: "opacity-50",
        },
        transitions: {
            default: "transition-all duration-200",
            hover: "transition-all duration-150",
        },
    },
    variants: {
        default: {
            colors: [
                "fill-[var(--color-primary)] stroke-[var(--color-primary)]",
                "fill-[var(--color-warning)] stroke-[var(--color-warning)]",
                "fill-[var(--color-success)] stroke-[var(--color-success)]",
                "fill-[var(--color-danger)] stroke-[var(--color-danger)]",
                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]",
                "fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]",
                "fill-[var(--color-success-400)] stroke-[var(--color-success-400)]",
                "fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]",
            ],
        },
        minimal: {
            colors: [
                "fill-[var(--color-neutral-600)] stroke-[var(--color-neutral-600)]",
                "fill-[var(--color-neutral-500)] stroke-[var(--color-neutral-500)]",
                "fill-[var(--color-neutral-400)] stroke-[var(--color-neutral-400)]",
                "fill-[var(--color-neutral-300)] stroke-[var(--color-neutral-300)]",
                "fill-[var(--color-neutral-700)] stroke-[var(--color-neutral-700)]",
                "fill-[var(--color-neutral-800)] stroke-[var(--color-neutral-800)]",
            ],
        },
        gradient: {
            colors: [
                "fill-[var(--color-primary)] stroke-[var(--color-primary)]",
                "fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]",
                "fill-[var(--color-primary-500)] stroke-[var(--color-primary-500)]",
                "fill-[var(--color-primary-600)] stroke-[var(--color-primary-600)]",
                "fill-[var(--color-primary-700)] stroke-[var(--color-primary-700)]",
                "fill-[var(--color-primary-800)] stroke-[var(--color-primary-800)]",
            ],
        },
    },
};

export { chartTheme };
