feat: revise close button

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Revise `CloseButton` to have a more consistent look with the rest of the components.
 - Added `border.active` token to help with conveying the status of a component.
 - Added `underline` variant for `Link` component.
 

src/components/close-button.ts

@@ -0,0 +1,73 @@
+import { defineCssVars, defineStyle, defineStyleConfig } from '@chakra-ui/styled-system'
+
+const vars = defineCssVars('close-button', ['bg', 'color', 'size'])
+
+const baseStyle = defineStyle({
+  borderRadius: 'lg',
+  w: [vars.size.reference],
+  h: [vars.size.reference],
+  bg: vars.bg.reference,
+  color: vars.color.reference,
+  [vars.color.variable]: `colors.gray.600`,
+  _dark: {
+    [vars.color.variable]: `colors.gray.300`,
+  },
+  _hover: {
+    [vars.bg.variable]: `colors.gray.50`,
+    [vars.color.variable]: `colors.gray.800`,
+    _dark: {
+      [vars.bg.variable]: `colors.gray.800`,
+      [vars.color.variable]: `colors.white`,
+    },
+  },
+  _active: {
+    [vars.bg.variable]: `colors.gray.50`,
+    [vars.color.variable]: `colors.gray.900`,
+    _dark: {
+      [vars.bg.variable]: `colors.gray.800`,
+      [vars.color.variable]: `colors.white`,
+    },
+  },
+  _focusVisible: {
+    boxShadow: 'focus',
+  },
+})
+
+const sizes = {
+  '2xs': defineStyle({
+    [vars.size.variable]: 'sizes.6',
+    fontSize: '2xs',
+  }),
+  xs: defineStyle({
+    [vars.size.variable]: 'sizes.8',
+    fontSize: 'xs',
+  }),
+  sm: defineStyle({
+    [vars.size.variable]: 'sizes.9',
+    fontSize: 'xs',
+  }),
+  md: defineStyle({
+    [vars.size.variable]: 'sizes.10',
+    fontSize: 'sm',
+  }),
+  lg: defineStyle({
+    [vars.size.variable]: 'sizes.11',
+    fontSize: 'md',
+  }),
+  xl: defineStyle({
+    [vars.size.variable]: 'sizes.12',
+    fontSize: 'lg',
+  }),
+  '2xl': defineStyle({
+    [vars.size.variable]: 'sizes.15',
+    fontSize: 'xl',
+  }),
+}
+
+export default defineStyleConfig({
+  baseStyle,
+  sizes,
+  defaultProps: {
+    size: 'md',
+  },
+})

src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as Badge } from './badge'
 export { default as Button } from './button'
 export { default as Checkbox } from './checkbox'
+export { default as CloseButton } from './close-button'
 export { default as Container } from './container'
 export { default as CustomSelect } from './custom-select'
 export { default as Divider } from './divider'