fix(web): unify overlay backdrops on shared token

Author: pallyoung

packages/web/src/components/ui/drawer/index.module.css

@@ -6,7 +6,7 @@
   display: flex;
   justify-content: flex-end;
   padding: var(--sp-4);
-  background: var(--surface-overlay-backdrop);
+  background: var(--overlay-backdrop);
 }
 
 .panel,

packages/web/src/components/ui/local-overlay/index.module.css

@@ -7,7 +7,7 @@
   align-items: center;
   justify-content: center;
   padding: var(--sp-4);
-  background: var(--surface-overlay-backdrop);
+  background: var(--overlay-backdrop);
   pointer-events: none;
 }
 

packages/web/src/components/ui/modal/index.module.css

@@ -7,7 +7,7 @@
   align-items: center;
   justify-content: center;
   padding: var(--sp-4);
-  background: var(--surface-overlay-backdrop);
+  background: var(--overlay-backdrop);
 }
 
 .card,

packages/web/src/styles/components.css

@@ -4457,7 +4457,7 @@ body.is-resizing-panels * {
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: var(--surface-overlay-backdrop);
+  background: var(--overlay-backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9936,7 +9936,7 @@ textarea.input {
   .mobile-drawer-layer__backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(3, 8, 12, 0.62);
+    background: var(--overlay-backdrop);
     opacity: 0;
     animation: mobile-shell-backdrop-enter var(--mobile-shell-motion-enter-duration) var(--ease-out)
       forwards;

packages/web/src/styles/components.theme.test.ts

@@ -654,7 +654,7 @@ describe("components.css theme-sensitive surfaces", () => {
       "background: var(--state-error-bg)"
     );
 
-    expect(modalOverlay).toContain("background: var(--surface-overlay-backdrop)");
+    expect(modalOverlay).toContain("background: var(--overlay-backdrop)");
     expect(
       getRuleBlocksFrom(modalStyles, ".card").some((block) =>
         block.includes("border: 1px solid var(--surface-overlay-border)")
@@ -676,7 +676,7 @@ describe("components.css theme-sensitive surfaces", () => {
       )
     ).toBe(true);
 
-    expect(drawerBackdrop).toContain("background: var(--surface-overlay-backdrop)");
+    expect(drawerBackdrop).toContain("background: var(--overlay-backdrop)");
     expect(
       getRuleBlocksFrom(drawerStylesheet, ".panel").some((block) =>
         block.includes("border: 1px solid var(--surface-overlay-border)")
@@ -698,7 +698,7 @@ describe("components.css theme-sensitive surfaces", () => {
       )
     ).toBe(true);
 
-    expect(localOverlay).toContain("background: var(--surface-overlay-backdrop)");
+    expect(localOverlay).toContain("background: var(--overlay-backdrop)");
     expect(localOverlayCard).toContain("border: 1px solid var(--surface-overlay-border)");
     expect(localOverlayCard).toContain("border-radius: var(--radius-local-overlay)");
     expect(localOverlayCard).toContain("background: var(--surface-overlay-bg)");
@@ -1041,6 +1041,14 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(sheetActions).toContain("gap: var(--gap-compact)");
   });
 
+  it("keeps mobile sheet and drawer backdrops on the shared overlay backdrop token", () => {
+    const mobileSheetBackdrop = getLastRuleBlock(".mobile-sheet-layer__backdrop");
+    const mobileDrawerBackdrop = getLastRuleBlock(".mobile-drawer-layer__backdrop");
+
+    expect(mobileSheetBackdrop).toContain("background: var(--overlay-backdrop)");
+    expect(mobileDrawerBackdrop).toContain("background: var(--overlay-backdrop)");
+  });
+
   it("keeps worktree state chips and mobile tabs on shared state and layer tokens", () => {
     const cleanChip = getLastRuleBlock(".worktree-chip-status.worktree-clean");
     const dirtyChip = getLastRuleBlock(".worktree-chip-status.worktree-dirty");