How to use the tinycolor2 function in tinycolor2

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;

export const setBrightness = (color: string, targetBrightness: number): string => {
  const c = tinycolor(color)
  const brightness = c.getBrightness()
  return c.brighten((targetBrightness / brightness) * 100 - 100).toString()
}

export const isLight = c => {
  return color(c).getBrightness() > 165;
};

palette: {
    primary: {
      main: primary,
      light: tinycolor(primary)
        .lighten(lightenRate)
        .toHexString(),
      dark: tinycolor(primary)
        .darken(darkenRate)
        .toHexString()
    },
    secondary: {
      main: secondary,
      light: tinycolor(secondary)
        .lighten(lightenRate)
        .toHexString(),
      dark: tinycolor(secondary)
        .darken(darkenRate)
        .toHexString(),
      contrastText: "#FFFFFF"
    },
    warning: {
      main: warning,
      light: tinycolor(warning)
        .lighten(lightenRate)
        .toHexString(),
      dark: tinycolor(warning)
        .darken(darkenRate)
        .toHexString()
    },
    success: {
      main: success,
      light: tinycolor(success)

const color2ShaderArr = (str, includeAlpha = true) => {
  const rgba = tinyColor(str).toRgb();
  const rgbArr = ['r', 'g', 'b'].map(d => rgba[d] / 255);

  return includeAlpha ? [...rgbArr, rgba.a] : rgbArr;
};

_updateColorFromPosition() {
    this.color = tinycolor({
      h : this.hue,
      s : this.position.x / this.saturationWidth,
      v : 1 - (this.position.y / this.hueHeight)
    });
    this._updateColor();
  };

constructor(hexForeground: string, hexBackground: string) {
    this.foreground = tinycolor(hexForeground)
    this.background = tinycolor(hexBackground)
  }

tinycolor.mix = function(color1, color2, amount) {
  amount = (amount === 0) ? 0 : (amount || 50);

  var rgb1 = tinycolor(color1).toRgb();
  var rgb2 = tinycolor(color2).toRgb();

  var p = amount / 100;

  var rgba = {
    r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
    g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
    b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
    a: ((rgb2.a - rgb1.a) * p) + rgb1.a
  };
  return tinycolor(rgba);
};