xt/estim_control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor UI font size.

Browse Source
This commit is contained in:
Vixalie 2025-03-20 11:20:14 +08:00
parent 5b30d4c2bc
commit 440caf4de0
9 changed files with 121 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/Layout.module.css
View File

@ -69,6 +69,11 @@
border-radius: calc(var(--border-radius) * 2);
padding-block: calc(var(--spacing));
}
&.name {
font-size: var(--label-small-font-size);
line-height: var(--label-small-line-height);
font-weight: var(--label-small-font-weight);
}
}
&.inactive {
color: var(--color-on-surface-variant);

2
src/Layout.tsx
View File

@ -24,7 +24,7 @@ const FunctionLink: FC<FunctionLinkProps> = ({ name, url, end, children }) => {
}
end={end}>
<div className={styles.filled}>{children}</div>
<div>{name}</div>
<div className={styles.name}>{name}</div>
</NavLink>
);
};

52
src/components.css
View File

@ -23,33 +23,40 @@
}
}
:is(h1, h2, h3, h4, h5, h6) {
font-weight: bold;
line-height: 1.2em;
}
h1 {
font-size: 2.6em;
font-size: 2rem;
line-height: 2.5rem;
font-weight: 400;
}
h2 {
font-size: 2em;
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 400;
}
h3 {
font-size: 1.8em;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 400;
}
h4 {
font-size: 1.5em;
font-size: 1.375rem;
line-height: 1.75rem;
font-weight: 500;
}
h5 {
font-size: 1.2em;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 500;
}
h6 {
font-size: 1em;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
}
.center {
@ -112,23 +119,22 @@
justify-content: center;
align-items: center;
gap: calc(var(--spacing) * 2);
font-size: calc(var(--font-size) * 1.2);
line-height: 1.3em;
font-size: var(--label-medium-font-size);
line-height: var(--label-medium-line-height);
font-weight: var(--label-medium-font-weight);
color: var(--button-text);
background-color: var(--button-surface);
box-shadow: var(--elevation-0);
cursor: pointer;
&.smaller {
font-size: calc(var(--font-size) * 0.8);
}
&.small {
font-size: calc(var(--font-size) * 1);
font-size: var(--label-small-font-size);
line-height: var(--label-small-line-height);
font-weight: var(--label-small-font-weight);
}
&.large {
font-size: calc(var(--font-size) * 1.4);
}
&.larger {
font-size: calc(var(--font-size) * 1.6);
font-size: var(--label-large-font-size);
line-height: var(--label-large-line-height);
font-weight: var(--label-large-font-weight);
}
&:hover:not(:disabled) {
color: var(--button-surface);
@ -456,7 +462,9 @@
border-top-left-radius: calc(var(--border-radius) * 2);
border-top-right-radius: calc(var(--border-radius) * 2);
padding: calc(var(--spacing)) calc(var(--spacing) * 2);
line-height: 1.5em;
font-size: var(--body-small-font-size);
line-height: var(--body-small-line-height);
font-weight: var(--body-small-font-weight);
color: var(--color-on-surface);
background-color: var(--color-surface-container-highest);
&.error {

2
src/components/PatternPreview.tsx
View File

@ -64,7 +64,7 @@ const PatternPreview: FC = () => {
return (
<div className={styles.pattern_preview}>
<h4>Pattern Preview</h4>
<h5>Pattern Preview</h5>
<div className={styles.canvas_wrapper} ref={conatienrRef}>
<canvas ref={canvasRef} />
</div>

2
src/page-components/pattern-editor/PatternHeader.tsx
View File

@ -18,7 +18,7 @@ const PatternHeader: FC = () => {
return (
<div className={styles.pattern_header}>
<EditableContent
as="h3"
as="h4"
placeholder="Pattern Name"
value={currentPattern?.name ?? null}
additionalClassName={styles.content}

5
src/page-components/pattern-editor/PatternOverview.module.css
View File

@ -5,7 +5,7 @@
flex-direction: column;
align-items: stretch;
gap: calc(var(--spacing));
padding: calc(var(--spacing) * 2) calc(var(--spacing));
padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
border-radius: calc(var(--border-radius) * 2);
color: var(--color-on-surface);
background-color: var(--color-surface-container);
@ -15,5 +15,8 @@
flex-direction: row;
align-items: center;
gap: calc(var(--spacing) * 2);
font-size: var(--body-small-font-size);
line-height: var(--body-small-line-height);
font-weight: var(--body-small-font-weight);
}
}

6
src/theme.css
View File

@ -3,9 +3,9 @@
@layer base {
:root {
font-family: var(--font-family);
font-size: var(--font-size);
line-height: var(--line-height);
font-weight: 400;
font-size: var(--root-font-size);
line-height: var(--root-line-height);
font-weight: var(--root-font-weight);
width: 100vw;
height: 100vh;

4
src/utilities.css
View File

@ -14,7 +14,9 @@
.empty_prompt {
padding-block: calc(var(--spacing) * 1);
text-align: center;
font-size: calc(var(--font-size) * 0.8);
font-size: var(--body-extra-small-font-size);
line-height: var(--body-extra-small-line-height);
font-weight: var(--body-extra-small-font-weight);
color: var(--color-on-surface-variant);
}
}

75
src/variables.css
View File

@ -1,7 +1,5 @@
@layer theme {
:root {
--font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
--color-white: #ffffff;
--color-black: #000000;
--color-primary: light-dark(#744c1f, #ffe6b1);
@ -333,6 +331,79 @@
--font-size: 10px;
--line-height: 1.2em;
--font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
--root-font-size: 16px;
--root-line-height: 1.2;
--root-font-weight: 400;
--display-large-font-size: 3.5625rem;
--display-large-line-height: 1.1228;
--display-large-font-weight: 400;
--display-medium-font-size: 2.8125rem;
--display-medium-line-height: 1.1556;
--display-medium-font-weight: 400;
--display-small-font-size: 2.25rem;
--display-small-line-height: 1.2222;
--display-small-font-weight: 400;
--headline-large-font-size: 2rem;
--headline-large-line-height: 1.25;
--headline-large-font-weight: 400;
--headline-medium-font-size: 1.75rem;
--headline-medium-line-height: 1.2857;
--headline-medium-font-weight: 400;
--headline-small-font-size: 1.5rem;
--headline-small-line-height: 1.3333;
--headline-small-font-weight: 400;
--title-large-font-size: 1.375rem;
--title-large-line-height: 1.2727;
--title-large-font-weight: 400;
--title-medium-font-size: 1rem;
--title-medium-line-height: 1.5;
--title-medium-font-weight: 400;
--title-small-font-size: 0.875rem;
--title-small-line-height: 1.4286;
--title-small-font-weight: 500;
--body-large-font-size: 1rem;
--body-large-line-height: 1.5;
--body-large-font-weight: 400;
--body-medium-font-size: 0.875rem;
--body-medium-line-height: 1.4286;
--body-medium-font-weight: 400;
--body-small-font-size: 0.75rem;
--body-small-line-height: 1.3333;
--body-small-font-weight: 400;
--body-extra-small-font-size: 0.625rem;
--body-extra-small-line-height: 1.2;
--body-extra-small-font-weight: 400;
--body-extrime-small-font-size: 0.5rem;
--body-extrime-small-line-height: 1;
--body-extrime-small-font-weight: 400;
--label-large-font-size: 0.875rem;
--label-large-line-height: 1.4286;
--label-large-font-weight: 500;
--label-medium-font-size: 0.75rem;
--label-medium-line-height: 1.3333;
--label-medium-font-weight: 500;
--label-small-font-size: 0.6875rem;
--label-small-line-height: 1.4545;
--label-small-font-weight: 400;
--elevation-0: none;
--elevation-1-ambient: 0 1px 3px 1px color-mix(in oklch, var(--color-shadow) 15%, transparent);
--elevation-1-umbra: 0 1px 2px 0px color-mix(in oklch, var(--color-shadow) 30%, transparent);