typography: remove module css
This commit is contained in:
parent
9d720d31b4
commit
456cfdfbb0
4 changed files with 12 additions and 13 deletions
|
@ -1,5 +1,6 @@
|
|||
import { Component, JSX, splitProps } from "solid-js";
|
||||
import materialStyles from "./material.module.css";
|
||||
import "./typography.css";
|
||||
|
||||
/**
|
||||
* Material-styled button.
|
||||
|
@ -10,12 +11,15 @@ const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
|
|||
props,
|
||||
) => {
|
||||
const [managed, passthough] = splitProps(props, ["class", "type"]);
|
||||
const classes = () =>
|
||||
managed.class
|
||||
? [materialStyles.button, managed.class].join(" ")
|
||||
: materialStyles.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;
|
||||
|
|
|
@ -10,7 +10,6 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
composes: buttonText from "./typography.module.css";
|
||||
composes: touchTarget;
|
||||
|
||||
border: none;
|
||||
|
|
|
@ -29,12 +29,11 @@
|
|||
font-size: var(--subheading-size);
|
||||
}
|
||||
|
||||
.body1 {
|
||||
.body1, .body2 {
|
||||
font-size: var(--body-size);
|
||||
}
|
||||
|
||||
.body2 {
|
||||
composes: body1;
|
||||
font-weight: var(--body2-weight);
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { JSX, ParentComponent, splitProps, type Ref } from "solid-js";
|
||||
import { Dynamic } from "solid-js/web";
|
||||
import typography from "./typography.module.css";
|
||||
import { mergeClass } from "../utils";
|
||||
import "./typography.css";
|
||||
|
||||
type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>;
|
||||
|
||||
|
@ -40,13 +39,11 @@ export function Typography<T extends AnyElement>(
|
|||
"class",
|
||||
"typography",
|
||||
]);
|
||||
const classes = () =>
|
||||
mergeClass(managed.class, typography[managed.typography]);
|
||||
return (
|
||||
<Dynamic
|
||||
ref={managed.ref}
|
||||
component={managed.component ?? "span"}
|
||||
class={classes()}
|
||||
class={`${managed.class} ${managed.typography}`}
|
||||
{...passthough}
|
||||
></Dynamic>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue