hover-mixin-styled-components.ts

import { lighten } from "polished";
import { css } from "styled-components";

export const lightenOnUserInteraction = css<{ color: string }>`
  background-color: ${(props) => props.color};

  :hover,
  :focus {
    background-color: ${(props) => lighten(0.13, props.color)};
  }

  :active {
    background-color: ${(props) => lighten(0.26, props.color)};
  }
`;