From dc36e8135702cd19d9236ff9c11b42c0e0742e27 Mon Sep 17 00:00:00 2001
From: mrsibe <mrsibe@qq.com>
Date: Thu, 24 Sep 2026 15:24:20 +0800
Subject: [PATCH 1/4] refactor(shell): express panel hierarchy with surfaces
 instead of shadows

The three workspace panels (source / ask / notes), the settings dialog and
the sidebar now sit on the ladder: sunken window chrome, base canvas between
panels, raised content panels with a hairline, overlay only for floating
layers. The panel trio of rounded-xl + border-0 + shadow-md is gone, as are
the shadow-sm on the tab bar and the settings content panel.

Settings gains a real hierarchy: the dialog is sunken, the nav rail is
transparent on it, and the content panel is raised. Previously the rail and
the panel were the same surface-base value, so the nav had no visual
container.

List rows (documents, notes, generated items) share one selected expression,
bg-surface-selected with hover:bg-surface-hover, and their meta lines move to
the tertiary text level. Row padding drops to px-2 py-2, the delete
affordance also reveals on focus-visible, and timestamp/meta text stops
competing with titles.

Two latent bugs fixed on the way:
- the sidebar menu button's outline variant wrapped an oklch() token in
  hsl(), which is invalid CSS, so the 1px outline never rendered.
- TopNavigationBar cast a KeyboardEvent through 'as unknown as MouseEvent'
  to satisfy a handler that only calls stopPropagation(); the parameter is
  now typed SyntheticEvent and the cast is gone.

Also makes bg-muted a recessed fill in dark mode (0.275, below surface-raised
at 0.325), so nested containers read as inset in both colour schemes instead
of flipping direction between them.
---
 DESIGN.md                                        |  6 ++++--
 src/renderer/src/assets/theme.css                |  5 ++++-
 .../src/components/common/TopNavigationBar.tsx   | 10 +++++-----
 .../src/components/layouts/DragHandle.tsx        |  2 +-
 .../src/components/notebook/NotePanel.tsx        |  4 ++--
 .../src/components/notebook/NotebookLayout.tsx   |  2 +-
 .../src/components/notebook/ProcessPanel.tsx     |  4 ++--
 .../src/components/notebook/SourcePanel.tsx      | 14 +++++++-------
 .../src/components/notebook/item/ItemList.tsx    | 16 ++++++++--------
 .../src/components/notebook/note/NoteList.tsx    | 10 ++++------
 .../components/notebook/source/DocumentList.tsx  |  6 +++---
 .../src/components/settings/SettingItem.tsx      |  2 +-
 .../components/settings/SettingsActionBar.tsx    |  2 +-
 .../components/settings/SettingsContentPanel.tsx |  2 +-
 .../src/components/settings/SettingsDialog.tsx   |  8 ++++----
 src/renderer/src/components/ui/sidebar.tsx       | 12 ++++++++----
 16 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 8b397e1..f751efe 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -61,8 +61,9 @@ Rules:
 - Adjacent surfaces must differ in lightness; two neighbours at the same value
   mean you are expressing hierarchy through a shadow, which is not allowed.
 - Inside a panel, nested containers (a bubble, an inline code block, an icon
-  tile) use `bg-muted` — a quiet opaque fill — not another surface step. Do not
-  nest `surface-raised` inside `surface-raised`.
+  tile) use `bg-muted` — a quiet opaque fill that is _recessed_ relative to
+  `surface-raised` in both colour schemes. Do not nest `surface-raised` inside
+  `surface-raised`.
 
 Legacy aliases kept for compatibility while pages migrate:
 `--background`, `--card`, `--popover`, `--sidebar`, `--accent`,
@@ -132,6 +133,7 @@ Base rhythm is 4 / 8 / 12 / 16 (`gap-1,2,3,4`; `p-2,3,4,6`). Half steps
 | Input / Select trigger                     | `h-9`    | `px-3`                                 |
 | List row, compact                          | `h-8`    | `px-2`                                 |
 | List row, comfortable                      | `h-9`    | `px-3`                                 |
+| List row, multi-line (title + meta)        | —        | `px-2 py-2`, `rounded-md`              |
 | Sidebar nav item                           | `h-8`    | `px-2`                                 |
 | Card / panel body padding                  | —        | `p-4`                                  |
 | Dialog padding                             | —        | `p-5`                                  |
diff --git a/src/renderer/src/assets/theme.css b/src/renderer/src/assets/theme.css
index 8dfe8bc..89c7926 100644
--- a/src/renderer/src/assets/theme.css
+++ b/src/renderer/src/assets/theme.css
@@ -125,7 +125,10 @@
   --surface-hover: oklch(0.9 0.01 262 / 0.06);
   --surface-selected: oklch(0.9 0.01 262 / 0.1);
 
-  --muted: oklch(0.3863 0.0235 265.6941);
+  /* --muted is a *recessed* fill: below surface-raised in both modes
+     (light 0.9551 vs 1.0, dark 0.275 vs 0.325) so a bubble, icon tile or
+     inline code block reads as inset instead of flipping direction. */
+  --muted: oklch(0.275 0.014 260);
 
   --foreground: oklch(0.7621 0.0202 262.9873);
   --muted-foreground: oklch(0.68 0.02 262.9873);
diff --git a/src/renderer/src/components/common/TopNavigationBar.tsx b/src/renderer/src/components/common/TopNavigationBar.tsx
index c462c1b..3eef9b5 100644
--- a/src/renderer/src/components/common/TopNavigationBar.tsx
+++ b/src/renderer/src/components/common/TopNavigationBar.tsx
@@ -46,7 +46,7 @@ export default function TopNavigationBar({
     }
   }
 
