How to use the @adobe/leonardo-contrast-colors.contrast 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 / index.js View on Github external
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
github adobe / leonardo / packages / ui / src / index.js View on Github external
window.distributeLum = function distributeLum() {
  let lums = interpolateLumArray();
  var NewContrast = [];

  for(let i=1; i 0){
    ratioItems[0].parentNode.removeChild(ratioItems[0]);
  }
  let sliders = document.getElementById('colorSlider-wrapper');
  sliders.innerHTML = ' ';

  // Add all new
  for(let i=0; i
github adobe / leonardo / packages / ui / src / index.js View on Github external
var backgroundR = d3.rgb(background).r;
  var backgroundG = d3.rgb(background).g;
  var backgroundB = d3.rgb(background).b;

  var colorOutputWrapper = document.getElementById('colorOutputs');
  colorOutputWrapper.innerHTML = '';
  let wrap = document.getElementById('demoWrapper');
  wrap.innerHTML = '';

  for (let i = 0; i < newColors.length; i++) {
    var colorOutput = document.createElement('div');
    var colorOutputVal = newColors[i];
    var colorOutputText = document.createTextNode(d3.rgb(colorOutputVal).hex());
    var bg = d3.color(background).rgb();
    var outputRatio = contrastColors.contrast([d3.rgb(newColors[i]).r, d3.rgb(newColors[i]).g, d3.rgb(newColors[i]).b], [bg.r, bg.g, bg.b]);
    var ratioText = document.createTextNode(outputRatio.toFixed(2));
    var s1 = document.createElement('span');
    var s2 = document.createElement('span');

    colorOutputWrapper.appendChild(colorOutput);
    colorOutput.className = 'colorOutputBlock';
    colorOutput.style.backgroundColor = colorOutputVal;
    colorOutput.setAttribute('data-clipboard-text', colorOutputVal);
    s1.appendChild(colorOutputText);
    s1.className = 'colorOutputValue';
    s2.appendChild(ratioText);
    colorOutput.appendChild(s1);
    colorOutput.appendChild(s2);

    if (contrastColors.luminance(d3.rgb(newColors[i]).r, d3.rgb(newColors[i]).g, d3.rgb(newColors[i]).b) < 0.275) {
      colorOutput.style.color = "#ffffff";

@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