import { Roboto } from "next/font/google";
import { createTheme, MantineColorsTuple } from "@mantine/core";

export const myColor: MantineColorsTuple = [
    "#e0f0f4",
    "#d4eff8",
    "#afdce9",
    "#87c8db",
    "#65b7cf",
    "#4aaac7",
    "#3fa7c6",
    "#2c92af",
    "#1b829e",
    "#00718c",
];

const radius = "md";

const font = Roboto({
    subsets: ["latin"],
    weight: ["400"],
    preload: true,
});

export const theme = createTheme({
    fontFamily: `${font.style.fontFamily}, sans-serif`,
    headings: {
        fontFamily: `${font.style.fontFamily}, sans-serif`,
    },
    colors: {
        myColor,
    },
    primaryColor: "myColor",
    components: {
        Button: {
            defaultProps: {
                radius,
            },
        },
        InputBase: {
            defaultProps: {
                radius,
            },
        },
        Modal: {
            defaultProps: {
                radius,
            },
        },
        Card: {
            defaultProps: {
                radius,
            },
        },
        Text: {
            defaultProps: {
                size: "sm",
            },
        },
    },
});