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

port: Style sheet round 6 — looks, shared tick rows, page colour, text size, background (approved mockup) #851

Closed
kayg wants to merge 10 commits from port/style-2 into port/style
pull from: port/style-2
merge into: kayg:port/style
Conversation 5 Commits 10 Files changed 27 +921 -228
kayg commented 2026-11-02 10:27:24 +00:00
Owner
Copy link

port: Style sheet round 6 (approved mockup) — slice 2 of 3 (stacked on port/style)

  • Looks row (Paper, Frosted card, Clear on photo, Plain; Plain hidden on a phone): one tap = one edit (setStyleKeys, pure patchFrontmatter, unit-tested byte-exact); the ring leaves when you tune.
  • Page tab uses the same tick rows as Settings (See-through, Frost): one component, one account value; moving one in a note drops the note's own line (lib/note-look.ts).
  • Page colour (Swatches, calternal-page-colour), Text size (calternal-text-size), Background tab with picture row + Change, Frost/Dim backdrop rows (calternal-background-blur/-dim, honoured by bgFor) and the "dim it a little?" nudge.
  • New keys (all plain lines, only written when not default): calternal-page-colour: sand|sage|sky|rose|slate, calternal-text-size: small|large, calternal-background-blur|dim: NN%|off. Page blur stays in px (existing notes).
  • Page colour is five CSS rules, not first-screen JS.

Gates: svelte-check clean, vitest (style-keys), new style-sheet.spec.ts, updated backdrops/opacity/width specs; chromium + webkit at 1440 and 390 (results in comment).
Bundle (brotli): first JS 239.7, first CSS 21.6, all JS 318.0 (dev 311.9; budget 315 needs kayg's OK).
Not ported: readability guard that auto-raises dim (only the suggestion); the mockup's library "Pictures" grid (needs Home pictures; the existing Unsplash/upload picker sits behind Change); drawn-backdrop grid in the per-note picker.

🤖 Generated with Claude Code

## port: Style sheet round 6 (approved mockup) — slice 2 of 3 (stacked on port/style) - Looks row (Paper, Frosted card, Clear on photo, Plain; Plain hidden on a phone): one tap = one edit (`setStyleKeys`, pure `patchFrontmatter`, unit-tested byte-exact); the ring leaves when you tune. - Page tab uses the same tick rows as Settings (See-through, Frost): one component, one account value; moving one in a note drops the note's own line (`lib/note-look.ts`). - Page colour (Swatches, `calternal-page-colour`), Text size (`calternal-text-size`), Background tab with picture row + Change, Frost/Dim backdrop rows (`calternal-background-blur/-dim`, honoured by `bgFor`) and the "dim it a little?" nudge. - New keys (all plain lines, only written when not default): `calternal-page-colour: sand|sage|sky|rose|slate`, `calternal-text-size: small|large`, `calternal-background-blur|dim: NN%|off`. Page blur stays in px (existing notes). - Page colour is five CSS rules, not first-screen JS. **Gates**: svelte-check clean, vitest (style-keys), new `style-sheet.spec.ts`, updated backdrops/opacity/width specs; chromium + webkit at 1440 and 390 (results in comment). **Bundle (brotli)**: first JS 239.7, first CSS 21.6, all JS 318.0 (dev 311.9; budget 315 needs kayg's OK). **Not ported**: readability guard that auto-raises dim (only the suggestion); the mockup's library "Pictures" grid (needs Home pictures; the existing Unsplash/upload picker sits behind Change); drawn-backdrop grid in the per-note picker. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
kayg added 10 commits 2026-11-02 10:27:24 +00:00 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Presets: the thumbnail's page is not .page; backdrop, opacity and width specs follow the new Style sheet
Some checks failed
CI / server (pull_request) Has been cancelled
Details
CI / rust (pull_request) Has been cancelled
Details
CI / web (pull_request) Has been cancelled
Details
Markdown extraction contract / markdown-native-contract (pull_request) Has been cancelled
Details
Markdown extraction contract / markdown-editor-contract (pull_request) Has been cancelled
Details
c1ef1b78ed
kayg commented 2026-11-02 11:34:18 +00:00
Author
Owner
Copy link

Gate results (head 312bd4e9): style-sheet, note-bars, backdrops, backdrop-page, opacity, width, info, lazy-styled, text-size, served on chromium + webkit at 1440 and 390 — pass after updating the old specs for the new sheet (picker behind Change, tick-row sliders, see-through card). Shots in shots/port-style/product-pr2 vs mockup.

Gate results (head 312bd4e9): style-sheet, note-bars, backdrops, backdrop-page, opacity, width, info, lazy-styled, text-size, served on chromium + webkit at 1440 and 390 — pass after updating the old specs for the new sheet (picker behind Change, tick-row sliders, see-through card). Shots in `shots/port-style/product-pr2` vs `mockup`.
kayg commented 2026-11-02 12:37:23 +00:00
Author
Owner
Copy link

Segmented control (kayg 11-02): track and chosen option are both full pills (radius 999, option inset by the track padding), changed in packages/ui Selector.svelte so every segmented control follows; the Style tabs are equal segments (class="equal", 111 px each at 390). Checked at 390 and 1440: Style tabs, Font, Text size, Tree lines, Page width, Theme, Sidebar — none scrolls or truncates. Mockup changed the same way on review/calendar-2 (a61e4c3a) and preview redeployed. Shots on code: ~/Developer/Worktrees/shots/port-style/seg-{product,mockup}-{before,after}.

Segmented control (kayg 11-02): track and chosen option are both full pills (radius 999, option inset by the track padding), changed in packages/ui Selector.svelte so every segmented control follows; the Style tabs are equal segments (`class="equal"`, 111 px each at 390). Checked at 390 and 1440: Style tabs, Font, Text size, Tree lines, Page width, Theme, Sidebar — none scrolls or truncates. Mockup changed the same way on review/calendar-2 (a61e4c3a) and preview redeployed. Shots on `code`: ~/Developer/Worktrees/shots/port-style/seg-{product,mockup}-{before,after}.
kayg commented 2026-11-02 23:01:49 +00:00
Author
Owner
Copy link

BM10 follow-up (new head 80934507, on top of #850 de991727).

  • contrast.spec:230 (Style, both widths): a ticked See-through box's tick was measured as color (page ink) not its real ink, and an unticked box kept an invisible dark tick over dark glass (2.22:1). SpringCheckBox: the tick's ink is its color; an unticked box draws no tick; in the sheet a ticked box takes --glass-accent (as the accent reads on glass). Passes at 1440 and 390.
  • glass.spec:488 (Appearance preview alpha 0.2 vs 0.8): my style-sheet and opacity specs moved the ACCOUNT's See-through (the tick rows are Settings' own values) and left it at 0.2 for every later spec on that person. Both specs now put the account's look back (resetLook in helpers).
  • Page tab is built in three short steps (looks, rows, colour), each rising in, so opening the sheet is never one long task.
  • Equal-segment, pill-in-pill tabs from the earlier decision are in.
BM10 follow-up (new head 80934507, on top of #850 de991727). - `contrast.spec:230` (Style, both widths): a ticked See-through box's tick was measured as `color` (page ink) not its real ink, and an unticked box kept an invisible dark tick over dark glass (2.22:1). SpringCheckBox: the tick's ink is its `color`; an unticked box draws no tick; in the sheet a ticked box takes `--glass-accent` (as the accent reads on glass). Passes at 1440 and 390. - `glass.spec:488` (Appearance preview alpha 0.2 vs 0.8): my `style-sheet` and `opacity` specs moved the ACCOUNT's See-through (the tick rows are Settings' own values) and left it at 0.2 for every later spec on that person. Both specs now put the account's look back (`resetLook` in helpers). - Page tab is built in three short steps (looks, rows, colour), each rising in, so opening the sheet is never one long task. - Equal-segment, pill-in-pill tabs from the earlier decision are in.
kayg commented 2026-11-03 19:59:30 +00:00
Author
Owner
Copy link

BM14c: the red Style-stack cases came from #852's merge (a dropped noteId prop on <PageTab />, and the Page tab's held room shrinking mid-build). Fixed on #852 (f757dc1e, fed76ea1, 07b6770a); nothing needed on this PR. Details and 20x numbers: #897 and #852.

BM14c: the red Style-stack cases came from #852's merge (a dropped `noteId` prop on `<PageTab />`, and the Page tab's held room shrinking mid-build). Fixed on #852 (`f757dc1e`, `fed76ea1`, `07b6770a`); nothing needed on this PR. Details and 20x numbers: #897 and #852.
kayg commented 2026-11-07 18:11:59 +00:00
Author
Owner
Copy link

Content landed in dev via 12103f1c97 — closing.

Content landed in dev via 12103f1c973f1e810dd4a9a3bff5a705514d70b0 — closing.
kayg closed this pull request 2026-11-07 18:12:00 +00:00
Some checks failed
CI / server (pull_request) Has been cancelled
Details
CI / rust (pull_request) Has been cancelled
Details
CI / web (pull_request) Has been cancelled
Details
Markdown extraction contract / markdown-native-contract (pull_request) Has been cancelled
Details
Markdown extraction contract / markdown-editor-contract (pull_request) Has been cancelled
Details

Pull request closed

Please reopen this pull request to perform a merge.
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!851
No description provided.