weifuwu 0.55.1 → 0.55.3

package/dist/layout/weifuwu-layout.css

@@ -35,8 +35,20 @@
   --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
 
   /* ── 层级 ── */
-  --wf-pop-z: 50;
-  --wf-cover-z: 100;
+  /* 浮层全部 createPortal 到 body，全局参与堆叠。
+     顺序：sticky < overlay < modal/drawer < 弹出面板族 < toast < tooltip。
+     modal 与 drawer 互斥出现；面板族同级（dropdown/select/datepicker/popover）用 DOM 顺序裁决。 */
+  --wf-z-sticky: 40;
+  --wf-z-overlay: 80;
+  --wf-z-modal: 100;
+  --wf-z-popover: 120; /* dropdown/select/datepicker 面板与 popover 同层 */
+  --wf-z-toast: 140;
+  --wf-z-tooltip: 160;
+  --wf-z-dropdown: var(--wf-z-popover); /* 语义别名：下拉菜单属弹出面板族 */
+
+  /* ── 兼容别名（旧 token 名，语义近似映射） ── */
+  --wf-pop-z: var(--wf-z-popover);
+  --wf-cover-z: var(--wf-z-modal);
 
   /* ── 色彩 — 品牌 ── */
   --wf-color-primary: #4f6ef7;
@@ -71,15 +83,15 @@
   --wf-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --wf-font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
 
-  --wf-font-size-xs: 11px;
-  --wf-font-size-sm: 12px;
-  --wf-font-size-base: 13px;
-  --wf-font-size-lg: 14px;
-  --wf-font-size-xl: 15px;
-  --wf-font-size-2xl: 20px;
+  --wf-font-size-xs: 12px;
+  --wf-font-size-sm: 13px;
+  --wf-font-size-base: 14px;
+  --wf-font-size-lg: 15px;
+  --wf-font-size-xl: 16px;
+  --wf-font-size-2xl: 21px;
   --wf-font-size-3xl: 24px;
-  --wf-font-size-4xl: 28px;
-  --wf-font-size-5xl: 32px;
+  --wf-font-size-4xl: 30px;
+  --wf-font-size-5xl: 36px;
 
   --wf-font-weight-normal: 400;
   --wf-font-weight-medium: 500;
@@ -110,6 +122,10 @@
   --wf-accent-color: var(--wf-color-primary);
   --wf-caret-color: var(--wf-color-primary);
 
+  /* 控件尺寸：垂直内边距 + 目标高度（移动端在 _base.css 提升到 44px） */
+  --wf-control-pad-y: 10px;
+  --wf-control-height: 36px;
+
   /* ── 断点 ── */
   --wf-bp-sm: 640px;
   --wf-bp-md: 768px;
@@ -126,8 +142,21 @@
   --wf-letter-spacing-wider: 1px;
 }
 
-/* weifuwu/theme — 暗色模式 */
-[data-theme="dark"] {
+/* weifuwu/theme — 暗色模式
+ *
+ * 两种激活方式（优先级：显式 data-theme > 系统偏好）：
+ *   1. 手动：<html data-theme="dark">（或 data-theme="light" 强制亮色）
+ *   2. 自动：系统偏好 prefers-color-scheme: dark，无显式覆盖时生效
+ *
+ * ⚠️ 两段暗色覆盖值必须保持一致（静态 CSS 无法共享选择器列表，改动需同步）。
+ * 每段末尾都设置 color-scheme: dark，让原生控件/滚动条跟随。
+ */
+
+/* ── 激活方式一：手动 data-theme="dark" ── */
+/* color-scheme 用 :root[data-theme] 提升优先级，压过 _base.css 的 :root 定义（导入顺序在后者） */
+:root[data-theme="dark"] {
+  color-scheme: dark;
+
   --wf-color-primary: #6b8aff;
   --wf-color-primary-hover: #8ba3ff;
   --wf-color-primary-bg: #1e293b;
@@ -166,6 +195,50 @@
   --wf-surface-bg: var(--wf-color-bg);
 }
 
+/* ── 激活方式二：系统暗色偏好（data-theme="light" 可强制亮色） ── */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --wf-color-primary: #6b8aff;
+    --wf-color-primary-hover: #8ba3ff;
+    --wf-color-primary-bg: #1e293b;
+
+    --wf-color-success: #4ade80;
+    --wf-color-success-bg: #14532d;
+    --wf-color-warning: #fbbf24;
+    --wf-color-warning-bg: #451a03;
+    --wf-color-error: #f87171;
+    --wf-color-error-bg: #451a1a;
+
+    --wf-color-info: #60a5fa;
+    --wf-color-info-bg: #172554;
+
+    --wf-color-text: #f1f5f9;
+    --wf-color-text-secondary: #94a3b8;
+    --wf-color-text-tertiary: #64748b;
+    --wf-color-text-disabled: #475569;
+
+    --wf-color-bg: #0f172a;
+    --wf-color-bg-secondary: #1e293b;
+    --wf-color-bg-tertiary: #334155;
+
+    --wf-color-border: #334155;
+    --wf-color-border-light: #1e293b;
+    --wf-color-border-dark: #475569;
+
+    --wf-surface-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --wf-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
+    --wf-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --wf-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+    --wf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
+
+    --wf-focus-ring: 0 0 0 2px var(--wf-color-primary-bg);
+
+    --wf-surface-bg: var(--wf-color-bg);
+  }
+}
+
 /* weifuwu/theme — 基础元素默认样式 */
 *,
 *::before,
