Support closures for colors in all circumstances (#2536)

This commit is contained in:
Adam Wathan 2020-10-09 21:03:23 -04:00
parent a6729cccbe
commit 35b7bb1bfc
17 changed files with 431 additions and 23 deletions

View file

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import toColorValue from '../util/toColorValue'
import { toRgba } from '../util/withAlphaVariable'
export default function() {
@ -12,14 +13,6 @@ export default function() {
const utilities = _(colors)
.map((value, modifier) => {
const getColorValue = color => {
if (_.isFunction(color)) {
return value({})
}
return color
}
const transparentTo = (() => {
if (_.isFunction(value)) {
return value({ opacityValue: 0 })
@ -37,21 +30,21 @@ export default function() {
[
`.${e(`from-${modifier}`)}`,
{
'--gradient-from-color': getColorValue(value, 'from'),
'--gradient-from-color': toColorValue(value, 'from'),
'--gradient-color-stops': `var(--gradient-from-color), var(--gradient-to-color, ${transparentTo})`,
},
],
[
`.${e(`via-${modifier}`)}`,
{
'--gradient-via-color': getColorValue(value, 'via'),
'--gradient-via-color': toColorValue(value, 'via'),
'--gradient-color-stops': `var(--gradient-from-color), var(--gradient-via-color), var(--gradient-to-color, ${transparentTo})`,
},
],
[
`.${e(`to-${modifier}`)}`,
{
'--gradient-to-color': getColorValue(value, 'to'),
'--gradient-to-color': toColorValue(value, 'to'),
},
],
]