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

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: {
    suggestionHighlightBackground: c.lavender,
    suggestionHighlightColor: c.gatsby,
  },
  sidebar: {
    itemHoverBackground: hex2rgba(c.purple[20], 0.275),
    itemBackgroundActive: `transparent`,
    itemBorderColor: `transparent`, // `rgba(0,0,0,0.05)`,
    activeSectionBackground: hex2rgba(c.purple[20], 0.15),
    itemBorderActive: c.purple[10],
  },
  themedInput: {
    background: c.grey[10],
    backgroundFocus: c.white,
    focusBorder: c.purple[60],
    focusBoxShadow: c.purple[30],
    icon: c.grey[50],
    iconFocus: c.grey[60],