kayg/calternal
Watch
1
0
Fork
You've already forked calternal
 0
Code Issues 191 Pull requests 61 Projects Releases Packages Wiki Activity Actions 20

iPhone: list screens' Safari bars match the frosted sheet (#226) #254

Closed
kayg wants to merge 0 commits from issue/226-phone-bars-match-sky into dev
pull from: issue/226-phone-bars-match-sky
merge into: kayg:dev
Conversation 1 Commits - Files changed -
kayg commented 2026-10-14 11:44:23 +00:00
Owner
Copy link

Fixes #226.

What was wrong. The list screens are a frosted glass sheet over the sky, but the page base colour (html/body background, theme-color: what Safari paints its status bar and toolbar strip from) was the raw sky top. The sheet is lighter, so the bars showed a flat darker band. Under the toolbar the sheet also ended at the small viewport, so raw ridges and a flat strip showed there.

What changed.

  • glass-edge.ts: works out the colour of the glass over the backdrop edge the way the browser does (saturate, then the glass tint). syncThemeColor publishes it as --edge-glass.
  • data-edge="glass" on the root while a phone shows places or a list ("paper" over a note, as before). The root background-color and theme-color take it.
  • PhoneStack: the sheet melts into that colour at its very top and bottom (two small fade bands, off over a note), so bars and sheet meet without a seam even if the model is a few points off.
  • Backdrop .floor: now carries the page colour (paper or glass) under Safari's toolbar strip.

Test. e2e/phone-bars.spec.ts reads the real top and bottom edge pixels (median of the row, from a screenshot) on home, Journal, All notes and a note, at dawn/day/dusk/night, light and dark, over sky, plain and photo, and asserts they equal the html background and theme-color within dE < 2. 96 cases per engine, 192 pass (Chromium and WebKit). safe-areas.spec.ts still passes (29).

Not testable here. Real Safari bar tinting; kayg's phone is the judge.

Rebased on dev (after #167 / #145 work landed).

🤖 Generated with Claude Code

Fixes #226. **What was wrong.** The list screens are a frosted glass sheet over the sky, but the page base colour (`html`/`body` background, `theme-color`: what Safari paints its status bar and toolbar strip from) was the raw sky top. The sheet is lighter, so the bars showed a flat darker band. Under the toolbar the sheet also ended at the small viewport, so raw ridges and a flat strip showed there. **What changed.** - `glass-edge.ts`: works out the colour of the glass over the backdrop edge the way the browser does (saturate, then the glass tint). `syncThemeColor` publishes it as `--edge-glass`. - `data-edge="glass"` on the root while a phone shows places or a list (`"paper"` over a note, as before). The root `background-color` and `theme-color` take it. - `PhoneStack`: the sheet melts into that colour at its very top and bottom (two small fade bands, off over a note), so bars and sheet meet without a seam even if the model is a few points off. - `Backdrop` `.floor`: now carries the page colour (paper or glass) under Safari's toolbar strip. **Test.** `e2e/phone-bars.spec.ts` reads the real top and bottom edge pixels (median of the row, from a screenshot) on home, Journal, All notes and a note, at dawn/day/dusk/night, light and dark, over sky, plain and photo, and asserts they equal the `html` background and `theme-color` within dE < 2. 96 cases per engine, 192 pass (Chromium and WebKit). `safe-areas.spec.ts` still passes (29). **Not testable here.** Real Safari bar tinting; kayg's phone is the judge. Rebased on dev (after #167 / #145 work landed). 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Phone bars match the frosted list screens (#226)
Some checks failed
CI / web (pull_request) Failing after 25s
Details
CI / rust (pull_request) Failing after 1m51s
Details
f4d459428b 
The list screens are a glass sheet over the backdrop, so the page base colour
(what Safari paints its bars from, and theme-color) is now the glass's colour at
the screen edge, not the raw sky. The sheet melts into that colour at its top and
bottom, and the backdrop's floor carries it under Safari's toolbar. A Playwright
check reads the real edge pixels on every phone screen.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
kayg commented 2026-10-14 12:13:51 +00:00
Author
Owner
Copy link

Landed in merge train #265.

Landed in merge train #265.
kayg closed this pull request 2026-10-14 12:13:51 +00:00
Some checks failed
CI / web (pull_request) Failing after 25s
Details
CI / rust (pull_request) Failing after 1m51s
Details

Pull request closed

This pull request cannot be reopened because the branch was deleted.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
backend
Rust server

  
design
Mockups, UI and TASTE

  
docs
ADRs, CONTEXT, TASTE

  
idea
Parked idea, never worked until promoted

  
infra
Deploy, CI, VMs

  
perf
Performance and budgets

  
reliability
Data integrity, corruption traps

  
web
Web client

No labels
backend
design
docs
idea
infra
perf
reliability
web
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
kayg/calternal!254
No description provided.