diff --git a/src/components/Toggle/Toggle.styles.ts b/src/components/Toggle/Toggle.styles.ts index c41fd2c2f..3d8fd0df7 100644 --- a/src/components/Toggle/Toggle.styles.ts +++ b/src/components/Toggle/Toggle.styles.ts @@ -44,7 +44,7 @@ export const toggleItemStyles = (theme: Theme) => "& input": { display: "none", "& ~.ToggleRail": { - backgroundColor: theme.colors["Color/Neutral/Bg/colorBgFields"], + backgroundColor: theme.colors["Color/Base/Shark/0"], border: `1px solid ${theme.colors["Color/Neutral/Border/colorBorderSubtle"]}`, "&:hover": { borderColor: theme.colors["Color/Neutral/Border/colorBorderBold"], @@ -60,7 +60,7 @@ export const toggleItemStyles = (theme: Theme) => borderRadius: "100%", backgroundColor: theme.colors["Color/Neutral/Text/colorTextLightSolid"], - boxShadow: theme.shadows["boxShadow-01"], + boxShadow: theme.shadows["toggleShadow"], transitionDuration: "0.1s", }, }, @@ -84,6 +84,9 @@ export const toggleItemStyles = (theme: Theme) => cursor: "not-allowed", borderColor: theme.colors["Color/Neutral/Border/colorBorderSubtle"], backgroundColor: theme.colors["Color/Neutral/Bg/colorBgDisabled"], + "&:before": { + boxShadow: theme.shadows["toggleShadow-Disabled"], + }, }, }, }); diff --git a/src/global/global.types.ts b/src/global/global.types.ts index 0ca9aef3f..a1b837704 100644 --- a/src/global/global.types.ts +++ b/src/global/global.types.ts @@ -53,6 +53,8 @@ export interface ShadowsThemeProps { "focusStyle-Light": string; "focusStyle-Dark": string; "contentShadow-Light": string; + toggleShadow: string; + "toggleShadow-Disabled": string; } export interface ColorThemeProps { diff --git a/src/global/themeColors.ts b/src/global/themeColors.ts index ee30cce63..83cfa3caa 100644 --- a/src/global/themeColors.ts +++ b/src/global/themeColors.ts @@ -463,4 +463,6 @@ export const themeShadows = { "focusStyle-Light": "0px 0px 0px 2px rgba(43, 100, 229, 0.30)", "focusStyle-Dark": "0px 0px 0px 2px rgba(100, 164, 245, 0.30)", "contentShadow-Light": "0px 2px 2px 0px rgba(121, 135, 151, 0.15)", + toggleShadow: "0px 1px 1px 0px rgba(0,0,0,0.20)", + "toggleShadow-Disabled": "0px 1px 1px 0px rgba(0,0,0,0.05)", };