import { extendTheme } from "@chakra-ui/react";
import { registerTheme } from ".";
import { getShades } from "./shadeCalculator";
export default registerTheme("Colored", extendTheme({
    colors: {
        auto: getShades("#FFFFFF"),
        bg: getShades("#F4F4F4"),
        text: getShades("#171717"),
        surface: getShades("#FFFFFF"),
        brand: getShades("#0540F2"),
        error: getShades("#E03138"),
        success: getShades("#329922"),
        info: getShades("#056CF2"),
        warning: getShades("#EE7105"),
    },
    fonts: {
        body: "system-ui, sans-serif",
        heading: "system-ui, sans-serif",
    },
    config: { initialColorMode: "light", useSystemColorMode: false },
    styles: { global: { bg: "bg.900", color: "text.900" } },
    components: {
        Box: {
            baseStyle: { bg: "#343434" },
        },
        Text: {
            baseStyle: {
                color: "text.900",
            },
        },
        Card: {
            baseStyle: { bg: "surface.900" },
        },
        Button: {
            baseStyle: {
                color: "text.900",
                borderRadius: "8px",
            },
            variants: {
                ghost: {
                    bg: "qore.primary_lightest",
                    color: "brand.900",
                    _hover: { bg: "qore.primary_lightest" },
                    _active: { bg: "qore.primary_lightest" },
                },
                solid: {
                    bg: "brand.900",
                    _hover: { bg: "brand.900" },
                    _active: { bg: "brand.900" },
                },
            },
        },
    },
}));
//# sourceMappingURL=colored.js.map