Button.ts

import theme from '@chakra-ui/theme';
import { mode } from '@chakra-ui/theme-tools';

const defaultButton = theme.components.Button;

type Dict = Record<string, any>;

function variantSolid(props: Dict) {
  const { colorScheme: c } = props;

  const defaultVariantTheme = defaultButton.variants?.solid(props) ?? {};

  if (c === 'gray') return defaultVariantTheme;

  return {
    ...defaultVariantTheme,
    bg: mode(`${c}.500`, `${c}.500`)(props),
    color: mode(`white`, `white`)(props),
    _hover: { bg: mode(`${c}.600`, `${c}.600`)(props) },
    _active: { bg: mode(`${c}.700`, `${c}.400`)(props) },
  };
}

const variants = {
  ...defaultButton.variants,
  solid: variantSolid,
};

const button = {
  ...defaultButton,
  variants,
};

export default button;