Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
module.exports = function getThemes(passed) {
var mainColorTone = passed ? color(passed) : color.hsl(210, 100, 100);
var bgDark = mainColorTone.desaturate(0.5).darken(0.9).string();
var bgLight = 'hsl(255, 0%, 100%)';
var main = mainColorTone.darken(0.4).string();
var common = {
active: main,
error: 'rgba(205, 63, 69, 1)', // Errors, alpha, deprecated
warning: 'rgba(255, 189, 46, 1)', // Warnings, beta
info: 'rgba(80, 179, 221, 1)', // Rc
success: 'rgba(74, 165, 74, 1)', // Stable
dark: 'rgba(15, 15, 15, 1)',
light: 'rgba(220, 220, 220, 1)',
fontWeight: '100',
fontSize: '14px'
};
const createPalette = (hueVal, satVal, lgtVal) => {
const starter = Color.hsl(hueVal, satVal, lgtVal)
const steps = 10
const [hue, sat] = starter.hsl().array()
const darkest = calcDarkest(hue, sat)
const middle = calcMiddle(hue, sat)
const lightest = calcLightest(hue, sat)
console.log(darkest, middle)
const darkestToMiddle = calcStepValues(darkest, middle, steps / 2)
const middleToLightest = calcStepValues(middle, lightest, steps / 2)
const hslArray = [...darkestToMiddle, ...middleToLightest]
return uniq(
hslArray.map(hsl =>
module.exports = function getThemes(passed) {
const mainColorTone = passed ? color(passed) : color.hsl(210, 100, 100);
const grayBaseTone = color.hsl(0, 0, 100);
const colorGroups = {
lightBlue: {
300: mainColorTone.darken(0.3),
600: mainColorTone.darken(0.4)
},
marine: {
500: mainColorTone.desaturate(0.5).darken(0.5),
700: mainColorTone.desaturate(0.5).darken(0.8),
800: mainColorTone.desaturate(0.5).darken(0.85),
900: mainColorTone.desaturate(0.5).darken(0.9)
},
gray: {
50: grayBaseTone.darken(0.05),
100: grayBaseTone.darken(0.15),
400: grayBaseTone.darken(0.4),
handleMouseEvent(e, eventType) {
const {saturation, lightness} = this.calculateVal(e);
if (
saturation === this.state.color.object().s &&
lightness === this.state.color.object().l
) {
return;
}
const newColor = Color.hsl(
this.state.color.object().h,
saturation,
lightness,
);
this.setState({color: newColor});
this.props.onColorChange(newColor, eventType);
}
return range(steps).map(step =>
Color.hsl(dark).lightness(darkLum + step * stepDiff)
)
calcBackgroundColor() {
return Color.hsl(this.state.color.object().h, 100, 50).string();
}
handleMouseEvent(e, eventType) {
const newHue = this.calculateVal(e);
if (newHue === this.state.color.object().h) {
return;
}
const newColor = Color.hsl(
newHue,
this.state.color.object().s,
this.state.color.object().l,
);
this.setState({color: newColor});
this.props.onColorChange(newColor, eventType);
}
const calcDarkest = (hue, sat) => {
const doesColorContrastWithWhite = color => {
const contrastScore = color.contrast(Color("white"))
return inRange(contrastScore, 16.13, 16.56)
}
const doesColorMergeWithBlack = color => {
const contrastScore = color.contrast(Color("black"))
return inRange(contrastScore, 1.27, 1.31)
}
const light = range(101).filter(light => {
const C = Color.hsl(hue, sat, light)
return doesColorMergeWithBlack(C) && doesColorContrastWithWhite(C)
})
return Color.hsl(hue, sat, light[0])
}