From b9beddacf7f3fb1d0e16193b067c704397df599c Mon Sep 17 00:00:00 2001
From: WorkBuddy <workbuddy@local>
Date: Tue, 22 Sep 2026 16:55:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(design):=20ok/warn/bad=20=E8=AF=AD?=
 =?UTF-8?q?=E4=B9=89=E8=89=B2=20token=20+=20btn-outline=20+=20=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E5=8A=A8=E6=95=88=20keyframes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- tailwind 新增语义状态色三组(纸底文字级 600/700 对比度 ≥4.5:1,AA),
  色相降饱和贴近墨色印刷感;后续替换全部裸 tailwind 原色(emerald/amber/rose)
- 补 btn-outline 定义:此前三处使用但从未定义,样式静默失效
- 弹窗入场动画 keyframes:遮罩淡入 0.18s + 面板上浮 0.2s,仅 opacity/transform
---
 frontend/src/index.css      | 22 +++++++++++++++++++++
 frontend/tailwind.config.js | 39 +++++++++++++++++++++++++++++++------
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3f13dfa..56fccdd 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -103,6 +103,28 @@
   .btn-danger {
     @apply border-press bg-transparent text-press hover:bg-press hover:text-paper-50;
   }
+  /* 描边确认按钮:次级动作中需要比默认 btn 更明确轮廓的场合
+     (此前三处使用但从未定义,样式静默失效) */
+  .btn-outline {
+    @apply border-ink-900 bg-transparent text-ink-900
+           hover:border-press hover:bg-press-wash hover:text-press-dark;
+  }
+
+  /* ── 弹窗入场:遮罩淡入 + 面板上浮(仅 opacity/transform,GPU 友好) ── */
+  .modal-overlay-enter {
+    animation: modal-fade 0.18s ease-out both;
+  }
+  .modal-panel-enter {
+    animation: modal-rise 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+  @keyframes modal-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes modal-rise {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
 
   /* ── 统一空态 ── */
   .empty-state {
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 539a452..1addd4a 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -24,12 +24,39 @@ export default {
           800: '#282420',
           900: '#17140F',
         },
-        // 印报红:全站唯一强调色,克制使用
-        press: {
-          DEFAULT: '#9E1B1B',
-          dark: '#7C1414',
-          wash: '#F7E9E4',
-        },
+      // 印报红:全站唯一强调色,克制使用
+      press: {
+        DEFAULT: '#9E1B1B',
+        dark: '#7C1414',
+        wash: '#F7E9E4',
+      },
+      // ── 语义状态色:成功/警告/负面 ──
+      // 设计约束:纸底 #FDFCF8 上文字级(600/700)对比度 ≥ 4.5:1(WCAG AA),
+      // 点/条级(500) ≥ 3:1;色相降饱和以贴近墨色印刷感,不使用 tailwind 原色。
+      ok: {
+        50: '#EAF3ED',
+        100: '#D5E8DC',
+        300: '#A3C9B1',
+        500: '#43925F',
+        600: '#2E7A4C',
+        700: '#1F6B45',
+      },
+      warn: {
+        50: '#FBF3E4',
+        100: '#F5E5C8',
+        300: '#E2C48E',
+        500: '#D97706',
+        600: '#A15C0B',
+        700: '#8F5109',
+      },
+      bad: {
+        50: '#FAEDED',
+        100: '#F6E3E3',
+        300: '#E4AFAF',
+        500: '#C24A4A',
+        600: '#A83B3B',
+        700: '#8F3030',
+      },
       },
       fontFamily: {
         // 毛体草书(国内 CDN)+ 粗楷体回退