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

// Sizes

  &.form-select--small .form-select__select {
    ${stylers.fontSize(-2)}
    height: ${stylers.spacer(3)};
  }

  &.form-select--medium .form-select__select {
    ${stylers.fontSize(-1)}
    height: ${stylers.spacer(4)};
  }

  &.form-select--large .form-select__select {
    ${stylers.fontSize()}
    height: ${stylers.spacer(5)};
  }

  // Placeholder

  &.form-select--placeholder .form-select__select {
    ${stylers.placeholder}
  }

  // Disabled

  &.form-select--is-disabled .form-select__select {
    ${stylers.disabledFormStyles}
    ${selectArrow(tokens.color.blackLighten60)}
  }

  // Read Only

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

const defaultHeadingStyles = `
  align-items: center;
  color: inherit;
  display: flex;
  font-weight: 700;
  letter-spacing: 0;
  ${stylers.lineHeight(-1)};
  margin: ${stylers.spacer(2)} 0;

  &:focus {
    outline: none;
  }
`;

const heading = {
  HEADING_LEVEL_1: `
    ${stylers.fontSize(7)}
    ${stylers.lineHeight(-2)}
    font-weight: 400;`,

  HEADING_LEVEL_2: `
    ${stylers.fontSize(5)}
    ${stylers.lineHeight(-2)}`,

color: ${tokens.textColor.subtle};
  margin: ${tokens.space} 0;
  max-height: 420px;
  overflow: auto;
  padding: 0 ${tokens.space} 0 0;

  dt {
    ${stylers.fontSize(-1)}
    
    display: block;
    font-weight: bold;
    margin-bottom: ${tokens.space};
  }

  dd {
    margin: 0 0 ${stylers.spacer(3)} 0;
    padding: 0;

    &:last-child {
      margin-bottom: 0;
    }

    p {
      margin: ${tokens.space} 0;
    }
  }
`;

export default responsesStyles;

font-size: 14px;
    height: ${stylers.spacer(3)};
    line-height: ${Number.parseInt(tokens.space, 10) * 3 - 2}px;
    padding: 0;
    width: ${stylers.spacer(3)};
  `,
  [ShirtSizes.MEDIUM]: css`
    font-size: 18px;
    height: ${stylers.spacer(4)};
    line-height: ${Number.parseInt(tokens.space, 10) * 4 - 2}px;
    padding: 0;
    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)};
  }

import Button from "@paprika/button";
import Popover from "../../src";

const PositioningElementStyled = styled.div`
  ${stylers.alignMiddle}
  ${stylers.fontSize(3)}

  border: 2px dashed ${tokens.color.purpleLighten30};
  color: ${tokens.color.purple};
  font-weight: 100;

  height: 150px;
  letter-spacing: 0.05em;

  margin: 30px 0 0 120px;
  padding: ${stylers.spacer(2)};
  text-align: center;
  width: 150px;
`;

const getPositioningElement = () => document.querySelector("#another-div");

const popoverProps = () => ({
  align: select("align", ["bottom", "top", "right", "left"], "bottom"),
});

const ExampleStory = props => (
  
    <div>
      
        
          <button>Open Popover</button></div>

    padding-left: ${({ size }) => (size === ShirtSizes.LARGE ? stylers.spacer(4) : stylers.spacer(3))};
  }

justify-content: center;
  width: 100%;

  &:hover:after {
    background: ${tokens.color.black};
    border-radius: 50%;
    content: "";
    height: ${stylers.spacer(3)};
    left: 50%;
    margin-left: -${tokens.spaceLg};
    margin-top: -${tokens.spaceLg};
    opacity: 0.1;
    pointer-events: none;
    position: absolute;
    top: 50%;
    width: ${stylers.spacer(3)};
  }

  ${({ isParentSelectable }) => {
    return isParentSelectable
      ? ""
      : css`
          background: transparent;
          border: 1px solid transparent;
          border-radius: ${tokens.border.radius};
        `;
  }}
`;

export const labelContainer = css`
  align-items: center;
  cursor: default;

height: 29px;
    }
  `,
};

const UnderlaySizeStyles = {
  small: css`
    height: ${stylers.spacer(2)};
    width: 28px;
  `,
  medium: css`
    height: ${stylers.spacer(3)};
    width: 44px;
  `,
  large: css`
    height: ${stylers.spacer(4)};
    width: 60px;
  `,
};

export const KnobStyled = styled.span`
  background-color: ${tokens.color.white};
  border-radius: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  display: inline-block;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.25s ease;
`;

export const UnderlayStyled = styled.span`

align-items: center;
  color: ${tokens.textColor.icon};
  display: flex;
  line-height: 1;
  padding: 0 ${tokens.spaceSm} 0 0;
`;

export const itemIndexStyles = css`
  ${stylers.fontSize()};
  align-self: center;
  background: ${tokens.color.blackLighten60};
  border-radius: ${tokens.border.radius};
  color: ${tokens.color.black};
  flex-shrink: 0;
  height: ${stylers.spacer(4)};
  line-height: ${stylers.spacer(4)};
  margin: 0 ${tokens.space} 0 0;
  min-width: 1.5em;
  padding: 0 2px;
  text-align: center;
`;

export const itemBodyStyles = css`
  align-items: center;
  display: flex;
  flex-grow: 1;
  min-width: 0;
`;

export const itemCloseStyles = css`
  align-items: center;
  display: flex;

`;

export const Small = styled.small`
  color: ${tokens.color.blackLighten40};
`;

export const Tagline = styled.div`
  color: ${tokens.textColor.subtle};
  font-style: italic;
`;

const LargeGap = styled.div`
  height: 120px;
`;
const SmallGap = styled.div`
  height: ${stylers.spacer(2)};
`;
const InlineGap = styled.div`
  display: inline-flex;
  width: ${tokens.space};
`;
export const Gap = styled.div`
  height: ${stylers.spacer(5)};
`;
Gap.Large = LargeGap;
Gap.Small = SmallGap;
Gap.Inline = InlineGap;

export const breaklines = num =&gt; [...Array(num).keys()].map(index =&gt; <br>);