How to use @paprika/stylers - 10 common examples

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

&, &: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 tokens from "@paprika/tokens";
import stylers from "@paprika/stylers";
import { css, keyframes } from "styled-components";
import { ShirtSizes } from "@paprika/helpers/lib/customPropTypes";
import Kinds from "./ButtonKinds";

// Common

const commonStyles = `
  ${stylers.alignMiddle}
  ${stylers.lineHeight(-1)}
  appearance: none;
  border-radius: ${tokens.button.borderRadius};
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: ${tokens.fontFamily.default};
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;

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

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

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

  // Icons

  .form-input__icon,
  .form-input__clear {
    ${stylers.z(1)};
    color: ${tokens.textColor.icon};
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .form-input__icon {
    ${({ size }) => iconStyles[size]};

    svg {
      vertical-align: middle;
    }
  }

  .form-input__clear {
    border-radius: ${tokens.border.radius};

}

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

  .form-textarea__aria-label {
    ${stylers.visuallyHidden}
  }

  // Sizes

  &.form-textarea--small .form-textarea__textarea {
    ${stylers.fontSize(-2)};
  }

  &.form-textarea--medium .form-textarea__textarea {
    ${stylers.fontSize(-1)};
  }

  &.form-textarea--large .form-textarea__textarea {
    ${stylers.fontSize()};
  }

box-shadow: ${tokens.highlight.active.noBorder.boxShadow}, inset 0 1px 1px 0 rgba(0, 0, 0, 0.1),
      inset 0 1px 4px 0 rgba(0, 0, 0, 0.3);
    transform: scale(0.98);
  }
`;

const skeuomorphicStyles = `
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition-duration: 0.2s;
  transition-property: border;
`;

const coloredButtonStyles = `
  color: ${tokens.color.white};
  text-shadow: 0 1px 1px ${stylers.alpha(tokens.color.blackPure, 0.2)};
`;

const textButtonStyles = `
  background: none;
  border-color: transparent;
`;

// States

const disabledStyles = `
  box-shadow: none;
  color: ${tokens.color.blackDisabled};
  cursor: not-allowed;
  text-decoration: none;
  text-shadow: none;

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

// Common Storybook story styles

export const Story = styled.div`
  padding: ${stylers.spacer(3)};

  h1 {
    margin-top: 0;
  }
`;

export const CenteredStory = styled.div`
  ${stylers.alignMiddle}
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
`;

export const Rule = styled.hr`
  border: none;
  border-bottom: 1px solid ${tokens.border.color};
  margin: ${stylers.spacer(4)} 0;
`;

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