feat: -webkit-resizer

preset.ts

@@ -65,9 +65,15 @@ export default {
 
         const darkContext = mode === 'media' ? '@media (prefers-color-scheme: dark)' : `&:is(${className} *)`
 
-        // ' dark:[&::-webkit-scrollbar-track]:bg-gray-700 hover:[&:not(:disabled)::-webkit-scrollbar-thumb]:bg-gray-800 dark:hover:[&:not(:disabled)::-webkit-scrollbar-thumb]:bg-gray-200',
+        const resizerColor = theme('colors.gray.500')!.replace('#', '%23')
+
+        // const resizeYImage = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${resizerColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22v-6"/><path d="M12 8V2"/><path d="M4 12H2"/><path d="M10 12H8"/><path d="M16 12h-2"/><path d="M22 12h-2"/><path d="m15 19-3 3-3-3"/><path d="m15 5-3-3-3 3"/></svg>')`
+        // const resizeXImage = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${resizerColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 12h6"/><path d="M8 12H2"/><path d="M12 2v2"/><path d="M12 8v2"/><path d="M12 14v2"/><path d="M12 20v2"/><path d="m19 15 3-3-3-3"/><path d="m5 9-3 3 3 3"/></svg>')`
+        const resizeAllImage = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${resizerColor}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="15 19 12 22 9 19"/><polyline points="19 9 22 12 19 15"/><line x1="2" x2="22" y1="12" y2="12"/><line x1="12" x2="12" y1="2" y2="22"/></svg>')`
+
         addUtilities({
           '.scrollbar': {
+            '--resizer-image': resizeAllImage,
             '&::-webkit-scrollbar': {
               width: theme('space.3'),
               height: theme('space.3'),
@@ -89,7 +95,22 @@ export default {
             '&:not(:disabled)::-webkit-scrollbar-thumb:hover': {
               backgroundColor: theme('colors.gray.800'),
             },
+            '&::-webkit-scrollbar-button': {
+              display: 'none',
+            },
+            '&::-webkit-resizer': {
+              backgroundImage: 'var(--resizer-image)',
+              backgroundColor: theme('colors.white'),
+              backgroundSize: '10px 10px',
+              backgroundRepeat: 'no-repeat',
+              backgroundPosition: 'center',
+              width: theme('space.3'),
+              height: theme('space.3'),
+            },
             [darkContext]: {
+              '&::-webkit-resizer': {
+                backgroundColor: theme('colors.gray.900'),
+              },
               '&::-webkit-scrollbar-track': {
                 backgroundColor: theme('colors.gray.700'),
               },

src/Textarea/Textarea.vue

@@ -54,15 +54,15 @@ const onInput = (e: Event) => {
 </script>
 <template>
   <textarea
-    class="scrollbar input-border relative flex w-full appearance-none overflow-y-scroll rounded-md bg-transparent py-1.5 pl-3 pr-0 text-sm leading-[1.375rem] placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50"
+    class="relative flex w-full appearance-none overflow-y-scroll rounded-md bg-transparent py-1.5 pl-3 pr-0 text-sm leading-[1.375rem] scrollbar input-border placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50"
     :class="[
       noBorder
         ? 'input-border-color-transparent dark:input-border-color-transparent'
         : {
             normal: 'focus:input-border-ring focus:input-border-color-primary',
-            danger: 'focus:input-border-ring input-border-color-danger',
-            success: 'focus:input-border-ring input-border-color-success',
-            warning: 'focus:input-border-ring input-border-color-warning',
+            danger: 'input-border-color-danger focus:input-border-ring',
+            success: 'input-border-color-success focus:input-border-ring',
+            warning: 'input-border-color-warning focus:input-border-ring',
           }[props.status],
       // noBorder ? 'focus:ring-0' : BUILTIN_CLASS.focusRing,
     ]"