From a20a6074aaa9682dacba3ec5ffd2a3281e7ab868 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 21 Jan 2025 10:31:44 -0500 Subject: [PATCH 1/5] add `outline-color` to transition-property --- packages/tailwindcss/src/utilities.test.ts | 8 ++++---- packages/tailwindcss/src/utilities.ts | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 0951c36f55fa..9e01a71145df 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -13873,7 +13873,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, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } @@ -13891,7 +13891,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)); } @@ -13940,7 +13940,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); } @@ -13952,7 +13952,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 13bddbb3ee25..37dd9ae35fac 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 03bfeb526a3d0efa9ca21baf6f3efb7007de08ab Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 21 Jan 2025 10:33:14 -0500 Subject: [PATCH 2/5] update `outline-hidden` to only apply in forced colors mode --- packages/tailwindcss/src/utilities.test.ts | 12 ++++++++++++ packages/tailwindcss/src/utilities.ts | 13 +++++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index 9e01a71145df..bc6a670b9858 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14543,6 +14543,7 @@ test('outline', async () => { `, [ 'outline', + 'outline-hidden', // outline-style 'outline-none', @@ -14594,6 +14595,17 @@ test('outline', async () => { --color-red-500: #ef4444; } + .outline-hidden { + outline-style: none; + } + + @media screen and (forced-colors: active) { + .outline-hidden { + outline-offset: 2px; + outline: 2px solid #0000; + } + } + .outline { outline-style: var(--tw-outline-style); outline-width: 1px; diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 37dd9ae35fac..88f76895bf63 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3850,10 +3850,15 @@ export function createUtilities(theme: Theme) { return atRoot([property('--tw-outline-style', 'solid')]) } - staticUtility('outline-hidden', [ - ['outline', '2px solid transparent'], - ['outline-offset', '2px'], - ]) + utilities.static('outline-hidden', () => { + return [ + decl('outline-style', 'none'), + atRule('@media', 'screen and (forced-colors: active)', [ + decl('outline', '2px solid transparent'), + decl('outline-offset', '2px'), + ]), + ] + }) /** * @css `outline-style` From 85703e1f5b6e83ba954c8af521faa6ce0b012809 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 21 Jan 2025 10:35:14 -0500 Subject: [PATCH 3/5] update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 089bb62355b9..f79ce3c14886 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - Add new `@variant` directive for applying variants to your CSS ([#15663](https://github.com/tailwindlabs/tailwindcss/pull/15663)) +- Include `outline-color` when transitioning colors ([#15690](https://github.com/tailwindlabs/tailwindcss/pull/15690)) ### Fixed @@ -27,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Use more modern `--alpha(color / 50%)` syntax instead of `--alpha(color, 50%)` ([#15665](https://github.com/tailwindlabs/tailwindcss/pull/15665)) - Rename `@variant` to `@custom-variant` ([#15663](https://github.com/tailwindlabs/tailwindcss/pull/15663)) +- `outline-hidden` and `outline-none` behave the same in non-forced colors mode ([#15690](https://github.com/tailwindlabs/tailwindcss/pull/15690)) ## [4.0.0-beta.9] - 2025-01-09 From 923af3a8ef29fa704e77a33dfc950ce3a80f2bcd Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 21 Jan 2025 10:47:46 -0500 Subject: [PATCH 4/5] update default theme with `outline-color` --- packages/tailwindcss/src/compat/default-theme.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 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', From d5f6840cd78c71273aeb1538eebef7c810c6137a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 21 Jan 2025 10:56:45 -0500 Subject: [PATCH 5/5] drop `screen and` --- packages/tailwindcss/src/utilities.test.ts | 2 +- packages/tailwindcss/src/utilities.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts index bc6a670b9858..9ecf38882316 100644 --- a/packages/tailwindcss/src/utilities.test.ts +++ b/packages/tailwindcss/src/utilities.test.ts @@ -14599,7 +14599,7 @@ test('outline', async () => { outline-style: none; } - @media screen and (forced-colors: active) { + @media (forced-colors: active) { .outline-hidden { outline-offset: 2px; outline: 2px solid #0000; diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts index 88f76895bf63..8de82f4cbbad 100644 --- a/packages/tailwindcss/src/utilities.ts +++ b/packages/tailwindcss/src/utilities.ts @@ -3853,7 +3853,7 @@ export function createUtilities(theme: Theme) { utilities.static('outline-hidden', () => { return [ decl('outline-style', 'none'), - atRule('@media', 'screen and (forced-colors: active)', [ + atRule('@media', '(forced-colors: active)', [ decl('outline', '2px solid transparent'), decl('outline-offset', '2px'), ]),