How to use @ctrl/tinycolor - 10 common examples

BasicPicker.prototype.componentDidUpdate = function componentDidUpdate(
    prevProps
  ) {
    if (prevProps.color !== this.props.color) {
      var color = new tinycolor.TinyColor(this.props.color)
      // Check if its a valid hex and then update the color
      // on changing the color input field, it only updates the color block if the hex code is valid
      if (color.isValid) {
        this.setState({ color: color })
      }
    }
  }

const determineColorContrast = el => {
  // question: how to know if the current node is actually a black background?
  // question: is there an api for composited values?
  const foreground = el instanceof SVGElement
    ? (getStyle(el, 'fill') || getStyle(el, 'stroke'))
    : getStyle(el, 'color')

  const textSize  = getWCAG2TextSize(el)

  let background  = getComputedBackgroundColor(el)

  const [ aa_contrast, aaa_contrast ] = [
    isReadable(background, foreground, { level: "AA", size: textSize.toLowerCase() }),
    isReadable(background, foreground, { level: "AAA", size: textSize.toLowerCase() })
  ]

  return foreground === background
    ? `🤷‍♂️ foreground matches background`
    : `
        <span>Color contrast</span>
        <span value="">
          <span style="background-color:${background};
            color:${foreground};">${Math.floor(readability(background, foreground)  * 100) / 100}</span>
        </span>
        <span>› AA ${textSize}</span>
        <span style="${aa_contrast ? 'color:green;' : 'color:red'}" value="">${aa_contrast ? '✓' : '×'}</span>
        <span>› AAA ${textSize}</span>
        <span style="${aaa_contrast ? 'color:green;' : 'color:red'}" value="">${aaa_contrast ? '✓' : '×'}</span>

const determineColorContrast = el => {
  // question: how to know if the current node is actually a black background?
  // question: is there an api for composited values?
  const foreground = el instanceof SVGElement
    ? (getStyle(el, 'fill') || getStyle(el, 'stroke'))
    : getStyle(el, 'color')

  const textSize  = getWCAG2TextSize(el)

  let background  = getComputedBackgroundColor(el)

  const [ aa_contrast, aaa_contrast ] = [
    isReadable(background, foreground, { level: "AA", size: textSize.toLowerCase() }),
    isReadable(background, foreground, { level: "AAA", size: textSize.toLowerCase() })
  ]

  return foreground === background
    ? `🤷‍♂️ foreground matches background`
    : `
        <span>Color contrast</span>
        <span value="">
          <span style="background-color:${background};
            color:${foreground};">${Math.floor(readability(background, foreground)  * 100) / 100}</span>
        </span>
        <span>› AA ${textSize}</span>
        <span style="${aa_contrast ? 'color:green;' : 'color:red'}" value="">${aa_contrast ? '✓' : '×'}</span>
        <span>› AAA ${textSize}</span>

const extractColors = elements => {
    state.elements = elements

    let isMeaningfulForeground  = false
    let isMeaningfulBackground  = false
    let isMeaningfulBorder      = false
    let FG, BG, BO

    if (state.elements.length == 1) {
      const el = state.elements[0]

      if (el instanceof SVGElement) {
        FG = new TinyColor('rgb(0, 0, 0)')
        var bo_temp = getStyle(el, 'stroke')
        BO = new TinyColor(bo_temp === 'none'
          ? 'rgb(0, 0, 0)'
          : bo_temp)
        BG = new TinyColor(getStyle(el, 'fill'))
      }
      else {
        FG = new TinyColor(getStyle(el, 'color'))
        BG = new TinyColor(getStyle(el, 'backgroundColor'))
        BO = getStyle(el, 'borderWidth') === '0px'
          ? new TinyColor('rgb(0, 0, 0)')
          : new TinyColor(getStyle(el, 'borderColor'))
      }

      let fg = FG.toHslString()
      let bg = BG.toHslString()
      let bo = BO.toHslString()

.map(({prop,value}) => {
          if (prop.includes('color') || prop.includes('background-color') || prop.includes('border-color') || prop.includes('Color') || prop.includes('fill') || prop.includes('stroke'))
            value = new TinyColor(value)[colormode]()

          if (prop.includes('boxShadow')) {
            const [, color, x, y, blur, spread] = getShadowValues(value)
            value = `${new TinyColor(color)[colormode]()} ${x} ${y} ${blur} ${spread}`
          }

          if (prop.includes('textShadow')) {
            const [, color, x, y, blur] = getTextShadowValues(value)
            value = `${new TinyColor(color)[colormode]()} ${x} ${y} ${blur}`
          }
          return {prop,value}
        })
        .reduce((message, item) =>

private setColorBackground(el: HTMLElement, color: string): void {
        const colorBackground: TinyColor = new TinyColor(color);

        if (colorBackground.isValid && this.getDefaultsColors(el).background !== color) {
            el.style.setProperty('--color-background', colorBackground.toHexString().toUpperCase());
        }
    }

function toState(data, oldHue) {
  var color = data.hex
    ? new tinycolor.TinyColor(data.hex)
    : new tinycolor.TinyColor(data)
  var hsl = color.toHsl()
  var hsv = color.toHsv()
  var rgb = color.toRgb()
  var hex = color.toHex()
  if (hsl.s === 0) {
    hsl.h = oldHue || 0
    hsv.h = oldHue || 0
  }
  var transparent = hex === '000000' && rgb.a === 0

  return {
    hsl: hsl,
    hex: transparent ? 'transparent' : '#' + hex,
    rgb: rgb,
    hsv: hsv,

let isMeaningfulBorder      = false
    let FG, BG, BO

    if (state.elements.length == 1) {
      const el = state.elements[0]

      if (el instanceof SVGElement) {
        FG = new TinyColor('rgb(0, 0, 0)')
        var bo_temp = getStyle(el, 'stroke')
        BO = new TinyColor(bo_temp === 'none'
          ? 'rgb(0, 0, 0)'
          : bo_temp)
        BG = new TinyColor(getStyle(el, 'fill'))
      }
      else {
        FG = new TinyColor(getStyle(el, 'color'))
        BG = new TinyColor(getStyle(el, 'backgroundColor'))
        BO = getStyle(el, 'borderWidth') === '0px'
          ? new TinyColor('rgb(0, 0, 0)')
          : new TinyColor(getStyle(el, 'borderColor'))
      }

      let fg = FG.toHslString()
      let bg = BG.toHslString()
      let bo = BO.toHslString()

      isMeaningfulForeground = FG.originalInput !== 'rgb(0, 0, 0)' || (el.children.length === 0 && el.textContent !== '')
      isMeaningfulBackground = BG.originalInput !== 'rgba(0, 0, 0, 0)'
      isMeaningfulBorder     = BO.originalInput !== 'rgb(0, 0, 0)'

      if (isMeaningfulForeground && !isMeaningfulBackground)
        setActive('foreground')

function toState(data, oldHue) {
  const color = data.hex ? new TinyColor(data.hex) : new TinyColor(data)
  const hsl = color.toHsl()
  const hsv = color.toHsv()
  const rgb = color.toRgb()
  const hex = color.toHex()
  if (hsl.s === 0) {
    hsl.h = oldHue || 0
    hsv.h = oldHue || 0
  }
  const transparent = hex === '000000' && rgb.a === 0

  return {
    hsl,
    hex: transparent ? 'transparent' : `#${hex}`,
    rgb,
    hsv,
    oldHue: data.h || oldHue || hsl.h,

colorize(): void {
    if ( !this.isLibrary ) {
      this.buttonStyling = {
        'background-color': '#' + this.playlistData.attributes.artwork.bgColor,
        'color': '#' + this.playlistData.attributes.artwork.textColor1
      };

      let color = new TinyColor(this.playlistData.attributes.artwork.bgColor);
      if ( color.isLight() ) {
        color = color.darken(20);
      }
      this.bgColor = color.toHexString();
    }
  }