archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Support default key in color objects

Browse Source
This commit is contained in:
Adam Wathan 2019-03-05 11:36:31 -05:00
parent 1ffa750c76
commit da4984e0e1
4 changed files with 38 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
__tests__/plugins/backgroundColor.test.js
View File

@ -9,6 +9,12 @@ test('colors can be a nested object', () => {
theme: {
backgroundColor: {
purple: 'purple',
white: {
25: 'rgba(255,255,255,.25)',
50: 'rgba(255,255,255,.5)',
75: 'rgba(255,255,255,.75)',
default: '#fff',
},
red: {
1: 'rgb(33,0,0)',
2: 'rgb(67,0,0)',
@ -48,6 +54,10 @@ test('colors can be a nested object', () => {
{
utilities: {
'.bg-purple': { 'background-color': 'purple' },
'.bg-white-25': { 'background-color': 'rgba(255,255,255,.25)' },
'.bg-white-50': { 'background-color': 'rgba(255,255,255,.5)' },
'.bg-white-75': { 'background-color': 'rgba(255,255,255,.75)' },
'.bg-white': { 'background-color': '#fff' },
'.bg-red-1': { 'background-color': 'rgb(33,0,0)' },
'.bg-red-2': { 'background-color': 'rgb(67,0,0)' },
'.bg-red-3': { 'background-color': 'rgb(100,0,0)' },

10
__tests__/plugins/borderColor.test.js
View File

@ -9,6 +9,12 @@ test('colors can be a nested object', () => {
theme: {
borderColor: {
purple: 'purple',
white: {
25: 'rgba(255,255,255,.25)',
50: 'rgba(255,255,255,.5)',
75: 'rgba(255,255,255,.75)',
default: '#fff',
},
red: {
1: 'rgb(33,0,0)',
2: 'rgb(67,0,0)',
@ -48,6 +54,10 @@ test('colors can be a nested object', () => {
{
utilities: {
'.border-purple': { 'border-color': 'purple' },
'.border-white-25': { 'border-color': 'rgba(255,255,255,.25)' },
'.border-white-50': { 'border-color': 'rgba(255,255,255,.5)' },
'.border-white-75': { 'border-color': 'rgba(255,255,255,.75)' },
'.border-white': { 'border-color': '#fff' },
'.border-red-1': { 'border-color': 'rgb(33,0,0)' },
'.border-red-2': { 'border-color': 'rgb(67,0,0)' },
'.border-red-3': { 'border-color': 'rgb(100,0,0)' },

10
__tests__/plugins/textColor.test.js
View File

@ -9,6 +9,12 @@ test('colors can be a nested object', () => {
theme: {
textColor: {
purple: 'purple',
white: {
25: 'rgba(255,255,255,.25)',
50: 'rgba(255,255,255,.5)',
75: 'rgba(255,255,255,.75)',
default: '#fff',
},
red: {
1: 'rgb(33,0,0)',
2: 'rgb(67,0,0)',
@ -48,6 +54,10 @@ test('colors can be a nested object', () => {
{
utilities: {
'.text-purple': { color: 'purple' },
'.text-white-25': { 'color': 'rgba(255,255,255,.25)' },
'.text-white-50': { 'color': 'rgba(255,255,255,.5)' },
'.text-white-75': { 'color': 'rgba(255,255,255,.75)' },
'.text-white': { 'color': '#fff' },
'.text-red-1': { color: 'rgb(33,0,0)' },
'.text-red-2': { color: 'rgb(67,0,0)' },
'.text-red-3': { color: 'rgb(100,0,0)' },

11
src/util/flattenColorPalette.js
View File

@ -3,9 +3,14 @@ import _ from 'lodash'
export default function flattenColorPalette(colors) {
const result = _(colors)
.flatMap((color, name) => {
return _.isObject(color)
? _.map(color, (value, key) => [`${name}-${key}`, value])
: [[name, color]]
if (!_.isObject(color)) {
return [[name, color]]
}
return _.map(color, (value, key) => {
const suffix = key === 'default' ? '' : `-${key}`
return [`${name}${suffix}`, value]
})
})
.fromPairs()
.value()