Add text-decoration-color utilities (#5760)

* utilities and tests in place for textDecorationColor and textDecorationOpacity

* change 'backgroundColor' to 'textDecorationColor' in corePlugin declaration for latter

* remove explicit textDecorationOpacity utility (the JIT slash syntax suffices)

Co-authored-by: Michael Warner <[email protected]>

Author: MichaelAllenWarner

src/corePlugins.js

@@ -1801,6 +1801,17 @@ export let corePlugins = {
     })
   },
 
+  textDecorationColor: ({ matchUtilities, theme }) => {
+    matchUtilities(
+      {
+        decoration: (value) => {
+          return { 'text-decoration-color': toColorValue(value) }
+        },
+      },
+      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
+    )
+  },
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {

stubs/defaultConfig.stub.js

@@ -787,6 +787,7 @@ module.exports = {
       2: '2',
     },
     textColor: ({ theme }) => theme('colors'),
+    textDecorationColor: ({ theme }) => theme('colors'),
     textIndent: ({ theme }) => ({
       ...theme('spacing'),
     }),

tests/arbitrary-values.test.css

@@ -807,6 +807,24 @@
 .text-opacity-\[var\(--value\)\] {
   --tw-text-opacity: var(--value);
 }
+.decoration-\[black\] {
+  text-decoration-color: black;
+}
+.decoration-\[rgb\(123\2c 123\2c 123\)\] {
+  text-decoration-color: rgb(123, 123, 123);
+}
+.decoration-\[rgb\(123\2c _123\2c _123\)\] {
+  text-decoration-color: rgb(123, 123, 123);
+}
+.decoration-\[rgb\(123_123_123\)\] {
+  text-decoration-color: rgb(123 123 123);
+}
+.decoration-\[color\:var\(--color\)\] {
+  text-decoration-color: var(--color);
+}
+.decoration-\[var\(--color\)\] {
+  text-decoration-color: var(--color);
+}
 .placeholder-\[var\(--placeholder\)\]::placeholder {
   color: var(--placeholder);
 }

tests/arbitrary-values.test.html

@@ -297,6 +297,13 @@
     <div class="text-opacity-[0.8]"></div>
     <div class="text-opacity-[var(--value)]"></div>
 
+    <div class="decoration-[black]"></div>
+    <div class="decoration-[rgb(123,123,123)]"></div>
+    <div class="decoration-[rgb(123,_123,_123)]"></div>
+    <div class="decoration-[rgb(123_123_123)]"></div>
+    <div class="decoration-[color:var(--color)]"></div>
+    <div class="decoration-[var(--color)]"></div>
+
     <div class="placeholder-[var(--placeholder)]"></div>
 
     <div class="placeholder-opacity-[var(--placeholder-opacity)]"></div>

tests/basic-usage.test.css

@@ -773,6 +773,9 @@
 .underline {
   text-decoration: underline;
 }
+.decoration-red-600 {
+  text-decoration-color: #dc2626;
+}
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

tests/basic-usage.test.html

@@ -159,8 +159,9 @@
     <div class="text-center"></div>
     <div class="indent-6 -indent-12"></div>
     <div class="text-indigo-500"></div>
-    <div class="underline"></div>
     <div class="text-opacity-10"></div>
+    <div class="underline"></div>
+    <div class="decoration-red-600"></div>
     <div class="overflow-ellipsis truncate"></div>
     <div class="uppercase"></div>
     <div class="transform transform-gpu transform-none"></div>