refactor: alert theme

.changeset/lemon-zoos-heal.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/theme": patch
+---
+
+Refactor alert theme to use css variables

packages/theme/src/components/alert.ts

@@ -1,13 +1,20 @@
 import { alertAnatomy as parts } from "@chakra-ui/anatomy"
-import type { StyleFunctionProps } from "@chakra-ui/styled-system"
-import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system"
+import {
+  createMultiStyleConfigHelpers,
+  cssVar,
+  StyleFunctionProps,
+} from "@chakra-ui/styled-system"
 import { getColor, mode, transparentize } from "@chakra-ui/theme-tools"
 
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys)
 
+const $fg = cssVar("alert-fg")
+const $bg = cssVar("alert-bg")
+
 const baseStyle = definePartsStyle({
   container: {
+    bg: $bg.reference,
     px: 4,
     py: 3,
   },
@@ -20,12 +27,14 @@ const baseStyle = definePartsStyle({
     lineHeight: 6,
   },
   icon: {
+    color: $fg.reference,
     flexShrink: 0,
     marginEnd: 3,
     w: 5,
     h: 6,
   },
   spinner: {
+    color: $fg.reference,
     flexShrink: 0,
     marginEnd: 3,
     w: 5,
@@ -42,57 +51,52 @@ function getBg(props: StyleFunctionProps): string {
 
 const variantSubtle = definePartsStyle((props) => {
   const { colorScheme: c } = props
+  const fg = mode(`${c}.500`, `${c}.200`)(props)
   return {
-    container: { bg: getBg(props) },
-    icon: { color: mode(`${c}.500`, `${c}.200`)(props) },
-    spinner: {
-      color: mode(`${c}.500`, `${c}.200`)(props),
+    container: {
+      [$bg.variable]: getBg(props),
+      [$fg.variable]: `colors.${fg}`,
     },
   }
 })
 
 const variantLeftAccent = definePartsStyle((props) => {
   const { colorScheme: c } = props
+  const fg = mode(`${c}.500`, `${c}.200`)(props)
   return {
     container: {
-      paddingStart: 3,
+      [$bg.variable]: getBg(props),
+      [$fg.variable]: `colors.${fg}`,
+      paddingStart: "3",
       borderStartWidth: "4px",
-      borderStartColor: mode(`${c}.500`, `${c}.200`)(props),
-      bg: getBg(props),
-    },
-    icon: {
-      color: mode(`${c}.500`, `${c}.200`)(props),
-    },
-    spinner: {
-      color: mode(`${c}.500`, `${c}.200`)(props),
+      borderStartColor: $fg.reference,
     },
   }
 })
 
 const variantTopAccent = definePartsStyle((props) => {
   const { colorScheme: c } = props
+  const fg = mode(`${c}.500`, `${c}.200`)(props)
   return {
     container: {
-      pt: 2,
+      [$bg.variable]: getBg(props),
+      [$fg.variable]: `colors.${fg}`,
+      pt: "2",
       borderTopWidth: "4px",
-      borderTopColor: mode(`${c}.500`, `${c}.200`)(props),
-      bg: getBg(props),
-    },
-    icon: {
-      color: mode(`${c}.500`, `${c}.200`)(props),
-    },
-    spinner: {
-      color: mode(`${c}.500`, `${c}.200`)(props),
+      borderTopColor: $fg.reference,
     },
   }
 })
 
 const variantSolid = definePartsStyle((props) => {
   const { colorScheme: c } = props
+  const bg = mode(`${c}.500`, `${c}.200`)(props)
+  const fg = mode(`white`, `gray.900`)(props)
   return {
     container: {
-      bg: mode(`${c}.500`, `${c}.200`)(props),
-      color: mode(`white`, `gray.900`)(props),
+      [$bg.variable]: `colors.${bg}`,
+      [$fg.variable]: `colors.${fg}`,
+      color: $fg.reference,
     },
   }
 })