fix(light): tag dropdown, code highlight (#3799)

* fix(light): tag dropdown, code highlight

* remove more hardcoded vals

Author: icecrasher321

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;
 

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',

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-[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-[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-[var(--surface-inverted-hover)] text-white [&_svg]:text-white 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-[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-[#242424] stroke-[var(--surface-5)] 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)]'
                 )
               }

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}
-      <TooltipPrimitive.Arrow className='fill-[var(--bg)] dark:fill-[#fdfdfd]' />
+      <TooltipPrimitive.Arrow className='fill-[var(--tooltip-bg)]' />
     </TooltipPrimitive.Content>
   </TooltipPrimitive.Portal>
 ))