message: chore: refactor theme - CloseButton
diff: import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system"
  -import { cssVar, mode } from "@chakra-ui/theme-tools"
  +import { cssVar } from "@chakra-ui/theme-tools"
  const $size = cssVar("close-button-size")
  +const $bg = cssVar("close-button-bg")
  -const baseStyle = defineStyle((props) => {
  - const hoverBg = mode(`blackAlpha.100`, `whiteAlpha.100`)(props)
  - const activeBg = mode(`blackAlpha.200`, `whiteAlpha.200`)(props)
  -
  - return {
  +const baseStyle = defineStyle({
  w: [$size.reference],
  h: [$size.reference],
  borderRadius: "md",
  @@ -18,12 +15,22 @@ const baseStyle = defineStyle((props) => {
  cursor: "not-allowed",
  boxShadow: "none",
  },
  - _hover: { bg: hoverBg },
  - _active: { bg: activeBg },
  + _hover: {
  + [$bg.variable]: "colors.blackAlpha.100",
  + _dark: {
  + [$bg.variable]: "colors.whiteAlpha.100",
  + },
  + },
  + _active: {
  + [$bg.variable]: "colors.blackAlpha.200",
  + _dark: {
  + [$bg.variable]: "colors.whiteAlpha.200",
  + },
  + },
  _focusVisible: {
  boxShadow: "outline",
  },
  - }
  + bg: $bg.reference,
  })
  const sizes = {
  