How to use the pcln-design-system.theme.colors function in pcln-design-system
To help you get started, we’ve selected a few pcln-design-system 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.
priceline / design-system / docs / src / Color.js View on Github 
import {
Box,
Card,
Flex,
Heading,
Text,
Divider,
theme
} from 'pcln-design-system'
import PageTitle from './PageTitle'
import Description from './Description'
import Code from './Code'
import CopyButton from './CopyButton'
import Pagination from './Pagination'
const colors = Object.keys(theme.colors)
.filter(key => !/[0-9]$/.test(key))
.map(key => ({
name: key,
value: theme.colors[key]
}))
.filter(color => !Array.isArray(color.value))
const primaries = colors.filter(
color => !/^(lightGray|gray|borderGray|darkGray)$/.test(color.name)
)
const grays = colors.filter(color =>
/^(lightGray|gray|borderGray|darkGray)$/.test(color.name)
)
const ColorChip = styled(Box)`
height: 100px;.map(key => ({
name: key,
value: theme.colors[key]
}))
.filter(color => !Array.isArray(color.value))const ArrowPlacement = ({ background, borderColor }) => {
const bgColor = theme.colors[background]
const brColor = theme.colors[borderColor]
return `
&[data-placement*="right"]::before {
left: 8px;
border-color: ${bgColor} transparent transparent ${bgColor};
box-shadow: -0.75px -0.75px 0px 0.25px ${brColor};
}
&[data-placement*="left"]::after {
right: 13px;
border-color: transparent ${bgColor} ${bgColor} transparent;
box-shadow: 0.75px 0.75px 0px 0.25px ${brColor};
}
&[data-placement*="top"]::after {
top: -16px;
margin-left: -5px;const ArrowPlacement = ({ background, borderColor }) => {
const bgColor = theme.colors[background]
const brColor = theme.colors[borderColor]
return `
&[data-placement*="right"]::before {
left: 8px;
border-color: ${bgColor} transparent transparent ${bgColor};
box-shadow: -0.75px -0.75px 0px 0.25px ${brColor};
}
&[data-placement*="left"]::after {
right: 13px;
border-color: transparent ${bgColor} ${bgColor} transparent;
box-shadow: 0.75px 0.75px 0px 0.25px ${brColor};
}
&[data-placement*="top"]::after {
top: -16px;
margin-left: -5px;
border-color: transparent transparent ${bgColor} ${bgColor};
