argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.52k stars 184 forks source link

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

Open Hussseinkizz opened 6 months ago

Hussseinkizz commented 6 months ago

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 commented 6 months ago

I felt like making props for durations like this was:

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 commented 6 months ago

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!