Add gradient color stop position utilities (#10886)

* add gradient color stop positions

* update tests to include gradient position color stop reset values

* add dedicated color stop position tests

* use `%` sign in the name of the uility

* update changelog

* ensure `length` values and css variables work
This commit is contained in:
Robin Malfait 2023-03-28 15:38:30 +02:00
parent 0bfee99ed3
commit 51157717da
No known key found for this signature in database
GPG key ID: 92F53D68B9041AFE
14 changed files with 359 additions and 95 deletions

View file

@ -607,16 +607,22 @@
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-red-300 {
--tw-gradient-from: #fca5a5;
--tw-gradient-to: #fca5a500;
--tw-gradient-from: #fca5a5 var(--tw-gradient-from-position);
--tw-gradient-from-position: ;
--tw-gradient-to: #fca5a500 var(--tw-gradient-from-position);
--tw-gradient-to-position: ;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-purple-200 {
--tw-gradient-to: #e9d5ff00;
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to);
--tw-gradient-via-position: ;
--tw-gradient-to: #e9d5ff00 var(--tw-gradient-to-position);
--tw-gradient-to-position: ;
--tw-gradient-stops: var(--tw-gradient-from), #e9d5ff var(--tw-gradient-via-position),
var(--tw-gradient-to);
}
.to-blue-400 {
--tw-gradient-to: #60a5fa;
--tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
--tw-gradient-to-position: ;
}
.decoration-slice {
-webkit-box-decoration-break: slice;