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

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

const kindStyles = props => ({

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};

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

const dividerStyles = css`
  border-top: 1px solid ${tokens.border.color};
  display: block;
  margin: ${tokens.space} 0;
`;

export default dividerStyles;

export const spacer = numSpaces => `${Number.parseInt(tokens.space, 10) * numSpaces}px`;

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;
}

&.spinner--large .spinner__caption {
  ${stylers.fontSize()};

${stylers.fontSize()}
  
  color: ${tokens.color.black};
  display: block;
  line-height: ${stylers.spacer(3)};
  width: 100%;

  .collapsible__label {
    display: inline-block;
    border-radius: ${tokens.border.radius};
    margin-left: -${tokens.spaceSm};
    margin-right: -${tokens.spaceSm};
    padding-left: ${tokens.spaceSm};
    padding-right: ${tokens.spaceSm};
    width: calc(100% + ${tokens.space});
  }

  .collapsible__icon--left {
    margin-right: ${tokens.spaceSm};
  }

  .collapsible__icon--right {
    float: right;
    margin-left: ${tokens.spaceSm};
  }
  
  .collapsible__label--is-toggle-icon-only {
    margin: 0;
    width: auto;
  }

const textareaStyles = () => `
  position: relative;

  .form-textarea__textarea {
    ${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.color.black};
    display: block;
    margin: 0;
    min-height: 80px;
    padding: ${tokens.space};
    resize: none;
    width: 100%;

    &:hover:not(.is-disabled):not(.is-readonly):not([disabled]) {
      border-color: ${tokens.color.blackLighten30};
    }

    &.form-element--has-error {
      border-color: ${tokens.color.orange};
    }

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

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;

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

const pseudoElement = css`
  background: ${tokens.color.blackLighten60};
  content: "";
  display: inline-block;
  flex-grow: 1;
  height: 1px;
`;

const textDividerStyles = css`
  &:after {
    ${pseudoElement}
    margin-left: ${tokens.space};
  }
`;

export const dividerCSS = css`
  align-items: center;
  color: ${tokens.color.blackLighten20};
  display: flex;
  justify-content: center;
  padding: ${tokens.spaceSm};
  width: 100%;

  ${stylers.fontSize(-1)};

  ${({ hasChildren }) => hasChildren && textDividerStyles}
`;

const getLabelLeftPadding = (radioSize, hasLabel) => {
  return hasLabel ? `${toInt(radioSize) + toInt(tokens.space)}px` : radioSize;
};