Skip to content

Commit 1969779

Browse files
authored
improvement(files): fill the active find match instead of ringing it (#7198)
The Cmd/Ctrl+F active match was drawn as a 1.5px ring in --highlight-match-text. An outline around a run of text traces its line box, so on a heading it read as a stray dark rectangle rather than as emphasis, and a match wrapping across two lines drew two disjoint boxes. The active hit is now a solid --brand-secondary fill with a fixed dark ink, so it stays in the same family as the inactive tint and wraps cleanly. The ink is fixed rather than tokenized because the fill is: --brand-secondary is the same blue in both themes, so a theme-flipping text token would go white on light blue in dark mode. Same pairing the note card's active search mark already uses.
1 parent b01b41f commit 1969779

1 file changed

Lines changed: 11 additions & 3 deletions

File tree

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -587,14 +587,22 @@
587587
}
588588

589589
/* Cmd/Ctrl+F match highlights. Every hit carries the same tint the rest of the app
590-
* paints a search match with; the active one is ringed rather than recolored, so the
591-
* two read as one family and neither needs a token that only exists here. */
590+
* paints a search match with. */
592591
.rich-markdown-nodes .rich-find-match {
593592
background-color: var(--highlight-match-bg);
594593
color: var(--highlight-match-text);
595594
border-radius: 2px;
596595
}
597596

597+
/* The active hit is a stronger fill of the same hue, never a ring: an outline drawn
598+
* around a run of text traces the line box, so on a heading it reads as a stray
599+
* rectangle rather than as emphasis. Filling instead keeps the two states one family.
600+
*
601+
* The ink is fixed rather than tokenized because the fill is: `--brand-secondary` is
602+
* the same blue in both themes, so a theme-flipping text token would go white on light
603+
* blue in dark mode. Same reasoning as the note card's active search mark, which pairs
604+
* its solid fill with a fixed dark ink for exactly this reason. */
598605
.rich-markdown-nodes .rich-find-match-active {
599-
box-shadow: 0 0 0 1.5px var(--highlight-match-text);
606+
background-color: var(--brand-secondary);
607+
color: #000;
600608
}

0 commit comments

Comments
 (0)