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

Could we add some duration utilities if none in pipeline yet? #454

Open
Hussseinkizz opened this issue Dec 27, 2023 · 2 comments
Open

Could we add some duration utilities if none in pipeline yet? #454

Hussseinkizz opened this issue Dec 27, 2023 · 2 comments

Comments

@Hussseinkizz
Copy link

I have been wanting to add this since 2021, but failed on how to do it, but now I think it's best we first discuss it before I make a pull request.
How about if we had duration utilities like:

--speed-0: 0;
--speed-7: 75ms;
--speed-10: 100ms;
--speed-15: 150ms;
--speed-20: 200ms;
--speed-30: 300ms;
--speed-50: 500ms;
--speed-70: 700ms;
--speed-100: 1000ms;

which could be used like:

button:active {
transform: scale(0.98);
transition: all var(--speed-30) var(--ease-in-out-2);
}

I adapted those scales from tailwind's duration utilities, we could tune from there. I saw some duration stuff around here but it was wired to me, that's what am suggesting anyways!

@argyleink
Copy link
Owner

I felt like making props for durations like this was:

  • more verbose as a prop and less flexible
  • great for "house props" or the custom parts of a design system as defined by a team, but not great for this library.

in OPv2 (work in progress), I'll be removing all the line heights and font weights, they feel reachy and yeah, are more verbose than direct usage of a number.

OP does however ship a bunch of named durations for like minutes and days

i'm going to close for now, but I dont have super strong opinions and could be swayed to include something like it potentially. thanks for commenting and suggesting!

@Hussseinkizz
Copy link
Author

Ok at least include these in bundles, just like other stuff in bundles say buttons, some people need them, for example, working in a team, we need consistency therefore I makes more sense to tell people we using fonts-size-3 and duration-100 for our headlines than everyone using whatever they do, some of us don't have design systems, this token thing does it, we just roll with it, so maybe we could not ship these by default but make them available over extras, there's a reason why tailwind has duration utilities for example, and I have not seen a lot of people that not use them and instead craft their own, that means perhaps they're useful. thanks again!

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

No branches or pull requests

2 participants