add correct color styles for input and label

theme/components/Form.ts

 import type { formAnatomy as parts } from '@chakra-ui/anatomy';
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import { getColor } from '@chakra-ui/theme-tools';
+import { getColor, mode } from '@chakra-ui/theme-tools';
 import type { StyleFunctionProps, PartsStyleFunction } from '@chakra-ui/theme-tools';
+import type { Dict } from '@chakra-ui/utils';
 import getDefaultFormColors from '../utils/getDefaultFormColors';
 
-const activeLabelStyles = {
+const getActiveLabelStyles = (theme: Dict, fc: string) => ({
   fontSize: '12px',
   lineHeight: '15px',
   top: '10px',
-};
+  color: getColor(theme, fc),
+})
 
-const activeInputStyles = {
+const getActiveInputStyles = (theme: Dict, fc: string) => ({
   paddingTop: '30px',
   paddingBottom: '10px',
-};
+  borderColor: getColor(theme, fc),
+})
 
 const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionProps) => {
   const { theme } = props;
   const { focusBorderColor: fc, errorBorderColor: ec } = getDefaultFormColors(props);
 
+  const activeLabelStyles = getActiveLabelStyles(theme, fc);
+  const activeInputStyles = getActiveInputStyles(theme, fc);
+
   return {
     container: {
       _focusWithin: {
@@ -29,18 +35,13 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
           ...activeInputStyles,
         },
       },
-      'input:not(:placeholder-shown) + label': {
-        ...activeLabelStyles,
-      },
-      'input[aria-invalid=true] + label': {
-        color: getColor(theme, ec),
-      },
+      // label's styles
       label: {
         top: '20px',
         left: 0,
         zIndex: 2,
         position: 'absolute',
-        color: getColor(theme, fc),
+        color: mode('gray.500', 'whiteAlpha.400')(props),
         backgroundColor: 'transparent',
         pointerEvents: 'none',
         padding: '0 20px',
@@ -50,12 +51,22 @@ const variantFloating: PartsStyleFunction<typeof parts> = (props: StyleFunctionP
         lineHeight: '20px',
         transitionProperty: 'top, font-size, line-height',
       },
+      'input:not(:placeholder-shown) + label': {
+        ...activeLabelStyles,
+      },
+      'input[aria-invalid=true] + label': {
+        color: getColor(theme, ec),
+      },
+      // input's styles
       input: {
         padding: '20px',
       },
       'input:not(:placeholder-shown)': {
         ...activeInputStyles,
       },
+      'input[aria-invalid=true]': {
+        borderColor: getColor(theme, ec),
+      },
     },
   }
 }