fix: Use the form background behind the fullscreen mobile popup

On phones the popup fills the viewport and iOS Safari paints the status
bar and bottom toolbar from the fixed container's own background, so the
dark scrim shows up as grey bands around the form. Set a CSS custom
property from the form-theme message (as the widget fullscreen modal
already does) and consume it only inside the mobile media query, keeping
the dark scrim on desktop and until the theme arrives.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RkM7Yh51Sqg4iADSZnyJXL

Author: claude

packages/embed/src/css/popup.scss

@@ -34,6 +34,7 @@
 @include mobile {
   .tf-v1-popup {
     @include fullsize;
+    background: var(--tf-popup-background, rgba(0, 0, 0, 0.75));
 
     .tf-v1-iframe-wrapper {
       position: relative;

packages/embed/src/factories/create-popup/create-popup.spec.ts

@@ -41,6 +41,26 @@ describe('create-popup', () => {
         expect(wrapper.style.width).toBe('200px')
         expect(wrapper.style.height).toBe('100px')
       })
+
+      it('should set the popup background from the form theme', () => {
+        const popupElement = container.querySelector('.tf-v1-popup') as HTMLElement
+        const iframe = popupElement.querySelector('iframe') as HTMLIFrameElement
+        const embedId = new URL(iframe.src).searchParams.get('typeform-embed-id')
+
+        window.dispatchEvent(
+          new MessageEvent('message', {
+            data: { type: 'form-theme', embedId: 'other-embed-id', theme: { backgroundColor: 'rgba(0, 0, 255, 0)' } },
+          })
+        )
+        expect(popupElement.style.getPropertyValue('--tf-popup-background')).toBe('')
+
+        window.dispatchEvent(
+          new MessageEvent('message', {
+            data: { type: 'form-theme', embedId, theme: { backgroundColor: 'rgba(255, 200, 0, 0)' } },
+          })
+        )
+        expect(popupElement.style.getPropertyValue('--tf-popup-background')).toBe('rgba(255, 200, 0, 255)')
+      })
     })
 
     describe('#close', () => {

packages/embed/src/factories/create-popup/create-popup.ts

@@ -10,8 +10,10 @@ import {
   invokeWithoutDefault,
   handlePreventReopenOnClose,
   closeIconSvg,
+  changeColorOpacity,
 } from '../../utils'
 import type { RemoveHandler } from '../../utils'
+import { getFormThemeHandler } from '../../utils/create-iframe/get-form-event-handler'
 import { POPUP_SIZE } from '../../constants'
 import { isInPage, isOpen } from '../../utils'
 import { EmbedPopup } from '../../base'
@@ -84,6 +86,16 @@ export const createPopup = (formId: string, userOptions: PopupOptions = {}): Pop
   popup.append(spinner)
   popup.append(wrapper)
 
+  window.addEventListener(
+    'message',
+    getFormThemeHandler(embedId, (data) => {
+      const backgroundColor = data?.theme?.backgroundColor
+      if (backgroundColor) {
+        popup.style.setProperty('--tf-popup-background', changeColorOpacity(backgroundColor))
+      }
+    })
+  )
+
   const container = options.container || document.body
 
   iframe.onload = (event) => {