How to use @theme-ui/color - 10 common examples

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 MunifTanjim / gatsby-theme-dox / theme / src / theme.js View on Github external
code: {
      fontFamily: 'monospace',
      fontSize: 'inherit'
    },
    table: {
      width: '100%',
      overflow: 'auto',
      borderCollapse: 'collapse',
      borderSpacing: 0
    },
    tr: {
      borderTop: '1px solid gray'
    },
    th: {
      border: '1px solid',
      borderColor: alpha('text', 0.25),
      p: '0.25em 0.5em'
    },
    td: {
      border: '1px solid',
      borderColor: alpha('text', 0.25),
      p: '0.25em 0.5em'
    }
  },
  layout: {
    global: {
      html: {
        boxSizing: 'border-box',
        fontSize: 0
      },
      [['*', '*:after', '*:before']]: {
        boxSizing: 'inherit'
github MunifTanjim / gatsby-theme-dox / theme / src / components / Sidebar / ItemTitle.js View on Github external
width: '2.5rem',
    background: 'transparent',
    color: 'inherit',
    border: 0,
    textAlign: 'center',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  Title: {
    variant: 'linkStyles.nav',
    display: 'block',
    pr: '2.5rem',
    ':hover': {
      variant: 'linkStyles.nav.:hover',
      bg: alpha('primary', 0.05)
    }
  }
}

function ToggleableItemTitle({ id, item, isActive, isExpanded, toggleItem }) {
  return item.link ? (
    <span>
      
        {item.title}
      

      </span>
github MunifTanjim / gatsby-theme-dox / theme / src / components / Sidebar / Toggler.js View on Github external
{open ? 'Close' : 'Open'} Sidebar
      

      {open &amp;&amp; (
        
          <div role="presentation">
        
      )}
    
  )
}
</div>
github johnpolacek / design-system-playground / src / components / Footer.js View on Github external
export default props =&gt; {
  const { theme, isDarkMode } = useContext(ThemeContext)

  return (
    &lt;&gt;
      <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 12 days ago

Package Health Score

95 / 100
Full package analysis

Similar packages