Add easing and duration tokens, set transition defaults #13
- MA
One easing curve and three durations, with Tailwind's transition defaults pointed at them.
Every transition in the project ran on `ease` or `ease-out` โ the browser default, and the least characterful curve available. `ease` eases both ways: it spends its opening accelerating before it settles, which blunts the start of a change that ought to feel like a reply. The new curve leaves immediately and settles slowly.
Durations are named for their job rather than numbered. The agent's change marks keep their 600ms as `linger`, which is the one duration here that is not feedback โ a fade nobody is waiting on.
Setting `--default-transition-duration` and `--default-transition-timing-function` to the same tokens means the fifteen `transition-*` utilities already written pick the curve up without being edited, and a utility and a hand-written rule beside it now resolve to the same 120ms and the same cubic-bezier.
`--ease-*: initial` first, so `ease-in` stops resolving to Tailwind's curve. One curve is the point; a second one nobody chose is not.
๐ค Generated with [Claude Code](https://claude.com/claude-code)
---
### Stack
Merge bottom-up. Each PR targets the one below it, so every diff reads in isolation; GitHub retargets the child automatically as each parent merges.
1. #9 โ Emit all theme tokens, fix callout colours, load Inter โ `main` 2. #10 โ Add two-stop shadow scale tokens 3. #11 โ Add radius tokens and replace bare rounded classes 4. #12 โ Add type scale tokens, replace arbitrary font sizes 5. #13 โ Add easing and duration tokens, set transition defaults 6. #15 โ Add one focus-visible outline rule for all controls 7. #16 โ Scale buttons down on press 8. #17 โ Add tabular-nums to figures and balance plan headings 9. #18 โ Shorten empty states and composer status copy 10. #19 โ Add entrance animation for newly arrived items
Plan: `docs/superpowers/plans/2026-08-04-design-token-foundation.md`
MaggieAppletonreferenced this in Emit all theme tokens, fix callout colours, load Inter #93 months ago on GitHub
MaggieAppletonreferenced this in Add two-stop shadow scale tokens #103 months ago on GitHub
MaggieAppletonreferenced this in Add radius tokens and replace bare rounded classes #113 months ago on GitHub
MaggieAppletonreferenced this in Add type scale tokens, replace arbitrary font sizes #123 months ago on GitHub
MaggieAppletonreferenced this in Add one focus-visible outline rule for all controls #153 months ago on GitHub
MaggieAppletonreferenced this in Scale buttons down on press #163 months ago on GitHub
MaggieAppletonreferenced this in Add tabular-nums to figures and balance plan headings #173 months ago on GitHub
MaggieAppletonreferenced this in Shorten empty states and composer status copy #183 months ago on GitHub
MaggieAppletonreferenced this in Animate newly received messages and status indicators #193 months ago on GitHub
MaggieAppletonbase-ref-force-pushed3 months ago on GitHub
MaggieAppletonhead-ref-force-pushed f7f1c20904bd3 months ago on GitHub
MaggieAppletonrenamed Move on a curve that has a direction to Add easing and duration tokens, set transition defaults3 months ago on GitHub
MaggieAppletonbase-ref-force-pushed3 months ago on GitHub
MaggieAppletonhead-ref-force-pushed 5eb531d50a5c3 months ago on GitHub
MaggieAppletonbase-ref-force-pushed3 months ago on GitHub
MaggieAppletonhead-ref-force-pushed 53ddb3e00e943 months ago on GitHub
MaggieAppletonbase-ref-force-pushed3 months ago on GitHub
MaggieAppletonhead-ref-force-pushed 1b790c39bfc33 months ago on GitHub
MaggieAppletonbase-ref-force-pushed3 months ago on GitHub
MaggieAppletonhead-ref-force-pushed 683adae48d583 months ago on GitHub
MaggieAppletonbase-ref-force-pushed3 months ago on GitHub
MaggieAppletonhead-ref-force-pushed bcebeb7ac2763 months ago on GitHub
MaggieAppletonautomatic-base-change-succeeded3 months ago on GitHub
MaggieAppletonhead-ref-force-pushed 28d37fa4eda13 months ago on GitHub
MaggieAppletonmerged f2041203eb9e3 months ago on GitHub
MaggieAppletonhead-ref-deleted3 months ago on GitHub