Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

format code using prettier

Browse source
This commit is contained in:
thislight 2024-08-05 15:33:00 +08:00
parent 91999a6303
commit abde6817f0
27 changed files with 326 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/material/BottomSheet.module.css
View file

@ -1,5 +1,5 @@
.bottomSheet {
composes: surface from 'material.module.css';
composes: surface from "material.module.css";
border: none;
position: absolute;
left: 50%;
@ -29,4 +29,4 @@
height: 100dvh;
}
}
}
}

8
src/material/BottomSheet.tsx
View file

@ -1,5 +1,5 @@
import { createEffect, type ParentComponent } from "solid-js";
import styles from './BottomSheet.module.css'
import styles from "./BottomSheet.module.css";
export type BottomSheetProps = {
open?: boolean;
@ -20,7 +20,11 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
}
});
return <dialog class={styles.bottomSheet} ref={element!}>{props.children}</dialog>;
return (
<dialog class={styles.bottomSheet} ref={element!}>
{props.children}
</dialog>
);
};
export default BottomSheet;

4
src/material/Button.tsx
View file

@ -9,12 +9,12 @@ import materialStyles from "./material.module.css";
const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
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>;
};

9
src/material/cards.module.css
View file

@ -1,5 +1,5 @@
.card {
composes: surface from 'material.module.css';
composes: surface from "material.module.css";
border-radius: 2px;
box-shadow: var(--tutu-shadow-e2);
transition: var(--tutu-transition-shadow);
@ -12,7 +12,7 @@
}
&:not(.manualMargin) {
&>:not(.cardNoPad) {
& > :not(.cardNoPad) {
margin-inline: var(--card-pad, 20px);
}
@ -20,7 +20,7 @@
margin-top: var(--card-gut, 20px);
}
>.cardGutSkip+*:not(.cardGutSkip) {
> .cardGutSkip + *:not(.cardGutSkip) {
margin-top: var(--card-gut, 20px);
}
@ -28,7 +28,6 @@
margin-bottom: var(--card-gut, 20px);
}
}
}
.layoutCentered {
@ -52,4 +51,4 @@
overflow: auto;
}
}
}
}

106
src/material/form.module.css
View file

