update styles for textarea

toolkit/theme/recipes/field.recipe.ts

@@ -24,7 +24,7 @@ export const recipe = defineSlotRecipe({
       userSelect: 'none',
       zIndex: '1',
       _disabled: {
-        opacity: '0.5',
+        opacity: 'control.disabled',
       },
       _invalid: {
         color: 'input.fg.error',
@@ -143,10 +143,13 @@ export const recipe = defineSlotRecipe({
           whiteSpace: 'nowrap',
           overflow: 'hidden',
           textOverflow: 'ellipsis',
-          // 16px = scrollbar width
+          // 20px = scrollbar width
+          // 4px = border width
           width: 'calc(100% - 4px - 20px)',
-          padding: '20px 24px 0px 24px',
+          padding: '16px 16px 0px 16px',
           textStyle: 'xs',
+          borderTopRightRadius: '0px',
+          borderBottomRightRadius: '0px',
           _peerPlaceholderShown: {
             textStyle: 'md',
           },

toolkit/theme/recipes/input.recipe.ts

@@ -82,8 +82,7 @@ export const recipe = defineRecipe({
           },
         },
         _disabled: {
-          bg: 'input.bg.disabled',
-          borderColor: 'input.border.disabled',
+          opacity: 'control.disabled',
         },
         _invalid: {
           borderColor: 'input.border.error',

toolkit/theme/recipes/textarea.recipe.ts

@@ -22,8 +22,9 @@ export const recipe = defineRecipe({
     size: {
       '2xl': {
         textStyle: 'md',
-        px: '6',
         py: '4',
+        pl: '4',
+        pr: '5', // === scrollbar width
         scrollPaddingBottom: '4',
       },
     },
@@ -39,6 +40,7 @@ export const recipe = defineRecipe({
         },
         _focus: {
           borderColor: 'input.border.focus',
+          boxShadow: 'size.md',
           _hover: {
             borderColor: 'input.border.focus',
           },
@@ -56,8 +58,7 @@ export const recipe = defineRecipe({
         },
         _disabled: {
           pointerEvents: 'none',
-          bg: 'input.bg.disabled',
-          borderColor: 'input.border.disabled',
+          opacity: 'control.disabled',
         },
         _invalid: {
           borderColor: 'input.border.error',
@@ -70,7 +71,10 @@ export const recipe = defineRecipe({
 
     floating: {
       'true': {
-        paddingTop: '40px',
+        paddingTop: '8',
+        _placeholderShown: {
+          paddingTop: '10',
+        },
       },
     },
   },