Include outline-color in default color properties to transition (#10385)

adamwathan · deebov · web-flow · commit 937ac139a138 · 2023-01-21T14:52:55.000-05:00
Co-Authored-By: Dilshod &lt;28673719+deebov@users.noreply.github.com&gt;

Co-authored-by: Adam Wathan &lt;4323180+adamwathan@users.noreply.github.com&gt;
Co-authored-by: Dilshod &lt;28673719+deebov@users.noreply.github.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Alphabetize `theme` keys in default config ([#9953](https://github.com/tailwindlabs/tailwindcss/pull/9953))
 - Update esbuild to v17 ([#10368](https://github.com/tailwindlabs/tailwindcss/pull/10368))
+- Include `outline-color` in `transition` and `transition-colors` utilitires ([#10385](https://github.com/tailwindlabs/tailwindcss/pull/10385))
 
 ## [3.2.4] - 2022-11-11
 
diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js
@@ -878,8 +878,8 @@ module.exports = {
       none: 'none',
       all: 'all',
       DEFAULT:
-        'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
-      colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
+        'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
+      colors: 'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke',
       opacity: 'opacity',
       shadow: 'box-shadow',
       transform: 'transform',
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
@@ -1059,8 +1059,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
+    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
@@ -1059,8 +1059,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
+    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
@@ -750,8 +750,9 @@ crosscheck(() => {
         }
         @media (prefers-reduced-motion: no-preference) {
           .motion-safe\:transition {
-            transition-property: color, background-color, border-color, text-decoration-color, fill,
-              stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+            transition-property: color, background-color, border-color, outline-color,
+              text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+              backdrop-filter;
             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             transition-duration: 150ms;
           }
@@ -761,8 +762,9 @@ crosscheck(() => {
         }
         @media (prefers-reduced-motion: reduce) {
           .motion-reduce\:transition {
-            transition-property: color, background-color, border-color, text-decoration-color, fill,
-              stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+            transition-property: color, background-color, border-color, outline-color,
+              text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+              backdrop-filter;
             transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
             transition-duration: 150ms;
           }
@@ -865,8 +867,9 @@ crosscheck(() => {
           }
           @media (prefers-reduced-motion: no-preference) {
             .md\:motion-safe\:hover\:transition:hover {
-              transition-property: color, background-color, border-color, text-decoration-color,
-                fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+              transition-property: color, background-color, border-color, outline-color,
+                text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
+                backdrop-filter;
               transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
               transition-duration: 150ms;
             }
diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css
@@ -757,8 +757,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
+    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
@@ -757,8 +757,8 @@
   backdrop-filter: none;
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
-    opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
+    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }

Original file line number	Diff line number	Diff line change
`@@ -1059,8 +1059,8 @@`
`1059`	`1059`	`backdrop-filter: none;`
`1060`	`1060`	`}`
`1061`	`1061`	`.transition {`
`1062`		`- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,`
`1063`		`- opacity, box-shadow, transform, filter, backdrop-filter;`
	`1062`	`+ transition-property: color, background-color, border-color, outline-color, text-decoration-color,`
	`1063`	`+ fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;`
`1064`	`1064`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`1065`	`1065`	`transition-duration: 150ms;`
`1066`	`1066`	`}`
Original file line number	Diff line number	Diff line change
`@@ -750,8 +750,9 @@ crosscheck(() => {`
`750`	`750`	`}`
`751`	`751`	`@media (prefers-reduced-motion: no-preference) {`
`752`	`752`	`.motion-safe\:transition {`
`753`		`- transition-property: color, background-color, border-color, text-decoration-color, fill,`
`754`		`- stroke, opacity, box-shadow, transform, filter, backdrop-filter;`
	`753`	`+ transition-property: color, background-color, border-color, outline-color,`
	`754`	`+ text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,`
	`755`	`+ backdrop-filter;`
`755`	`756`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`756`	`757`	`transition-duration: 150ms;`
`757`	`758`	`}`
`@@ -761,8 +762,9 @@ crosscheck(() => {`
`761`	`762`	`}`
`762`	`763`	`@media (prefers-reduced-motion: reduce) {`
`763`	`764`	`.motion-reduce\:transition {`
`764`		`- transition-property: color, background-color, border-color, text-decoration-color, fill,`
`765`		`- stroke, opacity, box-shadow, transform, filter, backdrop-filter;`
	`765`	`+ transition-property: color, background-color, border-color, outline-color,`
	`766`	`+ text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,`
	`767`	`+ backdrop-filter;`
`766`	`768`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`767`	`769`	`transition-duration: 150ms;`
`768`	`770`	`}`
`@@ -865,8 +867,9 @@ crosscheck(() => {`
`865`	`867`	`}`
`866`	`868`	`@media (prefers-reduced-motion: no-preference) {`
`867`	`869`	`.md\:motion-safe\:hover\:transition:hover {`
`868`		`- transition-property: color, background-color, border-color, text-decoration-color,`
`869`		`- fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;`
	`870`	`+ transition-property: color, background-color, border-color, outline-color,`
	`871`	`+ text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,`
	`872`	`+ backdrop-filter;`
`870`	`873`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`871`	`874`	`transition-duration: 150ms;`
`872`	`875`	`}`
Original file line number	Diff line number	Diff line change
`@@ -757,8 +757,8 @@`
`757`	`757`	`backdrop-filter: none;`
`758`	`758`	`}`
`759`	`759`	`.transition {`
`760`		`- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,`
`761`		`- opacity, box-shadow, transform, filter, backdrop-filter;`
	`760`	`+ transition-property: color, background-color, border-color, outline-color, text-decoration-color,`
	`761`	`+ fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;`
`762`	`762`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`763`	`763`	`transition-duration: 150ms;`
`764`	`764`	`}`