How to use gatsby-design-tokens - 10 common examples

// new tokens
  card: {
    background: c.white,
    color: c.grey[50],
    header: c.black,
    starterLabelBackground: c.teal[5],
    starterLabelText: c.teal[70],
    pluginLabelBackground: c.orange[5],
    pluginLabelText: c.orange[90],
  },
  modal: {
    background: c.white,
    overlayBackground: hex2rgba(c.white, 0.95),
  },
  navigation: {
    background: hex2rgba(c.white, 0.985),
    linkDefault: c.grey[70],
    linkActive: c.purple[50],
    linkHover: c.gatsby,
    socialLink: c.grey[40],
  },
  search: {
    suggestionHighlightBackground: c.lavender,
    suggestionHighlightColor: c.gatsby,
  },
  sidebar: {
    itemHoverBackground: hex2rgba(c.purple[20], 0.275),
    itemBackgroundActive: `transparent`,
    itemBorderColor: `transparent`, // `rgba(0,0,0,0.05)`,
    activeSectionBackground: hex2rgba(c.purple[20], 0.15),
    itemBorderActive: c.purple[10],
  },

hoverColor: c.purple[60],
  },
  icon: {
    dark: c.purple[60],
    neutral: c.grey[50],
    neutralLight: c.grey[30],
    background: c.white,
    accent: c.yellow[60],
    light: c.purple[10],
    lightActive: c.purple[20],
  },
  input: {
    background: c.white,
    backgroundFocus: c.white,
    border: c.grey[30],
    focusBorder: c.white,
    focusBoxShadow: c.purple[60],
    icon: c.grey[50],
    iconFocus: c.grey[60],
    placeholder: c.text.placeholder,
  },
  // new tokens
  card: {
    background: c.white,
    color: c.grey[50],
    header: c.black,
    starterLabelBackground: c.teal[5],
    starterLabelText: c.teal[70],
    pluginLabelBackground: c.orange[5],
    pluginLabelText: c.orange[90],
  },
  modal: {

medium: `600`,
  heading: fw[1],
  headingPrimary: fw[2],
}

const col = {
  ...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

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: {
        background: hex2rgba(darkBackground, 0.975),
        linkActive: c.purple[40],
        linkDefault: c.whiteFade[60],
        linkHover: c.white,
        socialLink: c.grey[60],
      },
      themedInput: {
        background: darkBorder,
        backgroundFocus: `black`,
        focusBorder: c.purple[60],
        focusBoxShadow: c.purple[60],
        icon: c.grey[50],
        iconFocus: c.purple[50],
        placeholder: c.whiteFade[50],
      },
      // TODO figure out how to make shadows themeable
      shadows: {
        dialog: `0px 4px 16px rgba(${shadowDarkBase}, 0.08), 0px 8px 24px rgba(${shadowDarkFlares}, 0.16)`,
        floating: `0px 2px 4px rgba(${shadowDarkBase}, 0.08), 0px 4px 8px rgba(${shadowDarkFlares}, 0.16)`,
        overlay: `0px 4px 8px rgba(${shadowDarkBase}, 0.08), 0px 8px 16px rgba(${shadowDarkFlares}, 0.16)`,

border: c.purple[30],
    hoverBorder: c.purple[50],
    hoverColor: c.purple[60],
  },
  icon: {
    dark: c.purple[60],
    neutral: c.grey[50],
    neutralLight: c.grey[30],
    background: c.white,
    accent: c.yellow[60],
    light: c.purple[10],
    lightActive: c.purple[20],
  },
  input: {
    background: c.white,
    backgroundFocus: c.white,
    border: c.grey[30],
    focusBorder: c.white,
    focusBoxShadow: c.purple[60],
    icon: c.grey[50],
    iconFocus: c.grey[60],
    placeholder: c.text.placeholder,
  },
  // new tokens
  card: {
    background: c.white,
    color: c.grey[50],
    header: c.black,
    starterLabelBackground: c.teal[5],
    starterLabelText: c.teal[70],
    pluginLabelBackground: c.orange[5],
    pluginLabelText: c.orange[90],

textMuted: c.grey[40],
      banner: hex2rgba(c.purple[90], 0.975),
      muted: c.grey[90],
      icon: {
        dark: c.purple[50],
        neutral: c.grey[70],
        neutralLight: c.grey[90],
        background: c.darkBorder,
        accent: c.yellow[50],
        light: c.grey[90],
        lightActive: c.purple[90],
      },
      card: {
        background: c.grey[90],
        color: c.whiteFade[70],
        header: c.white,
        starterLabelBackground: hex2rgba(c.teal[90], 0.125),
        starterLabelText: c.teal[10],
        pluginLabelBackground: hex2rgba(c.orange[90], 0.125),
        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],

ui: {
    background: c.grey[5],
    hover: c.purple[5],
    border: c.grey[20],
  },
  link: {
    color: c.purple[50],
    border: c.purple[30],
    hoverBorder: c.purple[50],
    hoverColor: c.purple[60],
  },
  icon: {
    dark: c.purple[60],
    neutral: c.grey[50],
    neutralLight: c.grey[30],
    background: c.white,
    accent: c.yellow[60],
    light: c.purple[10],
    lightActive: c.purple[20],
  },
  input: {
    background: c.white,
    backgroundFocus: c.white,
    border: c.grey[30],
    focusBorder: c.white,
    focusBoxShadow: c.purple[60],
    icon: c.grey[50],
    iconFocus: c.grey[60],
    placeholder: c.text.placeholder,
  },
  // new tokens
  card: {

color: c.grey[50],
    header: c.black,
    starterLabelBackground: c.teal[5],
    starterLabelText: c.teal[70],
    pluginLabelBackground: c.orange[5],
    pluginLabelText: c.orange[90],
  },
  modal: {
    background: c.white,
    overlayBackground: hex2rgba(c.white, 0.95),
  },
  navigation: {
    background: hex2rgba(c.white, 0.985),
    linkDefault: c.grey[70],
    linkActive: c.purple[50],
    linkHover: c.gatsby,
    socialLink: c.grey[40],
  },
  search: {
    suggestionHighlightBackground: c.lavender,
    suggestionHighlightColor: c.gatsby,
  },
  sidebar: {
    itemHoverBackground: hex2rgba(c.purple[20], 0.275),
    itemBackgroundActive: `transparent`,
    itemBorderColor: `transparent`, // `rgba(0,0,0,0.05)`,
    activeSectionBackground: hex2rgba(c.purple[20], 0.15),
    itemBorderActive: c.purple[10],
  },
  themedInput: {
    background: c.grey[10],
    backgroundFocus: c.white,

headingPrimary: fw[2],
}

const col = {
  ...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

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,
  // TODO remove `sizes` from `gatsby-design-tokens`
  // until we eventually have well-defined components,
  // it doesn't make sense to store these tokens in