refactor: CSS変数を定義

app/components/followAccount.module.css

@@ -1,32 +1,32 @@
 .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 {
     width: 100%;
   }
 
   .accountNameContainer {
-    margin-left: 0.5rem;
+    margin-left: var(--space-0-5);
   }
 }

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);
   }
 }

app/components/login.module.css

@@ -9,7 +9,7 @@
 }
 
 .errorMessage {
-  color: var(--color-destructive-500, #d92d20);
-  margin-bottom: 1rem;
+  color: var(--color-error);
+  margin-bottom: var(--space-1);
   text-align: center;
 }

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;
 }

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);
   }
 }

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);
   }
 }

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 {

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);
 }

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({

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>

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>
       </>

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;
-  }
-}

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-error);
+}
+
+.actions {
+  display: flex;
+  gap: var(--space-1);
+}

app/styles/emailVerify.module.css

@@ -0,0 +1,3 @@
+.errorMessage {
+  color: var(--color-error);
+}

app/styles/tokens.css

@@ -0,0 +1,21 @@
+:root {
+  --color-border: #000;
+  --color-muted: #666;
+  --color-surface-hover: #f4f4f6;
+  --color-error: #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;
+}