💄 design: 테두리가 피그마와 달라보이는 문제 수정

dnd-side-project · Jan 24, 2024 · a4eaf94 · a4eaf94
1 parent def48f6
commit a4eaf94
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/Tabs/index.stories.tsx b/src/components/Tabs/index.stories.tsx
@@ -19,7 +19,7 @@ export const Primary: Story = {
     <div
       css={css`
         padding: 1.25rem;
-        background-color: #94d1f5;
+        background-color: #8acef5;
       `}
     >
       <Tabs {...args} />
@@ -70,7 +70,7 @@ export const 보관함: Story = {
     <div
       css={css`
         padding: 1.25rem;
-        background-color: #94d1f5;
+        background-color: #8acef5;
       `}
     >
       <Tabs {...args} />

diff --git a/src/components/Tabs/styles.ts b/src/components/Tabs/styles.ts
@@ -28,15 +28,22 @@ const variantStyles = {
         rgb(255 255 255 / 0.7) 0%,
         rgb(255 255 255 / 0.1) 100%
       );
+      background-clip: padding-box;
     `,
     trigger: css`
+      margin: -1px;
       padding: 0.75rem 1rem;
-      border: none;
+      border: 1px solid transparent;
       border-radius: 0.75rem;
       background: none;
       color: #828282;
 
+      &:focus {
+        outline: none;
+      }
+
       &[data-state='active'] {
+        border: 1px solid rgb(255 255 255 / 0.3);
         background: linear-gradient(
           100deg,
           rgb(255 255 255 / 0.5) 6.09%,