From bd55cf80f266dc1b01ef90cc77338014ff568494 Mon Sep 17 00:00:00 2001
From: YESWmeshade <392950974@qq.com>
Date: Tue, 9 Dec 2025 21:01:04 +0800
Subject: [PATCH 1/6] feat(theme): adjust primary color via CSS variables

---
 src/tailwind.css | 39 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/tailwind.css b/src/tailwind.css
index 9c0f814..e3bb3b1 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -1,3 +1,40 @@
 @import "tailwindcss";
-
 @custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  --color-primary: hsl(221.2 83.2% 53.3%);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+
+  --rp-c-bg: var(--color-background);
+  --rp-c-text: var(--color-foreground);
+  --rp-c-brand: var(--color-primary);
+  --rp-c-brand-light: color-mix(in srgb, var(--color-primary) 80%, transparent);
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+@layer components {
+  .rspress-doc a {
+    @apply text-primary hover:underline;
+  }
+}

From c0f94c49de2ddf67562f3e7bccc3efbaed1dea60 Mon Sep 17 00:00:00 2001
From: YESWmeshade <392950974@qq.com>
Date: Mon, 12 Jan 2026 18:45:03 +0800
Subject: [PATCH 2/6] refactor(ui): replace hardcoded styles with Tailwind CSS
 variables

---
 src/list.tsx     |   8 ++--
 src/prompt.tsx   |  10 ++---
 src/sender.tsx   |  25 +++++------
 src/tailwind.css | 107 +++++++++++++++++++++++++++++++++++------------
 4 files changed, 100 insertions(+), 50 deletions(-)

