How to use the gatsby-design-tokens.colors.teal function in gatsby-design-tokens

input: {
    background: c.white,
    backgroundFocus: c.white,
    border: c.grey[30],
    focusBorder: c.white,
    focusBoxShadow: c.purple[60],
    icon: c.grey[50],
    iconFocus: c.grey[60],
    placeholder: c.text.placeholder,
  },
  // new tokens
  card: {
    background: c.white,
    color: c.grey[50],
    header: c.black,
    starterLabelBackground: c.teal[5],
    starterLabelText: c.teal[70],
    pluginLabelBackground: c.orange[5],
    pluginLabelText: c.orange[90],
  },
  modal: {
    background: c.white,
    overlayBackground: hex2rgba(c.white, 0.95),
  },
  navigation: {
    background: hex2rgba(c.white, 0.985),
    linkDefault: c.grey[70],
    linkActive: c.purple[50],
    linkHover: c.gatsby,
    socialLink: c.grey[40],
  },
  search: {

muted: c.grey[90],
      icon: {
        dark: c.purple[50],
        neutral: c.grey[70],
        neutralLight: c.grey[90],
        background: c.darkBorder,
        accent: c.yellow[50],
        light: c.grey[90],
        lightActive: c.purple[90],
      },
      card: {
        background: c.grey[90],
        color: c.whiteFade[70],
        header: c.white,
        starterLabelBackground: hex2rgba(c.teal[90], 0.125),
        starterLabelText: c.teal[10],
        pluginLabelBackground: hex2rgba(c.orange[90], 0.125),
        pluginLabelText: c.orange[10],
      },
      modal: {
        background: darkBackground,
        overlayBackground: hex2rgba(darkBackground, 0.95),
      },
      code: {
        // ui
        background: `#1b191f`, // another meh
        backgroundInline: darkBorder,
        border: c.grey[90],
        lineHighlightBackground: hex2rgba(c.purple[90], 0.25),
        lineHighlightBorder: c.purple[90],
        scrollbarThumb: c.grey[70],
        scrollbarTrack: c.grey[90],