Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add gradient color stop position utilities #10886

Merged
merged 6 commits into from
Mar 28, 2023

Conversation

RobinMalfait
Copy link
Contributor

@RobinMalfait RobinMalfait commented Mar 28, 2023

This PR adds new gradient color stop position utilities that can be used in combination with the existing gradient color stop colors.

As an example, this looks like:
image

<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90%"></div>

This can be achieved using the new from-{position}, via-{position} and to-{position} classes. They are all optional and can be used together as well.

By default the following classes can be used:

From utility Via utility To utility Value
from-0% via-0% to-0% 0%
from-5% via-5% to-5% 5%
from-10% via-10% to-10% 10%
from-15% via-15% to-15% 15%
from-20% via-20% to-20% 20%
from-25% via-25% to-25% 25%
from-30% via-30% to-30% 30%
from-35% via-35% to-35% 35%
from-40% via-40% to-40% 40%
from-45% via-45% to-45% 45%
from-50% via-50% to-50% 50%
from-55% via-55% to-55% 55%
from-60% via-60% to-60% 60%
from-65% via-65% to-65% 65%
from-70% via-70% to-70% 70%
from-75% via-75% to-75% 75%
from-80% via-80% to-80% 80%
from-85% via-85% to-85% 85%
from-90% via-90% to-90% 90%
from-95% via-95% to-95% 95%
from-100% via-100% to-100% 100%

They also accept arbitrary values if you want even more control of the actual value:

<div class="bg-gradient-to-r from-indigo-500 from-[4%] via-purple-500 via-[8%] to-pink-500 to-[12%]"></div>

@RobinMalfait RobinMalfait force-pushed the feat/add-gradient-color-stop-positions branch from 13fba86 to d608e1a Compare March 28, 2023 13:17
@RobinMalfait RobinMalfait force-pushed the feat/add-gradient-color-stop-positions branch from d608e1a to efa0b78 Compare March 28, 2023 13:25
@RobinMalfait RobinMalfait merged commit b88c8c4 into master Mar 28, 2023
@RobinMalfait RobinMalfait deleted the feat/add-gradient-color-stop-positions branch March 28, 2023 13:38
RobinMalfait added a commit that referenced this pull request Mar 28, 2023
* 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant