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

Links as calm chips; the link you are on lights in your accent (#162) #251

Closed
kayg wants to merge 0 commits from issue/162-accent into dev
pull from: issue/162-accent
merge into: kayg:dev
Conversation 1 Commits - Files changed -
kayg commented 2026-10-14 11:33:23 +00:00
Owner
Copy link

Closes #162. Replaces #231 (the forge ignores pushes to an open PR).

Links stop being underlined and read as calm chips.

  • Note links are soft pills: a small note icon, the title in a quiet colour, a faint fill, a hairline edge and a whisper of shadow.
  • Web links are the same pill with a small diagonal ↗ in place of the note icon (kayg's update; no coloured or dotted text).
  • The link you are on (caret in it, or the pointer over it) lights in your accent: an accent edge, a soft accent tint and an accent icon, plus a little lift (kayg: accent, not a gradient; TASTE.md now says highlights use the accent, never decorative gradients). The caret lights it at once; the pointer fades it in over 140 ms and leaving puts it straight back. Only that one link glows.
  • No dashes anywhere: a link to a note in the Trash is the same pill, faded with no fill; an unlinked mention in Info is a calm tint with a hairline.
  • Source mode shows the raw markdown, no pills.

How it works

  • packages/editor/src/syntax/links.ts (new): the hidden-syntax pass now collects every link (its words, href and kind) and draws one mark per link, cm-link cm-link-note|cm-link-web, plus cm-link-on for the one the caret is on. The mark is drawn with the highest precedence, so bold words or a search match inside a link never cut the pill into pieces. The marks are only rebuilt when the caret lands on or leaves a link (a binary search over the visible links), or when the text changes.
  • The pill is a mark around ordinary text, never a widget: the caret walks through it letter by letter, typing and IME work inside, a long link wraps into one pill per line (box-decoration-break: clone), and the line never changes height (the padding sits inside the line height).
  • apps/web/src/styles/links.css (new) holds the whole look. The lit state only swaps the border colour, the fill and the shadow (built from --accent / --accent-base), so it fades with plain transitions and follows any accent, custom ones too. The icon is an empty inline box (not an inline-block), so the line can't break between the icon and the first word.
  • For #165 (picker): .link-chip + .link-chip-note / .link-chip-web / .link-chip-on / .link-chip-missing give the same look outside the editor, and the icons are --icon-note-link and --icon-web-link (masks). The picker itself is untouched here.
  • Old underline styles removed from cm.css and editor.css (the .note-link rule was unused).

Tests: e2e/chips.spec.ts (no underline, pill radius, a linked line is a whole number of plain rows tall, the caret moves one letter per arrow inside a chip, lighting never moves it, typing inside works, the light goes when the caret leaves, source mode has no chips); hidden.test.ts checks the collected links and their kinds.

Screenshots and perf numbers are on #162.

🤖 Generated with Claude Code

https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T

Closes #162. Replaces #231 (the forge ignores pushes to an open PR). Links stop being underlined and read as calm chips. - **Note links** are soft pills: a small note icon, the title in a quiet colour, a faint fill, a hairline edge and a whisper of shadow. - **Web links** are the same pill with a small diagonal ↗ in place of the note icon (kayg's update; no coloured or dotted text). - **The link you are on** (caret in it, or the pointer over it) lights in your **accent**: an accent edge, a soft accent tint and an accent icon, plus a little lift (kayg: accent, not a gradient; TASTE.md now says highlights use the accent, never decorative gradients). The caret lights it at once; the pointer fades it in over 140 ms and leaving puts it straight back. Only that one link glows. - **No dashes anywhere**: a link to a note in the Trash is the same pill, faded with no fill; an unlinked mention in Info is a calm tint with a hairline. - **Source mode** shows the raw markdown, no pills. How it works - `packages/editor/src/syntax/links.ts` (new): the hidden-syntax pass now collects every link (its words, href and kind) and draws one mark per link, `cm-link cm-link-note|cm-link-web`, plus `cm-link-on` for the one the caret is on. The mark is drawn with the highest precedence, so bold words or a search match inside a link never cut the pill into pieces. The marks are only rebuilt when the caret lands on or leaves a link (a binary search over the visible links), or when the text changes. - The pill is a mark around ordinary text, never a widget: the caret walks through it letter by letter, typing and IME work inside, a long link wraps into one pill per line (`box-decoration-break: clone`), and the line never changes height (the padding sits inside the line height). - `apps/web/src/styles/links.css` (new) holds the whole look. The lit state only swaps the border colour, the fill and the shadow (built from `--accent` / `--accent-base`), so it fades with plain transitions and follows any accent, custom ones too. The icon is an empty inline box (not an inline-block), so the line can't break between the icon and the first word. - For #165 (picker): `.link-chip` + `.link-chip-note` / `.link-chip-web` / `.link-chip-on` / `.link-chip-missing` give the same look outside the editor, and the icons are `--icon-note-link` and `--icon-web-link` (masks). The picker itself is untouched here. - Old underline styles removed from `cm.css` and `editor.css` (the `.note-link` rule was unused). Tests: `e2e/chips.spec.ts` (no underline, pill radius, a linked line is a whole number of plain rows tall, the caret moves one letter per arrow inside a chip, lighting never moves it, typing inside works, the light goes when the caret leaves, source mode has no chips); `hidden.test.ts` checks the collected links and their kinds. Screenshots and perf numbers are on #162. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
Links as calm chips; the link you are on glows (#162)
Some checks failed
CI / web (pull_request) Failing after 27s
Details
CI / rust (pull_request) Successful in 1m46s
Details
8ecb506ed6 
Every link's words are drawn as a soft pill: a small note icon (or a
diagonal arrow for a web link), a faint fill, a hairline edge and a
whisper of shadow. No underline and no dashes anywhere: a link to a note
in the Trash is the same pill, faded, and an unlinked mention in Info is
a calm tint.

The link the caret is on gets a cyan, yellow and orange ring and a
little lift; the pointer fades the same light in. The caret lights it at
once. The pill is a mark around ordinary text, never a widget, so the
caret walks through it letter by letter, IME works inside, a long link
wraps into one pill per line and the line never changes height.

Link marks are drawn outermost, so bold words or a search match inside
a link never cut it into pieces. The chips are only redrawn when the
caret lands on or leaves a link. The look lives in links.css, reusable
outside the editor as .link-chip.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
The link you are on lights in your accent, not a gradient (#162)
Some checks failed
CI / web (pull_request) Failing after 26s
Details
CI / rust (pull_request) Successful in 2m9s
Details
33b562e4a8 
kayg: the focused link should be accent highlighted. The lit pill now
takes the accent as its edge and a soft accent tint as its fill (plus
the accent on its icon), with the same lift; the caret lights it at
once and the pointer fades it in over 140 ms. The cyan, yellow and
orange gradient is gone everywhere, and with it the registered --ring
property: the edge is a plain border again.

TASTE.md: highlights use the accent, never decorative gradients.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018Yyy8fQGxPLkLa8v8NXz7T
kayg commented 2026-10-14 12:13:46 +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:48 +00:00
Some checks failed
CI / web (pull_request) Failing after 26s
Details
CI / rust (pull_request) Successful in 2m9s
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!251
No description provided.