message: chore: refactor theme - FormControl
diff: import { formAnatomy 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 baseStyleRequiredIndicator = defineStyle((props) => {
  - return {
  +const $fg = cssVar("form-control-color")
  +
  +const baseStyleRequiredIndicator = defineStyle({
  marginStart: "1",
  - color: mode("red.500", "red.300")(props),
  - }
  + [$fg.variable]: "colors.red.500",
  + _dark: {
  + [$fg.variable]: "colors.red.300",
  + },
  + color: $fg.reference,
  })
  -const baseStyleHelperText = defineStyle((props) => {
  - return {
  +const baseStyleHelperText = defineStyle({
  mt: "2",
  - color: mode("gray.600", "whiteAlpha.600")(props),
  + [$fg.variable]: "colors.gray.600",
  + _dark: {
  + [$fg.variable]: "colors.whiteAlpha.600",
  + },
  + color: $fg.reference,
  lineHeight: "normal",
  fontSize: "sm",
  - }
  })
  -const baseStyle = definePartsStyle((props) => ({
  +const baseStyle = definePartsStyle({
  container: {
  width: "100%",
  position: "relative",
  },
  - requiredIndicator: runIfFn(baseStyleRequiredIndicator, props),
  - helperText: runIfFn(baseStyleHelperText, props),
  -}))
  + requiredIndicator: baseStyleRequiredIndicator,
  + helperText: baseStyleHelperText,
  +})
  export const formTheme = defineMultiStyleConfig({
  baseStyle,
  