How to use the @theme-ui/color.lightness function in @theme-ui/color

To help you get started, we’ve selected a few @theme-ui/color 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 johnpolacek / design-system-playground / src / components / Footer.js View on Github external
export default props => {
  const { theme, isDarkMode } = useContext(ThemeContext)

  return (
    <>
      <footer>
        
          <div>
            <p>
              Open Sourced on{" "}
              <a href="https://github.com/johnpolacek/design-system-playground"></a></p></div></footer>
github johnpolacek / design-system-playground / src / components / Footer.js View on Github external
fontWeight: 600,
                  color: isDarkMode()
                    ? lightness(theme.colors.primary, 0.8)
                    : "#fff",
                }}
                href="https://twitter.com/johnpolacek/"
              &gt;
                @johnpolacek
              
            <p></p>
            <p>
              <a href="https://github.com/johnpolacek/">
                github.com/johnpolacek
              </a>
            </p>
          
        
      
    
  )
}
github johnpolacek / design-system-playground / src / components / Header.js View on Github external
const saveTheme = () =&gt; {
    setPlaygroundView(PlaygroundViews.SAVE)
    setPlaygroundHeight("800px")
  }

  return (
    <header>
      <div>
        
      </div>
      </header>

@theme-ui/color

Color manipulation utilities for Theme UI

MIT
Latest version published 3 months ago

Package Health Score

93 / 100
Full package analysis

Similar packages