Make background colors hoverable by default
This commit is contained in:
parent
6f15be84f1
commit
8163761b7d
4 changed files with 11367 additions and 51 deletions
11312
dist/tailwind.css
vendored
Normal file
11312
dist/tailwind.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
dist/tailwind.css.map
vendored
Normal file
1
dist/tailwind.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -136,54 +136,56 @@ export default {
|
|||
'pink-lightest',
|
||||
]
|
||||
},
|
||||
backgroundColors: [
|
||||
{
|
||||
'light': 'white',
|
||||
'light-soft': 'grey-200',
|
||||
'light-softer': 'grey-300',
|
||||
'light-softest': 'grey-400',
|
||||
'dark': 'grey-900',
|
||||
'dark-soft': 'grey-800',
|
||||
'dark-softer': 'grey-700',
|
||||
'dark-softest': 'grey-600',
|
||||
},
|
||||
'red-dark',
|
||||
'red',
|
||||
'red-light',
|
||||
'red-lightest',
|
||||
'orange-dark',
|
||||
'orange',
|
||||
'orange-light',
|
||||
'orange-lightest',
|
||||
'yellow-dark',
|
||||
'yellow',
|
||||
'yellow-light',
|
||||
'yellow-lightest',
|
||||
'green-dark',
|
||||
'green',
|
||||
'green-light',
|
||||
'green-lightest',
|
||||
'teal-dark',
|
||||
'teal',
|
||||
'teal-light',
|
||||
'teal-lightest',
|
||||
'blue-dark',
|
||||
'blue',
|
||||
'blue-light',
|
||||
'blue-lightest',
|
||||
'indigo-dark',
|
||||
'indigo',
|
||||
'indigo-light',
|
||||
'indigo-lightest',
|
||||
'purple-dark',
|
||||
'purple',
|
||||
'purple-light',
|
||||
'purple-lightest',
|
||||
'pink-dark',
|
||||
'pink',
|
||||
'pink-light',
|
||||
'pink-lightest',
|
||||
],
|
||||
backgrounds: {
|
||||
colors: [
|
||||
{
|
||||
'light': 'white',
|
||||
'light-soft': 'grey-200',
|
||||
'light-softer': 'grey-300',
|
||||
'light-softest': 'grey-400',
|
||||
'dark': 'grey-900',
|
||||
'dark-soft': 'grey-800',
|
||||
'dark-softer': 'grey-700',
|
||||
'dark-softest': 'grey-600',
|
||||
},
|
||||
'red-dark',
|
||||
'red',
|
||||
'red-light',
|
||||
'red-lightest',
|
||||
'orange-dark',
|
||||
'orange',
|
||||
'orange-light',
|
||||
'orange-lightest',
|
||||
'yellow-dark',
|
||||
'yellow',
|
||||
'yellow-light',
|
||||
'yellow-lightest',
|
||||
'green-dark',
|
||||
'green',
|
||||
'green-light',
|
||||
'green-lightest',
|
||||
'teal-dark',
|
||||
'teal',
|
||||
'teal-light',
|
||||
'teal-lightest',
|
||||
'blue-dark',
|
||||
'blue',
|
||||
'blue-light',
|
||||
'blue-lightest',
|
||||
'indigo-dark',
|
||||
'indigo',
|
||||
'indigo-light',
|
||||
'indigo-lightest',
|
||||
'purple-dark',
|
||||
'purple',
|
||||
'purple-light',
|
||||
'purple-lightest',
|
||||
'pink-dark',
|
||||
'pink',
|
||||
'pink-light',
|
||||
'pink-lightest',
|
||||
]
|
||||
},
|
||||
borders: {
|
||||
defaults: {
|
||||
width: '1px',
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import _ from 'lodash'
|
||||
import defineClass from '../util/defineClass'
|
||||
import normalizeColorList from '../util/normalizeColorList'
|
||||
import hoverable from '../util/hoverable'
|
||||
|
||||
export default function ({ colors, backgroundColors }) {
|
||||
return _.map(normalizeColorList(backgroundColors, colors), (color, className) => {
|
||||
export default function ({ colors, backgrounds }) {
|
||||
return hoverable(_.map(normalizeColorList(backgrounds.colors, colors), (color, className) => {
|
||||
return defineClass(`bg-${className}`, {
|
||||
'background-color': color,
|
||||
})
|
||||
})
|
||||
}))
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue