adjust shadow of BottomSheet and Menu

src/material/BottomSheet.module.css

@@ -18,16 +18,9 @@
   contain: strict;
   contain-intrinsic-size: 100% 95%;
 
-  &::backdrop {
-    transition-property: background-color, opacity;
-    transition-duration: 120ms;
-    transition-timing-function: var(--tutu-anim-curve-std);
-    transition-behavior: allow-discrete;
-  }
 
-  &[open]::backdrop {
+  &::backdrop {
-    background-color: black;
+    background: none;
-    opacity: 0.5;
   }
 
   box-shadow: var(--tutu-shadow-e16);
@@ -67,11 +60,6 @@
     overflow: hidden;
     will-change: width, height, top, left;
 
-    &::backdrop {
-      opacity: 0;
-      background-color: transparent;
-    }
-
     & * {
       overflow: hidden;
     }

src/material/Menu.css

@@ -0,0 +1,14 @@
+.Menu {
+  position: fixed;
+  border: 1px solid var(--tutu-color-surface-d);
+  border-radius: 2px;
+  padding: 0;
+  max-width: 560px;
+  width: max-content;
+  box-shadow: var(--tutu-shadow-e8);
+  contain: content;
+}
+
+dialog.Menu::backdrop {
+  background: none;
+}

src/material/Menu.tsx

@@ -7,6 +7,7 @@ import {
   type ParentComponent,
 } from "solid-js";
 import { ANIM_CURVE_STD } from "./theme";
+import "./Menu.css";
 
 type Props = {
   open?: boolean;
@@ -156,17 +157,11 @@ const Menu: ParentComponent<Props> = (props) => {
           e.stopPropagation();
         }
       }}
+      class="Menu"
       style={{
-        position: "fixed",
         left: px(anchorPos().left),
         top: px(anchorPos().top),
-        border: "none",
-        "border-radius": "2px",
-        padding: 0,
-        "max-width": "560px",
-        width: "max-content",
         /* FIXME: the content may be overflow */
-        "box-shadow": "var(--tutu-shadow-e8)",
       }}
     >
       <div

src/material/theme.css

@@ -82,28 +82,40 @@
   --tutu-color-error-on-surface: #d32f2f;
   --tutu-color-inactive-on-surface: #757575;
 
-  --tutu-color-shadow: rgba(0, 0, 0, 0.15);
+  --tutu-color-shadow: rgba(0, 0, 0, 0.45);
+  --tutu-color-shadow-l1: rgba(0, 0, 0, 0.4);
+  --tutu-color-shadow-l2: rgba(0, 0, 0, 0.35);
 
-  --tutu-shadow-e1: 0px 1px 2px 0px var(--tutu-color-shadow);
   /* Switch */
-  --tutu-shadow-e2: 0px 2px 4px 0px var(--tutu-color-shadow);
+  --tutu-shadow-e1: 0px 1px 2px 0px var(--tutu-color-shadow);
+
   /* (Resting) cards, raised button, quick entry / search bar */
-  --tutu-shadow-e3: 0px 3px 6px 0px var(--tutu-color-shadow);
+  --tutu-shadow-e2: 0px 2px 4px 0px var(--tutu-color-shadow);
+
   /* Refresh indicator, quick entry / search bar (scrolled) */
-  --tutu-shadow-e4: 0px 4px 8px 0px var(--tutu-color-shadow);
+  --tutu-shadow-e3: 0px 3px 6px 0px var(--tutu-color-shadow);
+
   /* App bar */
-  --tutu-shadow-e6: 0px 6px 12px 0px var(--tutu-color-shadow);
+  --tutu-shadow-e4: 0px 4px 8px 0px var(--tutu-color-shadow);
+
   /* Snack bar, FAB (resting) */
-  --tutu-shadow-e8: 0px 8px 16px 0px var(--tutu-color-shadow);
+  --tutu-shadow-e6: 0px 6px 12px 0px var(--tutu-color-shadow);
+
   /* Menu, (picked-up) cards, (pressed) raise button */
-  --tutu-shadow-e9: 0px 9px 18px 0px var(--tutu-color-shadow);
+  --tutu-shadow-e8: 0px 8px 16px 0px var(--tutu-color-shadow);
+
   /* Submenu (+1dp for each submenu) */
-  --tutu-shadow-e12: 0px 12px 24px 0px var(--tutu-color-shadow);
+  --tutu-shadow-e9: 0px 9px 18px 0px var(--tutu-color-shadow);
+
   /* (pressed) FAB */
-  --tutu-shadow-e16: 0px 16px 32px 0px var(--tutu-color-shadow);
+  --tutu-shadow-e12: 0px 12px 24px 0px var(--tutu-color-shadow-l1);
+
   /* Nav drawer, right drawer, modal bottom sheet */
-  --tutu-shadow-e24: 0px 24px 48px 0px var(--tutu-color-shadow);
+  --tutu-shadow-e16: 0px 16px 32px 0px var(--tutu-color-shadow-l1);
+
   /* Dialog, picker */
+  --tutu-shadow-e24: 0px 24px 48px 0px var(--tutu-color-shadow-l2);
+
 
   --tutu-anim-curve-std: cubic-bezier(0.4, 0, 0.2, 1);
   --tutu-anim-curve-deceleration: cubic-bezier(0, 0, 0.2, 1);