typography: remove module css

This commit is contained in:
thislight 2024-11-05 16:07:10 +08:00
parent 9d720d31b4
commit 456cfdfbb0
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
4 changed files with 12 additions and 13 deletions

View file

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

View file

@ -10,7 +10,6 @@
} }
.button { .button {
composes: buttonText from "./typography.module.css";
composes: touchTarget; composes: touchTarget;
border: none; border: none;

View file

@ -29,12 +29,11 @@
font-size: var(--subheading-size); font-size: var(--subheading-size);
} }
.body1 { .body1, .body2 {
font-size: var(--body-size); font-size: var(--body-size);
} }
.body2 { .body2 {
composes: body1;
font-weight: var(--body2-weight); font-weight: var(--body2-weight);
} }

View file

@ -1,7 +1,6 @@
import { JSX, ParentComponent, splitProps, type Ref } from "solid-js"; import { JSX, ParentComponent, splitProps, type Ref } from "solid-js";
import { Dynamic } from "solid-js/web"; import { Dynamic } from "solid-js/web";
import typography from "./typography.module.css"; import "./typography.css";
import { mergeClass } from "../utils";
type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>; type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>;
@ -40,13 +39,11 @@ export function Typography<T extends AnyElement>(
"class", "class",
"typography", "typography",
]); ]);
const classes = () =>
mergeClass(managed.class, typography[managed.typography]);
return ( return (
<Dynamic <Dynamic
ref={managed.ref} ref={managed.ref}
component={managed.component ?? "span"} component={managed.component ?? "span"}
class={classes()} class={`${managed.class} ${managed.typography}`}
{...passthough} {...passthough}
></Dynamic> ></Dynamic>
); );