-  const handleCloseOpenedNotebook = (id: string, e: React.MouseEvent): void => {
+  const handleCloseOpenedNotebook = (id: string, e: React.SyntheticEvent): void => {
     e.stopPropagation()
 
     // 如果关闭的是当前笔记本，需要跳转
@@ -75,7 +75,7 @@ export default function TopNavigationBar({
 
   return (
     <div
-      className="h-12 shrink-0 flex items-center justify-between px-2 gap-0.5"
+      className="h-11 shrink-0 flex items-center justify-between px-2 gap-0.5"
       style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
     >
       {/* macOS 左侧空白区域（留给窗口控制按钮） */}
@@ -107,7 +107,7 @@ export default function TopNavigationBar({
             {/* 首页标签 */}
             <TabsTrigger
               value="home"
-              className="h-7 gap-2 px-3 data-[state=active]:bg-muted/50 data-[state=active]:shadow-sm rounded-md border data-[state=active]:border-border/50 border-transparent hover:bg-accent/50 transition-all"
+              className="h-7 gap-2 px-3 rounded-md border border-transparent text-muted-foreground transition-colors hover:bg-surface-hover hover:text-foreground data-[state=active]:border-border data-[state=active]:bg-surface-selected data-[state=active]:text-foreground data-[state=active]:font-medium"
             >
               <Home className="w-4 h-4" />
               <span>{t('home')}</span>
@@ -118,7 +118,7 @@ export default function TopNavigationBar({
               <TabsTrigger
                 key={notebook.id}
                 value={notebook.id}
-                className="h-7 gap-1 pr-2 pl-3 data-[state=active]:bg-muted/50 data-[state=active]:shadow-sm rounded-md border data-[state=active]:border-border/50 border-transparent hover:bg-accent/50 transition-all max-w-[200px]"
+                className="h-7 gap-1 pr-2 pl-3 rounded-md border border-transparent text-muted-foreground transition-colors hover:bg-surface-hover hover:text-foreground data-[state=active]:border-border data-[state=active]:bg-surface-selected data-[state=active]:text-foreground data-[state=active]:font-medium max-w-[200px]"
               >
                 <span className="truncate">{notebook.title}</span>
                 <span
@@ -127,7 +127,7 @@ export default function TopNavigationBar({
                   tabIndex={0}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
-                      handleCloseOpenedNotebook(notebook.id, e as unknown as React.MouseEvent)
+                      handleCloseOpenedNotebook(notebook.id, e)
                     }
                   }}
                   className="ml-1 inline-flex items-center justify-center h-4 w-4 p-0.5 rounded hover:bg-destructive/20 hover:text-destructive transition-colors"
diff --git a/src/renderer/src/components/layouts/DragHandle.tsx b/src/renderer/src/components/layouts/DragHandle.tsx
index c5c70ec..858225f 100644
--- a/src/renderer/src/components/layouts/DragHandle.tsx
+++ b/src/renderer/src/components/layouts/DragHandle.tsx
@@ -7,7 +7,7 @@ export interface DragHandleProps {
 export default function DragHandle({ onMouseDown }: DragHandleProps): ReactElement {
   return (
     <div
-      className="w-3 shrink-0 cursor-col-resize hover:bg-muted/30 transition-colors"
+      className="w-3 shrink-0 cursor-col-resize transition-colors hover:bg-surface-hover"
       onMouseDown={onMouseDown}
       style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
     />
diff --git a/src/renderer/src/components/notebook/NotePanel.tsx b/src/renderer/src/components/notebook/NotePanel.tsx
index 2a90f65..93336ed 100644
--- a/src/renderer/src/components/notebook/NotePanel.tsx
+++ b/src/renderer/src/components/notebook/NotePanel.tsx
@@ -305,7 +305,7 @@ export default function NotePanel(): ReactElement {
   }
 
   return (
-    <div className="flex flex-col bg-card rounded-xl overflow-hidden h-full shadow-md">
+    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-border bg-surface-raised">
       {isEditing && currentNote ? (
         // 编辑器页面 - 使用 key 强制在切换笔记时重新挂载
         <NoteEditorPanel
@@ -325,7 +325,7 @@ export default function NotePanel(): ReactElement {
           <PanelHeader
             draggable
             left={
-              <span className="text-sm text-foreground truncate w-full select-none">
+              <span className="text-sm font-medium text-foreground truncate w-full select-none">
                 {t('creativeSpace')}
               </span>
             }
diff --git a/src/renderer/src/components/notebook/NotebookLayout.tsx b/src/renderer/src/components/notebook/NotebookLayout.tsx
index faa6f83..4706803 100644
--- a/src/renderer/src/components/notebook/NotebookLayout.tsx
+++ b/src/renderer/src/components/notebook/NotebookLayout.tsx
@@ -69,7 +69,7 @@ export default function NotebookLayout(): ReactElement {
   }, [])
 
   return (
-    <div className="flex flex-col h-screen bg-background text-foreground">
+    <div className="flex flex-col h-screen bg-surface-base text-foreground">
       <TopNavigationBar onCreateClick={handleCreateNotebook} />
 
       <ResizableLayout
diff --git a/src/renderer/src/components/notebook/ProcessPanel.tsx b/src/renderer/src/components/notebook/ProcessPanel.tsx
index 03d606f..61a6c33 100644
--- a/src/renderer/src/components/notebook/ProcessPanel.tsx
+++ b/src/renderer/src/components/notebook/ProcessPanel.tsx
@@ -208,7 +208,7 @@ export default function ProcessPanel({
   }
 
   return (
-    <Card className="relative flex flex-col rounded-xl border-0 overflow-hidden h-full mx-0 shadow-md">
+    <Card className="relative flex h-full flex-col overflow-hidden">
       <PanelHeader
         draggable
         left={
@@ -295,7 +295,7 @@ export default function ProcessPanel({
 
       {/* 底部输入区域 - 绝对定位浮动在底部 */}
       <div className="absolute bottom-0 left-0 right-0 p-4 pointer-events-none shrink-0 z-20">
-        <div className="relative bg-muted/95 backdrop-blur-md rounded-lg border border-border focus-within:ring-2 focus-within:ring-ring shadow-lg pointer-events-auto select-none">
+        <div className="relative bg-surface-overlay/95 backdrop-blur-md rounded-lg border border-border focus-within:ring-2 focus-within:ring-ring shadow-elevation pointer-events-auto select-none">
           {/* 多行输入框 */}
           <Textarea
             ref={textareaRef}
diff --git a/src/renderer/src/components/notebook/SourcePanel.tsx b/src/renderer/src/components/notebook/SourcePanel.tsx
index 490a86e..8d3bd8b 100644
--- a/src/renderer/src/components/notebook/SourcePanel.tsx
+++ b/src/renderer/src/components/notebook/SourcePanel.tsx
@@ -435,7 +435,7 @@ export default function SourcePanel(): ReactElement {
   )
 
   return (
-    <Card className="flex flex-col rounded-xl border-0 overflow-hidden h-full shadow-md">
+    <Card className="flex h-full flex-col overflow-hidden">
       {selectedDocument ? (
         // 文档预览页面
         <DocumentViewerPanel
@@ -449,7 +449,7 @@ export default function SourcePanel(): ReactElement {
           <PanelHeader
             draggable
             left={
-              <span className="text-sm text-foreground truncate w-full select-none">
+              <span className="text-sm font-medium text-foreground truncate w-full select-none">
                 {t('knowledgeBase')}
               </span>
             }
@@ -471,11 +471,11 @@ export default function SourcePanel(): ReactElement {
 
                 {/* 添加菜单 */}
                 {showAddMenu && (
-                  <div className="absolute right-0 top-full mt-1 w-40 bg-popover border border-border rounded-lg shadow-lg overflow-hidden z-10">
+                  <div className="absolute right-0 top-full mt-1 w-44 bg-surface-overlay border border-border rounded-lg shadow-elevation overflow-hidden p-1 z-10">
                     <Button
                       onClick={handleFileUpload}
                       variant="ghost"
-                      className="w-full justify-start text-sm font-normal rounded-none"
+                      className="w-full justify-start text-sm font-normal"
                     >
                       <FileUp className="w-4 h-4" />
                       {t('uploadFile')}
@@ -486,7 +486,7 @@ export default function SourcePanel(): ReactElement {
                         setShowAddMenu(false)
                       }}
                       variant="ghost"
-                      className="w-full justify-start text-sm font-normal rounded-none"
+                      className="w-full justify-start text-sm font-normal"
                     >
                       <Globe className="w-4 h-4" />
                       {t('importUrl')}
@@ -497,7 +497,7 @@ export default function SourcePanel(): ReactElement {
                         setShowAddMenu(false)
                       }}
                       variant="ghost"
-                      className="w-full justify-start text-sm font-normal rounded-none"
+                      className="w-full justify-start text-sm font-normal"
                     >
                       <FileText className="w-4 h-4" />
                       {t('pasteText')}
@@ -508,7 +508,7 @@ export default function SourcePanel(): ReactElement {
                         setShowAddMenu(false)
                       }}
                       variant="ghost"
-                      className="w-full justify-start text-sm font-normal rounded-none"
+                      className="w-full justify-start text-sm font-normal"
                     >
                       <StickyNote className="w-4 h-4" />
                       {t('importNote')}
diff --git a/src/renderer/src/components/notebook/item/ItemList.tsx b/src/renderer/src/components/notebook/item/ItemList.tsx
index a668940..46bd7fd 100644
--- a/src/renderer/src/components/notebook/item/ItemList.tsx
+++ b/src/renderer/src/components/notebook/item/ItemList.tsx
@@ -160,14 +160,14 @@ function SortableItemRow({
           onOpenAnki?.(ankiCard.id)
         }
       }}
-      className={`group grid grid-cols-[auto_1fr_auto] gap-2 items-start p-3 rounded-lg border ${isDragging ? 'cursor-grabbing opacity-75' : 'cursor-grab hover:cursor-grab'} ${
+      className={`group grid grid-cols-[auto_1fr_auto] gap-2 items-start rounded-md border px-2 py-2 ${isDragging ? 'cursor-grabbing opacity-75' : 'cursor-grab hover:cursor-grab'} ${
         isGenerating
           ? 'bg-chart-1/5 border-chart-1/30 animate-pulse cursor-wait'
           : isFailed
             ? 'bg-destructive/5 border-destructive/30'
             : isCurrentNote
-              ? 'bg-primary/10 border-primary/20'
-              : 'border-transparent hover:bg-muted'
+              ? 'bg-surface-selected border-transparent'
+              : 'border-transparent hover:bg-surface-hover'
       }`}
     >
       {/* 图标列 - 固定宽度 */}
@@ -203,7 +203,7 @@ function SortableItemRow({
                 <span className="text-xs text-destructive">{t('failed')}</span>
               )}
             </h3>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-xs text-subtle-foreground">
               {t('mindMapVersion', { version: mindMap.version })}
             </p>
           </>
@@ -219,7 +219,7 @@ function SortableItemRow({
                 <span className="text-xs text-destructive">{t('failed')}</span>
               )}
             </h3>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-xs text-subtle-foreground">
               {t('quizVersion', { version: quiz.version })}
             </p>
           </>
@@ -235,14 +235,14 @@ function SortableItemRow({
                 <span className="text-xs text-destructive">{t('failed')}</span>
               )}
             </h3>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-xs text-subtle-foreground">
               {ankiCard.status === 'generating'
                 ? t('generatingCards')
                 : t('ankiCards', { count: ankiCard.cardsData?.length || 0 })}
             </p>
           </>
         )}
-        <p className="text-xs text-muted-foreground">
+        <p className="text-xs text-subtle-foreground">
           {new Date(item.updatedAt).toLocaleDateString(
             i18n.language === 'zh-CN' ? 'zh-CN' : 'en-US'
           )}
@@ -258,7 +258,7 @@ function SortableItemRow({
         onPointerDown={(e) => e.stopPropagation()}
         variant="ghost"
         size="icon"
-        className="opacity-0 group-hover:opacity-100 w-8 h-8 mt-0.5 text-destructive hover:bg-destructive/10 hover:text-destructive cursor-pointer"
+        className="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 mt-0.5 text-destructive hover:bg-destructive/10 hover:text-destructive cursor-pointer"
         title={
           isNote
             ? t('deleteNote')
diff --git a/src/renderer/src/components/notebook/note/NoteList.tsx b/src/renderer/src/components/notebook/note/NoteList.tsx
index 2e93992..9267216 100644
--- a/src/renderer/src/components/notebook/note/NoteList.tsx
+++ b/src/renderer/src/components/notebook/note/NoteList.tsx
@@ -47,10 +47,8 @@ export default function NoteList({
           <div
             key={note.id}
             onClick={() => onSelectNote(note)}
-            className={`group grid grid-cols-[auto_1fr_auto] gap-2 items-start p-3 rounded-lg border transition-colors cursor-pointer ${
-              currentNote?.id === note.id
-                ? 'bg-primary/10 border-primary/20'
-                : 'border-transparent hover:bg-muted'
+            className={`group grid grid-cols-[auto_1fr_auto] gap-2 items-start rounded-md px-2 py-2 transition-colors cursor-pointer ${
+              currentNote?.id === note.id ? 'bg-surface-selected' : 'hover:bg-surface-hover'
             }`}
           >
             {/* 图标列 - 固定宽度 */}
@@ -62,7 +60,7 @@ export default function NoteList({
               <p className="text-xs text-muted-foreground line-clamp-2">
                 {note.content.replace(/^#.*\n/, '').slice(0, 100)}
               </p>
-              <p className="text-xs text-muted-foreground">
+              <p className="text-xs text-subtle-foreground">
                 {new Date(note.updatedAt).toLocaleDateString(
                   i18n.language === 'zh-CN' ? 'zh-CN' : 'en-US'
                 )}
@@ -78,7 +76,7 @@ export default function NoteList({
               }}
               variant="ghost"
               size="icon"
-              className="opacity-0 group-hover:opacity-100 w-8 h-8 mt-0.5 text-destructive hover:bg-destructive/10 hover:text-destructive"
+              className="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 mt-0.5 text-destructive hover:bg-destructive/10 hover:text-destructive"
               title={t('deleteNote')}
             >
               <Trash2 className="w-4 h-4" />
diff --git a/src/renderer/src/components/notebook/source/DocumentList.tsx b/src/renderer/src/components/notebook/source/DocumentList.tsx
index c865fbc..711cd0f 100644
--- a/src/renderer/src/components/notebook/source/DocumentList.tsx
+++ b/src/renderer/src/components/notebook/source/DocumentList.tsx
@@ -118,7 +118,7 @@ function DocumentItem({ document, onDelete, onSelect }: DocumentItemProps): Reac
   return (
     <div
       onClick={() => onSelect(document)}
-      className="group grid grid-cols-[auto_1fr_auto] gap-2 items-start p-3 rounded-lg transition-colors cursor-pointer select-none hover:bg-muted"
+      className="group grid grid-cols-[auto_1fr_auto] gap-2 items-start rounded-md px-2 py-2 transition-colors cursor-pointer select-none hover:bg-surface-hover"
     >
       {/* 图标列 - 固定宽度 */}
       {getTypeIcon()}
@@ -126,7 +126,7 @@ function DocumentItem({ document, onDelete, onSelect }: DocumentItemProps): Reac
       {/* 内容列 - 可被压缩 */}
       <div className="min-w-0 flex flex-col gap-1">
         <h3 className="text-sm font-medium truncate">{document.title}</h3>
-        <p className="text-xs text-muted-foreground">{document.chunkCount} chunks</p>
+        <p className="text-xs text-subtle-foreground">{document.chunkCount} chunks</p>
         {document.status === 'processing' && (
           <p className="text-xs text-muted-foreground flex items-center gap-1">
             <Loader2 className="w-3 h-3 animate-spin" />
@@ -143,7 +143,7 @@ function DocumentItem({ document, onDelete, onSelect }: DocumentItemProps): Reac
         }}
         variant="ghost"
         size="icon"
-        className="opacity-0 group-hover:opacity-100 w-8 h-8 mt-0.5 text-destructive hover:bg-destructive/10 hover:text-destructive"
+        className="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 mt-0.5 text-destructive hover:bg-destructive/10 hover:text-destructive"
         title={t('deleteDocument')}
       >
         <Trash2 className="w-4 h-4" />
diff --git a/src/renderer/src/components/settings/SettingItem.tsx b/src/renderer/src/components/settings/SettingItem.tsx
index ce8c1a4..3073404 100644
--- a/src/renderer/src/components/settings/SettingItem.tsx
+++ b/src/renderer/src/components/settings/SettingItem.tsx
@@ -16,7 +16,7 @@ export default function SettingItem({
   action
 }: SettingItemProps): ReactElement {
   return (
-    <div className="bg-card border border-border rounded-xl p-4">
+    <div className="rounded-lg border border-border bg-muted p-4">
       {layout === 'horizontal' ? (
         <div className="flex items-center justify-between gap-6">
           <div className="flex-1 min-w-0 flex flex-col gap-0.5">
diff --git a/src/renderer/src/components/settings/SettingsActionBar.tsx b/src/renderer/src/components/settings/SettingsActionBar.tsx
index 44e0a1c..0380f7c 100644
--- a/src/renderer/src/components/settings/SettingsActionBar.tsx
+++ b/src/renderer/src/components/settings/SettingsActionBar.tsx
@@ -16,7 +16,7 @@ export default function SettingsActionBar({
 }: SettingsActionBarProps): ReactElement {
   const { t } = useTranslation('common')
   return (
-    <div className="bg-background p-6 shrink-0">
+    <div className="bg-surface-raised p-6 shrink-0">
       <div className="flex items-center justify-end gap-3">
         <Button onClick={onCancel} disabled={!hasChanges} variant="outline">
           <X className="w-4 h-4 mr-2" />
diff --git a/src/renderer/src/components/settings/SettingsContentPanel.tsx b/src/renderer/src/components/settings/SettingsContentPanel.tsx
index 08c7956..4dfb27d 100644
--- a/src/renderer/src/components/settings/SettingsContentPanel.tsx
+++ b/src/renderer/src/components/settings/SettingsContentPanel.tsx
@@ -27,7 +27,7 @@ export default function SettingsContentPanel({
   const { t } = useTranslation('settings')
 
   return (
-    <div className="flex-1 flex flex-col min-w-0 bg-background rounded-lg shadow-sm overflow-hidden">
+    <div className="flex-1 flex flex-col min-w-0 bg-surface-raised border border-border rounded-lg overflow-hidden">
       {/* 顶部标题栏 */}
       <div className="flex items-start justify-between gap-4 px-6 py-4">
         <div className="flex-1 min-w-0">
diff --git a/src/renderer/src/components/settings/SettingsDialog.tsx b/src/renderer/src/components/settings/SettingsDialog.tsx
index 30ed686..d43a5a1 100644
--- a/src/renderer/src/components/settings/SettingsDialog.tsx
+++ b/src/renderer/src/components/settings/SettingsDialog.tsx
@@ -141,13 +141,13 @@ export default function SettingsDialog(): ReactElement {
   return (
     <Dialog open={isSettingsOpen} onOpenChange={handleOpenChange}>
       <DialogContent
-        className="max-w-5xl h-[80vh] p-0 flex flex-col bg-sidebar"
+        className="max-w-5xl h-[80vh] p-0 flex flex-col bg-surface-sunken"
         showCloseButton={false}
       >
         <SidebarProvider className="flex flex-1 min-h-0">
           <div className="flex flex-1 min-h-0 gap-3 p-3 w-full">
             {/* 使用 Shadcn Sidebar */}
-            <Sidebar className="w-40" collapsible="none">
+            <Sidebar className="w-40 bg-transparent" collapsible="none">
               <SidebarContent>
                 <SidebarMenu>
                   {menuItems.map((item) => {
@@ -160,8 +160,8 @@ export default function SettingsDialog(): ReactElement {
                           isActive={isActive}
                           className={
                             isActive
-                              ? 'bg-sidebar-primary! text-sidebar-primary-foreground!'
-                              : 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
+                              ? 'bg-surface-selected! text-foreground! font-medium'
+                              : 'hover:bg-surface-hover hover:text-foreground'
                           }
                         >
                           <Icon className="w-4 h-4" />
diff --git a/src/renderer/src/components/ui/sidebar.tsx b/src/renderer/src/components/ui/sidebar.tsx
index ae92cc6..fb85139 100644
--- a/src/renderer/src/components/ui/sidebar.tsx
+++ b/src/renderer/src/components/ui/sidebar.tsx
@@ -311,8 +311,8 @@ const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main
       <main
         ref={ref}
         className={cn(
-          'relative flex w-full flex-1 flex-col bg-background',
-          'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+          'relative flex w-full flex-1 flex-col bg-surface-base',
+          'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-border',
           className
         )}
         {...props}
@@ -331,7 +331,7 @@ const SidebarInput = React.forwardRef<
       ref={ref}
       data-sidebar="input"
       className={cn(
-        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+        'h-8 w-full bg-surface-base shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
         className
       )}
       {...props}
@@ -500,8 +500,12 @@ const sidebarMenuButtonVariants = cva(
     variants: {
       variant: {
         default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        // The old value was `shadow-[0_0_0_1px_hsl(var(--sidebar-border))]`,
+        // but --sidebar-border is an oklch() colour, so hsl() around it was
+        // invalid and the outline never rendered. A ring draws the same 1px
+        // outline without shifting layout.
         outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
+          'bg-surface-raised ring-1 ring-sidebar-border hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
       },
       size: {
         default: 'h-8 text-sm',

From dffa2b57d21b0ae18ec48e45855d4e473de8b481 Mon Sep 17 00:00:00 2001
From: mrsibe <mrsibe@qq.com>
Date: Thu, 24 Sep 2026 15:29:05 +0800
Subject: [PATCH 2/4] refactor(pages): put the remaining screens on the token
 system

Library, home, reader, chat, quiz, flashcards, mind map and settings pages
now use the surface ladder, the three text levels and the two elevation
tokens. This is the last of the legacy usage: bg-card/bg-popover/bg-accent,
shadow-sm/md/lg, rounded-sm/xl/2xl and the raw blue/green/red/purple palette
are gone from src/renderer.

Notable decisions:
- the chat user bubble is neutral (bg-muted) instead of a solid accent fill;
  accent is now limited to the primary action, focus, selection, links and
  progress fills, as DESIGN.md states.
- quiz correctness uses a new --success token plus --destructive, with icons
  and labels, instead of blue/green/red literals that only worked in one
  theme.
- the flashcard type chips became outline badges with a chart-coloured dot:
  --chart-* sits at one lightness in both themes, so a text-bearing fill had
  no readable text colour.
- the home hero drops from 48px/bold to 20px/medium, and the quiz score from
  72px to 36px: both were marketing-page scale inside a desktop app.
- markdown/editor inline code loses its accent colour and gains the control
  radius (it was a fourth radius value in raw CSS).

Two latent bugs fixed on the way:
- markdown.css used 'color: var(--primary) / 80', which is not valid CSS, so
  the link hover colour never applied.
- quiz questionsData was typed through 'as any as QuizQuestion[]' in three
  places. The schema column now carries .$type<QuizQuestion[]>(), which
  removes all three casts; the neighbouring metadata columns move from
  Record<string, any> to Record<string, unknown>.
---
 DESIGN.md                                     | 17 +++--
 src/main/db/schema.ts                         |  9 +--
 src/renderer/src/App.tsx                      |  2 +-
 src/renderer/src/assets/theme.css             |  4 ++
 src/renderer/src/components/I18nProvider.tsx  |  6 +-
 src/renderer/src/components/home/Hero.tsx     |  6 +-
 .../src/components/notebook/ProcessPanel.tsx  |  2 +-
 .../components/notebook/anki/AnkiCardList.tsx | 19 ++---
 .../notebook/anki/FlashcardView.tsx           | 11 ++-
 .../components/notebook/chat/MessageItem.tsx  | 10 +--
 .../notebook/chat/ReasoningContent.tsx        |  4 +-
 .../src/components/notebook/chat/markdown.css |  6 +-
 .../notebook/mindmap/NodeDetailPanel.tsx      |  8 +--
 .../components/notebook/note/noteEditor.css   |  4 +-
 .../notebook/quiz/QuizGenerating.tsx          | 14 ++--
 .../notebook/quiz/QuizQuestionView.tsx        | 71 ++++++++-----------
 .../notebook/quiz/QuizResultView.tsx          | 26 ++++---
 .../src/components/pages/AnkiPage.tsx         | 12 ++--
 .../src/components/pages/MindMapPage.tsx      | 12 ++--
 .../src/components/pages/NotebookListPage.tsx |  2 +-
 .../src/components/pages/OnboardingPage.tsx   |  4 +-
 .../src/components/pages/QuizPage.tsx         |  8 +--
 .../src/components/settings/AboutSettings.tsx | 16 ++---
 .../components/settings/GeneralSettings.tsx   | 18 +++--
 .../settings/ModelConnectionForm.tsx          |  8 +--
 .../components/settings/ShortcutSettings.tsx  | 14 ++--
 src/renderer/src/store/quizStore.ts           |  5 +-
 27 files changed, 160 insertions(+), 158 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index f751efe..b6f85f1 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -170,12 +170,14 @@ Sizes:
 | 14px | `text-sm`     | **Default UI size**: buttons, labels, list rows, inputs, prose in chat and the editor |
 | 16px | `text-base`   | Dialog titles, empty-state body (only where 14px reads cramped)                       |
 | 18px | `text-lg`     | Page titles, empty-state titles                                                       |
-| 20px | `text-xl`     | Home hero only                                                                        |
+| 20px | `text-xl`     | Focus content: home page title, flashcard face                                        |
+| 36px | `text-4xl`    | A single focus readout (quiz score). One per screen                                   |
 
 Weights: `font-normal` for body, `font-medium` for interactive labels, panel
-headers, section titles and the selected state of anything. `font-semibold` and
-above are reserved for page titles and the home hero. Never use weight alone to
-express selection — pair it with `bg-surface-selected`.
+headers, section titles, titles and the selected state of anything.
+`font-semibold` and above are reserved for the one focus readout per screen.
+Never use weight alone to express selection — pair it with
+`bg-surface-selected`.
 
 Line height: UI text uses Tailwind defaults. Long-form reading surfaces
 (`markdown.css`, `noteEditor.css`) use 14px / `line-height: 1.75`.
@@ -196,7 +198,12 @@ Line height: UI text uses Tailwind defaults. Long-form reading surfaces
 Everywhere else — toolbars, icon buttons, headers, cards, badges, tab labels,
 progress — the UI is neutral. A blue icon in a neutral toolbar is a violation.
 `--destructive` is allowed only on a destructive action and its confirmation
-dialog. `--chart-*` are for charts, graph nodes and mind-map topic colouring.
+dialog, and `--success` only on the outcome of a graded result (correct answer,
+passing check). Neither is decoration, and neither may be the only carrier of
+state: pair it with an icon or a label. `--chart-*` are for charts, graph nodes
+and mind-map topic colouring, and are used as small data dots rather than as
+text-bearing fills (they sit at one lightness in both themes, so no single text
+colour reads on them).
 
 State expressions (use these literal forms, they are the contract):
 
diff --git a/src/main/db/schema.ts b/src/main/db/schema.ts
index fcdf300..ed4bd2d 100644
--- a/src/main/db/schema.ts
+++ b/src/main/db/schema.ts
@@ -1,4 +1,5 @@
 import { sqliteTable, text, integer, index } from 'drizzle-orm/sqlite-core'
+import type { QuizQuestion } from '../../shared/types/quiz'
 
 /**
  * 笔记本表
@@ -63,7 +64,7 @@ export const chatMessages = sqliteTable(
     role: text('role', { enum: ['user', 'assistant', 'system'] }).notNull(),
     content: text('content').notNull(),
     reasoningContent: text('reasoning_content'), // DeepSeek Reasoner 推理过程内容
-    metadata: text('metadata', { mode: 'json' }).$type<Record<string, any>>(),
+    metadata: text('metadata', { mode: 'json' }).$type<Record<string, unknown>>(),
     createdAt: integer('created_at', { mode: 'timestamp' }).notNull()
   },
   (table) => ({
@@ -131,7 +132,7 @@ export const documents = sqliteTable(
     contentHash: text('content_hash'), // 内容哈希，用于检测变更
     mimeType: text('mime_type'), // 文件类型
     fileSize: integer('file_size'), // 文件大小（字节）
-    metadata: text('metadata', { mode: 'json' }).$type<Record<string, any>>(),
+    metadata: text('metadata', { mode: 'json' }).$type<Record<string, unknown>>(),
     status: text('status', { enum: ['pending', 'processing', 'indexed', 'failed'] })
       .notNull()
       .default('pending'),
@@ -167,7 +168,7 @@ export const chunks = sqliteTable(
     chunkIndex: integer('chunk_index').notNull(), // 在文档中的顺序
     startOffset: integer('start_offset'), // 原文起始位置
     endOffset: integer('end_offset'), // 原文结束位置
-    metadata: text('metadata', { mode: 'json' }).$type<Record<string, any>>(),
+    metadata: text('metadata', { mode: 'json' }).$type<Record<string, unknown>>(),
     tokenCount: integer('token_count'), // token 估算值
     createdAt: integer('created_at', { mode: 'timestamp' }).notNull()
   },
@@ -258,7 +259,7 @@ export const quizzes = sqliteTable(
       .references(() => notebooks.id, { onDelete: 'cascade' }),
     title: text('title').notNull(),
     version: integer('version').notNull().default(1), // 版本号
-    questionsData: text('questions_data', { mode: 'json' }).notNull(), // 题目数组
+    questionsData: text('questions_data', { mode: 'json' }).$type<QuizQuestion[]>().notNull(), // 题目数组
     chunkMapping: text('chunk_mapping', { mode: 'json' }).notNull(), // questionId -> chunkIds映射
     metadata: text('metadata', { mode: 'json' }).$type<{
       model: string
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index c0ec0b9..c72d853 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -76,7 +76,7 @@ function App(): React.JSX.Element {
   // 如果正在加载引导状态，显示加载中
   if (onboardingLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-background">
+      <div className="flex items-center justify-center min-h-screen bg-surface-base">
         <div className="text-foreground">Loading...</div>
       </div>
     )
diff --git a/src/renderer/src/assets/theme.css b/src/renderer/src/assets/theme.css
index 89c7926..4e49aaf 100644
--- a/src/renderer/src/assets/theme.css
+++ b/src/renderer/src/assets/theme.css
@@ -44,6 +44,7 @@
   --ring: oklch(0.6017 0.193 263.2461);
   --destructive: oklch(0.6058 0.1839 29.6718);
   --destructive-foreground: oklch(1 0 0);
+  --success: oklch(0.55 0.12 150);
 
   /* Hairline. --input is the neutral fill of unchecked controls, not a border. */
   --border: oklch(0.9067 0 0);
@@ -134,6 +135,8 @@
   --muted-foreground: oklch(0.68 0.02 262.9873);
   --subtle-foreground: oklch(0.58 0.02 262.9873);
 
+  --success: oklch(0.75 0.13 150);
+
   --primary: oklch(0.7304 0.1213 245.2972);
   --ring: oklch(0.7304 0.1213 245.2972);
   --destructive: oklch(0.6709 0.1448 16.9989);
@@ -196,6 +199,7 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
diff --git a/src/renderer/src/components/I18nProvider.tsx b/src/renderer/src/components/I18nProvider.tsx
index 60752a6..5c53762 100644
--- a/src/renderer/src/components/I18nProvider.tsx
+++ b/src/renderer/src/components/I18nProvider.tsx
@@ -37,10 +37,10 @@ export const I18nProvider = ({ children }: I18nProviderProps) => {
   // 如果还在加载中，显示加载界面
   if (!isReady || isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-screen bg-background dark:bg-background-dark">
+      <div className="flex items-center justify-center min-h-screen bg-surface-base">
         <div className="flex flex-col items-center gap-4">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-          <p className="text-foreground dark:text-foreground-dark">Loading...</p>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-muted-foreground"></div>
+          <p className="text-sm text-muted-foreground">Loading...</p>
         </div>
       </div>
     )
diff --git a/src/renderer/src/components/home/Hero.tsx b/src/renderer/src/components/home/Hero.tsx
index e4d737f..8e5d50b 100644
--- a/src/renderer/src/components/home/Hero.tsx
+++ b/src/renderer/src/components/home/Hero.tsx
@@ -10,10 +10,10 @@ export default function Hero({ notebookCount }: HeroProps): ReactElement {
   const { t } = useTranslation('ui')
 
   return (
-    <div className="px-12 pt-12 pb-6">
+    <div className="px-6 pt-6 pb-4">
       <div className="max-w-7xl mx-auto space-y-4">
-        <h1 className="text-5xl font-bold text-foreground tracking-tight">{t('myNotebooks')}</h1>
-        <p className="text-base text-muted-foreground font-medium">
+        <h1 className="text-xl font-medium text-foreground tracking-tight">{t('myNotebooks')}</h1>
+        <p className="text-sm text-muted-foreground">
           {t('totalNotebooks', { count: notebookCount })}
         </p>
         <Separator />
diff --git a/src/renderer/src/components/notebook/ProcessPanel.tsx b/src/renderer/src/components/notebook/ProcessPanel.tsx
index 61a6c33..ded6a41 100644
--- a/src/renderer/src/components/notebook/ProcessPanel.tsx
+++ b/src/renderer/src/components/notebook/ProcessPanel.tsx
@@ -286,7 +286,7 @@ export default function ProcessPanel({
 
       {/* 底部渐变遮罩 - 独立于消息区域，避免堆叠上下文问题 */}
       <div
-        className="absolute bottom-0 left-0 right-0 h-48 pointer-events-none rounded-b-xl z-10"
+        className="absolute bottom-0 left-0 right-0 h-48 pointer-events-none rounded-b-lg z-10"
         style={{
           background:
             'linear-gradient(to bottom, transparent 0%, hsl(var(--card)) 40%, hsl(var(--card)) 100%)'
diff --git a/src/renderer/src/components/notebook/anki/AnkiCardList.tsx b/src/renderer/src/components/notebook/anki/AnkiCardList.tsx
index e0cafbd..08b6d68 100644
--- a/src/renderer/src/components/notebook/anki/AnkiCardList.tsx
+++ b/src/renderer/src/components/notebook/anki/AnkiCardList.tsx
@@ -24,11 +24,11 @@ export default function AnkiCardList({ cards }: AnkiCardListProps) {
 
   const getCardTypeColor = (type: string): string => {
     const colorMap: Record<string, string> = {
-      basic: 'bg-blue-500',
-      cloze: 'bg-green-500',
-      'fill-blank': 'bg-purple-500'
+      basic: 'bg-chart-1',
+      cloze: 'bg-chart-2',
+      'fill-blank': 'bg-chart-5'
     }
-    return colorMap[type] || 'bg-gray-500'
+    return colorMap[type] || 'bg-muted-foreground'
   }
 
   const renderCardContent = (card: AnkiCardItem): React.ReactNode => {
@@ -114,7 +114,7 @@ export default function AnkiCardList({ cards }: AnkiCardListProps) {
       <ScrollArea className="h-full">
         <div className="p-6 space-y-4">
           <div className="flex items-center justify-between mb-4">
-            <h2 className="text-2xl font-bold">{t('cardList')}</h2>
+            <h2 className="text-lg font-medium">{t('cardList')}</h2>
             <Badge variant="secondary" className="text-lg px-3 py-1">
               {cards.length} {t('cards')}
             </Badge>
@@ -125,12 +125,15 @@ export default function AnkiCardList({ cards }: AnkiCardListProps) {
           ) : (
             <div className="grid gap-4">
               {cards.map((card, index) => (
-                <Card key={card.id} className="hover:shadow-md transition-shadow">
+                <Card key={card.id}>
                   <CardHeader className="pb-3">
                     <div className="flex items-center justify-between">
                       <div className="flex items-center gap-2">
-                        <span className="text-sm text-muted-foreground">#{index + 1}</span>
-                        <Badge className={`${getCardTypeColor(card.type)} text-white`}>
+                        <span className="text-sm text-subtle-foreground">#{index + 1}</span>
+                        <Badge variant="outline" className="gap-1.5">
+                          <span
+                            className={`size-1.5 shrink-0 rounded-full ${getCardTypeColor(card.type)}`}
+                          />
                           {getCardTypeLabel(card.type)}
                         </Badge>
                         {card.tags && card.tags.length > 0 && (
diff --git a/src/renderer/src/components/notebook/anki/FlashcardView.tsx b/src/renderer/src/components/notebook/anki/FlashcardView.tsx
index fb35c9c..133ac07 100644
--- a/src/renderer/src/components/notebook/anki/FlashcardView.tsx
+++ b/src/renderer/src/components/notebook/anki/FlashcardView.tsx
@@ -97,10 +97,7 @@ export default function FlashcardView({ cards, onClose }: FlashcardViewProps) {
     <div className="flex flex-col h-full focus:outline-none" onKeyDown={handleKeyDown} tabIndex={0}>
       {/* 卡片区域 */}
       <div className="flex-1 flex items-center justify-center p-8">
-        <div
-          className="w-full max-w-2xl min-h-96 cursor-pointer transition-all duration-300"
-          onClick={handleFlip}
-        >
+        <div className="w-full max-w-2xl min-h-96 cursor-pointer" onClick={handleFlip}>
           <Card className="w-full h-96">
             <CardContent className="h-full flex items-center justify-center p-8">
               <div className="text-center space-y-4 max-w-lg">
@@ -109,14 +106,14 @@ export default function FlashcardView({ cards, onClose }: FlashcardViewProps) {
                     <Badge variant="secondary" className="mb-4">
                       {t('question')}
                     </Badge>
-                    <p className="text-2xl whitespace-pre-wrap">{getFrontContent(currentCard)}</p>
+                    <p className="text-xl whitespace-pre-wrap">{getFrontContent(currentCard)}</p>
                   </>
                 ) : (
                   <>
                     <Badge variant="secondary" className="mb-4">
                       {t('answer')}
                     </Badge>
-                    <p className="text-2xl whitespace-pre-wrap">{getBackContent(currentCard)}</p>
+                    <p className="text-xl whitespace-pre-wrap">{getBackContent(currentCard)}</p>
                   </>
                 )}
               </div>
@@ -128,7 +125,7 @@ export default function FlashcardView({ cards, onClose }: FlashcardViewProps) {
       {/* 进度条 */}
       <div className="h-1 bg-muted relative">
         <div
-          className="h-full bg-primary transition-all duration-300"
+          className="h-full bg-primary transition-[width] duration-300"
           style={{ width: `${progress}%` }}
         />
         <div className="absolute top-0 left-0 right-0 text-center text-xs text-muted-foreground -mt-5">
diff --git a/src/renderer/src/components/notebook/chat/MessageItem.tsx b/src/renderer/src/components/notebook/chat/MessageItem.tsx
index 1dcc210..0cf57be 100644
--- a/src/renderer/src/components/notebook/chat/MessageItem.tsx
+++ b/src/renderer/src/components/notebook/chat/MessageItem.tsx
@@ -59,7 +59,7 @@ export default function MessageItem({ message }: MessageItemProps): ReactElement
   if (isSystem) {
     return (
       <div className="flex justify-center">
-        <div className="max-w-[85%] min-w-0 bg-muted border border-border text-muted-foreground rounded-xl px-4 py-3 shadow-sm w-fit">
+        <div className="max-w-[85%] min-w-0 bg-muted text-muted-foreground rounded-lg px-4 py-3 w-fit">
           <div className="prose prose-sm max-w-none">
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
@@ -94,7 +94,7 @@ export default function MessageItem({ message }: MessageItemProps): ReactElement
     return (
       <div className="flex justify-end group">
         <div className="flex flex-col gap-1 max-w-[85%] min-w-0 items-end">
-          <div className="bg-primary text-primary-foreground rounded-2xl px-4 py-3 shadow-sm w-fit">
+          <div className="bg-muted text-foreground rounded-lg px-4 py-3 w-fit">
             <p className="text-sm whitespace-pre-wrap wrap-break-word message-content-selectable">
               {message.content}
             </p>
@@ -103,7 +103,7 @@ export default function MessageItem({ message }: MessageItemProps): ReactElement
           <Button
             onClick={handleCopy}
             variant="ghost"
-            className="self-end px-2 py-1 text-xs h-auto text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100"
+            className="self-end px-2 py-1 text-xs h-auto text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
             title={copied ? t('common:copied') : t('common:copy')}
           >
             {copied ? (
@@ -193,7 +193,7 @@ export default function MessageItem({ message }: MessageItemProps): ReactElement
             <Button
               onClick={handleCopy}
               variant="ghost"
-              className="px-2 py-1 text-xs h-auto text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100"
+              className="px-2 py-1 text-xs h-auto text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
               title={copied ? t('common:copied') : t('common:copy')}
             >
               {copied ? (
@@ -227,7 +227,7 @@ export default function MessageItem({ message }: MessageItemProps): ReactElement
             <Button
               onClick={handleAddToNote}
               variant="ghost"
-              className="px-2 py-1 text-xs h-auto text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100"
+              className="px-2 py-1 text-xs h-auto text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
               title={addedToNote ? t('chat:addedToNote') : t('chat:addToNote')}
             >
               {addedToNote ? (
diff --git a/src/renderer/src/components/notebook/chat/ReasoningContent.tsx b/src/renderer/src/components/notebook/chat/ReasoningContent.tsx
index 32c2f91..fb8d484 100644
--- a/src/renderer/src/components/notebook/chat/ReasoningContent.tsx
+++ b/src/renderer/src/components/notebook/chat/ReasoningContent.tsx
@@ -39,12 +39,12 @@ export default function ReasoningContent({
   }
 
   return (
-    <div className="border border-border rounded-lg overflow-hidden bg-muted/30 shadow-sm">
+    <div className="border border-border rounded-lg overflow-hidden bg-muted/30">
       {/* 头部：展开/折叠按钮 */}
       <Button
         onClick={() => setIsExpanded(!isExpanded)}
         variant="ghost"
-        className="w-full flex items-center justify-between px-3 py-1.5 text-xs h-auto hover:bg-muted/50"
+        className="w-full flex items-center justify-between px-3 py-1.5 text-xs h-auto hover:bg-surface-hover"
       >
         <div className="flex items-center gap-1.5">
           {/* 思考图标 */}
diff --git a/src/renderer/src/components/notebook/chat/markdown.css b/src/renderer/src/components/notebook/chat/markdown.css
index 2c7eeda..6734a7a 100644
--- a/src/renderer/src/components/notebook/chat/markdown.css
+++ b/src/renderer/src/components/notebook/chat/markdown.css
@@ -100,9 +100,9 @@
 /* 代码样式 */
 .markdown-content code {
   background-color: var(--muted);
-  color: var(--primary);
+  color: var(--foreground);
   padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
+  border-radius: 0.375rem;
   font-size: 0.75rem;
   font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
@@ -129,7 +129,7 @@
 }
 
 .markdown-content a:hover {
-  color: var(--primary) / 80;
+  color: color-mix(in oklab, var(--primary) 80%, transparent);
 }
 
 /* 分割线 */
diff --git a/src/renderer/src/components/notebook/mindmap/NodeDetailPanel.tsx b/src/renderer/src/components/notebook/mindmap/NodeDetailPanel.tsx
index 3a1c346..6bfc1c3 100644
--- a/src/renderer/src/components/notebook/mindmap/NodeDetailPanel.tsx
+++ b/src/renderer/src/components/notebook/mindmap/NodeDetailPanel.tsx
@@ -30,10 +30,10 @@ export default function NodeDetailPanel() {
   }
 
   return (
-    <div className="w-96 border-l border-border flex flex-col bg-background">
+    <div className="w-96 border-l border-border flex flex-col bg-surface-raised">
       <div className="p-4 border-b border-border flex items-center justify-between">
-        <h3 className="font-semibold text-sm">{t('nodeSource')}</h3>
-        <Button variant="ghost" size="icon" className="w-8 h-8" onClick={handleClose}>
+        <h3 className="text-sm font-medium text-foreground">{t('nodeSource')}</h3>
+        <Button variant="ghost" size="icon" onClick={handleClose}>
           <X className="w-4 h-4" />
         </Button>
       </div>
@@ -45,7 +45,7 @@ export default function NodeDetailPanel() {
           <div className="space-y-4">
             {nodeChunks.map((chunk) => (
               <div key={chunk.id} className="border border-border rounded-lg p-3 space-y-2">
-                <div className="text-xs text-muted-foreground">
+                <div className="text-xs text-subtle-foreground">
                   {t('source')}: {chunk.documentTitle}
                 </div>
                 <div className="text-sm prose prose-sm max-w-none dark:prose-invert">
diff --git a/src/renderer/src/components/notebook/note/noteEditor.css b/src/renderer/src/components/notebook/note/noteEditor.css
index 28c3cb3..3fe8f50 100644
--- a/src/renderer/src/components/notebook/note/noteEditor.css
+++ b/src/renderer/src/components/notebook/note/noteEditor.css
@@ -54,9 +54,9 @@
 
 .ProseMirror code {
   background-color: var(--muted);
-  color: var(--primary);
+  color: var(--foreground);
   padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
+  border-radius: 0.375rem;
   font-size: 0.75rem;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
diff --git a/src/renderer/src/components/notebook/quiz/QuizGenerating.tsx b/src/renderer/src/components/notebook/quiz/QuizGenerating.tsx
index 0ae2166..da5d489 100644
--- a/src/renderer/src/components/notebook/quiz/QuizGenerating.tsx
+++ b/src/renderer/src/components/notebook/quiz/QuizGenerating.tsx
@@ -14,15 +14,15 @@ export default function QuizGenerating() {
     <div className="flex flex-col items-center justify-center h-full p-8">
       <div className="max-w-md w-full space-y-8">
         {/* 标题 */}
-        <h2 className="text-2xl font-semibold text-center text-foreground">
-          {t('generatingQuiz')}
-        </h2>
+        <h2 className="text-lg font-medium text-center text-foreground">{t('generatingQuiz')}</h2>
 
         {/* 进度指示器 */}
         <div className="flex flex-col items-center gap-4">
-          <Loader2 className="w-16 h-16 animate-spin text-primary" />
+          <Loader2 className="w-10 h-10 animate-spin text-muted-foreground" />
           <div className="text-center space-y-2">
-            <p className="text-3xl font-bold text-primary">{generationProgress?.progress || 0}%</p>
+            <p className="text-2xl font-medium text-foreground">
+              {generationProgress?.progress || 0}%
+            </p>
             <p className="text-base text-muted-foreground">
               {generationProgress?.stage && getStageText(generationProgress.stage)}
             </p>
@@ -30,9 +30,9 @@ export default function QuizGenerating() {
         </div>
 
         {/* 进度条 */}
-        <div className="w-full bg-secondary rounded-full h-3">
+        <div className="w-full bg-muted rounded-full h-2">
           <div
-            className="bg-primary h-3 rounded-full transition-all duration-300 ease-in-out"
+            className="bg-primary h-2 rounded-full transition-[width] duration-300 ease-in-out"
             style={{ width: `${generationProgress?.progress || 0}%` }}
           />
         </div>
diff --git a/src/renderer/src/components/notebook/quiz/QuizQuestionView.tsx b/src/renderer/src/components/notebook/quiz/QuizQuestionView.tsx
index 11a48ec..8cfb151 100644
--- a/src/renderer/src/components/notebook/quiz/QuizQuestionView.tsx
+++ b/src/renderer/src/components/notebook/quiz/QuizQuestionView.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react'
 import { Lightbulb, Check, X } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useQuizStore } from '../../../store/quizStore'
-import type { QuizQuestion } from '../../../../../shared/types/quiz'
 import { Button } from '../../ui/button'
 import { Checkbox } from '../../ui/checkbox'
 import { cn } from '../../../lib/utils'
@@ -26,7 +25,7 @@ export default function QuizQuestionView() {
 
   if (!currentQuiz) return null
 
-  const questions = currentQuiz.questionsData as any as QuizQuestion[]
+  const questions = currentQuiz.questionsData
   const currentQuestion = questions[currentQuestionIndex]
   const totalQuestions = getTotalQuestions()
   const selectedAnswer = answers[currentQuestion.id]
@@ -69,11 +68,11 @@ export default function QuizQuestionView() {
   const isCorrect = selectedAnswer === currentQuestion.correctAnswer
 
   return (
-    <div className="h-full flex flex-col p-8">
-      <div className="w-full flex flex-col gap-6 h-full">
+    <div className="h-full flex flex-col p-6">
+      <div className="w-full flex flex-col gap-4 h-full">
         {/* 头部 */}
         <div className="flex justify-between items-center">
-          <h2 className="text-xl font-semibold text-foreground">
+          <h2 className="text-base font-medium text-foreground">
             {t('question')} {currentQuestionIndex + 1}/{totalQuestions}
           </h2>
           <Button variant="ghost" size="sm" onClick={() => toggleHint(currentQuestion.id)}>
@@ -85,7 +84,7 @@ export default function QuizQuestionView() {
         {/* 内容区域 */}
         <div className="flex-1 overflow-auto flex flex-col gap-6">
           {/* 题目文本 */}
-          <p className="text-lg leading-relaxed font-medium text-foreground">
+          <p className="text-base leading-relaxed font-medium text-foreground">
             {currentQuestion.questionText}
           </p>
 
@@ -100,30 +99,29 @@ export default function QuizQuestionView() {
                 <div
                   key={index}
                   className={cn(
-                    'flex items-center gap-4 p-4 rounded-lg border transition-colors',
+                    'flex items-center gap-3 rounded-lg border p-3 transition-colors',
                     // 查看详情模式：禁用点击
                     isReviewMode ? 'cursor-default' : 'cursor-pointer',
-                    isSelected && !showResult && 'border-primary bg-primary/5',
-                    showResult &&
-                      isCorrectOption &&
-                      'border-green-500 bg-green-50 dark:bg-green-950',
+                    isSelected && !showResult && 'border-primary bg-surface-selected',
+                    showResult && isCorrectOption && 'border-success bg-success/10',
                     showResult &&
                       isSelected &&
                       !isCorrectOption &&
-                      'border-red-500 bg-red-50 dark:bg-red-950',
-                    !isSelected && !showResult && !isReviewMode && 'border-border hover:bg-muted/50'
+                      'border-destructive bg-destructive/10',
+                    !isSelected &&
+                      !showResult &&
+                      !isReviewMode &&
+                      'border-border hover:bg-surface-hover'
                   )}
                   onClick={() => handleSelectAnswer(index)}
                 >
                   <Checkbox checked={isSelected} disabled={showResult || isReviewMode} />
-                  <span className="text-base flex-1 text-foreground">
+                  <span className="text-sm flex-1 text-foreground">
                     {String.fromCharCode(65 + index)}. {option}
                   </span>
-                  {showResult && isCorrectOption && (
-                    <Check className="w-5 h-5 text-green-600 dark:text-green-400" />
-                  )}
+                  {showResult && isCorrectOption && <Check className="w-5 h-5 text-success" />}
                   {showResult && isSelected && !isCorrectOption && (
-                    <X className="w-5 h-5 text-red-600 dark:text-red-400" />
+                    <X className="w-5 h-5 text-destructive" />
                   )}
                 </div>
               )
@@ -132,10 +130,10 @@ export default function QuizQuestionView() {
 
           {/* 提示（可折叠） */}
           {showHint && (
-            <div className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+            <div className="bg-muted border border-border rounded-lg p-4">
               <div className="flex items-start gap-2">
-                <Lightbulb className="w-4 h-4 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
-                <div className="flex flex-col gap-1 text-sm text-blue-900 dark:text-blue-100">
+                <Lightbulb className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+                <div className="flex flex-col gap-1 text-sm text-muted-foreground">
                   {currentQuestion.hints.map((hint, i) => (
                     <p key={i}>• {hint}</p>
                   ))}
@@ -148,46 +146,33 @@ export default function QuizQuestionView() {
           {shouldShowExplanation && selectedAnswer !== undefined && (
             <div
               className={cn(
-                'border rounded-lg p-4',
-                isCorrect
-                  ? 'bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800'
-                  : 'bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-800'
+                'rounded-lg border p-4',
+                isCorrect ? 'border-success bg-success/10' : 'border-destructive bg-destructive/10'
               )}
             >
               <div className="flex items-start gap-2">
                 <div
                   className={cn(
                     'w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5',
-                    isCorrect ? 'bg-green-500' : 'bg-red-500'
+                    isCorrect ? 'bg-success' : 'bg-destructive'
                   )}
                 >
                   {isCorrect ? (
-                    <Check className="w-3 h-3 text-white" />
+                    <Check className="w-3 h-3 text-primary-foreground" />
                   ) : (
-                    <X className="w-3 h-3 text-white" />
+                    <X className="w-3 h-3 text-primary-foreground" />
                   )}
                 </div>
                 <div className="flex-1 flex flex-col gap-1">
                   <p
                     className={cn(
-                      'font-medium text-sm',
-                      isCorrect
-                        ? 'text-green-900 dark:text-green-100'
-                        : 'text-red-900 dark:text-red-100'
+                      'text-sm font-medium',
+                      isCorrect ? 'text-success' : 'text-destructive'
                     )}
                   >
                     {isCorrect ? t('correct') : t('incorrect')}
                   </p>
-                  <p
-                    className={cn(
-                      'text-sm',
-                      isCorrect
-                        ? 'text-green-800 dark:text-green-200'
-                        : 'text-red-800 dark:text-red-200'
-                    )}
-                  >
-                    {currentQuestion.explanation}
-                  </p>
+                  <p className="text-sm text-muted-foreground">{currentQuestion.explanation}</p>
                 </div>
               </div>
             </div>
@@ -197,7 +182,7 @@ export default function QuizQuestionView() {
         {/* 底部按钮 */}
         <div
           className={cn(
-            'pt-6 border-t',
+            'border-t border-border pt-4',
             isReviewMode ? 'flex justify-between' : 'flex justify-end'
           )}
         >
diff --git a/src/renderer/src/components/notebook/quiz/QuizResultView.tsx b/src/renderer/src/components/notebook/quiz/QuizResultView.tsx
index c42b785..73efb15 100644
--- a/src/renderer/src/components/notebook/quiz/QuizResultView.tsx
+++ b/src/renderer/src/components/notebook/quiz/QuizResultView.tsx
@@ -52,22 +52,22 @@ export default function QuizResultView() {
   }
 
   return (
-    <div className="h-full flex items-center justify-center p-8">
-      <div className="w-full space-y-8">
+    <div className="h-full flex items-center justify-center p-6">
+      <div className="w-full space-y-6">
         {/* 标题 */}
         <div className="text-center">
           <div className="flex items-center justify-center gap-3 mb-4">
-            <Trophy className="w-8 h-8 text-primary" />
-            <h2 className="text-3xl font-bold text-foreground">{t('quizCompleted')}</h2>
+            <Trophy className="w-6 h-6 text-muted-foreground" />
+            <h2 className="text-lg font-medium text-foreground">{t('quizCompleted')}</h2>
           </div>
         </div>
 
         {/* 分数展示 */}
         <div className="text-center space-y-3">
-          <div className="text-7xl font-bold text-primary">
+          <div className="text-4xl font-semibold text-foreground">
             {correctCount}/{totalQuestions}
           </div>
-          <p className="text-xl text-muted-foreground">
+          <p className="text-sm text-muted-foreground">
             {t('accuracy')}: {percentage}%
           </p>
         </div>
@@ -75,18 +75,16 @@ export default function QuizResultView() {
         {/* 统计网格 */}
         <div className="grid grid-cols-3 gap-6 text-center py-6">
           <div className="space-y-2">
-            <p className="text-4xl font-semibold text-green-600 dark:text-green-400">
-              {correctCount}
-            </p>
-            <p className="text-base text-muted-foreground">{t('correctCount')}</p>
+            <p className="text-2xl font-medium text-success">{correctCount}</p>
+            <p className="text-sm text-muted-foreground">{t('correctCount')}</p>
           </div>
           <div className="space-y-2">
-            <p className="text-4xl font-semibold text-red-600 dark:text-red-400">{wrongCount}</p>
-            <p className="text-base text-muted-foreground">{t('wrongCount')}</p>
+            <p className="text-2xl font-medium text-destructive">{wrongCount}</p>
+            <p className="text-sm text-muted-foreground">{t('wrongCount')}</p>
           </div>
           <div className="space-y-2">
-            <p className="text-4xl font-semibold text-foreground">{totalQuestions}</p>
-            <p className="text-base text-muted-foreground">{t('totalQuestions')}</p>
+            <p className="text-2xl font-medium text-foreground">{totalQuestions}</p>
+            <p className="text-sm text-muted-foreground">{t('totalQuestions')}</p>
           </div>
         </div>
 
diff --git a/src/renderer/src/components/pages/AnkiPage.tsx b/src/renderer/src/components/pages/AnkiPage.tsx
index 2704664..fb95446 100644
--- a/src/renderer/src/components/pages/AnkiPage.tsx
+++ b/src/renderer/src/components/pages/AnkiPage.tsx
@@ -109,10 +109,10 @@ export default function AnkiPage() {
   }
 
   return (
-    <div className="h-screen flex flex-col overflow-hidden bg-background">
+    <div className="h-screen flex flex-col overflow-hidden bg-surface-base">
       {/* 顶部可拖拽标题栏 */}
       <div
-        className="absolute top-0 left-0 right-0 h-10 z-10 flex items-center justify-between px-4 bg-background border-b"
+        className="absolute top-0 left-0 right-0 h-11 z-10 flex items-center justify-between px-3 bg-surface-base border-b border-border"
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
       >
         {/* macOS 左侧空白区域（留给窗口控制按钮） */}
@@ -120,7 +120,7 @@ export default function AnkiPage() {
         {/* 非 macOS 左侧占位，保持标题居中 */}
         {platform !== 'darwin' && <div className="w-32"></div>}
 
-        <span className="text-sm text-muted-foreground font-medium">
+        <span className="text-sm font-medium text-foreground">
           {currentAnkiCards?.title || t('ankiCards')}
         </span>
 
@@ -129,8 +129,8 @@ export default function AnkiPage() {
           style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
         >
           {currentAnkiCards && (
-            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleExport}>
-              <Download className="w-3.5 h-3.5" />
+            <Button variant="ghost" size="icon" onClick={handleExport}>
+              <Download className="w-4 h-4" />
             </Button>
           )}
         </div>
@@ -146,7 +146,7 @@ export default function AnkiPage() {
           display: 'flex',
           overflow: 'hidden',
           position: 'relative',
-          paddingTop: '40px'
+          paddingTop: '44px'
         }}
       >
         {isLoading ? (
diff --git a/src/renderer/src/components/pages/MindMapPage.tsx b/src/renderer/src/components/pages/MindMapPage.tsx
index 8a7b225..ed292e3 100644
--- a/src/renderer/src/components/pages/MindMapPage.tsx
+++ b/src/renderer/src/components/pages/MindMapPage.tsx
@@ -186,10 +186,10 @@ export default function MindMapPage() {
   }
 
   return (
-    <div className="h-screen flex flex-col overflow-hidden bg-background">
+    <div className="h-screen flex flex-col overflow-hidden bg-surface-base">
       {/* 顶部可拖拽标题栏 */}
       <div
-        className="absolute top-0 left-0 right-0 h-10 z-10 flex items-center justify-between px-4 bg-background"
+        className="absolute top-0 left-0 right-0 h-11 z-10 flex items-center justify-between px-3 bg-surface-base border-b border-border"
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
       >
         {/* macOS 左侧空白区域（留给窗口控制按钮） */}
@@ -197,7 +197,7 @@ export default function MindMapPage() {
         {/* 非 macOS 左侧空白区域 */}
         {platform !== 'darwin' && <div style={{ width: '100px' }}></div>}
 
-        <span className="text-sm text-muted-foreground font-medium">{t('mindMap')}</span>
+        <span className="text-sm font-medium text-foreground">{t('mindMap')}</span>
 
         <div
           className="flex items-center gap-2"
@@ -207,7 +207,7 @@ export default function MindMapPage() {
             <>
               <button
                 onClick={toggleDirection}
-                className="p-1.5 rounded hover:bg-accent transition-colors"
+                className="p-1.5 rounded-md hover:bg-surface-hover transition-colors"
                 title={direction === 'LR' ? '切换为垂直布局' : '切换为横向布局'}
               >
                 {direction === 'LR' ? (
@@ -218,7 +218,7 @@ export default function MindMapPage() {
               </button>
               <button
                 onClick={handleExport}
-                className="p-1.5 rounded hover:bg-accent transition-colors"
+                className="p-1.5 rounded-md hover:bg-surface-hover transition-colors"
                 title="导出为图片"
               >
                 <Download className="w-4 h-4 text-muted-foreground" />
@@ -238,7 +238,7 @@ export default function MindMapPage() {
           display: 'flex',
           overflow: 'hidden',
           position: 'relative',
-          paddingTop: '40px'
+          paddingTop: '44px'
         }}
       >
         {isLoading ? (
diff --git a/src/renderer/src/components/pages/NotebookListPage.tsx b/src/renderer/src/components/pages/NotebookListPage.tsx
index b835e2c..8487d8e 100644
--- a/src/renderer/src/components/pages/NotebookListPage.tsx
+++ b/src/renderer/src/components/pages/NotebookListPage.tsx
@@ -80,7 +80,7 @@ export default function NotebookListPage(): ReactElement {
   }
 
   return (
-    <div className="flex flex-col h-screen bg-background text-foreground">
+    <div className="flex flex-col h-screen bg-surface-base text-foreground">
       <TopNavigationBar isHomePage={true} onCreateClick={handleCreateNotebook} />
 
       {/* 主内容区域 - 使用 Home 组件 */}
diff --git a/src/renderer/src/components/pages/OnboardingPage.tsx b/src/renderer/src/components/pages/OnboardingPage.tsx
index d29e983..78dd169 100644
--- a/src/renderer/src/components/pages/OnboardingPage.tsx
+++ b/src/renderer/src/components/pages/OnboardingPage.tsx
@@ -29,12 +29,12 @@ export default function OnboardingPage() {
   const selectedLangName = languages.find((l) => l.code === selectedLanguage)?.name
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-background">
+    <div className="flex items-center justify-center min-h-screen bg-surface-base">
       <div className="w-full max-w-md px-6 text-center">
         {/* Logo */}
         <div className="mb-8">
           <img src={logo} alt="KnowNote" className="w-24 h-24 mx-auto mb-4" />
-          <h1 className="text-3xl font-bold text-foreground mb-2">KnowNote</h1>
+          <h1 className="text-xl font-medium text-foreground mb-2">KnowNote</h1>
           <p className="text-sm text-muted-foreground">
             More convenient, more lightweight, and understands you better!
           </p>
diff --git a/src/renderer/src/components/pages/QuizPage.tsx b/src/renderer/src/components/pages/QuizPage.tsx
index c677dcf..49efc10 100644
--- a/src/renderer/src/components/pages/QuizPage.tsx
+++ b/src/renderer/src/components/pages/QuizPage.tsx
@@ -63,10 +63,10 @@ export default function QuizPage() {
   }, [resetQuiz])
 
   return (
-    <div className="h-screen flex flex-col overflow-hidden bg-background">
+    <div className="h-screen flex flex-col overflow-hidden bg-surface-base">
       {/* 顶部可拖拽标题栏 */}
       <div
-        className="absolute top-0 left-0 right-0 h-10 z-10 flex items-center justify-between px-4 bg-background"
+        className="absolute top-0 left-0 right-0 h-11 z-10 flex items-center justify-between px-3 bg-surface-base border-b border-border"
         style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
       >
         {/* macOS 左侧空白区域（留给窗口控制按钮） */}
@@ -74,7 +74,7 @@ export default function QuizPage() {
         {/* 非 macOS 左侧空白区域 */}
         {platform !== 'darwin' && <div style={{ width: '100px' }}></div>}
 
-        <span className="text-sm text-muted-foreground font-medium">{t('quiz')}</span>
+        <span className="text-sm font-medium text-foreground">{t('quiz')}</span>
 
         <div
           className="flex items-center gap-2"
@@ -94,7 +94,7 @@ export default function QuizPage() {
           display: 'flex',
           overflow: 'hidden',
           position: 'relative',
-          paddingTop: '40px'
+          paddingTop: '44px'
         }}
       >
         {isLoading ? (
diff --git a/src/renderer/src/components/settings/AboutSettings.tsx b/src/renderer/src/components/settings/AboutSettings.tsx
index 00a8fab..b1baa71 100644
--- a/src/renderer/src/components/settings/AboutSettings.tsx
+++ b/src/renderer/src/components/settings/AboutSettings.tsx
@@ -95,7 +95,7 @@ export default function AboutSettings(): ReactElement {
       case UpdateStatus.NOT_AVAILABLE:
         return {
           text: t('latestVersion'),
-          icon: <CheckCircle className="w-4 h-4 text-green-500" />,
+          icon: <CheckCircle className="w-4 h-4 text-muted-foreground" />,
           disabled: true,
           onClick: undefined
         }
@@ -121,9 +121,9 @@ export default function AboutSettings(): ReactElement {
   return (
     <div className="space-y-6">
       <div className="text-center py-8 flex flex-col items-center gap-4">
-        <img src={logoImg} alt="Logo" className="w-16 h-16 rounded-xl" />
+        <img src={logoImg} alt="Logo" className="w-16 h-16 rounded-lg" />
         <div className="flex flex-col gap-2">
-          <h2 className="text-h1 text-foreground">KnowNote</h2>
+          <h2 className="text-lg font-medium text-foreground">KnowNote</h2>
           <p className="text-sm text-muted-foreground">
             {t('version')} {appVersion}
           </p>
@@ -133,7 +133,7 @@ export default function AboutSettings(): ReactElement {
       <div className="flex flex-col gap-3">
         <button
           onClick={handleOpenWebsite}
-          className="flex justify-between p-3 bg-card rounded-lg hover:bg-accent transition-colors cursor-pointer"
+          className="flex justify-between p-3 bg-muted rounded-md hover:bg-surface-hover transition-colors cursor-pointer"
         >
           <span className="text-sm text-muted-foreground">{t('officialWebsite')}</span>
           <ChevronRight className="w-4 h-4 text-muted-foreground" />
@@ -141,7 +141,7 @@ export default function AboutSettings(): ReactElement {
 
         <button
           onClick={handleFeedback}
-          className="flex justify-between p-3 bg-card rounded-lg hover:bg-accent transition-colors cursor-pointer"
+          className="flex justify-between p-3 bg-muted rounded-md hover:bg-surface-hover transition-colors cursor-pointer"
         >
           <span className="text-sm text-muted-foreground">{t('feedback')}</span>
           <ChevronRight className="w-4 h-4 text-muted-foreground" />
@@ -150,10 +150,10 @@ export default function AboutSettings(): ReactElement {
         <button
           onClick={updateButton.onClick}
           disabled={updateButton.disabled}
-          className={`flex justify-between items-center p-3 bg-card rounded-lg transition-colors ${
+          className={`flex justify-between items-center p-3 bg-muted rounded-md transition-colors ${
             updateButton.disabled
-              ? 'cursor-not-allowed opacity-60'
-              : 'hover:bg-accent cursor-pointer'
+              ? 'cursor-not-allowed opacity-50'
+              : 'hover:bg-surface-hover cursor-pointer'
           }`}
         >
           <span className="text-sm text-muted-foreground">{updateButton.text}</span>
diff --git a/src/renderer/src/components/settings/GeneralSettings.tsx b/src/renderer/src/components/settings/GeneralSettings.tsx
index 45ac9b9..3a79c9a 100644
--- a/src/renderer/src/components/settings/GeneralSettings.tsx
+++ b/src/renderer/src/components/settings/GeneralSettings.tsx
@@ -49,21 +49,29 @@ export default function GeneralSettings({
             <FieldLabel>{t('themeMode')}</FieldLabel>
             <FieldDescription>{t('selectTheme')}</FieldDescription>
           </FieldContent>
-          <div className="inline-flex rounded-lg border bg-muted p-1">
+          <div className="inline-flex rounded-md border border-border bg-surface-sunken p-0.5">
             <Button
               onClick={() => onSettingsChange({ theme: 'light' })}
-              variant={settings.theme === 'light' ? 'default' : 'ghost'}
+              variant="ghost"
               size="sm"
-              className="gap-1.5 rounded-md"
+              className={`gap-1.5 ${
+                settings.theme === 'light'
+                  ? 'bg-surface-raised text-foreground hover:bg-surface-raised'
+                  : ''
+              }`}
             >
               <Sun className="w-3.5 h-3.5" />
               <span className="text-xs font-medium">{t('light')}</span>
             </Button>
             <Button
               onClick={() => onSettingsChange({ theme: 'dark' })}
-              variant={settings.theme === 'dark' ? 'default' : 'ghost'}
+              variant="ghost"
               size="sm"
-              className="gap-1.5 rounded-md"
+              className={`gap-1.5 ${
+                settings.theme === 'dark'
+                  ? 'bg-surface-raised text-foreground hover:bg-surface-raised'
+                  : ''
+              }`}
             >
               <Moon className="w-3.5 h-3.5" />
               <span className="text-xs font-medium">{t('dark')}</span>
diff --git a/src/renderer/src/components/settings/ModelConnectionForm.tsx b/src/renderer/src/components/settings/ModelConnectionForm.tsx
index 8ebc74c..c26db89 100644
--- a/src/renderer/src/components/settings/ModelConnectionForm.tsx
+++ b/src/renderer/src/components/settings/ModelConnectionForm.tsx
@@ -137,7 +137,7 @@ export default function ModelConnectionForm({
     <div className="flex flex-col gap-4">
       <div className="flex items-start justify-between gap-4">
         <div className="flex flex-col gap-1">
-          <h2 className="text-h1 text-foreground">
+          <h2 className="text-lg font-medium text-foreground">
             {capability === 'chat' ? t('chatModel') : t('embeddingModel')}
           </h2>
           <p className="text-muted-foreground text-sm">
@@ -145,7 +145,7 @@ export default function ModelConnectionForm({
           </p>
         </div>
         {connection && (
-          <Button onClick={onClear} variant="ghost" size="icon" className="w-8 h-8 shrink-0">
+          <Button onClick={onClear} variant="ghost" size="icon" className="shrink-0">
             <Trash2 className="w-4 h-4 text-destructive" />
           </Button>
         )}
@@ -234,7 +234,7 @@ export default function ModelConnectionForm({
             onClick={() => setShowApiKey(!showApiKey)}
             variant="ghost"
             size="icon"
-            className="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8"
+            className="absolute right-2 top-1/2 -translate-y-1/2"
           >
             {showApiKey ? (
               <EyeOff className="w-4 h-4 text-muted-foreground" />
@@ -299,7 +299,7 @@ export default function ModelConnectionForm({
           )}
         </Button>
         {testResult?.ok && (
-          <span className="flex items-center gap-1 text-sm text-green-600 dark:text-green-400">
+          <span className="flex items-center gap-1 text-sm text-success">
             <CheckCircle2 className="w-4 h-4" />
             {t('connectionSuccessful')}
           </span>
diff --git a/src/renderer/src/components/settings/ShortcutSettings.tsx b/src/renderer/src/components/settings/ShortcutSettings.tsx
index 846f0c7..3b63a2c 100644
--- a/src/renderer/src/components/settings/ShortcutSettings.tsx
+++ b/src/renderer/src/components/settings/ShortcutSettings.tsx
@@ -140,11 +140,11 @@ export default function ShortcutSettings(): ReactElement {
 
       {/* 冲突错误提示 */}
       {conflictError && (
-        <div className="flex items-start gap-3 p-4 bg-destructive/10 border border-destructive/20 text-destructive rounded-xl animate-in fade-in slide-in-from-top-2">
+        <div className="flex items-start gap-3 p-4 bg-destructive/10 border border-destructive/20 text-destructive rounded-lg animate-in fade-in slide-in-from-top-2">
           <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
           <div className="flex-1">
             <p className="text-sm font-medium">{conflictError}</p>
-            <p className="text-xs mt-1 opacity-80">{t('shortcuts:conflictHint')}</p>
+            <p className="text-xs mt-1">{t('shortcuts:conflictHint')}</p>
           </div>
           <Button
             variant="ghost"
@@ -254,7 +254,7 @@ function ShortcutItem({
         {isRecording ? (
           // 录制模式
           <div className="flex items-center gap-2 animate-in fade-in slide-in-from-right-2">
-            <kbd className="px-4 py-2 bg-accent/50 text-accent-foreground rounded-lg border-2 border-primary/20 text-sm font-mono min-w-[140px] text-center transition-all shadow-lg shadow-primary/10 animate-pulse">
+            <kbd className="px-4 py-2 bg-surface-selected text-foreground rounded-md border border-ring text-sm font-mono min-w-[140px] text-center transition-colors animate-pulse">
               {tempAccelerator || t('pressKey')}
             </kbd>
             <Button
@@ -262,7 +262,7 @@ function ShortcutItem({
               size="icon"
               variant="ghost"
               disabled={!tempAccelerator}
-              className="h-9 w-9 hover:bg-primary/10 hover:text-primary transition-all"
+              className="hover:bg-surface-hover transition-colors"
             >
               <Check className="w-4 h-4" />
             </Button>
@@ -270,7 +270,7 @@ function ShortcutItem({
               onClick={onCancel}
               size="icon"
               variant="ghost"
-              className="h-9 w-9 hover:bg-destructive/10 hover:text-destructive transition-all"
+              className="hover:bg-destructive/10 hover:text-destructive transition-colors"
             >
               <X className="w-4 h-4" />
             </Button>
@@ -280,7 +280,7 @@ function ShortcutItem({
           <>
             <button
               onClick={onStartRecording}
-              className="px-4 py-2 bg-muted hover:bg-accent text-foreground rounded-lg border border-border text-sm font-mono min-w-[140px] text-center transition-all hover:scale-105 hover:shadow-md active:scale-95"
+              className="px-4 py-2 bg-muted hover:bg-surface-hover active:bg-surface-selected text-foreground rounded-md border border-border text-sm font-mono min-w-[140px] text-center transition-colors"
             >
               {formatAccelerator(shortcut.accelerator)}
             </button>
@@ -288,7 +288,7 @@ function ShortcutItem({
               onClick={onReset}
               size="icon"
               variant="ghost"
-              className="h-9 w-9 hover:bg-primary/10 hover:text-primary transition-all"
+              className="hover:bg-surface-hover transition-colors"
             >
               <RotateCcw className="w-4 h-4" />
             </Button>
diff --git a/src/renderer/src/store/quizStore.ts b/src/renderer/src/store/quizStore.ts
index 20b1e72..4499e10 100644
--- a/src/renderer/src/store/quizStore.ts
+++ b/src/renderer/src/store/quizStore.ts
@@ -1,6 +1,5 @@
 import { create } from 'zustand'
 import type { Quiz, QuizSession } from '../../../main/db/schema'
-import type { QuizQuestion } from '../../../shared/types/quiz'
 
 interface QuizStore {
   // 核心状态
@@ -80,7 +79,7 @@ export const useQuizStore = create<QuizStore>()((set, get) => ({
     const { currentQuiz, answers } = get()
     if (!currentQuiz) return 0
 
-    const questions = currentQuiz.questionsData as any as QuizQuestion[]
+    const questions = currentQuiz.questionsData
     let correctCount = 0
 
     questions.forEach((question) => {
@@ -96,7 +95,7 @@ export const useQuizStore = create<QuizStore>()((set, get) => ({
   getTotalQuestions: () => {
     const { currentQuiz } = get()
     if (!currentQuiz) return 0
-    const questions = currentQuiz.questionsData as any as QuizQuestion[]
+    const questions = currentQuiz.questionsData
     return questions.length
   },
 

From 0f0572b4885c10bd5482a3325d0f786d73bd66ed Mon Sep 17 00:00:00 2001
From: mrsibe <mrsibe@qq.com>
Date: Thu, 24 Sep 2026 15:31:16 +0800
Subject: [PATCH 3/4] chore(design): add a token guard and wire DESIGN.md into
 CI

scripts/check-design-tokens.mjs reads the renderer sources and fails on a
radius utility outside md/lg/full, an elevation utility other than
shadow-elevation/shadow-control/shadow-none, a raw Tailwind-palette or
arbitrary colour, alpha stacked on a text level, and a raw CSS
border-radius outside the scale. It needs no build and no dependencies, so
Verify runs it before the packaging matrix. 'npm run check:design -- --list'
prints the rules.

The three violations it found on the first run are fixed here: a bare
'rounded' on the close-tab affordance, the sidebar's floating variant using a
bare 'shadow', and a comment that contained an example of the removed
arbitrary shadow value.

Modal scrims move from bg-black/80 to a --scrim token, which was the last raw
colour in the tree. DESIGN.md's enforcement section now states exactly what
the guard covers and what it deliberately leaves to review.
---
 .github/workflows/verify.yml                  |   6 +
 DESIGN.md                                     |  26 ++-
 package.json                                  |   1 +
 scripts/check-design-tokens.mjs               | 184 ++++++++++++++++++
 src/renderer/src/assets/theme.css             |   5 +
 .../components/common/TopNavigationBar.tsx    |   2 +-
 .../src/components/ui/alert-dialog.tsx        |   2 +-
 src/renderer/src/components/ui/dialog.tsx     |   2 +-
 src/renderer/src/components/ui/progress.tsx   |   2 +-
 src/renderer/src/components/ui/sheet.tsx      |   2 +-
 src/renderer/src/components/ui/sidebar.tsx    |   9 +-
 11 files changed, 222 insertions(+), 19 deletions(-)
 create mode 100644 scripts/check-design-tokens.mjs

diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index f8ade4f..967fe4d 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -52,6 +52,12 @@ jobs:
       - name: Typecheck
         run: npm run typecheck
 
+      # Cheap and platform-independent: enforces DESIGN.md's mechanically
+      # checkable rules (radius, elevation, colours, text levels) before the
+      # long packaging step below does any work.
+      - name: Design tokens
+        run: npm run check:design
+
       - name: Unit tests
         run: npm test
 
diff --git a/DESIGN.md b/DESIGN.md
index b6f85f1..0881479 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -338,12 +338,20 @@ the same PR.
 
 ## Enforcement
 
-`npm run check:design` (`scripts/check-design-tokens.mjs`) fails on:
-
-- a radius utility outside the three allowed values;
-- a shadow utility other than `shadow-elevation` / `shadow-control`;
-- a background colour that is not a surface, `muted`, `transparent` or a
-  `--chart-*` token.
-
-The check runs as part of the `Verify` workflow. It reads source text, so it is
-also the fastest way to audit a branch: `npm run check:design -- --list`.
+`npm run check:design` (`scripts/check-design-tokens.mjs`) reads the renderer
+sources — no build, no dependencies — and fails on:
+
+| Rule         | Fails when                                                                                                          |
+| ------------ | ------------------------------------------------------------------------------------------------------------------- |
+| `radius`     | a radius utility other than `rounded-md`, `rounded-lg`, `rounded-full` and their `t/b/l/r` forms                    |
+| `shadow`     | an elevation utility other than `shadow-elevation`, `shadow-control`, `shadow-none`                                 |
+| `palette`    | a colour utility from the raw Tailwind palette (`bg-slate-100`, `text-gray-500`) or an arbitrary colour (`bg-[#…]`) |
+| `text-level` | alpha stacked on a text level (`text-muted-foreground/70`)                                                          |
+| `css-radius` | a raw CSS `border-radius` outside `0.375rem` / `0.5rem` / `9999px`                                                  |
+
+`npm run check:design -- --list` prints the rules and the allowlists. The check
+runs in the `Verify` workflow, before the build matrix.
+
+What it does **not** enforce, and therefore relies on review: the surface ladder
+(which surface a panel uses), accent discipline, spacing and density, and the
+four interaction states. Those are the rules a reviewer must hold the line on.
diff --git a/package.json b/package.json
index 99c3168..f82d120 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "scripts": {
     "format": "prettier --write .",
     "lint": "eslint --cache .",
+    "check:design": "node scripts/check-design-tokens.mjs",
     "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
     "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
     "typecheck:test": "tsc -p tsconfig.test.json",
diff --git a/scripts/check-design-tokens.mjs b/scripts/check-design-tokens.mjs
new file mode 100644
index 0000000..b3b279f
--- /dev/null
+++ b/scripts/check-design-tokens.mjs
@@ -0,0 +1,184 @@
+#!/usr/bin/env node
+/**
+ * Design-token guard.
+ *
+ * Enforces the mechanically checkable half of DESIGN.md: which radius values,
+ * which elevation tokens, which colours and which text-level modifiers are
+ * allowed in the renderer. It reads source text, so it is fast, needs no build
+ * and can run before anything else in CI.
+ *
+ * The rules are deliberately not configurable. DESIGN.md is the source of
+ * truth; if a rule is wrong, change the document and this file in the same PR
+ * rather than adding an allowlist here.
+ *
+ *   npm run check:design          # report violations, exit 1 if any
+ *   npm run check:design -- --list # print the rules and exit 0
+ */
+import { readdirSync, readFileSync, statSync } from 'node:fs'
+import { join, relative } from 'node:path'
+
+const SCAN_ROOT = join(process.cwd(), 'src', 'renderer', 'src')
+const EXTENSIONS = ['.ts', '.tsx', '.css']
+
+/** Tailwind class characters, including `!`, `/`, `[]`, `()` and `.`. */
+const CLASS_CHAR = 'a-zA-Z0-9\\-_\\[\\](),.%_!/'
+
+const ALLOWED_RADII = new Set([
+  'rounded-md',
+  'rounded-lg',
+  'rounded-full',
+  ...['t', 'b', 'l', 'r', 'tl', 'tr', 'bl', 'br'].flatMap((side) =>
+    ['md', 'lg', 'full'].map((size) => `rounded-${side}-${size}`)
+  )
+])
+
+const ALLOWED_SHADOWS = new Set(['shadow-elevation', 'shadow-control', 'shadow-none'])
+
+const ALLOWED_CSS_RADII = new Set(['0.375rem', '0.5rem', '9999px'])
+
+const PALETTE =
+  'white|black|gray|slate|zinc|neutral|stone|blue|green|red|purple|amber|yellow|orange|pink|teal|cyan|emerald|indigo|violet|rose|sky|lime|fuchsia'
+
+const RULES = [
+  {
+    id: 'radius',
+    describe: 'radius is rounded-md (control), rounded-lg (container) or rounded-full (pill)',
+    applies: ['.ts', '.tsx'],
+    scan(line, check) {
+      for (const token of utilities(line, 'rounded')) {
+        if (!ALLOWED_RADII.has(token)) check(token, 'use rounded-md / rounded-lg / rounded-full')
+      }
+    }
+  },
+  {
+    id: 'shadow',
+    describe: 'elevation is shadow-elevation (floating layers) or shadow-control (knobs)',
+    applies: ['.ts', '.tsx'],
+    scan(line, check) {
+      for (const token of utilities(line, 'shadow')) {
+        if (!ALLOWED_SHADOWS.has(token)) {
+          check(token, 'use shadow-elevation / shadow-control / shadow-none')
+        }
+      }
+    }
+  },
+  {
+    id: 'palette',
+    describe: 'colours come from tokens, never from the raw Tailwind palette',
+    applies: ['.ts', '.tsx'],
+    scan(line, check) {
+      const literal = new RegExp(
+        `\\b(bg|text|border|ring|fill|stroke|from|to|via)-(?:${PALETTE})(?:-\\d{2,3})?\\b`,
+        'g'
+      )
+      const arbitrary = /\b(bg|text|border|ring|fill|stroke)-\[(?:#|rgb|hsl|oklch|color)/g
+      for (const match of [...line.matchAll(literal), ...line.matchAll(arbitrary)]) {
+        check(match[0], 'use a surface/text/accent token')
+      }
+    }
+  },
+  {
+    id: 'text-level',
+    describe: 'a text level carries no opacity of its own',
+    applies: ['.ts', '.tsx'],
+    scan(line, check) {
+      const pattern = /\btext-(foreground|muted-foreground|subtle-foreground)\/\d+/g
+      for (const match of line.matchAll(pattern)) {
+        check(match[0], 'use a darker level (T1/T2/T3) instead of stacking alpha')
+      }
+    }
+  },
+  {
+    id: 'css-radius',
+    describe: 'raw CSS border-radius matches the radius scale',
+    applies: ['.css'],
+    scan(line, check) {
+      for (const match of line.matchAll(/border-radius:\s*([^;]+);/g)) {
+        const value = match[1].trim()
+        if (!ALLOWED_CSS_RADII.has(value)) {
+          check(value, 'use 0.375rem (control), 0.5rem (container) or 9999px (pill)')
+        }
+      }
+    }
+  }
+]
+
+/**
+ * Extracts whole utility tokens that start with `prefix` and are not part of a
+ * larger word (`box-shadow` and `var(--shadow-sm)` are definitions, not usages).
+ */
+function utilities(line, prefix) {
+  const pattern = new RegExp(`(?<![\\w-])${prefix}[${CLASS_CHAR}]*`, 'g')
+  return [...line.matchAll(pattern)].map((match) =>
+    match[0].replace(/!+$/, '').replace(/[^a-zA-Z0-9[\]().%_/-]+$/, '')
+  )
+}
+
+function walk(dir, files = []) {
+  for (const entry of readdirSync(dir)) {
+    const path = join(dir, entry)
+    if (statSync(path).isDirectory()) walk(path, files)
+    else if (EXTENSIONS.some((extension) => path.endsWith(extension))) files.push(path)
+  }
+  return files
+}
+
+function list() {
+  console.log('Design-token guard rules (see DESIGN.md):\n')
+  for (const rule of RULES) {
+    console.log(`  ${rule.id.padEnd(12)} ${rule.describe}`)
+    console.log(`  ${' '.repeat(12)} files: ${rule.applies.join(', ')}`)
+  }
+  console.log(`\nAllowed radii:  ${[...ALLOWED_RADII].join('  ')}`)
+  console.log(`Allowed shadows: ${[...ALLOWED_SHADOWS].join('  ')}\n`)
+}
+
+function main() {
+  if (process.argv.includes('--list')) {
+    list()
+    return
+  }
+
+  const violations = []
+
+  for (const path of walk(SCAN_ROOT)) {
+    const extension = EXTENSIONS.find((candidate) => path.endsWith(candidate))
+    const lines = readFileSync(path, 'utf8').split('\n')
+
+    lines.forEach((line, index) => {
+      const trimmed = line.trim()
+      const column = line.length - line.trimStart().length + 1
+      for (const rule of RULES) {
+        if (!rule.applies.includes(extension)) continue
+        rule.scan(line, (token, hint) => {
+          violations.push({
+            file: relative(process.cwd(), path),
+            line: index + 1,
+            column,
+            rule: rule.id,
+            token,
+            hint,
+            context: trimmed
+          })
+        })
+      }
+    })
+  }
+
+  if (violations.length === 0) {
+    console.log('check:design — no violations.')
+    return
+  }
+
+  for (const violation of violations) {
+    console.error(
+      `${violation.file}:${violation.line}:${violation.column}  ${violation.rule}  ${violation.token}`
+    )
+    console.error(`    ${violation.hint}`)
+    console.error(`    ${violation.context}`)
+  }
+  console.error(`\ncheck:design — ${violations.length} violation(s). See DESIGN.md for the rules.`)
+  process.exitCode = 1
+}
+
+main()
diff --git a/src/renderer/src/assets/theme.css b/src/renderer/src/assets/theme.css
index 4e49aaf..bd272b9 100644
--- a/src/renderer/src/assets/theme.css
+++ b/src/renderer/src/assets/theme.css
@@ -29,6 +29,9 @@
   /* Translucent state fills: they adapt to whatever surface they are drawn on. */
   --surface-hover: oklch(0.3496 0.0141 274.5028 / 0.05);
   --surface-selected: oklch(0.3496 0.0141 274.5028 / 0.09);
+  /* Scrim behind a modal layer. The one place a raw black is legitimate, so it
+     is a token instead of a literal. */
+  --scrim: oklch(0 0 0 / 0.5);
 
   /* Opaque quiet fill for nested containers (bubbles, icon tiles, code). */
   --muted: oklch(0.9551 0 0);
@@ -125,6 +128,7 @@
   --surface-overlay: oklch(0.365 0.011 260);
   --surface-hover: oklch(0.9 0.01 262 / 0.06);
   --surface-selected: oklch(0.9 0.01 262 / 0.1);
+  --scrim: oklch(0 0 0 / 0.65);
 
   /* --muted is a *recessed* fill: below surface-raised in both modes
      (light 0.9551 vs 1.0, dark 0.275 vs 0.325) so a bubble, icon tile or
@@ -181,6 +185,7 @@
   --color-surface-overlay: var(--surface-overlay);
   --color-surface-hover: var(--surface-hover);
   --color-surface-selected: var(--surface-selected);
+  --color-scrim: var(--scrim);
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);
diff --git a/src/renderer/src/components/common/TopNavigationBar.tsx b/src/renderer/src/components/common/TopNavigationBar.tsx
index 3eef9b5..4a2bec5 100644
--- a/src/renderer/src/components/common/TopNavigationBar.tsx
+++ b/src/renderer/src/components/common/TopNavigationBar.tsx
@@ -130,7 +130,7 @@ export default function TopNavigationBar({
                       handleCloseOpenedNotebook(notebook.id, e)
                     }
                   }}
-                  className="ml-1 inline-flex items-center justify-center h-4 w-4 p-0.5 rounded hover:bg-destructive/20 hover:text-destructive transition-colors"
+                  className="ml-1 inline-flex items-center justify-center h-4 w-4 p-0.5 rounded-md hover:bg-destructive/20 hover:text-destructive transition-colors"
                   title={t('closeTab')}
                 >
                   <X className="w-3 h-3" />
diff --git a/src/renderer/src/components/ui/alert-dialog.tsx b/src/renderer/src/components/ui/alert-dialog.tsx
index 48f46e0..43da601 100644
--- a/src/renderer/src/components/ui/alert-dialog.tsx
+++ b/src/renderer/src/components/ui/alert-dialog.tsx
@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-scrim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
diff --git a/src/renderer/src/components/ui/dialog.tsx b/src/renderer/src/components/ui/dialog.tsx
index c540453..4afb36b 100644
--- a/src/renderer/src/components/ui/dialog.tsx
+++ b/src/renderer/src/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-scrim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
diff --git a/src/renderer/src/components/ui/progress.tsx b/src/renderer/src/components/ui/progress.tsx
index bcf7f50..d978880 100644
--- a/src/renderer/src/components/ui/progress.tsx
+++ b/src/renderer/src/components/ui/progress.tsx
@@ -15,7 +15,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-primary transition-[transform]"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/src/renderer/src/components/ui/sheet.tsx b/src/renderer/src/components/ui/sheet.tsx
index 0bc508f..85be2eb 100644
--- a/src/renderer/src/components/ui/sheet.tsx
+++ b/src/renderer/src/components/ui/sheet.tsx
@@ -21,7 +21,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-scrim data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
diff --git a/src/renderer/src/components/ui/sidebar.tsx b/src/renderer/src/components/ui/sidebar.tsx
index fb85139..778e7e8 100644
--- a/src/renderer/src/components/ui/sidebar.tsx
+++ b/src/renderer/src/components/ui/sidebar.tsx
@@ -240,7 +240,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-elevation"
           >
             {children}
           </div>
@@ -500,10 +500,9 @@ const sidebarMenuButtonVariants = cva(
     variants: {
       variant: {
         default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-        // The old value was `shadow-[0_0_0_1px_hsl(var(--sidebar-border))]`,
-        // but --sidebar-border is an oklch() colour, so hsl() around it was
-        // invalid and the outline never rendered. A ring draws the same 1px
-        // outline without shifting layout.
+        // The old value wrapped the sidebar-border token in hsl(), which is
+        // invalid CSS for an oklch() colour, so the outline never rendered. A
+        // ring draws the same 1px outline without shifting layout.
         outline:
           'bg-surface-raised ring-1 ring-sidebar-border hover:bg-sidebar-accent hover:text-sidebar-accent-foreground'
       },

From 463264372d264a0b1d7f9f606be6541e626ae295 Mon Sep 17 00:00:00 2001
From: mrsibe <mrsibe@qq.com>
Date: Thu, 24 Sep 2026 15:31:34 +0800
Subject: [PATCH 4/4] fix(ui): drop a dead dark: foreground token in the
 language selector

--foreground-dark was never defined in theme.css, so the class generated
nothing. The base text-foreground already covers both themes.
---
 src/renderer/src/components/LanguageSelector.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/renderer/src/components/LanguageSelector.tsx b/src/renderer/src/components/LanguageSelector.tsx
index 2271f91..61733b0 100644
--- a/src/renderer/src/components/LanguageSelector.tsx
+++ b/src/renderer/src/components/LanguageSelector.tsx
@@ -18,10 +18,7 @@ export const LanguageSelector = ({ className = '' }: { className?: string }) =>
 
   return (
     <div className={`flex items-center space-x-2 ${className}`}>
-      <label
-        htmlFor="language-select"
-        className="text-sm font-medium text-foreground dark:text-foreground-dark"
-      >
+      <label htmlFor="language-select" className="text-sm font-medium text-foreground">
         {t('language', 'Language')}:
       </label>
       <Select value={language} onValueChange={(value) => handleLanguageChange(value as Language)}>