From 1f88e1514a6b51dad71b717569602ba7cc24955c Mon Sep 17 00:00:00 2001
From: Jiyeon Seo <jyseo@lunit.io>
Date: Mon, 10 Jun 2024 21:00:32 +0900
Subject: [PATCH] feat: update button color

---
 .../design-system/src/components/Button/Button.styled.ts | 2 +-
 .../src/components/ToggleButton/ToggleButton.styled.ts   | 2 +-
 .../stories/components/ToggleButton/Basic.stories.tsx    | 9 ++++++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/Button/Button.styled.ts b/packages/design-system/src/components/Button/Button.styled.ts
index a3773a49..937e2bd8 100644
--- a/packages/design-system/src/components/Button/Button.styled.ts
+++ b/packages/design-system/src/components/Button/Button.styled.ts
@@ -157,7 +157,7 @@ export const kindStyle = ({ kind, color, lunit_token }: KindStyleParams) => ({
   ...(kind === "outlined" &&
     color === "secondary" && {
       color: lunit_token.component.btn_secondary_text,
-      border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.component.btn_secondary_border}`,
+      border: `${OUTLINED_BORDER_WIDTH}px solid ${lunit_token.core.border_medium}`,
       "&:hover": getHoverStyle("none"),
       "&:hover:before": {
         content: "''",
diff --git a/packages/design-system/src/components/ToggleButton/ToggleButton.styled.ts b/packages/design-system/src/components/ToggleButton/ToggleButton.styled.ts
index 15532d71..01985652 100644
--- a/packages/design-system/src/components/ToggleButton/ToggleButton.styled.ts
+++ b/packages/design-system/src/components/ToggleButton/ToggleButton.styled.ts
@@ -38,7 +38,7 @@ export const CustomToggleButton = styled(MuiToggleButton, {
       ...(selectedColor === "secondary" && {
         "&.Mui-selected, &.Mui-selected:hover": {
           border: "none",
-          backgroundColor: lunit_token.component.btn_selected_secondary_bg,
+          backgroundColor: lunit_token.component.btn_secondary_bg,
           color: lunit_token.component.btn_selected_secondary_text,
         },
       }),
diff --git a/packages/design-system/src/stories/components/ToggleButton/Basic.stories.tsx b/packages/design-system/src/stories/components/ToggleButton/Basic.stories.tsx
index 50ba5c90..29195089 100644
--- a/packages/design-system/src/stories/components/ToggleButton/Basic.stories.tsx
+++ b/packages/design-system/src/stories/components/ToggleButton/Basic.stories.tsx
@@ -423,6 +423,7 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
           value="second"
           kind="contained"
           color="secondary"
+          selectedColor="secondary"
         >
           Secondary
         </ToggleButton>
@@ -454,7 +455,13 @@ const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
         <ToggleButton {...args} value="first" kind="ghost" color="primary">
           Primary
         </ToggleButton>
-        <ToggleButton {...args} value="second" kind="ghost" color="secondary">
+        <ToggleButton
+          {...args}
+          value="second"
+          kind="ghost"
+          color="secondary"
+          selectedColor="secondary"
+        >
           Secondary
         </ToggleButton>
       </ToggleButtonGroup>