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

// https://theme-ui.com/theme-spec#typography
// TODO adjust keys in gatsby-design-tokens
fontsTokens.body = fontsTokens.system
fontsTokens.heading = fontsTokens.header

const fontSizesTokens = fs.map(token => `${token / 16}rem`)
const spaceTokens = sp.map(token => `${token / 16}rem`)

const lineHeightsTokens = {
  ...lh,
  body: lh.default,
  heading: lh.dense,
}

const darkBackground = `#131217` // meh
const darkBorder = c.grey[90]
// const darkBackground = c.purple[90]
// const darkBorder = c.purple[80]
const shadowDarkBase = `19,18,23`
const shadowDarkFlares = `0,0,0`

const fweights = {
  body: fw[0],
  bold: fw[1],
  medium: `600`,
  heading: fw[1],
  headingPrimary: fw[2],
}

const col = {
  ...c,
  // https://theme-ui.com/theme-spec#color

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],
        copyButton: c.grey[40],
        // tokens
        add: c.green[50],
        comment: c.grey[30],
        cssString: c.orange[50],
        invisibles: `#e0d7d1`,
        keyword: c.magenta[30],
        punctuation: c.whiteFade[70],
        regex: `#d88489`,
        remove: c.red[40],
        selector: c.orange[30],
        tag: c.teal[60],
        text: c.grey[30],
      },
      link: {
        border: c.purple[90],
        color: c.purple[40],