Allow colors to be defined as closures
This commit is contained in:
parent
67ec21e870
commit
109dec1681
2 changed files with 19 additions and 0 deletions
|
|
@ -95,3 +95,15 @@ test('it ignores colors that already have an alpha channel', () => {
|
|||
'background-color': 'hsla(240, 100%, 50%, 0.5)',
|
||||
})
|
||||
})
|
||||
|
||||
test('it allows a closure to be passed', () => {
|
||||
expect(
|
||||
withAlphaVariable({
|
||||
color: variable => `rgba(0, 0, 0, var(${variable}))`,
|
||||
property: 'background-color',
|
||||
variable: '--bg-opacity',
|
||||
})
|
||||
).toEqual({
|
||||
'background-color': 'rgba(0, 0, 0, var(--bg-opacity))',
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import createColor from 'color'
|
||||
import _ from 'lodash'
|
||||
|
||||
function hasAlpha(color) {
|
||||
return (
|
||||
|
|
@ -18,6 +19,12 @@ function toRgba(color) {
|
|||
}
|
||||
|
||||
export default function withAlphaVariable({ color, property, variable }) {
|
||||
if (_.isFunction(color)) {
|
||||
return {
|
||||
[property]: color(variable),
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const [r, g, b, a] = toRgba(color)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue