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

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

top: 46px;

    small {
      ${stylers.fontSize(-1)};
    }
  }

  .CalendarMonth_caption {
    background-color: ${tokens.color.blackLighten80};
    height: ${stylers.spacer(5)};
    line-height: ${stylers.spacer(5)};
    padding: 0;
    margin-bottom: ${tokens.spaceLg};
    margin-left: -9px;
    margin-right: -10px;
    border-bottom: 1px solid ${tokens.border.color};
  }

  .CalendarDay {
    border: 0;
    padding: 0;
    vertical-align: middle;

    &:hover,
    &:focus,
    &:active {
      background-color: ${tokens.color.white};
      border: none;
    }

    &.CalendarDay__selected {
      background-color: ${tokens.color.white};

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

const indicatorSize = stylers.spacer(3);
const topPadding = tokens.space;
const activeDotSize = tokens.space;

const lineStyles = css`
  ${stylers.z(1)}

  border-left: 2px solid ${tokens.border.color};
  content: "";
  height: calc(100% - ${indicatorSize} + ${topPadding});
  left: 50%;
  position: absolute;
  top: ${indicatorSize};
  transform: translateX(-50%);
`;

const activeLineStyles = css`
  ${lineStyles}
  ${stylers.z(2)}

  border-color: ${tokens.color.blue};
  height: calc((100% - ${indicatorSize} + ${topPadding}) / 2);
`;

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

export const TagStyled = styled.span`
  background-color: ${tokens.color.blackLighten70};
  border-radius: ${tokens.border.radius};
  color: ${tokens.color.black};
  display: inline-block;
  line-height: 1;
  padding: 3px;
  position: relative;

  &:focus {
    outline: none;
  }

  [role="button"] {
    height: auto;
    line-height: 1;
    min-height: 0;
    width: auto;
    margin-top: -2px;

`;

export const itemHandleStyles = css`
  ${stylers.fontSize(3)};
  align-items: center;
  color: ${tokens.textColor.icon};
  display: flex;
  line-height: 1;
  padding: 0 ${tokens.spaceSm} 0 0;
`;

export const itemIndexStyles = css`
  ${stylers.fontSize()};
  align-self: center;
  background: ${tokens.color.blackLighten60};
  border-radius: ${tokens.border.radius};
  color: ${tokens.color.black};
  flex-shrink: 0;
  height: ${stylers.spacer(4)};
  line-height: ${stylers.spacer(4)};
  margin: 0 ${tokens.space} 0 0;
  min-width: 1.5em;
  padding: 0 2px;
  text-align: center;
`;

export const itemBodyStyles = css`
  align-items: center;
  display: flex;
  flex-grow: 1;
  min-width: 0;
`;

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

cursor: pointer;
      display: inline-block;
      margin: 0;
      ${({ size, hasLabel }) => styles[size].labelStyles(hasLabel)};
      position: relative;
    }

    & + label::before,
    & + label > .radio-icon {
      position: absolute;
      top: 0;
    }

    & + label::before {
      background: ${tokens.color.white};
      border: 2px solid ${tokens.border.color};
      content: "";
      left: 0;
      ${z(1)};
      ${({ size }) => styles[size].radioStyles};
    }

    & + label:hover::before {
      border: 2px solid ${tokens.color.black};
    }

    & + label > .radio-icon {
      color: ${tokens.color.black};
      ${({ size }) => styles[size].radioIconStyles};
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%);

const collapsibleStyles = css`
  &, * {
    box-sizing: border-box;
  }

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

import { css } from "styled-components";

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

import { hoveredItemStyles, selectedItemStyles, visuallyHiddenStyles } from "../../shared.styles";

export const actionBarStyles = css`
  align-items: center;
  background: ${tokens.color.blackLighten80};
  border-top: 1px solid ${tokens.border.color};
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  height: ${stylers.spacer(5)};
  padding-left: ${tokens.spaceLg};
  position: absolute;
  width: 100%;

  > [type="button"] {
    flex-shrink: 0;

    &:last-child {
      margin-left: ${tokens.spaceSm};
    }
  }
`;

function Tip(props) {
  const { zIndex, ...moreProps } = props;

  const isDark = React.useContext(ThemeContext);
  const { content, tip, refTip, isOpen, portalElement } = React.useContext(PopoverContext);
  const borderColor = isDark ? tokens.color.black : tokens.border.color;
  const backgroundColor = isDark ? tokens.color.black : tokens.color.white;

  return ReactDOM.createPortal(
    
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12" width="100%" height="100%">
        <polygon fill="{borderColor}" points="0 12 12 12 6 6"></polygon>
        <polygon fill="{backgroundColor}" points="1 12 11 12 6 7"></polygon>
      </svg>