How to use the gatsby-design-tokens.fontSizes.map function in gatsby-design-tokens

// remove the first breakpoint, `xxs: 0`
// this made sense for styled-system and using an object
// to define breakpoints, but not here
breakpointsTokens.splice(0, 1)

let fontsTokens = {}
for (let fontFamily in f) {
  fontsTokens[fontFamily] = f[fontFamily].join(`, `)
}
// 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 = {