style: align sidebar and app canvas palette

docs/ui-architecture.md

@@ -2,6 +2,21 @@
 
 Updated: 2026-08-26
 
+## 2026-09-28 Shell 配色
+
+- AppShell 采用中性灰白内容画布与低饱和深藏蓝 Sidebar。页面画布由 `theme.css`
+  的 `--background: oklch(97.4% 0.002 255)` 提供；侧栏背景为
+  `oklch(32% 0.037 255)`。桌面和移动侧栏共用 `--xinyuan-sidebar-*`，选中导航为
+  提亮的蓝色底与白字，侧栏红色 Logo 直接显示、不加底色；页面仍固定浅色，不提供
+  主题切换。
+- 内容画布在 AppShell 顶部使用 4% 侧栏蓝色与 `--background` 混合的轻微渐变，至
+  `18rem` 淡出到灰白底色；Navbar 和滚动区共用这一层，页面 Card 与 HeroUI 组件
+  保持原有表面 Token。
+- 当前导航使用较亮的同色系底色提高与侧栏的区分度，悬停时保留选中底色；普通导航
+  使用略亮于侧栏的同色系悬停色。
+- 此调整仅涉及 Shell 视觉层，不改变审计材料中心路由、通知入口、页面状态或业务
+  数据协议。
+
 ## Framework Boundary
 
 HeroUI and HeroUI Pro are the project's only UI component system. Production

docs/xinyuan-design-system.md

 # XinYuan Design System
 
-Updated: 2026-09-02
+Updated: 2026-09-28
+
+## 2026-09-28 Shell 配色调整
+
+当前 AppShell 使用低饱和深藏蓝侧栏与中性灰白内容画布。`theme.css` 的
+`--background` 和 `--xinyuan-sidebar-*` 是这组配色的唯一来源：侧栏背景
+`oklch(32% 0.037 255)`，页面画布为 `oklch(97.4% 0.002 255)`；侧栏文字为近白色，
+悬停项为稍亮的蓝色，选中项为提亮的蓝色底与白字。品牌主红 `#DA241A` 不变。侧栏
+红色 Logo 直接显示，不加底色。桌面与移动侧栏共用这些 Token，导航结构、交互及数据
+状态不变。后续配色调整以本节和实际 Token 为准。
+
+当前选中项底色为 `oklch(46% 0.055 255)`，与深藏蓝侧栏明确区分。普通项悬停使用
+侧栏同色系；当前项悬停时保留选中底色和白色文字，不被普通悬停色覆盖。
+
+内容画布顶部使用仅限 AppShell 的轻微渐变：`--xinyuan-canvas-top` 从深藏蓝侧栏色
+与 `--background` 混合 4% 得到，在顶部至 `18rem` 处过渡回 `--background`。Navbar
+与页面滚动区透出同一层背景；Card、Surface、字段和浮层仍按 HeroUI 原有 Token 渲染。
 
 ## Authority
 

src/design-system/shell.css

@@ -401,7 +401,7 @@
 
 .app-shell-content-scroll {
   min-width: 0;
-  background: var(--rc-bg-canvas);
+  background: transparent;
   overscroll-behavior: contain;
 }
 
@@ -1047,7 +1047,11 @@
   overflow: hidden;
   border: 0;
   border-radius: 0;
-  background: var(--rc-bg-canvas);
+  background: linear-gradient(
+    180deg,
+    var(--xinyuan-canvas-top) 0,
+    var(--rc-bg-canvas) 18rem
+  );
 }
 
 .dark .rc-app-main.sidebar__main,
@@ -1366,16 +1370,20 @@
 .template-dashboard-shell
   .sidebar__menu-item[data-current='true']
   .sidebar__menu-item-content,
-.template-dashboard-shell .sidebar__menu-item:hover .sidebar__menu-item-content,
 .template-dashboard-shell
-  .sidebar__menu-item[data-hovered='true']
+  .sidebar__menu-item:not([data-current='true']):hover
+  .sidebar__menu-item-content,
+.template-dashboard-shell
+  .sidebar__menu-item:not([data-current='true'])[data-hovered='true']
   .sidebar__menu-item-content,
 .rc-mobile-sidebar
   .sidebar__menu-item[data-current='true']
   .sidebar__menu-item-content,
-.rc-mobile-sidebar .sidebar__menu-item:hover .sidebar__menu-item-content,
 .rc-mobile-sidebar
-  .sidebar__menu-item[data-hovered='true']
+  .sidebar__menu-item:not([data-current='true']):hover
+  .sidebar__menu-item-content,
+.rc-mobile-sidebar
+  .sidebar__menu-item:not([data-current='true'])[data-hovered='true']
   .sidebar__menu-item-content {
   color: var(--foreground);
   background: var(--default);
@@ -1477,7 +1485,7 @@
   }
 }
 
-/* Final fixed dark Sidebar overrides. */
+/* Muted navy navigation beside the permanently light content canvas. */
 .template-dashboard-shell .app-sidebar-glass,
 .rc-mobile-sidebar.app-sidebar-glass {
   color: var(--rc-sidebar-foreground);
@@ -1497,10 +1505,18 @@
   color: var(--rc-sidebar-item-selected-foreground);
   background: var(--rc-sidebar-item-selected);
 }
