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

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

export const title = css`
  background: ${tokens.backgroundColor.level0};
  border-bottom: 1px solid ${tokens.border.color};
  border-top-left-radius: ${tokens.border.radius};
  border-top-right-radius: ${tokens.border.radius};
  flex-basis: 50%;
  flex-grow: 1;
  font-size: ${stylers.fontSize(-1)};
  font-weight: bold;
  min-height: 20px;
  padding: ${tokens.spaceSm} ${tokens.space} ${tokens.spaceSm} ${tokens.spaceLg};
`;

export const flex = css`
  align-items: flex-start;
  display: flex;
  justify-content: center;

  & div:last-child {

export const headerCSS = props => `
  align-items: center;
  border-bottom: 1px solid ${tokens.border.color};
  box-sizing: border-box;
  display: flex;
  height: ${spacer(8)};
  justify-content: space-between;
  min-height: ${spacer(6)};
  padding: ${spacer(2)} ${spacer(3)};
  width: 100%;
  &:focus {
    outline: 0;
  }

  [data-pka-anchor="heading"] {
    ${fontSize(3)};
    font-weight: 700;
    margin: 0;
  }

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

export const arrowRightContainer = css`
  display: flex;
  height: ${stylers.spacer(4)};
  justify-content: flex-end;
  position: absolute;
  right: -${tokens.space};
  top: -7px;
  width: ${stylers.spacer(4)};
`;

export const arrowRightButton = css`
  align-items: center;
  border-left: 1px solid ${tokens.border.color};
  color: ${tokens.color.black};
  display: inline-flex;
  height: 100%;
  justify-content: center;
  width: 100%;

  &:hover:after {
    background: ${tokens.color.black};
    border-radius: 50%;
    content: "";
    height: ${stylers.spacer(3)};
    left: 50%;
    margin-left: -${tokens.spaceLg};
    margin-top: -${tokens.spaceLg};
    opacity: 0.1;
    pointer-events: none;

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

export const flex = css`
  align-items: flex-start;
  display: flex;
  justify-content: center;

  [data-pka-anchor="listbox-content-inline"]:last-child {
    border-left: 1px solid ${tokens.border.color};
  }
`;

export const container = css`
  border: 2px solid ${tokens.border.color};
  border-radius: 6px;
  position: relative;
  width: 100%;

  [data-pka-anchor="listbox-content-inline"] {
    border: 0;
    flex-basis: 50%;
    ${({ height }) => {
      return `
        min-height: ${height}px;
      `;

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

export const container = css`
  display: flex;
  flex-wrap: wrap;
  padding: ${tokens.space};
`;

export const optionStyles = css`
  align-items: center;
  background: ${tokens.backgroundColor.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.border.radius};
  box-sizing: border-box;
  color: ${tokens.color.black};
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  ${stylers.fontSize(-1)}
  justify-content: flex-start;
  margin: ${tokens.spaceSm};
`;

export const title = css`
  background: ${tokens.backgroundColor.level0};
  border-bottom: 1px solid ${tokens.border.color};
  border-top: 1px solid ${tokens.border.color};
  box-sizing: border-box;

import styled from "styled-components";
import { spacer } from "@paprika/stylers/lib/helpers";
import tokens from "@paprika/tokens/lib/tokens";

const Content = styled.div`
  background-color: ${tokens.color.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.border.radius};
  box-shadow: ${tokens.shadow};
  margin: ${spacer(2)};
  padding: ${spacer(2)};
`;

Content.displayName = "Takeover.Content";

export default Content;

border-top-right-radius: ${tokens.border.radius};
  flex-basis: 50%;
  flex-grow: 1;
  font-size: ${stylers.fontSize(-1)};
  font-weight: bold;
  min-height: 20px;
  padding: ${tokens.spaceSm} ${tokens.space} ${tokens.spaceSm} ${tokens.spaceLg};
`;

export const flex = css`
  align-items: flex-start;
  display: flex;
  justify-content: center;

  & div:last-child {
    border-left: 1px solid ${tokens.border.color};
  }
`;

import styled from "styled-components";
import { spacer } from "@paprika/stylers/lib/helpers";
import tokens from "@paprika/tokens/lib/tokens";

const Content = styled.div`
  background-color: ${tokens.color.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.border.radius};
  box-shadow: ${tokens.shadow};
  margin: ${spacer(2)};
  padding: ${spacer(2)};
`;

Content.displayName = "Takeover.Content";

export default Content;

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

export const footerCSS = css`
  align-items: center;
  background: ${tokens.color.white};
  border-top: 1px solid ${tokens.border.color};
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  height: 48px;
  padding: 0;
  right: 0;
  transition: opacity 0.3s ease-in;
  width: 100%;
  ${props => {
    return props.isSticky ? "position: absolute;" : "position: relative;";
  }}
`;

width: 100%;
  z-index: 1;

  &:focus {
    outline: 0;
  }

  ${props => kind[props.kind]}
`;

export const Heading = styled(OriginalHeading)`
  margin: 0 0 0 ${spacer(2)};
`;

export const CloseButtonWrapper = styled.div`
  border-left: 1px solid ${tokens.border.color};
  padding: ${spacer(1)};
`;