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 { 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;
|
||||||
|
|
|
@ -10,7 +10,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
composes: buttonText from "./typography.module.css";
|
|
||||||
composes: touchTarget;
|
composes: touchTarget;
|
||||||
|
|
||||||
border: none;
|
border: none;
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue