Make core plugins that depend on colors fall back to global color palette if not specified explicitly

__tests__/corePlugins/backgroundColors.test.js

@@ -0,0 +1,82 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/backgroundColors'
+
+test('it generates background color utilities', () => {
+  const addedUtilities = []
+
+  const pluginApi = {
+    config: () => null,
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin({
+    variants: ['responsive', 'hover', 'focus'],
+    values: {
+      red: '#e3342f',
+      green: '#38c172',
+      blue: '#3490dc',
+    },
+  })(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.bg-red': { 'background-color': '#e3342f' },
+        '.bg-green': { 'background-color': '#38c172' },
+        '.bg-blue': { 'background-color': '#3490dc' },
+      },
+      variants: ['responsive', 'hover', 'focus'],
+    },
+  ])
+})
+
+test('it uses the theme color palette if no background colors are provided', () => {
+  const addedUtilities = []
+
+  const pluginApi = {
+    config: (path, defaultValue) =>
+      _.get(
+        {
+          theme: {
+            colors: {
+              orange: '#f6993f',
+              teal: '#4dc0b5',
+              indigo: '#6574cd',
+            },
+          },
+        },
+        path,
+        defaultValue
+      ),
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin({
+    variants: ['responsive', 'hover', 'focus'],
+    values: undefined,
+  })(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.bg-orange': { 'background-color': '#f6993f' },
+        '.bg-teal': { 'background-color': '#4dc0b5' },
+        '.bg-indigo': { 'background-color': '#6574cd' },
+      },
+      variants: ['responsive', 'hover', 'focus'],
+    },
+  ])
+})

__tests__/corePlugins/borderColors.test.js

@@ -0,0 +1,118 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/borderColors'
+
+test('it generates border color utilities', () => {
+  const addedUtilities = []
+
+  const pluginApi = {
+    config: () => null,
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin({
+    variants: ['responsive', 'hover', 'focus'],
+    values: {
+      red: '#e3342f',
+      green: '#38c172',
+      blue: '#3490dc',
+    },
+  })(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.border-red': { 'border-color': '#e3342f' },
+        '.border-green': { 'border-color': '#38c172' },
+        '.border-blue': { 'border-color': '#3490dc' },
+      },
+      variants: ['responsive', 'hover', 'focus'],
+    },
+  ])
+})
+
+test('it ignores the default border color', () => {
+  const addedUtilities = []
+
+  const pluginApi = {
+    config: () => null,
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin({
+    variants: ['responsive', 'hover', 'focus'],
+    values: {
+      red: '#e3342f',
+      green: '#38c172',
+      blue: '#3490dc',
+      default: '#dae1e7',
+    },
+  })(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.border-red': { 'border-color': '#e3342f' },
+        '.border-green': { 'border-color': '#38c172' },
+        '.border-blue': { 'border-color': '#3490dc' },
+      },
+      variants: ['responsive', 'hover', 'focus'],
+    },
+  ])
+})
+
+test('it uses the theme color palette if no border colors are provided', () => {
+  const addedUtilities = []
+
+  const pluginApi = {
+    config: (path, defaultValue) =>
+      _.get(
+        {
+          theme: {
+            colors: {
+              orange: '#f6993f',
+              teal: '#4dc0b5',
+              indigo: '#6574cd',
+            },
+          },
+        },
+        path,
+        defaultValue
+      ),
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin({
+    variants: ['responsive', 'hover', 'focus'],
+    values: undefined,
+  })(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.border-orange': { 'border-color': '#f6993f' },
+        '.border-teal': { 'border-color': '#4dc0b5' },
+        '.border-indigo': { 'border-color': '#6574cd' },
+      },
+      variants: ['responsive', 'hover', 'focus'],
+    },
+  ])
+})

__tests__/corePlugins/textColors.test.js

@@ -0,0 +1,82 @@
+import _ from 'lodash'
+import escapeClassName from '../../src/util/escapeClassName'
+import plugin from '../../src/plugins/textColors'
+
+test('it generates text color utilities', () => {
+  const addedUtilities = []
+
+  const pluginApi = {
+    config: () => null,
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin({
+    variants: ['responsive', 'hover', 'focus'],
+    values: {
+      red: '#e3342f',
+      green: '#38c172',
+      blue: '#3490dc',
+    },
+  })(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.text-red': { color: '#e3342f' },
+        '.text-green': { color: '#38c172' },
+        '.text-blue': { color: '#3490dc' },
+      },
+      variants: ['responsive', 'hover', 'focus'],
+    },
+  ])
+})
+
+test('it uses the theme color palette if no text colors are provided', () => {
+  const addedUtilities = []
+
+  const pluginApi = {
+    config: (path, defaultValue) =>
+      _.get(
+        {
+          theme: {
+            colors: {
+              orange: '#f6993f',
+              teal: '#4dc0b5',
+              indigo: '#6574cd',
+            },
+          },
+        },
+        path,
+        defaultValue
+      ),
+    e: escapeClassName,
+    addUtilities(utilities, variants) {
+      addedUtilities.push({
+        utilities,
+        variants,
+      })
+    },
+  }
+
+  plugin({
+    variants: ['responsive', 'hover', 'focus'],
+    values: undefined,
+  })(pluginApi)
+
+  expect(addedUtilities).toEqual([
+    {
+      utilities: {
+        '.text-orange': { color: '#f6993f' },
+        '.text-teal': { color: '#4dc0b5' },
+        '.text-indigo': { color: '#6574cd' },
+      },
+      variants: ['responsive', 'hover', 'focus'],
+    },
+  ])
+})

src/plugins/backgroundColors.js

@@ -1,9 +1,10 @@
 import _ from 'lodash'
 
 export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+  return function({ addUtilities, e, config }) {
+    const backgroundColors = _.isUndefined(values) ? config('theme.colors') : values
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(backgroundColors, (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
           {

src/plugins/borderColors.js

@@ -1,9 +1,10 @@
 import _ from 'lodash'
 
 export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+  return function({ addUtilities, e, config }) {
+    const borderColors = _.isUndefined(values) ? config('theme.colors') : values
     const utilities = _.fromPairs(
-      _.map(_.omit(values, 'default'), (value, modifier) => {
+      _.map(_.omit(borderColors, 'default'), (value, modifier) => {
         return [
           `.${e(`border-${modifier}`)}`,
           {

src/plugins/textColors.js

@@ -1,9 +1,10 @@
 import _ from 'lodash'
 
 export default function({ values, variants }) {
-  return function({ addUtilities, e }) {
+  return function({ addUtilities, e, config }) {
+    const textColors = _.isUndefined(values) ? config('theme.colors') : values
     const utilities = _.fromPairs(
-      _.map(values, (value, modifier) => {
+      _.map(textColors, (value, modifier) => {
         return [
           `.${e(`text-${modifier}`)}`,
           {