From fc3aa122d2ab320086a52556270ea246702cd50e Mon Sep 17 00:00:00 2001
From: Roger Deng <13251150+rogerdigital@users.noreply.github.com>
Date: Tue, 14 Apr 2026 17:41:54 +0800
Subject: [PATCH] style: improve overall UI readability and fix sidebar toggle
 visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Raise text contrast: --text #b8cde8→#d8eaf8, --muted opacity 0.65→0.82,
  --muted-strong opacity 0.82→0.95 to meet WCAG AA across the board
- Lift panel backgrounds: --panel #04091a→#091224, --panel-2/3 in proportion,
  creating clearer three-level depth separation from the canvas
- Strengthen border visibility: --line opacity 0.10→0.22, --line-strong 0.24→0.40
- Promote muted→muted-strong on secondary labels (eyebrow, tile-label,
  toolbar-kicker, metric spans, log-copy, th headers, etc.)
- Add Chinese font fallbacks: PingFang SC / Noto Sans SC / Microsoft YaHei
  on --font-display and --font-ui to prevent CJK text falling back to monospace
- Enable antialiased font rendering on body
- Fix sidebar toggle button clipped by overflow:hidden: change sidebar to
  overflow:visible and raise sidebarToggle z-index 10→50 (above globalToolbar z:40)
- Sync all hardcoded rgba background values in ConsoleChrome.css.ts,
  layout.css.ts, panels.css.ts and tables.css.ts to the new palette
---
 apps/web/src/app/styles/base.css.ts           | 14 +++++----
 apps/web/src/app/styles/layout.css.ts         | 31 ++++++++++---------
 apps/web/src/app/styles/panels.css.ts         | 22 ++++++-------
 apps/web/src/app/styles/tables.css.ts         | 16 +++++-----
 apps/web/src/app/styles/theme.css.ts          | 30 +++++++++---------
 .../components/layout/ConsoleChrome.css.ts    | 12 +++----
 6 files changed, 64 insertions(+), 61 deletions(-)

diff --git a/apps/web/src/app/styles/base.css.ts b/apps/web/src/app/styles/base.css.ts
index a799d82..5ee6615 100644
--- a/apps/web/src/app/styles/base.css.ts
+++ b/apps/web/src/app/styles/base.css.ts
@@ -23,23 +23,25 @@ globalStyle('::-webkit-scrollbar-track', {
 });
 
 globalStyle('::-webkit-scrollbar-thumb', {
-  background: 'rgba(0, 180, 255, 0.18)',
+  background: 'rgba(0, 180, 255, 0.28)',
   borderRadius: '3px',
 });
 
 globalStyle('::-webkit-scrollbar-thumb:hover', {
-  background: 'rgba(0, 212, 255, 0.36)',
+  background: 'rgba(0, 212, 255, 0.50)',
 });
 
 globalStyle('body', {
   margin: 0,
   color: 'var(--text)',
   background: 'var(--bg-canvas)',
-  font: '14px/1.55 var(--font-ui)',
+  font: '14px/1.65 var(--font-ui)',
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
   backgroundImage: [
-    'radial-gradient(ellipse 110% 55% at 50% -5%, rgba(0, 80, 180, 0.13) 0%, transparent 65%)',
-    'radial-gradient(ellipse 45% 35% at 88% 18%, rgba(0, 200, 255, 0.05) 0%, transparent 55%)',
-    'radial-gradient(ellipse 35% 25% at 12% 75%, rgba(139, 92, 246, 0.05) 0%, transparent 55%)',
+    'radial-gradient(ellipse 130% 65% at 50% -5%, rgba(0, 100, 220, 0.20) 0%, transparent 65%)',
+    'radial-gradient(ellipse 55% 45% at 90% 20%, rgba(0, 200, 255, 0.10) 0%, transparent 55%)',
+    'radial-gradient(ellipse 45% 35% at 10% 80%, rgba(139, 92, 246, 0.10) 0%, transparent 55%)',
   ].join(', '),
   backgroundAttachment: 'fixed',
 } as any);
