JSFiddle - React, Tailwind, and code Playground

by th3uiguy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>
<div id='container'></div>

CSS

.swatch {
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  margin: 3px;
}

.row {
  display: flex;
}

#container {
  display: flex;
  flex-direction: column;
}

TypeScript

const cont = document.getElementById('container');

function addSwatch(row, color: string, txt: string) {
  const sw = document.createElement('div');
  sw.classList.add('swatch');
  sw.style.backgroundColor = color;
  if(txt){
  	sw.innerText = 'T';
    sw.style.color = txt;
  }
  row.appendChild(sw);
  console.log('added', color)
}

function getTextColors(color){
  const row = document.createElement('div');
  row.classList.add('row');
  //addSwatch(row, color);
  console.log('getTextColors', color)
  const colors = getColors(color);
  for (let i = 0; i < colors.length; i++){
    addSwatch(row, '#'+color, colors[i]);
  }
  container.appendChild(row);
}

function getColors(bgHex){
  console.log('getColors', bgHex)
  const desaturation = 0.2,
        cColor = chroma(bgHex),
        brightness: number = cColor.luminance(),
        cutoff = 0.6,
        minDelta = 50;

  let colorVariant1: string, colorVariant2: string, bw: string, inverse: string;
  
  /* if (brightness < cutoff) { // dark colors
    const low = Math.max(brightness, minDelta);
    const delta = 1 - brightness;
    //colorVariant2 = cColor.desaturate(desaturation).brighten(delta * .0192).hex();
    //colorVariant1 = cColor.brighten(delta * .0148).hex();
    colorVariant2 = chroma.scale(bgHex).steps()
    colorVariant1 = cColor.brighten(delta * .33).hex();
    bw = "#ffffff";
    inverse = "#000000";
    console.log(bgHex, brightness, low, colorVariant1, colorVariant2)
  }
  else { // light colors
    const low = Math.max(brightness, cutoff + minDelta);
    colorVariant2 = cColor.hex(); //cColor.darken(low * .0104).hex();
    colorVariant1 = cColor.hex(); //cColor.desaturate(desaturation).darken(low * .0066).hex();
    bw = "#000000";
    inverse = "#ffffff";
    console.log(bgHex, brightness, low, colorVariant1, colorVariant2)
  }
  
  let colors: string[] = [];
  console.log(
    colorVariant2, chroma(colorVariant2).luminance(), chroma.contrast(bgHex, colorVariant2),
    colorVariant1,...