From a053d66c4e9c5445870f67a51d96f37109c37e8e Mon Sep 17 00:00:00 2001
From: Fadhlan Ridhwanallah <fridhwanallah@gmail.com>
Date: Fri, 17 Jul 2026 13:30:45 +0700
Subject: [PATCH] fix: make block card/file embed refs use the legible inline
 highlight

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>
---
 packages/base/codemirror-editor.gts         | 11 -----------
 packages/host/app/lib/codemirror-context.ts |  6 ++----
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/packages/base/codemirror-editor.gts b/packages/base/codemirror-editor.gts
index 181a56b205b..b368da55a47 100644
--- a/packages/base/codemirror-editor.gts
+++ b/packages/base/codemirror-editor.gts
@@ -1602,17 +1602,6 @@ export default class CodeMirrorEditor extends GlimmerComponent<CodeMirrorEditorS
           color: var(--boxel-400, #666);
         }
 
-        .codemirror-editor :deep(.cm-bfm-card-ref--block) {
-          display: inline-block;
-          font-size: 0.85em;
-          color: var(--boxel-400, #666);
-          padding: 2px 6px;
-        }
-
-        .codemirror-editor :deep(.cm-bfm-card-ref--active) {
-          background-color: var(--boxel-highlight-hover, #e8f0fe);
-        }
-
         /* ── Card widget containers ── */
         .codemirror-editor :deep(.cm-card-widget) {
           user-select: none;
diff --git a/packages/host/app/lib/codemirror-context.ts b/packages/host/app/lib/codemirror-context.ts
index e2c6bbe6929..5e92acdf279 100644
--- a/packages/host/app/lib/codemirror-context.ts
+++ b/packages/host/app/lib/codemirror-context.ts
@@ -672,8 +672,7 @@ function buildCardDecorations(
           from,
           to,
           value: Decoration.mark({
-            class:
-              'cm-bfm-card-ref cm-bfm-card-ref--block cm-bfm-card-ref--active',
+            class: 'cm-bfm-card-ref cm-bfm-card-ref--inline',
           }),
         });
       } else if (onCursor) {
@@ -682,8 +681,7 @@ function buildCardDecorations(
           from,
           to,
           value: Decoration.mark({
-            class:
-              'cm-bfm-card-ref cm-bfm-card-ref--block cm-bfm-card-ref--active',
+            class: 'cm-bfm-card-ref cm-bfm-card-ref--inline',
           }),
         });
         let previewWidget = new CardWidget(cardId, 'block', refType);