How to use the gatsby-design-tokens.colors.whiteFade 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
},
      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)`,
        raised: `0px 1px 2px rgba(${shadowDarkBase}, 0.08), 0px 2px 4px rgba(${shadowDarkFlares}, 0.08)`,
      },
      sidebar: {
        itemBackgroundActive: `transparent`,
        activeSectionBackground: hex2rgba(c.purple[90], 0.2),
        itemBorderActive: c.purple[80],
        itemBorderColor: `transparent`,
        itemHoverBackground: hex2rgba(c.purple[90], 0.2),
      },
      ui: {
github gatsbyjs / gatsby / www / src / gatsby-plugin-theme-ui / index.js View on Github external
stripeColorA: c.red[40],
    stripeColorB: c.blue[40],
  },
  button: {
    primaryBg: c.purple[60],
    primaryText: c.white,
    primaryBorder: c.purple[60],
    secondaryBg: `transparent`,
    secondaryText: c.purple[50],
    secondaryBorder: c.purple[40],
  },
  modes: {
    dark: {
      background: darkBackground,
      text: c.grey[30],
      heading: c.whiteFade[80],
      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,