From 375584174fb7191a57c5423fea45924ad6d812d5 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 15:49:44 +0800
Subject: [变更性质] feat(frontend) [新增功能] round5 主题基线重置：shadcn
 preset b6t6C6CTw CLI init、app.css 仅保留 tailwind + shadcn 主题变量层
 [实现方案] 删除 round3 自定义 token/布局原语/legacy 别名；theme.ts
 删除；mobileCss 守门测试重写 [影响范围]
 src/app.css、components.json、lib/utils.ts、lib/theme.ts、测试
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app.css | 291 +++++++++++++--------------------------------------
 1 file changed, 70 insertions(+), 221 deletions(-)

(limited to 'frontend/src/app.css')

diff --git a/frontend/src/app.css b/frontend/src/app.css
index ae195ff..6e5f27d 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -5,216 +5,77 @@
 
 @custom-variant dark (&:is(.dark *));
 
-/* ==== round3 主题 sessions tokens ====
-   来源：用户在 shadcn 官网 create 的 Stripe 风格参考截图（preset b1D0dv72 CLI
-   拉取成功但落的是 neutral 默认，故按截图色值重配 tokens）。
-   参考取样：mint 主色 #70DAB6 / 深一档 #58D3AA；amber 主色 #F0AE00。
-   卡片白底、radius 0.75rem、大字重数字 tabular-nums。默认 mint，.theme-amber 切换。 */
+/* ==== preset b6t6C6CTw theme layer（shadcn-svelte CLI 生成，未做自定义编辑） ==== */
 
 :root,
 .dark {
-  /* shadcn tokens — white card, Stripe-ish neutrals */
-  --radius: 0.75rem;
-  --background: #f7fafb;
-  --foreground: #1e2a30;
-  --card: #ffffff;
-  --card-foreground: #1e2a30;
-  --popover: #ffffff;
-  --popover-foreground: #1e2a30;
-  --primary: #0e3a30;
-  --primary-foreground: #ffffff;
-  --secondary: #eef3f4;
-  --secondary-foreground: #26414a;
-  --muted: #eef3f4;
-  --muted-foreground: #5c6c74;
-  --accent: #e3f7ef;
-  --accent-foreground: #0b5d47;
-  --destructive: #b91c1c;
-  --input: #d6e0e3;
-  --ring: #70dab6;
-  --border: #e2eaec;
-  /* mint demo（默认） */
-  --brand: #58d3aa;
-  --brand-strong: #0f9f7a;
-  --brand-soft: #e3f7ef;
-  --brand-ink: #0b4a3a;
-  /* chart 家族（mint 梯度，贴近截图的柔和强调） */
-  --chart-1: #58d3aa;
-  --chart-2: #0f9f7a;
-  --chart-3: #0b4a3a;
-  --chart-4: #c4b37a;
-  --chart-5: #94a6ac;
-  --sidebar: #ffffff;
-  --sidebar-foreground: #1e2a30;
-  --sidebar-border: #e2eaec;
-  /* legacy alias（迁移期语义映射，等价 token 而非旧组件样式） */
-  --bg: var(--background);
-  --surface: var(--card);
-  --surface-2: var(--secondary);
-  --border-strong: #cbd5d8;
-  --text: var(--foreground);
-  --text-2: var(--muted-foreground);
-  --text-3: #7b8a92;
-  --teal: var(--brand);
-  --teal-strong: var(--brand-strong);
-  --teal-soft: var(--brand-soft);
-  --ink: var(--brand-ink);
-  --danger-soft: #fdf2f2;
-  --warn: #92400e;
-  --warn-soft: #fff9ec;
-  --ok: #15803d;
-  --ok-soft: #ecfdf3;
-  --shadow: 0 1px 2px rgba(16, 42, 49, 0.05), 0 2px 8px rgba(16, 42, 49, 0.05);
-  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'Noto Sans Mono CJK SC', monospace;
-  --font: -apple-system, 'SF Pro Text', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
-    'Noto Sans CJK SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
-  --sidebar-primary: var(--primary);
-  --sidebar-primary-foreground: var(--primary-foreground);
-  --sidebar-accent: var(--secondary);
-  --sidebar-accent-foreground: var(--foreground);
-  --sidebar-ring: var(--ring);
+  --radius: 0.625rem;
+  --background: oklch(0.148 0.004 228.8);
+  --foreground: oklch(0.987 0.002 197.1);
+  --card: oklch(0.218 0.008 223.9);
+  --card-foreground: oklch(0.987 0.002 197.1);
+  --popover: oklch(0.218 0.008 223.9);
+  --popover-foreground: oklch(0.987 0.002 197.1);
+  --primary: oklch(0.444 0.177 26.899);
+  --primary-foreground: oklch(0.971 0.013 17.38);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.275 0.011 216.9);
+  --muted-foreground: oklch(0.723 0.014 214.4);
+  --accent: oklch(0.275 0.011 216.9);
+  --accent-foreground: oklch(0.987 0.002 197.1);
+  --destructive: oklch(0.704 0.191 22.216);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.56 0.021 213.5);
+  --border: oklch(1 0 0 / 10%);
+  --chart-1: oklch(0.872 0.007 219.6);
+  --chart-2: oklch(0.56 0.021 213.5);
+  --chart-3: oklch(0.45 0.017 213.2);
+  --chart-4: oklch(0.378 0.015 216);
+  --chart-5: oklch(0.275 0.011 216.9);
+  --sidebar: oklch(0.218 0.008 223.9);
+  --sidebar-foreground: oklch(0.987 0.002 197.1);
+  --sidebar-primary: oklch(0.637 0.237 25.331);
+  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
+  --sidebar-accent: oklch(0.275 0.011 216.9);
+  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.56 0.021 213.5);
 }
 
