message: feat: split and export badge variants
diff: @@ -5,32 +5,33 @@ import {
  transparentize,
  } from "@chakra-ui/theme-tools"
  -const badge = styleConfig({
  - baseStyle: {
  +const baseStyle = {
  paddingX: 1,
  textTransform: "uppercase",
  fontSize: "xs",
  borderRadius: "sm",
  fontWeight: "bold",
  - },
  - variants: {
  - solid: function (props) {
  +}
  +
  +const variantSolid = function (props: Record<string, any>) {
  const { colorScheme: c, theme } = props
  const dark = transparentize(`${c}.500`, 0.6)(theme)
  return {
  bg: mode(`${c}.500`, dark)(props),
  color: mode(`white`, `whiteAlpha.800`)(props),
  }
  - },
  - subtle: function (props) {
  +}
  +
  +const variantSubtle = function (props: Record<string, any>) {
  const { colorScheme: c, theme } = props
  const darkBg = transparentize(`${c}.200`, 0.16)(theme)
  return {
  bg: mode(`${c}.100`, darkBg)(props),
  color: mode(`${c}.800`, `${c}.200`)(props),
  }
  - },
  - outline: function (props) {
  +}
  +
  +const variantOutline = function (props: Record<string, any>) {
  const { colorScheme: c, theme } = props
  const darkColor = transparentize(`${c}.200`, 0.8)(theme)
  const lightColor = getColor(theme, `${c}.500`)
  @@ -40,13 +41,32 @@ const badge = styleConfig({
  color,
  boxShadow: `inset 0 0 0px 1px ${color}`,
  }
  - },
  - },
  +}
  - defaultProps: {
  +const variants = {
  + solid: variantSolid,
  + subtle: variantSubtle,
  + outline: variantOutline,
  +}
  +
  +const defaultProps = {
  variant: "subtle",
  colorScheme: "gray",
  - },
  +}
  +
  +const badge = styleConfig({
  + baseStyle,
  + variants,
  + // @ts-ignore
  + defaultProps,
  })
  +export const badgeStyles = {
  + baseStyle,
  + variantSolid,
  + variantSubtle,
  + variantOutline,
  + defaultProps,
  +}
  +
  export default badge
  