docs(ui): BUG-1079 progress, design, bug history, changelog, device checklist, contrast harness
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017eEAG8HD3mm8gsKXgk8uU8
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
12aac87bde
commit
fa58df16eb
+19
-6
@@ -82,7 +82,8 @@ Jyotisha feels like a private reading room: warm, editorial, grounded, and quiet
|
||||
| Secondary text | `--color-ink-secondary` | `#5f5f59` | Supporting copy and labels, section headings |
|
||||
| Tertiary text | `--color-ink-tertiary` | `#6a6963` | Hints, metadata, empty-state copy |
|
||||
| Primary action (text rank) | `--color-action` | `#a9583e` | Links, tinted labels, icons — anything the user reads |
|
||||
| Primary action (fill rank) | `--color-action-strong` | `#cc785c` | Button and avatar fills, the active session rail, rings, carets |
|
||||
| Primary action (fill rank) | `--color-action-strong` | `#cc785c` | Avatar fills, the active session rail, rings, carets, checked radios — never a button with a label |
|
||||
| Solid button fill | `--color-action-fill` / `--color-on-action-fill` | `#a9583e` / `#fbfaf7` (dark `#8f4a33` / `#f2f0ea`) | Every solid primary button: `<Button>` default, `.button-primary`, the send / stop control, the calendar's selected day (BUG-1079) |
|
||||
| Primary soft | `--color-action-soft` | `#f7ece5` | Editorial emphasis without a dark block |
|
||||
| Primary active | `--color-action-hover` | `#8f4630` | Hover and pressed action |
|
||||
| Dark punctuation | `--color-surface-dark` | `#1d1d1f` | Compact primary buttons and user-authored emphasis only |
|
||||
@@ -120,10 +121,20 @@ the markdown links inside assistant answers.
|
||||
non-text threshold applies: button and avatar fills, the send/stop control, the
|
||||
2px active-session rail, the focus ring, the typing caret, checked radios.
|
||||
|
||||
One known gap, accepted by the product owner: white on `#cc785c` is **3.28:1**,
|
||||
below AA for normal text. It sits on `.button-primary` and the two avatar
|
||||
circles. claude.ai ships the same value, and "looks like Claude" was the stated
|
||||
goal. Body text is unaffected — that is what `--color-action` protects.
|
||||
Solid buttons have their own pair, `--color-action-fill` / `--color-on-action-fill`
|
||||
(BUG-1079, product decision 2026-09-28). The earlier accepted gap — white on
|
||||
`#cc785c` on `.button-primary` at 3.14:1 on canvas — is **withdrawn**: every solid
|
||||
primary button is `#fbfaf7` on `#a9583e` (4.85:1) in light and `#f2f0ea` on
|
||||
`#8f4a33` (5.77:1) in dark, hover `#8f4630` / 6% ink mixed in. The login and
|
||||
onboarding buttons are one step darker than claude.ai; the product owner accepted
|
||||
that for readable labels. `#cc785c` keeps its non-button jobs above.
|
||||
|
||||
Why two button systems used to disagree: an unlayered `button { color: inherit; }`
|
||||
in `globals.css` beat Tailwind's layered `text-primary-foreground`, so every solid
|
||||
`<Button>` rendered the page ink on clay (3.33:1 light, 2.57:1 dark). That rule is
|
||||
gone (Tailwind's preflight already inherits colour in `@layer base`). Do not add
|
||||
unlayered element rules for `button` colour; they silently override every
|
||||
component utility.
|
||||
|
||||
Scarce is still a budget. The sidebar spends it in exactly three places, and a
|
||||
fourth needs a reason:
|
||||
@@ -268,6 +279,8 @@ Radii have two visual steps. Controls use 8px (`--radius-md`; `--radius-xs` and
|
||||
|
||||
- **Implementation:** report surfaces and the billing pane 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.
|
||||
- **Solid primary (BUG-1079, 2026-09-28):** one look site-wide — `<Button>` default, `.button-primary`, the composer send / stop control and the calendar's selected day all read `--color-action-fill` / `--color-on-action-fill` (light `#fbfaf7` on `#a9583e` 4.85:1, dark `#f2f0ea` on `#8f4a33` 5.77:1). `.danger-primary` keeps its own label colour (7.13:1 / 6.04:1).
|
||||
- **Disabled:** solid buttons turn neutral grey — `--color-action-fill-disabled` (`--color-canvas-strong`) with `--color-on-action-fill-disabled` (`--color-ink-tertiary`) at opacity 1, never a faded clay. Outline, ghost, secondary, icon and chip buttons keep the 45% fade (`<Button>` via `disabled:opacity-45`, raw `<button>` via `button:disabled:where(:not([data-slot="button"]))`).
|
||||
- **Spacing:** 44px minimum height; radii 8px for standard and full radius for icon-only.
|
||||
- **States:** default, hover, active, focus-visible, disabled, loading.
|
||||
- **Motion:** 120ms transform/color; active translates by 1px or scales to .98.
|
||||
@@ -543,7 +556,7 @@ one skeleton, none of them carrying the sidebar.
|
||||
|
||||
### Personal report reader
|
||||
|
||||
- **Buttons on the report surfaces (2026-09-28, BUG-1078):** the list, the reader with its export dialog, and the loading / state / error / not-found screens restyle the shared `Button` locally; `components/ui/button.tsx` and the theme tokens are untouched, so other pages keep the shared primary. Cause: the unlayered `button { color: inherit; }` beats Tailwind's layered `text-primary-foreground`, so a solid `<button>` shows the page ink — #1d1d1f on #a9583e in light (3.33:1, the reported black-on-dark-red) and #f2f0ea on #d78064 in dark (2.57:1); `<Button render={<Link/>}>` renders an `<a>` and was never affected. Solid (`variant="default"`) now sets its own label colour: light #fbfaf7 on `--color-action` #a9583e (4.85:1); dark `--color-ink` #f2f0ea on `--color-action-on-dark` #8f4a33 (5.77:1), hover mixes 6% ink in (5.1:1). Disabled, any variant: `--color-canvas-strong` fill + `--color-ink-tertiary`, opacity 1 instead of the global 45% fade. The header 「生成报告」 sits in the `SecondaryPageShell` actions slot, outside those roots, and joins the disabled rule through its own `report-center-generate` class. The selected export preset is `--color-canvas-muted` + `--color-ink` + a `--color-ink-secondary` edge, not the `--color-action-soft` fill (a red-brown block in dark mode).
|
||||
- **Buttons on the report surfaces:** the BUG-1078 report-only override (2026-09-28) was replaced the same day by the site-wide solid-button pair (BUG-1079, see Button); report buttons look as before. Outline buttons there (the header 「生成报告」 while submitting) now fade like outline buttons elsewhere instead of the report-only grey. The selected export preset is `--color-canvas-muted` + `--color-ink` + a `--color-ink-secondary` edge, not the `--color-action-soft` fill (a red-brown block in dark mode).
|
||||
- **分块导出对话框 (2026-09-24):** native modal `<dialog>`, bottom-aligned below 860px and centered at ≥860px, app colours only. Desktop is viewport-centered (`inset: 0; margin: auto`) regardless of sidebar state, width `min(720px, 92vw)`, max-height 80vh, with full `--radius-lg` corners. Its flex panel is capped at `calc(80vh - 2px)` to reserve the dialog border; desktop rules follow the narrow-screen dvh upgrade so 70dvh cannot override them. Below 860px the content-column offset, bottom alignment and at most 70vh/70dvh remain unchanged. Header and single export footer stay visible; the block list scrolls, two columns at the existing 860px breakpoint. Escape, backdrop or 关闭 dismisses; focus returns without scrolling. All controls have 44px targets. No spinner, clipboard or extra fetch.
|
||||
- **Export selection:** default 常用 selects every body block from the single outline's lossless source slices (lead = 摘要); 全部分盘 and 仅核对表 replace the selection. Manual toggles clear preset highlighting. 全选 / 取消全选 works across all groups; zero selected disables export. Counts are actual Unicode code points in serialized block text, including SVG markup, not approximate prose counts.
|
||||
- **Export content:** full body alone remains byte-identical to the retired ordinary Markdown export. Selected chart/table blocks append new content; selecting all groups is not byte-identical to body-only. D13 requires safe SVG in each chart, reusing the projected engine SVG or the existing hook-free Vedic drawing; offline fallback uses readable monochrome glyphs/legend and presentation attributes. No chart JSON fences or internal audit fields. Fact-table labels/precision/subtables match the reader. Full body uses the historical filename; excerpt adds `-节选`. The existing downloader appends `.md`.
|
||||
|
||||
Reference in New Issue
Block a user