How to use the @primer/components.theme.colors function in @primer/components
To help you get started, we’ve selected a few @primer/components 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.
primer / blueprints / src / NavItem.js View on Github 
import {theme, Link} from '@primer/components'
import styled from 'styled-components'
const NavItem = styled(Link)`
color: ${theme.colors.blue[2]};
display: block;
padding: 0 ${theme.space[3]}px;
line-height: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 215px;
&:hover {
color: ${theme.colors.black};
background-color: ${theme.colors.blue[4]};
text-decoration: none;
}
`
export default NavItemimport {theme, Link} from '@primer/components'
import styled from 'styled-components'
const NavItem = styled(Link)`
color: ${theme.colors.blue[2]};
display: block;
padding: 0 ${theme.space[3]}px;
line-height: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 215px;
&:hover {
color: ${theme.colors.black};
background-color: ${theme.colors.blue[4]};
text-decoration: none;
}
`
export default NavItem
