How to use the open-color.red function in open-color

To help you get started, we’ve selected a few open-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.

github dittos / diffmonster / src / ui / PullRequestFiles.js View on Github external
  color: ${props => props.status === 'removed' ? oc.red[7] : oc.gray[5]};
github knoopx / crypto-watch / src / ui / color-indicator.jsx View on Github external
import React from 'react'
import PropTypes from 'prop-types'
import OpenColor from 'open-color'

export default class ColorIndicator extends React.PureComponent {
  static propTypes = {
    value: PropTypes.number.isRequired,
    positiveColor: PropTypes.string.isRequired,
    negativeColor: PropTypes.string.isRequired,
  }

  static defaultProps = {
    positiveColor: OpenColor.green[6],
    negativeColor: OpenColor.red[6],
  }

  render() {
    const { style, value, positiveColor, negativeColor, ...props } = this.props
    return <div value="==" style="{{"> 0 ? positiveColor : negativeColor }} /&gt;
  }
}
</div>
github bmcmahen / sancho / src / Theme / colors.ts View on Github external
.alpha(amount)
    .hsl()
    .string();
}

/**
 * normalize open-color to remove some colours,
 * such as 'grape'. This should be compatible with a tool
 * like palx.
 */

const defaultScales = {
  gray: open.gray,
  blue: open.blue,
  green: open.green,
  red: open.red,
  orange: open.orange,
  yellow: open.yellow,
  teal: open.teal,
  cyan: open.cyan,
  lime: open.lime,
  pink: open.pink,
  violet: open.violet,
  indigo: open.indigo
};

export type ScalesType = typeof defaultScales;

type PaletteItem = {
  lightest: string;
  light: string;
  base: string;