Repository navigation
feat(tv): type and spacing tokens and one focus language - #2237
Conversation
Introduce tokens.css with the 1920x1080 type scale (88/56/32/28/24/22, nothing under 22px, serif only for content and channel titles), an 8px spacing scale, the 64x48 safe area, 72px controls and 96px list rows. focus.css owns the state signals: the mint ring marks focus only (fill on buttons, scale 1.06 on cards, inset on rows), selection is a mint bar, Saved and favourite toggles show a filled glyph instead of a border, and empty Favorites tabs are disabled. This removes the double ring on the movie player. Primary buttons are light at rest so mint never suggests a second focus. Virtual lists measure an unfocused item so card scaling cannot skew their step, and rails ignore their trailing focus padding when deciding the end. An opt-in E2E scenario captures the 24 design-review screens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01S4BLms6Gy8rWZKSVoR4A9w
Codex Review Summary: ✅ CompletedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
Bundle ReportBundle size has no change ✅ |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 865b23bac6
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
 [Medium impact] The latest changes appear safe to merge, with no new blocking issues found. SummaryThe PR adds shared TV type, spacing, and focus styles. The latest changes:
No new actionable issues were found in the changes since the previous review. Reviews (2) · Last reviewed commit: "fix(tv): give episode cards and rail foc..." · Reviewed by Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
A selected nav item, tab, day or Saved toggle that also has focus now takes the same mint fill and dark text as any focused button, instead of light text on mint. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01S4BLms6Gy8rWZKSVoR4A9w
Episode cards grow so their labels are not cut off at the new type scale, and home rails get room for the scaled card's focus ring. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01S4BLms6Gy8rWZKSVoR4A9w
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #2237 +/- ##
========================================
Coverage 81.87% 81.88%
========================================
Files 1904 1904
Lines 101605 101617 +12
Branches 24847 24089 -758
========================================
+ Hits 83191 83204 +13
+ Misses 11129 11128 -1
Partials 7285 7285
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. |
|
@codex review @greptileai review Please re-review the latest head (97dffbe), which addresses the earlier findings on focus contrast, episode card heights and rail focus rings. Generated by Claude Code |
|
Codex Review: Didn't find any major issues. Bravo. Reviewed commit: ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting "@codex address that feedback". |
Requested by Sergey · project thread
What changed
This is the foundation from section 03 of the TV webOS design review, plus top-10 items #1 (type scale) and #2 (focus). Layouts and flows stay the same.
apps/tv/src/tokens.cssholds the 1920×1080 type scale as tokens: display 88 serif 600, title 56, heading 32 sans 500, body 28, meta 24, and eyebrow 22 with +14% tracking. No text is smaller than 22px, and the serif face is used only for content and channel titles. The file also defines an 8px spacing base, a 64×48 safe area that every page and the players share, 72px buttons with a 14px radius, and 96px list rows. All TV stylesheets now use these tokens instead of literal sizes. Windows narrower than 1400px redefine the tokens to the earlier, denser scale.apps/tv/src/focus.cssloads last and owns the three state signals:scale(1.06), animated with transform only. List rows and guide cells show an inset ring on their own fill..tv-toggle) is shown by the filled ♥ glyph with no border. This removes the double ring on the movie player (screen 32).gapdeclarations are replaced with margins. There is nobackdrop-filter. Onlytransformis animated. Selection bars are small inset shadows with no blur.VirtualCollectionnow measures an item that does not have focus, so a scaled card cannot distort the row step. The default channel step is now 105, matching the 96px row plus 9px spacing.HorizontalRailno longer counts the trailing focus padding as content when it decides that the end of a rail is reached.design-review.e2e.tscaptures the 24 review screens with the fictional catalog. It runs only withTV_DESIGN_REVIEW=1. The command is indocs/development/tv-development.md.Before / after
The same 24 screens, captured by the same scenario before and after this change, are on a private comparison page (ask for access if you can't open it): https://claude.ai/artifact/QL7RKNB3wq38QXfkYxt1GN
Why
From about 3 m away the old text (15–21px) could not be read. Mint also meant focus, Saved and the active item at the same time, so the movie player showed two rings at once.
Release note
.changes/(tv-readable-type-and-focus.md)Checks
pnpm nx run-many -t test lint typecheck -p tv tv-feature tv-ui tv-e2epasses (lint reports only warnings that already existed), andtv:verify-buildpassestv-e2ein Playwright Chromium: 229 of 232 passed. The other three:global-home"cross-source playback retry restores the complete Home origin" fails on the restored scroll offset. The sibling test with the same assertion (global-home.e2e.ts:136) also fails onmasterin this environment, so this check is already fragile, but the taller layout makes it fail more often. It needs a follow-up.review-recovery"abandoning grid … cancels a pending channel resolution" failed 3 times in 44 runs under load and 0 times in 12 runs alone. Onmasterit passed 8 times out of 8. It is timing-sensitive and worth watching.home-cancellationfailed once in the full run and passed on rerun.visual-refinementallows a poster top below 300px at 1920 because the controls are now 72px.episode-layoutscrolls the chosen episode into the upper part of the screen before stills load. Otherwise the taller still card has to scroll into view, and that rule, not the anchor, sets the offset.Generated by Claude Code