fix: tag component not reading badge color and badge bg css variables (…

…#7488)

.changeset/late-pandas-own.md

@@ -0,0 +1,9 @@
+---
+"@chakra-ui/theme": major
+"@chakra-ui/tag": major
+---
+
+- Fix issue where the tag component is not setting bg and color css variables
+  the variables are called `--badge-bg` and `--badge-color`. Those values are
+  already passed as CSS variable but not read. Editing the tag.ts file and make
+  a reference for those variables

packages/components/tag/stories/tag.stories.tsx

@@ -22,7 +22,7 @@ export default {
   ],
 }
 
-export const basic = () => <Tag>Gray</Tag>
+export const basic = () => <Tag colorScheme="teal">Teal</Tag>
 
 export const withSizes = () => (
   <>

packages/components/theme/src/components/tag.ts

@@ -1,17 +1,23 @@
 import { tagAnatomy as parts } from "@chakra-ui/anatomy"
 import {
   createMultiStyleConfigHelpers,
+  cssVar,
   defineStyle,
 } from "@chakra-ui/styled-system"
 import { badgeTheme } from "./badge"
 
+const $bg = cssVar("badge-bg")
+const $fg = cssVar("badge-color")
+
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys)
 
 const baseStyleContainer = defineStyle({
   fontWeight: "medium",
   lineHeight: 1.2,
   outline: 0,
+  color: $fg.reference,
+  bg: $bg.reference,
   borderRadius: "md",
   _focusVisible: {
     boxShadow: "outline",