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.

github priceline / design-system / docs / src / Color.js View on Github external
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;
github priceline / design-system / docs / src / Color.js View on Github external
.map(key => ({
    name: key,
    value: theme.colors[key]
  }))
  .filter(color => !Array.isArray(color.value))
github priceline / design-system / packages / popover / src / Arrow.js View on Github external
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;
github priceline / design-system / packages / popover / src / Arrow.js View on Github external
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};

pcln-design-system

Priceline Design System

MIT
Latest version published 2 days ago

Package Health Score

85 / 100
Full package analysis

Similar packages