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

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],
        hoverBorder: c.purple[70],
        hoverColor: c.purple[30],
      },
      navigation: {

...c,
  // https://theme-ui.com/theme-spec#color
  // Theme-UI required keys
  //
  // Body foreground color
  // overwrite what's currently in `colors` from `gatsby-design-tokens`
  // also see `heading` key below
  text: c.grey[80], // c.text.primary
  // Body background color
  background: c.white,
  // Primary brand color for links, buttons, etc.
  primary: c.gatsby,
  // A secondary brand color for alternative styling
  secondary: c.purple[40],
  // A contrast color for emphasizing UI
  accent: c.orange[60],
  // A faint color for backgrounds, borders, and accents that do not require high contrast with the background color
  muted: c.grey[5],
  // end Theme-UI required keys
  banner: c.purple[70],
  // gatsby-design-tokens has the following in colors.text,
  // which conflicts with theme-ui's default color `text`
  // making text.header and text.secondary available as
  // `heading` and `textMuted` resolves that
  heading: c.text.header, // text.header
  textMuted: c.text.secondary, // text.secondary
  // moved `text.placeholder` to `input.placeholder`
  // ref. e.g. https://github.com/system-ui/theme-ui/blob/702c43e804046a94389e7a12a8bba4c4f436b14e/packages/presets/src/tailwind.js#L6
  // transparent: `transparent`,
  // expand `gatsby-design-tokens` defaults
  code: {
    ...c.code,