diff --git a/packages/Core/src/theme/toggles.ts b/packages/Core/src/theme/toggles.ts index 4308c662bc..311530a10d 100644 --- a/packages/Core/src/theme/toggles.ts +++ b/packages/Core/src/theme/toggles.ts @@ -91,17 +91,14 @@ export const getToggles = (theme: WuiTheme): ThemeToggles => { icon: { position: { xs: { - top: '5px', left: '2px', right: '2px', }, sm: { - top: '1px', left: '4px', right: '4px', }, md: { - top: '4px', left: '4px', right: '4px', }, diff --git a/packages/Toggle/src/index.tsx b/packages/Toggle/src/index.tsx index 412dc99b34..33dde5326d 100644 --- a/packages/Toggle/src/index.tsx +++ b/packages/Toggle/src/index.tsx @@ -22,7 +22,7 @@ export const Toggle = forwardRef<'input', ToggleProps>( return ( {hasIcon && ( - + {checked ? checkedIcon : uncheckedIcon} )} diff --git a/packages/Toggle/src/styles.ts b/packages/Toggle/src/styles.ts index 859c0347ba..92b5ebf1cb 100644 --- a/packages/Toggle/src/styles.ts +++ b/packages/Toggle/src/styles.ts @@ -72,7 +72,10 @@ export const IconWrapper = styled.box.withConfig({ shouldForwardProp })<{ ({ checked, size }) => css` position: absolute; z-index: 1; - top: ${th(`toggles.icon.position.${size}.top`)}; + display: flex; + align-items: center; + height: ${th(`toggles.item.sizes.${size}.height`)}; + bottom: 0; > svg, i {