How to use the chroma-js.mix function in chroma-js

coordinates.forEach(coordinate => {
          const ammount = coordinate.y
          const percent = coordinate.x * 100
          let color = chroma.mix(colors[0], colors[1], ammount, colorMode).css('hsl')

          // Round the colours to the nearest 'alphaDecimals' decimal places
          const prefix = color.indexOf('(') !== -1 ? color.substring(0, color.indexOf('(')) : color
          const values = color.match(/\((.*)\)/).pop().split(',').map(string =>
            string.indexOf('%') === -1 ? + Number(string).toFixed(alphaDecimals) : string.trim()
          )

          // Pair the colour stop with the co-ords
          color = `${prefix}(${values.join(', ')})`

          // Add the new pair to the main output array. We don't need the stop % for the first and last items in the list.
          if (Number(coordinate.x) !== 0 && Number(coordinate.x) !== 1) {
            colorStops.push(`${color} ${+percent.toFixed(2)}%`)
          } else {
            colorStops.push(color)
          }

setOpacity (opacity) {
    super.setOpacity(opacity);
    this.borderMaterial.opacity = opacity * this.borderColor.a;
    // Fade the inner node color to background color since setting opacity will show the particles hiding behind the node.
    if (!this.highlight) {
      this.innerCircleMaterial.color.setStyle(chroma.mix(GlobalStyles.styles.colorPageBackground, GlobalStyles.styles.colorDonutInternalColor, opacity).css());
      this.meshes.innerCircle.geometry.colorsNeedUpdate = true;
    }

    if (this.nameView) {
      this.nameView.setOpacity(opacity);
    }
  }

'&:hover': {
      border: `1px solid ${colors.grayLighter}`,

      '& $quadDropdown': {
        borderLeft: `1px solid ${colors.grayLighter}`,
      },
    },
    '&:active': {
      color: colors.selection,
    },
    '&:focus': {
      outline: 0,
    },

    '&.selected': {
      backgroundColor: chroma.mix(colors.selection, 'white', 0.75).hex(),
      border: `1px solid ${chroma.mix(colors.selection, 'white', 0.75).hex()}`,
    },

    '& i': {
      fontSize: 16,

      'not(.fa)': {
        font: {
          style: 'normal',
          family: 'serif',
          weight: 700,
        },
      },
    },
  },
  quadMenuDisabled: {

return (background: Color, foreground: Color, value: number): Chroma => {
        const adjustment: Chroma = Chroma.blend(background, foreground, name);
        return Chroma.mix(foreground, adjustment, value, "rgb");
    };
}

var grays = x.map((i) => {
    var value = i / 9;
    var color = chroma.mix(black, white, value, "lab");
    return "$gray-" + i + "00: " + color.hex() + ";";
}).join("\n");

'&:focus': {
      outline: 0,
    },

    '&[disabled]': {
      color: colors.grayLight,

      '&:hover': {
        cursor: 'default',
        color: colors.grayLight,
        border: '1px solid transparent',
      },
    },

    '&.selected': {
      backgroundColor: chroma.mix(colors.selection, 'white', 0.75).hex(),
      border: `1px solid ${chroma.mix(colors.selection, 'white', 0.75).hex()}`,
    },

    '& i': {
      fontSize: 16,

      'not(.fa)': {
        font: {
          style: 'normal',
          family: 'serif',
          weight: 700,
        },
      },
    },

    '&.small': {

function createBrightShades(baseColor) {
  const first = chroma.mix(baseColor, 'white', 0.85, 'lch')
  const last = darkenUntilAccessible(baseColor)
  const endColors = chroma.scale([first, baseColor, last]).mode('lch').correctLightness().colors(6)

  const zero = chroma.mix(first, 'white', 0.6)
  const startColors = chroma.scale([zero, first, endColors[1]]).correctLightness().colors(3)

  return startColors.concat(drop(endColors, 2))
}

function createBrightShades(baseColor) {
  const first = chroma.mix(baseColor, 'white', 0.95, 'lch').saturate(0.5)
  const middle = chroma(baseColor).saturate(2)
  const endColors = chroma.scale([first, middle, baseColor]).mode('lch').correctLightness().colors(6)

  const zero = chroma.mix(first, 'white', 0.3)
  const startColors = chroma.scale([zero, first, endColors[1]]).correctLightness().colors(3)

  return startColors.concat(drop(endColors, 2))
}

};

const light_bg_base = palette.light.bg.medium;
const light_fg_base = palette.light.fg.medium;

const light_bg1 = adjust(light_bg_base, palette.light.bg1, bg);
const light_bg2 = adjust(light_bg_base, palette.light.bg2, bg);
const light_bg3 = adjust(light_bg_base, palette.light.bg3, bg);
const light_bg4 = adjust(light_bg_base, palette.light.bg4, bg);

const light_bg1_gs = _gs(light_bg1);
const light_bg2_gs = _gs(light_bg2);
const light_bg3_gs = _gs(light_bg3);
const light_bg4_gs = _gs(light_bg4);

const light_gray = adjust(chroma.mix(light_bg_base, light_fg_base), palette.light.gray, _b(bg, fg, 50));
const light_gray_gs = _gs(light_gray);

const light_fg0 = adjust(light_fg_base, palette.light.fg1, fg);
const light_fg2 = adjust(light_fg_base, palette.light.fg2, fg);
const light_fg3 = adjust(light_fg_base, palette.light.fg3, fg);
const light_fg4 = adjust(light_fg_base, palette.light.fg4, fg);

const light_fg0_gs = _gs(light_fg0);
const light_fg2_gs = _gs(light_fg2);
const light_fg3_gs = _gs(light_fg3);
const light_fg4_gs = _gs(light_fg4);

const lightVariables = {
  bg1: light_bg1,
  bg2: light_bg2,
  bg3: light_bg3,

};

const dark_bg_base = palette.dark.bg.medium;
const dark_fg_base = palette.dark.fg.medium;

const dark_bg1 = adjust(dark_bg_base, palette.dark.bg1, bg);
const dark_bg2 = adjust(dark_bg_base, palette.dark.bg2, bg);
const dark_bg3 = adjust(dark_bg_base, palette.dark.bg3, bg);
const dark_bg4 = adjust(dark_bg_base, palette.dark.bg4, bg);

const dark_bg1_gs = _gs(dark_bg1);
const dark_bg2_gs = _gs(dark_bg2);
const dark_bg3_gs = _gs(dark_bg3);
const dark_bg4_gs = _gs(dark_bg4);

const dark_gray = adjust(chroma.mix(dark_bg_base, dark_fg_base), palette.dark.gray, _b(bg, fg, 50));
const dark_gray_gs = _gs(dark_gray);

const dark_fg0 = adjust(dark_fg_base, palette.dark.fg1, fg);
const dark_fg2 = adjust(dark_fg_base, palette.dark.fg2, fg);
const dark_fg3 = adjust(dark_fg_base, palette.dark.fg3, fg);
const dark_fg4 = adjust(dark_fg_base, palette.dark.fg4, fg);

const dark_fg0_gs = _gs(dark_fg0);
const dark_fg2_gs = _gs(dark_fg2);
const dark_fg3_gs = _gs(dark_fg3);
const dark_fg4_gs = _gs(dark_fg4);

const darkVariables = {
  bg1: dark_bg1,
  bg2: dark_bg2,
  bg3: dark_bg3,