Pocket: theme the auth shell and cover it in Storybook#290
Draft
nedtwigg wants to merge 4 commits into
Draft
Conversation
The Pocket auth screens (setup/signin/hosts) styled themselves with a bespoke hardcoded dark --pk-* palette — a third design system beside the homepage one and the VS Code themeable one. Retire it: the whole Pocket app now renders on the shared --color-* tokens, with the theme restored before first paint (new pocket-theme.ts, extracted from PocketWall) and document-level browser chrome (meta theme-color, color-scheme) synced to the applied theme. Spec gaps filled: pocket-app.md gains a Design system and theming section (incl. the narrow phone exceptions: 16px inputs, taller touch targets), theme.md names Pocket as a fourth theme host, server.md points at it, and DESIGN.md now states the scope boundary between the product design system and the website's homepage system. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
/simplify findings on the previous commit: the three auth action buttons hand-copied the modalActionButton tones and had already drifted (the row buttons lost the focus-visible ring) — collapse them into one app-local pocketButton tv() (tone x size), healing the drift. The website playground redeclared Pocket's default-theme id; it now imports the shared POCKET_THEME_ID from pocket-theme.ts so the two cannot diverge. Skipped by design: promoting the touch-scale variants into design.tsx (single consumer today) and a chromeButton touchLabeled variant (one call site) — the altitude review judged app-local correct. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Deploying mouseterm with
|
| Latest commit: |
c4173c7
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a7a57534.mouseterm.pages.dev |
| Branch Preview URL: | https://design-system.mouseterm.pages.dev |
The auth chrome regressed the three-pair vocabulary from the retheme (088c385) during the rebase: rows sat on surface-raised with panel-border edges and muted text — near-black patches in Kimbie Dark, invisible white-on-white in light themes, exactly what theme.md's three-pair rule forbids. Restore that vocabulary (pkButton + PK) inside the current structure: header band on the active pair, host rows on the inactive pair, secondary text as alpha on the owning pair's fg, presence as row intensity (no online badge), secondary buttons recessed to the page bg, error delineated by a red inset hairline. pocket.css is gone — index.html already carries the structural viewport rules. Apply the same rule to the one other nested-rows site: MobileTerminalUi's Sessions reserve, where inactive rows now recess to the app pair instead of surface-raised. pocket-app.md's design section synced to match. Verified in Storybook (Kimbie Dark + Quiet Light hosts/setup states) and the website Pocket playground's Sessions reserve. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
1 participant
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.
Summary
Why
Pocket auth previously carried separate product styling that could drift from the terminal wall and the other Dormouse product surfaces. This makes the full Pocket flow use one theme contract and gives the changed visual states stable regression coverage.
Impact
Pocket auth and host selection now re-skin with the same theme as the terminal wall. The default remains Kimbie Dark, touch-friendly sizing is preserved, and narrow layouts plus connected-header truncation are covered in Storybook.
Validation
CI=true pnpm lint:specsCI=true pnpm --filter dormouse-lib buildCI=true pnpm --filter dormouse-lib build:pocketCI=true pnpm --filter dormouse-lib build-storybookCI=true pnpm --filter dormouse-lib test— 1,070 tests passed