import { semanticBgColors } from '../../../utils/colorUtils.js';

const kpiTheme = {
    baseStyle: "flex flex-col gap-3",
    valueSizes: {
        sm: "text-2xl font-bold text-[var(--color-text-primary)]",
        md: "text-3xl font-bold text-[var(--color-text-primary)]",
        lg: "text-4xl font-bold text-[var(--color-text-primary)]",
    },
    labelStyle: "text-[var(--color-text-muted)]",
    labelSizes: {
        sm: "text-sm",
        md: "text-base",
        lg: "text-lg",
    },
    trendPositive: "text-[var(--color-success)]",
    trendNegative: "text-[var(--color-danger)]",
    trendNeutral: "text-[var(--color-text-muted)]",
    trendSizes: {
        sm: "text-sm",
        md: "text-base",
        lg: "text-lg",
    },
    barFilledColors: {
        ...semanticBgColors,
        neutral: "bg-[var(--color-text-secondary)]",
    },
    barEmptyColor: "bg-[var(--color-background-tertiary)]",
    barSizes: {
        sm: { height: "h-4", width: "w-[3px]", gap: "gap-[2px]" },
        md: { height: "h-6", width: "w-[3px]", gap: "gap-[3px]" },
        lg: { height: "h-8", width: "w-1", gap: "gap-1" },
    },
    subtitleStyle: "text-[var(--color-text-muted)]",
};

export { kpiTheme };
