Skip to content

Commit 4820f6b

Browse files
RobinMalfaitRobinMalfait
authored
Transition outline-color (#15690)
This PR adds `outline-color` to the transition-property again, and updates the implementation for `outline-hidden`. The `outline-hidden` will behave exactly the same as `outline-none` _except_ in forced colors mode. In forced colors mode, `outline-hidden` will force a 2px solid border. Closes: #15591
1 parent d65bb68 commit 4820f6b

File tree

4 files changed

+32
-12
lines changed

4 files changed

+32
-12
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Added
1111

1212
- Add new `@variant` directive for applying variants to your CSS ([#15663](https://github.com/tailwindlabs/tailwindcss/pull/15663))
13+
- Include `outline-color` when transitioning colors ([#15690](https://github.com/tailwindlabs/tailwindcss/pull/15690))
1314

1415
### Fixed
1516

@@ -27,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2728

2829
- Use more modern `--alpha(color / 50%)` syntax instead of `--alpha(color, 50%)` ([#15665](https://github.com/tailwindlabs/tailwindcss/pull/15665))
2930
- Rename `@variant` to `@custom-variant` ([#15663](https://github.com/tailwindlabs/tailwindcss/pull/15663))
31+
- `outline-hidden` and `outline-none` behave the same in non-forced colors mode ([#15690](https://github.com/tailwindlabs/tailwindcss/pull/15690))
3032

3133
## [4.0.0-beta.9] - 2025-01-09
3234

‎packages/tailwindcss/src/compat/default-theme.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1019,8 +1019,9 @@ export default {
10191019
none: 'none',
10201020
all: 'all',
10211021
DEFAULT:
1022-
'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
1023-
colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
1022+
'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
1023+
colors:
1024+
'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke',
10241025
opacity: 'opacity',
10251026
shadow: 'box-shadow',
10261027
transform: 'transform',

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13873,7 +13873,7 @@ test('transition', async () => {
1387313873
}
1387413874
1387513875
.transition {
13876-
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;
13876+
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;
1387713877
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1387813878
transition-duration: var(--tw-duration, var(--default-transition-duration));
1387913879
}
@@ -13891,7 +13891,7 @@ test('transition', async () => {
1389113891
}
1389213892
1389313893
.transition-colors {
13894-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
13894+
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1389513895
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1389613896
transition-duration: var(--tw-duration, var(--default-transition-duration));
1389713897
}
@@ -13940,7 +13940,7 @@ test('transition', async () => {
1394013940
}
1394113941
1394213942
.transition {
13943-
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;
13943+
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;
1394413944
transition-timing-function: var(--tw-ease, ease);
1394513945
transition-duration: var(--tw-duration, .1s);
1394613946
}
@@ -13952,7 +13952,7 @@ test('transition', async () => {
1395213952
}
1395313953
1395413954
.transition-colors {
13955-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
13955+
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1395613956
transition-timing-function: var(--tw-ease, ease);
1395713957
transition-duration: var(--tw-duration, .1s);
1395813958
}"
@@ -14543,6 +14543,7 @@ test('outline', async () => {
1454314543
`,
1454414544
[
1454514545
'outline',
14546+
'outline-hidden',
1454614547

1454714548
// outline-style
1454814549
'outline-none',
@@ -14594,6 +14595,17 @@ test('outline', async () => {
1459414595
--color-red-500: #ef4444;
1459514596
}
1459614597
14598+
.outline-hidden {
14599+
outline-style: none;
14600+
}
14601+
14602+
@media (forced-colors: active) {
14603+
.outline-hidden {
14604+
outline-offset: 2px;
14605+
outline: 2px solid #0000;
14606+
}
14607+
}
14608+
1459714609
.outline {
1459814610
outline-style: var(--tw-outline-style);
1459914611
outline-width: 1px;

‎packages/tailwindcss/src/utilities.ts‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3552,7 +3552,7 @@ export function createUtilities(theme: Theme) {
35523552
staticUtility('transition-colors', [
35533553
[
35543554
'transition-property',
3555-
'color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to',
3555+
'color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to',
35563556
],
35573557
['transition-timing-function', defaultTimingFunction],
35583558
['transition-duration', defaultDuration],
@@ -3575,7 +3575,7 @@ export function createUtilities(theme: Theme) {
35753575

35763576
functionalUtility('transition', {
35773577
defaultValue:
3578-
'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',
3578+
'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',
35793579
themeKeys: ['--transition-property'],
35803580
handle: (value) => [
35813581
decl('transition-property', value),
@@ -3850,10 +3850,15 @@ export function createUtilities(theme: Theme) {
38503850
return atRoot([property('--tw-outline-style', 'solid')])
38513851
}
38523852

3853-
staticUtility('outline-hidden', [
3854-
['outline', '2px solid transparent'],
3855-
['outline-offset', '2px'],
3856-
])
3853+
utilities.static('outline-hidden', () => {
3854+
return [
3855+
decl('outline-style', 'none'),
3856+
atRule('@media', '(forced-colors: active)', [
3857+
decl('outline', '2px solid transparent'),
3858+
decl('outline-offset', '2px'),
3859+
]),
3860+
]
3861+
})
38573862

38583863
/**
38593864
* @css `outline-style`

0 commit comments

Comments
 (0)