fix #32: remove rest css modules

src/material/BottomSheet.tsx

@@ -7,7 +7,6 @@ import {
   type ParentComponent,
 } from "solid-js";
 import "./BottomSheet.css";
-import material from "./material.module.css";
 import { ANIM_CURVE_ACELERATION, ANIM_CURVE_DECELERATION } from "./theme";
 import {
   animateSlideInFromRight,
@@ -134,7 +133,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   return (
     <dialog
-      class={`BottomSheet ${material.surface} ${props.class || ""}`}
+      class={`BottomSheet surface ${props.class || ""}`}
       classList={{
         ["bottom"]: props.bottomUp,
       }}

src/material/Button.tsx

@@ -1,5 +1,4 @@
 import { Component, JSX, splitProps } from "solid-js";
-import materialStyles from "./material.module.css";
 import "./typography.css";
 
 /**
@@ -10,13 +9,12 @@ import "./typography.css";
 const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
   props,
 ) => {
-  const [managed, passthough] = splitProps(props, ["class", "type"]);
+  const [managed, passthough] = splitProps(props, [ "type"]);
   const type = () => managed.type ?? "button";
 
   return (
     <button
       type={type()}
-      class={`${materialStyles.button} buttonText ${managed.class || ""}`}
       {...passthough}
     ></button>
   );

src/material/TextField.css

@@ -1,5 +1,7 @@
-.textfield {
-  composes: touchTarget from "material.module.css";
+.TextField {
+  min-width: 44px;
+  min-height: 44px;
+  cursor: pointer;
 
   --border-color: var(--tutu-color-inactive-on-surface);
   --active-border-color: var(--tutu-color-primary);

src/material/TextField.tsx

@@ -6,7 +6,7 @@ import {
   onMount,
   Show,
 } from "solid-js";
-import formStyles from "./form.module.css";
+import "./TextField.css";
 
 export type TextFieldProps = {
   label?: string;
@@ -47,12 +47,12 @@ const TextField: Component<TextFieldProps> = (props) => {
   const inputId = () => props.inputId ?? altInputId;
 
   const fieldClass = () => {
-    const cls = [formStyles.textfield];
+    const cls = ["TextField"];
     if (typeof props.helperText !== "undefined") {
-      cls.push(formStyles.withHelperText);
+      cls.push("withHelperText");
     }
     if (props.error) {
-      cls.push(formStyles.error);
+      cls.push("error");
     }
     return cls.join(" ");
   };
@@ -71,7 +71,7 @@ const TextField: Component<TextFieldProps> = (props) => {
         name={props.name}
       />
       <Show when={typeof props.helperText !== "undefined"}>
-        <span class={formStyles.helperText}>{props.helperText}</span>
+        <span class="helperText">{props.helperText}</span>
       </Show>
     </div>
   );

src/material/cards.css

@@ -0,0 +1,56 @@
+@layer material {
+  .card {
+    --card-pad: 20px;
+    --card-gut: 20px;
+
+    background-color: var(--tutu-color-surface);
+    color: var(--tutu-color-on-surface);
+
+    border-radius: 2px;
+    box-shadow: var(--tutu-shadow-e2);
+    transition: var(--tutu-transition-shadow);
+    overflow: hidden;
+    background-color: var(--tutu-color-surface-l);
+
+    &:focus-within,
+    &:focus-visible {
+      box-shadow: var(--tutu-shadow-e8);
+    }
+
+    &>.card-pad {
+      margin-inline: var(--card-pad);
+    }
+
+    &>.card-gut {
+      &:first-child {
+        margin-top: var(--card-gut);
+      }
+
+      &+.card-gut {
+        margin-top: var(--card-gut);
+      }
+
+      &:last-child {
+        margin-bottom: var(--card-gut);
+      }
+    }
+
+    &.card-auto-margin {
+      &> :not(.card-no-pad) {
+        margin-inline: var(--card-pad, 20px);
+      }
+
+      > :not(.card-gut-skip):first-child {
+        margin-top: var(--card-gut, 20px);
+      }
+
+      >.card-gut-skip+*:not(.card-gut-skip) {
+        margin-top: var(--card-gut, 20px);
+      }
+
+      > :not(.card-gut-skip):last-child {
+        margin-bottom: var(--card-gut, 20px);
+      }
+    }
+  }
+}

src/material/cards.module.css

@@ -1,54 +0,0 @@
-.card {
-  composes: surface from "material.module.css";
-  border-radius: 2px;
-  box-shadow: var(--tutu-shadow-e2);
-  transition: var(--tutu-transition-shadow);
-  overflow: hidden;
-  background-color: var(--tutu-color-surface-l);
-
-  &:focus-within,
-  &:focus-visible {
-    box-shadow: var(--tutu-shadow-e8);
-  }
-
-  &:not(.manualMargin) {
-    &> :not(.cardNoPad) {
-      margin-inline: var(--card-pad, 20px);
-    }
-
-    > :not(.cardGutSkip):first-child {
-      margin-top: var(--card-gut, 20px);
-    }
-
-    >.cardGutSkip+*:not(.cardGutSkip) {
-      margin-top: var(--card-gut, 20px);
-    }
-
-    > :not(.cardGutSkip):last-child {
-      margin-bottom: var(--card-gut, 20px);
-    }
-  }
-}
-
-.layoutCentered {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 448px;
-
-  @media (max-width: 600px) {
-    & {
-      position: static;
-      height: 100%;
-      width: 100%;
-      left: 0;
-      right: 0;
-      transform: none;
-      display: grid;
-      grid-template-rows: 1fr auto;
-      height: 100vh;
-      overflow: auto;
-    }
-  }
-}

src/material/material.css

@@ -1,16 +1,14 @@
+@import "./typography.css";
+
 .surface {
   background-color: var(--tutu-color-surface);
   color: var(--tutu-color-on-surface);
 }
 
-.touchTarget {
+button {
   min-width: 44px;
   min-height: 44px;
   cursor: pointer;
-}
-
-.button {
-  composes: touchTarget;
 
   border: none;
   background-color: transparent;

src/material/typography.css

@@ -1,3 +1,6 @@
+/* Don't import this file directly. This file is already included in material.css */
+
+
 .display4 {
   font-size: 7rem;
   font-weight: 300;

src/material/typography.tsx

@@ -1,21 +1,11 @@
-import { JSX, ParentComponent, splitProps, type Ref } from "solid-js";
+import { splitProps, type Ref, ComponentProps, ValidComponent } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import "./typography.css";
 
-type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>;
-
-type PropsOf<E extends AnyElement> =
-  E extends ParentComponent<infer Props>
-    ? Props
-    : E extends keyof JSX.IntrinsicElements
-      ? JSX.IntrinsicElements[E]
-      : JSX.HTMLAttributes<HTMLElement>;
-
-export type TypographyProps<E extends AnyElement> = {
+export type TypographyProps<E extends ValidComponent> = {
   ref?: Ref<E>;
   component?: E;
   class?: string;
-} & PropsOf<E>;
+} & ComponentProps<E>;
 
 type TypographyKind =
   | "display4"
@@ -30,7 +20,7 @@ type TypographyKind =
   | "caption"
   | "buttonText";
 
-export function Typography<T extends AnyElement>(
+export function Typography<T extends ValidComponent>(
   props: { typography: TypographyKind } & TypographyProps<T>,
 ) {
   const [managed, passthough] = splitProps(props, [
@@ -49,36 +39,36 @@ export function Typography<T extends AnyElement>(
   );
 }
 
-export function Display4<E extends AnyElement>(props: TypographyProps<E>) {
+export function Display4<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"display4"} {...props}></Typography>;
 }
-export function Display3<E extends AnyElement>(props: TypographyProps<E>) {
+export function Display3<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"display3"} {...props}></Typography>;
 }
-export function Display2<E extends AnyElement>(props: TypographyProps<E>) {
+export function Display2<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"display2"} {...props}></Typography>;
 }
-export function Display1<E extends AnyElement>(props: TypographyProps<E>) {
+export function Display1<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"display1"} {...props}></Typography>;
 }
-export function Headline<E extends AnyElement>(props: TypographyProps<E>) {
+export function Headline<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"headline"} {...props}></Typography>;
 }
-export function Title<E extends AnyElement>(props: TypographyProps<E>) {
+export function Title<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"title"} {...props}></Typography>;
 }
-export function Subheading<E extends AnyElement>(props: TypographyProps<E>) {
+export function Subheading<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"subheading"} {...props}></Typography>;
 }
-export function Body1<E extends AnyElement>(props: TypographyProps<E>) {
+export function Body1<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"body1"} {...props}></Typography>;
 }
-export function Body2<E extends AnyElement>(props: TypographyProps<E>) {
+export function Body2<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"body2"} {...props}></Typography>;
 }
-export function Caption<E extends AnyElement>(props: TypographyProps<E>) {
+export function Caption<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"caption"} {...props}></Typography>;
 }
-export function ButtonText<E extends AnyElement>(props: TypographyProps<E>) {
+export function ButtonText<E extends ValidComponent>(props: TypographyProps<E>) {
   return <Typography typography={"buttonText"} {...props}></Typography>;
 }