How to use @adobe/leonardo-contrast-colors - 10 common examples

}

  baseRatios = baseRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });
  uiRatios = uiRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });

  // adaptColor();
  let grayArray = contrastColors.generateContrastColors({colorKeys: baseScale.colorKeys, colorspace: baseScale.colorspace, base: base, ratios: baseRatios});
  let redArray = contrastColors.generateContrastColors({colorKeys: redScale.colorKeys, colorspace: redScale.colorspace, base: base, ratios: uiRatios});
  let blueArray = contrastColors.generateContrastColors({colorKeys: blueScale.colorKeys, colorspace: blueScale.colorspace, base: base, ratios: uiRatios});
  let purpleArray = contrastColors.generateContrastColors({colorKeys: purpleScale.colorKeys, colorspace: purpleScale.colorspace, base: base, ratios: uiRatios});
  let greenArray = contrastColors.generateContrastColors({colorKeys: greenScale.colorKeys, colorspace: greenScale.colorspace, base: base, ratios: uiRatios});
  let goldArray = contrastColors.generateContrastColors({colorKeys: goldScale.colorKeys, colorspace: goldScale.colorspace, base: base, ratios: uiRatios});

  // Grays
  document.documentElement.style
    .setProperty('--gray50', grayArray[0]);
  for (let i=1; i

baseRatios = baseRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });
  uiRatios = uiRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });

  // adaptColor();
  let grayArray = contrastColors.generateContrastColors({colorKeys: baseScale.colorKeys, colorspace: baseScale.colorspace, base: base, ratios: baseRatios});
  let redArray = contrastColors.generateContrastColors({colorKeys: redScale.colorKeys, colorspace: redScale.colorspace, base: base, ratios: uiRatios});
  let blueArray = contrastColors.generateContrastColors({colorKeys: blueScale.colorKeys, colorspace: blueScale.colorspace, base: base, ratios: uiRatios});
  let purpleArray = contrastColors.generateContrastColors({colorKeys: purpleScale.colorKeys, colorspace: purpleScale.colorspace, base: base, ratios: uiRatios});
  let greenArray = contrastColors.generateContrastColors({colorKeys: greenScale.colorKeys, colorspace: greenScale.colorspace, base: base, ratios: uiRatios});
  let goldArray = contrastColors.generateContrastColors({colorKeys: goldScale.colorKeys, colorspace: goldScale.colorspace, base: base, ratios: uiRatios});

  // Grays
  document.documentElement.style
    .setProperty('--gray50', grayArray[0]);
  for (let i=1; i

var base = grayScale.colors[brVal];
    document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
  }

  baseRatios = baseRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });
  uiRatios = uiRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });

  // adaptColor();
  let grayArray = contrastColors.generateContrastColors({colorKeys: baseScale.colorKeys, colorspace: baseScale.colorspace, base: base, ratios: baseRatios});
  let redArray = contrastColors.generateContrastColors({colorKeys: redScale.colorKeys, colorspace: redScale.colorspace, base: base, ratios: uiRatios});
  let blueArray = contrastColors.generateContrastColors({colorKeys: blueScale.colorKeys, colorspace: blueScale.colorspace, base: base, ratios: uiRatios});
  let purpleArray = contrastColors.generateContrastColors({colorKeys: purpleScale.colorKeys, colorspace: purpleScale.colorspace, base: base, ratios: uiRatios});
  let greenArray = contrastColors.generateContrastColors({colorKeys: greenScale.colorKeys, colorspace: greenScale.colorspace, base: base, ratios: uiRatios});
  let goldArray = contrastColors.generateContrastColors({colorKeys: goldScale.colorKeys, colorspace: goldScale.colorspace, base: base, ratios: uiRatios});

  // Grays
  document.documentElement.style
    .setProperty('--gray50', grayArray[0]);
  for (let i=1; i

// Convert input value into a split array of hex values.
  let tempArgs = [];
  // remove any whitespace from inputColors
  tempArgs.push(inputColors);
  colorArgs = tempArgs.join("").split(',').filter(String);

  let shift = 1;
  let clamping = document.getElementById('sequentialClamp').checked;

  // Generate scale data so we have access to all 3000 swatches to draw the gradient on the left
  let scaleData = contrastColors.createScale({swatches: 3000, colorKeys: colorArgs, colorspace: mode, shift: shift});
  let n = window.innerHeight - 282;

  let rampData = contrastColors.createScale({swatches: n, colorKeys: colorArgs, colorspace: mode, shift: shift});

  newColors = contrastColors.generateContrastColors({colorKeys: colorArgs, base: background, ratios: ratioInputs, colorspace: mode, shift: shift});

  // Create values for sliders
  let Values = [];
  let maxVal = 100;

  for(let i=0; i < newColors.length; i++){
    Values.push(maxVal * (d3.hsluv(newColors[i]).v / 100)) // wrong direction. Needs inversed.
    // Values.push(maxVal * (d3.hsluv(newColors[i]).v / 100))
  }
  // Values.sort(function(a, b){return a-b});
  // Values.sort(function(a, b){return a-b});

  var values = [];
  values = values.concat(0, Values, maxVal);
  values.sort(function(a, b){return a+b});
  var reverseShift = 1 / shift;

baseRatios = baseRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });
  uiRatios = uiRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });

  // adaptColor();
  let grayArray = contrastColors.generateContrastColors({colorKeys: baseScale.colorKeys, colorspace: baseScale.colorspace, base: base, ratios: baseRatios});
  let redArray = contrastColors.generateContrastColors({colorKeys: redScale.colorKeys, colorspace: redScale.colorspace, base: base, ratios: uiRatios});
  let blueArray = contrastColors.generateContrastColors({colorKeys: blueScale.colorKeys, colorspace: blueScale.colorspace, base: base, ratios: uiRatios});
  let purpleArray = contrastColors.generateContrastColors({colorKeys: purpleScale.colorKeys, colorspace: purpleScale.colorspace, base: base, ratios: uiRatios});
  let greenArray = contrastColors.generateContrastColors({colorKeys: greenScale.colorKeys, colorspace: greenScale.colorspace, base: base, ratios: uiRatios});
  let goldArray = contrastColors.generateContrastColors({colorKeys: goldScale.colorKeys, colorspace: goldScale.colorspace, base: base, ratios: uiRatios});

  // Grays
  document.documentElement.style
    .setProperty('--gray50', grayArray[0]);
  for (let i=1; i

document.documentElement.style.setProperty('--shadow-color', 'rgba(0, 0, 0, 0.1)');
  }

  baseRatios = baseRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });
  uiRatios = uiRatios.map(function(d) {
    var newVal = ((d-1) * conVal) + 1;
    return newVal;
  });

  // adaptColor();
  let grayArray = contrastColors.generateContrastColors({colorKeys: baseScale.colorKeys, colorspace: baseScale.colorspace, base: base, ratios: baseRatios});
  let redArray = contrastColors.generateContrastColors({colorKeys: redScale.colorKeys, colorspace: redScale.colorspace, base: base, ratios: uiRatios});
  let blueArray = contrastColors.generateContrastColors({colorKeys: blueScale.colorKeys, colorspace: blueScale.colorspace, base: base, ratios: uiRatios});
  let purpleArray = contrastColors.generateContrastColors({colorKeys: purpleScale.colorKeys, colorspace: purpleScale.colorspace, base: base, ratios: uiRatios});
  let greenArray = contrastColors.generateContrastColors({colorKeys: greenScale.colorKeys, colorspace: greenScale.colorspace, base: base, ratios: uiRatios});
  let goldArray = contrastColors.generateContrastColors({colorKeys: goldScale.colorKeys, colorspace: goldScale.colorspace, base: base, ratios: uiRatios});

  // Grays
  document.documentElement.style
    .setProperty('--gray50', grayArray[0]);
  for (let i=1; i

var br = document.getElementById('sliderBrightness');
  var con = document.getElementById('sliderContrast');
  var mode = document.getElementById('darkMode');


  var brVal = br.value * -1; // convert br.value to positive number to use as index
  var conVal = con.value;

  // TEST -> Define colors as configs and scales.


  // generateContrastColors({base: "#f4f5f8"});
  var baseRatios = [-1.1,1,1.12,1.25,1.45,1.75,2.25,3.01,4.52,7,11,16];
  var uiRatios = [1,1.12,1.3,2,3.01,4.52,7,11,16];

  var grayScale = contrastColors.createScale({
    swatches: 100,
    colorKeys: ["#4a5b7b","#72829c","#a6b2c6"],
    colorspace: 'HSL'
  });
  var base = grayScale.colors[5];
  // console.log(grayScale.colors);

  var baseScale = {
    colorKeys: grayScale.colorKeys,
    colorspace: grayScale.colorspace
  }

  var purpleScale = {
    colorKeys: ["#7a4beb","#ac80f4","#2f0071"],
    colorspace: "LAB"
  }

}
  for(let i=0; i

}

  // Convert input value into a split array of hex values.
  let tempArgs = [];
  // remove any whitespace from inputColors
  tempArgs.push(inputColors);
  colorArgs = tempArgs.join("").split(',').filter(String);

  let shift = 1;
  let clamping = document.getElementById('sequentialClamp').checked;

  // Generate scale data so we have access to all 3000 swatches to draw the gradient on the left
  let scaleData = contrastColors.createScale({swatches: 3000, colorKeys: colorArgs, colorspace: mode, shift: shift});
  let n = window.innerHeight - 282;

  let rampData = contrastColors.createScale({swatches: n, colorKeys: colorArgs, colorspace: mode, shift: shift});

  newColors = contrastColors.generateContrastColors({colorKeys: colorArgs, base: background, ratios: ratioInputs, colorspace: mode, shift: shift});

  // Create values for sliders
  let Values = [];
  let maxVal = 100;

  for(let i=0; i < newColors.length; i++){
    Values.push(maxVal * (d3.hsluv(newColors[i]).v / 100)) // wrong direction. Needs inversed.
    // Values.push(maxVal * (d3.hsluv(newColors[i]).v / 100))
  }
  // Values.sort(function(a, b){return a-b});
  // Values.sort(function(a, b){return a-b});

  var values = [];
  values = values.concat(0, Values, maxVal);

window.bulkColorInput = function bulkColorInput() {
  let bulkInputs = document.getElementById('bulkColors');
  let bulkValues = bulkInputs.value.replace(/\r\n/g,"\n").replace(/[,\/]/g,"\n").replace(" ", "").replace(/['\/]/g, "").replace(/["\/]/g, "").split("\n");
  let isSwatch = document.getElementById('importAsSwatch').checked;
  let bgInput = document.getElementById('bgField_2').value; // input in Dialog
  let bg = document.getElementById('bgField'); // input in UI

  // add key colors for each input
  for(let i=0; i