import createColor from 'color' import _ from 'lodash' function hasAlpha(color) { return ( color.startsWith('rgba(') || color.startsWith('hsla(') || (color.startsWith('#') && color.length === 9) || (color.startsWith('#') && color.length === 5) ) } export function toRgba(color) { const [r, g, b, a] = createColor(color).rgb().array() return [r, g, b, a === undefined && hasAlpha(color) ? 1 : a] } export function toHsla(color) { const [h, s, l, a] = createColor(color).hsl().array() return [h, `${s}%`, `${l}%`, a === undefined && hasAlpha(color) ? 1 : a] } export function withAlphaValue(color, alphaValue, defaultValue) { if (_.isFunction(color)) { return color({ opacityValue: alphaValue }) } try { const isHSL = color.startsWith('hsl') const [i, j, k] = isHSL ? toHsla(color) : toRgba(color) return `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, ${alphaValue})` } catch { return defaultValue } } export default function withAlphaVariable({ color, property, variable }) { if (_.isFunction(color)) { return { [variable]: '1', [property]: color({ opacityVariable: variable, opacityValue: `var(${variable})` }), } } try { const isHSL = color.startsWith('hsl') const [i, j, k, a] = isHSL ? toHsla(color) : toRgba(color) if (a !== undefined) { return { [property]: color, } } return { [variable]: '1', [property]: `${isHSL ? 'hsla' : 'rgba'}(${i}, ${j}, ${k}, var(${variable}))`, } } catch (error) { return { [property]: color, } } }