diff --git a/src/list.tsx b/src/list.tsx
index 763bb93..6b2aa2b 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -1,3 +1,5 @@
+import "./tailwind.css";
+
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -130,7 +132,7 @@ export const List = ({
           key={key}
           role-slot="list-group"
           aria-label={String(groupContent || "")}
-          className={clsx("font-bold dark:text-gray-400 py-2 px-4 text-sm")}
+          className={clsx("font-bold text-muted-foreground py-2 px-4 text-sm")}
           style={listGroupStyle}
         >
           {String(groupContent || " ")}
@@ -153,8 +155,8 @@ export const List = ({
         key={key}
         role-slot="list-item"
         className={twMerge(
-          clsx("py-2 px-4 hover:bg-gray-200 text-gray-600 cursor-pointer", {
-            "bg-blue-500 text-white hover:bg-blue-600": isSelected,
+          clsx("py-2 px-4 hover:bg-accent text-foreground cursor-pointer", {
+            "bg-primary hover:bg-primary/90 text-primary-foreground hover:bg-primary-hover": isSelected,
           }),
         )}
         id={`lo_id_${index}`}
diff --git a/src/prompt.tsx b/src/prompt.tsx
index a24b53f..9642ac2 100644
--- a/src/prompt.tsx
+++ b/src/prompt.tsx
@@ -21,7 +21,7 @@ const promptsVariants = cva("flex", {
 });
 
 const promptVariants = cva(
-  "flex flex-col justify-center bg-white border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-sm transition-all duration-150 cursor-pointer",
+  "flex flex-col justify-center bg-background-elevated border-border hover:border-border/80",
   {
     variants: {
       size: {
@@ -38,7 +38,7 @@ const promptVariants = cva(
   },
 );
 
-const promptTitleVariants = cva("font-medium text-gray-900", {
+const promptTitleVariants = cva("font-medium text-foreground", {
   variants: {
     size: {
       xs: "text-sm",
@@ -53,7 +53,7 @@ const promptTitleVariants = cva("font-medium text-gray-900", {
   },
 });
 
-const promptDescriptionVariants = cva("text-gray-600", {
+const promptDescriptionVariants = cva("text-muted-foreground", {
   variants: {
     size: {
       xs: "text-xs",
@@ -106,7 +106,7 @@ export function PromptTitle({
     ? twMerge(clsx(promptTitleVariants({ size, className })))
     : twMerge(
         clsx(
-          "font-medium text-gray-900",
+          "font-medium text-foreground",
           "[div[data-size='xs']_&]:text-sm",
           "[div[data-size='sm']_&]:text-base",
           "[div[data-size='default']_&]:text-base",
@@ -130,7 +130,7 @@ export function PromptDescription({
     ? twMerge(clsx(promptDescriptionVariants({ size, className })))
     : twMerge(
         clsx(
-          "text-gray-600",
+          "text-muted-foreground",
           "[div[data-size='xs']_&]:text-xs",
           "[div[data-size='sm']_&]:text-sm",
           "[div[data-size='default']_&]:text-sm",
diff --git a/src/sender.tsx b/src/sender.tsx
index 241b3d6..3ce3072 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -21,7 +21,7 @@ export function InputCount({
   ...props
 }: InputCountProps) {
   return (
-    <span className={clsx("text-gray-400", className)} {...props}>
+    <span className={clsx("text-muted", className)} {...props}>
       {count} / {limit}
     </span>
   );
@@ -58,7 +58,7 @@ export function SenderButton({
       data-slot="sender-button"
       className={twMerge(
         clsx(
-          "flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 hover:bg-blue-500/90 text-white cursor-pointer",
+          "flex items-center justify-center cursor-pointer size-icon-button rounded-full bg-primary text-primary-foreground hover:bg-primary-hover",
           className,
         ),
       )}
@@ -66,7 +66,7 @@ export function SenderButton({
     >
       {icon ?? (
         <img
-          className="filter !brightness-0 invert"
+          className="filter brightness-0! invert"
           src={isSending ? QuickStop : PublishNew}
           alt={isSending ? "icon-quick-stop" : "icon-publish-new"}
         />
@@ -211,15 +211,15 @@ export function Sender({
       data-slot="sender"
       className={twMerge(
         clsx(
-          "relative px-1 flex flex-col items-center border rounded-2xl",
-          "border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-300 hover:shadow-md",
-          "focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
+          "relative px-1 flex flex-col items-center border rounded-xl",
+          "border-border shadow-sm transition-all duration-normal hover:shadow-md",
+          "focus-within:ring-2 focus-within:ring-ring focus-within:border-primary",
           className,
         ),
       )}
       {...props}
     >
-      <div className="absolute bottom-full left-0 w-full bg-white dark:bg-gray-50 rounded-lg shadow-amber-50 max-h-64 overflow-y-auto">
+      <div className="absolute bottom-full left-0 w-full bg-background-elevated rounded-lg shadow-elevated max-h-dropdown overflow-y-auto">
         <Suggestion
           message={message}
           textareaRef={textareaRef}
@@ -234,14 +234,9 @@ export function Sender({
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         className={clsx(
-          "w-full pt-4 px-4 border-0 rounded-2xl !resize-none bg-transparent",
-          "focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400",
-          "overflow-y-auto max-h-32",
-          "[scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full",
-          "[&::-webkit-scrollbar-thumb]:cursor-auto",
-          "[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600",
-          "[&::-webkit-scrollbar-thumb:hover]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-gray-500",
-          "[&::-webkit-scrollbar-track]:mt-3",
+          "w-full pt-4 px-4 border-0 rounded-xl resize-none! bg-transparent",
+          "focus:ring-0 focus:outline-none text-foreground placeholder-muted",
+          "overflow-y-auto max-h-textarea custom-scrollbar", // 关键变化！
         )}
         rows={2}
       />
diff --git a/src/tailwind.css b/src/tailwind.css
index e3bb3b1..b7eb2a4 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -2,39 +2,92 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(222.2 84% 4.9%);
-  --color-primary: hsl(221.2 83.2% 53.3%);
-
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-primary: var(--primary);
-
-  --rp-c-bg: var(--color-background);
-  --rp-c-text: var(--color-foreground);
-  --rp-c-brand: var(--color-primary);
-  --rp-c-brand-light: color-mix(in srgb, var(--color-primary) 80%, transparent);
-}
+  /* 1. color */
+  --color-background: oklch(1 0 0);             /* white    */
+  --color-foreground: oklch(0.2 0 0);           /* gray-700 */
+  
+  --color-background-elevated: oklch(1 0 0);    /* white */
+
+  --color-primary: oklch(0.62 0.21 260);        /* blue-500 */
+  --color-primary-foreground: oklch(1 0 0);     /* white */
+
+  --color-muted: oklch(0.6 0 0);                /* gray-400 */
+  --color-muted-foreground: oklch(0.55 0 0);
+
+  --color-accent: oklch(0.96 0 0);
+  --color-accent-foreground: oklch(0.2 0 0);
+  
+  --color-border: oklch(0.87 0.01 260);         /* gray-200 */
+  --color-scrollbar: oklch(0.87 0.01 260);      /* gray-300 */
+  --color-scrollbar-hover: oklch(0.7 0.01 260); /* gray-400 */
+  --color-ring: oklch(0.62 0.21 260);           /* primary */
+
+  /* 2. Rounded Corner   */
+  --radius-lg: 0.5rem;                          /* rounded-lg */
+  --radius-xl: 1rem;                            /* rounded-2xl */
+  --radius-full: 9999px;                        /* rounded-full */
+
+  /* 3. shadow */
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-elevated: 0 10px 15px -3px rgb(253 230 138 / 0.3); /* amber-50 */
+
+  /* 4. Type  */
+  --size-icon-button: 2rem;                     /* h-8 w-8 */
+  --height-textarea-max: 8rem;                  /* max-h-32 */
+  --height-dropdown-max: 16rem;                 /* max-h-64 */
 
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --primary: 221.2 83.2% 53.3%;
+  /* 5. Motion  */
+  --duration-normal: 300ms;
+
+  /* 6. Spacing */
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;   /* py-2 */
+  --spacing-4: 1rem;     /* px-4, gap-4 */
 }
 
 .dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 59.8%;
-}
+  @theme {
+    --color-background: oklch(0.15 0.01 260);
+    --color-foreground: oklch(0.9 0 0);
+    --color-background-elevated: oklch(0.13 0 0);
+    --color-border: oklch(0.3 0.01 260);
+    
+    --color-accent: oklch(0.26 0 0);
+    --color-muted: oklch(0.65 0 0);
+    --color-muted-foreground: oklch(0.65 0 0);
 
-@layer base {
-  body {
-    @apply bg-background text-foreground;
+    --color-scrollbar: oklch(0.26 0 0);
+    --color-scrollbar-hover: oklch(0.4 0 0);
+    
+    --shadow-elevated: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.05);
   }
 }
+
+
 @layer components {
-  .rspress-doc a {
-    @apply text-primary hover:underline;
+  .bg-primary-hover {
+    background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
   }
-}
+    .custom-scrollbar {
+    scrollbar-gutter: stable;
+    
+    &::-webkit-scrollbar {
+      width: 0.375rem;  /* w-1.5 */
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      border-radius: 9999px;
+      cursor: auto;
+      background-color: var(--color-scrollbar);
+      
+      &:hover {
+        background-color: var(--color-scrollbar-hover);
+      }
+    }
+    
+    &::-webkit-scrollbar-track {
+      margin-top: var(--spacing-3);
+    }
+  }
+}
\ No newline at end of file

From e9cefe7a357682f2b1207f4202a8a0a71d9c3693 Mon Sep 17 00:00:00 2001
From: YESWmeshade <392950974@qq.com>
Date: Mon, 12 Jan 2026 18:54:36 +0800
Subject: [PATCH 3/6] refactor(ui): replace hardcoded styles with Tailwind CSS
 variables

---
 src/tailwind.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tailwind.css b/src/tailwind.css
index b7eb2a4..24be95f 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -90,4 +90,4 @@
       margin-top: var(--spacing-3);
     }
   }
-}
\ No newline at end of file
+}

From ca787dd51aa3149335268b3c07e423eaee3e693c Mon Sep 17 00:00:00 2001
From: YESWmeshade <392950974@qq.com>
Date: Tue, 13 Jan 2026 14:25:23 +0800
Subject: [PATCH 4/6] refactor(ui): replace hardcoded styles with Tailwind CSS
 variables

---
 src/button.tsx      |  10 +--
 src/file-upload.tsx |   2 +-
 src/list.tsx        |  20 ++++--
 src/prompt.tsx      |  30 ++++----
 src/sender.tsx      |  21 +++---
 src/tailwind.css    | 165 +++++++++++++++++++++++++-------------------
 6 files changed, 142 insertions(+), 106 deletions(-)

diff --git a/src/button.tsx b/src/button.tsx
index f7f0f58..d518c4e 100644
--- a/src/button.tsx
+++ b/src/button.tsx
@@ -6,16 +6,16 @@ import type * as React from "react";
 import { twMerge } from "tailwind-merge";
 
 const buttonVariants = cva(
-  "cursor-pointer inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors text-white dark:text-white/80",
+  "inline-flex items-center justify-center rounded-mc-btn text-sm font-medium transition-colors text-mc-btn-fg",
   {
     variants: {
       variant: {
-        default: "bg-blue-500 hover:bg-blue-500/90 gap-1",
+        default: "bg-mc-btn hover:bg-mc-btn-hv gap-mc-btn-gap",
         link: "underline-offset-4 hover:underline",
       },
       size: {
-        default: "px-4 py-2",
-        icon: "p-2",
+        default: "px-mc-btn-px py-mc-btn-py",
+        icon: "p-mc-2",
       },
     },
     defaultVariants: {
@@ -33,7 +33,7 @@ function Button({
 }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
   return (
     <button
-      data-slot="button"
+      data-slot="mc-btn"
       className={twMerge(clsx(buttonVariants({ variant, size, className })))}
       {...props}
     />
diff --git a/src/file-upload.tsx b/src/file-upload.tsx
index 9015282..d0276ed 100644
--- a/src/file-upload.tsx
+++ b/src/file-upload.tsx
@@ -28,7 +28,7 @@ export function FileUpload({
       data-slot="file-upload"
       type="button"
       className={twMerge(
-        clsx("cursor-pointer text-gray-500 hover:text-gray-500/80", className),
+        clsx("cursor-pointer text-mc-fu-fg hover:text-mc-fu-hv", className),
       )}
       onClick={() => fileInputRef.current?.click()}
       {...props}
diff --git a/src/list.tsx b/src/list.tsx
index 6b2aa2b..e786b05 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -132,7 +132,9 @@ export const List = ({
           key={key}
           role-slot="list-group"
           aria-label={String(groupContent || "")}
-          className={clsx("font-bold text-muted-foreground py-2 px-4 text-sm")}
+          className={clsx(
+            "font-bold text-mc-sd-mut py-mc-li-py px-mc-li-px text-sm",
+          )}
           style={listGroupStyle}
         >
           {String(groupContent || " ")}
@@ -155,9 +157,12 @@ export const List = ({
         key={key}
         role-slot="list-item"
         className={twMerge(
-          clsx("py-2 px-4 hover:bg-accent text-foreground cursor-pointer", {
-            "bg-primary hover:bg-primary/90 text-primary-foreground hover:bg-primary-hover": isSelected,
-          }),
+          clsx(
+            "py-mc-li-py px-mc-li-px hover:bg-mc-li-hv text-mc-fg cursor-pointer",
+            {
+              "bg-mc-li-act text-mc-li-act-fg": isSelected,
+            },
+          ),
         )}
         id={`lo_id_${index}`}
         style={listItemStyle}
@@ -194,7 +199,12 @@ export const List = ({
   const list = createList();
 
   return (
-    <div style={listStyle} data-slot="list" {...props}>
+    <div
+      className={twMerge(clsx("bg-mc-bg", props.className))}
+      style={listStyle}
+      data-slot="list"
+      {...props}
+    >
       {list}
     </div>
   );
diff --git a/src/prompt.tsx b/src/prompt.tsx
index 9642ac2..d487426 100644
--- a/src/prompt.tsx
+++ b/src/prompt.tsx
@@ -8,11 +8,11 @@ import { twMerge } from "tailwind-merge";
 const promptsVariants = cva("flex", {
   variants: {
     size: {
-      xs: "gap-2",
-      sm: "gap-3",
-      default: "gap-4",
-      md: "gap-4",
-      lg: "gap-5",
+      xs: "gap-mc-pt-layout-gap-xs",
+      sm: "gap-mc-pt-layout-gap-sm",
+      default: "gap-mc-pt-layout-gap",
+      md: "gap-mc-pt-layout-gap",
+      lg: "gap-mc-pt-layout-gap-lg",
     },
   },
   defaultVariants: {
@@ -21,15 +21,15 @@ const promptsVariants = cva("flex", {
 });
 
 const promptVariants = cva(
-  "flex flex-col justify-center bg-background-elevated border-border hover:border-border/80",
+  "flex flex-col justify-center bg-mc-pt-bg border-mc-pt-brd rounded-mc-pt transition-all duration-mc-pt hover:shadow-mc-pt-el",
   {
     variants: {
       size: {
-        xs: "px-3 py-2 gap-1",
-        sm: "px-4 py-2.5 gap-1.5",
-        default: "px-4 py-3 gap-2",
-        md: "px-5 py-3.5 gap-2",
-        lg: "px-6 py-4 gap-2.5",
+        xs: "px-mc-pt-px-xs py-mc-pt-py-xs gap-mc-pt-gap-xs",
+        sm: "px-mc-pt-px-sm py-mc-pt-py-sm gap-mc-pt-gap-sm",
+        default: "px-mc-pt-px py-mc-pt-py gap-mc-pt-gap",
+        md: "px-mc-pt-px-md py-mc-pt-py-md gap-mc-pt-gap",
+        lg: "px-mc-pt-px-lg py-mc-pt-py-lg gap-mc-pt-gap-lg",
       },
     },
     defaultVariants: {
@@ -38,7 +38,7 @@ const promptVariants = cva(
   },
 );
 
-const promptTitleVariants = cva("font-medium text-foreground", {
+const promptTitleVariants = cva("font-medium text-mc-pt-fg", {
   variants: {
     size: {
       xs: "text-sm",
@@ -53,7 +53,7 @@ const promptTitleVariants = cva("font-medium text-foreground", {
   },
 });
 
-const promptDescriptionVariants = cva("text-muted-foreground", {
+const promptDescriptionVariants = cva("text-mc-pt-mut", {
   variants: {
     size: {
       xs: "text-xs",
@@ -106,7 +106,7 @@ export function PromptTitle({
     ? twMerge(clsx(promptTitleVariants({ size, className })))
     : twMerge(
         clsx(
-          "font-medium text-foreground",
+          "font-medium text-mc-pt-fg",
           "[div[data-size='xs']_&]:text-sm",
           "[div[data-size='sm']_&]:text-base",
           "[div[data-size='default']_&]:text-base",
@@ -130,7 +130,7 @@ export function PromptDescription({
     ? twMerge(clsx(promptDescriptionVariants({ size, className })))
     : twMerge(
         clsx(
-          "text-muted-foreground",
+          "text-mc-pt-mut",
           "[div[data-size='xs']_&]:text-xs",
           "[div[data-size='sm']_&]:text-sm",
           "[div[data-size='default']_&]:text-sm",
diff --git a/src/sender.tsx b/src/sender.tsx
index 3ce3072..b801465 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -21,7 +21,7 @@ export function InputCount({
   ...props
 }: InputCountProps) {
   return (
-    <span className={clsx("text-muted", className)} {...props}>
+    <span className={clsx("text-mc-sd-mut", className)} {...props}>
       {count} / {limit}
     </span>
   );
@@ -58,7 +58,7 @@ export function SenderButton({
       data-slot="sender-button"
       className={twMerge(
         clsx(
-          "flex items-center justify-center cursor-pointer size-icon-button rounded-full bg-primary text-primary-foreground hover:bg-primary-hover",
+          "flex items-center justify-center cursor-pointer size-mc-btn-ic rounded-full bg-mc-btn text-mc-btn-fg hover:bg-mc-btn-hv",
           className,
         ),
       )}
@@ -211,15 +211,16 @@ export function Sender({
       data-slot="sender"
       className={twMerge(
         clsx(
-          "relative px-1 flex flex-col items-center border rounded-xl",
-          "border-border shadow-sm transition-all duration-normal hover:shadow-md",
-          "focus-within:ring-2 focus-within:ring-ring focus-within:border-primary",
+          "relative px-1 flex flex-col items-center border rounded-mc-sd",
+          "bg-mc-sd-bg border-mc-sd-brd shadow-mc-sd transition-all",
+          "focus-within:ring-2 focus-within:ring-mc-ring focus-within:border-mc-pri",
+          className,
           className,
         ),
       )}
       {...props}
     >
-      <div className="absolute bottom-full left-0 w-full bg-background-elevated rounded-lg shadow-elevated max-h-dropdown overflow-y-auto">
+      <div className="absolute bottom-full left-0 w-full bg-mc-sd-bg rounded-mc-sd-el shadow-mc-sd max-h-mc-sd-drp-max overflow-y-auto custom-scrollbar">
         <Suggestion
           message={message}
           textareaRef={textareaRef}
@@ -234,13 +235,13 @@ export function Sender({
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         className={clsx(
-          "w-full pt-4 px-4 border-0 rounded-xl resize-none! bg-transparent",
-          "focus:ring-0 focus:outline-none text-foreground placeholder-muted",
-          "overflow-y-auto max-h-textarea custom-scrollbar", // 关键变化！
+          "w-full pt-mc-4 px-mc-4 border-0 rounded-mc-sd resize-none! bg-transparent",
+          "focus:ring-0 focus:outline-none text-mc-sd-fg placeholder-mc-sd-mut",
+          "overflow-y-auto max-h-mc-sd-max custom-scrollbar",
         )}
         rows={2}
       />
-      <div className="flex items-center w-full px-4 py-2 gap-4">
+      <div className="flex items-center w-full px-mc-sd-p py-mc-li-py gap-mc-2">
         {toolbar}
         <SenderButton
           onClick={handleSend}
diff --git a/src/tailwind.css b/src/tailwind.css
index 24be95f..ef6d362 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -2,92 +2,117 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-  /* 1. color */
-  --color-background: oklch(1 0 0);             /* white    */
-  --color-foreground: oklch(0.2 0 0);           /* gray-700 */
-  
-  --color-background-elevated: oklch(1 0 0);    /* white */
+  /* Base */
+  --color-mc-bg: oklch(1 0 0); /* bg-white */
+  --color-mc-fg: oklch(0.2 0 0); /* text-slate-900 */
+  --color-mc-pri: oklch(0.62 0.21 260); /* bg-blue-600 */
+  --color-mc-pri-fg: oklch(1 0 0); /* text-white */
+  --color-mc-brd: oklch(0.87 0.01 260); /* border-slate-200 */
+  --color-mc-elev: oklch(1 0 0); /* bg-white */
+  --color-mc-mut: oklch(0.6 0 0); /* text-slate-600 */
+  --color-mc-mut-fg: oklch(0.55 0 0); /* text-slate-500 */
+  --color-mc-ring: var(--color-mc-pri); /* focus:ring-blue-600 */
+  --duration-mc-norm: 300ms; /* duration-300 */
+  --spacing-mc-1: 0.25rem; /* gap-1 */
+  --spacing-mc-2: 0.5rem; /* gap-2 */
+  --spacing-mc-3: 0.75rem; /* gap-3 */
+  --spacing-mc-4: 1rem; /* gap-4 */
+  /* Button Component*/
+  --color-mc-btn: var(--color-mc-pri); /* bg-blue-600 */
+  --color-mc-btn-fg: var(--color-mc-pri-fg); /* text-white */
+  --radius-mc-btn: 0.375rem; /* rounded-md */
+  --spacing-mc-btn-px: 1rem; /* px-4 */
+  --spacing-mc-btn-py: 0.5rem; /* py-2 */
+  --spacing-mc-btn-gap: 0.25rem; /* gap-1 */
+  --size-mc-btn-ic: 2rem; /* w-8 h-8 */
+  /* Sender Component */
+  --color-mc-sd-bg: var(--color-mc-elev); /* bg-white */
+  --color-mc-sd-brd: var(--color-mc-brd); /* border-slate-200 */
+  --color-mc-sd-mut: var(--color-mc-mut-fg); /* text-slate-500 */
+  --color-mc-sd-fg: var(--color-mc-fg); /* text-slate-900 */
+  --radius-mc-sd: 0.75rem; /* rounded-xl */
+  --radius-mc-sd-el: 0.5rem; /* rounded-lg */
+  --radius-mc-full: 9999px; /* rounded-full */
+  --shadow-mc-sd: 0 1px 3px 0 rgb(0 0 0 / 0.1); /* shadow-sm */
+  --shadow-mc-el: var(--shadow-mc-pt-el); /* shadow-xl */
+  --h-mc-sd-max: 8rem; /* max-h-32 */
+  --h-mc-sd-drp-max: 16rem; /* max-h-64 */
+  --spacing-mc-sd-p: 1rem; /* p-4 */
+  --spacing-mc-sd-pt: 1rem; /* pt-4 */
+  --spacing-mc-sd-inner-gap: var(--spacing-mc-2); /* gap-2 */
+  /* List Component */
+  --color-mc-li-act: var(--color-mc-pri); /* bg-blue-600 */
+  --color-mc-li-act-fg: var(--color-mc-pri-fg); /* text-white */
+  --color-mc-li-hv: oklch(0.96 0 0); /* hover:bg-slate-50 */
+  --spacing-mc-li-py: 0.5rem; /* py-2 */
+  --spacing-mc-li-px: 1rem; /* px-4 */
+  --spacing-mc-li-gap: 0.5rem; /* gap-2 */
+  --h-mc-li-max: 16rem; /* max-h-64 */
+  /* Prompt Component */
+  --color-mc-pt-bg: var(--color-mc-elev); /* bg-white */
+  --color-mc-pt-brd: var(--color-mc-brd); /* border-slate-200 */
+  --color-mc-pt-fg: var(--color-mc-fg); /* text-slate-900 */
+  --color-mc-pt-mut: var(--color-mc-mut-fg); /* text-slate-500 */
+  --radius-mc-pt: 0.5rem; /* rounded-lg */
+  --shadow-mc-pt-el: 0 10px 15px -3px rgb(0 0 0 / 0.1); /* shadow-xl */
+  --duration-mc-pt: var(--duration-mc-norm); /* duration-300 */
+  --spacing-mc-pt-px: 1rem; /* px-4 */
+  --spacing-mc-pt-py: 0.75rem; /* py-3 */
+  --spacing-mc-pt-gap: 0.5rem; /* gap-2 */
+  --spacing-mc-pt-px-xs: 0.75rem; /* px-3 */
+  --spacing-mc-pt-py-xs: 0.5rem; /* py-2 */
+  --spacing-mc-pt-px-sm: 1rem; /* px-4 */
+  --spacing-mc-pt-py-sm: 0.625rem; /* py-2.5 */
+  --spacing-mc-pt-gap-sm: 0.375rem; /* gap-1.5 */
+  --spacing-mc-pt-px-md: 1.25rem; /* px-5 */
+  --spacing-mc-pt-py-md: 0.875rem; /* py-3.5 */
+  --spacing-mc-pt-px-lg: 1.5rem; /* px-6 */
+  --spacing-mc-pt-py-lg: 1rem; /* py-4 */
+  --spacing-mc-pt-gap-lg: 0.625rem; /* gap-2.5 */
+  --spacing-mc-pt-layout-gap: 1rem; /* gap-4 */
+  --spacing-mc-pt-layout-gap-xs: 0.5rem; /* gap-2 */
+  --spacing-mc-pt-layout-gap-sm: 0.75rem; /* gap-3 */
+  --spacing-mc-pt-layout-gap-lg: 1.25rem; /* gap-5 */
+  /* FileUpload Component */
+  --color-mc-fu-fg: oklch(0.6 0 0); /* text-gray-500 */
+  --color-mc-fu-hv: oklch(0.45 0 0); /* hover:text-gray-700 */
 
-  --color-primary: oklch(0.62 0.21 260);        /* blue-500 */
-  --color-primary-foreground: oklch(1 0 0);     /* white */
-
-  --color-muted: oklch(0.6 0 0);                /* gray-400 */
-  --color-muted-foreground: oklch(0.55 0 0);
-
-  --color-accent: oklch(0.96 0 0);
-  --color-accent-foreground: oklch(0.2 0 0);
-  
-  --color-border: oklch(0.87 0.01 260);         /* gray-200 */
-  --color-scrollbar: oklch(0.87 0.01 260);      /* gray-300 */
-  --color-scrollbar-hover: oklch(0.7 0.01 260); /* gray-400 */
-  --color-ring: oklch(0.62 0.21 260);           /* primary */
-
-  /* 2. Rounded Corner   */
-  --radius-lg: 0.5rem;                          /* rounded-lg */
-  --radius-xl: 1rem;                            /* rounded-2xl */
-  --radius-full: 9999px;                        /* rounded-full */
-
-  /* 3. shadow */
-  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-elevated: 0 10px 15px -3px rgb(253 230 138 / 0.3); /* amber-50 */
-
-  /* 4. Type  */
-  --size-icon-button: 2rem;                     /* h-8 w-8 */
-  --height-textarea-max: 8rem;                  /* max-h-32 */
-  --height-dropdown-max: 16rem;                 /* max-h-64 */
-
-  /* 5. Motion  */
-  --duration-normal: 300ms;
-
-  /* 6. Spacing */
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;   /* py-2 */
-  --spacing-4: 1rem;     /* px-4, gap-4 */
+  /* Global */
+  --color-mc-sb: var(--color-mc-brd); /* border-slate-200 */
+  --color-mc-sb-hv: oklch(0.7 0.01 260); /* bg-slate-300 */
+  --w-mc-sb: 0.375rem; /* w-1.5 */
 }
-
 .dark {
   @theme {
-    --color-background: oklch(0.15 0.01 260);
-    --color-foreground: oklch(0.9 0 0);
-    --color-background-elevated: oklch(0.13 0 0);
-    --color-border: oklch(0.3 0.01 260);
-    
-    --color-accent: oklch(0.26 0 0);
-    --color-muted: oklch(0.65 0 0);
-    --color-muted-foreground: oklch(0.65 0 0);
+    --color-mc-bg: oklch(0.15 0.01 260); /* bg-slate-900 (approx) */
+    --color-mc-fg: oklch(0.9 0 0); /* text-slate-100 */
+    --color-mc-elev: oklch(0.13 0 0); /* bg-slate-950 (approx) */
+    --color-mc-brd: oklch(0.3 0.01 260); /* border-slate-700 */
 
-    --color-scrollbar: oklch(0.26 0 0);
-    --color-scrollbar-hover: oklch(0.4 0 0);
-    
-    --shadow-elevated: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.05);
+    --color-mc-sb-hv: oklch(0.5 0.01 260);
+    --shadow-mc-pt-el:
+      0 10px 15px -3px rgb(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.05);
   }
 }
-
-
 @layer components {
-  .bg-primary-hover {
-    background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+  .bg-mc-btn-hv {
+    background-color: color-mix(
+      in oklab,
+      var(--color-mc-pri) 90%,
+      transparent
+    ); /* hover:bg-blue-600/90 */
   }
-    .custom-scrollbar {
+  .custom-scrollbar {
     scrollbar-gutter: stable;
-    
     &::-webkit-scrollbar {
-      width: 0.375rem;  /* w-1.5 */
+      width: var(--w-mc-sb);
     }
-    
     &::-webkit-scrollbar-thumb {
       border-radius: 9999px;
-      cursor: auto;
-      background-color: var(--color-scrollbar);
-      
+      background-color: var(--color-mc-sb);
       &:hover {
-        background-color: var(--color-scrollbar-hover);
+        background-color: var(--color-mc-sb-hv);
       }
     }
-    
-    &::-webkit-scrollbar-track {
-      margin-top: var(--spacing-3);
-    }
   }
 }

From 5873ed04b5e45dcbabe5b65f99a503908c98dcb3 Mon Sep 17 00:00:00 2001
From: YESWmeshade <392950974@qq.com>
Date: Tue, 13 Jan 2026 14:33:42 +0800
Subject: [PATCH 5/6] refactor(ui): replace hardcoded styles with Tailwind CSS
 variables

---
 tests/index.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index d8cf7a8..da30e91 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -30,7 +30,7 @@ test("single prompt", () => {
   );
   expect(titleElement).toBeInTheDocument();
   expect(descriptionElement).toBeInTheDocument();
-  expect(titleElement).toHaveClass("font-medium", "text-gray-900");
+  expect(titleElement).toHaveClass("font-medium", "text-mc-pt-fg");
   expect(titleElement.tagName).toBe("H3");
   expect(descriptionElement).toHaveClass("text-gray-600");
 });

From 3613eaf58d87212eb4a9fcf03791a9b298f9a9ea Mon Sep 17 00:00:00 2001
From: YESWmeshade <392950974@qq.com>
Date: Tue, 13 Jan 2026 14:42:28 +0800
Subject: [PATCH 6/6] refactor(ui): replace hardcoded styles with Tailwind CSS
 variables

---
 tests/index.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index da30e91..d750d1f 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -32,5 +32,5 @@ test("single prompt", () => {
   expect(descriptionElement).toBeInTheDocument();
   expect(titleElement).toHaveClass("font-medium", "text-mc-pt-fg");
   expect(titleElement.tagName).toBe("H3");
-  expect(descriptionElement).toHaveClass("text-gray-600");
+  expect(descriptionElement).toHaveClass("text-mc-pt-mut");
 });