diff --git a/apps/web/src/app/styles/layout.css.ts b/apps/web/src/app/styles/layout.css.ts
index e2200f5..03702cc 100644
--- a/apps/web/src/app/styles/layout.css.ts
+++ b/apps/web/src/app/styles/layout.css.ts
@@ -42,10 +42,10 @@ globalStyle('.sidebar', {
   minHeight: '100vh',
   padding: '24px 16px',
   borderRight: '1px solid var(--line)',
-  background: 'linear-gradient(180deg, rgba(6, 14, 32, 0.99) 0%, rgba(4, 9, 22, 0.99) 100%)',
+  background: 'linear-gradient(180deg, rgba(8, 18, 42, 0.99) 0%, rgba(6, 12, 28, 0.99) 100%)',
   display: 'flex',
   flexDirection: 'column',
-  overflow: 'hidden',
+  overflow: 'visible',
 } as any);
 
 globalStyle('.sidebar::after', {
@@ -110,7 +110,7 @@ globalStyle('.brand-name', {
 globalStyle(
   '.brand-sub, .sidebar-label, .eyebrow, .card-eyebrow, .tile-label, .meta-label, .panel-copy',
   {
-    color: 'var(--muted)',
+    color: 'var(--muted-strong)',
   } as any
 );
 
@@ -134,7 +134,7 @@ globalStyle('.sidebar-block', {
   padding: '13px 12px 11px',
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius)',
-  background: 'linear-gradient(135deg, rgba(10, 20, 44, 0.85), rgba(6, 12, 28, 0.9))',
+  background: 'linear-gradient(135deg, rgba(14, 26, 58, 0.9), rgba(8, 16, 36, 0.95))',
   transition: 'border-color 180ms ease',
 } as any);
 
@@ -264,7 +264,7 @@ globalStyle('.global-toolbar', {
   padding: '10px 16px',
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius-lg)',
-  background: 'linear-gradient(135deg, rgba(6, 14, 32, 0.98), rgba(4, 9, 22, 0.99))',
+  background: 'linear-gradient(135deg, rgba(8, 18, 42, 0.98), rgba(6, 12, 28, 0.99))',
   boxShadow: '0 2px 16px rgba(0, 0, 0, 0.45)',
   animation: 'panel-enter 250ms ease both',
 } as any);
@@ -284,7 +284,7 @@ globalStyle('.global-toolbar::before', {
 globalStyle('.toolbar-copy', { display: 'grid', gap: '3px' } as any);
 
 globalStyle('.toolbar-kicker', {
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   font: '500 10px/1 var(--font-data)',
   letterSpacing: '0.14em',
   textTransform: 'uppercase',
@@ -293,10 +293,11 @@ globalStyle('.toolbar-kicker', {
 globalStyle('.toolbar-title', {
   font: '700 15px/1 var(--font-data)',
   letterSpacing: '0.01em',
+  color: 'var(--text-strong)',
 } as any);
 
 globalStyle('.toolbar-sub', {
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   fontSize: '12px',
   fontFamily: 'var(--font-data)',
   letterSpacing: '0.04em',
@@ -316,7 +317,7 @@ globalStyle('.toolbar-pill, .locale-trigger, .locale-option', {
   justifyContent: 'center',
   borderRadius: 'var(--radius)',
   border: '1px solid var(--line)',
-  background: 'rgba(7, 15, 34, 0.9)',
+  background: 'rgba(10, 20, 46, 0.9)',
   color: 'var(--muted)',
   font: '600 12px/1 var(--font-data)',
   letterSpacing: '0.08em',
@@ -471,7 +472,7 @@ globalStyle('.locale-menu', {
   padding: '6px',
   borderRadius: 'var(--radius)',
   border: '1px solid var(--line-strong)',
-  background: 'rgba(6, 14, 32, 0.98)',
+  background: 'rgba(8, 18, 42, 0.98)',
   boxShadow: 'var(--shadow), 0 0 30px rgba(0, 0, 0, 0.5)',
   backdropFilter: 'blur(12px)',
   animation: 'fade-up 160ms ease both',
@@ -483,7 +484,7 @@ globalStyle('.locale-option', {
   minHeight: '38px',
   padding: '0 12px',
   marginTop: '4px',
-  background: 'rgba(10, 20, 40, 0.9)',
+  background: 'rgba(12, 24, 52, 0.9)',
   cursor: 'pointer',
   transition: 'border-color 140ms ease, background 140ms ease',
 } as any);
@@ -537,7 +538,7 @@ globalStyle('.topbar', {
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius-xl)',
   background:
-    'linear-gradient(140deg, rgba(8, 18, 40, 0.97) 0%, rgba(5, 10, 26, 0.98) 60%, rgba(8, 5, 28, 0.97) 100%)',
+    'linear-gradient(140deg, rgba(10, 22, 50, 0.97) 0%, rgba(7, 14, 34, 0.98) 60%, rgba(10, 7, 34, 0.97) 100%)',
   boxShadow: 'var(--shadow-panel)',
   animation: 'panel-enter 300ms ease 50ms both',
   overflow: 'hidden',
@@ -572,15 +573,15 @@ globalStyle('h1', {
   font: '700 clamp(26px, 4vw, 44px)/0.9 var(--font-display)',
   letterSpacing: '0.05em',
   textTransform: 'uppercase',
-  color: 'var(--text-strong)',
+  color: '#f4fbff',
 } as any);
 
 globalStyle('.topbar-copy', {
   maxWidth: '720px',
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   margin: 0,
   fontSize: '13px',
-  lineHeight: '1.6',
+  lineHeight: '1.65',
 } as any);
 
 globalStyle('.topbar-meta', {
@@ -639,7 +640,7 @@ globalStyle('.route-card, .policy-card', {
   marginTop: '10px',
   padding: '14px',
   borderRadius: 'var(--radius)',
-  background: 'rgba(10, 20, 40, 0.8)',
+  background: 'rgba(12, 24, 52, 0.85)',
   border: '1px solid var(--line)',
 } as any);
 
diff --git a/apps/web/src/app/styles/panels.css.ts b/apps/web/src/app/styles/panels.css.ts
index a33c865..0fd7f4e 100644
--- a/apps/web/src/app/styles/panels.css.ts
+++ b/apps/web/src/app/styles/panels.css.ts
@@ -137,7 +137,7 @@ globalStyle('.overview-command-copy', {
   maxWidth: '560px',
   color: 'var(--muted-strong)',
   fontSize: '13px',
-  lineHeight: '1.6',
+  lineHeight: '1.65',
 } as any);
 
 globalStyle('.overview-command-aside', { display: 'grid', gap: '10px' } as any);
@@ -148,7 +148,7 @@ globalStyle('.overview-brief-card, .overview-primary-note', {
   padding: '12px 14px',
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius)',
-  background: 'rgba(10, 20, 44, 0.8)',
+  background: 'rgba(14, 26, 58, 0.85)',
 } as any);
 
 globalStyle('.overview-brief-card span, .overview-command-note span, .overview-primary-note span', {
@@ -187,7 +187,7 @@ globalStyle('.overview-command-strip', {
 globalStyle('.overview-stat', { display: 'grid', gap: '6px' } as any);
 
 globalStyle('.overview-stat span', {
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   font: '600 10px/1 var(--font-data)',
   letterSpacing: '0.12em',
   textTransform: 'uppercase',
@@ -224,7 +224,7 @@ globalStyle('.overview-kpi-grid div', {
 } as any);
 
 globalStyle('.overview-kpi-grid span', {
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   fontSize: '12px',
 } as any);
 
@@ -343,7 +343,7 @@ globalStyle('.mini-metric', {
 
 globalStyle('.mini-copy', {
   marginTop: '10px',
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   fontSize: '13px',
   lineHeight: '1.6',
 } as any);
@@ -380,7 +380,7 @@ globalStyle('.metric-card', {
   padding: '14px 16px',
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius)',
-  background: 'linear-gradient(140deg, rgba(10, 22, 46, 0.9), rgba(6, 12, 28, 0.95))',
+  background: 'linear-gradient(140deg, rgba(14, 28, 56, 0.95), rgba(8, 16, 36, 0.98))',
   display: 'grid',
   gap: '8px',
   position: 'relative',
@@ -405,7 +405,7 @@ globalStyle('.metric-card:hover', {
 } as any);
 
 globalStyle('.metric-card span', {
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   font: '600 10px/1 var(--font-data)',
   letterSpacing: '0.12em',
   textTransform: 'uppercase',
@@ -631,7 +631,7 @@ globalStyle('.overview-inline-metrics', {
 globalStyle('.overview-inline-metric', { display: 'grid', gap: '6px' } as any);
 
 globalStyle('.overview-inline-metric span', {
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   font: '600 10px/1 var(--font-data)',
   letterSpacing: '0.12em',
   textTransform: 'uppercase',
@@ -649,7 +649,7 @@ globalStyle('.overview-ops-cluster', {
   padding: '14px',
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius)',
-  background: 'rgba(8, 18, 40, 0.85)',
+  background: 'rgba(10, 22, 50, 0.9)',
   transition: 'border-color 180ms ease',
 } as any);
 
@@ -708,7 +708,7 @@ globalStyle('.inline-link', {
 } as any);
 
 globalStyle('.status-copy', {
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   fontSize: '13px',
   lineHeight: '1.6',
 } as any);
@@ -725,6 +725,6 @@ globalStyle('.focus-list', {
 globalStyle('.focus-list-terminal', {
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius)',
-  background: 'rgba(1, 3, 12, 0.65)',
+  background: 'rgba(4, 8, 22, 0.75)',
   padding: '4px 14px',
 } as any);
diff --git a/apps/web/src/app/styles/tables.css.ts b/apps/web/src/app/styles/tables.css.ts
index f0892f8..caa87af 100644
--- a/apps/web/src/app/styles/tables.css.ts
+++ b/apps/web/src/app/styles/tables.css.ts
@@ -103,7 +103,7 @@ globalStyle('.inspection-json', {
   padding: '14px 16px',
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius)',
-  background: 'rgba(1, 3, 10, 0.7)',
+  background: 'rgba(3, 6, 18, 0.8)',
   color: 'var(--muted)',
   font: '12px/1.6 var(--font-data)',
   whiteSpace: 'pre-wrap',
@@ -176,7 +176,7 @@ globalStyle('.table-wrap', {
   overflowX: 'auto',
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius)',
-  background: 'rgba(6, 12, 28, 0.85)',
+  background: 'rgba(8, 16, 38, 0.9)',
 } as any);
 
 globalStyle('.table-wrap table', {
@@ -193,11 +193,11 @@ globalStyle('th, td', {
 
 globalStyle('th', {
   font: '600 10px/1 var(--font-data)',
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   textTransform: 'uppercase',
   letterSpacing: '0.12em',
-  background: 'rgba(0, 180, 255, 0.025)',
-  borderBottomColor: 'rgba(40, 120, 220, 0.12)',
+  background: 'rgba(0, 180, 255, 0.04)',
+  borderBottomColor: 'var(--line)',
 } as any);
 
 globalStyle('td', {
@@ -344,7 +344,7 @@ globalStyle('.log-item:hover::before', { opacity: 0.9 } as any);
 globalStyle('.log-item:last-child', { marginBottom: 0 } as any);
 
 globalStyle('.log-time', {
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   font: '600 11px/1.2 var(--font-data)',
 } as any);
 
@@ -355,9 +355,9 @@ globalStyle('.log-title', {
 
 globalStyle('.log-copy', {
   marginTop: '4px',
-  color: 'var(--muted)',
+  color: 'var(--muted-strong)',
   fontSize: '12px',
-  lineHeight: '1.55',
+  lineHeight: '1.6',
 } as any);
 
 globalStyle('.log-tag', {
diff --git a/apps/web/src/app/styles/theme.css.ts b/apps/web/src/app/styles/theme.css.ts
index 52c2c12..068cbc4 100644
--- a/apps/web/src/app/styles/theme.css.ts
+++ b/apps/web/src/app/styles/theme.css.ts
@@ -6,23 +6,23 @@ import { globalStyle } from '@vanilla-extract/css';
 
 globalStyle(':root', {
   /* Canvas layers */
-  '--bg-canvas': '#01030c',
+  '--bg-canvas': '#030818',
   '--bg': 'var(--bg-canvas)',
-  '--panel': '#04091a',
-  '--panel-2': '#070f24',
-  '--panel-3': '#0b162f',
-  '--panel-frame': 'rgba(0, 200, 255, 0.07)',
+  '--panel': '#091224',
+  '--panel-2': '#0d192e',
+  '--panel-3': '#122038',
+  '--panel-frame': 'rgba(0, 200, 255, 0.10)',
 
   /* Lines & borders */
-  '--line': 'rgba(40, 120, 220, 0.1)',
-  '--line-strong': 'rgba(40, 120, 220, 0.24)',
-  '--line-vivid': 'rgba(0, 210, 255, 0.35)',
+  '--line': 'rgba(60, 140, 240, 0.22)',
+  '--line-strong': 'rgba(60, 140, 240, 0.40)',
+  '--line-vivid': 'rgba(0, 210, 255, 0.55)',
 
   /* Typography */
-  '--text': '#b8cde8',
-  '--text-strong': '#e2efff',
-  '--muted': 'rgba(100, 140, 195, 0.65)',
-  '--muted-strong': 'rgba(140, 175, 225, 0.82)',
+  '--text': '#d8eaf8',
+  '--text-strong': '#f0f8ff',
+  '--muted': 'rgba(160, 195, 230, 0.82)',
+  '--muted-strong': 'rgba(190, 215, 245, 0.95)',
 
   /* Accent palette */
   '--accent-live': '#00d4ff',
@@ -37,9 +37,9 @@ globalStyle(':root', {
   '--info': '#4da6ff',
 
   /* Fonts */
-  '--font-display': '"Rajdhani", "JetBrains Mono", monospace',
-  '--font-ui': '"Plus Jakarta Sans", sans-serif',
-  '--font-data': '"JetBrains Mono", monospace',
+  '--font-display': '"Rajdhani", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif',
+  '--font-ui': '"Plus Jakarta Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif',
+  '--font-data': '"JetBrains Mono", "SF Mono", "Consolas", monospace',
 
   /* Shadows */
   '--shadow': '0 24px 64px rgba(0, 0, 0, 0.75), 0 4px 16px rgba(0, 0, 0, 0.55)',
diff --git a/apps/web/src/components/layout/ConsoleChrome.css.ts b/apps/web/src/components/layout/ConsoleChrome.css.ts
index 8596dd6..7c67840 100644
--- a/apps/web/src/components/layout/ConsoleChrome.css.ts
+++ b/apps/web/src/components/layout/ConsoleChrome.css.ts
@@ -61,10 +61,10 @@ export const sidebar = style({
   minHeight: '100vh',
   padding: '24px 16px',
   borderRight: '1px solid var(--line)',
-  background: 'linear-gradient(180deg, rgba(6, 14, 32, 0.99) 0%, rgba(4, 9, 22, 0.99) 100%)',
+  background: 'linear-gradient(180deg, rgba(10, 20, 46, 0.99) 0%, rgba(8, 16, 36, 0.99) 100%)',
   display: 'flex',
   flexDirection: 'column',
-  overflow: 'hidden',
+  overflow: 'visible',
 });
 
 globalStyle(`${sidebar}::after`, {
@@ -101,7 +101,7 @@ export const sidebarToggle = style({
   position: 'absolute',
   top: '24px',
   right: '-13px',
-  zIndex: 10,
+  zIndex: 50,
   width: '26px',
   height: '26px',
   borderRadius: '50%',
@@ -169,10 +169,10 @@ export const sidebarBlock = style({
   padding: '13px 12px 11px',
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius)',
-  background: 'linear-gradient(135deg, rgba(10, 20, 44, 0.85), rgba(6, 12, 28, 0.9))',
+  background: 'linear-gradient(135deg, rgba(16, 30, 66, 0.90), rgba(10, 20, 46, 0.95))',
   transition: 'border-color 180ms ease',
   ':hover': {
-    borderColor: 'rgba(40, 120, 220, 0.2)',
+    borderColor: 'rgba(60, 140, 240, 0.35)',
   },
 });
 
@@ -205,7 +205,7 @@ export const globalToolbar = style({
   padding: '10px 16px',
   border: '1px solid var(--line)',
   borderRadius: 'var(--radius-lg)',
-  background: 'linear-gradient(135deg, rgba(6, 14, 32, 0.98), rgba(4, 9, 22, 0.99))',
+  background: 'linear-gradient(135deg, rgba(10, 20, 46, 0.98), rgba(8, 16, 36, 0.99))',
   boxShadow: '0 2px 16px rgba(0, 0, 0, 0.45)',
   animation: 'panel-enter 250ms ease both',
 });