From 440caf4de0ca3466e443773d50d3e20f7a98bd2a Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Thu, 20 Mar 2025 11:20:14 +0800
Subject: [PATCH] refactor UI font size.

---
 src/Layout.module.css                         |  5 ++
 src/Layout.tsx                                |  2 +-
 src/components.css                            | 52 +++++++------
 src/components/PatternPreview.tsx             |  2 +-
 .../pattern-editor/PatternHeader.tsx          |  2 +-
 .../pattern-editor/PatternOverview.module.css |  5 +-
 src/theme.css                                 |  6 +-
 src/utilities.css                             |  4 +-
 src/variables.css                             | 75 ++++++++++++++++++-
 9 files changed, 121 insertions(+), 32 deletions(-)

diff --git a/src/Layout.module.css b/src/Layout.module.css
index b8999d9..a7b64c5 100644
--- a/src/Layout.module.css
+++ b/src/Layout.module.css
@@ -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);
diff --git a/src/Layout.tsx b/src/Layout.tsx
index 88d8980..73602cf 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -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>
   );
 };
diff --git a/src/components.css b/src/components.css
index 08a6732..9252bad 100644
--- a/src/components.css
+++ b/src/components.css
@@ -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 {
diff --git a/src/components/PatternPreview.tsx b/src/components/PatternPreview.tsx
index b0598ca..332c789 100644
--- a/src/components/PatternPreview.tsx
+++ b/src/components/PatternPreview.tsx
@@ -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>
diff --git a/src/page-components/pattern-editor/PatternHeader.tsx b/src/page-components/pattern-editor/PatternHeader.tsx
index 8895b94..31d555b 100644
--- a/src/page-components/pattern-editor/PatternHeader.tsx
+++ b/src/page-components/pattern-editor/PatternHeader.tsx
@@ -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}
diff --git a/src/page-components/pattern-editor/PatternOverview.module.css b/src/page-components/pattern-editor/PatternOverview.module.css
index b6ee9ae..ef14741 100644
--- a/src/page-components/pattern-editor/PatternOverview.module.css
+++ b/src/page-components/pattern-editor/PatternOverview.module.css
@@ -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);
   }
 }
diff --git a/src/theme.css b/src/theme.css
index 0c6ba0d..a6c53a1 100644
--- a/src/theme.css
+++ b/src/theme.css
@@ -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;
diff --git a/src/utilities.css b/src/utilities.css
index 714ac50..fe2f4f7 100644
--- a/src/utilities.css
+++ b/src/utilities.css
@@ -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);
   }
 }
diff --git a/src/variables.css b/src/variables.css
index 86b8019..e7ac132 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -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);