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

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};
    outline: none;
  }

  &:active {
    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);
  }

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

const itemStyles = css`
  ${stylers.fontSize()};
  ${stylers.lineHeight()}
  cursor: pointer;
  display: block;
  font-family: ${tokens.fontFamily.default};
  font-weight: normal;
  padding: ${tokens.spaceSm} ${stylers.spacer(2)};
  text-decoration: none;

  &:focus {
    box-shadow: ${tokens.highlight.active.withBorder.insetBoxShadow};
    outline: none;
    position: relative;
    ${stylers.z(1)}
  }

  ${({ isDestructive, isDisabled }) => {
    let colorString;
    if (isDisabled) {
      colorString = isDestructive ? "orangeDisabled" : "blackDisabled";
      return { color: tokens.color[colorString] };

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

import CalendarBaseStyle from "./CalendarBase.styles";

const CalendarStyled = styled.div`
  ${CalendarBaseStyle}

  * {
    box-sizing: border-box;
    font-family: ${tokens.fontFamily.default};
  }

  .DayPicker_transitionContainer__horizontal {
    transition: none;
  }

  .DayPicker_weekHeader {
    top: 46px;

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

  .CalendarMonth_caption {
    background-color: ${tokens.color.blackLighten80};