src/material/BottomSheet.module.css

@@ -1,4 +1,7 @@
-.BottomSheet {
+.bottomSheet {
+  composes: surface from "./material.module.css";
+  composes: cardGutSkip from "./cards.module.css";
+  composes: cardNoPad from "./cards.module.css";
   border: none;
   position: fixed;
   left: 50%;
@@ -13,17 +16,24 @@
   max-height: 100dvh;
   height: 95%;
   contain: strict;
-  contain-intrinsic-size: auto 560px auto 95vh;
-
+  contain-intrinsic-size: 100% 95%;
 
   &::backdrop {
-    background: none;
+    transition-property: background-color, opacity;
+    transition-duration: 120ms;
+    transition-timing-function: var(--tutu-anim-curve-std);
+    transition-behavior: allow-discrete;
+  }
+
+  &[open]::backdrop {
+    background-color: black;
+    opacity: 0.5;
   }
 
   box-shadow: var(--tutu-shadow-e16);
 
-  .MuiToolbar-root {
-    >.MuiButtonBase-root {
+  :global(.MuiToolbar-root) {
+    > :global(.MuiButtonBase-root) {
 
       &:first-child {
         margin-left: -0.5em;
@@ -57,6 +67,11 @@
     overflow: hidden;
     will-change: width, height, top, left;
 
+    &::backdrop {
+      opacity: 0;
+      background-color: transparent;
+    }
+
     & * {
       overflow: hidden;
     }
@@ -78,4 +93,4 @@
       }
     }
   }
-}
+}

src/material/BottomSheet.tsx

@@ -7,9 +7,8 @@ import {
   type ParentComponent,
   type ResolvedChildren,
 } from "solid-js";
-import "./BottomSheet.css";
+import styles from "./BottomSheet.module.css";
 import { useHeroSignal } from "../platform/anim";
-import material from "./material.module.css";
 
 export type BottomSheetProps = {
   open?: boolean;
@@ -98,7 +97,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     const srcElement = hero();
     const startRect = srcElement?.getBoundingClientRect();
     if (!startRect) {
-      console.debug("no source element");
+      console.debug("no source element")
     }
     if (startRect) {
       srcElement!.style.visibility = "hidden";
@@ -114,7 +113,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   const animateSlideInFromRight = (element: HTMLElement, reserve?: boolean) => {
     const rect = element.getBoundingClientRect();
     const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
-    element.classList.add("animated");
+    element.classList.add(styles.animated);
     const oldOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const distance = Math.abs(rect.left - window.innerWidth);
@@ -129,7 +128,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       { easing, duration },
     );
     const onAnimationEnd = () => {
-      element.classList.remove("animated");
+      element.classList.remove(styles.animated);
       document.body.style.overflow = oldOverflow;
       animation = undefined;
     };
@@ -144,7 +143,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   ) => {
     const rect = element.getBoundingClientRect();
     const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
-    element.classList.add("animated");
+    element.classList.add(styles.animated);
     const oldOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const distance = Math.abs(rect.top - window.innerHeight);
@@ -159,7 +158,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       { easing, duration },
     );
     const onAnimationEnd = () => {
-      element.classList.remove("animated");
+      element.classList.remove(styles.animated);
       document.body.style.overflow = oldOverflow;
       animation = undefined;
     };
@@ -175,7 +174,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     reserve?: boolean,
   ) => {
     const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
-    element.classList.add("animated");
+    element.classList.add(styles.animated);
     const distance = Math.sqrt(
       Math.pow(Math.abs(startRect.top - endRect.top), 2) +
         Math.pow(Math.abs(startRect.left - startRect.top), 2),
@@ -189,7 +188,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       { easing, duration },
     );
     const onAnimationEnd = () => {
-      element.classList.remove("animated");
+      element.classList.remove(styles.animated);
       animation = undefined;
     };
     animation.addEventListener("finish", onAnimationEnd);
@@ -219,11 +218,9 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   return (
     <dialog
-      class={`BottomSheet ${material.surface}`}
       classList={{
-        ["BottomSheet"]: true,
-        [material.surface]: true,
-        ["bottom"]: props.bottomUp,
+        [styles.bottomSheet]: true,
+        [styles.bottom]: props.bottomUp,
       }}
       onClick={onDialogClick}
       ref={element!}

src/material/Menu.css

@@ -1,14 +0,0 @@
-.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,7 +7,6 @@ import {
   type ParentComponent,
 } from "solid-js";
 import { ANIM_CURVE_STD } from "./theme";
-import "./Menu.css";
 
 type Props = {
   open?: boolean;
@@ -157,11 +156,17 @@ 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,40 +82,28 @@
   --tutu-color-error-on-surface: #d32f2f;
   --tutu-color-inactive-on-surface: #757575;
 
-  --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-color-shadow: rgba(0, 0, 0, 0.15);
 
-  /* Switch */
   --tutu-shadow-e1: 0px 1px 2px 0px var(--tutu-color-shadow);
-
-  /* (Resting) cards, raised button, quick entry / search bar */
+  /* Switch */
   --tutu-shadow-e2: 0px 2px 4px 0px var(--tutu-color-shadow);
-
-  /* Refresh indicator, quick entry / search bar (scrolled) */
+  /* (Resting) cards, raised button, quick entry / search bar */
   --tutu-shadow-e3: 0px 3px 6px 0px var(--tutu-color-shadow);
-
-  /* App bar */
+  /* Refresh indicator, quick entry / search bar (scrolled) */
   --tutu-shadow-e4: 0px 4px 8px 0px var(--tutu-color-shadow);
-
-  /* Snack bar, FAB (resting) */
+  /* App bar */
   --tutu-shadow-e6: 0px 6px 12px 0px var(--tutu-color-shadow);
-
-  /* Menu, (picked-up) cards, (pressed) raise button */
+  /* Snack bar, FAB (resting) */
   --tutu-shadow-e8: 0px 8px 16px 0px var(--tutu-color-shadow);
-
-  /* Submenu (+1dp for each submenu) */
+  /* Menu, (picked-up) cards, (pressed) raise button */
   --tutu-shadow-e9: 0px 9px 18px 0px var(--tutu-color-shadow);
-
+  /* Submenu (+1dp for each submenu) */
+  --tutu-shadow-e12: 0px 12px 24px 0px var(--tutu-color-shadow);
   /* (pressed) FAB */
-  --tutu-shadow-e12: 0px 12px 24px 0px var(--tutu-color-shadow-l1);
-
+  --tutu-shadow-e16: 0px 16px 32px 0px var(--tutu-color-shadow);
   /* Nav drawer, right drawer, modal bottom sheet */
-  --tutu-shadow-e16: 0px 16px 32px 0px var(--tutu-color-shadow-l1);
-
+  --tutu-shadow-e24: 0px 24px 48px 0px var(--tutu-color-shadow);
   /* 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);