-/* amber demo：第二套 CSS 变量组（src/lib/theme.ts 切换 .theme-amber） */
-.theme-amber {
-  --primary: #b87700;
-  --primary-foreground: #ffffff;
-  --accent: #fdf3d7;
-  --accent-foreground: #7a5200;
-  --ring: #f0ae00;
-  --brand: #f0ae00;
-  --brand-strong: #c08700;
-  --brand-soft: #fdf3d7;
-  --brand-ink: #5d3f00;
-  --chart-1: #f0ae00;
-  --chart-2: #b87700;
-  --chart-3: #6e4a00;
-  --chart-4: #58d3aa;
-  --chart-5: #94a6ac;
-}
-
-/* legacy 名义色到主题的映射：amber 组同样生效 */
-.theme-amber { --teal: var(--brand); --teal-strong: var(--brand-strong); --teal-soft: var(--brand-soft); --ink: var(--brand-ink); }
-
 .dark {
-  --background: #10181b;
-  --foreground: #eef3f4;
-  --card: #16211f;
-  --card-foreground: #eef3f4;
-  --popover: #16201f;
-  --popover-foreground: #eef3f4;
-  --primary: #58d3aa;
-  --primary-foreground: #0b1a16;
-  --secondary: #1c2a27;
-  --secondary-foreground: #eef3f4;
-  --muted: #1c2a27;
-  --muted-foreground: #93a5ab;
-  --accent: #12332c;
-  --accent-foreground: #8aeccf;
-  --destructive: #e05252;
-  --input: #243437;
-  --ring: #58d3aa;
-  --border: #223433;
-  --border-strong: #2c4340;
-  --brand-soft: rgba(88, 211, 170, 0.14);
-  --text-2: #93a5ab;
-  --text-3: #7b8a92;
-  --danger-soft: rgba(185, 28, 28, 0.2);
-  --warn-soft: rgba(146, 64, 14, 0.2);
-  --ok: #4ade80;
-}
-
-* { box-sizing: border-box; }
-
-/* 全局 150ms 微过渡 */
-a, button, input, select, textarea, [data-slot='card'], .navlink {
-  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
-    box-shadow 150ms ease, transform 150ms ease;
-}
-
-@media (hover: hover) and (min-width: 768px) {
-  [data-slot='card']:hover {
-    box-shadow: 0 4px 14px rgba(16, 42, 49, 0.08);
-    transform: translateY(-1px);
-  }
-}
-
-html, body {
-  margin: 0;
-  padding: 0;
-  background: var(--background);
-  color: var(--foreground);
-  font-family: var(--font);
-  font-size: 14.5px;
-  line-height: 1.55;
-  -webkit-font-smoothing: antialiased;
-  background-color: var(--background);
-}
-
-h1, h2, h3, h4 { font-weight: 600; margin: 0; }
-h1 { font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.25; }
-h2 { font-size: 1.18rem; letter-spacing: -0.01em; }
-h3 { font-size: 1.02rem; }
-
-a { color: var(--brand-strong); text-decoration: none; }
-a:hover { text-decoration: underline; }
-p { margin: 0.4rem 0; }
-
-button, input, select, textarea { font: inherit; color: inherit; }
-button { cursor: pointer; }
-
-/* 布局原语（非组件 facade）：排列结构工具 */
-.stack { display: flex; flex-direction: column; gap: 0.75rem; }
-.row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
-.spread { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
-.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
-.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
-.cols-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
-.table-wrap { overflow-x: auto; min-width: 0; }
-.card, .stack, .row, .spread { min-width: 0; }
-
-/* Semaphore 数字排印（Stripe 仪表感）：大字重 + 等宽数字 */
-.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }
-.mlabel { color: var(--text-3); font-size: 0.8rem; }
-.mvalue {
-  font-size: 1.5rem;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--foreground);
-  font-variant-numeric: tabular-nums;
-  font-family: var(--mono);
-  overflow-wrap: anywhere;
+  --background: oklch(0.148 0.004 228.8);
+  --foreground: oklch(0.987 0.002 197.1);
+  --card: oklch(0.218 0.008 223.9);
+  --card-foreground: oklch(0.987 0.002 197.1);
+  --popover: oklch(0.218 0.008 223.9);
+  --popover-foreground: oklch(0.987 0.002 197.1);
+  --primary: oklch(0.444 0.177 26.899);
+  --primary-foreground: oklch(0.971 0.013 17.38);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.275 0.011 216.9);
+  --muted-foreground: oklch(0.723 0.014 214.4);
+  --accent: oklch(0.275 0.011 216.9);
+  --accent-foreground: oklch(0.987 0.002 197.1);
+  --destructive: oklch(0.704 0.191 22.216);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.56 0.021 213.5);
+  --border: oklch(1 0 0 / 10%);
+  --chart-1: oklch(0.872 0.007 219.6);
+  --chart-2: oklch(0.56 0.021 213.5);
+  --chart-3: oklch(0.45 0.017 213.2);
+  --chart-4: oklch(0.378 0.015 216);
+  --chart-5: oklch(0.275 0.011 216.9);
+  --sidebar: oklch(0.218 0.008 223.9);
+  --sidebar-foreground: oklch(0.987 0.002 197.1);
+  --sidebar-primary: oklch(0.637 0.237 25.331);
+  --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
+  --sidebar-accent: oklch(0.275 0.011 216.9);
+  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.56 0.021 213.5);
 }
