weifuwu 0.60.0 → 0.61.0

package/dist/components/style.css

@@ -14,13 +14,18 @@
   /* 品牌（覆盖 --wf-brand-500 即换主题色，全站跟随） */
   --wf-brand-500: #4f6ef7;
   --wf-brand-600: #3b5ae0;
+  --wf-brand-700: #4338ca;  /* 品牌文字色（浅底可读，配 --wf-color-primary-text） */
   --wf-brand-50: #eef1ff;
 
   /* 语义原始色 */
   --wf-green-500: #22c55e;  --wf-green-50: #f0fdf4;
+  --wf-green-700: #15803d;  /* 语义文字色（浅底可读） */
   --wf-amber-500: #f59e0b;  --wf-amber-50: #fffbeb;
+  --wf-amber-700: #b45309;  /* 语义文字色（浅底可读） */
   --wf-red-500: #ef4444;    --wf-red-50: #fef2f2;
+  --wf-red-700: #b91c1c;    /* 语义文字色（浅底可读） */
   --wf-sky-500: #1677ff;    --wf-sky-50: #e6f4ff;
+  --wf-sky-700: #0369a1;    /* 语义文字色（浅底可读） */
 
   /* 中性 */
   --wf-slate-900: #0f172a;  --wf-slate-500: #64748b;  --wf-slate-400: #94a3b8;
@@ -36,6 +41,7 @@
   --wf-dark-slate-900: #f1f5f9;  --wf-dark-slate-500: #94a3b8;  --wf-dark-slate-400: #64748b;
   --wf-dark-slate-300: #475569;  --wf-dark-slate-200: #334155;  --wf-dark-slate-100: #1e293b;
   --wf-dark-slate-50: #0f172a;   --wf-dark-bg: #0f172a;
+  --wf-dark-overlay: rgba(0, 0, 0, 0.6); /* 暗色遮罩（比亮色更深，压住暗底内容） */
   --wf-dark-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   --wf-dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
   --wf-dark-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -135,6 +141,11 @@
   --wf-font-size-3xl: 24px;
   --wf-font-size-4xl: 30px;
   --wf-font-size-5xl: 36px;
+  --wf-font-size-display: 30px; /* 顶级页面标题（PageHeader display 档，配负字距） */
+
+  /* ── 表头/分组标题：文本变换与字距 token 化（CJK 默认 none/0，英文可覆盖 uppercase/0.5px） ── */
+  --wf-heading-case: none;
+  --wf-heading-tracking: 0;
 
   --wf-font-weight-normal: 400;
   --wf-font-weight-medium: 500;
@@ -157,10 +168,36 @@
   --wf-transition-timing: ease;
   --wf-transition: var(--wf-transition-duration) var(--wf-transition-timing);
 
+  /* ── 动效语言：时长阶梯 + 缓动曲线 + 位移量（组件动效统一引用，不各自硬编码） ── */
+  --wf-dur-fast: 120ms;
+  --wf-dur-base: 200ms;
+  --wf-dur-slow: 300ms;
+
+  --wf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* 入场：快出缓停 */
+  --wf-ease-in: cubic-bezier(0.4, 0, 1, 1);            /* 退场：渐入加速 */
+  --wf-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 选中/弹跳 */
+
+  --wf-motion-sm: 4px;
+  --wf-motion-md: 8px;
+  --wf-motion-lg: 24px;                                /* drawer 全幅位移 */
+
   /* ── 色彩 — 信息（补充） ── */
   --wf-color-info: var(--wf-sky-500);
   --wf-color-info-bg: var(--wf-sky-50);
 
+  /* ── 色彩 — 语义文字色（浅底/白底可读，WCAG AA ≥ 4.5:1；实心色上的文字用 on-brand） ── */
+  --wf-color-primary-text: var(--wf-brand-700);
+  --wf-color-success-text: var(--wf-green-700);
+  --wf-color-warning-text: var(--wf-amber-700);
+  --wf-color-error-text: var(--wf-red-700);
+  --wf-color-info-text: var(--wf-sky-700);
+
+  /* ── 色彩 — 实心填充上的文字/图标（primary/success 等实心底色） ── */
+  --wf-color-on-brand: #fff;
+
+  /* ── 浮层遮罩（Modal/Drawer overlay，暗色经 --wf-dark-overlay 映射） ── */
+  --wf-overlay: rgba(0, 0, 0, 0.4);
+
   /* ── 表单控件 ── */
   --wf-accent-color: var(--wf-color-primary);
   --wf-caret-color: var(--wf-color-primary);
@@ -186,6 +223,9 @@
   --wf-letter-spacing: normal;
   --wf-letter-spacing-wide: 0.5px;
   --wf-letter-spacing-wider: 1px;
