Skip to content

Commit 222a93c

Browse files
adamwathanadamwathan
authored
Include gradient color properties in color transitions (#14489)
This PR adds our custom gradient color properties (`--tw-gradient-from`, `--tw-gradient-via`, and `--tw-gradient-to`) to the list of color properties we transition in the `transition` and `transition-colors` utilities. As part of this I noticed that we had duplicate `@property` declarations for these custom properties, so I've removed the duplicates. --------- Co-authored-by: Adam Wathan <[email protected]>
1 parent edbcf43 commit 222a93c

File tree

3 files changed

+17
-18
lines changed

3 files changed

+17
-18
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1616
- Add `bg-radial-*` and `bg-conic-*` utilities for radial and conic gradients ([#14467](https://github.com/tailwindlabs/tailwindcss/pull/14467))
1717
- Add new `shadow-initial` and `inset-shadow-initial` utilities for resetting shadow colors ([#14468](https://github.com/tailwindlabs/tailwindcss/pull/14468))
1818
- Add `field-sizing-*` utilities ([#14469](https://github.com/tailwindlabs/tailwindcss/pull/14469))
19+
- Include gradient color properties in color transitions ([#14489](https://github.com/tailwindlabs/tailwindcss/pull/14489))
1920

2021
### Fixed
2122

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9926,8 +9926,8 @@ test('from', async () => {
99269926
*, :before, :after, ::backdrop {
99279927
--tw-gradient-position: initial;
99289928
--tw-gradient-from: #0000;
9929+
--tw-gradient-via: #0000;
99299930
--tw-gradient-to: #0000;
9930-
--tw-gradient-via: transparent;
99319931
--tw-gradient-stops: initial;
99329932
--tw-gradient-via-stops: initial;
99339933
--tw-gradient-from-position: 0%;
@@ -9948,13 +9948,13 @@ test('from', async () => {
99489948
initial-value: #0000;
99499949
}
99509950
9951-
@property --tw-gradient-to {
9951+
@property --tw-gradient-via {
99529952
syntax: "<color>";
99539953
inherits: false;
99549954
initial-value: #0000;
99559955
}
99569956
9957-
@property --tw-gradient-via {
9957+
@property --tw-gradient-to {
99589958
syntax: "<color>";
99599959
inherits: false;
99609960
initial-value: #0000;
@@ -10171,8 +10171,8 @@ test('via', async () => {
1017110171
*, :before, :after, ::backdrop {
1017210172
--tw-gradient-position: initial;
1017310173
--tw-gradient-from: #0000;
10174+
--tw-gradient-via: #0000;
1017410175
--tw-gradient-to: #0000;
10175-
--tw-gradient-via: transparent;
1017610176
--tw-gradient-stops: initial;
1017710177
--tw-gradient-via-stops: initial;
1017810178
--tw-gradient-from-position: 0%;
@@ -10193,13 +10193,13 @@ test('via', async () => {
1019310193
initial-value: #0000;
1019410194
}
1019510195
10196-
@property --tw-gradient-to {
10196+
@property --tw-gradient-via {
1019710197
syntax: "<color>";
1019810198
inherits: false;
1019910199
initial-value: #0000;
1020010200
}
1020110201
10202-
@property --tw-gradient-via {
10202+
@property --tw-gradient-to {
1020310203
syntax: "<color>";
1020410204
inherits: false;
1020510205
initial-value: #0000;
@@ -10404,8 +10404,8 @@ test('to', async () => {
1040410404
*, :before, :after, ::backdrop {
1040510405
--tw-gradient-position: initial;
1040610406
--tw-gradient-from: #0000;
10407+
--tw-gradient-via: #0000;
1040710408
--tw-gradient-to: #0000;
10408-
--tw-gradient-via: transparent;
1040910409
--tw-gradient-stops: initial;
1041010410
--tw-gradient-via-stops: initial;
1041110411
--tw-gradient-from-position: 0%;
@@ -10426,13 +10426,13 @@ test('to', async () => {
1042610426
initial-value: #0000;
1042710427
}
1042810428
10429-
@property --tw-gradient-to {
10429+
@property --tw-gradient-via {
1043010430
syntax: "<color>";
1043110431
inherits: false;
1043210432
initial-value: #0000;
1043310433
}
1043410434
10435-
@property --tw-gradient-via {
10435+
@property --tw-gradient-to {
1043610436
syntax: "<color>";
1043710437
inherits: false;
1043810438
initial-value: #0000;
@@ -12897,7 +12897,7 @@ test('transition', async () => {
1289712897
}
1289812898
1289912899
.transition {
12900-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
12900+
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, -webkit-backdrop-filter, backdrop-filter;
1290112901
transition-timing-function: var(--default-transition-timing-function, ease);
1290212902
transition-duration: var(--default-transition-duration, .1s);
1290312903
}
@@ -12915,7 +12915,7 @@ test('transition', async () => {
1291512915
}
1291612916
1291712917
.transition-colors {
12918-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
12918+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1291912919
transition-timing-function: var(--default-transition-timing-function, ease);
1292012920
transition-duration: var(--default-transition-duration, .1s);
1292112921
}
@@ -12964,7 +12964,7 @@ test('transition', async () => {
1296412964
}
1296512965
1296612966
.transition {
12967-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter;
12967+
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, -webkit-backdrop-filter, backdrop-filter;
1296812968
transition-duration: .1s;
1296912969
transition-timing-function: ease;
1297012970
}
@@ -12976,7 +12976,7 @@ test('transition', async () => {
1297612976
}
1297712977
1297812978
.transition-colors {
12979-
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
12979+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1298012980
transition-duration: .1s;
1298112981
transition-timing-function: ease;
1298212982
}"

‎packages/tailwindcss/src/utilities.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2677,10 +2677,8 @@ export function createUtilities(theme: Theme) {
26772677
return atRoot([
26782678
property('--tw-gradient-position'),
26792679
property('--tw-gradient-from', '#0000', '<color>'),
2680+
property('--tw-gradient-via', '#0000', '<color>'),
26802681
property('--tw-gradient-to', '#0000', '<color>'),
2681-
property('--tw-gradient-from', 'transparent', '<color>'),
2682-
property('--tw-gradient-via', 'transparent', '<color>'),
2683-
property('--tw-gradient-to', 'transparent', '<color>'),
26842682
property('--tw-gradient-stops'),
26852683
property('--tw-gradient-via-stops'),
26862684
property('--tw-gradient-from-position', '0%', '<length> | <percentage>'),
@@ -3716,7 +3714,7 @@ export function createUtilities(theme: Theme) {
37163714
staticUtility('transition-colors', [
37173715
[
37183716
'transition-property',
3719-
'color, background-color, border-color, text-decoration-color, fill, stroke',
3717+
'color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to',
37203718
],
37213719
['transition-timing-function', defaultTimingFunction],
37223720
['transition-duration', defaultDuration],
@@ -3739,7 +3737,7 @@ export function createUtilities(theme: Theme) {
37393737

37403738
functionalUtility('transition', {
37413739
defaultValue:
3742-
'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter',
3740+
'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',
37433741
themeKeys: ['--transition-property'],
37443742
handle: (value) => [
37453743
decl('transition-property', value),

0 commit comments

Comments
 (0)