From 93ff06b40fab8f399325d148aeaea95ceb652cd7 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 10 Aug 2026 15:42:06 -0700
Subject: [PATCH] fix(emcn): drop the brand highlight from popover menus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Context menus opted into a palette of their own — `variant='secondary'` for a
brand-blue row highlight and `colorScheme='inverted'` for a dark card — so the
canvas, block, toolbar, terminal, sidebar, and preview menus looked nothing like
the menus everywhere else in the product.

Removes both overrides so they inherit the same surface, border, and
`--surface-active` highlight the terminal's overflow menu already uses, and drops
the brand state from the Popover itself along with the `variant` prop that only
ever selected it. One fewer way to style a menu.
---
 apps/sim/app/playground/page.tsx              |  6 +--
 .../components/block-menu/block-menu.tsx      |  8 +---
 .../components/canvas-menu/canvas-menu.tsx    |  8 +---
 .../w/[workflowId]/components/chat/chat.tsx   |  2 +-
 .../toolbar-item-context-menu.tsx             |  8 +---
 .../log-row-context-menu.tsx                  |  8 +---
 .../components/output-context-menu.tsx        |  8 +---
 .../workflow-controls/workflow-controls.tsx   |  9 +---
 .../preview-context-menu.tsx                  |  8 +---
 .../empty-area-context-menu.tsx               |  8 +---
 .../emcn/src/components/popover/popover.tsx   | 45 ++++---------------
 11 files changed, 20 insertions(+), 98 deletions(-)

diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index 22b78338769..ddee87cff6f 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -868,10 +868,10 @@ export default function PlaygroundPage() {
                   </PopoverContent>
                 </Popover>
               </VariantRow>
-              <VariantRow label='secondary variant'>
-                <Popover variant='secondary'>
+              <VariantRow label='inverted color scheme'>
+                <Popover colorScheme='inverted'>
                   <PopoverTrigger asChild>
-                    <Button variant='secondary'>Secondary Popover</Button>
+                    <Button variant='secondary'>Inverted Popover</Button>
                   </PopoverTrigger>
                   <PopoverContent>
                     <PopoverItem>Item 1</PopoverItem>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx
index 6060a2a57a4..ec8d55e46a0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/block-menu/block-menu.tsx
@@ -130,13 +130,7 @@ export function BlockMenu({
   }
 
   return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
+    <Popover open={isOpen} onOpenChange={(open) => !open && onClose()} size='sm'>
       <PopoverAnchor
         style={{
           position: 'fixed',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/canvas-menu/canvas-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/canvas-menu/canvas-menu.tsx
index a4cbe515e0c..ca1f10e1818 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/canvas-menu/canvas-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/canvas-menu/canvas-menu.tsx
@@ -70,13 +70,7 @@ export function CanvasMenu({
   hasBlocks = false,
 }: CanvasMenuProps) {
   return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
+    <Popover open={isOpen} onOpenChange={(open) => !open && onClose()} size='sm'>
       <PopoverAnchor
         style={{
           position: 'fixed',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index 58214dd8dcb..51a52dae612 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -947,7 +947,7 @@ export function Chat() {
 
         <div className='flex flex-shrink-0 items-center gap-2'>
           {/* More menu with actions */}
-          <Popover variant='default' size='sm' open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
+          <Popover size='sm' open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
             <PopoverTrigger asChild>
               <Button
                 variant='ghost'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/toolbar-item-context-menu/toolbar-item-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/toolbar-item-context-menu/toolbar-item-context-menu.tsx
index 02411222deb..4dd7476f942 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/toolbar-item-context-menu/toolbar-item-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/toolbar-item-context-menu/toolbar-item-context-menu.tsx
@@ -47,13 +47,7 @@ export function ToolbarItemContextMenu({
   showViewDocumentation = false,
 }: ToolbarItemContextMenuProps) {
   return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
+    <Popover open={isOpen} onOpenChange={(open) => !open && onClose()} size='sm'>
       <PopoverAnchor
         style={{
           position: 'fixed',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/log-row-context-menu/log-row-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/log-row-context-menu/log-row-context-menu.tsx
index 43f265242ed..f5b94af5817 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/log-row-context-menu/log-row-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/log-row-context-menu/log-row-context-menu.tsx
@@ -47,13 +47,7 @@ export const LogRowContextMenu = memo(function LogRowContextMenu({
   const isStatusFiltered = entry ? filters.statuses.has(entryStatus) : false
 
   return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
+    <Popover open={isOpen} onOpenChange={(open) => !open && onClose()} size='sm'>
       <PopoverAnchor
         style={{
           position: 'fixed',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/output-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/output-context-menu.tsx
index 429ebf253e4..8f6fa8849c6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/output-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/output-context-menu.tsx
@@ -44,13 +44,7 @@ export const OutputContextMenu = memo(function OutputContextMenu({
   hasSelection,
 }: OutputContextMenuProps) {
   return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
+    <Popover open={isOpen} onOpenChange={(open) => !open && onClose()} size='sm'>
       <PopoverAnchor
         style={{
           position: 'fixed',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
index c57b08ea2ff..a593180796f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -93,12 +93,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
         onContextMenu={handleContextMenu}
       >
         {/* Canvas Mode Selector */}
-        <Popover
-          open={isCanvasModeOpen}
-          onOpenChange={setIsCanvasModeOpen}
-          variant='secondary'
-          size='sm'
-        >
+        <Popover open={isCanvasModeOpen} onOpenChange={setIsCanvasModeOpen} size='sm'>
           <Tooltip.Root>
             <PopoverTrigger asChild>
               <div className='flex cursor-pointer items-center gap-1'>
@@ -197,9 +192,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
       <Popover
         open={contextMenu !== null}
         onOpenChange={(open) => !open && setContextMenu(null)}
-        variant='secondary'
         size='sm'
-        colorScheme='inverted'
       >
         <PopoverAnchor
           style={{
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu/preview-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu/preview-context-menu.tsx
index 5ff50058b1a..86267287fc6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu/preview-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu/preview-context-menu.tsx
@@ -36,13 +36,7 @@ export function PreviewContextMenu({
   if (typeof document === 'undefined') return null
 
   return createPortal(
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
+    <Popover open={isOpen} onOpenChange={(open) => !open && onClose()} size='sm'>
       <PopoverAnchor
         style={{
           position: 'fixed',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/empty-area-context-menu/empty-area-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/empty-area-context-menu/empty-area-context-menu.tsx
index 2bf3de56327..b1eba49bdbd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/empty-area-context-menu/empty-area-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/empty-area-context-menu/empty-area-context-menu.tsx
@@ -52,13 +52,7 @@ export function EmptyAreaContextMenu({
   disableCreateFolder = false,
 }: EmptyAreaContextMenuProps) {
   return (
-    <Popover
-      open={isOpen}
-      onOpenChange={(open) => !open && onClose()}
-      variant='secondary'
-      size='sm'
-      colorScheme='inverted'
-    >
+    <Popover open={isOpen} onOpenChange={(open) => !open && onClose()} size='sm'>
       <PopoverAnchor
         style={{
           position: 'fixed',
diff --git a/packages/emcn/src/components/popover/popover.tsx b/packages/emcn/src/components/popover/popover.tsx
index 0cca2b5c73d..f3406494c0e 100644
--- a/packages/emcn/src/components/popover/popover.tsx
+++ b/packages/emcn/src/components/popover/popover.tsx
@@ -58,7 +58,6 @@ import { cn } from '../../lib/cn'
 
 type PopoverSize = 'sm' | 'md'
 type PopoverColorScheme = 'default' | 'inverted'
-type PopoverVariant = 'default' | 'secondary'
 
 /**
  * Style constants for popover components.
@@ -113,17 +112,12 @@ const STYLES = {
     }
   >,
 
-  /** Interactive state styles: default, secondary (brand), inverted (dark bg in light mode) */
+  /** Interactive state styles: default, and inverted (dark bg in light mode) */
   states: {
     default: {
       active: 'bg-[var(--surface-active)]',
       hover: 'hover-hover:bg-[var(--surface-active)]',
     },
-    secondary: {
-      active: 'bg-[var(--brand-secondary)] text-white [&_svg]:text-white',
-      hover:
-        'hover-hover:bg-[var(--brand-secondary)] hover-hover:text-white hover-hover:[&_svg]:text-white',
-    },
     inverted: {
       active:
         'bg-[var(--surface-inverted-hover)] text-white [&_svg]:text-white dark:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]',
@@ -133,21 +127,9 @@ const STYLES = {
   },
 } as const
 
-/**
- * Gets the active/hover classes for a popover item.
- * Uses variant for secondary, otherwise colorScheme determines default vs inverted.
- */
-function getItemStateClasses(
-  variant: PopoverVariant,
-  colorScheme: PopoverColorScheme,
-  isActive: boolean
-): string {
+/** Gets the active/hover classes for a popover item, keyed by colour scheme. */
+function getItemStateClasses(colorScheme: PopoverColorScheme, isActive: boolean): string {
   const state = isActive ? 'active' : 'hover'
-
-  if (variant === 'secondary') {
-    return STYLES.states.secondary[state]
-  }
-
   return colorScheme === 'inverted' ? STYLES.states.inverted[state] : STYLES.states.default[state]
 }
 
@@ -163,7 +145,6 @@ interface PopoverContextValue {
   isInFolder: boolean
   folderTitle: string | null
   onFolderSelect: (() => void) | null
-  variant: PopoverVariant
   size: PopoverSize
   colorScheme: PopoverColorScheme
   searchQuery: string
@@ -196,11 +177,6 @@ const usePopoverContext = () => {
 }
 
 export interface PopoverProps extends PopoverPrimitive.PopoverProps {
-  /**
-   * Visual variant of the popover
-   * @default 'default'
-   */
-  variant?: PopoverVariant
   /**
    * Size variant of the popover
    * - sm: 11px text, compact spacing (for logs, notifications, context menus)
@@ -222,7 +198,6 @@ export interface PopoverProps extends PopoverPrimitive.PopoverProps {
  */
 const Popover: React.FC<PopoverProps> = ({
   children,
-  variant = 'default',
   size = 'md',
   colorScheme = 'default',
   open,
@@ -312,7 +287,6 @@ const Popover: React.FC<PopoverProps> = ({
       isInFolder: currentFolder !== null,
       folderTitle,
       onFolderSelect,
-      variant,
       size,
       colorScheme,
       searchQuery,
@@ -333,7 +307,6 @@ const Popover: React.FC<PopoverProps> = ({
       currentFolder,
       folderTitle,
       onFolderSelect,
-      variant,
       size,
       colorScheme,
       searchQuery,
@@ -732,7 +705,6 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
     ref
   ) => {
     const context = React.useContext(PopoverContext)
-    const variant = context?.variant || 'default'
     const size = context?.size || 'md'
     const colorScheme = context?.colorScheme || 'default'
     const itemRef = React.useRef<HTMLDivElement>(null)
@@ -794,7 +766,7 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
           STYLES.itemBase,
           STYLES.colorScheme[colorScheme].text,
           STYLES.size[size].item,
-          getItemStateClasses(variant, colorScheme, !!isActive),
+          getItemStateClasses(colorScheme, !!isActive),
           suppressHover && 'hover-hover:!bg-transparent',
           disabled && 'pointer-events-none cursor-not-allowed opacity-50',
           className
@@ -901,7 +873,6 @@ const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
       openFolder,
       currentFolder,
       isInFolder,
-      variant,
       size,
       colorScheme,
       lastHoveredItem,
@@ -991,7 +962,7 @@ const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
             STYLES.itemBase,
             STYLES.colorScheme[colorScheme].text,
             STYLES.size[size].item,
-            getItemStateClasses(variant, colorScheme, isActive || isHoverOpen),
+            getItemStateClasses(colorScheme, isActive || isHoverOpen),
             suppressHover && 'hover-hover:!bg-transparent',
             className
           )}
@@ -1054,7 +1025,7 @@ interface PopoverBackButtonProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 const PopoverBackButton = React.forwardRef<HTMLDivElement, PopoverBackButtonProps>(
   ({ className, folderTitleRef, folderTitleActive, onFolderTitleMouseEnter, ...props }, ref) => {
-    const { isInFolder, closeFolder, folderTitle, onFolderSelect, variant, size, colorScheme } =
+    const { isInFolder, closeFolder, folderTitle, onFolderSelect, size, colorScheme } =
       usePopoverContext()
 
     if (!isInFolder) return null
@@ -1068,7 +1039,7 @@ const PopoverBackButton = React.forwardRef<HTMLDivElement, PopoverBackButtonProp
             STYLES.itemBase,
             STYLES.colorScheme[colorScheme].text,
             STYLES.size[size].item,
-            getItemStateClasses(variant, colorScheme, false),
+            getItemStateClasses(colorScheme, false),
             className
           )}
           role='button'
@@ -1094,7 +1065,7 @@ const PopoverBackButton = React.forwardRef<HTMLDivElement, PopoverBackButtonProp
               STYLES.itemBase,
               STYLES.colorScheme[colorScheme].text,
               STYLES.size[size].item,
-              getItemStateClasses(variant, colorScheme, !!folderTitleActive),
+              getItemStateClasses(colorScheme, !!folderTitleActive),
               'peer-hover:!bg-transparent'
             )}
             role='button'