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

import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";
import { css, keyframes } from "styled-components";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import Kinds from "./ButtonKinds";

// Common

const commonStyles = `
  ${stylers.alignMiddle}
  ${stylers.lineHeight(-1)}
  appearance: none;
  border-radius: ${tokens.button.borderRadius};
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: ${tokens.fontFamily.default};
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;

  &:focus {
    box-shadow: ${tokens.highlight.active.noBorder.boxShadow};
    border-color: ${tokens.highlight.active.noBorder.borderColor};

  ${props => stylers.lineHeight(props.scale)}

import { css } from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";

const itemStyles = css`
  ${stylers.fontSize()};
  ${stylers.lineHeight()}
  cursor: pointer;
  display: block;
  font-family: ${tokens.fontFamily.default};
  font-weight: normal;
  padding: ${tokens.spaceSm} ${stylers.spacer(2)};
  text-decoration: none;

  &:focus {
    box-shadow: ${tokens.highlight.active.withBorder.insetBoxShadow};
    outline: none;
    position: relative;
    ${stylers.z(1)}
  }

  ${({ isDestructive, isDisabled }) => {
    let colorString;

import { css } from "styled-components";

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

const descriptionStyles = css`
  ${stylers.lineHeight(-1)}
  color: ${tokens.color.blackLighten20};
  margin: ${tokens.spaceSm} 0 0 0;
`;

export default descriptionStyles;

export const WelcomeBody = styled.div`
  ${stylers.alignMiddle}
  flex-direction: column;
  height: 30%;
  padding: ${stylers.spacer(6)} ${stylers.spacer(3)};
  text-align: center;
  width: 100%;
`;

const headingShadow = Array(8)
  .fill("0 0 12px #f5f5f5")
  .join(",");

const headingStyles = `
  ${stylers.lineHeight(-2)};
  color: ${tokens.color.black};
  text-shadow: ${headingShadow}; 
`;

export const Heading1 = styled.h1`
  ${headingStyles};
  font-size: 12vh;
  font-weight: 300;
  letter-spacing: -0.04em;
  margin: 0 0 ${stylers.spacer(3)} 0;
`;

export const Heading2 = styled.h2`
  ${headingStyles};
  ${stylers.fontSize(1)};
  font-weight: 400;

border-color: ${({ kind }) => borderColors[kind]};
  border-radius: ${tokens.border.radius};
  border-style: solid;
  border-width: 1px;
  color: ${tokens.color.black};
  display: flex;
  font-weight: normal;
  margin-bottom: ${stylers.spacer(2)};
  padding: ${tokens.spaceLg};
  position: relative;
  text-align: left;
  transition: opacity 0.3s ease-out;
  z-index: ${({ zIndex }) => zIndex};

  ${stylers.fontSize()}
  ${stylers.lineHeight()}
  ${({ isFixed }) => isFixed && fixedStyles}
  ${({ kind }) => kind === "visually-hidden" && visuallyHidden}
`;

export default toastStyles;

}

&.spinner--medium .spinner__visual {
  border-width: 3px;
  height: ${stylers.spacer(6)};
  width: ${stylers.spacer(6)};
}

&.spinner--large .spinner__visual {
  border-width: 4px;
  height: ${stylers.spacer(9)};
  width: ${stylers.spacer(9)};
}

.spinner__caption {
  ${stylers.lineHeight(-2)}
  ${stylers.truncateText}
  color: ${tokens.color.blackLighten20};
  font-weight: normal;
  margin: ${tokens.space} auto 0 auto;
  overflow: hidden;
  text-align: center;
}

&.spinner--small .spinner__caption {
  ${stylers.fontSize(-3)};
  max-width: 210px;
}

&.spinner--medium .spinner__caption {
  ${stylers.fontSize(-1)};
  max-width: 240px;

padding: ${tokens.space} ${tokens.spaceLg};
`;

const darkStyles = `
  background-color: ${tokens.color.black};
  border: 1px solid ${tokens.color.black};
  border-radius: ${tokens.border.radius};
  color: ${tokens.color.white};
  padding: ${tokens.spaceSm} ${tokens.space};
`;

const CardStyled = styled.div`
  ${props => (props.isDark ? darkStyles : defaultStyles)};

  ${stylers.fontSize(-1)};
  ${stylers.lineHeight()};

  overflow: hidden;
`;

export default CardStyled;

import { css } from "styled-components";
import tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";

export const confirmStyles = css`
  padding: ${stylers.spacer(2)};
`;

export const confirmHeaderStyles = css`
  ${stylers.fontSize()}
  font-weight: bold;
`;

export const confirmDescriptionStyles = css`
    ${stylers.lineHeight()}
    margin: ${tokens.space} 0;
`;

export const confirmFooterStyles = css`
  margin-top: ${stylers.spacer(2)};

  span[role="button"] {
    margin-right: ${tokens.space};
  }
`;

import { css } from "styled-components";

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

export const ruleStyles = css`
  color: ${tokens.textColor.subtle};
  font-weight: normal;
`;

const labelStyles = css`
  ${stylers.lineHeight(-1)}
  color: ${tokens.textColor.default};
  font-weight: bold;
  margin: 0 0 ${tokens.spaceSm} 0;

  ${({ isInline }) => isInline && `padding-right: ${stylers.spacer(1)};`}

  ${({ isVisuallyHidden }) => isVisuallyHidden && stylers.visuallyHidden}

  label {
    margin-right: ${tokens.spaceSm};
  }
`;

export default labelStyles;