wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add opacity modifiers for color utilities

Browse source
This commit is contained in:
Adam Wathan 2020-04-26 09:48:54 -04:00
parent 30e0cb10b7
commit 3b565d1f9c
25 changed files with 24761 additions and 521 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/plugins/backgroundColor.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants }) {
@ -7,9 +8,11 @@ export default function() {
_.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
return [
`.${e(`bg-${modifier}`)}`,
{
'background-color': value,
},
withAlphaVariable({
color: value,
property: 'background-color',
variable: '--bg-opacity',
}),
]
})
)

5
src/plugins/backgroundOpacity.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('backgroundOpacity', [['bg-opacity', ['--bg-opacity']]])
}

9
src/plugins/borderColor.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants }) {
@ -9,9 +10,11 @@ export default function() {
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`border-${modifier}`)}`,
{
'border-color': value,
},
withAlphaVariable({
color: value,
property: 'border-color',
variable: '--border-opacity',
}),
]
})
)

5
src/plugins/borderOpacity.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('borderOpacity', [['border-opacity', ['--border-opacity']]])
}

9
src/plugins/divideColor.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants }) {
@ -9,9 +10,11 @@ export default function() {
_.map(_.omit(colors, 'default'), (value, modifier) => {
return [
`.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
{
'border-color': value,
},
withAlphaVariable({
color: value,
property: 'border-color',
variable: '--divide-opacity',
}),
]
})
)

5
src/plugins/divideOpacity.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('divideOpacity', [['divide-opacity', ['--divide-opacity']]])
}

5
src/plugins/placeholderColor.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants }) {
@ -7,9 +8,7 @@ export default function() {
_.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
return [
`.${e(`placeholder-${modifier}`)}::placeholder`,
{
color: value,
},
withAlphaVariable({ color: value, property: 'color', variable: '--placeholder-opacity' }),
]
})
)

7
src/plugins/placeholderOpacity.js Normal file
View file

@ -0,0 +1,7 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('placeholderOpacity', [
['placeholder-opacity', ['--placeholder-opacity']],
])
}

5
src/plugins/textColor.js
View file

@ -1,5 +1,6 @@
import _ from 'lodash'
import flattenColorPalette from '../util/flattenColorPalette'
import withAlphaVariable from '../util/withAlphaVariable'
export default function() {
return function({ addUtilities, e, theme, variants }) {
@ -7,9 +8,7 @@ export default function() {
_.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
return [
`.${e(`text-${modifier}`)}`,
{
color: value,
},
withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' }),
]
})
)

5
src/plugins/textOpacity.js Normal file
View file

@ -0,0 +1,5 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function() {
return createUtilityPlugin('textOpacity', [['text-opacity', ['--text-opacity']]])
}