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

To help you get started, we’ve selected a few gatsby-design-tokens examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github gatsbyjs / gatsby / www / src / gatsby-plugin-theme-ui / index.js View on Github external
// 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,
    // refactor names
    background: c.code.bg,
    backgroundInline: c.code.bgInline,
    // modify token color values to comply to WCAG 2.0 AA standard contrast ratios
    // changed
    selector: `#b94185`,
    keyword: `#096fb3`,
    comment: `#527713`,
    tag: `#137886`,
    regex: `#dc0437`,
    remove: c.red[70],
    add: c.green[80],
    // unchanged
    border: `#faede5`,
    text: `#866c5b`,
    punctuation: `#53450e`,
github gatsbyjs / gatsby / www / src / gatsby-plugin-theme-ui / index.js View on Github external
// 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,
    // refactor names
    background: c.code.bg,
    backgroundInline: c.code.bgInline,
    // modify token color values to comply to WCAG 2.0 AA standard contrast ratios
    // changed
    selector: `#b94185`,
    keyword: `#096fb3`,
    comment: `#527713`,
    tag: `#137886`,
    regex: `#dc0437`,
    remove: c.red[70],
    add: c.green[80],
    // unchanged
    border: `#faede5`,
    text: `#866c5b`,
    punctuation: `#53450e`,
    cssString: `#a2466c`,
    invisibles: `#e0d7d1`,