Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const textColor = (): InfluxColors => {
const darkContrast = chroma.contrast(
`${backgroundColor}`,
InfluxColors.Kevlar
)
const lightContrast = chroma.contrast(
`${backgroundColor}`,
InfluxColors.White
)
if (darkContrast > lightContrast) {
return InfluxColors.Kevlar
}
return InfluxColors.White
}
function formatContrastRatio(title, foreground, background) {
const colorContrast = contrast(foreground, background)
const contrastIcon = colorContrast >= 4.5 ? '✅' : '🔴'
return `${contrastIcon} ${title} (${floor(colorContrast, 2)})`
}
export const getContrast = (a, b) => chroma.contrast(hslToHex(a), hslToHex(b))
private get textColor(): string {
const {color} = this.props
const darkContrast = chroma.contrast(color, InfluxColors.Kevlar)
const lightContrast = chroma.contrast(color, InfluxColors.White)
if (darkContrast > lightContrast) {
return InfluxColors.Kevlar
} else {
return InfluxColors.White
}
}
}
const colorCardClassName = (hexcode: string): string => {
const lightContrast = chroma.contrast(InfluxColors.White, hexcode)
const darkContrast = chroma.contrast(InfluxColors.Obsidian, hexcode)
const cardTextColor =
lightContrast >= darkContrast ? 'light-text' : 'dark-text'
return `colors-grid--card ${cardTextColor}`
}
simulatedForeground = blinder
.achromatomaly(`#${foreground}`)
.replace("#", "");
simulatedBackground = blinder
.achromatomaly(`#${background}`)
.replace("#", "");
}
if (simType === "achromatopsia") {
simulatedForeground = blinder
.achromatopsia(`#${foreground}`)
.replace("#", "");
simulatedBackground = blinder
.achromatopsia(`#${background}`)
.replace("#", "");
}
const contrast = chroma.contrast(simulatedForeground, simulatedBackground);
const fontSizeNum = Number(fontSize);
const modifiedContrast = contrast + contrast * contrastModifier;
let { wcagGrade } = getWcagScore(fontSizeNum, bold, modifiedContrast);
const pass = wcagGrade !== "FAIL";
return (
{percent}
<span style="{{">%</span>
style2 () {
if (this.album.color) {
const bg = this.album.color
const white = chroma.contrast(bg, 'white')
const black = chroma.contrast(bg, 'black')
return {
backgroundColor: bg,
color: white > black ? '#ffffff' : '#000000'
}
} else {
return this.style
}
},
releaseDate () {
const getColor = (base, {
multiplier,
lightness,
saturation,
}) => {
const neg = negate(base)
if (multiplier === 1) {
return neg
}
const isDark = chroma.contrast(neg, '#000') < chroma.contrast(neg, '#fff')
const isDull = chroma(neg).hsl()[1] < .5
return chroma(neg)
.saturate(isDull ? multiplier * saturation : 0)
.desaturate(isDull ? 0 : multiplier * saturation)
.darken(isDark ? 0 : multiplier * lightness)
.brighten(isDark ? multiplier * lightness : 0)
.hex()
}
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: isDisabled
? null
: isSelected
? data.color
: isFocused
? color.alpha(0.1).css()
: null,
color: isDisabled
? '#ccc'
: isSelected
? chroma.contrast(color, 'white') > 2
? 'white'
: 'black'
: data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
};
},
input: styles => ({ ...styles, ...dot() }),