How to use the @adobe/leonardo-contrast-colors.luminance 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
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";
    } else {
      colorOutput.style.color = '#000000';
    }
    createDemo(newColors[i], background);
  }

  var copyColors = document.getElementById('copyAllColors');
  copyColors.setAttribute('data-clipboard-text', newColors);

  // update URL parameters
  updateParams(inputColors, background.substr(1), ratioInputs, mode);

  chartData.createData(scaleData.colors);
  charts.showCharts('CAM02');
  colorSpaceFeedback('CAM02'); // manually enter default of CAM02

@adobe/leonardo-contrast-colors

Generate colors based on a desired contrast ratio

Apache-2.0
Latest version published 3 months ago

Package Health Score

81 / 100
Full package analysis

Similar packages