Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
${hexRgb(backgroundColor)[0]},
${hexRgb(backgroundColor)[1]},
${hexRgb(backgroundColor)[2]},
${backgroundColorOpacity})`,
transitionDuration: `${timeOut}ms`,
},
[`& .${spinnerClassName}`]: {
opacity: 1,
transitionDuration: `${timeOut}ms`,
},
},
'.fade-exit-active': {
'& .overlay': {
backgroundColor: `rgba(
${hexRgb(backgroundColor)[0]},
${hexRgb(backgroundColor)[1]},
${hexRgb(backgroundColor)[2]},
0)`,
transitionDuration: `${timeOut}ms`,
},
[`& .${spinnerClassName}`]: {
opacity: 0,
transitionDuration: `${timeOut}ms`,
},
},
}));
const colorToHex = color =>
color.startsWith(`rgba(`)
? rgbArray(color)
: hexRgb(color, { format: `array` })
export const toRGB = color => {
if (isHex(color)) {
return discretize(hexToRGB(color)).join(' ');
} else if (colorNames[color]) {
return discretize(colorNames[color]).join(' ');
}
throw new Error(`Unknown color: ${color}`);
};
textureCtx.scale(1, -1);
textureCtx.drawImage(textureCanvas, 0, 0, W, H);
textureCtx.restore();
bufferCtx.save();
bufferCtx.globalAlpha = 1.0;
for (let r = 0; r < s; r++) {
bufferCtx.translate(CX, CY);
bufferCtx.rotate(PI2 / s);
bufferCtx.translate(-CX, -CY);
bufferCtx.drawImage(textureCanvas, 0, 0, W, H, 0, 0, W, H);
}
bufferCtx.restore();
mainCtx.save();
const { red, green, blue } = hexToRgb(backgroundColor);
mainCtx.fillStyle = `rgba(${red}, ${green}, ${blue}, ${backgroundOpacity})`;
mainCtx.fillRect(0, 0, canvas.width, canvas.height);
mainCtx.translate(CX, CY);
mainCtx.translate(-CX, -CY);
mainCtx.drawImage(bufferCanvas, 0, 0);
mainCtx.restore();
}
onColorSelected = (color) => {
this.webview.postMessage(JSON.stringify({op:'color', color: hexRgb(color)}));
this.setState({color, showColorPicker: false});
}
componentWillMount() {
const genColorFromHex = ({ color }) => {
if (!isHex(color)) return `1, 1, 1`;
const { red, green, blue } = hexRgb(color);
return `${(red / 255).toFixed(2)}, ${(green / 255).toFixed(2)}, ${(
blue / 255
).toFixed(2)}`;
};
import { css } from 'emotion';
import tokens from '@contentful/forma-36-tokens';
import hexRgb from 'hex-rgb';
const { red, green, blue } = hexRgb(tokens.colorElementMid);
export const BORDER_SIZE = 2;
export const styles = {
focalPoint: css({
backgroundColor: `rgba(${red}, ${green}, ${blue}, 0.5)`,
borderRadius: '50%',
border: `${BORDER_SIZE}px solid ${tokens.colorElementDarkest}`,
opacity: 1,
transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingCubicBezier}`,
position: 'absolute',
pointerEvents: 'none'
})
};
const rgb = str => hex(str).map(x => x / 255);