How to use the tinycolor2.mix function in tinycolor2
To help you get started, we’ve selected a few tinycolor2 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.
elastic / kibana / x-pack / legacy / plugins / searchprofiler / public / directives / profile_tree / util.js View on Github 
const aTime = _.sum(a.aggregations, agg => {
return agg.flat[0].time;
});
const bTime = _.sum(b.aggregations, agg => {
return agg.flat[0].time;
});
return comparator(aTime, bTime);
};
}
const sortedIndices = [];
for (const [key, index] of Object.entries(indices)) {
index.shards.sort(sortQueryComponents);
for (const shard of index.shards) {
shard.relative[target] = ((shard.time[target] / index.time[target]) * 100).toFixed(2);
shard.color[target] = tinycolor
.mix('#F5F5F5', '#FFAFAF', shard.relative[target])
.toHexString();
}
sortedIndices.push(index);
visibility[key] = false;
}
// And now sort the indices themselves
sortedIndices.sort((a, b) => comparator(a.time, b.time));
return sortedIndices;
}function getShadowColor (color, ratio = 9) {
return tinycolor.mix(
'#888888',
color,
(1 - (currentEasing(ratio) - primaryEasing) / (1 - primaryEasing)) * 100
).setAlpha(.2).toRgbString();
}private _computeMaterialPalette(base: string) {
const baseLight = tinycolor("#ffffff");
const baseDark = multiply(tinycolor(base).toRgb(), tinycolor(base).toRgb());
const baseTriad = tinycolor(base).tetrad();
Object.assign(this, {
50: tinycolor.mix(baseLight, base, 12).toHexString(),
100: tinycolor.mix(baseLight, base, 30).toHexString(),
200: tinycolor.mix(baseLight, base, 50).toHexString(),
300: tinycolor.mix(baseLight, base, 70).toHexString(),
400: tinycolor.mix(baseLight, base, 85).toHexString(),
500: tinycolor.mix(baseLight, base, 100).toHexString(),
600: tinycolor.mix(baseDark, base, 87).toHexString(),
700: tinycolor.mix(baseDark, base, 70).toHexString(),
800: tinycolor.mix(baseDark, base, 54).toHexString(),
900: tinycolor.mix(baseDark, base, 25).toHexString(),
A100: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(80).lighten(65).toHexString(),
A200: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(80).lighten(55).toHexString(),
A400: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(100).lighten(45).toHexString(),
A700: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(100).lighten(40).toHexString(),
});
this.main = this[500];
this.light = this[300];
this.dark = this[700];
}
}private _computeMaterialPalette(base: string) {
const baseLight = tinycolor("#ffffff");
const baseDark = multiply(tinycolor(base).toRgb(), tinycolor(base).toRgb());
const baseTriad = tinycolor(base).tetrad();
Object.assign(this, {
50: tinycolor.mix(baseLight, base, 12).toHexString(),
100: tinycolor.mix(baseLight, base, 30).toHexString(),
200: tinycolor.mix(baseLight, base, 50).toHexString(),
300: tinycolor.mix(baseLight, base, 70).toHexString(),
400: tinycolor.mix(baseLight, base, 85).toHexString(),
500: tinycolor.mix(baseLight, base, 100).toHexString(),
600: tinycolor.mix(baseDark, base, 87).toHexString(),
700: tinycolor.mix(baseDark, base, 70).toHexString(),
800: tinycolor.mix(baseDark, base, 54).toHexString(),
900: tinycolor.mix(baseDark, base, 25).toHexString(),
A100: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(80).lighten(65).toHexString(),
A200: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(80).lighten(55).toHexString(),
A400: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(100).lighten(45).toHexString(),
A700: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(100).lighten(40).toHexString(),
});
this.main = this[500];
this.light = this[300];
this.dark = this[700];
}
}private _computeMaterialPalette(base: string) {
const baseLight = tinycolor("#ffffff");
const baseDark = multiply(tinycolor(base).toRgb(), tinycolor(base).toRgb());
const baseTriad = tinycolor(base).tetrad();
Object.assign(this, {
50: tinycolor.mix(baseLight, base, 12).toHexString(),
100: tinycolor.mix(baseLight, base, 30).toHexString(),
200: tinycolor.mix(baseLight, base, 50).toHexString(),
300: tinycolor.mix(baseLight, base, 70).toHexString(),
400: tinycolor.mix(baseLight, base, 85).toHexString(),
500: tinycolor.mix(baseLight, base, 100).toHexString(),
600: tinycolor.mix(baseDark, base, 87).toHexString(),
700: tinycolor.mix(baseDark, base, 70).toHexString(),
800: tinycolor.mix(baseDark, base, 54).toHexString(),
900: tinycolor.mix(baseDark, base, 25).toHexString(),
A100: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(80).lighten(65).toHexString(),
A200: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(80).lighten(55).toHexString(),
A400: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(100).lighten(45).toHexString(),
A700: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(100).lighten(40).toHexString(),
});
this.main = this[500];
this.light = this[300];
this.dark = this[700];
}
}function getHoverColor (color, ratio = 5) {
return tinycolor.mix(
'#ffffff',
color,
currentEasing(ratio) * 100 / primaryEasing
).toHexString();
}private _computeMaterialPalette(base: string) {
const baseLight = tinycolor("#ffffff");
const baseDark = multiply(tinycolor(base).toRgb(), tinycolor(base).toRgb());
const baseTriad = tinycolor(base).tetrad();
Object.assign(this, {
50: tinycolor.mix(baseLight, base, 12).toHexString(),
100: tinycolor.mix(baseLight, base, 30).toHexString(),
200: tinycolor.mix(baseLight, base, 50).toHexString(),
300: tinycolor.mix(baseLight, base, 70).toHexString(),
400: tinycolor.mix(baseLight, base, 85).toHexString(),
500: tinycolor.mix(baseLight, base, 100).toHexString(),
600: tinycolor.mix(baseDark, base, 87).toHexString(),
700: tinycolor.mix(baseDark, base, 70).toHexString(),
800: tinycolor.mix(baseDark, base, 54).toHexString(),
900: tinycolor.mix(baseDark, base, 25).toHexString(),
A100: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(80).lighten(65).toHexString(),
A200: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(80).lighten(55).toHexString(),
A400: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(100).lighten(45).toHexString(),
A700: tinycolor.mix(baseDark, baseTriad[3], 15).saturate(100).lighten(40).toHexString(),
});
this.main = this[500];
this.light = this[300];export default function generatePalette(base) {
let baseLight = tinycolor('#ffffff');
let baseDark = multiply(tinycolor(base).toRgb(), tinycolor(base).toRgb());
let baseTriad = tinycolor(base).tetrad();
let palette = {
'50': tinycolor.mix(baseLight, base, 12),
'100': tinycolor.mix(baseLight, base, 30),
'200': tinycolor.mix(baseLight, base, 50),
'300': tinycolor.mix(baseLight, base, 70),
'400': tinycolor.mix(baseLight, base, 85),
'500': tinycolor.mix(baseLight, base, 100),
'600': tinycolor.mix(baseDark, base, 87),
'700': tinycolor.mix(baseDark, base, 70),
'800': tinycolor.mix(baseDark, base, 54),
'900': tinycolor.mix(baseDark, base, 25),
'A100': tinycolor.mix(baseDark, baseTriad[4], 15).saturate(80).lighten(65),
'A200': tinycolor.mix(baseDark, baseTriad[4], 15).saturate(80).lighten(55),
'A400': tinycolor.mix(baseDark, baseTriad[4], 15).saturate(100).lighten(45),
'A700': tinycolor.mix(baseDark, baseTriad[4], 15).saturate(100).lighten(40)
};
let contrastDarkColors = [];
let contrastStrongLightColors = [];.map(k => {
const [amount, sat, light] = ThemeService.MIX_AMOUNTS_SECONDARY[k];
return [k, tinycolor.mix(baseDark, baseTriad, amount)
.saturate(sat).lighten(light)] as [string, tinycolor.Instance];
});return polyhedron.faces.map((face, i) => {
switch (selectState[i]) {
case 'selected':
return tinycolor.mix(colors[face.numSides], 'lime');
case 'selectable':
return tinycolor.mix(colors[face.numSides], 'yellow', 25);
default:
return colors[face.numSides];
}
});
}, [polyhedron, operation, options, colors]);
