Could we add some duration utilities if none in pipeline yet?
Hussseinkizz opened this issue · 2 comments
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!
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!
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!