From bfa871bfac554dad004755878f1bc55c24bc0397 Mon Sep 17 00:00:00 2001 From: waleed Date: Fri, 3 Jul 2026 12:15:27 -0700 Subject: [PATCH 1/2] improvement(styling): use a consistent branded text-selection color app-wide Previously no ::selection rule was defined anywhere, so text selection fell back to the browser/OS default, which dims when a window loses focus and made pages look inconsistent side by side. Adds one global rule using the existing --selection token. --- apps/sim/app/_styles/globals.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 64fa865241d..c6d5169861e 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -491,6 +491,13 @@ html.sidebar-booting .sidebar-shell-inner { outline: none; } + /* Consistent branded text-selection color everywhere, independent of the + browser/OS default (which dims when the window loses focus). */ + ::selection { + background-color: var(--selection); + color: #ffffff; + } + body { background-color: var(--bg); color: var(--text-primary); From 2dd75c55c6fcbb263547bd112a6c60d3b3205b0f Mon Sep 17 00:00:00 2001 From: waleed Date: Fri, 3 Jul 2026 12:45:25 -0700 Subject: [PATCH 2/2] fix(styling): resolve markdown-selection conflict, use --white token Remove the local link/strikethrough ::selection color overrides in rich-markdown-editor.css now that the global ::selection rule already forces uniform white text on every selection. Also swap the literal #ffffff for the existing --white design token. --- apps/sim/app/_styles/globals.css | 2 +- .../rich-markdown-editor/rich-markdown-editor.css | 15 --------------- 2 files changed, 1 insertion(+), 16 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index c6d5169861e..ecdff6f7b2b 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -495,7 +495,7 @@ html.sidebar-booting .sidebar-shell-inner { browser/OS default (which dims when the window loses focus). */ ::selection { background-color: var(--selection); - color: #ffffff; + color: var(--white); } body { diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css index 448583bcf9e..84d727723b3 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css +++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css @@ -110,13 +110,6 @@ text-decoration: line-through; } -/* Selecting struck-through text reads in the primary color like any other highlighted text, so the - selection looks uniform (it returns to the muted strike color when deselected). */ -.rich-markdown-prose del::selection, -.rich-markdown-prose s::selection { - color: var(--text-primary); -} - .rich-markdown-prose a { color: var(--brand-secondary); cursor: pointer; @@ -126,14 +119,6 @@ text-decoration: underline; } -/* When a link is selected, drop its blue so it reads like any other highlighted text — the standard - MD-editor convention (Linear, Slack) where the selection takes precedence over the link color. - Only the selected state is affected; an unselected link stays blue. */ -.rich-markdown-prose a::selection, -.rich-markdown-prose a ::selection { - color: var(--text-primary); -} - /* Render the gap cursor (e.g. above a leading divider) as a normal vertical caret rather than ProseMirror's default short horizontal bar, which reads as a stray underscore. */ .rich-markdown-prose .ProseMirror-gapcursor::after {