Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
function getReadableCustom(custom: string | undefined, background: 'light' | 'dark') {
if (!custom) {
return undefined;
}
const initialRgb = parseToRgb('#' + custom);
const initialRgbArr = rgbToTuple(initialRgb);
const initialHsl = parseToHsl('#' + custom);
const labColor = rgb2lab(initialRgbArr);
const labLitNorm = labColor[0] / 100; // Lab lightness normalized to 0 to 1 range.
if (background === 'light') {
// Note: We can use the raw MaxLitBase value for the IF and the clamp, because we don't need
// any hue dependant modifications.
// If color's lightness is higher than our preferred ceiling value.
if (labLitNorm > MaxLitBase) {
// Force lightness down to preferred ceiling value.
// Due to the preceding IF, this is essentially a ceiling clamp.
labColor[0] = MaxLitBase * 100;
const convertedRgb = lab2rgb(labColor);
state.container.style.width = state.width;
state.container.style.height = state.height;
state.renderer.setSize(state.width, state.height);
state.camera.aspect = state.width/state.height;
state.camera.updateProjectionMatrix();
}
if (changedProps.hasOwnProperty('skyRadius') && state.skyRadius) {
state.controls.hasOwnProperty('maxDistance') && (state.controls.maxDistance = state.skyRadius);
state.camera.far = state.skyRadius * 2.5;
state.camera.updateProjectionMatrix();
state.skysphere.geometry = new three.SphereGeometry(state.skyRadius);
}
if (changedProps.hasOwnProperty('backgroundColor')) {
let alpha = parseToRgb(state.backgroundColor).alpha;
if (alpha === undefined) alpha = 1;
state.renderer.setClearColor(new three.Color(opacify(1, state.backgroundColor)), alpha);
}
if (changedProps.hasOwnProperty('backgroundImageUrl')) {
if (!state.backgroundImageUrl) {
state.skysphere.visible = false;
state.skysphere.material.map = null;
!state.loadComplete && finishLoad();
} else {
new three.TextureLoader().load(state.backgroundImageUrl, texture => {
state.skysphere.material = new three.MeshBasicMaterial({ map: texture, side: three.BackSide });
state.skysphere.visible = true;
// triggered when background image finishes loading (asynchronously to allow 1 frame to load texture)
export function adjustLightness(amount, color) {
const { red, green, blue, alpha = 1 } = parseToRgb(color)
let rgb
if (amount === 0) {
rgb = rgba(0, 0, 0, alpha)
} else if (amount === 1) {
rgb = rgba(255, 255, 255, alpha)
} else {
let maxIteration = 20
const test = (color1, color2) => {
const mixed = mix(0.5, color1, color2)
const mixedlightness = getLightness(mixed)
if (Math.abs(amount - mixedlightness) < EPS || !maxIteration--) {
return mixed
}
if (mixedlightness > amount) {
return test(color1, mixed)
}
export const colorYik = props => color => {
color = typeof color === 'function' ? color(props) : color
const { red: r, green: g, blue: b } = parseToRgb(color)
const yik = (r * 299 + g * 587 + b * 114) / 1000
return yik >= th('yiqContrastedThreshold')(props)
? th('yikTextDark')(props)
: th('yikTextLight')(props)
}
export function colorYiq(color: string): string {
const r = parseToRgb(color).red;
const g = parseToRgb(color).green;
const b = parseToRgb(color).blue;
const yiq = (r * 299 + g * 587 + b * 114) / 1000;
if (yiq >= 150) {
return '#111';
}
return '#fff';
}
export const transparentize = (amount: number, color: string): string => {
if (color === 'transparent') {
return color;
}
const parsedColor = parseToRgb(color);
const alpha: number =
'alpha' in parsedColor && typeof parsedColor.alpha === 'number' ? parsedColor.alpha : 1;
const colorWithAlpha = {
...parsedColor,
alpha: clampValue((alpha * 100 - amount * 100) / 100, 0, 1),
};
return rgba(colorWithAlpha);
};
function colorYiq(color) {
var r = parseToRgb(color).red;
var g = parseToRgb(color).green;
var b = parseToRgb(color).blue;
var yiq = (r * 299 + g * 587 + b * 114) / 1000;
if (yiq >= 150) {
return '#111';
}
return '#fff';
}
export function colorYiq(color: string): string {
const r = parseToRgb(color).red;
const g = parseToRgb(color).green;
const b = parseToRgb(color).blue;
const yiq = (r * 299 + g * 587 + b * 114) / 1000;
if (yiq >= 150) {
return '#111';
}
return '#fff';
}
export const alphaHex = (value: number) => (hex: string) =>
toColorString({
...parseToRgb(hex),
alpha: value,
});
export function readableColor(color: string) {
const { red, green, blue } = parseToRgb(color);
const yiq = (red * 299 + green * 587 + blue * 114) / 1000;
return yiq >= 150 ? '#111' : '#fff';
}