feat #114 - Update toggle styles

src/components/Toggle/utils.ts

@@ -1,28 +1,40 @@
 import colors from 'components/assets/styles/colors'
-import {
-	themedStyles,
-	themes,
-	ThemeType
-} from 'components/assets/styles/themes'
+import { ThemeType } from 'components/assets/styles/themes'
 
 const { blacks, whites } = colors
 
 const { dark, light } = ThemeType
 
 const togglePalette = {
 	[dark]: {
-		active: blacks['lighten-80'],
-		disabled: blacks['lighten-30']
+		active: {
+			primary: blacks['lighten-30'],
+			secondary: blacks['lighten-90']
+		},
+		disabled: {
+			primary: blacks['lighten-10'],
+			secondary: blacks.base
+		},
+		inactive: {
+			primary: blacks['lighten-10'],
+			secondary: blacks['lighten-30']
+		}
 	},
 	[light]: {
-		active: whites.base,
-		disabled: whites['darken-5']
+		active: { primary: blacks.base, secondary: whites.base },
+		disabled: {
+			primary: blacks['lighten-80'],
+			secondary: blacks['lighten-90']
+		},
+		inactive: {
+			primary: blacks['lighten-50'],
+			secondary: whites.base
+		}
 	}
 }
 
 export const generateToggleStyles = (themeType: ThemeType) => {
-	const palette = themes[themeType]
-	const { base, disabled } = themedStyles[themeType]
+	const { active, inactive, disabled } = togglePalette[themeType]
 
 	return {
 		'&.ant-switch': {
@@ -32,46 +44,41 @@ export const generateToggleStyles = (themeType: ThemeType) => {
 			},
 			'& .ant-switch-handle': {
 				'&::before': {
-					backgroundColor: palette.state.inactive
-				},
-				left: 1,
-				top: 1
+					backgroundColor: inactive.secondary
+				}
 			},
 			'&.ant-switch-checked': {
 				'& .ant-switch-handle': {
 					'&::before': {
-						backgroundColor: togglePalette[themeType].active
+						backgroundColor: active.secondary
 					},
-					left: 'calc(100% - 18px - 1px)'
+					left: 'calc(100% - 18px - 2px)'
 				},
-				backgroundColor: palette.primary,
-				borderColor: palette.primary
+				backgroundColor: active.primary
 			},
 			'&.ant-switch-disabled': {
 				'& .ant-switch-handle': {
 					'&::before': {
-						backgroundColor: togglePalette[themeType].disabled
+						backgroundColor: disabled.secondary
 					}
 				},
 				'&.ant-switch-checked .ant-switch-handle': {
 					'&::before': {
-						backgroundColor: togglePalette[themeType].disabled
+						backgroundColor: disabled.secondary
 					}
 				},
-				backgroundColor: disabled.backgroundColor,
-				borderColor: base.borderColor,
+				backgroundColor: disabled.primary,
 				opacity: 1
 			},
 			'&.ant-switch-small.ant-switch-checked': {
 				'& .ant-switch-handle': {
-					left: 'calc(100% - 12px - 1px)'
+					left: 'calc(100% - 12px - 2px)'
 				}
 			},
 			'&:focus': {
 				boxShadow: 'none'
 			},
-			backgroundColor: base.backgroundColor,
-			border: `1px solid ${base.borderColor}`
+			backgroundColor: inactive.primary
 		}
 	}
 }