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

background: c.grey[5],
    hover: c.purple[5],
    border: c.grey[20],
  },
  link: {
    color: c.purple[50],
    border: c.purple[30],
    hoverBorder: c.purple[50],
    hoverColor: c.purple[60],
  },
  icon: {
    dark: c.purple[60],
    neutral: c.grey[50],
    neutralLight: c.grey[30],
    background: c.white,
    accent: c.yellow[60],
    light: c.purple[10],
    lightActive: c.purple[20],
  },
  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,

secondaryBorder: c.purple[40],
  },
  modes: {
    dark: {
      background: darkBackground,
      text: c.grey[30],
      heading: c.whiteFade[80],
      textMuted: c.grey[40],
      banner: hex2rgba(c.purple[90], 0.975),
      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),
      },