fix(ui): drop the overlay shadow class that never rendered before v4 (#7460)

Author: waleedlatif1

apps/sim/app/(landing)/components/hero/components/hero-visual/hero-visual.tsx

@@ -1081,7 +1081,7 @@ export function HeroVisual() {
                   className={cn(
                     'absolute transform-gpu transition-[opacity,transform,width,height,top,left] will-change-transform [transition-duration:520ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
                     showKbShell &&
-                      'overflow-hidden rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)]'
+                      'overflow-hidden rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px]'
                   )}
                   style={{
                     left: showKbShell

apps/sim/app/(landing)/components/hero/components/hero-visual/stage-kb.tsx

@@ -175,7 +175,7 @@ export function KnowledgeBasePanel({
   return (
     <div
       className={cn(
-        'w-full max-w-[420px] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)]',
+        'w-full max-w-[420px] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px]',
         'animate-hero-modal-in motion-reduce:animate-none'
       )}
     >

apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/nav-menu-chip.tsx

@@ -77,7 +77,7 @@ export function NavMenuChip({ menu }: NavMenuChipProps) {
       </button>
 
       <div className={cn(PANEL_BASE, !closed && PANEL_REVEAL)}>
-        <div className='w-[840px] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)]'>
+        <div className='w-[840px] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px]'>
           <div className='rounded-lg border border-[var(--border-1)] bg-[var(--bg)] p-2'>
             <div className='grid grid-cols-3 gap-1' role='group' aria-label={label}>
               {items.map((item) => (

apps/sim/app/workspace/[workspaceId]/integrations/components/integrations-showcase/integrations-showcase.tsx

@@ -101,10 +101,7 @@ export function IntegrationTile({ blockType, icon: Icon, framed = false }: Integ
  */
 export function IntegrationsShowcase() {
   return (
-    <div
-      aria-hidden
-      className='relative h-[144px] w-full overflow-hidden rounded-xl shadow-[var(--shadow-overlay)]'
-    >
+    <div aria-hidden className='relative h-[144px] w-full overflow-hidden rounded-xl'>
       <div
         className='absolute inset-0 bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
         style={{

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx

@@ -1317,7 +1317,7 @@ function SearchModalContent({
         aria-hidden={!visuallyOpen}
         aria-label='Search'
         className={cn(
-          '-translate-x-1/2 fixed top-[15%] z-[var(--z-modal)] w-[min(500px,calc(100%-32px))] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)] dark:bg-[var(--surface-5)]',
+          '-translate-x-1/2 fixed top-[15%] z-[var(--z-modal)] w-[min(500px,calc(100%-32px))] rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] dark:bg-[var(--surface-5)]',
           visuallyOpen ? 'visible opacity-100' : 'invisible opacity-0'
         )}
         style={{

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.test.tsx

@@ -82,7 +82,6 @@ describe('StatusNotice', () => {
     const notice = container.querySelector('[role="alert"]')
     const action = container.querySelector<HTMLAnchorElement>('a')
     expect(notice?.className).toContain('border-[var(--terminal-status-error-border)]')
-    expect(notice?.className).toContain('shadow-[var(--shadow-overlay)]')
     expect(notice?.className).toContain(
       '[--surface-hover:color-mix(in_srgb,var(--text-error)_8%,transparent)]'
     )

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.tsx

@@ -18,7 +18,7 @@ function StatusAlert() {
   return (
     <div
       role='alert'
-      className='flex w-full flex-col gap-2 rounded-xl border border-[var(--terminal-status-error-border)] bg-[var(--terminal-status-error-bg)] p-2 shadow-[var(--shadow-overlay)] [--surface-hover:color-mix(in_srgb,var(--text-error)_8%,transparent)]'
+      className='flex w-full flex-col gap-2 rounded-xl border border-[var(--terminal-status-error-border)] bg-[var(--terminal-status-error-bg)] p-2 [--surface-hover:color-mix(in_srgb,var(--text-error)_8%,transparent)]'
     >
       <div className='flex min-w-0 items-center gap-1.5'>
         <CircleAlert className='size-[16px] shrink-0 text-[var(--text-icon)]' />

packages/emcn/src/components/chip-modal/chip-modal.tsx

@@ -250,7 +250,7 @@ function ChipModal({
       >
         <div
           className={cn(
-            'flex min-h-0 w-full flex-col rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)] dark:bg-[var(--surface-5)]',
+            'flex min-h-0 w-full flex-col rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] dark:bg-[var(--surface-5)]',
             className
           )}
         >

packages/emcn/src/components/toast/toast.tsx

@@ -405,7 +405,7 @@ function ToastItem({ toast: t, geometry, reduceMotion, onDismiss, onMeasure }: T
         width: TOAST_WIDTH,
         borderRadius: cornerRadius,
       }}
-      className='pointer-events-auto absolute right-0 bottom-0 m-0 overflow-hidden border border-[var(--border-1)] bg-[var(--bg)] shadow-[var(--shadow-overlay)]'
+      className='pointer-events-auto absolute right-0 bottom-0 m-0 overflow-hidden border border-[var(--border-1)] bg-[var(--bg)]'
     >
       <div ref={contentRef} className='flex flex-col gap-2 p-2'>
         <div className='flex items-start gap-2'>