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

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

export default {
  container: css`
    background: ${tokens.backgroundColor.level0};
    border-radius: ${tokens.spaceSm};
    height: 6px;
    width: 100%;
  `,
  progress: css`
    border-radius: ${tokens.spaceSm};
    height: 100%;
    ${({ progress = 0, hasError, isCompleted }) => {
      let background = tokens.color.purple;

      if (isCompleted || hasError) {
        background = isCompleted ? tokens.color.green : tokens.color.orange;
      }

      return `
        width: ${progress}%;

opacity: 1;
`;

const closedCss = css`
  opacity: 0;
`;

const states = {
  entering: openedCss,
  entered: openedCss,
  exiting: closedCss,
  exited: closedCss,
};

export const Wrapper = styled.div`
  background-color: ${tokens.backgroundColor.level0};
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: all ${tokens.overlay.animationDuration}ms ease;
  ${({ state }) => states[state]};
`;

export const Header = styled(OriginalHeader)`
  flex: none;
`;

export const ContentWrapper = styled.div`