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

focusBorder: c.purple[60],
    focusBoxShadow: c.purple[30],
    icon: c.grey[50],
    iconFocus: c.grey[60],
    placeholder: c.grey[60],
  },
  widget: {
    background: c.white,
    color: c.text.primary,
  },
  newsletter: {
    background: c.white,
    border: c.grey[10],
    heading: c.grey[70],
    stripeColorA: c.red[40],
    stripeColorB: c.blue[40],
  },
  button: {
    primaryBg: c.purple[60],
    primaryText: c.white,
    primaryBorder: c.purple[60],
    secondaryBg: `transparent`,
    secondaryText: c.purple[50],
    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),

ui: {
        background: darkBackground,
        hover: c.purple[90],
        border: darkBorder,
      },
      widget: {
        background: darkBackground,
        border: darkBorder,
        color: c.white,
      },
      newsletter: {
        background: darkBackground,
        border: darkBorder,
        heading: c.white,
        stripeColorA: c.red[90],
        stripeColorB: c.blue[90],
      },
      search: {
        suggestionHighlightBackground: c.gatsby,
        suggestionHighlightColor: c.purple[20],
      },
      button: {
        secondaryBg: `transparent`,
        secondaryText: c.purple[40],
        secondaryBorder: c.purple[40],
      },
    },
  },
}

const si = {
  ...s,