Make block card/file embed refs use the legible inline highlight#5532
Open
FadhlanR wants to merge 1 commit into
Open
Make block card/file embed refs use the legible inline highlight#5532FadhlanR wants to merge 1 commit into
FadhlanR wants to merge 1 commit into
Conversation
In compose mode, block refs (::card[...] / ::file[...]) were highlighted with a teal background (--boxel-highlight-hover) and taller padding, making the grey syntax text illegible. Inline refs (:card[...]) already used a legible light-grey highlight. Consolidate both to the inline treatment by dropping the --block/--active classes and their now-unused CSS rules. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
FadhlanR
marked this pull request as ready for review
July 17, 2026 07:22
jurgenwerk
approved these changes
Jul 17, 2026
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
2 participants
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.
Problem
In the compose-mode markdown editor (
RichMarkdownField→ CodeMirror), a block card/file embed reference (::card[...]/::file[...]) was highlighted with a teal background and taller padding, making the grey syntax text illegible. The inline reference (:card[...]) already used a legible light-grey highlight.Per design feedback on CS-11750, both inline and block references should use the same light-grey treatment.
Root cause
Block refs always received an extra
cm-bfm-card-ref--activeclass, whose CSS paintedbackground-color: var(--boxel-highlight-hover)— which resolves to the teal--boxel-dark-teal(#00da9f). They also carriedcm-bfm-card-ref--block, addingdisplay: inline-block+ extra vertical padding (the taller pill). Inline refs never got either.Fix
buildCardDecorations(packages/host/app/lib/codemirror-context.ts), the two block-ref branches now emit the samecm-bfm-card-ref cm-bfm-card-ref--inlineclass the inline branches use..cm-bfm-card-ref--blockand.cm-bfm-card-ref--activeCSS rules frompackages/base/codemirror-editor.gts.Purely a highlight/CSS change — no parsing, widget, or toolbar behavior is affected. The block preview widget (rendered below the cursor line) uses separate
cm-card-widget--blockclasses and is unchanged.Testing
pnpm lint:typesinpackages/host— no new type errors from this change.RichMarkdownPlaygroundin compose mode; with the cursor on a::card[...]line the block ref now shows grey text on a light-grey highlight matching the inline:card[...], with no teal.Screen Recording
Screen.Recording.2026-07-17.at.14.21.16.mov
🤖 Generated with Claude Code