How to use the @adobe/leonardo-contrast-colors.createScale function in @adobe/leonardo-contrast-colors

To help you get started, we’ve selected a few @adobe/leonardo-contrast-colors examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github adobe / leonardo / packages / ui / src / demo.js View on Github external
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"
  }
github adobe / leonardo / packages / ui / src / index.js View on Github external
}

  // 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);
github adobe / leonardo / packages / ui / src / charts.js View on Github external
function getChartColors(mode) {
  let shift = document.getElementById('shiftInput').value;

  let chartColors = [];

  // GENERATE PROPER SCALE OF COLORS FOR 3d CHART:
  let chartRGB = contrastColors.createScale({swatches: 340, colorKeys: colorArgs, colorspace: mode, shift: shift});

  for (let i=0; i

@adobe/leonardo-contrast-colors

Generate colors based on a desired contrast ratio

Apache-2.0
Latest version published 2 months ago

Package Health Score

81 / 100
Full package analysis

Similar packages