karusic/front/src/theme/components/button.ts

import { border, defineStyleConfig, keyframes } from '@chakra-ui/react';
import { isAccessible, mode, transparentize } from '@chakra-ui/theme-tools';

import { shadows } from '@/theme/foundations/shadows';

const shimmer = keyframes`
  100% {
    transform: translateX(100%);
  }
`;

const customVariant = ({
  theme,
  bg,
  bgHover = bg,
  bgActive = bgHover,
  color,
  colorHover = color,
  boxColorFocus = '#0x000000',
  boxShadowHover = 'outline-over',
}) => {
  const isColorAccessible = isAccessible(color, bg, {
    size: 'large',
    level: 'AA',
  })(theme);

  return {
    bg,
    color: isColorAccessible ? color : 'black',
    border: '1px solid #00000000',
    _focus: {
      //border: `1px solid ${boxColorFocus}`,
      border: `1px solid #000000`,
    },
    _hover: {
      bg: bgHover,
      color: isColorAccessible ? colorHover : 'black',
      boxShadow: boxShadowHover,
      _disabled: {
        bg,
        boxShadow: 'none',
      },
    },
    _active: { bg: bgActive },
  };
};

export default defineStyleConfig({
  variants: {
    // Custom variants
    '@primary': (props) =>
      customVariant({
        theme: props.theme,
        bg: mode('brand.600', 'brand.300')(props),
        bgHover: mode('brand.700', 'brand.400')(props),
        bgActive: mode('brand.600', 'brand.300')(props),
        color: mode('white', 'brand.900')(props),
        boxColorFocus: mode('brand.100', 'brand.600')(props),
      }),
    '@secondary': (props) =>
      customVariant({
        theme: props.theme,
        bg: mode('brand.100', 'brand.900')(props),
        bgHover: mode('brand.200', 'brand.800')(props),
        bgActive: mode('brand.300', 'brand.700')(props),
        color: mode('brand.700', 'brand.50')(props),
        colorHover: mode('brand.800', 'brand.100')(props),
        boxColorFocus: mode('brand.900', 'brand.300')(props),
      }),
    '@danger': (props) =>
      customVariant({
        theme: props.theme,
        bg: mode('error.600', 'error.600')(props),
        bgHover: mode('error.700', 'error.500')(props),
        bgActive: mode('error.600', 'error.500')(props),
        color: mode('white', 'error.900')(props),
        boxColorFocus: mode('error.900', 'error.500')(props),
      }),
    '@success': (props) =>
      customVariant({
        theme: props.theme,
        bg: mode('green.300', 'green.300')(props),
        bgHover: mode('green.400', 'green.400')(props),
        bgActive: mode('green.500', 'green.400')(props),
        color: mode('white', 'green.900')(props),
        boxColorFocus: mode('green.900', 'green.400')(props),
      }),

    '@progress': (props) => ({
      ...customVariant({
        theme: props.theme,
        bg: mode(`${props.colorScheme}.500`, `${props.colorScheme}.300`)(props),
        bgHover: mode(
          `${props.colorScheme}.600`,
          `${props.colorScheme}.400`
        )(props),
        bgActive: mode(
          `${props.colorScheme}.700`,
          `${props.colorScheme}.500`
        )(props),
        color: mode('white', `${props.colorScheme}.900`)(props),
        boxColorFocus: mode(
          `${props.colorScheme}.900`,
          `${props.colorScheme}.600`
        )(props),
      }),
      overflow: 'hidden',

      _after: !props.isLoading
        ? {
            position: 'absolute',
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            transform: 'translateX(-100%)',
            bgGradient: `linear(90deg, ${transparentize(
              `${props.colorScheme}.100`,
              0
            )(props.theme)} 0, ${transparentize(
              `${props.colorScheme}.100`,
              0.2
            )(props.theme)} 20%, ${transparentize(
              `${props.colorScheme}.100`,
              0.5
            )(props.theme)} 60%, ${transparentize(
              `${props.colorScheme}.100`,
              0
            )(props.theme)})`,
            animation: `${shimmer} 3s infinite`,
            content: '""',
          }
        : undefined,
    }),
    '@menu': (props) => ({
      bg: mode('back.100', 'back.800')(props),
      color: mode('brand.900', 'brand.100')(props),
      borderRadius: 0,
      border: 0,
      _hover: { background: mode('back.300', 'back.600')(props) },
      _focus: { border: 'none' },
      fontSize: '20px',
      textTransform: 'uppercase',
    }),

    // Default variants
    solid: (props) => ({
      bg:
        props.colorScheme === 'gray'
          ? mode('gray.100', 'whiteAlpha.100')(props)
          : `${props.colorScheme}.600`,
      _hover: {
        bg:
          props.colorScheme === 'gray'
            ? mode('gray.200', 'whiteAlpha.200')(props)
            : `${props.colorScheme}.700`,
      },
      _focus: {
        boxShadow: `outline-${props.colorScheme}`,
      },
    }),
    light: (props) => ({
      bg:
        props.colorScheme === 'gray'
          ? mode('gray.100', 'whiteAlpha.100')(props)
          : `${props.colorScheme}.100`,
      color:
        props.colorScheme === 'gray'
          ? mode('gray.700', 'whiteAlpha.700')(props)
          : `${props.colorScheme}.700`,
      _hover: {
        bg:
          props.colorScheme === 'gray'
            ? mode('gray.200', 'whiteAlpha.200')(props)
            : `${props.colorScheme}.200`,
        color:
          props.colorScheme === 'gray'
            ? mode('gray.800', 'whiteAlpha.800')(props)
            : `${props.colorScheme}.800`,
      },
      _focus: {
        boxShadow: `outline-${props.colorScheme}`,
      },
    }),
    ghost: (props) => ({
      bg: transparentize(`${props.colorScheme}.50`, 0.05)(props.theme),
      borderRadius: 'full',
      _hover: {
        bg: transparentize(`${props.colorScheme}.50`, 0.15)(props.theme),
      },
      _focus: {
        boxShadow: 'none',
      },
    }),
  },
});