refactor: badge theme

chakra-ui · Mar 18, 2023 · b6e0a6a · b6e0a6a · vercel · Mar 18, 2023
1 parent e61a31b
commit b6e0a6a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/.changeset/light-planes-draw.md b/.changeset/light-planes-draw.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/theme": patch
+---
+
+Refactor badge theme to use more css variables
diff --git a/packages/components/theme/src/components/badge.ts b/packages/components/theme/src/components/badge.ts
@@ -5,17 +5,21 @@ import {
 } from "@chakra-ui/styled-system"
 import { transparentize } from "@chakra-ui/theme-tools"
 
+const $bg = cssVar("badge-bg")
+const $fg = cssVar("badge-color")
+const $shadow = cssVar("badge-shadow")
+
 const baseStyle = defineStyle({
   px: 1,
   textTransform: "uppercase",
   fontSize: "xs",
   borderRadius: "sm",
   fontWeight: "bold",
+  bg: $bg.reference,
+  color: $fg.reference,
+  boxShadow: $shadow.reference,
 })
 
-const $bg = cssVar("badge-bg")
-const $fg = cssVar("badge-color")
-
 const variantSolid = defineStyle((props) => {
   const { colorScheme: c, theme } = props
   const dark = transparentize(`${c}.500`, 0.6)(theme)
@@ -26,8 +30,6 @@ const variantSolid = defineStyle((props) => {
       [$bg.variable]: dark,
       [$fg.variable]: `colors.whiteAlpha.800`,
     },
-    bg: $bg.reference,
-    color: $fg.reference,
   }
 })
 
@@ -41,8 +43,6 @@ const variantSubtle = defineStyle((props) => {
       [$bg.variable]: darkBg,
       [$fg.variable]: `colors.${c}.200`,
     },
-    bg: $bg.reference,
-    color: $fg.reference,
   }
 })
 
@@ -54,8 +54,7 @@ const variantOutline = defineStyle((props) => {
     _dark: {
       [$fg.variable]: darkColor,
     },
-    color: $fg.reference,
-    boxShadow: `inset 0 0 0px 1px ${$fg.reference}`,
+    [$shadow.variable]: `inset 0 0 0px 1px ${$fg.reference}`,
   }
 })