🐛 fix: テキストエリアのデザインを修正

uyupun · Dec 28, 2023 · 855346c · 855346c
1 parent f64592b
commit 855346c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/src/components/base/Textarea/index.stories.tsx b/src/components/base/Textarea/index.stories.tsx
@@ -32,7 +32,9 @@ export const Textarea: Story = {
       <form onSubmit={handleSubmit(action('handleSubmit'))}>
         <dl>
           <dt style={{ marginBottom: '8px' }}>
-            <label htmlFor="description">Description</label>
+            <label htmlFor="description" style={{ color: 'white' }}>
+              Description
+            </label>
           </dt>
           <dd style={{ marginBottom: '24px' }}>
             <BaseTextarea errors={errors} id="description" register={register} />

diff --git a/src/components/base/Textarea/styles.css.ts b/src/components/base/Textarea/styles.css.ts
@@ -10,30 +10,38 @@ const styles = {
         mobile: 200,
       },
       minHeight: 100,
-      fontSize: {
-        desktop: 16,
-        mobile: 14,
-      },
+      fontSize: 16,
       lineHeight: 1.8,
-      color: 'black',
+      color: 'white',
       paddingX: 1,
       paddingY: 1.25,
-      borderColor: {
-        default: 'gray',
-        focusVisible: 'blue',
+      borderColor: 'white',
+      outlineWidth: {
+        focusVisible: 2,
+      },
+      outlineStyle: {
+        focusVisible: 'solid',
+      },
+      outlineColor: {
+        focusVisible: 'white',
+      },
+      outlineOffset: {
+        focusVisible: -1,
       },
     }),
     {
       width: '100%',
-      borderWidth: '1px',
+      backgroundColor: 'transparent',
+      borderWidth: 1,
       borderStyle: 'solid',
-      borderRadius: '5px',
+      borderRadius: 5,
       resize: 'vertical',
+      outline: 'none',
     },
   ]),
   error: sprinkles({
+    color: 'red',
     borderColor: 'red',
-    backgroundColor: 'lightRed',
   }),
 };