From da4984e0e1cd9236b937ca28a3a121e63dca5e05 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 5 Mar 2019 11:36:31 -0500
Subject: [PATCH 1/2] Support default key in color objects

---
 __tests__/plugins/backgroundColor.test.js | 10 ++++++++++
 __tests__/plugins/borderColor.test.js     | 10 ++++++++++
 __tests__/plugins/textColor.test.js       | 10 ++++++++++
 src/util/flattenColorPalette.js           | 11 ++++++++---
 4 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/__tests__/plugins/backgroundColor.test.js b/__tests__/plugins/backgroundColor.test.js
index 489487da3..1ea2e713d 100644
--- a/__tests__/plugins/backgroundColor.test.js
+++ b/__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)' },
diff --git a/__tests__/plugins/borderColor.test.js b/__tests__/plugins/borderColor.test.js
index 00f8df529..0db1d3103 100644
--- a/__tests__/plugins/borderColor.test.js
+++ b/__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)' },
diff --git a/__tests__/plugins/textColor.test.js b/__tests__/plugins/textColor.test.js
index 45ed5365d..3f05c3b7e 100644
--- a/__tests__/plugins/textColor.test.js
+++ b/__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)' },
diff --git a/src/util/flattenColorPalette.js b/src/util/flattenColorPalette.js
index 4faa88a92..3214d58d7 100644
--- a/src/util/flattenColorPalette.js
+++ b/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()

From fc75cf9d458c5ca29338b27334b658296ad25ae2 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 5 Mar 2019 11:42:31 -0500
Subject: [PATCH 2/2] Fix code style

---
 __tests__/plugins/textColor.test.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/__tests__/plugins/textColor.test.js b/__tests__/plugins/textColor.test.js
index 3f05c3b7e..a3a231a34 100644
--- a/__tests__/plugins/textColor.test.js
+++ b/__tests__/plugins/textColor.test.js
@@ -54,10 +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-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)' },