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.
MunifTanjim / gatsby-theme-dox / theme / src / theme.js View on Github 
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'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>{open ? 'Close' : 'Open'} Sidebar
{open && (
<div role="presentation">
)}
)
}
</div>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>fontWeight: 600,
color: isDarkMode()
? lightness(theme.colors.primary, 0.8)
: "#fff",
}}
href="https://twitter.com/johnpolacek/"
>
@johnpolacek
<p></p>
<p>
<a href="https://github.com/johnpolacek/">
github.com/johnpolacek
</a>
</p>
)
}const saveTheme = () => {
setPlaygroundView(PlaygroundViews.SAVE)
setPlaygroundHeight("800px")
}
return (
<header>
<div>
</div>
</header>@theme-ui/color
Color manipulation utilities for Theme UI
