Make background colors hoverable by default

This commit is contained in:
Adam Wathan 2017-08-27 20:59:20 -04:00
parent 6f15be84f1
commit 8163761b7d
4 changed files with 11367 additions and 51 deletions

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

File diff suppressed because one or more lines are too long

View file

@ -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',

View file

@ -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,
})
})
}))
}