argyleink / argyleink/open-props

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

Open
#454 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
5.5k
Forks
216
PR merge metrics
No merged PRs in 30d

Description

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!

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue names no files or tests; start by locating the existing duration-related utilities and reviewing how CSS custom-property scales are organized. Compare the proposed values and naming with the project's current patterns and Tailwind's duration utilities. Done means the scale and usage are agreed before implementation is scoped.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.