How to use the @adobe/leonardo-contrast-colors.generateContrastColors 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.
adobe / leonardo / packages / ui / src / demo.js View on Github 
}
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; ibaseRatios = 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; ivar 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; idocument.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@adobe/leonardo-contrast-colors
Generate colors based on a desired contrast ratio