-.template-dashboard-shell .sidebar__menu-item:hover .sidebar__menu-item-content,
-.template-dashboard-shell .sidebar__menu-item[data-hovered='true'] .sidebar__menu-item-content,
-.rc-mobile-sidebar .sidebar__menu-item:hover .sidebar__menu-item-content,
-.rc-mobile-sidebar .sidebar__menu-item[data-hovered='true'] .sidebar__menu-item-content {
+.template-dashboard-shell
+  .sidebar__menu-item:not([data-current='true']):hover
+  .sidebar__menu-item-content,
+.template-dashboard-shell
+  .sidebar__menu-item:not([data-current='true'])[data-hovered='true']
+  .sidebar__menu-item-content,
+.rc-mobile-sidebar
+  .sidebar__menu-item:not([data-current='true']):hover
+  .sidebar__menu-item-content,
+.rc-mobile-sidebar
+  .sidebar__menu-item:not([data-current='true'])[data-hovered='true']
+  .sidebar__menu-item-content {
   color: var(--rc-sidebar-foreground);
   background: var(--rc-sidebar-item-hover);
 }

src/design-system/theme.css

@@ -13,7 +13,8 @@
   /* Theme Colors (Light Mode) */
   --accent: #DA241A;
   --accent-foreground: oklch(99.11% 0 0);
-  --background: oklch(97.02% 0.0000 29.20);
+  --background: oklch(97.4% 0.002 255);
+  --xinyuan-canvas-top: color-mix(in oklab, var(--xinyuan-sidebar-background) 4%, var(--background));
   --border: oklch(90.00% 0.0000 29.20);
   --danger: oklch(45.32% 0.1661 27.03);
   --danger-foreground: oklch(99.11% 0 0);
@@ -52,18 +53,17 @@
   --font-sans: var(--font-inter);
 
   /*
-   * Xinyuan fixed split-shell contract.
-   * The application canvas always uses this light theme. The Sidebar is the
-   * only persistent dark plane and must consume these semantic tokens.
+   * Xinyuan fixed light canvas with a muted navy Sidebar.
+   * Navigation colors are kept separate from HeroUI surfaces.
    */
-  --xinyuan-sidebar-background: oklch(16% 0.020 255);
-  --xinyuan-sidebar-border: oklch(26% 0.022 255);
-  --xinyuan-sidebar-foreground: oklch(97% 0.004 255);
-  --xinyuan-sidebar-muted: oklch(76% 0.018 255);
-  --xinyuan-sidebar-item-hover: oklch(22% 0.026 255);
-  --xinyuan-sidebar-item-selected: oklch(28% 0.016 255);
+  --xinyuan-sidebar-background: oklch(32% 0.037 255);
+  --xinyuan-sidebar-border: oklch(41% 0.036 255);
+  --xinyuan-sidebar-foreground: oklch(97% 0.005 255);
+  --xinyuan-sidebar-muted: oklch(82% 0.018 255);
+  --xinyuan-sidebar-item-hover: oklch(39% 0.042 255);
+  --xinyuan-sidebar-item-selected: oklch(46% 0.055 255);
   --xinyuan-sidebar-item-selected-foreground: oklch(99% 0.002 255);
-  --xinyuan-sidebar-focus: oklch(78% 0.105 29.20);
+  --xinyuan-sidebar-focus: oklch(85% 0.070 255);
 
   /*
    * ECharts is the required chart renderer for Xinyuan applications.

src/design-system/tokens.css

@@ -27,6 +27,7 @@
     var(--background)
   );
   --rc-text-muted: var(--muted);
+  /* Muted navy Sidebar aliases. The content canvas remains light. */
   --rc-sidebar-background: var(--xinyuan-sidebar-background);
   --rc-sidebar-border: var(--xinyuan-sidebar-border);
   --rc-sidebar-foreground: var(--xinyuan-sidebar-foreground);

src/pages/project_manager_xy/Layout.jsx

-import xinyuanLogoWhite from "@/assets/xy-logo-white.png";
+import xinyuanLogoRed from "@/assets/xy-logo-red.png";
 import {
   APPLICATION_BASE_PATH,
   APPLICATION_DISPLAY_NAME,
@@ -85,7 +85,7 @@ function SidebarContent({ currentPath, onOpenApplicationDialog, userInfo }) {
       <Sidebar.Header>
         <div className="app-sidebar-brand rc-sidebar-brand">
           <div className="app-sidebar-brand-mark rc-sidebar-brand-mark">
-            <img alt="鑫元" className="rc-sidebar-logo" src={xinyuanLogoWhite} />
+            <img alt="鑫元" className="rc-sidebar-logo" src={xinyuanLogoRed} />
           </div>
           <div className="app-sidebar-brand-main rc-sidebar-brand-main" data-sidebar="label">
             <span className="app-sidebar-title rc-sidebar-title">