feat: draw the comment indicator without colour - #67
Merged
Conversation
The chip read 💬 N and ✅ N, and both codepoints have colour glyphs in every font that ships them. That made the indicator the one place on the page carrying a hue other than the accent — a green check beside a blue chip competing with the text under review, which is the thing UI_DESIGN §2.1 exists to prevent. Open is now a filled accent chip with a stroked speech bubble drawn in currentColor; all-resolved gives up its fill for an accent hairline outline with a ✓, the same fill-versus-outline step-down §2.5 already uses for a badge. The balloon and the check were the right two symbols all along — they only had to be drawn rather than typed. Position, size, hover and the accent fill are unchanged, and §2.6 now records why, along with the alternatives that were weighed and dropped. Both glyphs sit in a box of the same size, and the chip fixes its own line-height and letter-spacing. It is appended inside its target, so it inherited that target's text metrics: measured, the same chip came out 5px shorter and a fraction narrower on a heading than on a paragraph. Across H1, H2, P, LI, FIGURE, DIV, TR and PRE, in both states, every chip is now the same size. Losing the emoji also breaks three regexes that stripped 💬 out of an element's textContent. The indicator lives inside the element it marks, so without them the count and the ✓ leak into TOC entries, heading slugs and the composer's context line. visibleText() replaces them, reading the element with .comment-indicator removed rather than pattern-matching whatever the chip happens to render. User request: comment indicator を全体のスタイルに合わせた落ち着いたもの にしたい。インタビューで、うるさいのはフルカラー絵文字だけで位置・塗り・ hover は現行維持と確定。未解決側にもグリフを付け、同じ桁数なら未解決と 全解決でチップ幅を揃えること。Verified in a browser over the built examples, in light and dark, in both Markdown and diff mode.
This was referenced Aug 29, 2026
Merged
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
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.
Why this change is necessary
The comment indicator read
💬 Nwhile any thread on a block was open, and✅ Nonce they were all resolved. Both are colour emoji — whatever font ships them draws them in their own hues — which made the indicator the one place on the review screen carrying a colour other than the single accent. That is the thing UI_DESIGN §2.1 exists to prevent: hierarchy is supposed to come from opacity, weight and whitespace, and a green check beside a blue chip competes for attention with the specification the reviewer came to read. The tension was already known and deferred in as many words — the CSS beside the indicator said the chip's palette was "not this change's to settle".Approach
Both symbols were the right ones; they only had to be drawn rather than typed. An open indicator is now a filled accent chip carrying a speech bubble stroked in
currentColor; an all-resolved one gives up its fill for an accent hairline outline with a✓. That is the same fill-versus-outline channel §2.5 already uses to step a badge down, so the two read as one control in two states rather than as two different marks — and neither spends a hue.Position, size, hover and the accent fill are untouched. The interview that preceded this change established that none of those was what felt loud.
Two things fell out of the change rather than being chosen:
line-heightandletter-spacing, and both glyphs sit in a box of the same size, so two chips carrying the same number of digits are the same size wherever they land.textContent, and three regexes existed to strip💬back out of it. With the emoji gone those regexes match nothing, and the count and the✓would leak into table-of-contents entries, heading slugs and the composer's context line instead. AvisibleText()helper replaces them, reading an element with.comment-indicatorremoved rather than pattern-matching whatever the chip happens to render.Design Documents
The design documents live in this repository and are part of this diff, so they are linked rather than reproduced here.
UI_DESIGN.md— normative for the review screen. The decision is recorded as a new §2.6, together with the alternatives that were weighed and dropped: removing the open/resolved distinction, hiding the chip once everything is resolved, and○/✓or…/✓, which need no SVG and pair more neatly but say "checklist item" and "in progress" rather than "there is discussion here".GLOSSARY.md,DESIGN.md,AGENTS.md— updated to describe the control as it now is.Review Points
visibleText()covers three call sites — the composer's context line, heading slugs and the rail's table-of-contents labels. It is worth checking whether anything else reads an element's text and would now see a stray count.💬remain inUI_DESIGN.mdon purpose. They quote what the UI used to show, inside paragraphs explaining why something was changed; rewriting them would falsify the record.examples/sample.mdandexamples/sample.diffrendered in headless Chrome, in light and dark. Acrossh1,h2,p,li,figure,div,trandpre, in both states, every chip measured the same width and height; in diff mode both states match within diff lines and within file headers. No indicator text leaked into the table of contents or into heading ids.