import { extendTheme } from "@chakra-ui/react"

// TODO: Add Tag custom theme

const Button = {
    baseStyle: {
        fontFamily: "InterVariable",
        fontWeight: "medium"
    }
}

const Link = {
    variants: {
        primary: ({ colorScheme = "grey" }) => ({
            color: `${colorScheme}.500`,
            _hover: {
                color: `${colorScheme}.400`,
            },
        }),
        inline: ({ colorScheme = "blue" }) => ({
            color: `${colorScheme}.600`,
            _hover: {
                color: `${colorScheme}.400`,
            },
        }),
    },
    defaultProps: {
        variant: "primary",
    },
}

const theme = {
    fonts: {
        heading: "PiazzollaVariable, serif",
        body: "PiazzollaVariable, serif"
    },
    sizes: {
        "navigationHeight": "77px"
    },
    components: {
        Button,
        Link
    }
}

export default extendTheme(theme)
import { extendTheme } from "@chakra-ui/react"
import { mode } from '@chakra-ui/theme-tools'

// TODO: Add Tag custom theme

const Button = {
    baseStyle: {
        fontFamily: "InterVariable",
        fontWeight: "medium"
    }
}

const Link = {
    variants: {
        inline: (props) => ({
            color: mode(`blue.600`, `blue.300`)(props),
            _hover: {
                color: mode(`blue.300`, `blue.600`)(props),
            },
        }),
    },
}

const theme = {
    fonts: {
        heading: "PiazzollaVariable, serif",
        body: "PiazzollaVariable, serif"
    },
    sizes: {
        "navigationHeight": "77px"
    },
    components: {
        Button,
        Link
    }
}

export default extendTheme(theme)
update link theme with dark mode support