@@ -173,6 +246,11 @@
   box-sizing: border-box;
 }
 
+:root {
+  /* 原生控件/滚动条跟随主题；暗色激活时在 _dark.css 中切为 dark */
+  color-scheme: light;
+}
+
 body {
   margin: 0;
   background: var(--wf-color-bg);
@@ -210,7 +288,7 @@ select {
   color: var(--wf-color-text);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
-  padding: var(--wf-space-sm) var(--wf-space);
+  padding: var(--wf-control-pad-y) var(--wf-space);
 }
 
 input:focus,
@@ -235,7 +313,8 @@ button {
   color: var(--wf-color-text);
   border: var(--wf-border-width) solid var(--wf-color-border);
   border-radius: var(--wf-radius);
-  padding: var(--wf-space-sm) var(--wf-space-md);
+  padding: var(--wf-control-pad-y) var(--wf-space-md);
+  min-height: var(--wf-control-height);
   cursor: pointer;
 }
 button:hover {
@@ -243,6 +322,31 @@ button:hover {
   color: var(--wf-color-primary);
 }
 
+/* 键盘焦点：button 与 [tabindex] 统一 focus ring（仅键盘触发，鼠标点击不闪） */
+button:focus-visible,
+[tabindex]:focus-visible {
+  outline: none;
+  box-shadow: var(--wf-focus-ring);
+}
+
+/* 触屏设备（coarse pointer）：交互目标提升到 44px（Apple HIG / WCAG 2.5.8） */
+@media (pointer: coarse) {
+  button,
+  [role="button"],
+  input,
+  textarea,
+  select,
+  .wf-card--clickable,
+  .wf-table-th--sortable,
+  .wf-accordion-summary,
+  .wf-tag-close,
+  .wf-checkbox,
+  .wf-switch,
+  .wf-radio {
+    min-height: 44px;
+  }
+}
+
 h1, h2, h3, h4, h5, h6 {
   font-weight: var(--wf-font-weight-semibold);
   line-height: var(--wf-line-height-tight);
@@ -314,6 +418,18 @@ code {
   border-radius: var(--wf-radius-sm);
 }
 
+/* ── 无障碍：尊重系统减弱动效偏好 ── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* stack — 纵向堆叠 */
 .wf-stack {
   display: flex;
@@ -558,7 +674,9 @@ code {
   min-height: 0;
 }
 
-/* text-align 对齐原语 */
+/* 排版工具类 — 字号 / 色阶 / 字重 / 截断（零 CSS 用户自排版） */
+
+/* ── text-align ── */
 
 .wf-text-left {
   text-align: left;
@@ -571,3 +689,50 @@ code {
 .wf-text-right {
   text-align: right;
 }
+
+/* ── 字号 ── */
+
+.wf-text-xs { font-size: var(--wf-font-size-xs); }
+.wf-text-sm { font-size: var(--wf-font-size-sm); }
+.wf-text-base { font-size: var(--wf-font-size-base); }
+.wf-text-lg { font-size: var(--wf-font-size-lg); }
+.wf-text-xl { font-size: var(--wf-font-size-xl); }
+.wf-text-2xl { font-size: var(--wf-font-size-2xl); }
+.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-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-medium { font-weight: var(--wf-font-weight-medium); }
+.wf-text-semibold { font-weight: var(--wf-font-weight-semibold); }
+.wf-text-bold { font-weight: var(--wf-font-weight-bold); }
+
+/* ── 截断 ── */
+
+.wf-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wf-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.wf-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.55.1",
+  "version": "0.55.3",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {
@@ -38,6 +38,7 @@
     "release:dry": "node scripts/release.mjs --dry-run"
   },
   "dependencies": {
+    "esbuild": "^0.28.1",
     "graphql": "^16",
     "ws": "^8"
   },
@@ -62,7 +63,6 @@
     "@tailwindcss/postcss": "^4.3.3",
     "@types/node": "^25",
     "@types/ws": "^8",
-    "esbuild": "^0.28.1",
     "ioredis": "^5.11.1",
     "jsdom": "^29.1.1",
     "postcss": "^8.5.19",