How to use the @paprika/stylers.alpha function in @paprika/stylers

box-shadow: ${tokens.highlight.active.noBorder.boxShadow}, inset 0 1px 1px 0 rgba(0, 0, 0, 0.1),
      inset 0 1px 4px 0 rgba(0, 0, 0, 0.3);
    transform: scale(0.98);
  }
`;

const skeuomorphicStyles = `
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition-duration: 0.2s;
  transition-property: border;
`;

const coloredButtonStyles = `
  color: ${tokens.color.white};
  text-shadow: 0 1px 1px ${stylers.alpha(tokens.color.blackPure, 0.2)};
`;

const textButtonStyles = `
  background: none;
  border-color: transparent;
`;

// States

const disabledStyles = `
  box-shadow: none;
  color: ${tokens.color.blackDisabled};
  cursor: not-allowed;
  text-decoration: none;
  text-shadow: none;

import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";

const darkStyles = css`
  transition: background-color 0.2s ease-out;

  &:hover {
    background-color: ${stylers.alpha(tokens.color.white, 0.2)};

    .button__icon {
      color: ${tokens.color.white};
    }
  }

  &:active {
    background-color: ${stylers.alpha(tokens.color.white, 0.3)};
    transition: none;

    .button__icon {
      color: ${tokens.color.white};
      transition: none;
    }
  }

  .button__icon {
    color: ${tokens.color.blackLighten50};
    transition: color 0.2s ease-out;
  }
`;

const closeButtonStyles = css`
  .button__icon {

width: ${stylers.spacer(4)};
  `,
  [ShirtSizes.LARGE]: css`
    font-size: 22px;
    height: ${stylers.spacer(5)};
    line-height: ${Number.parseInt(tokens.space, 10) * 5 - 2}px;
    padding: 0;
    width: ${stylers.spacer(5)};
  `,
};

const minorStyles = css`
  transition: background-color 0.2s ease-out;

  &:hover {
    background-color: ${stylers.alpha(tokens.color.black, 0.1)};
  }

  &:active {
    background-color: ${stylers.alpha(tokens.color.black, 0.2)};
  }
`;

const iconButtonStyles = css`
  ${({ size }) => iconButtonSizes[size]}
  ${({ kind }) => (kind === Button.Kinds.MINOR ? minorStyles : "")}

  .button__icon {
    color: inherit;
    margin: 0;
  }
`;

import { css } from "styled-components";

import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";

const darkStyles = css`
  transition: background-color 0.2s ease-out;

  &:hover {
    background-color: ${stylers.alpha(tokens.color.white, 0.2)};

    .button__icon {
      color: ${tokens.color.white};
    }
  }

  &:active {
    background-color: ${stylers.alpha(tokens.color.white, 0.3)};
    transition: none;

    .button__icon {
      color: ${tokens.color.white};
      transition: none;
    }
  }

height: ${stylers.spacer(5)};
    line-height: ${Number.parseInt(tokens.space, 10) * 5 - 2}px;
    padding: 0;
    width: ${stylers.spacer(5)};
  `,
};

const minorStyles = css`
  transition: background-color 0.2s ease-out;

  &:hover {
    background-color: ${stylers.alpha(tokens.color.black, 0.1)};
  }

  &:active {
    background-color: ${stylers.alpha(tokens.color.black, 0.2)};
  }
`;

const iconButtonStyles = css`
  ${({ size }) => iconButtonSizes[size]}
  ${({ kind }) => (kind === Button.Kinds.MINOR ? minorStyles : "")}

  .button__icon {
    color: inherit;
    margin: 0;
  }
`;

export default iconButtonStyles;