How to use @paprika/tokens - 10 common examples

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};
    border-radius: ${tokens.border.radius};
    border: 1px solid ${tokens.border.color};
    color: ${tokens.textColor.subtle};
  `,

  red: `
    border-radius: 50px;
    color: ${tokens.color.white};
    padding: 0 ${tokens.spaceSm};
    background: ${tokens.color.orangeDarken10};
    border: 1px solid ${tokens.color.orangeDarken10};
  `,

  blue: `
    border-radius: 50px;
    color: ${tokens.color.white};

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

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};
    border-radius: ${tokens.border.radius};
    border: 1px solid ${tokens.border.color};
    color: ${tokens.textColor.subtle};
  `,

  red: `
    border-radius: 50px;
    color: ${tokens.color.white};
    padding: 0 ${tokens.spaceSm};
    background: ${tokens.color.orangeDarken10};
    border: 1px solid ${tokens.color.orangeDarken10};
  `,

  blue: `
    border-radius: 50px;
    color: ${tokens.color.white};
    padding: 0 ${tokens.spaceSm};

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

margin: 0;
    outline: none;
    padding: 0 ${stylers.spacer(3)} 0 ${stylers.spacer(1)};
    width: 100%;

    -webkit-appearance: none;
    -moz-appearance: none;

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

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

  // 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 {

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;
    padding: 0 0 0 ${tokens.space};
    padding-right: ${({ hasClearButton }) => (hasClearButton ? stylers.spacer(3) : tokens.space)};
    transition: box-shadow 0.2s, color 0.2s;
    width: 100%;

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

    &::-ms-clear {
      display: none;
    }
  }

  // Sizes

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

  &.form-input--medium input.form-input__input {

line-height: 1;
    margin: 0;
    outline: none;
    padding: 0 ${stylers.spacer(3)} 0 ${stylers.spacer(1)};
    width: 100%;

    -webkit-appearance: none;
    -moz-appearance: none;

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

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

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

// Icons
//

const spinKeyframes = keyframes`
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
`;

const iconColors = {
  [Kinds.DEFAULT]: tokens.textColor.icon,
  [Kinds.PRIMARY]: tokens.color.white,
  [Kinds.SECONDARY]: tokens.color.white,
  [Kinds.DESTRUCTIVE]: tokens.color.white,
  [Kinds.FLAT]: tokens.textColor.icon,
  [Kinds.MINOR]: tokens.textColor.icon,
  [Kinds.LINK]: tokens.textColor.icon,
};

function getIconColor(props) {
  if (props.isDisabled) return tokens.color.blackDisabled;
  return iconColors[props.kind];
}

export const iconStyles = props => css`
  align-items: center;
  color: ${getIconColor(props)};