Repository navigation
feat(app): shared card, badge, tone and empty-state pieces - #137
Merged
Merged
Conversation
ui/tone.ts holds one class table per tone; ui/ChatCard.tsx has the round icon, the compact request card, the card in sections, the note fields and the settled line. The approval, site, help, plan, suggestion, routine request and question cards are built from them.
Badge and CountBadge replace the hand-written pills and counts; the Callout, the chat notices and the bot state read the one tone table, so notice borders agree at /40; EmptyState draws the empty browser, files, screens and question box. Spec 15.3 lists the shared pieces.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Design system, slice 3: the shared pieces the audit found missing. The look is unchanged except where the old copies disagreed.
New in
app/src/ui/tone.ts: one table of classes per tone (accent,work,ok,warn,danger,quiet) for text, soft fill, border, notice frame and solid fill. Words in the accent useaccent-text(from feat(app): color and corner tokens that read in both themes #136).Badge.tsx:Badge(a word in a soft pill, optionally with an icon) andCountBadge(the round number).ChatCard.tsx:IconBadge(the round icon at a card's head),RequestCard(compact, with the border in its tone),SectionCard(head, body and footer),NoteInput/NoteArea(the owner's note), andSettledLine(the one line an answered card shrinks to, optionally opening to show what was asked).EmptyState.tsx: the resting mascot with a title and text.Moved onto them
Callout, the chat notices and the bot state use the tone table.Small visual changes (the old copies disagreed)
Calloutwas at /45.Checks
pnpm checkpasses (327 tests).pnpm devpreview: the command request, the plan card, the sidebar counts and the question box.Spec 15.3 lists the shared pieces. Next slices: a living catalog page (4),
docs/design-system.md(5), and a guard test for hex colors and off-scale corners (6).