From 4e499022ee38462caeb1641613f388f86e9a07e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benoi=CC=82t=20Rouleau?= Date: Thu, 9 Jan 2025 18:55:27 -0500 Subject: [PATCH 1/3] Include outline-color in default color properties to transition (v4 edition) --- packages/tailwindcss/src/compat/default-theme.ts | 5 +++-- packages/tailwindcss/src/utilities.test.ts | 15 ++++++++------- packages/tailwindcss/src/utilities.ts | 4 ++-- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/tailwindcss/src/compat/default-theme.ts b/packages/tailwindcss/src/compat/default-theme.ts index 85924057e87f..90f6e017c8af 100644 --- a/packages/tailwindcss/src/compat/default-theme.ts +++ b/packages/tailwindcss/src/compat/default-theme.ts @@ -1019,8 +1019,9 @@ export default { 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/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index f8f0beb91328..88260584ea60 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14323,8 +14323,9 @@ test('transition', async () => { @theme { --default-transition-timing-function: ease; --default-transition-duration: 100ms; - --transition-property: color, background-color, border-color, text-decoration-color, fill, - stroke, opacity, box-shadow, transform, filter, backdrop-filter; + --transition-property: color, background-color, outline-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, + backdrop-filter; --transition-property-opacity: opacity; } @tailwind utilities; @@ -14344,12 +14345,12 @@ test('transition', async () => { ":root { --default-transition-timing-function: ease; --default-transition-duration: .1s; - --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-property-opacity: opacity; } .transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } @@ -14367,7 +14368,7 @@ test('transition', async () => { } .transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } @@ -14416,7 +14417,7 @@ test('transition', async () => { } .transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--tw-ease, ease); transition-duration: var(--tw-duration, .1s); } @@ -14428,7 +14429,7 @@ test('transition', async () => { } .transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, ease); transition-duration: var(--tw-duration, .1s); }" diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 650ad55e070b..c699901ca6dc 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3552,7 +3552,7 @@ export function createUtilities(theme: Theme) { staticUtility('transition-colors', [ [ 'transition-property', - 'color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to', + 'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to', ], ['transition-timing-function', defaultTimingFunction], ['transition-duration', defaultDuration], @@ -3575,7 +3575,7 @@ export function createUtilities(theme: Theme) { functionalUtility('transition', { defaultValue: - 'color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter', + 'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter', themeKeys: ['--transition-property'], handle: (value) => [ decl('transition-property', value), From 0aed45da3e17ef63e5d74d16812940c0c3702752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benoi=CC=82t=20Rouleau?= Date: Thu, 9 Jan 2025 19:10:17 -0500 Subject: [PATCH 2/3] Add changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 52bda222d13a..a27624822316 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +- Include outline-color in default color properties to transition ([#15591](https://github.com/tailwindlabs/tailwindcss/pull/15591)) ## [4.0.0-beta.9] - 2025-01-09 From 0cc4dc5b04404c77573416c07dbf3df5b7618836 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benoi=CC=82t=20Rouleau?= Date: Thu, 9 Jan 2025 19:11:21 -0500 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=99=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tailwindcss/src/utilities.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 88260584ea60..94443ead3090 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14323,7 +14323,7 @@ test('transition', async () => { @theme { --default-transition-timing-function: ease; --default-transition-duration: 100ms; - --transition-property: color, background-color, outline-color, border-color, + --transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; --transition-property-opacity: opacity;