From eec495d897ce5b2196398dc9dad7813d21897ed4 Mon Sep 17 00:00:00 2001
From: Tatsuto YAMAMOTO <me@laminne33569.net>
Date: Mon, 7 Sep 2026 09:23:02 +0900
Subject: [PATCH 1/2] chore: define CSS variables

---
 app/components/followAccount.module.css | 18 +++++++--------
 app/components/loadMoreNote.module.css  |  6 ++---
 app/components/login.module.css         |  4 ++--
 app/components/note.module.css          | 12 +++++-----
 app/components/noteAuthor.module.css    | 16 ++++++-------
 app/components/sideBar.module.css       | 26 +++++++++------------
 app/components/signup.module.css        |  2 +-
 app/root.module.css                     |  6 ++---
 app/root.tsx                            |  1 +
 app/routes/accounts.$id.edit.tsx        | 30 +++++++++----------------
 app/routes/signup.verify.tsx            |  4 +++-
 app/styles/account.module.css           | 17 +++-----------
 app/styles/accountEdit.module.css       | 29 ++++++++++++++++++++++++
 app/styles/emailVerify.module.css       |  3 +++
 app/styles/login.css                    |  3 ---
 app/styles/tokens.css                   | 21 +++++++++++++++++
 16 files changed, 112 insertions(+), 86 deletions(-)
 create mode 100644 app/styles/accountEdit.module.css
 create mode 100644 app/styles/emailVerify.module.css
 delete mode 100644 app/styles/login.css
 create mode 100644 app/styles/tokens.css

diff --git a/app/components/followAccount.module.css b/app/components/followAccount.module.css
index ce630a80..619fb3a9 100644
--- a/app/components/followAccount.module.css
+++ b/app/components/followAccount.module.css
@@ -1,25 +1,25 @@
 .followAccount {
-  border: solid #000;
-  border-width: 0 0 0.5px;
+  border: solid var(--color-border);
+  border-width: 0 0 var(--border-width-thin);
 
   .avatar {
-    width: 3rem;
-    height: 3rem;
+    width: var(--size-avatar);
+    height: var(--size-avatar);
 
-    border: 0.5px solid #666;
+    border: var(--border-width-thin) solid var(--color-muted);
 
-    border-radius: 50%;
+    border-radius: var(--radius-full);
   }
 
   .avatarNameContainer {
     display: flex;
     align-items: center;
 
-    padding: 0.5rem;
+    padding: var(--space-0-5);
   }
 
   div:hover {
-    background-color: #f4f4f6;
+    background-color: var(--color-surface-hover);
   }
 
   a {
@@ -27,6 +27,6 @@
   }
 
   .accountNameContainer {
-    margin-left: 0.5rem;
+    margin-left: var(--space-0-5);
   }
 }
diff --git a/app/components/loadMoreNote.module.css b/app/components/loadMoreNote.module.css
index 45ead677..5d8ac2c1 100644
--- a/app/components/loadMoreNote.module.css
+++ b/app/components/loadMoreNote.module.css
@@ -2,11 +2,11 @@
   text-align: center;
 
   div {
-    border: solid #000;
-    border-width: 0.5px 0;
+    border: solid var(--color-border);
+    border-width: var(--border-width-thin) 0;
   }
 
   div:hover {
-    background-color: #f4f4f6;
+    background-color: var(--color-surface-hover);
   }
 }
diff --git a/app/components/login.module.css b/app/components/login.module.css
index 0ce797e8..7c45befa 100644
--- a/app/components/login.module.css
+++ b/app/components/login.module.css
@@ -9,7 +9,7 @@
 }
 
 .errorMessage {
-  color: var(--color-destructive-500, #d92d20);
-  margin-bottom: 1rem;
+  color: var(--color-danger);
+  margin-bottom: var(--space-1);
   text-align: center;
 }
diff --git a/app/components/note.module.css b/app/components/note.module.css
index 2c273c04..06de2014 100644
--- a/app/components/note.module.css
+++ b/app/components/note.module.css
@@ -1,11 +1,11 @@
 .note {
-  border: solid #000;
-  border-width: 0 0 0.5px 0;
-  padding: 0.5rem;
+  border: solid var(--color-border);
+  border-width: 0 0 var(--border-width-thin) 0;
+  padding: var(--space-0-5);
 }
 
 .renoteHeader {
-  font-size: small;
-  color: #666;
-  padding: 0.25rem 0;
+  font-size: var(--font-size-small);
+  color: var(--color-muted);
+  padding: var(--space-0-25) 0;
 }
diff --git a/app/components/noteAuthor.module.css b/app/components/noteAuthor.module.css
index 88cb0aa5..f2705cd4 100644
--- a/app/components/noteAuthor.module.css
+++ b/app/components/noteAuthor.module.css
@@ -1,5 +1,5 @@
 .accountNameContainer {
-  font-size: small;
+  font-size: var(--font-size-small);
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -12,19 +12,19 @@
 
     span {
       font-weight: lighter;
-      font-size: small;
+      font-size: var(--font-size-small);
     }
   }
 }
 
 .avatarImageContainer {
-  width: 3rem;
-  height: 3rem;
-  margin-right: 0.5rem;
+  width: var(--size-avatar);
+  height: var(--size-avatar);
+  margin-right: var(--space-0-5);
 
   img {
-    width: 3rem;
-    height: 3rem;
-    border-radius: 9999px;
+    width: var(--size-avatar);
+    height: var(--size-avatar);
+    border-radius: var(--radius-full);
   }
 }
diff --git a/app/components/sideBar.module.css b/app/components/sideBar.module.css
index bb6bd85b..d79e06f7 100644
--- a/app/components/sideBar.module.css
+++ b/app/components/sideBar.module.css
@@ -8,40 +8,34 @@
 .loggedInAccountContainer {
   display: flex;
   align-items: center;
-  margin-top: 0.5rem;
+  margin-top: var(--space-0-5);
 
   span {
-    margin-left: 0.5rem;
+    margin-left: var(--space-0-5);
   }
 
   .avatar {
-    width: 3rem;
-    height: 3rem;
-    border-radius: 9999px;
-
-    img {
-      width: 3rem;
-      height: 3rem;
-      border-radius: 9999px;
-    }
+    width: var(--size-avatar);
+    height: var(--size-avatar);
+    border-radius: var(--radius-full);
   }
 }
 
 .loginButton {
   width: 100%;
-  padding: 10px;
+  padding: var(--space-0-75);
 }
 
 .sideBar {
   display: flex;
   flex-direction: column;
 
-  margin-top: 32px;
-  margin-right: 16px;
-  gap: 8px;
+  margin-top: var(--space-2);
+  margin-right: var(--space-1);
+  gap: var(--space-0-5);
 
   .link {
     font-size: 1.2rem;
-    padding: 10px;
+    padding: var(--space-0-75);
   }
 }
diff --git a/app/components/signup.module.css b/app/components/signup.module.css
index 8faaa0fe..da25dd98 100644
--- a/app/components/signup.module.css
+++ b/app/components/signup.module.css
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-0-5);
 
   label {
     input {
diff --git a/app/root.module.css b/app/root.module.css
index 83203a58..32328504 100644
--- a/app/root.module.css
+++ b/app/root.module.css
@@ -22,7 +22,7 @@ body {
   min-height: 100lvh;
   height: 100%;
   box-sizing: border-box;
-  padding: 0.5rem 0;
-  border: solid;
-  border-width: 0 0.5px;
+  padding: var(--space-0-5) 0;
+  border: solid var(--color-border);
+  border-width: 0 var(--border-width-thin);
 }
diff --git a/app/root.tsx b/app/root.tsx
index 126a08ae..87b60ea6 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -14,6 +14,7 @@ import {
 } from "~/lib/api/loggedInAccount";
 import { cloudflareContext } from "~/lib/cloudflareContext";
 
+import "~/styles/tokens.css";
 import styles from "~/root.module.css";
 
 export async function loader({
diff --git a/app/routes/accounts.$id.edit.tsx b/app/routes/accounts.$id.edit.tsx
index afc2fb98..ff1cf887 100644
--- a/app/routes/accounts.$id.edit.tsx
+++ b/app/routes/accounts.$id.edit.tsx
@@ -10,6 +10,8 @@ import { getToken } from "~/lib/api/getToken";
 import { loggedInAccount } from "~/lib/api/loggedInAccount";
 import { cloudflareContext } from "~/lib/cloudflareContext";
 
+import styles from "~/styles/accountEdit.module.css";
+
 const ERROR_MESSAGES = {
   invalidRequest: "Invalid request. Please try again.",
   accountNotFound: "Account not found.",
@@ -144,31 +146,21 @@ export default function AccountEdit() {
 
   if (loaderData.error !== undefined) {
     return (
-      <div style={{ padding: "1rem" }}>
+      <div className={styles.page}>
         <p>{loaderData.error}</p>
       </div>
     );
   }
 
   return (
-    <div style={{ padding: "1rem" }}>
+    <div className={styles.page}>
       <h1>Edit Account</h1>
-      <p style={{ marginBottom: "1rem" }}>
+      <p className={styles.accountName}>
         {loaderData.account.nickname} ({loaderData.account.name})
       </p>
 
-      <Form
-        method="post"
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem",
-          maxWidth: "600px",
-        }}
-      >
-        <div
-          style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}
-        >
+      <Form method="post" className={styles.form}>
+        <div className={styles.field}>
           <label htmlFor="nickname">Nickname</label>
           <input
             type="text"
@@ -179,9 +171,7 @@ export default function AccountEdit() {
           />
         </div>
 
-        <div
-          style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}
-        >
+        <div className={styles.field}>
           <label htmlFor="bio">Bio</label>
           <textarea
             id="bio"
@@ -193,12 +183,12 @@ export default function AccountEdit() {
         </div>
 
         {errorMessage ? (
-          <p role="alert" style={{ color: "red" }}>
+          <p role="alert" className={styles.errorMessage}>
             {errorMessage}
           </p>
         ) : null}
 
-        <div style={{ display: "flex", gap: "1rem" }}>
+        <div className={styles.actions}>
           <button type="submit">Update</button>
           <a href={`/accounts/${loaderData.account.name}`}>
             <button type="button">Cancel</button>
diff --git a/app/routes/signup.verify.tsx b/app/routes/signup.verify.tsx
index efe6ea5e..613c7bd1 100644
--- a/app/routes/signup.verify.tsx
+++ b/app/routes/signup.verify.tsx
@@ -6,6 +6,8 @@ import { apiOptions } from "~/lib/api/client";
 import { cloudflareContext } from "~/lib/cloudflareContext";
 import { logger } from "~/lib/logger";
 
+import styles from "~/styles/emailVerify.module.css";
+
 export const loader = async ({
   request,
   context,
@@ -64,7 +66,7 @@ export default function EmailVerify() {
   if ("error" in loaderData) {
     return (
       <>
-        <h2 color="red">Error: {loaderData.error}</h2>
+        <h2 className={styles.errorMessage}>Error: {loaderData.error}</h2>
         {/*ToDo: Encourage them to contact the administrator*/}
         <Link to="/">back to home</Link>
       </>
diff --git a/app/styles/account.module.css b/app/styles/account.module.css
index 7573989b..24debf14 100644
--- a/app/styles/account.module.css
+++ b/app/styles/account.module.css
@@ -1,7 +1,7 @@
 .avatarImage {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 9999px;
+  width: var(--size-avatar);
+  height: var(--size-avatar);
+  border-radius: var(--radius-full);
 }
 
 .accountData {
@@ -12,14 +12,3 @@
   overflow-x: auto;
   text-overflow: ellipsis;
 }
-
-.emptyState {
-  width: 100%;
-  height: 100%;
-
-  text-align: center;
-
-  span {
-    font-size: 3rem;
-  }
-}
diff --git a/app/styles/accountEdit.module.css b/app/styles/accountEdit.module.css
new file mode 100644
index 00000000..ea1e6a47
--- /dev/null
+++ b/app/styles/accountEdit.module.css
@@ -0,0 +1,29 @@
+.page {
+  padding: var(--space-1);
+}
+
+.accountName {
+  margin-bottom: var(--space-1);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  max-width: 600px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0-5);
+}
+
+.errorMessage {
+  color: var(--color-danger);
+}
+
+.actions {
+  display: flex;
+  gap: var(--space-1);
+}
diff --git a/app/styles/emailVerify.module.css b/app/styles/emailVerify.module.css
new file mode 100644
index 00000000..c7afe77c
--- /dev/null
+++ b/app/styles/emailVerify.module.css
@@ -0,0 +1,3 @@
+.errorMessage {
+  color: var(--color-danger);
+}
diff --git a/app/styles/login.css b/app/styles/login.css
deleted file mode 100644
index adc68fa6..00000000
--- a/app/styles/login.css
+++ /dev/null
@@ -1,3 +0,0 @@
-h1 {
-  color: red;
-}
diff --git a/app/styles/tokens.css b/app/styles/tokens.css
new file mode 100644
index 00000000..cbcdb92f
--- /dev/null
+++ b/app/styles/tokens.css
@@ -0,0 +1,21 @@
+:root {
+  --color-border: #000;
+  --color-muted: #666;
+  --color-surface-hover: #f4f4f6;
+  --color-danger: #d92d20;
+
+  --space-0: 0; /* 0px */
+  --space-0-25: 0.25rem; /* 4px */
+  --space-0-5: 0.5rem; /* 8px */
+  --space-0-75: 0.75rem; /* 12px */
+  --space-1: 1rem; /* 16px */
+  --space-1-5: 1.5rem; /* 24px */
+  --space-2: 2rem; /* 32px */
+
+  --size-avatar: 3rem;
+
+  --radius-full: 9999px;
+  --border-width-thin: 0.5px;
+
+  --font-size-small: small;
+}

From 9d0e2f668f91e964141fccf716a0ce2af5a78f2f Mon Sep 17 00:00:00 2001
From: Tatsuto YAMAMOTO <me@laminne33569.net>
Date: Mon, 7 Sep 2026 09:29:31 +0900
Subject: [PATCH 2/2] refactor: rename error color token

---
 app/components/login.module.css   | 2 +-
 app/styles/accountEdit.module.css | 2 +-
 app/styles/emailVerify.module.css | 2 +-
 app/styles/tokens.css             | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/login.module.css b/app/components/login.module.css
index 7c45befa..167b57d7 100644
--- a/app/components/login.module.css
+++ b/app/components/login.module.css
@@ -9,7 +9,7 @@
 }
 
 .errorMessage {
-  color: var(--color-danger);
+  color: var(--color-error);
   margin-bottom: var(--space-1);
   text-align: center;
 }
diff --git a/app/styles/accountEdit.module.css b/app/styles/accountEdit.module.css
index ea1e6a47..7cc3a626 100644
--- a/app/styles/accountEdit.module.css
+++ b/app/styles/accountEdit.module.css
@@ -20,7 +20,7 @@
 }
 
 .errorMessage {
-  color: var(--color-danger);
+  color: var(--color-error);
 }
 
 .actions {
diff --git a/app/styles/emailVerify.module.css b/app/styles/emailVerify.module.css
index c7afe77c..581ebb96 100644
--- a/app/styles/emailVerify.module.css
+++ b/app/styles/emailVerify.module.css
@@ -1,3 +1,3 @@
 .errorMessage {
-  color: var(--color-danger);
+  color: var(--color-error);
 }
diff --git a/app/styles/tokens.css b/app/styles/tokens.css
index cbcdb92f..f7fde86f 100644
--- a/app/styles/tokens.css
+++ b/app/styles/tokens.css
@@ -2,7 +2,7 @@
   --color-border: #000;
   --color-muted: #666;
   --color-surface-hover: #f4f4f6;
-  --color-danger: #d92d20;
+  --color-error: #d92d20;
 
   --space-0: 0; /* 0px */
   --space-0-25: 0.25rem; /* 4px */