diff --git a/src/plugins/accentColor.js b/src/plugins/accentColor.js new file mode 100644 index 000000000000..de8c5958e14d --- /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( + { + accent: (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..2c1e608ac4e7 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -172,6 +172,10 @@ module.exports = { none: 'none', }, caretColor: (theme) => theme('colors'), + accentColor: (theme) => ({ + ...theme('colors'), + auto: 'auto', + }), 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 @@
+