fix: restore the breadcrumb chevron and light the mermaid participant labels - #13
Open
wardbryan3 wants to merge 1 commit into
Open
wardbryan3 wants to merge 1 commit into
wardbryan3 wants to merge 1 commit into
Conversation
… labels
Two visual defects found by walking the live docs site at 375, 768 and 1440
in both themes.
The breadcrumb separator rendered as a solid square on every page, in both
themes, at every width. Infima draws it as a chevron background-image; the
theme recoloured it with the `background` shorthand, which also resets
background-image, so only a 7.5px block of colour was left and the trail read
as a row of tags rather than a hierarchy. The chevron now travels in a mask,
so background-color still sets the colour and the Infima filter is dropped.
Sequence diagrams rendered their participant names in near-black. Mermaid's
dark theme applies `.actor { fill: #1f2020 }` to the label <text> as well as
the box, and the rule meant to correct that, `text.actor > tspan`, never
matches, because these labels carry their text directly in the <text> element
with no tspan. The measured result was 1.50:1 against the box and 1.05:1
against the page, so participants read as empty rectangles. Setting the label
to --ink-900 gives 10:1.
The mermaid dark-mode rules move here from the docs site's own stylesheet, so
that every site on the theme gets them and visual fixes live in one repo.
Flowcharts, graphs and state diagrams were already correct at 10.71:1 and are
unchanged.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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.
Summary
Two visual defects found by walking the live docs site at 375, 768 and 1440 in both themes. Both are fixed here rather than in the docs site, so every spoke picks them up.
The breadcrumb separator was a solid square, not a chevron. Every page, both themes, every width. Infima draws the separator as a chevron
background-imagetinted by--ifm-breadcrumb-separator-filter. This theme recoloured it with thebackgroundshorthand, which also resetsbackground-image, leaving a bare 7.5px block of--ink-300. The trail read as a row of tags rather than a hierarchy. The chevron now travels in amask, sobackground-colorstill sets the colour and the filter is no longer needed.Sequence-diagram participant names were invisible in dark mode. Mermaid's dark theme applies
.actor { fill: #1f2020 }, which hits the label<text>as well as its box. The rule meant to correct that,text.actor > tspan, never matches: these labels carry their text directly in the<text>element with notspan. Measured on the live site:The participant boxes rendered as empty rectangles. The existing
rect.actorlift to#3a3d44was not the cause and is unchanged; it only moved the label from invisible to barely visible.The mermaid dark-mode rules move here from the docs site's own
src/css/custom.css. They were always theme-level styling, and keeping them in one repo means the spokes get them too. The docs site's copy is removed in a follow-up once this release is published, so there is no window without them.Scope
Only sequence diagrams were affected by the label bug. Flowcharts, graphs and state diagrams measured 10.71:1 and are unchanged. Light mode was correct throughout and is untouched: the new rules are all scoped to
[data-theme='dark'].Verified
--ink-300, label contrast 1.50:1 to 10:1,var(--ink-900)confirmed to resolve inside the injected SVG.maskshorthand.yarn build(tsc) clean,yarn test14 passing.Version bumped to 0.5.2.
🤖 Generated with Claude Code