Add radial and conic gradient utilities #14467
Open
+239
−86
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds new
bg-radial-*
andbg-conic-*
utilities for radial and conic gradients. It also adds support for "arbitrary gradients", where gradient utilities likebg-linear-*
,bg-radial-*
, andbg-conic-*
can now accept a complete gradient definition as their arbitrary value.Radial gradients
Radial gradients are created with the
bg-radial
utility, or thebg-radial-[…]
utility, combined with the existingfrom-*
,via-*
, andto-*
utilities.The simple
bg-radial
utility just creates a radial gradient with no position information, which defaults tocenter
:If you use the arbitrary value format, whatever you provide as the arbitrary value is inserted into the first position:
So a utility like
bg-radial-[at_top_left]
would produce this:This makes it possible to use some of the
radial-gradient(…)
features that this PR doesn't add first class support for, like using values likecircle at center
or providing a specific interpolation color space likein hsl longer hue
. We may add explicit APIs for these in the future, but I'm proposing this PR first since those changes would be purely additive and none of the decisions here would create any conflict with those APIs.Conic gradients
Conic gradients are created with the
bg-conic
,bg-conic-{bareNumber}
, andbg-conic-[…]
utilities, combined with the existingfrom-*
,via-*
, andto-*
utilities.The
bg-conic
utility creates a conic gradient with no angle, which defaults to0deg
:The
bg-conic-{bareNumber}
utilities create conic gradients using the bare number as the angle:The
bg-conic-[…]
arbitrary value utilities insert whatever you provide as the arbitrary value into the first position verbatim:So a utility like
bg-conic-[from_45deg_in_hsl]
would produce this:Note that the
from
keyword needs to be provided by the user when using arbitrary values, but not when using bare values.This makes it possible to use some of the
conic-gradient(…)
features that this PR doesn't add first class support for, like using values likeat 0 0
or providing a specific interpolation color space likein hsl longer hue
. We may add explicit APIs for these in the future, but I'm proposing this PR first since those changes would be purely additive and none of the decisions here would create any conflict with those APIs.Arbitrary gradients
Prior to this PR, utilities like
bg-linear-[…]
could only accept positional information as their arbitrary value, likebg-linear-[to_top_right]
. All of the color stops could only be provided using thefrom-*
,via-*
, andto-*
utilities.If you wanted to provide the complete gradient in one class, you needed to use
bg-[…]
and write out the gradient function yourself:This PR refactors some things internally to make it possible to provide the entire gradient as the arbitrary value to each background gradient utility, like this:
This is nice if you're doing something very custom and you want to be able to look at the whole value together, while still avoiding some of the boilerplate you'd have if you had to write out the entire gradient function yourself.