From c2ce0d2b27ee03b779f2a42bc72c914001672e91 Mon Sep 17 00:00:00 2001
From: Luke Warlow <projects@warlow.dev>
Date: Sat, 4 Sep 2021 12:25:19 +0100
Subject: [PATCH 1/2] Add accent-color utilities

---
 src/plugins/accentColor.js  | 19 +++++++++++++++++++
 src/plugins/index.js        |  1 +
 stubs/defaultConfig.stub.js |  1 +
 tests/basic-usage.test.css  |  3 +++
 tests/basic-usage.test.html |  1 +
 5 files changed, 25 insertions(+)
 create mode 100644 src/plugins/accentColor.js

diff --git a/src/plugins/accentColor.js b/src/plugins/accentColor.js
new file mode 100644
index 000000000000..53e4589f058f
--- /dev/null
+++ b/src/plugins/accentColor.js
@@ -0,0 +1,19 @@
+import flattenColorPalette from '../util/flattenColorPalette'
+import toColorValue from '../util/toColorValue'
+
+export default function () {
+  return function ({ matchUtilities, theme, variants }) {
+    matchUtilities(
+      {
+        caret: (value) => {
+          return { 'accent-color': toColorValue(value) }
+        },
+      },
+      {
+        values: flattenColorPalette(theme('accentColor')),
+        variants: variants('accentColor'),
+        type: 'color',
+      }
+    )
+  }
+}
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 72fbf41b3b52..4407c24dd7f0 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -125,6 +125,7 @@ export { default as fontSmoothing } from './fontSmoothing'
 export { default as placeholderColor } from './placeholderColor'
 export { default as placeholderOpacity } from './placeholderOpacity'
 export { default as caretColor } from './caretColor'
+export { default as accentColor } from './accentColor'
 
 export { default as opacity } from './opacity'
 export { default as backgroundBlendMode } from './backgroundBlendMode'
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 2230f16efb20..298bd18469b8 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -172,6 +172,7 @@ module.exports = {
       none: 'none',
     },
     caretColor: (theme) => theme('colors'),
+    accentColor: (theme) => theme('colors'),
     contrast: {
       0: '0',
       50: '.5',
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index ab005dfe45b3..393b732fef0e 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -649,6 +649,9 @@
 .caret-red-600 {
   caret-color: #dc2626;
 }
+.accent-red-600 {
+  accent-color: #dc2626;
+}
 .opacity-90 {
   opacity: 0.9;
 }
diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html
index b6e86d267d91..e21a6c79b053 100644
--- a/tests/basic-usage.test.html
+++ b/tests/basic-usage.test.html
@@ -101,6 +101,7 @@
     <div class="placeholder-green-300"></div>
     <div class="placeholder-opacity-60"></div>
     <div class="caret-red-600"></div>
+    <div class="accent-red-600"></div>
     <div class="place-items-end"></div>
     <div class="place-self-center"></div>
     <div class="pointer-events-none"></div>

From 027b70a5783993a025f232a2ad70038398fb3abd Mon Sep 17 00:00:00 2001
From: Luke Warlow <projects@warlow.dev>
Date: Sat, 4 Sep 2021 14:56:02 +0100
Subject: [PATCH 2/2] Address comments

---
 src/plugins/accentColor.js  | 2 +-
 stubs/defaultConfig.stub.js | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/plugins/accentColor.js b/src/plugins/accentColor.js
index 53e4589f058f..de8c5958e14d 100644
--- a/src/plugins/accentColor.js
+++ b/src/plugins/accentColor.js
@@ -5,7 +5,7 @@ export default function () {
   return function ({ matchUtilities, theme, variants }) {
     matchUtilities(
       {
-        caret: (value) => {
+        accent: (value) => {
           return { 'accent-color': toColorValue(value) }
         },
       },
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
index 298bd18469b8..2c1e608ac4e7 100644
--- a/stubs/defaultConfig.stub.js
+++ b/stubs/defaultConfig.stub.js
@@ -172,7 +172,10 @@ module.exports = {
       none: 'none',
     },
     caretColor: (theme) => theme('colors'),
-    accentColor: (theme) => theme('colors'),
+    accentColor: (theme) => ({
+      ...theme('colors'),
+      auto: 'auto',
+    }),
     contrast: {
       0: '0',
       50: '.5',