fix(light): tag dropdown, code highlight

[icecrasher321]

Summary

Tag dropdown in light mode does not show up. Code highlight color is not in line with prod.

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 27, 2026 1:14am

[cursor]

PR Summary

Low Risk
Low risk visual-only changes that adjust Tailwind/CSS variable usage for selection and popover colors; main risk is minor theme regressions in light/dark mode combinations.

Overview
Fixes light-mode styling inconsistencies in two UI components.

Updates getCodeEditorProps selection text color to use --text-primary instead of --bg, and tweaks Popover’s inverted color scheme to use explicit dark hex values for content background, divider, item active/hover states, and the arrow fill/stroke so inverted popovers render correctly in light mode.

^{Written by Cursor Bugbot for commit 584504f. Configure here.}

[greptile-apps]

Greptile Summary

This PR fixes two light-mode visual regressions in the EMCN component library: the inverted tag dropdown popover was invisible/white in light mode, and selected text in the code editor was unreadable (white-on-light-blue).\n\n- popover.tsx – The inverted color scheme is intended to always render as a dark surface regardless of the host theme. The prior code used CSS variables (var(--bg), var(--surface-5)) that correctly resolve to dark values in dark mode but resolve to near-white values in light mode (#fefefe, #f3f3f3), making the dropdown invisible. The fix replaces those with their hardcoded dark-mode equivalents (#1b1b1b, #363636) for the light-mode path, while leaving the dark: prefixed classes unchanged.\n- code.tsx – selection:text-[var(--bg)] rendered selected text in near-white (#fefefe) on a light-blue selection background (--selection-bg: #add6ff) in light mode — essentially invisible. Changing to var(--text-primary) gives dark (#1a1a1a) text on the light-blue highlight, which is legible.\n- The hardcoded hex values in popover.tsx are the same as the dark-mode CSS variable values and are scattered across four locations; a small maintenance concern but not a functional issue.

Confidence Score: 5/5

Safe to merge — both changes are correct, targeted light-mode visual fixes with no logic or behavioural side-effects.

Both fixes are straightforward CSS/Tailwind class corrections. The root cause (CSS variables resolving to light values inside an intentionally-dark inverted scheme) is clearly diagnosed and correctly addressed. No functional logic is changed, dark mode is unaffected, and the only remaining note is a low-priority maintenance suggestion about consolidating hardcoded hex values.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/popover/popover.tsx	Fixes inverted color scheme in light mode by replacing light-resolving CSS variables (--bg, --surface-5) with their dark-mode hex equivalents (#1b1b1b, #363636), so the popover always appears dark regardless of host theme; also corrects the arrow fill from #242424 to #1b1b1b to match the popover background.
apps/sim/components/emcn/components/code/code.tsx	Fixes code selection text color in light mode by replacing var(--bg) (#fefefe, near-white, invisible on light-blue selection) with var(--text-primary) (#1a1a1a, dark), making selected text legible.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Render Popover / Code editor] --> B{colorScheme?}
    B -->|default| C[Use CSS vars\nvar --surface-3 / var --border-1]
    B -->|inverted| D{Host theme?}
    D -->|light mode| E["Hardcoded dark values\n#1b1b1b bg / #363636 border\n(dark: classes skipped)"]
    D -->|dark mode| F["CSS vars resolve correctly\ndark:bg-[var(--surface-3)]\ndark:border-[var(--border-1)]"]
    E --> G[Dark popover in light mode ✓]
    F --> H[Dark popover in dark mode ✓]
    C --> I[Theme-adaptive popover ✓]

    J[Code editor selection] --> K{Host theme?}
    K -->|light mode| L["selection:text-[var(--text-primary)]\n= #1a1a1a on #add6ff ✓"]
    K -->|dark mode| M["dark:selection:text-white\non #264f78 ✓"]

Loading

_{Reviews (1): Last reviewed commit: "remove more hardcoded vals" | Re-trigger Greptile}