🐛 fix: テキストボックスのデザインを修正

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

Hide file tree

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

diff --git a/src/components/base/Textbox/styles.css.ts b/src/components/base/Textbox/styles.css.ts
@@ -5,31 +5,37 @@ import { sprinkles } from '@/styles/sprinkles.css';
 const styles = {
   textbox: style([
     sprinkles({
-      height: {
-        desktop: 40,
-        mobile: 36,
+      height: 40,
+      fontSize: 16,
+      lineHeight: 1,
+      color: 'white',
+      paddingX: 1,
+      borderColor: 'white',
+      outlineWidth: {
+        focusVisible: 2,
       },
-      fontSize: {
-        desktop: 16,
-        mobile: 14,
+      outlineStyle: {
+        focusVisible: 'solid',
       },
-      color: 'black',
-      paddingX: 1,
-      borderColor: {
-        default: 'gray',
-        focusVisible: 'blue',
+      outlineColor: {
+        focusVisible: 'white',
+      },
+      outlineOffset: {
+        focusVisible: -1,
       },
     }),
     {
       width: '100%',
-      borderWidth: '1px',
+      backgroundColor: 'transparent',
+      borderWidth: 1,
       borderStyle: 'solid',
-      borderRadius: '5px',
+      borderRadius: 5,
+      outline: 'none',
     },
   ]),
   error: sprinkles({
+    color: 'red',
     borderColor: 'red',
-    backgroundColor: 'lightRed',
   }),
 };