BottomSheet: remove module css

src/material/BottomSheet.css

@@ -1,7 +1,4 @@
-.bottomSheet {
-  composes: surface from "./material.module.css";
-  composes: cardGutSkip from "./cards.module.css";
-  composes: cardNoPad from "./cards.module.css";
+.BottomSheet {
   border: none;
   position: fixed;
   left: 50%;
@@ -16,24 +13,17 @@
   max-height: 100dvh;
   height: 95%;
   contain: strict;
-  contain-intrinsic-size: 100% 95%;
+  contain-intrinsic-size: auto 560px auto 95vh;
+
 
   &::backdrop {
-    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;
+    background: none;
   }
 
   box-shadow: var(--tutu-shadow-e16);
 
-  :global(.MuiToolbar-root) {
-    > :global(.MuiButtonBase-root) {
+  .MuiToolbar-root {
+    >.MuiButtonBase-root {
 
       &:first-child {
         margin-left: -0.5em;
@@ -67,11 +57,6 @@
     overflow: hidden;
     will-change: width, height, top, left;
 
-    &::backdrop {
-      opacity: 0;
-      background-color: transparent;
-    }
-
     & * {
       overflow: hidden;
     }
@@ -93,4 +78,4 @@
       }
     }
   }
-}
+}

src/material/BottomSheet.tsx

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

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);