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…
	
	Add table
		Add a link
		
	
		Reference in a new issue