How to use the @paprika/tokens.spaceSm function in @paprika/tokens

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

  &.paprika-tag--is-dark {

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

const incompleteHeight = `${Number.parseInt(tokens.space, 10) * 5 + 1}px`;

export const itemStyles = css`
  border-bottom: 1px solid ${tokens.border.color};
  color: ${tokens.textColor.subtle};
  max-width: calc(100% - 36px); // 36px = indicatorSize + margin-right

  [role="button"] {
    font-weight: bold;
    margin-left: -${tokens.spaceSm};
    padding: ${tokens.space} ${tokens.spaceSm};
    width: calc(100% + ${tokens.spaceSm});
  }
`;

export const itemLabelStyles = css`
  ${stylers.truncateText}
`;

export const incompleteStyles = css`
  ${stylers.fontSize()}
  ${stylers.truncateText}

  border-bottom: 1px solid ${tokens.border.color};
  flex-grow: 1;
  font-weight: bold;
  height: ${incompleteHeight};
  line-height: ${incompleteHeight};

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

const activeStyles = css`
  border-bottom: ${tokens.spaceSm} solid ${tokens.color.green};
`;

const disabledStyles = css`
  border-bottom: 0;
  color: ${tokens.color.blackDisabled};
  cursor: not-allowed;
`;

export const tabStyles = css`
  ${stylers.fontSize()};
  background-color: ${tokens.color.white};
  border: 0;
  border-bottom: ${tokens.spaceSm} solid transparent;
  border-radius: 0;
  color: ${tokens.color.black};
  display: inline-block;

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;
    box-sizing: border-box;

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;

const defaultStyles = `
  background-color: ${tokens.color.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.card.borderRadius};
  box-shadow: ${tokens.shadow};
  color: ${tokens.textColor.default};
  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";

export default {
  container: css`
    background: ${tokens.backgroundColor.level0};
    border-radius: ${tokens.spaceSm};
    height: 6px;
    width: 100%;
  `,
  progress: css`
    border-radius: ${tokens.spaceSm};
    height: 100%;
    ${({ progress = 0, hasError, isCompleted }) => {
      let background = tokens.color.purple;

      if (isCompleted || hasError) {
        background = isCompleted ? tokens.color.green : tokens.color.orange;
      }

      return `
        width: ${progress}%;
        background: ${background};

import { css } from "styled-components";

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

export const iconStyles = css`
  margin-right: ${tokens.spaceSm};
  margin-top: 2px;
`;

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

export default errorMessageStyles;

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;
    if (isDisabled) {
      colorString = isDestructive ? "orangeDisabled" : "blackDisabled";
      return { color: tokens.color[colorString] };
    }