Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
/** @jsx jsx */
import { jsx, Global } from '@emotion/core'
import { css } from 'theme-ui'
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button'
// css prop doesn't work with reach ui
// styles must be global due to how portals are used
const styles = css({
':root': {
'--reach-menu-button': 1
},
'[data-reach-menu]': {
display: 'block',
position: 'absolute'
},
'[data-reach-menu-list]': {
display: 'block',
position: 'relative',
whiteSpace: 'nowrap',
border: '1px solid lightgray',
backgroundColor: 'white',
outline: 'none',
zIndex: 101
},
function Layout({ children, location }) {
const [sidebar, sidebarOpen, setSidebarOpen, sidebarToggler] = useSidebar()
const { theme } = useThemeUI()
return (
Skip to main content
import React from 'react'
import styled from '@emotion/styled'
import { css } from 'theme-ui'
const Pre = styled.pre(
css({
bg: 'lightgray',
p: 3,
fontFamily: 'monospace'
})
)
export default ({ children, ...props }) => <pre>{children}</pre>
function SwatchToken({ color = "text", css: componentCSS, ...rest }) {
return (
<h3>
);
}
</h3>
function SwatchValue({ color = "secondary", css: componentCSS, ...rest }) {
return (
<p>
);
}
</p>