refactor(emcn): unify overlay action hover styling

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx

@@ -1239,7 +1239,6 @@ function PreviewEditorContent({
                           <OverlayActionButton
                             aria-label={copiedSection === 'input' ? 'Copied' : 'Copy'}
                             type='button'
-                            surface='uniform'
                             onClick={(e) => {
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.input), 'input')
@@ -1261,7 +1260,6 @@ function PreviewEditorContent({
                           <OverlayActionButton
                             aria-label='Search'
                             type='button'
-                            surface='uniform'
                             onClick={(e) => {
                               e.stopPropagation()
                               activateSearch()
@@ -1311,7 +1309,6 @@ function PreviewEditorContent({
                           <OverlayActionButton
                             aria-label={copiedSection === 'output' ? 'Copied' : 'Copy'}
                             type='button'
-                            surface='uniform'
                             onClick={(e) => {
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.output), 'output')
@@ -1333,7 +1330,6 @@ function PreviewEditorContent({
                           <OverlayActionButton
                             aria-label='Search'
                             type='button'
-                            surface='uniform'
                             onClick={(e) => {
                               e.stopPropagation()
                               activateSearch()

packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx

@@ -24,7 +24,7 @@ afterEach(() => {
   vi.useRealTimers()
 })
 
-/** Pre-migration recipes from log details, the deployment preview and workflow previews. */
+/** Pre-migration recipes from log details and the deployment preview. */
 const PREVIOUS = [
   {
     name: 'default 20px adaptive action',
@@ -40,13 +40,6 @@ const PREVIOUS = [
     className:
       'size-[28px] cursor-pointer bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)]',
   },
-  {
-    name: '20px uniform action',
-    props: { surface: 'uniform' },
-    variant: 'ghost',
-    className:
-      'size-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-4)]',
-  },
 ] as const
 
 describe('OverlayActionButton', () => {

packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx

@@ -5,53 +5,43 @@ import { Button, type ButtonProps } from '../button/button'
 
 /** Transparent, bordered icon action over code or preview content. */
 export const overlayActionButtonVariants = cva(
-  'cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-xs',
+  'cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-5)] hover-hover:border-[var(--border)]',
   {
     variants: {
       size: {
         sm: 'size-[20px]',
         md: 'size-[28px]',
       },
-      surface: {
-        adaptive:
-          'hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-5)] hover-hover:border-[var(--border)]',
-        uniform: 'hover-hover:bg-[var(--surface-4)]',
-      },
     },
-    defaultVariants: { size: 'sm', surface: 'adaptive' },
+    defaultVariants: { size: 'sm' },
   }
 )
 
 export interface OverlayActionButtonProps
-  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding'> {
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
   /** Accessible name for the icon action; tooltip content is supplied separately. */
   'aria-label': string
   /** 20px by default; `md` provides the 28px preview action. */
   size?: NonNullable<VariantProps<typeof overlayActionButtonVariants>['size']>
-  /**
-   * `adaptive` uses surface-3 on hover in light mode and surface-5 in dark mode.
-   * `uniform` uses surface-4 on hover in both themes.
-   * @default 'adaptive'
-   */
-  surface?: NonNullable<VariantProps<typeof overlayActionButtonVariants>['surface']>
 }
 
 /**
  * Icon action floating over content. Owns geometry, border, blur and hover treatment;
  * callers supply positioning, icons, labels and command behavior.
+ * Hover uses surface-3 in light mode and surface-5 in dark mode.
  * Forwards the native button ref and props for tooltip `asChild` composition.
  * Native form behavior is inherited from Button; pass `type` when it must be explicit.
  *
  * @example <OverlayActionButton aria-label='Copy' type='button' onClick={onCopy}><Clipboard className='size-[10px]' /></OverlayActionButton>
  */
 export const OverlayActionButton = forwardRef<HTMLButtonElement, OverlayActionButtonProps>(
-  ({ size, surface, className, ...props }, ref) => (
+  ({ size, className, ...props }, ref) => (
     <Button
       {...props}
       ref={ref}
       variant='ghost'
       size='md'
-      className={cn(overlayActionButtonVariants({ size, surface }), className)}
+      className={cn(overlayActionButtonVariants({ size }), className)}
     />
   )
 )