-.mvalue-sub { color: var(--text-3); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
-.metric-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 0.7rem;
-}
-.run-split { display: inline-flex; gap: 0.5rem; align-items: baseline; }
-.run-split i { font-style: normal; color: var(--text-3); font-size: 0.75rem; }
-
-.hint { color: var(--text-3); font-size: 0.82rem; line-height: 1.45; }
-label { display: block; font-size: 0.84rem; color: var(--text-2); font-weight: 500; margin-bottom: 0.25rem; }
-input, select, textarea { font: inherit; color: inherit; }
-
-code, pre { font-family: var(--mono); font-size: 0.85rem; }
-pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
-
-.sr-only {
-  position: absolute;
-  width: 1px; height: 1px;
-  padding: 0; margin: -1px;
-  overflow: hidden; clip: rect(0 0 0 0);
-  border: 0;
-}
-
-/* narrow-viewport wrapping（保留：文档级防溢出行为，非组件样式） */
-.banner { overflow-wrap: anywhere; }
-.banner .err-list { overflow-wrap: anywhere; }
-.table.data, table.data { min-width: 0; }
-.mono-invite { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; }
-.ul-plain { margin: 0.15rem 0 0; padding-left: 1.1rem; }
 
 @theme inline {
   --font-sans: 'Inter Variable', sans-serif;
@@ -256,28 +117,16 @@ pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
   --radius-2xl: calc(var(--radius) * 1.8);
   --radius-3xl: calc(var(--radius) * 2.2);
   --radius-4xl: calc(var(--radius) * 2.6);
-  --radius-0.75rem: var(--radius);
 }
 
 @layer base {
-	* {
-		@apply border-border outline-ring/50;
+  * {
+    @apply border-border outline-ring/50;
   }
-	body {
-		@apply bg-background text-foreground;
+  body {
+    @apply bg-background text-foreground;
   }
-	html {
-		@apply font-sans;
-  }
-}
-
-/* ---- 窄视口收敛（保留行为：不做全局隐藏，仅塌缩/换行 + 局部滚动） ---- */
-@media (max-width: 900px) {
-  .cols-2 { grid-template-columns: minmax(0, 1fr); }
-  .metric-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
-  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
-  table.data th, table.data td {
-    white-space: normal;
-    overflow-wrap: anywhere;
+  html {
+    @apply font-sans;
   }
 }
-- 
cgit v1.2.3