feat: enhance input recipe with size variants and improve styling

src/recipes/button.ts

@@ -21,7 +21,7 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
       paddingBlock: 'xs',
       paddingInline: 'sm',
       cursor: 'pointer',
-      transition: 'all',
+      transitionProperty: 'color, background-color, border-color',
       transitionDuration: 'normal',
       transitionTimingFunction: 'easeOut'
     },

src/recipes/input.ts

@@ -12,8 +12,6 @@ export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
     base: {
       display: 'inline-flex',
       borderRadius: 'sm',
-      paddingBlock: 'xs',
-      paddingInline: 'sm',
       border: '1px solid',
       outline: 'none',
       transitionProperty: 'color, background-color, border-color',
@@ -25,6 +23,23 @@ export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
       }
     },
     variants: {
+      size: {
+        small: {
+          paddingBlock: 'calc({spacing.xs} * 0.5)',
+          paddingInline: 'calc({spacing.xs} * 1)',
+          fontSize: 'sm'
+        },
+        medium: {
+          paddingBlock: 'calc({spacing.xs} * 0.75)',
+          paddingInline: 'calc({spacing.xs} * 1.25)',
+          fontSize: 'base'
+        },
+        large: {
+          paddingBlock: 'calc({spacing.xs} * 1)',
+          paddingInline: 'calc({spacing.xs} * 1.5)',
+          fontSize: 'lg'
+        }
+      },
       color: {
         ...Object.fromEntries(
           colorVariants.map((color) => [
@@ -33,34 +48,49 @@ export const inputRecipe = ({ semanticColorNames }: InputRecipeArg) => {
               borderColor: `${color}.6`,
               backgroundColor: `${color}.2`,
               color: `${color}.12`,
+              _placeholder: {
+                color: `${color}.11`
+              },
               _hover: {
                 backgroundColor: `${color}.3`
               },
+              _active: {
+                backgroundColor: `${color}.4`
+              },
               _focus: {
                 backgroundColor: `${color}.3`,
                 borderColor: `${color}.7`
               },
               _disabled: {
-                backgroundColor: `color-mix(in srgb, {colors.${color}.2} 30%, transparent)`,
+                backgroundColor: `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
-                color: `color-mix(in srgb, {colors.${color}.11} 30%, transparent)`,
+                color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`,
-                borderColor: `color-mix(in srgb, {colors.${color}.6} 30%, transparent)`,
+                borderColor: `color-mix(in srgb, {colors.${color}.6} 40%, transparent)`,
+                _placeholder: {
+                  color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`
+                },
                 _hover: {
-                  backgroundColor: `color-mix(in srgb, {colors.${color}.2} 30%, transparent)`,
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
-                  borderColor: `color-mix(in srgb, {colors.${color}.6} 30%, transparent)`,
+                  borderColor: `color-mix(in srgb, {colors.${color}.6} 40%, transparent)`,
-                  color: `color-mix(in srgb, {colors.${color}.11} 30%, transparent)`
+                  color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`
                 },
                 _focus: {
-                  backgroundColor: `color-mix(in srgb, {colors.${color}.2} 30%, transparent)`,
+                  backgroundColor: `color-mix(in srgb, {colors.${color}.2} 40%, transparent)`,
-                  borderColor: `color-mix(in srgb, {colors.${color}.6} 30%, transparent)`,
+                  borderColor: `color-mix(in srgb, {colors.${color}.6} 40%, transparent)`,
-                  color: `color-mix(in srgb, {colors.${color}.11} 30%, transparent)`
+                  color: `color-mix(in srgb, {colors.${color}.11} 40%, transparent)`
                 }
               }
             }
           ])
         )
+      },
+      fullWidth: {
+        true: {
+          width: '100%'
+        }
       }
     },
     defaultVariants: {
+      size: 'medium',
       color: 'neutral'
     }
   })