Merge pull request #718 from tailwindcss/default-key-in-color-objects

Support default key in color objects

Author: adamwathan

__tests__/plugins/backgroundColor.test.js

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

__tests__/plugins/borderColor.test.js

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

__tests__/plugins/textColor.test.js

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

src/util/flattenColorPalette.js

@@ -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()