fix(web): restore solid overlay surfaces for pickers

Author: pallyoung

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

@@ -15,5 +15,5 @@
   padding: var(--inset-panel);
   border: 1px solid var(--surface-overlay-border);
   border-radius: var(--radius-overlay);
-  background: var(--material-overlay);
+  background: var(--surface-overlay-bg);
 }

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

@@ -36,7 +36,7 @@
   flex-direction: column;
   gap: var(--sp-1);
   padding: var(--sp-1);
-  background: var(--material-overlay);
+  background: var(--surface-overlay-bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);

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

@@ -626,6 +626,9 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(getLastRuleBlockFrom(actionMenuStyles, ".itemDanger:hover")).toContain(
       "background: var(--menu-danger-hover-bg)"
     );
+    expect(getLastRuleBlockFrom(popoverStyles, ".content")).toContain(
+      "background: var(--surface-overlay-bg)"
+    );
 
     expect(getLastRuleBlockFrom(datetimePickerStyles, ".calendar")).toContain(
       "border: 1px dashed var(--border-default)"
@@ -646,7 +649,7 @@ describe("components.css theme-sensitive surfaces", () => {
       "border-bottom: 2px solid var(--state-selected-border)"
     );
     expect(getLastRuleBlockFrom(selectStylesheet, ".listbox")).toContain(
-      "background: var(--material-overlay)"
+      "background: var(--surface-overlay-bg)"
     );
     expect(getLastRuleBlockFrom(selectStylesheet, ".optionSelected")).toContain(
       "background: var(--state-hover-bg)"