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

/** Function that provides DOM element to use as target for positioning the popover. */
  getPositioningElement: PropTypes.func,

  /** Function that provides the scrolling DOM element that contains the popover. */
  getScrollContainer: PropTypes.func,
};

const defaultProps = {
  align: "bottom",
  isDark: false,
  isEager: false,
  isOpen: null,
  defaultIsOpen: null,
  maxWidth: 320,
  onClose: null,
  offset: parseInt(tokens.spaceLg, 10),
  getPositioningElement: null,
  getScrollContainer: null,
};

class Popover extends React.Component {
  constructor(props) {
    super(props);

    this.hasListeners = false;
    this.$popover = React.createRef();
    this.$trigger = null;
    this.$tip = null; // this ref comes from a callback of the  component

    const portalNode = document.createElement("div");
    // portalNode.setAttribute("data-paprika-type", "Popover");
    this.$portal = document.body.appendChild(portalNode);

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 => ({
  [Kinds.DEFAULT]: `
    ${skeuomorphicStyles}

    background-image: linear-gradient(${tokens.color.blackLighten90}, ${tokens.color.blackLighten70});
    background-color: ${tokens.color.white};

/** If this value is true, focus will stay at the trigger when showing popover, and only can be closed when clicking outside or pressing escape key . Default is false. */
  shouldKeepFocus: PropTypes.bool,

  /** Number setting the z-index for the popover content */
  zIndex: PropTypes.number,
};

const defaultProps = {
  align: "bottom",
  isDark: false,
  isEager: false,
  isOpen: null,
  defaultIsOpen: null,
  maxWidth: parseInt(tokens.popover.maxWidth, 10),
  onClose: null,
  offset: parseInt(tokens.spaceLg, 10),
  getPositioningElement: null,
  getScrollContainer: null,
  shouldKeepFocus: false,
  zIndex: 1,
};

class Popover extends React.Component {
  constructor(props) {
    super(props);

    this.hasListeners = false;
    this.$popover = React.createRef();
    this.$trigger = null;
    this.$tip = null; // this ref comes from a callback of the  component

    const portalNode = document.createElement("div");

${props => !props.isVisible && visuallyHiddenStyles}

  * {
    box-sizing: border-box;
  }

  div[role="group"] {
    border: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    overflow: hidden;
    padding: 5px ${tokens.spaceLg} ${tokens.spaceSm} ${tokens.spaceLg};
  }
`;

export const labelStyles = css`
  align-items: center;
  border-radius: ${tokens.border.radius};
  cursor: pointer;
  display: flex;
  height: 22px;
  justify-content: center;
  width: 46px;

  &:hover {
    ${hoveredItemStyles}
  }

flex-grow: 1;
  flex-shrink: 1;
`;

const toastStyles = css`
  align-items: flex-start;
  background-color: ${({ kind }) => backgroundColors[kind]};
  border-color: ${({ kind }) => borderColors[kind]};
  border-radius: ${tokens.border.radius};
  border-style: solid;
  border-width: 1px;
  color: ${tokens.color.black};
  display: flex;
  font-weight: normal;
  margin-bottom: ${stylers.spacer(2)};
  padding: ${tokens.spaceLg};
  position: relative;
  text-align: left;
  transition: opacity 0.3s ease-out;
  z-index: ${({ zIndex }) => zIndex};

  ${stylers.fontSize()}
  ${stylers.lineHeight()}
  ${({ isFixed }) => isFixed && fixedStyles}
  ${({ kind }) => kind === "visually-hidden" && visuallyHidden}
`;

export default toastStyles;

    margin-top: ${({ isCollapsed }) => (isCollapsed ? "0" : tokens.spaceLg)};
    min-height: 0;

}

  .DayPicker_weekHeader {
    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;
    }

font-size: 12vh;
  font-weight: 300;
  letter-spacing: -0.04em;
  margin: 0 0 ${stylers.spacer(3)} 0;
`;

export const Heading2 = styled.h2`
  ${headingStyles};
  ${stylers.fontSize(1)};
  font-weight: 400;
  margin: 0;
  opacity: 0.8;
`;

export const Bar = styled.span`
  margin: 0 ${tokens.spaceLg};
  opacity: 0.3;
  font-weight: 300;
`;

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

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

export const itemStyles = css`
  color: ${tokens.textColor.subtle};
  display: flex;

  [data-pka-anchor="indicator"] {
    margin: ${tokens.space} ${tokens.spaceLg} 0 0;
  }
`;

export const activeItemStyles = css`
  display: flex;
  justify-content: space-between;
`;

export const activeLabelStyles = css`
  ${stylers.truncateText}
  
  color: ${tokens.color.blue};
`;

export const activeStatusStyles = css`
  ${stylers.fontSize(-1)}

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

const defaultStyles = `
  background-color: ${tokens.color.white};
  border: 1px solid ${tokens.border.color};
  border-radius: ${tokens.card.borderRadius};
  box-shadow: ${tokens.shadow};
  color: ${tokens.textColor.default};
  padding: ${tokens.space} ${tokens.spaceLg};
`;

const darkStyles = `
  background-color: ${tokens.color.black};
  border: 1px solid ${tokens.color.black};
  border-radius: ${tokens.border.radius};
  color: ${tokens.color.white};
  padding: ${tokens.spaceSm} ${tokens.space};
`;

const CardStyled = styled.div`
  ${props => (props.isDark ? darkStyles : defaultStyles)};

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