@nextclaw/ui 0.14.2 → 0.14.3

package/src/app/styles/design-system.css

@@ -1,13 +1,13 @@
 /**
  * NextClaw Design System
- * Warm minimalist palette inspired by YouWare + YouMind
- * Warm amber brand, warm neutral grays, refined details
+ * Quiet workbench palettes.
+ * Neutral surfaces carry the UI; accent colors only mark actions and focus.
  */
 
 @layer base {
    :root {
       /* ========================================
-       BRAND COLORS (Olive Green)
+       BRAND COLORS (Natural Olive)
        ======================================== */
       --brand-50: 94 20% 95%;
       --brand-100: 94 20% 90%;
@@ -140,7 +140,7 @@
       --radius-full: 9999px;
 
       /* ========================================
-       SHADOWS (Warmer tint)
+       SHADOWS (Natural warm tint)
        ======================================== */
       --shadow-xs: 0 1px 2px 0 rgb(30 20 10 / 0.04);
       --shadow-sm: 0 1px 3px 0 rgb(30 20 10 / 0.06), 0 1px 2px -1px rgb(30 20 10 / 0.04);
@@ -207,29 +207,175 @@
    }
 }
 
+@layer base {
+   :root[data-theme="minimal"] {
+      /* ========================================
+       BRAND COLORS (Minimal Ink)
+       ======================================== */
+      --brand-50: 0 0% 98%;
+      --brand-100: 0 0% 96%;
+      --brand-200: 0 0% 90%;
+      --brand-300: 0 0% 80%;
+      --brand-400: 0 0% 64%;
+      --brand-500: 0 0% 9%;
+      --brand-600: 0 0% 5%;
+      --brand-700: 0 0% 0%;
+      --brand-800: 0 0% 4%;
+      --brand-900: 0 0% 2%;
+
+      /* ========================================
+       NEUTRAL COLORS (Clean Gray / Ink scale)
+       ======================================== */
+      --gray-50: 0 0% 100%;
+      --gray-100: 0 0% 98%;
+      --gray-200: 0 0% 96%;
+      --gray-300: 0 0% 90%;
+      --gray-400: 0 0% 74%;
+      --gray-500: 0 0% 45%;
+      --gray-600: 0 0% 32%;
+      --gray-700: 0 0% 20%;
+      --gray-800: 0 0% 9%;
+      --gray-900: 0 0% 4%;
+
+      /* Semantic Colors */
+      --background: var(--gray-50);
+      --background-secondary: var(--gray-100);
+      --background-tertiary: var(--gray-200);
+      --foreground: var(--gray-800);
+      --foreground-secondary: var(--gray-700);
+      --foreground-tertiary: var(--gray-500);
+      --foreground-muted: var(--gray-400);
+      --primary: var(--brand-500);
+      --primary-hover: var(--brand-600);
+      --primary-active: var(--brand-700);
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: 0 0% 96%;
+      --accent-foreground: var(--brand-700);
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --card: 0 0% 100%;
+      --card-foreground: var(--gray-800);
+      --card-border: 0 0% 90%;
+      --popover: 0 0% 100%;
+      --popover-foreground: var(--gray-800);
+      --border: 0 0% 90%;
+      --border-hover: 0 0% 81%;
+      --border-active: var(--brand-500);
+      --input: 0 0% 100%;
+      --input-border: 0 0% 90%;
+      --input-focus: var(--brand-500);
+      --ring: var(--brand-500);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (minimal neutral tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+      --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.04);
+      --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.04);
+      --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04);
+      --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
+      --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.14);
+      --shadow-card: 0 0 8px 0 rgba(0, 0, 0, 0.04);
+      --shadow-card-hover: 0 0 16px 0 rgba(0, 0, 0, 0.06);
+   }
+}
+
+@layer base {
+   :root[data-theme="warm"] {
+      /* ========================================
+       BRAND COLORS (Paper Taupe)
+       ======================================== */
+      --brand-50: 36 35% 94%;
+      --brand-100: 35 32% 90%;
+      --brand-200: 34 26% 82%;
+      --brand-300: 32 20% 70%;
+      --brand-400: 30 16% 56%;
+      --brand-500: 28 15% 42%;
+      --brand-600: 27 16% 34%;
+      --brand-700: 25 18% 28%;
+      --brand-800: 24 20% 20%;
+      --brand-900: 23 24% 13%;
+
+      /* ========================================
+       NEUTRAL COLORS (Warm Paper / Ink scale)
+       ======================================== */
+      --gray-50: 40 38% 97%;
+      --gray-100: 39 30% 94%;
+      --gray-200: 36 24% 87%;
+      --gray-300: 34 18% 78%;
+      --gray-400: 32 10% 60%;
+      --gray-500: 30 9% 46%;
+      --gray-600: 28 10% 36%;
+      --gray-700: 26 14% 27%;
+      --gray-800: 24 18% 18%;
+      --gray-900: 22 24% 11%;
+
+      /* Semantic Colors */
+      --background: var(--gray-50);
+      --background-secondary: var(--gray-100);
+      --background-tertiary: var(--gray-200);
+      --foreground: var(--gray-800);
+      --foreground-secondary: var(--gray-700);
+      --foreground-tertiary: var(--gray-500);
+      --foreground-muted: var(--gray-400);
+      --primary: var(--brand-500);
+      --primary-hover: var(--brand-600);
+      --primary-active: var(--brand-700);
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: 38 30% 91%;
+      --accent-foreground: var(--brand-700);
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --card: 40 48% 98%;
+      --card-foreground: var(--gray-800);
+      --card-border: 34 22% 84%;
+      --popover: 40 48% 98%;
+      --popover-foreground: var(--gray-800);
+      --border: 34 22% 84%;
+      --border-hover: 32 20% 73%;
+      --border-active: var(--brand-500);
+      --input: 40 48% 98%;
+      --input-border: 34 22% 84%;
+      --input-focus: var(--brand-500);
+      --ring: var(--brand-500);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (warmer tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(30 20 10 / 0.04);
+      --shadow-sm: 0 1px 3px 0 rgb(30 20 10 / 0.06), 0 1px 2px -1px rgb(30 20 10 / 0.04);
+      --shadow-md: 0 4px 6px -1px rgb(30 20 10 / 0.06), 0 2px 4px -2px rgb(30 20 10 / 0.04);
+      --shadow-lg: 0 10px 15px -3px rgb(30 20 10 / 0.06), 0 4px 6px -4px rgb(30 20 10 / 0.04);
+      --shadow-xl: 0 20px 25px -5px rgb(30 20 10 / 0.08), 0 8px 10px -6px rgb(30 20 10 / 0.04);
+      --shadow-2xl: 0 25px 50px -12px rgb(30 20 10 / 0.15);
+   }
+}
+
 @layer base {
    :root[data-theme="cool"] {
       /* ========================================
-       BRAND COLORS (Cool Blue)
+       BRAND COLORS (Mist Blue)
        ======================================== */
-      --brand-50: 214 100% 97%;
-      --brand-100: 214 95% 93%;
-      --brand-200: 213 97% 87%;
-      --brand-300: 212 96% 78%;
-      --brand-400: 213 94% 68%;
-      --brand-500: 217 91% 60%;
-      --brand-600: 221 83% 53%;
-      --brand-700: 224 76% 48%;
-      --brand-800: 226 71% 40%;
-      --brand-900: 224 64% 33%;
+      --brand-50: 210 48% 96%;
+      --brand-100: 211 42% 92%;
+      --brand-200: 212 36% 84%;
+      --brand-300: 212 32% 72%;
+      --brand-400: 213 30% 60%;
+      --brand-500: 214 35% 48%;
+      --brand-600: 214 36% 42%;
+      --brand-700: 215 38% 34%;
+      --brand-800: 216 40% 26%;
+      --brand-900: 218 42% 18%;
 
       /* ========================================
        NEUTRAL COLORS (Cool Slate)
        ======================================== */
-      --gray-50: 210 20% 98%;
-      --gray-100: 220 14% 96%;
-      --gray-200: 220 13% 91%;
-      --gray-300: 216 12% 84%;
+      --gray-50: 210 32% 98%;
+      --gray-100: 210 24% 96%;
+      --gray-200: 214 18% 90%;
+      --gray-300: 216 14% 82%;
       --gray-400: 218 11% 65%;
       --gray-500: 220 9% 46%;
       --gray-600: 215 14% 34%;
@@ -255,16 +401,16 @@
       --accent-foreground: var(--brand-700);
       --muted: var(--gray-100);
       --muted-foreground: var(--gray-500);
-      --card: 0 0% 100%;
+      --card: 210 36% 99%;
       --card-foreground: var(--gray-800);
-      --card-border: var(--gray-200);
-      --popover: 0 0% 100%;
+      --card-border: 214 22% 87%;
+      --popover: 210 36% 99%;
       --popover-foreground: var(--gray-800);
-      --border: var(--gray-200);
-      --border-hover: var(--gray-300);
+      --border: 214 22% 87%;
+      --border-hover: 215 17% 76%;
       --border-active: var(--brand-500);
-      --input: 0 0% 100%;
-      --input-border: var(--gray-200);
+      --input: 210 36% 99%;
+      --input-border: 214 22% 87%;
       --input-focus: var(--brand-500);
       --ring: var(--brand-500);
       --ring-offset: var(--gray-50);
@@ -279,6 +425,222 @@
    }
 }
 
+@layer base {
+   :root[data-theme="dawn"] {
+      /* ========================================
+       BRAND COLORS (Dawn Clay)
+       ======================================== */
+      --brand-50: 352 34% 96%;
+      --brand-100: 352 30% 92%;
+      --brand-200: 352 25% 84%;
+      --brand-300: 352 22% 72%;
+      --brand-400: 351 22% 58%;
+      --brand-500: 350 24% 46%;
+      --brand-600: 350 25% 39%;
+      --brand-700: 349 26% 32%;
+      --brand-800: 348 28% 24%;
+      --brand-900: 347 30% 16%;
+
+      /* ========================================
+       NEUTRAL COLORS (Blush Paper)
+       ======================================== */
+      --gray-50: 24 38% 97%;
+      --gray-100: 20 30% 94%;
+      --gray-200: 18 22% 87%;
+      --gray-300: 17 18% 78%;
+      --gray-400: 16 10% 60%;
+      --gray-500: 15 9% 46%;
+      --gray-600: 12 10% 36%;
+      --gray-700: 10 13% 27%;
+      --gray-800: 8 16% 18%;
+      --gray-900: 6 20% 11%;
+
+      /* Semantic Colors */
+      --background: var(--gray-50);
+      --background-secondary: var(--gray-100);
+      --background-tertiary: var(--gray-200);
+      --foreground: var(--gray-800);
+      --foreground-secondary: var(--gray-700);
+      --foreground-tertiary: var(--gray-500);
+      --foreground-muted: var(--gray-400);
+      --primary: var(--brand-500);
+      --primary-hover: var(--brand-600);
+      --primary-active: var(--brand-700);
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: 352 34% 94%;
+      --accent-foreground: var(--brand-700);
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --card: 24 48% 98%;
+      --card-foreground: var(--gray-800);
+      --card-border: 18 22% 84%;
+      --popover: 24 48% 98%;
+      --popover-foreground: var(--gray-800);
+      --border: 18 22% 84%;
+      --border-hover: 16 20% 74%;
+      --border-active: var(--brand-500);
+      --input: 24 48% 98%;
+      --input-border: 18 22% 84%;
+      --input-focus: var(--brand-500);
+      --ring: var(--brand-500);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (clay tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(64 40 36 / 0.04);
+      --shadow-sm: 0 1px 3px 0 rgb(64 40 36 / 0.06), 0 1px 2px -1px rgb(64 40 36 / 0.04);
+      --shadow-md: 0 4px 6px -1px rgb(64 40 36 / 0.06), 0 2px 4px -2px rgb(64 40 36 / 0.04);
+      --shadow-lg: 0 10px 15px -3px rgb(64 40 36 / 0.06), 0 4px 6px -4px rgb(64 40 36 / 0.04);
+      --shadow-xl: 0 20px 25px -5px rgb(64 40 36 / 0.08), 0 8px 10px -6px rgb(64 40 36 / 0.04);
+      --shadow-2xl: 0 25px 50px -12px rgb(64 40 36 / 0.14);
+   }
+}
+
+@layer base {
+   :root[data-theme="graphite"] {
+      /* ========================================
+       BRAND COLORS (Quiet Graphite)
+       ======================================== */
+      --brand-50: 220 12% 95%;
+      --brand-100: 220 10% 91%;
+      --brand-200: 220 9% 84%;
+      --brand-300: 220 8% 72%;
+      --brand-400: 220 7% 58%;
+      --brand-500: 220 9% 39%;
+      --brand-600: 220 10% 32%;
+      --brand-700: 220 12% 25%;
+      --brand-800: 220 14% 18%;
+      --brand-900: 220 18% 11%;
+
+      /* ========================================
+       NEUTRAL COLORS (Soft Monochrome)
+       ======================================== */
+      --gray-50: 48 10% 97%;
+      --gray-100: 45 8% 94%;
+      --gray-200: 42 7% 87%;
+      --gray-300: 38 6% 78%;
+      --gray-400: 34 5% 60%;
+      --gray-500: 30 4% 46%;
+      --gray-600: 28 5% 36%;
+      --gray-700: 25 7% 27%;
+      --gray-800: 220 11% 18%;
+      --gray-900: 220 18% 11%;
+
+      /* Semantic Colors */
+      --background: var(--gray-50);
+      --background-secondary: var(--gray-100);
+      --background-tertiary: var(--gray-200);
+      --foreground: var(--gray-800);
+      --foreground-secondary: var(--gray-700);
+      --foreground-tertiary: var(--gray-500);
+      --foreground-muted: var(--gray-400);
+      --primary: var(--brand-500);
+      --primary-hover: var(--brand-600);
+      --primary-active: var(--brand-700);
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: 220 12% 92%;
+      --accent-foreground: var(--brand-700);
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --card: 48 13% 99%;
+      --card-foreground: var(--gray-800);
+      --card-border: 42 7% 84%;
+      --popover: 48 13% 99%;
+      --popover-foreground: var(--gray-800);
+      --border: 42 7% 84%;
+      --border-hover: 38 6% 74%;
+      --border-active: var(--brand-500);
+      --input: 48 13% 99%;
+      --input-border: 42 7% 84%;
+      --input-focus: var(--brand-500);
+      --ring: var(--brand-500);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (neutral tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(24 26 31 / 0.04);
+      --shadow-sm: 0 1px 3px 0 rgb(24 26 31 / 0.06), 0 1px 2px -1px rgb(24 26 31 / 0.04);
+      --shadow-md: 0 4px 6px -1px rgb(24 26 31 / 0.06), 0 2px 4px -2px rgb(24 26 31 / 0.04);
+      --shadow-lg: 0 10px 15px -3px rgb(24 26 31 / 0.06), 0 4px 6px -4px rgb(24 26 31 / 0.04);
+      --shadow-xl: 0 20px 25px -5px rgb(24 26 31 / 0.08), 0 8px 10px -6px rgb(24 26 31 / 0.04);
+      --shadow-2xl: 0 25px 50px -12px rgb(24 26 31 / 0.14);
+   }
+}
+
+@layer base {
+   :root[data-theme="probe"] {
+      /* ========================================
+       BRAND COLORS (Reference Ink)
+       ======================================== */
+      --brand-50: 210 16% 95%;
+      --brand-100: 210 14% 90%;
+      --brand-200: 210 12% 82%;
+      --brand-300: 210 11% 70%;
+      --brand-400: 210 12% 52%;
+      --brand-500: 210 14% 22%;
+      --brand-600: 210 16% 18%;
+      --brand-700: 210 18% 15%;
+      --brand-800: 210 20% 12%;
+      --brand-900: 210 24% 9%;
+
+      /* ========================================
+       NEUTRAL COLORS (Cream Paper / Ink)
+       ======================================== */
+      --gray-50: 42 83% 98%;
+      --gray-100: 41 80% 96%;
+      --gray-200: 38 48% 92%;
+      --gray-300: 38 24% 78%;
+      --gray-400: 180 2% 52%;
+      --gray-500: 213 6% 45%;
+      --gray-600: 213 6% 36%;
+      --gray-700: 213 6% 30%;
+      --gray-800: 207 28% 19%;
+      --gray-900: 210 30% 12%;
+
+      /* Semantic Colors */
+      --background: var(--gray-50);
+      --background-secondary: var(--gray-100);
+      --background-tertiary: var(--gray-200);
+      --foreground: var(--gray-800);
+      --foreground-secondary: var(--gray-700);
+      --foreground-tertiary: var(--gray-500);
+      --foreground-muted: var(--gray-400);
+      --primary: var(--brand-500);
+      --primary-hover: var(--brand-600);
+      --primary-active: var(--brand-700);
+      --secondary: var(--gray-100);
+      --secondary-hover: var(--gray-200);
+      --secondary-foreground: var(--gray-800);
+      --accent: 210 16% 92%;
+      --accent-foreground: var(--brand-700);
+      --muted: var(--gray-100);
+      --muted-foreground: var(--gray-500);
+      --card: 41 80% 96%;
+      --card-foreground: var(--gray-800);
+      --card-border: 38 26% 82%;
+      --popover: 42 83% 98%;
+      --popover-foreground: var(--gray-800);
+      --border: 38 26% 82%;
+      --border-hover: 210 14% 72%;
+      --border-active: var(--brand-500);
+      --input: 42 83% 98%;
+      --input-border: 38 26% 82%;
+      --input-focus: var(--brand-500);
+      --ring: var(--brand-500);
+      --ring-offset: var(--gray-50);
+
+      /* Shadows (ink / paper tint) */
+      --shadow-xs: 0 1px 2px 0 rgb(34 49 61 / 0.04);
+      --shadow-sm: 0 1px 3px 0 rgb(34 49 61 / 0.06), 0 1px 2px -1px rgb(34 49 61 / 0.04);
+      --shadow-md: 0 4px 6px -1px rgb(34 49 61 / 0.06), 0 2px 4px -2px rgb(34 49 61 / 0.04);
+      --shadow-lg: 0 10px 15px -3px rgb(34 49 61 / 0.06), 0 4px 6px -4px rgb(34 49 61 / 0.04);
+      --shadow-xl: 0 20px 25px -5px rgb(34 49 61 / 0.08), 0 8px 10px -6px rgb(34 49 61 / 0.04);
+      --shadow-2xl: 0 25px 50px -12px rgb(34 49 61 / 0.14);
+   }
+}
+
 @layer utilities {
    /* ========================================
      UTILITY CLASSES

package/src/app/test/vitest-setup.ts

@@ -14,3 +14,34 @@ class MockResizeObserver {
 }
 
 vi.stubGlobal('ResizeObserver', MockResizeObserver);
+
+class MemoryStorage implements Storage {
+  private readonly values = new Map<string, string>();
+
+  get length() {
+    return this.values.size;
+  }
+
+  clear = () => {
+    this.values.clear();
+  };
+
+  getItem = (key: string) => this.values.get(key) ?? null;
+
+  key = (index: number) => Array.from(this.values.keys())[index] ?? null;
+
+  removeItem = (key: string) => {
+    this.values.delete(key);
+  };
+
+  setItem = (key: string, value: string) => {
+    this.values.set(key, value);
+  };
+}
+
+if (typeof window !== 'undefined' && typeof window.localStorage?.getItem !== 'function') {
+  Object.defineProperty(window, 'localStorage', {
+    configurable: true,
+    value: new MemoryStorage()
+  });
+}

package/src/features/chat/components/chat-sidebar-list-mode-switch.tsx

@@ -10,16 +10,16 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
         type="button"
         aria-pressed={!isProjectFirstView}
         onClick={() => onSelectMode('time-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'text-gray-400 hover:text-gray-600' : 'font-medium text-gray-600')}
+        className={cn('transition-colors', isProjectFirstView ? 'text-muted-foreground/65 hover:text-muted-foreground' : 'font-medium text-foreground')}
       >
         {t('chatSidebarViewTime')}
       </button>
-      <span className="text-gray-300">/</span>
+      <span className="text-muted-foreground/35">/</span>
       <button
         type="button"
         aria-pressed={isProjectFirstView}
         onClick={() => onSelectMode('project-first')}
-        className={cn('transition-colors', isProjectFirstView ? 'font-medium text-gray-600' : 'text-gray-400 hover:text-gray-600')}
+        className={cn('transition-colors', isProjectFirstView ? 'font-medium text-foreground' : 'text-muted-foreground/65 hover:text-muted-foreground')}
       >
         {t('chatSidebarViewProject')}
       </button>

package/src/features/chat/components/conversation/__tests__/chat-conversation-header.test.tsx

@@ -36,9 +36,10 @@ describe("ChatConversationHeader", () => {
   it("uses a stable desktop height before and after session materialization", () => {
     renderHeader();
 
-    const header = screen.getByText("New Task").closest(".border-b");
+    const header = screen.getByTestId("chat-conversation-header");
 
     expect(header?.className).toContain("h-[52px]");
+    expect(header?.className).not.toContain("border-b");
     expect(header?.className).not.toContain("transition-all");
   });
 
@@ -58,9 +59,10 @@ describe("ChatConversationHeader", () => {
     });
 
     const moreActions = screen.getByRole("button", { name: "More actions" });
-    const header = screen.getByText("First message").closest(".border-b");
+    const header = screen.getByTestId("chat-conversation-header");
 
     expect(header?.className).toContain("h-[52px]");
+    expect(header?.className).not.toContain("border-b");
     expect(moreActions.className).toContain("h-7");
     expect(moreActions.className).toContain("w-7");
   });

package/src/features/chat/components/conversation/chat-conversation-header-section.tsx

@@ -103,7 +103,7 @@ export function ChatConversationHeaderSection({
       }
       sessionTypeBadge={
         sessionTypeLabel ? (
-          <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+          <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-muted px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
             {sessionTypeOption?.icon?.src ? (
               <span className="inline-flex h-[1.125rem] w-[1.125rem] items-center justify-center">
                 <SessionContextIconNode

package/src/features/chat/components/conversation/chat-conversation-header.tsx

@@ -16,11 +16,11 @@ export function ChatParentSessionBanner({
   }
   const trimmedLabel = parentSessionLabel.trim();
   return (
-    <div className="border-b border-gray-200/60 bg-white/75 px-4 py-2 backdrop-blur-sm sm:px-5">
+    <div className="bg-background/75 px-4 py-2 backdrop-blur-sm sm:px-5">
       <button
         type="button"
         onClick={onGoToParentSession}
-        className="inline-flex items-center gap-2 text-xs font-medium text-gray-600 transition-colors hover:text-gray-900"
+        className="inline-flex items-center gap-2 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
       >
         <ArrowLeft className="h-3.5 w-3.5" />
         <span>
@@ -55,10 +55,11 @@ export function ChatConversationHeader({
 
   return (
     <div
+      data-testid="chat-conversation-header"
       className={cn(
-        "border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-colors duration-200",
+        "bg-background/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-colors duration-200",
         isMobileLayout ? "px-3 sm:px-3" : "px-4 sm:px-5",
-        shouldShow ? "opacity-100" : "h-0 py-0 opacity-0 border-b-0",
+        shouldShow ? "opacity-100" : "h-0 py-0 opacity-0",
         shouldShow && (isMobileLayout ? "min-h-12 pb-2 pt-2" : "h-[52px]"),
       )}
       style={
@@ -73,11 +74,11 @@ export function ChatConversationHeader({
             icon={<ArrowLeft className="h-4 w-4" />}
             label={t("chat")}
             onClick={onBackToList}
-            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
           />
         ) : null}
         {leading}
-        <span className="text-sm font-medium text-gray-700 truncate">
+        <span className="text-sm font-medium text-foreground truncate">
           {title}
         </span>
         {sessionTypeBadge}

package/src/features/chat/components/conversation/chat-conversation-panel.tsx

@@ -34,7 +34,7 @@ export function ChatConversationPanel({
   }
 
   return (
-    <section className="flex-1 min-h-0 flex overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+    <section className="flex-1 min-h-0 flex overflow-hidden bg-background">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
         <ChatConversationParentBanner />
         <ChatConversationHeaderSection

package/src/features/chat/components/conversation/chat-conversation-skeleton.tsx

@@ -28,13 +28,13 @@ export function ChatConversationSkeleton() {
   return (
     <section
       data-testid="chat-conversation-skeleton"
-      className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white"
+      className="flex-1 min-h-0 flex flex-col overflow-hidden bg-background"
     >
       <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
         <div className="mx-auto flex min-h-full w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">
           <div className="flex flex-1 flex-col gap-8">
             <div className="space-y-6">
-              <Skeleton className="h-6 w-52 rounded-lg bg-gray-200/90" />
+              <Skeleton className="h-6 w-52 rounded-lg bg-muted" />
               <div className="space-y-5">
                 {CHAT_CONVERSATION_SKELETON_BUBBLES.map((bubble) => (
                   <div
@@ -44,7 +44,7 @@ export function ChatConversationSkeleton() {
                     <Skeleton
                       data-testid="chat-conversation-skeleton-bubble"
                       className={cn(
-                        "w-full bg-gray-200/80",
+                        "w-full bg-muted",
                         bubble.bubbleClassName,
                       )}
                     />
@@ -54,29 +54,29 @@ export function ChatConversationSkeleton() {
             </div>
             <div className="mt-auto grid gap-4 pb-2 sm:grid-cols-[minmax(0,1fr)_minmax(180px,240px)] sm:items-end">
               <div className="space-y-3">
-                <Skeleton className="h-4 w-40 rounded-full bg-gray-200/70" />
-                <Skeleton className="h-[112px] w-full rounded-[30px] bg-gray-200/70" />
+                <Skeleton className="h-4 w-40 rounded-full bg-muted" />
+                <Skeleton className="h-[112px] w-full rounded-[30px] bg-muted" />
               </div>
               <div className="hidden justify-end sm:flex">
-                <Skeleton className="h-10 w-36 rounded-full bg-gray-200/75" />
+                <Skeleton className="h-10 w-36 rounded-full bg-muted" />
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div className="border-t border-gray-200/80 bg-white p-4">
+      <div className="bg-background p-4">
         <div className="mx-auto w-full max-w-[min(1120px,100%)]">
-          <div className="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card">
+          <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-card">
             <div className="px-4 py-2.5">
-              <Skeleton className="h-[84px] w-full rounded-[28px] bg-gray-200/80" />
+              <Skeleton className="h-[84px] w-full rounded-[28px] bg-muted" />
             </div>
             <div className="flex items-center justify-between gap-3 px-3 pb-3">
               <div className="flex items-center gap-2">
-                <Skeleton className="h-8 w-20 rounded-full bg-gray-200/75" />
-                <Skeleton className="h-8 w-28 rounded-full bg-gray-200/75" />
-                <Skeleton className="hidden h-8 w-24 rounded-full bg-gray-200/70 sm:block" />
+                <Skeleton className="h-8 w-20 rounded-full bg-muted" />
+                <Skeleton className="h-8 w-28 rounded-full bg-muted" />
+                <Skeleton className="hidden h-8 w-24 rounded-full bg-muted sm:block" />
               </div>
-              <Skeleton className="h-8 w-8 rounded-full bg-gray-200/85" />
+              <Skeleton className="h-8 w-8 rounded-full bg-muted" />
             </div>
           </div>
         </div>