diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx | 17 |
1 files changed, 16 insertions, 1 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx index 7c10b08a53..27bda0a6d8 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx @@ -16,16 +16,19 @@ const styles = { primary: { background: colors.blue, hover: colors.blue60, + pressed: colors.blue40, disabled: colors.blue40, }, success: { background: colors.green, hover: colors.green80, + pressed: colors.green40, disabled: colors.green40, }, destructive: { background: colors.red, hover: colors.red80, + pressed: colors.red40, disabled: colors.red40, }, }, @@ -48,10 +51,12 @@ export const StyledButton = styled.button<ButtonProps>` return css` --background: ${variant.background}; --hover: ${variant.hover}; + --pressed: ${variant.pressed}; --disabled: ${variant.disabled}; --radius: ${styles.radius}; --size: ${size}; --width: ${width}; + --transition-duration: 0.15s; display: flex; flex: var(--size); @@ -65,10 +70,20 @@ export const StyledButton = styled.button<ButtonProps>` border-radius: var(--radius); background: var(--background); - &:not(:disabled):hover { + @media (prefers-reduced-motion: no-preference) { + transition: background-color var(--transition-duration) ease; + } + + &&:not(:disabled):hover { + --transition-duration: 0s; background: var(--hover); } + &&:not(:disabled):active { + --transition-duration: 0s; + background: var(--pressed); + } + &:disabled { background: var(--disabled); } |