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

&, &:hover {
    background: none;
    border-color: transparent;
  }
`;

const activeStyles = `
  box-shadow: ${tokens.highlight.active.noBorder.boxShadow};
  border-color: ${tokens.highlight.active.noBorder.borderColor};
`;

// Sizes

const sizeStyles = {
  [ShirtSizes.SMALL]: `
    ${stylers.fontSize(-2)};
    min-height: ${stylers.spacer(3)};
    padding: 3px ${tokens.space};
  `,
  [ShirtSizes.MEDIUM]: `
    ${stylers.fontSize(-1)};
    min-height: ${stylers.spacer(4)};
    padding: 6.5px ${tokens.spaceLg};
  `,
  [ShirtSizes.LARGE]: `
    ${stylers.fontSize()};
    min-height: ${stylers.spacer(5)};
    padding: 9px ${stylers.spacer(2)};
  `,
};

// Kinds

width: auto;
    margin-top: -2px;
  }

  // Sizes

  &.paprika-tag--small {
    font-size: 12px; // doesn't exist in stylers.fontSize
  }

  &.paprika-tag--medium {
    ${stylers.fontSize(-1)};
  }

  &.paprika-tag--large {
    ${stylers.fontSize()};
    padding: ${tokens.spaceSm};
  }

  // Read Only

  &.paprika-tag--is-read-only {
  }

  // Disabled

  &.is-disabled {
    color: ${tokens.color.blackLighten40};
  }

  // Dark Style

// Sizes

const sizeStyles = {
  [ShirtSizes.SMALL]: `
    ${stylers.fontSize(-2)};
    min-height: ${stylers.spacer(3)};
    padding: 3px ${tokens.space};
  `,
  [ShirtSizes.MEDIUM]: `
    ${stylers.fontSize(-1)};
    min-height: ${stylers.spacer(4)};
    padding: 6.5px ${tokens.spaceLg};
  `,
  [ShirtSizes.LARGE]: `
    ${stylers.fontSize()};
    min-height: ${stylers.spacer(5)};
    padding: 9px ${stylers.spacer(2)};
  `,
};

// Kinds

const kindStyles = props => ({
  [Kinds.DEFAULT]: `
    ${skeuomorphicStyles}

    background-image: linear-gradient(${tokens.color.blackLighten90}, ${tokens.color.blackLighten70});
    background-color: ${tokens.color.white};
    border-color: ${tokens.border.color};
    color: ${tokens.color.black};

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

const counterSizeStyles = {
  small: `
    ${stylers.fontSize(-3)}
    height: ${tokens.counter.small};
    line-height: 15px;
    min-width: ${tokens.counter.small};
  `,

  medium: `
    font-size: 12px; // This is an exception that is missing from the font-scale
    height: ${tokens.counter.medium};
    line-height: ${tokens.counter.small};
    min-width: ${tokens.counter.medium};
  `,
};

const counterColorStyles = {
  grey: `
    background: ${tokens.color.blackLighten80};

import { css } from "styled-components";

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

const FontSizes = {
  small: stylers.fontSize(-2),
  medium: stylers.fontSize(-1),
  large: stylers.fontSize(0),
};

export const inlineContainerStyles = css`
  flex-grow: 1;
`;

const inlineFormElementStyles = css`
  align-items: baseline;
  display: flex;
`;

export const formElementChildStyle = css`
  margin: ${tokens.space} 0;
`;

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)}`,

  HEADING_LEVEL_3: `
     ${stylers.fontSize(3)}`,

  HEADING_LEVEL_4: `
     ${stylers.fontSize(1)}`,

  HEADING_LEVEL_5: `
    ${stylers.fontSize()}
    margin: ${tokens.space} 0;`,

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)}`,

  HEADING_LEVEL_3: `
     ${stylers.fontSize(3)}`,

  HEADING_LEVEL_4: `
     ${stylers.fontSize(1)}`,

  HEADING_LEVEL_5: `
    ${stylers.fontSize()}
    margin: ${tokens.space} 0;`,

  HEADING_LEVEL_6: `
    ${stylers.fontSize(-1)}
    margin: ${tokens.space} 0;
  }`,
};

const underline = level => {
  let result = `border-bottom: 1px solid ${tokens.border.color};`;

import stylers from "@paprika/stylers";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";

const iconStyles = {
  [ShirtSizes.SMALL]: `
    ${stylers.fontSize(-2)}
    margin-left: 3px;
    padding: 0 ${tokens.spaceSm};
  `,
  [ShirtSizes.MEDIUM]: `
    ${stylers.fontSize()}
    margin-left: 2px;
    padding: 0 ${tokens.spaceSm};
  `,
  [ShirtSizes.LARGE]: `
    ${stylers.fontSize(2)}
    margin-left: ${tokens.spaceSm};
    padding: 0 ${tokens.spaceSm};
  `,
};

const inputStyles = css`
  line-height: 1;
  position: relative;

  input.form-input__input {
    ${stylers.placeholders}

    background-color: ${tokens.color.white};
    border: 1px solid ${tokens.border.color};
    border-radius: ${tokens.border.radius};
    box-shadow: none;

import { css } from "styled-components";

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

const FontSizes = {
  small: stylers.fontSize(-2),
  medium: stylers.fontSize(-1),
  large: stylers.fontSize(0),
};

export const inlineContainerStyles = css`
  flex-grow: 1;
`;

const inlineFormElementStyles = css`
  align-items: baseline;
  display: flex;
`;

export const formElementChildStyle = css`
  margin: ${tokens.space} 0;
`;

const formElementStyles = css`

${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;
  margin: 0;
  opacity: 0.8;
`;

export const Bar = styled.span`
  margin: 0 ${tokens.spaceLg};
  opacity: 0.3;
  font-weight: 300;
`;