fix(ui): collapse product weights and radii onto the shared Button
Chat body, type weights, and radii were still a second scale; membership purchase now uses the shared Button so the filled terracotta action is one implementation. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+10
-2
@@ -155,7 +155,7 @@ is read through an external store so a change in one tab reaches the others.
|
||||
| `--type-caption` | `13px` | 500 | 1.4 | 0 | Labels and metadata |
|
||||
| `--type-overline` | `12px` | 500 | 1.4 | `1.5px` | Eyebrows and badges |
|
||||
|
||||
Display headings use the serif stack at weight 400. Body copy never drops below 14px; 12–13px is reserved for short labels and metadata. CJK text uses `text-wrap: pretty`; display text uses `text-wrap: balance`.
|
||||
Display headings use the serif stack at weight 400. Body copy never drops below 14px; 12–13px is reserved for short labels and metadata. No product UI text is smaller than `--type-overline` (12px). Product UI uses three font weights: 400 (display and body), 500 (UI titles, labels, buttons), and 600 (emphasis only). CJK text uses `text-wrap: pretty`; display text uses `text-wrap: balance`.
|
||||
|
||||
One documented exception: the thinking text inside a timeline step (`.consultation-run-timeline__thinking`) and the fallback thinking trace (`.message-thinking-body`) render at 13px. They are working notes shown on request inside a collapsed row, not reading copy; the answer itself never inherits that size.
|
||||
|
||||
@@ -163,6 +163,8 @@ One documented exception: the thinking text inside a timeline step (`.consultati
|
||||
|
||||
The base unit is 4px. Tokens are `--space-1: 4px`, `--space-2: 8px`, `--space-3: 12px`, `--space-4: 16px`, `--space-5: 20px`, `--space-6: 24px`, `--space-8: 32px`, `--space-10: 40px`, `--space-12: 48px`, `--space-16: 64px`, and `--space-24: 96px`.
|
||||
|
||||
Radii have two visual steps. Controls use 8px (`--radius-md`; `--radius-xs` and `--radius-sm` alias that value). Cards and sheets use 12px (`--radius-lg`; `--radius-xl` aliases it). Circles stay `50%`; pills stay `999px`.
|
||||
|
||||
- Chat reading width: 760px for the welcome/composer and 900px for long answers. Both chat surfaces share the 900px transcript width; the rectification session no longer narrows it to 720px.
|
||||
- Admin content width: 1200px, centered.
|
||||
- Desktop shell: 288px sidebar plus flexible reading panel.
|
||||
@@ -181,6 +183,7 @@ The base unit is 4px. Tokens are `--space-1: 4px`, `--space-2: 8px`, `--space-3:
|
||||
|
||||
### Button
|
||||
|
||||
- **Implementation:** report surfaces and membership use `@/components/ui/button`. Login, onboarding, and birth-time dialogs still use `.button-primary` / `.button-secondary`, which share the same 44px height, 8px radius, and action tokens. Those CSS classes stay until those surfaces can move without growing `page.tsx`.
|
||||
- **Variants:** ink primary, cream secondary, text, circular icon, deep-brown emphasis.
|
||||
- **Spacing:** 44px minimum height; radii 8px for standard and full radius for icon-only.
|
||||
- **States:** default, hover, active, focus-visible, disabled, loading.
|
||||
@@ -308,7 +311,7 @@ The birth-time rectification session is the consultation transcript plus a house
|
||||
|
||||
- **Variants:** assistant editorial text on canvas; user text on warm card surface; streaming; error. Streaming uses a timeline of completed steps plus the current step; the thinking body expands while streaming, collapses when answer text appears, and is stored with the assistant message.
|
||||
- **Identity:** every assistant message carries the 32px Jyotisha logo avatar; user messages stay visually lighter and avatar-free.
|
||||
- **Typography:** assistant body 17px (16px below 768px) with serif subheadings; user body 14px.
|
||||
- **Typography:** assistant body `--type-body-md` (16px) with serif subheadings; user body 14px.
|
||||
- **Tables:** three-column technique audit tables keep 状态 on one line. Below 768px they stack each row as title + status, then the note, instead of squeezing 已执行 into a vertical glyph column.
|
||||
- **Follow-up:** the latest settled consultation answer may offer two or three grounded next questions under that answer. Clicking one sends it in the current session. The composer never hosts suggestion chips. If the answer does not support a grounded continuation, nothing is shown.
|
||||
- **Motion:** a new row enters once, through the GSAP tween in `chat-message-row.tsx` at the 160ms Message duration; there is no CSS entrance keyframe beside it. The trailing assistant reply is one component (`LatestAssistantEntry`) from its first streamed token through settlement, so settling never remounts it and never replays the entrance.
|
||||
@@ -390,6 +393,11 @@ Text release is paced, not animated: the frame buffer commits at most once per a
|
||||
- **Width:** 420px desktop maximum.
|
||||
- **States:** open, submitting, success, and error.
|
||||
|
||||
### Membership
|
||||
|
||||
- **Structure:** full-page archive on the page floor. Header chrome is back, orders, and redeem; the hero names the current plan; tabs switch membership vs credits; each plan/credit card carries one purchase action.
|
||||
- **Actions:** header chrome stays hairline `--color-ink-secondary`. The one filled terracotta control is the recommended-plan purchase (`Button` default). Other plan and credit buys use `Button` outline. Redeem opens a dialog; it is not a second filled button on the same screen.
|
||||
|
||||
### Logout dialog
|
||||
|
||||
- **Structure:** confirmation title and explanation, cancel action, and destructive confirm action.
|
||||
|
||||
Reference in New Issue
Block a user