one-product-system-2.tsx

import styled from '@emotion/styled';
import React, from 'react';
import { variant } from 'styled-system';
import { BaseButton, BaseButtonProps } from '../../../private/BaseButton';
import { textVariants } from '../../../private/BaseText';
import { skipForwardProps } from '../../../props';

const kindVariants = {
  primary: {
    fontWeight: '700',
    color: 'white',
    backgroundColor: 'primary.500',
    '&:hover': {
      backgroundColor: 'primary.700',
    },
    '&:active': {
      backgroundColor: 'primary.800',
    },
    '&:disabled': {
      color: 'primary.200',
      backgroundColor: 'primary.100',
    },
  },
  secondary: {
    fontWeight: '700',
    color: 'white',
    backgroundColor: 'black',
    '&:hover': {
      backgroundColor: 'gray.800',
    },
    '&:active': {
      backgroundColor: 'gray.700',
    },
    '&:disabled': {
      color: 'gray.400',
      backgroundColor: 'gray.100',
    },
  },
  tertiary: {
    fontWeight: '700',
    color: 'gray.700',
    backgroundColor: 'gray.100',
    '&:hover': {
      backgroundColor: 'gray.200',
    },
    '&:active': {
      backgroundColor: 'gray.300',
    },
    '&:disabled': {
      color: 'gray.400',
      backgroundColor: 'gray.100',
    },
  },
  outline: {
    color: 'black',
    backgroundColor: 'white',
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: 'gray.300',
    '&:hover': {
      backgroundColor: 'gray.200',
      borderColor: 'gray.400',
    },
    '&:active': {
      backgroundColor: 'gray.300',
      borderColor: 'gray.500',
    },
    '&:disabled': {
      color: 'gray.400',
      backgroundColor: 'white',
      borderColor: 'gray.300',
    },
  },
};

const sizeVariants = {
  sm: {
    height: 30,
    paddingY: 8,
    paddingX: 12,
    ...textVariants.caption2,
  },
  md: {
    height: 38,
    paddingY: 10,
    paddingX: 12,
    ...textVariants.body2,
  },
  lg: {
    height: 44,
    paddingY: 12,
    paddingX: 14,
    ...textVariants.body1,
  },
  xl: {
    height: 50,
    paddingY: 14,
    paddingX: 16,
    ...textVariants.heading4,
  },
};

type KindVariant = keyof typeof kindVariants;
type SizeVariant = keyof typeof sizeVariants;

export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
  Pick<BaseButtonProps, 'as'> & {
    kind: KindVariant;
    size: SizeVariant;
    full?: boolean;
  };

export const Button: React.FC<ButtonProps> = styled(
  (props: ButtonProps) => <BaseButton borderRadius={2} {...props} />,
  skipForwardProps(['size', 'kind'])
)(
  variant({
    prop: 'kind',
    variants: kindVariants,
  }),
  variant({
    prop: 'size',
    variants: sizeVariants,
  })
);