From 584504f7e47039401f049eb328cc1f9c04ce6cf0 Mon Sep 17 00:00:00 2001 From: Vikhyath Mondreti Date: Thu, 26 Mar 2026 18:07:53 -0700 Subject: [PATCH 1/2] fix(light): tag dropdown, code highlight --- apps/sim/components/emcn/components/code/code.tsx | 2 +- .../sim/components/emcn/components/popover/popover.tsx | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/sim/components/emcn/components/code/code.tsx b/apps/sim/components/emcn/components/code/code.tsx index 32382465bd2..ce79127db1a 100644 --- a/apps/sim/components/emcn/components/code/code.tsx +++ b/apps/sim/components/emcn/components/code/code.tsx @@ -452,7 +452,7 @@ export function getCodeEditorProps(options?: { 'border-none bg-transparent outline-none resize-none', 'focus:outline-none focus:ring-0', // Selection styling - light and dark modes - 'selection:bg-[var(--selection-bg)] selection:text-[var(--bg)]', + 'selection:bg-[var(--selection-bg)] selection:text-[var(--text-primary)]', 'dark:selection:bg-[var(--selection-dark)] dark:selection:text-white', // Caret color - adapts to mode 'caret-[var(--text-primary)] dark:caret-white', diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx index 9209a1c8be7..d7181ae0f83 100644 --- a/apps/sim/components/emcn/components/popover/popover.tsx +++ b/apps/sim/components/emcn/components/popover/popover.tsx @@ -98,8 +98,8 @@ const STYLES = { search: 'text-[var(--text-muted-inverse)] dark:text-[var(--text-muted)]', searchInput: 'text-white placeholder:text-[var(--text-muted-inverse)] dark:text-[var(--text-primary)] dark:placeholder:text-[var(--text-muted)]', - content: 'bg-[var(--bg)] text-white dark:bg-[var(--surface-3)] dark:text-foreground', - divider: 'border-[var(--surface-5)] dark:border-[var(--border-1)]', + content: 'bg-[#1b1b1b] text-white dark:bg-[var(--surface-3)] dark:text-foreground', + divider: 'border-[#363636] dark:border-[var(--border-1)]', }, } satisfies Record< PopoverColorScheme, @@ -126,9 +126,9 @@ const STYLES = { }, inverted: { active: - 'bg-[var(--surface-5)] text-white [&_svg]:text-white dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]', + 'bg-[#363636] text-white [&_svg]:text-white dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]', hover: - 'hover-hover:bg-[var(--surface-5)] hover-hover:text-white hover-hover:[&_svg]:text-white dark:hover-hover:bg-[var(--surface-5)] dark:hover-hover:text-[var(--text-primary)] dark:hover-hover:[&_svg]:text-[var(--text-primary)]', + 'hover-hover:bg-[#363636] hover-hover:text-white hover-hover:[&_svg]:text-white dark:hover-hover:bg-[var(--surface-5)] dark:hover-hover:text-[var(--text-primary)] dark:hover-hover:[&_svg]:text-[var(--text-primary)]', }, }, } as const @@ -650,7 +650,7 @@ const PopoverContent = React.forwardRef< arrowClassName ?? cn( colorScheme === 'inverted' - ? 'fill-[#242424] stroke-[var(--surface-5)] dark:fill-[var(--surface-3)] dark:stroke-[var(--border-1)]' + ? 'fill-[#1b1b1b] stroke-[#363636] dark:fill-[var(--surface-3)] dark:stroke-[var(--border-1)]' : 'fill-[var(--surface-3)] stroke-[var(--border-1)] dark:fill-[var(--surface-3)]' ) } From c30ee013a8bc94c744236345345f1574edf084d7 Mon Sep 17 00:00:00 2001 From: Vikhyath Mondreti Date: Thu, 26 Mar 2026 18:14:27 -0700 Subject: [PATCH 2/2] remove more hardcoded vals --- apps/sim/app/_styles/globals.css | 16 ++++++++++++++++ .../emcn/components/popover/popover.tsx | 10 +++++----- .../emcn/components/tooltip/tooltip.tsx | 4 ++-- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 4678ace8d14..336dd9587af 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -216,6 +216,14 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn { --selection: #1a5cf6; --warning: #ea580c; + /* Inverted surface (dark chrome on light page, e.g. tag dropdown) */ + --surface-inverted: #1b1b1b; + --surface-inverted-hover: #363636; + --border-inverted: #363636; + + /* Tooltip (true inversion: always opposite of page) */ + --tooltip-bg: #1b1b1b; + /* Utility */ --white: #ffffff; @@ -362,6 +370,14 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn { --selection: #4b83f7; --warning: #ff6600; + /* Inverted surface (in dark mode, falls back to standard surfaces) */ + --surface-inverted: #242424; + --surface-inverted-hover: #363636; + --border-inverted: #3d3d3d; + + /* Tooltip (true inversion: always opposite of page) */ + --tooltip-bg: #fdfdfd; + /* Utility */ --white: #ffffff; diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx index d7181ae0f83..9ebfad9f67d 100644 --- a/apps/sim/components/emcn/components/popover/popover.tsx +++ b/apps/sim/components/emcn/components/popover/popover.tsx @@ -98,8 +98,8 @@ const STYLES = { search: 'text-[var(--text-muted-inverse)] dark:text-[var(--text-muted)]', searchInput: 'text-white placeholder:text-[var(--text-muted-inverse)] dark:text-[var(--text-primary)] dark:placeholder:text-[var(--text-muted)]', - content: 'bg-[#1b1b1b] text-white dark:bg-[var(--surface-3)] dark:text-foreground', - divider: 'border-[#363636] dark:border-[var(--border-1)]', + content: 'bg-[var(--surface-inverted)] text-white dark:text-foreground', + divider: 'border-[var(--border-inverted)]', }, } satisfies Record< PopoverColorScheme, @@ -126,9 +126,9 @@ const STYLES = { }, inverted: { active: - 'bg-[#363636] text-white [&_svg]:text-white dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]', + 'bg-[var(--surface-inverted-hover)] text-white [&_svg]:text-white dark:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]', hover: - 'hover-hover:bg-[#363636] hover-hover:text-white hover-hover:[&_svg]:text-white dark:hover-hover:bg-[var(--surface-5)] dark:hover-hover:text-[var(--text-primary)] dark:hover-hover:[&_svg]:text-[var(--text-primary)]', + 'hover-hover:bg-[var(--surface-inverted-hover)] hover-hover:text-white hover-hover:[&_svg]:text-white dark:hover-hover:text-[var(--text-primary)] dark:hover-hover:[&_svg]:text-[var(--text-primary)]', }, }, } as const @@ -650,7 +650,7 @@ const PopoverContent = React.forwardRef< arrowClassName ?? cn( colorScheme === 'inverted' - ? 'fill-[#1b1b1b] stroke-[#363636] dark:fill-[var(--surface-3)] dark:stroke-[var(--border-1)]' + ? 'fill-[var(--surface-inverted)] stroke-[var(--border-inverted)]' : 'fill-[var(--surface-3)] stroke-[var(--border-1)] dark:fill-[var(--surface-3)]' ) } diff --git a/apps/sim/components/emcn/components/tooltip/tooltip.tsx b/apps/sim/components/emcn/components/tooltip/tooltip.tsx index 75ca1b7acbc..fb4608c9584 100644 --- a/apps/sim/components/emcn/components/tooltip/tooltip.tsx +++ b/apps/sim/components/emcn/components/tooltip/tooltip.tsx @@ -50,13 +50,13 @@ const Content = React.forwardRef< collisionPadding={8} avoidCollisions={true} className={cn( - 'z-[var(--z-tooltip)] max-w-[260px] rounded-[4px] bg-[#1b1b1b] px-2 py-[3.5px] font-base text-white text-xs shadow-sm dark:bg-[#fdfdfd] dark:text-black', + 'z-[var(--z-tooltip)] max-w-[260px] rounded-[4px] bg-[var(--tooltip-bg)] px-2 py-[3.5px] font-base text-white text-xs shadow-sm dark:text-black', className )} {...props} > {props.children} - + ))