+
+  /* ── 数字 ── */
+  --wf-nums: 'tabular-nums'; /* 数字等宽（统计/表格数值防抖动） */
 }
 }
 
@@ -236,6 +276,14 @@
   --wf-shadow: var(--wf-dark-shadow);
   --wf-shadow-md: var(--wf-dark-shadow-md);
   --wf-shadow-lg: var(--wf-dark-shadow-lg);
+
+  --wf-color-primary-text: var(--wf-dark-brand-500);
+  --wf-color-success-text: var(--wf-dark-green-500);
+  --wf-color-warning-text: var(--wf-dark-amber-500);
+  --wf-color-error-text: var(--wf-dark-red-500);
+  --wf-color-info-text: var(--wf-dark-sky-500);
+
+  --wf-overlay: var(--wf-dark-overlay);
 }
 
 /* ── 激活方式二：系统暗色偏好（data-theme="light" 可强制亮色） ── */
@@ -275,6 +323,14 @@
     --wf-shadow: var(--wf-dark-shadow);
     --wf-shadow-md: var(--wf-dark-shadow-md);
     --wf-shadow-lg: var(--wf-dark-shadow-lg);
+
+    --wf-color-primary-text: var(--wf-dark-brand-500);
+    --wf-color-success-text: var(--wf-dark-green-500);
+    --wf-color-warning-text: var(--wf-dark-amber-500);
+    --wf-color-error-text: var(--wf-dark-red-500);
+    --wf-color-info-text: var(--wf-dark-sky-500);
+
+    --wf-overlay: var(--wf-dark-overlay);
   }
 }
 }
