Merge pull request channel-io#867 from Dogdriip/fix/switch-handle-bg-…

…color Switch handle의 색상이 다크모드에서 잘못 표시되는 버그 수정
jintak0401 · Jul 9, 2022 · 7d1fdc7 · 7d1fdc7
2 parents 6d6fb93 + 5ada881
commit 7d1fdc7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/old-olives-trade.md b/.changeset/old-olives-trade.md
@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Fix style bug: background color of switch handle is overridden by elevation css
diff --git a/packages/bezier-react/src/components/Forms/Switch/Switch.styled.ts b/packages/bezier-react/src/components/Forms/Switch/Switch.styled.ts
@@ -31,13 +31,13 @@ export const Wrapper = styled.div<WrapperProps>`
 
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 
+  ${({ foundation }) => foundation?.rounding?.round12}
   background-color: ${({ checked, foundation }) => (
     checked
       ? foundation?.theme?.['bgtxt-green-normal']
       : foundation?.theme?.['bg-black-dark']
   )};
 
-  ${({ foundation }) => foundation?.rounding?.round12}
   opacity: ${({ disabled }) => (disabled ? DisabledOpacity : 'initial')};
 
   &:hover {
@@ -63,9 +63,9 @@ export const Content = styled.div<ContentProps>`
 
   width: ${({ size }) => SWITCH_HANDLE_WIDTH_HEIGHT[size]}px;
   height: ${({ size }) => SWITCH_HANDLE_WIDTH_HEIGHT[size]}px;
-  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};
   ${({ foundation }) => foundation?.rounding?.round12}
   ${({ foundation }) => foundation?.elevation?.ev2()};
+  background-color: ${({ foundation }) => foundation?.theme?.['bgtxt-absolute-white-dark']};
   
   transform: ${({ checked, size }) => (
     checked