message: feat: split and export button baseStyle and variants
diff: import { mode, styleConfig, transparentize } from "@chakra-ui/theme-tools"
  -const ghost = function (props: Record<string, any>) {
  +const variantGhost = function (props: Record<string, any>) {
  const { colorScheme: c, theme } = props
  if (c === "gray") {
  @@ -26,33 +26,17 @@ const ghost = function (props: Record<string, any>) {
  }
  }
  -const button = styleConfig({
  - baseStyle: {
  - lineHeight: "1.2",
  - borderRadius: "md",
  - fontWeight: "semibold",
  - _focus: {
  - boxShadow: "outline",
  - },
  - _disabled: {
  - opacity: 0.4,
  - cursor: "not-allowed",
  - boxShadow: "none",
  - },
  - },
  - variants: {
  - ghost,
  - outline: function (props) {
  +const variantOutline = function (props: Record<string, any>) {
  const { colorScheme: c } = props
  const borderColor = mode(`gray.200`, `whiteAlpha.300`)(props)
  return {
  border: "1px solid",
  borderColor: c === "gray" ? borderColor : "currentColor",
  - ...ghost(props),
  + ...variantGhost(props),
  + }
  }
  - },
  - solid: function (props) {
  +const variantSolid = function (props: Record<string, any>) {
  const { colorScheme: c } = props
  if (c === "gray")
  @@ -68,9 +52,9 @@ const button = styleConfig({
  _hover: { bg: mode(`${c}.600`, `${c}.300`)(props) },
  _active: { bg: mode(`${c}.700`, `${c}.400`)(props) },
  }
  - },
  +}
  - link: function (props) {
  +const variantLink = function (props: Record<string, any>) {
  const { colorScheme: c } = props
  return {
  padding: 0,
  @@ -82,19 +66,40 @@ const button = styleConfig({
  color: mode(`${c}.700`, `${c}.500`)(props),
  },
  }
  - },
  +}
  - unstyled: {
  +const variantUnstyled = {
  bg: "none",
  color: "inherit",
  display: "inline",
  lineHeight: "inherit",
  m: 0,
  p: 0,
  +}
  +
  +const variants = {
  + ghost: variantGhost,
  + outline: variantOutline,
  + solid: variantSolid,
  + link: variantLink,
  + unstyled: variantUnstyled,
  +}
  +
  +const baseStyle = {
  + lineHeight: "1.2",
  + borderRadius: "md",
  + fontWeight: "semibold",
  + _focus: {
  + boxShadow: "outline",
  },
  + _disabled: {
  + opacity: 0.4,
  + cursor: "not-allowed",
  + boxShadow: "none",
  },
  +}
  - sizes: {
  +const sizes = {
  lg: {
  h: 12,
  minW: 12,
  @@ -119,13 +124,30 @@ const button = styleConfig({
  fontSize: "xs",
  px: 2,
  },
  - },
  +}
  - defaultProps: {
  +const defaultProps = {
  variant: "solid",
  size: "md",
  colorScheme: "gray",
  - },
  +}
  +
  +const button = styleConfig({
  + baseStyle,
  + variants,
  + sizes,
  + // @ts-ignore
  + defaultProps,
  })
  +export const buttonStyles = {
  + baseStyle,
  + variantGhost,
  + variantLink,
  + variantOutline,
  + variantUnstyled,
  + sizes,
  + defaultProps,
  +}
  +
  export default button
  