@ -1,5 +1,5 @@
.textfield {
composes: touchTarget from 'material.module.css';
composes: touchTarget from "material.module.css";
--border-color: var(--tutu-color-inactive-on-surface);
--active-border-color: var(--tutu-color-primary);
@ -7,74 +7,78 @@
--active-label-color: var(--tutu-color-primary);
--helper-text-color: var(--tutu-color-inactive-on-surface);
&>* {
width: 100%;
& > * {
width: 100%;
}
&.error, &:has(>input[aria-invalid="true"]) {
&:not(:focus-within) {
--border-color: var(--tutu-color-error-on-surface);
--label-color: var(--tutu-color-error-on-surface);
--helper-text-color: var(--tutu-color-error-on-surface);
}
&.error,
&:has(> input[aria-invalid="true"]) {
&:not(:focus-within) {
--border-color: var(--tutu-color-error-on-surface);
--label-color: var(--tutu-color-error-on-surface);
--helper-text-color: var(--tutu-color-error-on-surface);
}
&:focus-within {
--helper-text-color: var(--tutu-color-error-on-surface);
}
&:focus-within {
--helper-text-color: var(--tutu-color-error-on-surface);
}
}
position: relative;
&>label {
position: absolute;
left: 0;
bottom: calc(10px + var(--bottom-height, 0px));
color: var(--label-color);
transition: bottom .2s ease-in-out, font-size .2s ease-in-out, color .2s ease-in-out;
cursor: text;
font-size: 0.8125rem;
& > label {
position: absolute;
left: 0;
bottom: calc(10px + var(--bottom-height, 0px));
color: var(--label-color);
transition:
bottom 0.2s ease-in-out,
font-size 0.2s ease-in-out,
color 0.2s ease-in-out;
cursor: text;
font-size: 0.8125rem;
}
&>label:has(+ input:not(:placeholder-shown)) {
bottom: calc(100% - 0.8125rem);
& > label:has(+ input:not(:placeholder-shown)) {
bottom: calc(100% - 0.8125rem);
}
&:focus-within>label, &.float-label>label {
bottom: calc(100% - 0.8125rem);
color: var(--active-label-color);
&:focus-within > label,
&.float-label > label {
bottom: calc(100% - 0.8125rem);
color: var(--active-label-color);
}
&>input[type='text'],
&>input[type='password'] {
border: none;
outline: none;
border-bottom: 1px solid var(--border-color);
background-color: transparent;
padding-top: 16px;
padding-bottom: 8px;
margin-bottom: 1px;
transition: border-color .2s ease-in-out;
& > input[type="text"],
& > input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid var(--border-color);
background-color: transparent;
padding-top: 16px;
padding-bottom: 8px;
margin-bottom: 1px;
transition: border-color 0.2s ease-in-out;
&:focus {
border-bottom: 2px solid var(--active-border-color);
margin-bottom: 0;
}
&:focus {
border-bottom: 2px solid var(--active-border-color);
margin-bottom: 0;
}
}
&.withHelperText {
--bottom-height: 0.8125rem;
--bottom-height: 0.8125rem;
}
& .helperText {
color: var(--helper-text-color);
font-size: 0.8125rem;
line-height: 100%;
-webkit-line-clamp: 1;
line-clamp: 1;
display: flex;
justify-content: space-between;
min-height: 0.8125rem;
cursor: auto;
color: var(--helper-text-color);
font-size: 0.8125rem;
line-height: 100%;
-webkit-line-clamp: 1;
line-clamp: 1;
display: flex;
justify-content: space-between;
min-height: 0.8125rem;
cursor: auto;
}
}
}

35
src/material/material.module.css
View file

@ -10,7 +10,7 @@
}
.button {
composes: buttonText from './typography.module.css';
composes: buttonText from "./typography.module.css";
composes: touchTarget;
border: none;
@ -18,28 +18,34 @@
color: var(--tutu-color-primary);
font-family: inherit;
&:focus,&:hover,&:focus-visible {
background-color: var(--tutu-color-surface-dd);
&:focus,
&:hover,
&:focus-visible {
background-color: var(--tutu-color-surface-dd);
}
&.pressed {
background-color: var(--tutu-color-surface-d);
background-color: var(--tutu-color-surface-d);
}
&.raised {
background-color: var(--tutu-color-primary);
color: var(--tutu-color-on-primary);
background-color: var(--tutu-color-primary);
color: var(--tutu-color-on-primary);
}
&:disabled, &[aria-disabled]:not([aria-disabled="false"]) {
color: #9e9e9e;
&:disabled,
&[aria-disabled]:not([aria-disabled="false"]) {
color: #9e9e9e;
&:focus,&:hover,&:focus-visible {
background-color: transparent;
}
&:focus,
&:hover,
&:focus-visible {
background-color: transparent;
}
}
.toolbar &, .appbar & {
.toolbar &,
.appbar & {
height: 100%;
margin-block: 0;
padding-block: 0;
@ -49,7 +55,9 @@
.appbar & {
color: var(--tutu-color-on-primary);
&:focus,&:hover,&:focus-visible {
&:focus,
&:hover,
&:focus-visible {
background-color: var(--tutu-color-primary-ll);
}
@ -62,4 +70,3 @@
color: var(--tutu-color-on-surface);
}
}

21
src/material/mui.ts
View file

@ -2,15 +2,16 @@ import { Theme, createTheme } from "@suid/material/styles";
import { deepPurple, amber } from "@suid/material/colors";
import { Accessor } from "solid-js";
export function useRootTheme() : Accessor<Theme> {
return () => createTheme({
palette: {
primary: {
main: deepPurple[500]
export function useRootTheme(): Accessor<Theme> {
return () =>
createTheme({
palette: {
primary: {
main: deepPurple[500],
},
secondary: {
main: amber.A200,
},
},
secondary: {
main: amber.A200
}
}
})
});
}

25
src/material/theme.css
View file

@ -1,5 +1,6 @@
:root,
[lang^="en"], [lang="en"] {
[lang^="en"],
[lang="en"] {
--md-typography-type: "regular";
--title-size: 1.25rem;
--title-weight: 500;
@ -19,9 +20,12 @@
}
}
[lang^="zh"], [lang="zh"],
[lang^="kr"], [lang="kr"],
[lang^="ja"], [lang="ja"] {
[lang^="zh"],
[lang="zh"],
[lang^="kr"],
[lang="kr"],
[lang^="ja"],
[lang="ja"] {
--md-typography-type: "dense";
--title-size: 1.4375rem;
--subheading-size: 1.1875rem;
@ -95,7 +99,6 @@
--tutu-anim-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1);
@media (max-width: 300px) {
/* XS screen, like wearables */
& {
--tutu-transition-shadow: box-shadow 157.5ms var(--tutu-anim-curve-std);
@ -103,7 +106,6 @@
}
@media (max-width: 600px) {
/* Mobile */
& {
--tutu-transition-shadow: box-shadow 225ms var(--tutu-anim-curve-std);
@ -111,7 +113,6 @@
}
@media (max-width: 1200px) {
/* Tablet */
& {
--tutu-transition-shadow: box-shadow 292.5ms var(--tutu-anim-curve-std);
@ -125,11 +126,17 @@
}
* {
font-family: Roboto, "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-family:
Roboto,
"Noto Sans",
system-ui,
-apple-system,
BlinkMacSystemFont,
sans-serif;
box-sizing: border-box;
margin: 0;
}
body {
font-size: var(--body-size, 1rem);
}
}

34
src/material/typography.tsx
View file

@ -3,7 +3,7 @@ import { Dynamic } from "solid-js/web";
import typography from "./typography.module.css";
import { mergeClass } from "../utils";
type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>
type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>;
type PropsOf<E extends AnyElement> =
E extends ParentComponent<infer Props>
@ -12,9 +12,7 @@ type PropsOf<E extends AnyElement> =
? JSX.IntrinsicElements[E]
: JSX.HTMLAttributes<HTMLElement>;
export type TypographyProps<
E extends AnyElement,
> = {
export type TypographyProps<E extends AnyElement> = {
ref?: Ref<E>;
component?: E;
class?: string;
@ -33,7 +31,9 @@ type TypographyKind =
| "caption"
| "buttonText";
export function Typography<T extends AnyElement>(props: {typography: TypographyKind } & TypographyProps<T>) {
export function Typography<T extends AnyElement>(
props: { typography: TypographyKind } & TypographyProps<T>,
) {
const [managed, passthough] = splitProps(props, [
"ref",
"component",
@ -50,38 +50,38 @@ export function Typography<T extends AnyElement>(props: {typography: TypographyK
{...passthough}
></Dynamic>
);
};
}
export function Display4<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"display4"} {...props}></Typography>
return <Typography typography={"display4"} {...props}></Typography>;
}
export function Display3<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"display3"} {...props}></Typography>
return <Typography typography={"display3"} {...props}></Typography>;
}
export function Display2<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"display2"} {...props}></Typography>
return <Typography typography={"display2"} {...props}></Typography>;
}
export function Display1<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"display1"} {...props}></Typography>
return <Typography typography={"display1"} {...props}></Typography>;
}
export function Headline<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"headline"} {...props}></Typography>
return <Typography typography={"headline"} {...props}></Typography>;
}
export function Title<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"title"} {...props}></Typography>
return <Typography typography={"title"} {...props}></Typography>;
}
export function Subheading<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"subheading"} {...props}></Typography>
return <Typography typography={"subheading"} {...props}></Typography>;
}
export function Body1<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"body1"} {...props}></Typography>
return <Typography typography={"body1"} {...props}></Typography>;
}
export function Body2<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"body2"} {...props}></Typography>
return <Typography typography={"body2"} {...props}></Typography>;
}
export function Caption<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"caption"} {...props}></Typography>
return <Typography typography={"caption"} {...props}></Typography>;
}
export function ButtonText<E extends AnyElement>(props: TypographyProps<E>) {
return <Typography typography={"buttonText"} {...props}></Typography>
return <Typography typography={"buttonText"} {...props}></Typography>;
}