How to use tinycolor2 - 10 common examples

renderSelector() {

    // if (!this.state.focus) return null

    var hsl = tinycolor(this.state.value).toHsl()

    return <div style="{{">
      
    </div>
  }

// SIDEBAR SKINS
// --------------------------------------------------------

// Dark sidebar
export const sidebarDarkBg = '#222d32';
export const sidebarDarkHoverBg = tinycolor(sidebarDarkBg).darken(2).toString();
export const sidebarDarkColor = tinycolor(sidebarDarkBg).lighten(60).toString();
export const sidebarDarkHoverColor = '#fff';
export const sidebarDarkSubmenuBg = tinycolor(sidebarDarkBg).lighten(5).toString();
export const sidebarDarkSubmenuColor = tinycolor(sidebarDarkSubmenuBg).lighten(40).toString();
export const sidebarDarkSubmenuHoverColor = '#fff';

// Light sidebar
export const sidebarLightBg = '#f9fafc';
export const sidebarLightHoverBg = tinycolor('#f0f0f1').lighten(1.5).toString();
export const sidebarLightColor = '#444';
export const sidebarLightHoverColor = '#000';
export const sidebarLightSubmenuBg = sidebarLightHoverBg;
export const sidebarLightSubmenuColor = '#777';
export const sidebarLightSubmenuHoverColor = '#000';

// CONTROL SIDEBAR
//--------------------------------------------------------
export const controlSidebarWidth = sidebarWidth;

// BOXES
//--------------------------------------------------------
export const boxBorderColor = '#f4f4f4';
export const boxBorderRadius = '3px';
export const boxFooterBg = '#fff';
export const boxBoxshadow = '0 1px 1px rgba(0, 0, 0, .1)';

this.gauge.canvas.customAttributes.pki = function(value, min, max, w, h, dx, dy, gws, donut, reverse) { // eslint-disable-line no-unused-vars
            var alpha, Rm, Ro, Ri, Cx, Cy, Xm, Ym, Xo, Yo, path;

            if (tbGauge.localSettings.neonGlowBrightness && !isFirefox
                && tbGauge.floodColorElement1 && tbGauge.floodColorElement2) {
                var progress = (value - min) / (max - min);
                var resultColor = getColor(value, progress);
                var brightenColor1 = tinycolor(resultColor).brighten(tbGauge.localSettings.neonGlowBrightness).toRgbString();
                var brightenColor2 = resultColor;
                tbGauge.floodColorElement1.setAttribute('flood-color', brightenColor1);
                tbGauge.floodColorElement2.setAttribute('flood-color', brightenColor2);
            }

            var gaugeType = tbGauge.localSettings.gaugeType;

            if (gaugeType === 'donut') {
                alpha = (1 - 2 * (value - min) / (max - min)) * Math.PI;
                Ro = w / 2 - w / 7;
                Ri = Ro - w / 6.666666666666667 * gws;
                Rm = Ri + (Ro - Ri)/2;

                Cx = w / 2 + dx;
                Cy = h / 1.95 + dy;

const aTime = _.sum(a.aggregations, agg => {
        return agg.flat[0].time;
      });
      const bTime = _.sum(b.aggregations, agg => {
        return agg.flat[0].time;
      });

      return comparator(aTime, bTime);
    };
  }
  const sortedIndices = [];
  for (const [key, index] of Object.entries(indices)) {
    index.shards.sort(sortQueryComponents);
    for (const shard of index.shards) {
      shard.relative[target] = ((shard.time[target] / index.time[target]) * 100).toFixed(2);
      shard.color[target] = tinycolor
        .mix('#F5F5F5', '#FFAFAF', shard.relative[target])
        .toHexString();
    }
    sortedIndices.push(index);
    visibility[key] = false;
  }

  // And now sort the indices themselves
  sortedIndices.sort((a, b) => comparator(a.time, b.time));
  return sortedIndices;
}

// Hover label text
    var hoverinfoParts = [];
    if(catViewModel.parcatsViewModel.hoverinfoItems.indexOf('count') !== -1) {
        hoverinfoParts.push(['Count:', labels.countLabel].join(' '));
    }
    if(catViewModel.parcatsViewModel.hoverinfoItems.indexOf('probability') !== -1) {
        hoverinfoParts.push('P(color ∩ ' + catLabel + '): ' + labels.probabilityLabel);
        hoverinfoParts.push('P(' + catLabel + ' | color): ' + pCatGivenColor.toFixed(3));
        hoverinfoParts.push('P(color | ' + catLabel + '): ' + pColorGivenCat.toFixed(3));
    }

    var hovertext = hoverinfoParts.join('<br>');

    // Compute text color
    var textColor = tinycolor.mostReadable(bandViewModel.color, ['black', 'white']);

    return {
        trace: trace,
        x: hoverCenterX - rootBBox.left,
        y: hoverCenterY - rootBBox.top,
        // name: 'NAME',
        text: hovertext,
        color: bandViewModel.color,
        borderColor: 'black',
        fontFamily: 'Monaco, "Courier New", monospace',
        fontColor: textColor,
        fontSize: 10,
        idealAlign: hoverLabelIdealAlign,
        hovertemplate: trace.hovertemplate,
        hovertemplateLabels: labels,
        eventData: [{

// Text color will always be the same for secondary buttons
  if (color === colors.white) {
    return colors.grey.darker;
  }

  switch (feel) {
    case "raised":
      // Set the base (meaning no pseudo-selectors) text color for raised
      // buttons. Otherwise return `undefined` to not change the color.
      //
      // We have some special logic for the raised color; set the text color to
      // be what is most readable between white and the default text color and
      // the _hover_ color's background. This is overrideable by the user, but
      // it shouldn't need to be.
      return !mode
        ? tinycolor
            .mostReadable(
              getHoverBackgroundColor({ color, feel, theme }),
              [colors.white, colors.grey.darker],
              {
                level: "AA",
                size: "small",
              }
            )
            .toString()
        : undefined;
    case "flat":
      if (color === defaultColor) {
        return theme === "dark" ? colors.grey.light : colors.grey.darker;
      }

      // We have a custom color and we're in dark mode, lighten the base and

// @flow

import * as React from 'react'
import {sto} from '../../../lib/colors'
import {TabBarIcon} from '@frogpond/navigation-tabs'
import {type TopLevelViewPropsType} from '../../types'
import * as logos from '../../../../images/streaming'
import {RadioControllerView} from './index'
import tinycolor from 'tinycolor2'
import {ThemeProvider} from '@frogpond/app-theme'
import {type PlayerTheme} from './types'

let tintColor = '#37a287'
const colors: PlayerTheme = {
	tintColor,
	buttonTextColor: tinycolor
		.mostReadable(tintColor, [sto.white, sto.black])
		.toRgbString(),
	textColor: tintColor,
	imageBorderColor: 'transparent',
	imageBackgroundColor: tinycolor(tintColor)
		.complement()
		.setAlpha(0.2)
		.toRgbString(),
}

export class KstoStationView extends React.Component {
	static navigationOptions = {
		tabBarLabel: 'KSTO',
		tabBarIcon: TabBarIcon('radio'),
	}

export default function scatterThings() {
  var colors = ['#7FDBFF', '#0074D9', '#001F3F', '#39CCCC', '#3D9970',
    '#FF4136', '#85144B', '#FF851B', '#B10DC9', '#FFDC00', '#F012BE',
    '#aaa', '#fff', '#ddd']

  var takeOne = arr => pullAt(arr, random(arr.length - 1))

  var rootNode = document.querySelector('#stuffs')
  document.body.style.backgroundColor = takeOne(colors)
  document.querySelector('#source > a').style.color = tinycolor.mostReadable(
    document.body.style.backgroundColor,
    colors
  ).toHexString()
  // for (let j = 0; j < 7; ++j) {
  //   createElement(63, 63, 'div', rootNode)
  // }

  createElement(
    242 + 132 * Math.random(),
    242 + 132 * Math.random(),
    'iframe',
    rootNode,
    function (e) {
      var iframe = e.target
      iframe.style.border = 'none'
      iframe.contentDocument.write('this is an iframe (WIP)')

backgroundColor = branding.colors.primary;
    }

    if (branding && branding.colors && branding.colors.primaryText) {
      // Get text color
      textColor = branding.colors.primaryText;
    }

    if (backgroundColor && textColor) {
      // Lighten and darken the background color, for contrast comparison
      const lighterBackground = tinycolor(backgroundColor).lighten();
      const darkerBackground = tinycolor(backgroundColor).darken();

      // Get readability values for each combination of background/text color
      lighterBackgroundReadability = tinycolor.readability(lighterBackground, textColor);
      darkerBackgroundReadability = tinycolor.readability(darkerBackground, textColor);

      // Select darker or lighter background based on best readability
      if (lighterBackgroundReadability > darkerBackgroundReadability) {
        // lighter background is most readable
        mostReadableBackground = lighterBackground;
      } else {
        // darker background is most readable
        mostReadableBackground = darkerBackground;
      }
    }
    return mostReadableBackground;
  },
  primaryColor () {

// Get background color
      backgroundColor = branding.colors.primary;
    }

    if (branding && branding.colors && branding.colors.primaryText) {
      // Get text color
      textColor = branding.colors.primaryText;
    }

    if (backgroundColor && textColor) {
      // Lighten and darken the background color, for contrast comparison
      const lighterBackground = tinycolor(backgroundColor).lighten();
      const darkerBackground = tinycolor(backgroundColor).darken();

      // Get readability values for each combination of background/text color
      lighterBackgroundReadability = tinycolor.readability(lighterBackground, textColor);
      darkerBackgroundReadability = tinycolor.readability(darkerBackground, textColor);

      // Select darker or lighter background based on best readability
      if (lighterBackgroundReadability > darkerBackgroundReadability) {
        // lighter background is most readable
        mostReadableBackground = lighterBackground;
      } else {
        // darker background is most readable
        mostReadableBackground = darkerBackground;
      }
    }
    return mostReadableBackground;
  },
  primaryColor () {