styles for Textarea component

toolkit/chakra/textarea.tsx

+import type { TextareaProps as ChakraTextareaProps } from '@chakra-ui/react';
+import { Textarea as ChakraTextarea } from '@chakra-ui/react';
+
+export interface TextareaProps extends ChakraTextareaProps {}
+
+export const Textarea = ChakraTextarea;

toolkit/theme/foundations/semanticTokens.ts

@@ -180,6 +180,9 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
       mark: {
         bg: { value: { _light: '{colors.green.100}', _dark: '{colors.green.800}' } },
       },
+      scrollbar: {
+        thumb: { value: { _light: '{colors.blackAlpha.300}', _dark: '{colors.whiteAlpha.300}' } },
+      },
     },
 
     // OLD TOKENS

toolkit/theme/globalCss.ts

-import type { StyleFunctionProps, SystemStyleObject } from '@chakra-ui/theme-tools';
-import { mode } from '@chakra-ui/theme-tools';
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 
 // TODO @tom2drum check address highlight feature
 import addressEntity from './globals/address-entity';
 import recaptcha from './globals/recaptcha';
-// TODO @tom2drum check custom scrollbar colors
 import scrollbar from './globals/scrollbar';
 
 const globalCss: Record<string, SystemStyleObject> = {
@@ -25,9 +23,9 @@ const globalCss: Record<string, SystemStyleObject> = {
   form: {
     w: '100%',
   },
-  // ...scrollbar(props),
+  ...recaptcha,
+  ...scrollbar,
   // ...addressEntity(props),
-  ...recaptcha(),
 };
 
 export default globalCss;

toolkit/theme/globals/recaptcha.ts

-const styles = () => {
-  return {
-    '.grecaptcha-badge': {
-      visibility: 'hidden',
+const styles = {
+  '.grecaptcha-badge': {
+    visibility: 'hidden',
+  },
+  'div:has(div):has(iframe[title="recaptcha challenge expires in two minutes"])': {
+    '&::after': {
+      content: `" "`,
+      display: 'block',
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100vw',
+      height: '100vh',
+      zIndex: 100000,
+      bgColor: 'blackAlpha.300',
     },
-    'div:has(div):has(iframe[title="recaptcha challenge expires in two minutes"])': {
-      '&::after': {
-        content: `" "`,
-        display: 'block',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100vw',
-        height: '100vh',
-        zIndex: 100000,
-        bgColor: 'blackAlpha.300',
-      },
-    },
-  };
+  },
 };
 
 export default styles;

toolkit/theme/globals/scrollbar.ts

-import { getCSSVar } from '@chakra-ui/styled-system';
-import { mode } from '@chakra-ui/theme-tools';
-import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
-
-const scrollbar = (props: StyleFunctionProps) => {
-  const bgColor = mode('blackAlpha.300', 'whiteAlpha.300')(props);
-  const resizerUrl = mode('url(/static/resizer_light.png)', 'url(/static/resizer_dark.png)')(props);
-
-  return {
-    'body *::-webkit-scrollbar': {
-      width: '20px',
-    },
-    'body *::-webkit-scrollbar-track': {
-      backgroundColor: 'transparent',
-    },
-    'body *::-webkit-scrollbar-thumb': {
-      backgroundColor: bgColor,
-      borderRadius: '20px',
-      border: `8px solid rgba(0,0,0,0)`,
-      backgroundClip: 'content-box',
-      minHeight: '32px',
-    },
-    'body *::-webkit-scrollbar-button': {
-      display: 'none',
-    },
-    'body *::-webkit-scrollbar-corner': {
-      backgroundColor: 'transparent',
-    },
-    'body *::-webkit-resizer': {
-      backgroundImage: resizerUrl,
-      backgroundSize: '20px',
-    },
-    'body *': {
-      scrollbarWidth: 'thin',
-      scrollbarColor: `${ getCSSVar(props.theme, 'colors', bgColor) } transparent`,
-    },
-  };
+const scrollbar = {
+  'body *::-webkit-scrollbar': {
+    width: '20px',
+  },
+  'body *::-webkit-scrollbar-track': {
+    backgroundColor: 'transparent',
+  },
+  'body *::-webkit-scrollbar-thumb': {
+    backgroundColor: '{colors.global.scrollbar.thumb}',
+    borderRadius: '20px',
+    border: `8px solid rgba(0,0,0,0)`,
+    backgroundClip: 'content-box',
+    minHeight: '32px',
+  },
+  'body *::-webkit-scrollbar-button': {
+    display: 'none',
+  },
+  'body *::-webkit-scrollbar-corner': {
+    backgroundColor: 'transparent',
+  },
+  'body *::-webkit-resizer': {
+    // FIXME for dark mode we need to use a different image - /static/resizer_dark.png
+    backgroundImage: 'url(/static/resizer_light.png)',
+    backgroundSize: '20px',
+  },
+  'body *': {
+    scrollbarWidth: 'thin',
+    scrollbarColor: `{colors.global.scrollbar.thumb} transparent`,
+  },
 };
 
 export default scrollbar;

toolkit/theme/recipes/field.recipe.ts

@@ -51,7 +51,7 @@ export const recipe = defineSlotRecipe({
           bg: 'bg',
           top: '2px',
           left: '2px',
-          w: 'calc(100% - 4px)',
+          width: 'calc(100% - 4px)',
           borderRadius: 'base',
           pointerEvents: 'none',
           transformOrigin: 'top left',
@@ -82,6 +82,12 @@ export const recipe = defineSlotRecipe({
           fontSize: 'md',
         },
       },
+      // special size for textarea
+      xxl: {
+        label: {
+          fontSize: 'md',
+        },
+      },
     },
     orientation: {
       vertical: {
@@ -129,6 +135,31 @@ export const recipe = defineSlotRecipe({
         },
       },
     },
+    {
+      size: 'xxl',
+      floating: true,
+      css: {
+        label: {
+          // 16px = scrollbar width
+          width: 'calc(100% - 4px - 20px)',
+          padding: '20px 24px 0px 24px',
+          textStyle: 'xs',
+          _peerPlaceholderShown: {
+            textStyle: 'md',
+          },
+          _peerFocusVisible: {
+            textStyle: 'xs',
+          },
+          _readOnly: {
+            bg: 'input.bg.readOnly',
+          },
+        },
+        errorText: {
+          fontSize: 'inherit',
+          lineHeight: 'inherit',
+        },
+      },
+    },
   ],
 
   defaultVariants: {

toolkit/theme/recipes/index.ts

@@ -8,6 +8,7 @@ import { recipe as progressCircle } from './progress-circle.recipe';
 import { recipe as skeleton } from './skeleton.recipe';
 import { recipe as switchRecipe } from './switch.recipe';
 import { recipe as tabs } from './tabs.recipe';
+import { recipe as textarea } from './textarea.recipe';
 import { recipe as toast } from './toast.recipe';
 import { recipe as tooltip } from './tooltip.recipe';
 
@@ -16,6 +17,7 @@ export const recipes = {
   input,
   link,
   skeleton,
+  textarea,
 };
 
 export const slotRecipes = {

toolkit/theme/recipes/input.recipe.ts

@@ -81,6 +81,9 @@ export const recipe = defineRecipe({
         },
         _invalid: {
           borderColor: 'input.border.error',
+          _hover: {
+            borderColor: 'input.border.error',
+          },
         },
       },
     },

toolkit/theme/recipes/textarea.recipe.ts

+import { defineRecipe } from '@chakra-ui/react';
+
+export const recipe = defineRecipe({
+  base: {
+    width: '100%',
+    minWidth: '0',
+    minHeight: '160px',
+    outline: '0',
+    position: 'relative',
+    appearance: 'none',
+    textAlign: 'start',
+    borderRadius: 'base',
+    color: 'input.fg',
+    '--focus-color': 'colors.border.error',
+    '--error-color': 'colors.border.error',
+    _invalid: {
+      focusRingColor: 'var(--error-color)',
+      borderColor: 'var(--error-color)',
+    },
+  },
+  variants: {
+    size: {
+      xxl: {
+        textStyle: 'md',
+        px: '6',
+        py: '4',
+        scrollPaddingBottom: '4',
+      },
+    },
+
+    variant: {
+      outline: {
+        bg: 'input.bg',
+        borderWidth: '2px',
+        borderColor: 'input.border',
+        focusVisibleRing: 'none',
+        _hover: {
+          borderColor: 'input.border.hover',
+        },
+        _focus: {
+          borderColor: 'input.border.focus',
+          _hover: {
+            borderColor: 'input.border.focus',
+          },
+        },
+        _readOnly: {
+          userSelect: 'all',
+          pointerEvents: 'none',
+          bg: 'input.bg.readOnly',
+          borderColor: 'input.border.readOnly',
+          _focus: {
+            borderColor: 'input.border.readOnly',
+          },
+          _hover: {
+            borderColor: 'input.border.readOnly',
+          },
+        },
+        _disabled: {
+          bg: 'input.bg.disabled',
+          borderColor: 'input.border.disabled',
+        },
+        _invalid: {
+          borderColor: 'input.border.error',
+          _hover: {
+            borderColor: 'input.border.error',
+          },
+        },
+      },
+    },
+
+    floating: {
+      'true': {
+        paddingTop: '40px',
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'xxl',
+    variant: 'outline',
+  },
+});

ui/pages/Chakra.tsx

+/* eslint-disable max-len */
 /* eslint-disable react/jsx-no-bind */
 import { Heading, HStack, Link, Tabs, VStack } from '@chakra-ui/react';
 import React from 'react';
@@ -10,11 +11,14 @@ import { Input } from 'toolkit/chakra/input';
 import { ProgressCircleRing, ProgressCircleRoot } from 'toolkit/chakra/progress-circle';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Switch } from 'toolkit/chakra/switch';
+import { Textarea } from 'toolkit/chakra/textarea';
 import { toaster } from 'toolkit/chakra/toaster';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import ContentLoader from 'ui/shared/ContentLoader';
 import PageTitle from 'ui/shared/Page/PageTitle';
 
+const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
 const ChakraShowcases = () => {
   const colorMode = useColorMode();
 
@@ -95,6 +99,18 @@ const ChakraShowcases = () => {
           </HStack>
         </section>
 
+        <section>
+          <Heading textStyle="heading.md" mb={ 2 }>Textarea</Heading>
+          <HStack gap={ 4 }>
+            <Field label="Description" required floating size="xxl" w="400px">
+              <Textarea/>
+            </Field>
+            <Field label="Description" required floating size="xxl" w="400px">
+              <Textarea value={ TEXT }/>
+            </Field>
+          </HStack>
+        </section>
+
         <section>
           <Heading textStyle="heading.md" mb={ 2 }>Links</Heading>
           <HStack gap={ 4 }>