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)
@@ -39,16 +39,62 @@
 i/react%22
+%0Aimport %7B mode %7D from '@chakra-ui/theme-tools'
 %0A%0A// TOD
@@ -270,422 +270,193 @@
     
-primary: (%7B colorScheme = %22grey%22 %7D) =%3E (%7B%0A            color: %60$%7BcolorScheme%7D.500%60,%0A            _hover: %7B%0A                color: %60$%7BcolorScheme%7D.400%60,%0A            %7D,%0A        %7D),%0A        inline: (%7B colorScheme = %22blue%22 %7D) =%3E (%7B%0A            color: %60$%7BcolorScheme%7D.600%60,%0A            _hover: %7B%0A                color: %60$%7BcolorScheme%7D.400%60,%0A            %7D,%0A        %7D),%0A    %7D,%0A    defaultProps: %7B%0A        variant: %22primary%22
+inline: (props) =%3E (%7B%0A            color: mode(%60blue.600%60, %60blue.300%60)(props),%0A            _hover: %7B%0A                color: mode(%60blue.300%60, %60blue.600%60)(props),%0A            %7D,%0A        %7D)
 ,%0A  

update link theme with dark mode support