Skip to content

Chat motion: dedupe --chat-ease onto react-ui's real easing tokens #243

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.

Sign up for GitHub

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

Merged
TheGreatAxios merged 1 commit into from
Aug 21, 2026
Merged

Chat motion: dedupe --chat-ease onto react-ui's real easing tokens #243

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions packages/chat-ui/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
`@corbits/react-ui`'s prebuilt stylesheet and the theme's tokens. */

:root {
--chat-ease: cubic-bezier(0.23, 1, 0.32, 1);
/* Deliberately not an invented curve: this aliases react-ui's own
`--ease-out` (DESIGN.md's "out" — straightforward entrances/exits, no
overshoot) so the chat surface never carries a third easing curve of
its own. Falls back to the equivalent cubic-bezier only for the rare
test/story context that doesn't load react-ui's theme stylesheet. */
--chat-ease: var(--ease-out, cubic-bezier(0.2, 0.8, 0.3, 1));
}

.chat-workspace {
Expand Down Expand Up @@ -770,7 +775,8 @@

@media (prefers-reduced-motion: no-preference) {
.chat-workbench-loading-tip {
animation: chat-workbench-loading-tip-fade 0.4s ease;
/* DESIGN.md's motion ceiling is 300ms — this was 400ms. */
animation: chat-workbench-loading-tip-fade 0.28s ease;
}
}

Expand Down Expand Up @@ -2213,7 +2219,10 @@
thing moves"). Shrink-on-delete rides the same transition. */
@media (prefers-reduced-motion: no-preference) {
.chat-composer-input {
transition: height 120ms var(--chat-ease);
/* Grows/shrinks in place, not an entrance — DESIGN.md calls for
`--ease-in-out` here specifically, not the entrance curve every
other `--chat-ease` transition in this file uses. */
transition: height 120ms var(--ease-in-out, var(--chat-ease));
}
}

Expand Down
Loading