@@ -303,7 +359,7 @@ body {
 }
 
 a {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
   text-decoration: none;
 }
 a:hover {
@@ -360,7 +416,7 @@ button {
 }
 button:hover {
   border-color: var(--wf-color-primary);
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
 }
 
 /* 键盘焦点：button 与 [tabindex] 统一 focus ring（仅键盘触发，鼠标点击不闪） */
@@ -383,8 +439,10 @@ button:focus-visible,
   .wf-tag-close,
   .wf-checkbox,
   .wf-switch,
-  .wf-radio {
+  .wf-radio,
+  .wf-datepicker-cell {
     min-height: 44px;
+    min-width: 44px;
   }
 }
 
@@ -419,8 +477,8 @@ th {
   font-weight: var(--wf-font-weight-medium);
   font-size: var(--wf-font-size-xs);
   color: var(--wf-color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  text-transform: var(--wf-heading-case); /* CJK 默认 none，英文可覆盖 uppercase */
+  letter-spacing: var(--wf-heading-tracking);
   padding: var(--wf-space) var(--wf-space-sm);
   border-bottom: var(--wf-border-width) solid var(--wf-color-border);
   background: var(--wf-color-bg-secondary);
@@ -687,6 +745,30 @@ code {
 .wf-rounded-md { border-radius: var(--wf-radius-md); }
 .wf-rounded-lg { border-radius: var(--wf-radius-lg); }
 
+/* ── hover 抬升（Card/StatCard 可点击/悬停共用，阴影 + 上移 + 焦点环） ── */
+.wf-elevate {
+  transition: box-shadow var(--wf-dur-fast) var(--wf-ease-out), transform var(--wf-dur-fast) var(--wf-ease-out);
+}
+.wf-elevate:hover {
+  box-shadow: var(--wf-shadow-md);
+  transform: translateY(-2px);
+}
+.wf-elevate:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-shadow-md), var(--wf-focus-ring);
+}
+
+/* ── 面板入场：统一 scale+fade（面板族：dropdown/select/datepicker 从触发点下方弹出） ── */
+.wf-panel-in {
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
+  transform-origin: top center;
+}
+
+@keyframes wf-panel-in {
+  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
 /* ── 聊天气泡 ──
  * 用法：wf-bubble（对方/AI）+ wf-bubble--own（自己）
  * 行布局用 wf-row + wf-gap/wf-mb 覆盖；文字用 wf-pre-wrap 已内建
@@ -706,7 +788,7 @@ code {
 
 .wf-bubble--own {
   background: var(--wf-color-primary);
-  color: #fff;
+  color: var(--wf-color-on-brand);
   border-bottom-right-radius: var(--wf-radius-sm);
 }
 
@@ -979,8 +1061,8 @@ code {
   font-size: var(--wf-font-size-xs);
   font-weight: var(--wf-font-weight-medium);
   color: var(--wf-color-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  text-transform: var(--wf-heading-case); /* CJK 默认 none，英文可覆盖 uppercase */
+  letter-spacing: var(--wf-heading-tracking);
   padding: var(--wf-space-md) var(--wf-space-sm) var(--wf-space-xs);
 }
 
@@ -1015,13 +1097,13 @@ code {
 
 .wf-nav-item--active {
   background: var(--wf-color-primary-bg);
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
   font-weight: var(--wf-font-weight-medium);
 }
 
 .wf-nav-item--active:hover {
   background: var(--wf-color-primary-bg);
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
 }
 
 .wf-nav-icon {
@@ -1097,18 +1179,25 @@ code {
 .wf-text-3xl { font-size: var(--wf-font-size-3xl); }
 .wf-text-4xl { font-size: var(--wf-font-size-4xl); }
 .wf-text-5xl { font-size: var(--wf-font-size-5xl); }
+.wf-text-display { font-size: var(--wf-font-size-display); }
+
+/* ── 数字等宽（统计/表格数值防宽度抖动） ── */
+
+.wf-nums {
+  font-variant-numeric: var(--wf-nums);
+}
 
 /* ── 色阶 ── */
 
 .wf-text-secondary { color: var(--wf-color-text-secondary); }
 .wf-text-tertiary { color: var(--wf-color-text-tertiary); }
 .wf-text-disabled { color: var(--wf-color-text-disabled); }
-.wf-text-brand { color: var(--wf-color-primary); } /* 兼容别名 → wf-text-primary */
-.wf-text-primary { color: var(--wf-color-primary); }
-.wf-text-success { color: var(--wf-color-success); }
-.wf-text-warning { color: var(--wf-color-warning); }
-.wf-text-error { color: var(--wf-color-error); }
-.wf-text-info { color: var(--wf-color-info); }
+.wf-text-brand { color: var(--wf-color-primary-text); } /* 兼容别名 → wf-text-primary */
+.wf-text-primary { color: var(--wf-color-primary-text); }
+.wf-text-success { color: var(--wf-color-success-text); }
+.wf-text-warning { color: var(--wf-color-warning-text); }
+.wf-text-error { color: var(--wf-color-error-text); }
+.wf-text-info { color: var(--wf-color-info-text); }
 
 /* ── 字重 ── */
 
@@ -1253,7 +1342,7 @@ code {
 }
 
 .wf-prose a {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
   text-decoration: none;
 }
 
@@ -1306,16 +1395,16 @@ code {
   text-decoration: none;
 }
 
-.wf-btn--primary { background: var(--wf-color-primary); color: #fff; border-color: var(--wf-color-primary); }
+.wf-btn--primary { background: var(--wf-color-primary); color: var(--wf-color-on-brand); border-color: var(--wf-color-primary); }
 .wf-btn--primary:hover { background: var(--wf-color-primary-hover); }
 
 .wf-btn--secondary { background: var(--wf-color-bg); color: var(--wf-color-text); border-color: var(--wf-color-border); }
-.wf-btn--secondary:hover { border-color: var(--wf-color-primary); color: var(--wf-color-primary); }
+.wf-btn--secondary:hover { border-color: var(--wf-color-primary); color: var(--wf-color-primary-text); }
 
-.wf-btn--ghost { background: transparent; color: var(--wf-color-primary); border-color: transparent; }
+.wf-btn--ghost { background: transparent; color: var(--wf-color-primary-text); border-color: transparent; }
 .wf-btn--ghost:hover { background: var(--wf-color-primary-bg); }
 
-.wf-btn--danger { background: var(--wf-color-error); color: #fff; border-color: var(--wf-color-error); }
+.wf-btn--danger { background: var(--wf-color-error); color: var(--wf-color-on-brand); border-color: var(--wf-color-error); }
 .wf-btn--danger:hover { opacity: 0.9; }
 
 .wf-btn--sm { padding: var(--wf-space-xs) var(--wf-space-sm); font-size: var(--wf-font-size-xs); min-height: 28px; }
@@ -1325,8 +1414,28 @@ code {
 
 .wf-btn--loading { opacity: 0.7; pointer-events: none; }
 
+/* 加载 spinner：随文字色（primary 白字自动白色），尺寸稳定不抖 */
+.wf-btn-spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: wf-btn-spin 0.6s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes wf-btn-spin {
+  to { transform: rotate(360deg); }
+}
+
 .wf-btn:disabled { opacity: var(--wf-opacity-disabled); cursor: not-allowed; }
 
+/* 按压反馈（触屏/鼠标通用，reduced-motion 下由 _base.css 全局降级） */
+.wf-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
 /* weifuwu/components — Input */
 
 .wf-input-wrap {
@@ -1342,7 +1451,7 @@ code {
 }
 
 .wf-input-req {
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
   margin-left: 2px;
 }
 
@@ -1395,7 +1504,7 @@ code {
 
 .wf-input-err {
   font-size: var(--wf-font-size-xs);
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
 }
 
 .wf-input-hint {
@@ -1493,7 +1602,7 @@ code {
 }
 
 .wf-textarea-req {
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
   margin-left: 2px;
 }
 
@@ -1529,7 +1638,7 @@ code {
 
 .wf-textarea-err {
   font-size: var(--wf-font-size-xs);
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
 }
 
 .wf-textarea-hint {
@@ -1547,7 +1656,7 @@ code {
 }
 
 .wf-textarea-count--over {
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
 }
 
 .wf-textarea--err .wf-textarea {
@@ -1570,7 +1679,7 @@ code {
 }
 
 .wf-select-req {
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
   margin-left: 2px;
 }
 
@@ -1604,7 +1713,7 @@ code {
 
 .wf-select-err {
   font-size: var(--wf-font-size-xs);
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
 }
 
 .wf-select--err .wf-select {
@@ -1666,6 +1775,9 @@ code {
   max-height: 240px;
   overflow-y: auto;
   z-index: var(--wf-z-dropdown);
+  /* 面板族统一入场：wf-panel-in（scale+fade，Token 驱动） */
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
+  transform-origin: top center;
 }
 
 .wf-select-search-opt {
@@ -1679,7 +1791,7 @@ code {
   background: var(--wf-color-bg-tertiary);
 }
 .wf-select-search-opt--sel {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
   font-weight: var(--wf-font-weight-medium);
 }
 .wf-select-search-opt--dis {
@@ -1733,7 +1845,7 @@ code {
 
 .wf-checkbox-input:checked + .wf-checkbox-visual::after {
   content: '✓';
-  color: #fff;
+  color: var(--wf-color-on-brand);
   font-size: 11px;
   font-weight: bold;
 }
@@ -1917,15 +2029,27 @@ code {
   user-select: none;
 }
 .wf-table-th--sortable:hover {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
 }
 .wf-table-th--sortable:focus-visible {
   outline: none;
   box-shadow: var(--wf-focus-ring);
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
 }
 .wf-table-th--sorted {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
+}
+
+/* 排序指示图标：随文字色，激活列高亮 */
+.wf-table-sort-icon {
+  margin-left: var(--wf-gap-xs);
+  opacity: 0.6;
+}
+.wf-table-sort-icon--active {
+  opacity: 1;
+}
+.wf-table-th:hover .wf-table-sort-icon {
+  opacity: 1;
 }
 
 .wf-table-tr:last-child .wf-table-td {
@@ -1953,11 +2077,11 @@ code {
 }
 
 .wf-modal--enter {
-  animation: wf-modal-fadein 0.2s ease-out;
+  animation: wf-modal-fadein var(--wf-dur-base) var(--wf-ease-out);
 }
 
 .wf-modal--exit {
-  animation: wf-modal-fadeout 0.2s ease-out forwards;
+  animation: wf-modal-fadeout var(--wf-dur-base) var(--wf-ease-in) forwards;
 }
 
 @keyframes wf-modal-fadein {
@@ -1973,7 +2097,7 @@ code {
 .wf-modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--wf-overlay);
   z-index: -1;
 }
 
@@ -2057,7 +2181,7 @@ code {
   max-width: 400px;
   cursor: pointer;
   pointer-events: auto;
-  animation: wf-toast-in 0.2s ease;
+  animation: wf-toast-in var(--wf-dur-base) var(--wf-ease-out);
 }
 
 @keyframes wf-toast-in {
@@ -2084,10 +2208,20 @@ code {
   to { opacity: 1; transform: translateY(0); }
 }
 
-.wf-toast--success { background: var(--wf-color-success-bg); color: var(--wf-color-success); }
-.wf-toast--error { background: var(--wf-color-error-bg); color: var(--wf-color-error); }
-.wf-toast--warning { background: var(--wf-color-warning-bg); color: var(--wf-color-warning); }
-.wf-toast--info { background: var(--wf-color-info-bg); color: var(--wf-color-info); }
+.wf-toast--success { background: var(--wf-color-success-bg); color: var(--wf-color-success-text); }
+.wf-toast--error { background: var(--wf-color-error-bg); color: var(--wf-color-error-text); }
+.wf-toast--warning { background: var(--wf-color-warning-bg); color: var(--wf-color-warning-text); }
+.wf-toast--info { background: var(--wf-color-info-bg); color: var(--wf-color-info-text); }
+
+/* ── 退场：向右淡出（位置变体方向未细分，诚实裁剪） ── */
+.wf-toast-out {
+  animation: wf-toast-out var(--wf-dur-base) var(--wf-ease-in) forwards;
+}
+
+@keyframes wf-toast-out {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(var(--wf-motion-md)); }
+}
 
 .wf-toast-icon {
   font-size: var(--wf-font-size-lg);
@@ -2099,6 +2233,30 @@ code {
   color: var(--wf-color-text);
 }
 
+/* 操作按钮（如"撤销"）：语义色文字，点击不自动关闭 */
+.wf-toast-action {
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: var(--wf-font-sans);
+  font-size: var(--wf-font-size-sm);
+  font-weight: var(--wf-font-weight-medium);
+  color: var(--wf-color-primary-text);
+}
+.wf-toast-action:hover {
+  text-decoration: underline;
+}
+.wf-toast-action:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+  border-radius: var(--wf-radius-sm);
+}
+.wf-toast-action--success { color: var(--wf-color-success-text); }
+.wf-toast-action--error { color: var(--wf-color-error-text); }
+.wf-toast-action--warning { color: var(--wf-color-warning-text); }
+.wf-toast-action--info { color: var(--wf-color-primary-text); }
+
 /* weifuwu/components — Alert */
 
 .wf-alert {
@@ -2112,10 +2270,10 @@ code {
   line-height: var(--wf-line-height);
 }
 
-.wf-alert--info { background: var(--wf-color-info-bg); color: var(--wf-color-info); }
-.wf-alert--success { background: var(--wf-color-success-bg); color: var(--wf-color-success); }
-.wf-alert--warning { background: var(--wf-color-warning-bg); color: var(--wf-color-warning); }
-.wf-alert--error { background: var(--wf-color-error-bg); color: var(--wf-color-error); }
+.wf-alert--info { background: var(--wf-color-info-bg); color: var(--wf-color-info-text); }
+.wf-alert--success { background: var(--wf-color-success-bg); color: var(--wf-color-success-text); }
+.wf-alert--warning { background: var(--wf-color-warning-bg); color: var(--wf-color-warning-text); }
+.wf-alert--error { background: var(--wf-color-error-bg); color: var(--wf-color-error-text); }
 
 .wf-alert-icon {
   font-weight: var(--wf-font-weight-bold);
@@ -2241,10 +2399,15 @@ code {
 }
 
 .wf-tab--active {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
   border-bottom-color: var(--wf-color-primary);
 }
 
+/* 激活指示平滑滑动（下边框） */
+.wf-tab {
+  transition: color var(--wf-dur-fast) var(--wf-ease-out), border-color var(--wf-dur-fast) var(--wf-ease-out);
+}
+
 .wf-tab-content {
   padding-top: var(--wf-space-md);
 }
@@ -2294,18 +2457,14 @@ code {
 }
 
 .wf-dropdown-item--danger {
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
 }
 
-/* ── 入场动画 ── */
+/* ── 入场动画：面板族统一 wf-panel-in（scale+fade，Token 驱动） ── */
 .wf-dropdown-menu {
-  animation: wf-dropdown-in 0.12s ease-out;
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
   transform-origin: top center;
 }
-@keyframes wf-dropdown-in {
-  from { opacity: 0; transform: translateY(-4px) scaleY(0.96); }
-  to   { opacity: 1; transform: translateY(0) scaleY(1); }
-}
 
 /* weifuwu/components — Pagination */
 
@@ -2336,13 +2495,13 @@ code {
 
 .wf-page-btn:hover:not(:disabled):not(.wf-page-btn--active) {
   border-color: var(--wf-color-primary);
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
 }
 
 .wf-page-btn--active {
   background: var(--wf-color-primary);
   border-color: var(--wf-color-primary);
-  color: #fff;
+  color: var(--wf-color-on-brand);
 }
 
 .wf-page-btn--disabled {
@@ -2377,26 +2536,10 @@ code {
 
 .wf-card--clickable {
   cursor: pointer;
-  transition: box-shadow var(--wf-transition);
 }
 
-.wf-card--clickable:hover {
-  box-shadow: var(--wf-shadow-md);
-}
-
-.wf-card--clickable:focus-visible {
-  outline: none;
-  box-shadow: var(--wf-shadow-md), var(--wf-focus-ring);
-}
-
-/* hover 抬升变体 — 阴影 + 上移（悬停卡片/列表卡片） */
+/* hover 抬升已提炼为 .wf-elevate（_surface.css），此处仅保留语义类 */
 .wf-card--hover {
-  transition: box-shadow var(--wf-transition), transform var(--wf-transition);
-}
-
-.wf-card--hover:hover {
-  box-shadow: var(--wf-shadow-md);
-  transform: translateY(-2px);
 }
 
 /* 选中态 — 选择卡片（类型选择/模板选择） */
@@ -2420,11 +2563,11 @@ code {
 }
 
 .wf-badge--default { background: var(--wf-color-bg-tertiary); color: var(--wf-color-text-secondary); }
-.wf-badge--primary { background: var(--wf-color-primary-bg); color: var(--wf-color-primary); }
-.wf-badge--success { background: var(--wf-color-success-bg); color: var(--wf-color-success); }
-.wf-badge--warning { background: var(--wf-color-warning-bg); color: var(--wf-color-warning); }
-.wf-badge--danger { background: var(--wf-color-error-bg); color: var(--wf-color-error); }
-.wf-badge--info { background: var(--wf-color-info-bg); color: var(--wf-color-info); }
+.wf-badge--primary { background: var(--wf-color-primary-bg); color: var(--wf-color-primary-text); }
+.wf-badge--success { background: var(--wf-color-success-bg); color: var(--wf-color-success-text); }
+.wf-badge--warning { background: var(--wf-color-warning-bg); color: var(--wf-color-warning-text); }
+.wf-badge--danger { background: var(--wf-color-error-bg); color: var(--wf-color-error-text); }
+.wf-badge--info { background: var(--wf-color-info-bg); color: var(--wf-color-info-text); }
 
 /* Dot variant */
 .wf-badge-dot {
@@ -2450,7 +2593,7 @@ code {
   border-radius: 50%;
   font-family: var(--wf-font-sans);
   font-weight: var(--wf-font-weight-semibold);
-  color: #fff;
+  color: var(--wf-color-on-brand);
   flex-shrink: 0;
   overflow: hidden;
   object-fit: cover;
@@ -2474,9 +2617,9 @@ code {
 }
 
 .wf-tag--default { background: var(--wf-color-bg-tertiary); color: var(--wf-color-text-secondary); }
-.wf-tag--primary { background: var(--wf-color-primary-bg); color: var(--wf-color-primary); }
-.wf-tag--success { background: var(--wf-color-success-bg); color: var(--wf-color-success); }
-.wf-tag--danger { background: var(--wf-color-error-bg); color: var(--wf-color-error); }
+.wf-tag--primary { background: var(--wf-color-primary-bg); color: var(--wf-color-primary-text); }
+.wf-tag--success { background: var(--wf-color-success-bg); color: var(--wf-color-success-text); }
+.wf-tag--danger { background: var(--wf-color-error-bg); color: var(--wf-color-error-text); }
 
 .wf-tag-text { }
 
@@ -2516,6 +2659,7 @@ code {
   font-weight: var(--wf-font-weight-bold);
   color: var(--wf-color-text);
   line-height: 1;
+  font-variant-numeric: var(--wf-nums); /* 数字等宽：递增不抖 */
 }
 
 .wf-stat-label {
@@ -2531,27 +2675,16 @@ code {
   margin-top: var(--wf-gap-xs);
 }
 
-.wf-stat-trend--up { color: var(--wf-color-success); }
-.wf-stat-trend--down { color: var(--wf-color-error); }
+.wf-stat-trend--up { color: var(--wf-color-success-text); }
+.wf-stat-trend--down { color: var(--wf-color-error-text); }
 
 .wf-stat-trend-arrow {
   font-weight: var(--wf-font-weight-bold);
 }
 
-/* 可点击指标卡 */
+/* 可点击指标卡：hover 抬升已提炼为 .wf-elevate（_surface.css） */
 .wf-stat--clickable {
   cursor: pointer;
-  transition: box-shadow var(--wf-transition), transform var(--wf-transition);
-}
-
-.wf-stat--clickable:hover {
-  box-shadow: var(--wf-shadow-md);
-  transform: translateY(-2px);
-}
-
-.wf-stat--clickable:focus-visible {
-  outline: none;
-  box-shadow: var(--wf-shadow-md), var(--wf-focus-ring);
 }
 
 /* weifuwu/components — Steps */
@@ -2587,13 +2720,13 @@ code {
 
 .wf-step--done .wf-step-num {
   background: var(--wf-color-primary);
-  color: #fff;
+  color: var(--wf-color-on-brand);
   font-size: 14px;
 }
 
 .wf-step--current .wf-step-num {
   background: var(--wf-color-primary);
-  color: #fff;
+  color: var(--wf-color-on-brand);
   box-shadow: 0 0 0 3px var(--wf-color-primary-bg);
 }
 
@@ -2605,7 +2738,7 @@ code {
 }
 
 .wf-step--current .wf-step-label {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
 }
 
 .wf-step-desc {
@@ -2650,13 +2783,13 @@ code {
 }
 
 .wf-field-req {
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
   margin-left: 2px;
 }
 
 .wf-field-err {
   font-size: var(--wf-font-size-xs);
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
 }
 
 .wf-field-hint {
@@ -2665,7 +2798,7 @@ code {
 }
 
 .wf-field--err .wf-field-label {
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
 }
 
 /* weifuwu/components — Slider */
@@ -2821,12 +2954,13 @@ code {
 
 .wf-segmented-option--active {
   background: var(--wf-surface-bg);
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
   box-shadow: var(--wf-shadow-sm);
+  transition: box-shadow var(--wf-dur-fast) var(--wf-ease-snap), color var(--wf-dur-fast) var(--wf-ease-out);
 }
 
 .wf-segmented-option--active:hover {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
 }
 
 .wf-segmented-option:focus-visible {
@@ -2958,6 +3092,12 @@ code {
   line-height: var(--wf-line-height-tight);
 }
 
+/* display 档：顶级页面标题，配窄字距 */
+.wf-page-title--display {
+  font-size: var(--wf-font-size-display);
+  letter-spacing: -0.5px;
+}
+
 .wf-page-sub {
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-sm);
@@ -2985,7 +3125,7 @@ code {
 }
 
 .wf-breadcrumb-link {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
   text-decoration: none;
 }
 
@@ -3166,14 +3306,14 @@ code {
 }
 
 .wf-upload-item-remove:hover {
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
   background: var(--wf-color-error-bg);
 }
 
 .wf-upload-err {
   font-family: var(--wf-font-sans);
   font-size: var(--wf-font-size-xs);
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
 }
 
 /* weifuwu/components — Tooltip */
@@ -3259,9 +3399,9 @@ code {
   line-height: 1.4;
 }
 
-/* ── 入场动画 ── */
+/* ── 入场动画：fade（浮层族，时长 Token 驱动） ── */
 .wf-tooltip {
-  animation: wf-tooltip-in 0.15s ease-out;
+  animation: wf-tooltip-in var(--wf-dur-fast) var(--wf-ease-out);
 }
 @keyframes wf-tooltip-in {
   from { opacity: 0; }
@@ -3288,15 +3428,15 @@ code {
 .wf-drawer-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--wf-overlay);
 }
 
 .wf-drawer--enter .wf-drawer-overlay {
-  animation: wf-drawer-overlay-fadein 0.2s ease-out;
+  animation: wf-drawer-overlay-fadein var(--wf-dur-fast) var(--wf-ease-out);
 }
 
 .wf-drawer--exit .wf-drawer-overlay {
-  animation: wf-drawer-overlay-fadeout 0.2s ease-out forwards;
+  animation: wf-drawer-overlay-fadeout var(--wf-dur-fast) var(--wf-ease-in) forwards;
 }
 
 @keyframes wf-drawer-overlay-fadein {
@@ -3321,7 +3461,7 @@ code {
 }
 
 .wf-drawer--enter .wf-drawer-panel {
-  animation: wf-drawer-slidein 0.25s ease-out;
+  animation: wf-drawer-slidein var(--wf-dur-base) var(--wf-ease-out);
 }
 
 .wf-drawer--enter .wf-drawer-panel--right {
@@ -3333,7 +3473,7 @@ code {
 }
 
 .wf-drawer--exit .wf-drawer-panel {
-  animation: wf-drawer-slideout 0.2s ease-out forwards;
+  animation: wf-drawer-slideout var(--wf-dur-base) var(--wf-ease-in) forwards;
 }
 
 .wf-drawer--exit .wf-drawer-panel--right {
@@ -3464,16 +3604,16 @@ code {
   display: inline-flex;
 }
 
-/* ── 入场动画 ── */
+/* ── 入场动画：fade（浮层族 popover/tooltip 保持 fade，时长 Token 驱动） ── */
 .wf-popover {
-  animation: wf-popover-in 0.15s ease-out;
+  animation: wf-popover-in var(--wf-dur-fast) var(--wf-ease-out);
 }
 @keyframes wf-popover-in {
   from { opacity: 0; }
   to   { opacity: 1; }
 }
 .wf-popover-overlay {
-  animation: wf-popover-overlay-in 0.15s ease-out;
+  animation: wf-popover-overlay-in var(--wf-dur-fast) var(--wf-ease-out);
 }
 @keyframes wf-popover-overlay-in {
   from { opacity: 0; }
@@ -3646,6 +3786,9 @@ code {
   padding: var(--wf-space);
   min-width: var(--wf-datepicker-width, 260px);
   user-select: none;
+  /* 面板族统一入场：wf-panel-in（scale+fade，Token 驱动） */
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
+  transform-origin: top center;
 }
 
 .wf-datepicker-header {
@@ -3724,11 +3867,12 @@ code {
 
 .wf-datepicker-cell--today {
   font-weight: var(--wf-font-weight-bold);
+  box-shadow: inset 0 0 0 1px var(--wf-color-border-dark); /* 边框高亮，不撑开布局 */
 }
 
 .wf-datepicker-cell--selected {
   background: var(--wf-color-primary);
-  color: #fff;
+  color: var(--wf-color-on-brand);
 }
 
 .wf-datepicker-cell--in-range {
@@ -3738,7 +3882,7 @@ code {
 
 .wf-datepicker-cell--range-edge {
   background: var(--wf-color-primary);
-  color: #fff;
+  color: var(--wf-color-on-brand);
 }
 
 /* ── 区间模式 ── */
@@ -3754,6 +3898,8 @@ code {
   box-shadow: var(--wf-shadow-md);
   padding: var(--wf-space);
   user-select: none;
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
+  transform-origin: top center;
 }
 
 .wf-datepicker-range-panel {
@@ -3772,6 +3918,8 @@ code {
   padding: var(--wf-space);
   min-width: var(--wf-datepicker-range-width, 200px);
   user-select: none;
+  animation: wf-panel-in var(--wf-dur-fast) var(--wf-ease-out);
+  transform-origin: top center;
 }
 
 .wf-time-body {
@@ -3820,7 +3968,7 @@ code {
 
 .wf-time-opt--selected {
   background: var(--wf-color-primary);
-  color: #fff;
+  color: var(--wf-color-on-brand);
 }
 
 .wf-time-footer {
@@ -3999,8 +4147,8 @@ code {
 }
 
 .wf-editor-tb-btn--active {
-  background: var(--wf-color-primary-light, #e0f2fe);
-  color: var(--wf-color-primary);
+  background: var(--wf-color-primary-bg);
+  color: var(--wf-color-primary-text);
 }
 
 .wf-editor-tb-btn--active:hover {
@@ -4075,7 +4223,7 @@ code {
 }
 
 .wf-editor-content a {
-  color: var(--wf-color-primary);
+  color: var(--wf-color-primary-text);
   text-decoration: underline;
 }
 
@@ -4328,9 +4476,9 @@ code {
 
 .wf-toolcall-icon { font-size: var(--wf-font-size-sm); }
 
-.wf-toolcall-icon--running { color: var(--wf-color-info); }
-.wf-toolcall-icon--ok { color: var(--wf-color-success); }
-.wf-toolcall-icon--error { color: var(--wf-color-error); }
+.wf-toolcall-icon--running { color: var(--wf-color-info-text); }
+.wf-toolcall-icon--ok { color: var(--wf-color-success-text); }
+.wf-toolcall-icon--error { color: var(--wf-color-error-text); }
 
 .wf-toolcall-name {
   font-weight: var(--wf-font-weight-semibold);
@@ -4364,7 +4512,7 @@ code {
 }
 
 .wf-toolcall-error {
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
   font-size: var(--wf-font-size-xs);
   margin-top: var(--wf-gap-xs);
 }
@@ -4381,8 +4529,8 @@ code {
   background: var(--wf-color-warning-bg);
 }
 
-.wf-approval--approved { border-color: var(--wf-color-success); background: var(--wf-color-success-bg); }
-.wf-approval--rejected { border-color: var(--wf-color-error); background: var(--wf-color-error-bg); }
+.wf-approval--approved { border-color: var(--wf-color-success-text); background: var(--wf-color-success-bg); }
+.wf-approval--rejected { border-color: var(--wf-color-error-text); background: var(--wf-color-error-bg); }
 .wf-approval--timeout { border-color: var(--wf-color-border); background: var(--wf-color-bg-tertiary); }
 
 .wf-approval-header {
@@ -4390,11 +4538,11 @@ code {
   align-items: center;
   gap: var(--wf-gap-xs);
   font-weight: var(--wf-font-weight-semibold);
-  color: var(--wf-color-warning);
+  color: var(--wf-color-warning-text);
 }
 
-.wf-approval--approved .wf-approval-header { color: var(--wf-color-success); }
-.wf-approval--rejected .wf-approval-header { color: var(--wf-color-error); }
+.wf-approval--approved .wf-approval-header { color: var(--wf-color-success-text); }
+.wf-approval--rejected .wf-approval-header { color: var(--wf-color-error-text); }
 .wf-approval--timeout .wf-approval-header { color: var(--wf-color-text-secondary); }
 
 .wf-approval-detail {
@@ -4506,7 +4654,7 @@ code {
 
 .wf-aichat-bubble--user {
   background: var(--wf-color-primary);
-  color: #fff;
+  color: var(--wf-color-on-brand);
 }
 
 .wf-aichat-bubble--assistant {
@@ -4516,7 +4664,7 @@ code {
 
 .wf-aichat-status {
   font-size: var(--wf-font-size-xs, 12px);
-  color: var(--wf-color-info);
+  color: var(--wf-color-info-text);
 }
 
 .wf-aichat-usage {
@@ -4526,7 +4674,7 @@ code {
 
 .wf-aichat-error {
   font-size: var(--wf-font-size-xs, 12px);
-  color: var(--wf-color-error);
+  color: var(--wf-color-error-text);
   background: var(--wf-color-error-bg);
   border-radius: var(--wf-radius);
   padding: var(--wf-space-sm, 8px);