fix input styles

toolkit/chakra/field.tsx

@@ -27,6 +27,8 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
         size: props.size,
         floating: props.floating,
         bgColor: rest.bgColor,
+        disabled: rest.disabled,
+        readOnly: rest.readOnly,
       };
 
       const labelElement = (

toolkit/theme/foundations/semanticTokens.ts

@@ -232,6 +232,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
         error: { value: '{colors.red.500}' },
       },
+      placeholder: { value: '{colors.gray.500}' },
     },
     field: {
       placeholder: {

toolkit/theme/recipes/field.recipe.ts

@@ -52,7 +52,7 @@ export const recipe = defineSlotRecipe({
           bg: 'bg',
           top: '2px',
           left: '2px',
-          color: 'gray.500',
+          color: 'input.placeholder',
           width: 'calc(100% - 4px)',
           borderRadius: 'base',
           pointerEvents: 'none',

toolkit/theme/recipes/input.recipe.ts

@@ -52,8 +52,14 @@ export const recipe = defineRecipe({
       outline: {
         bg: 'input.bg',
         borderWidth: '2px',
-        borderColor: 'input.border',
+        borderColor: 'input.border.filled',
         focusVisibleRing: 'none',
+        _placeholder: {
+          color: 'input.placeholder',
+        },
+        _placeholderShown: {
+          borderColor: 'input.border',
+        },
         _hover: {
           borderColor: 'input.border.hover',
         },

ui/showcases/Input.tsx

@@ -66,11 +66,11 @@ const InputShowcase = () => {
             <Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
               <Input size="xl"/>
             </Field>
-            <Field label="Email (disabled)" required floating size="xl" maxWidth="300px">
-              <Input size="xl" disabled value="me@example.com"/>
+            <Field label="Email (disabled)" required floating disabled size="xl" maxWidth="300px">
+              <Input size="xl" value="me@example.com"/>
             </Field>
-            <Field label="Email (readOnly)" required floating size="xl" maxWidth="300px">
-              <Input size="xl" readOnly value="me@example.com"/>
+            <Field label="Email (readOnly)" required floating readOnly size="xl" maxWidth="300px">
+              <Input size="xl" value="me@example.com"/>
             </Field>
             <Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
               <Input size="xl" value="duck"/>
@@ -84,25 +84,25 @@ const InputShowcase = () => {
             <Field label="Email" required helperText="Helper text" maxWidth="200px">
               <Input/>
             </Field>
-            <Field label="Email (disabled)" required maxWidth="200px">
-              <Input disabled value="me@example.com"/>
+            <Field label="Email (disabled)" required disabled maxWidth="200px">
+              <Input value="me@example.com"/>
             </Field>
-            <Field label="Email (readOnly)" required maxWidth="200px">
-              <Input readOnly value="me@example.com"/>
+            <Field label="Email (readOnly)" required readOnly maxWidth="200px">
+              <Input value="me@example.com"/>
             </Field>
             <Field label="Email (invalid)" required errorText="Something went wrong" invalid maxWidth="200px">
-              <Input size="xl" value="duck"/>
+              <Input value="duck"/>
             </Field>
           </Sample>
           <Sample label="floating label" p={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} alignItems="flex-start">
             <Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
               <Input size="xl"/>
             </Field>
-            <Field label="Email (disabled)" required floating size="xl" maxWidth="300px">
-              <Input size="xl" disabled value="me@example.com"/>
+            <Field label="Email (disabled)" required disabled floating size="xl" maxWidth="300px">
+              <Input size="xl" value="me@example.com"/>
             </Field>
-            <Field label="Email (readOnly)" required floating size="xl" maxWidth="300px">
-              <Input size="xl" readOnly value="me@example.com"/>
+            <Field label="Email (readOnly)" required readOnly floating size="xl" maxWidth="300px">
+              <Input size="xl" value="me@example.com"/>
             </Field>
             <Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
               <Input size="xl" value="duck"/>