improvement(styling): consistent branded text-selection color app-wide#5389
Conversation
…pp-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.
PR SummaryLow Risk Overview Removes rich-markdown-editor-only Reviewed by Cursor Bugbot for commit 2dd75c5. Configure here. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Greptile SummaryThis PR introduces a single global
Confidence Score: 5/5Safe to merge — two CSS files with purely additive/subtractive styling changes, no logic or data affected. Both changes are CSS-only: a single new No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A["User selects text anywhere in the app"] --> B{"Is text inside\n.rich-markdown-prose?"}
B -- No --> C["globals.css\n::selection\nbackground: var(--selection)\ncolor: var(--white)"]
B -- Yes --> D{"Is it a del/s\nor a element?"}
D -- "Yes (before PR)" --> E["rich-markdown-editor.css\ndel/a::selection\ncolor: var(--text-primary)\n⚠️ overrides global white"]
D -- "Yes (after PR)" --> C
D -- No --> C
E -. "removed by this PR" .-> C
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A["User selects text anywhere in the app"] --> B{"Is text inside\n.rich-markdown-prose?"}
B -- No --> C["globals.css\n::selection\nbackground: var(--selection)\ncolor: var(--white)"]
B -- Yes --> D{"Is it a del/s\nor a element?"}
D -- "Yes (before PR)" --> E["rich-markdown-editor.css\ndel/a::selection\ncolor: var(--text-primary)\n⚠️ overrides global white"]
D -- "Yes (after PR)" --> C
D -- No --> C
E -. "removed by this PR" .-> C
Reviews (2): Last reviewed commit: "fix(styling): resolve markdown-selection..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
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.
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit 2dd75c5. Configure here.
1 participant
Summary
::selectionrule (app/_styles/globals.css) using the existing--selectiondesign token, so text-selection color is consistent everywhere instead of falling back to the browser/OS default.::selectionrule existed anywhere in the codebase before this — the perceived inconsistency between platform pages and the comparison pages was actually the browser dimming selection color on an unfocused window, not a real CSS difference. This makes the highlight color deliberate and stable regardless of window focus.Type of Change
Testing
Verified the CSS rule directly (light
--selection: #1a5cf6, dark--selection: #4b83f7, both light-on-blue with white text for contrast). Could not get a full visual render in this environment due to a pre-existing, unrelatedcrittersmodule gap (optimizeCss: trueinnext.config.tswith nocritterspackage installed anywhere in the repo) — not introduced by this change.Checklist