feat: update button color

lunit-io · Jun 10, 2024 · 1f88e15 · 1f88e15
1 parent 11e9720
commit 1f88e15
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>