@hxdhxd/harmony-flow-ui 0.1.0 → 0.1.1

package/README.md

@@ -32,7 +32,15 @@ npm run serve
 
 默认静态服务地址为 `http://127.0.0.1:4173`。
 
-`npm run test:quality` 是统一质量门，覆盖类型、正式构建、公共 API、浏览器路由、组件文档、视觉证据与完整性。
+`npm run test:quality` 是统一质量门，覆盖类型、正式构建、公共 API、浏览器路由、组件文档、视觉证据与完整性。质量门还会锁定 HarmonyOS 7 的白＋浅蓝主题，并按文件阻止新增渐变、毛玻璃、超限圆角、阴影和组件文档裸色值；现有功能性视觉与历史样式只允许逐步减少，不允许数量反弹或转移到其他文件。
+
+可单独执行以下视觉规范检查：
+
+```powershell
+npm run test:theme-contract
+npm run test:ui-quality-gate
+npm run test:ui-quality-gate:self-test
+```
 
 展示页由 esbuild 正式构建，并由项目内 Node 静态服务托管，不使用 Vite。
 
@@ -42,7 +50,7 @@ npm run serve
 
 ## 发布状态与下一步
 
-正式 npm 包名为 `@hxdhxd/harmony-flow-ui`，当前版本为 `0.1.0`。后续建议在每次发布前更新版本号、运行完整质量门，并在 GitHub 创建对应 Release 或维护变更日志。
+正式 npm 包名为 `@hxdhxd/harmony-flow-ui`，当前版本为 `0.1.1`。后续建议在每次发布前更新版本号、运行完整质量门，并在 GitHub 创建对应 Release 或维护变更日志。
 
 本项目采用 [MIT License](./LICENSE)，允许免费用于个人和商业项目；再分发时须保留原许可证和版权声明。
 
@@ -83,7 +91,9 @@ export default function App() {
 }
 ```
 
-`ThemeProvider` 建议放在应用根部。主题覆盖支持 `colorPrimary`、`colorPrimaryHover`、`colorBackground`、`colorSurface`、`colorText`、`colorTextMuted`、`colorBorder`、`radiusMd`、`radiusLg`、`shadowElevated` 与 `motionDuration`。
+`ThemeProvider` 建议放在应用根部。主题覆盖支持颜色、形状、阴影与动效语义令牌。新代码优先使用 `radiusControl`、`radiusPanel`、`radiusOverlay`、`shadowPopover` 与 `shadowModal`；`radiusMd`、`radiusLg`、`shadowElevated` 仅为现有消费者保留，后续版本将逐步迁移。
+
+默认主题继续遵循 HarmonyOS 7 的白色内容面、浅蓝窗口背景、鸿蒙蓝主强调色与深蓝正文。形状和深度令牌建议按语义覆盖，而不是为单个组件写死圆角或阴影。
 
 ### Next.js App Router
 
@@ -126,7 +136,7 @@ npm pack
 然后在目标项目中安装生成的 `.tgz` 文件（请替换为实际路径和文件名）：
 
 ```powershell
-npm install "D:\path\to\harmony-flow-ui-0.1.0.tgz"
+npm install "D:\path\to\harmony-flow-ui-0.1.1.tgz"
 ```
 
 安装后仍按正式 npm 包的方式从 `@hxdhxd/harmony-flow-ui` 导入。当前不建议直接通过 GitHub URL 安装，因为仓库不提交 `dist/`，Git 依赖安装流程无法保证生成完整发布产物。

package/dist/index.cjs

@@ -176,13 +176,43 @@ var defaultTheme = {
   colorText: "#142033",
   colorTextMuted: "#66758c",
   colorBorder: "#dce9f7",
+  radiusControl: "6px",
+  radiusPanel: "8px",
+  radiusOverlay: "10px",
+  shadowPopover: "0 8px 24px rgba(41, 106, 168, 0.12)",
+  shadowModal: "0 18px 48px rgba(41, 106, 168, 0.16)",
   radiusMd: "14px",
   radiusLg: "24px",
   shadowElevated: "0 18px 48px rgba(41, 106, 168, 0.16)",
   motionDuration: "180ms"
 };
-var darkTheme = { ...defaultTheme, colorPrimary: "#58a9ff", colorPrimaryHover: "#7cbbff", colorBackground: "#0d1724", colorSurface: "#152337", colorText: "#f4f8fc", colorTextMuted: "#a9bad0", colorBorder: "#30445b", shadowElevated: "0 20px 54px rgba(0,0,0,.46)" };
-var highContrastTheme = { ...defaultTheme, colorPrimary: "#005fcc", colorPrimaryHover: "#004a9f", colorBackground: "#ffffff", colorSurface: "#ffffff", colorText: "#000000", colorTextMuted: "#303030", colorBorder: "#000000", shadowElevated: "0 0 0 2px #000000", motionDuration: "0ms" };
+var darkTheme = {
+  ...defaultTheme,
+  colorPrimary: "#58a9ff",
+  colorPrimaryHover: "#7cbbff",
+  colorBackground: "#0d1724",
+  colorSurface: "#152337",
+  colorText: "#f4f8fc",
+  colorTextMuted: "#a9bad0",
+  colorBorder: "#30445b",
+  shadowPopover: "0 8px 24px rgba(0, 0, 0, 0.32)",
+  shadowModal: "0 20px 54px rgba(0, 0, 0, 0.46)",
+  shadowElevated: "0 20px 54px rgba(0, 0, 0, 0.46)"
+};
+var highContrastTheme = {
+  ...defaultTheme,
+  colorPrimary: "#005fcc",
+  colorPrimaryHover: "#004a9f",
+  colorBackground: "#ffffff",
+  colorSurface: "#ffffff",
+  colorText: "#000000",
+  colorTextMuted: "#303030",
+  colorBorder: "#000000",
+  shadowPopover: "0 0 0 2px #000000",
+  shadowModal: "0 0 0 2px #000000",
+  shadowElevated: "0 0 0 2px #000000",
+  motionDuration: "0ms"
+};
 var tokenVariables = {
   colorPrimary: "--hf-color-primary",
   colorPrimaryHover: "--hf-color-primary-hover",
@@ -191,6 +221,11 @@ var tokenVariables = {
   colorText: "--hf-color-text",
   colorTextMuted: "--hf-color-text-muted",
   colorBorder: "--hf-color-border",
+  radiusControl: "--hf-radius-control",
+  radiusPanel: "--hf-radius-panel",
+  radiusOverlay: "--hf-radius-overlay",
+  shadowPopover: "--hf-shadow-popover",
+  shadowModal: "--hf-shadow-modal",
   radiusMd: "--hf-radius-md",
   radiusLg: "--hf-radius-lg",
   shadowElevated: "--hf-shadow-elevated",
@@ -220,7 +255,7 @@ function ThemeProvider({ children, tokens, mode = "light", className = "", style
 // src/components/Button.tsx
 var import_react = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Button = (0, import_react.forwardRef)(function Button2({ children, className = "", variant = "primary", size = "md", shape = "pill", fullWidth = false, loading = false, leadingIcon, trailingIcon, iconOnly = false, disabled, ...props }, ref) {
+var Button = (0, import_react.forwardRef)(function Button2({ children, className = "", variant = "primary", size = "md", shape = "rounded", fullWidth = false, loading = false, leadingIcon, trailingIcon, iconOnly = false, disabled, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {