Correct the design documentation against the code, and fix two focus rings - #53
Merged
Conversation
…lass The destructive button set a danger-500 focus ring directly on its danger-600 fill, with no offset between them, so the two reds read as one thickened edge exactly where the stakes are highest. It now carries the same 2px white offset the primary button already had, which is also what DESIGN.md described for every filled button. .focus-ring shipped in the stylesheet with no call sites while the header wordmark and the three footer links each respelled its two declarations as a utility string. The links now wear the class. The rendered ring is unchanged; what changes is that it has one definition instead of five.
DESIGN.md carried nine statements the code had outgrown. The unread favicon was described as a neutral-800 disc bearing a white lowercase h; it has been the brand-600 diamond with a white-ringed danger-600 dot since the mark and the accent became one colour. Two more were self-contradictions, where the file stated a rule correctly in one section and broke it in another: the secondary button hovers to neutral-100, not to the neutral-50 field its own Never-Hover-To-The-Field Rule forbids, and it takes .btn's 0.375rem geometry rather than 0.5rem. The rest: the disabled example named a control that is labelled Copy shown (N), the icon family claimed no exceptions while the footer's GitHub glyph is a filled brand mark, the measure list was missing the 28rem retention note, and the first-party claim held for the home and contact pages but not for the endpoint page, which pulls the highlight.js theme from a CDN as a render-blocking stylesheet. That dependency is now stated rather than contradicted; it is not changed. Coverage was incomplete as well. The components section named 13 classes and folded the rest into "and its variants" while components.css ships 25, and the two disclosure panels on the endpoint page went undocumented despite being the reason .panel-summary and .panel-body exist as components. Both are written up, along with the focus-ring usage rule, .field-mono and .app-select by name, the normal-case parenthetical label pattern, and the three literal hex mirrors of tokens that have to move by hand. Frontmatter tokens grew from 15 component entries to 24, and two were wrong: empty-value claimed mono type and the waiting state's padding, and panel claimed padding that lives on panel-body. PRODUCT.md: robots.txt also allows the three assets a crawler needs to render the two allowed pages. AGENTS.md carried the same stale Copy all (N) label.
The design detector hook was configured as enabled but was never wired into any harness, and the rest of the directory was generated tooling state rather than source: a config, a DESIGN.md sidecar, and a live-preview config. DESIGN.md itself is at the repository root and is unaffected.
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
1 participant
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.
PRODUCT.md and DESIGN.md checked line by line against the code they describe.
Two defects fixed in the code, nine wrong facts corrected, and the component
inventory completed.
Code
.btn-dangerset a danger-500 focus ring straight onto its danger-600 fill.It now carries the 2px white offset
.btn-primaryalready had, which is whatDESIGN.md described for every filled button.
.focus-ringshipped with zero call sites while four links respelled its twodeclarations inline. The links wear the class now. Same rendered ring, one
definition instead of five.
Documentation
The worst drift was the unread favicon: documented as a neutral-800 disc with a
white lowercase
h, actually the brand-600 diamond with a white-ringeddanger-600 dot since
d9e0ae3, the very commit that last touched DESIGN.md.Two others were self-contradictions where the file stated a rule correctly in
one section and broke it in another.
Newly documented: the two disclosure panels on the endpoint page, the full
25-class component inventory (was 13), the
.focus-ringusage rule,.field-monoand.app-select, the parenthetical label pattern, and the threeliteral hex mirrors of tokens. Frontmatter grew from 15 component entries to 24.
.impeccable/is removed: its hook was configured as enabled but never wiredinto any harness, and the rest was generated tooling state. DESIGN.md lives at
the repository root and is unaffected.
Found, not fixed
The endpoint page pulls the pinned highlight.js theme from jsDelivr as a
render-blocking stylesheet, which contradicted DESIGN.md's first-party claim.
The document now states it plainly; the dependency is untouched, since
self-hosting it is a real build change. Worth a deliberate decision given the
product's promise is a working URL in seconds.
Verification
71/71 e2e (run on a temporary port, constant reverted),
go test ./...pass,eslint clean, and the built
public/app.cssis in sync with its source.