tweaks for require indicator

theme/components/Form.ts

@@ -19,7 +19,7 @@ const getActiveInputStyles = (theme: Dict, fc: string) => ({
 
 const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionProps) => {
   const { theme } = props;
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaultFormColors(props);
+  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props);
 
   const activeLabelStyles = getActiveLabelStyles(theme, fc);
   const activeInputStyles = getActiveInputStyles(theme, fc);
@@ -65,6 +65,10 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
         borderColor: getColor(theme, ec),
       },
     },
+    requiredIndicator: {
+      marginStart: 0,
+      color: fc,
+    },
   }
 }
 

theme/components/Input.ts

@@ -17,7 +17,7 @@ const sizes: Record<string, SystemStyleObject> = {
 
 const variantOutline: PartsStyleFunction<typeof parts> = (props) => {
   const { theme } = props
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaultFormColors(props)
+  const { focusColor: fc, errorColor: ec } = getDefaultFormColors(props)
 
   return {
     field: {

theme/utils/getDefaultFormColors.ts

@@ -4,7 +4,7 @@ import { mode } from '@chakra-ui/theme-tools';
 export default function getDefaultFormColors(props: StyleFunctionProps) {
   const { focusBorderColor: fc, errorBorderColor: ec } = props
   return {
-    focusBorderColor: fc || mode('brand.700', 'brand.300')(props),
-    errorBorderColor: ec || mode('red.400', 'red.300')(props),
+    focusColor: fc || mode('brand.700', 'brand.300')(props),
+    errorColor: ec || mode('red.400', 'red.300')(props),
   }
 }