message: chore: refactor theme - FormError
diff: import { formErrorAnatomy as parts } from "@chakra-ui/anatomy"
  import {
  createMultiStyleConfigHelpers,
  + cssVar,
  defineStyle,
  } from "@chakra-ui/styled-system"
  -import { mode } from "@chakra-ui/theme-tools"
  -import { runIfFn } from "../utils/run-if-fn"
  const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(parts.keys)
  -const baseStyleText = defineStyle((props) => {
  - return {
  - color: mode("red.500", "red.300")(props),
  +const $fg = cssVar("form-error-color")
  +
  +const baseStyleText = defineStyle({
  + [$fg.variable]: `colors.red.500`,
  + _dark: {
  + [$fg.variable]: `colors.red.300`,
  + },
  + color: $fg.reference,
  mt: "2",
  fontSize: "sm",
  lineHeight: "normal",
  - }
  })
  -const baseStyleIcon = defineStyle((props) => {
  - return {
  +const baseStyleIcon = defineStyle({
  marginEnd: "0.5em",
  - color: mode("red.500", "red.300")(props),
  - }
  + [$fg.variable]: `colors.red.500`,
  + _dark: {
  + [$fg.variable]: `colors.red.300`,
  + },
  + color: $fg.reference,
  })
  -const baseStyle = definePartsStyle((props) => ({
  - text: runIfFn(baseStyleText, props),
  - icon: runIfFn(baseStyleIcon, props),
  -}))
  +const baseStyle = definePartsStyle({
  + text: baseStyleText,
  + icon: baseStyleIcon,
  +})
  export const formErrorTheme = defineMultiStyleConfig({
  baseStyle,
  