@teamix-evo/ui 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamix-evo/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Source-injected UI components for Teamix Evo (shadcn-based, antd capabilities)",
   "type": "module",
   "files": [
@@ -9,6 +9,19 @@
     "src",
     "README.md"
   ],
+  "scripts": {
+    "validate": "tsx scripts/validate-entries.ts",
+    "gen:meta": "tsx scripts/generate-meta.ts",
+    "test": "echo 'validate only' && pnpm validate",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "build": "echo 'pure resource package, no build needed'",
+    "gen:theme-overrides": "tsx .storybook/gen-theme-overrides.ts",
+    "storybook": "pnpm gen:theme-overrides && tsx .storybook/gen-theme-overrides.ts --watch & storybook dev -p 6006",
+    "build-storybook": "pnpm gen:theme-overrides && storybook build",
+    "compare": "tsx compare/start.ts",
+    "compare:matrix": "tsx compare/scripts/extract-styles-matrix.ts && tsx compare/scripts/generate-style-mapping.ts"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
@@ -20,6 +33,9 @@
     "@storybook/react-vite": "^10.4.1",
     "@tailwindcss/vite": "^4",
     "@tanstack/react-table": "^8",
+    "@teamix-evo/eslint-config": "workspace:*",
+    "@teamix-evo/registry": "workspace:*",
+    "@teamix-evo/tokens": "workspace:^",
     "@types/node": "^20.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
@@ -50,10 +66,7 @@
     "vaul": "^1",
     "vite": "^5.4.0",
     "vite-tsconfig-paths": "^6.1.1",
-    "zod": "^3",
-    "@teamix-evo/eslint-config": "0.2.3",
-    "@teamix-evo/tokens": "^0.7.0",
-    "@teamix-evo/registry": "0.7.0"
+    "zod": "^3"
   },
   "publishConfig": {
     "access": "public",
@@ -66,16 +79,5 @@
     "@dnd-kit/utilities": "^3",
     "@tanstack/react-virtual": "^3.13.26",
     "react-colorful": "^5.7.0"
-  },
-  "scripts": {
-    "validate": "tsx scripts/validate-entries.ts",
-    "gen:meta": "tsx scripts/generate-meta.ts",
-    "test": "echo 'validate only' && pnpm validate",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint .",
-    "build": "echo 'pure resource package, no build needed'",
-    "gen:theme-overrides": "tsx .storybook/gen-theme-overrides.ts",
-    "storybook": "pnpm gen:theme-overrides && storybook dev -p 6006",
-    "build-storybook": "pnpm gen:theme-overrides && storybook build"
   }
-}
+}

package/src/components/alert/index.tsx

@@ -122,7 +122,7 @@ function Alert({
         <span
           data-slot="alert-icon"
           className={cn(
-            'inline-flex shrink-0',
+            'inline-flex shrink-0 group-has-data-[slot=alert-title]/alert:mt-0.5',
             ICON_TONE_CLASS[resolvedVariant],
           )}
         >

package/src/components/alert-dialog/index.tsx

@@ -2,14 +2,14 @@
  * 确认对话框 AlertDialog
  *
  * 模态确认弹窗，要求用户对破坏性 / 不可撤销操作进行显式确认，基于 Radix AlertDialog 原语。
- * 与 Dialog 共享 size scale 与视觉规范（圆角 / padding / 分隔线），区别在于强制焦点陷阱、
+ * 与 Dialog 共享 size scale 与视觉规范（圆角 / padding），区别在于强制焦点陷阱、
  * 按钮二选一语义、不允许通过外部点击关闭。
  *
  * 视觉规范：
  * - 外层容器圆角走主题默认（`rounded-md`），自身不带 padding，由 Header / Body / Footer 各自控制
- * - Header 区：`pt-3 pr-14 pb-3 pl-5`，底部 1px 分隔线默认 `border-border`（紧凑模式居中、宽屏模式左对齐）
- * - Body 区：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground
- * - Footer 区：`px-5 py-4`，顶部分隔线默认透明
+ * - Header 区：`px-5 pt-5`，icon + 标题同行居中对齐（gap-2），无分隔线
+ * - Body 区：`pr-5 pl-11 pt-3`，左侧与 Title 对齐（跳过 icon + gap）
+ * - Footer 区：`px-5 pt-4 pb-5`，无分隔线，右对齐
  *
  * @when
  * - 删除操作的二次确认
@@ -113,9 +113,8 @@ function AlertDialogContent({
 /**
  * AlertDialog Header 容器。
  *
- * 视觉规范：`pt-3 pr-14 pb-3 pl-5`，底部 1px 分隔线默认 `border-border`，可通过
- * `className="border-transparent"` 关闭。默认居中布局（紧凑确认弹窗惯例）；当 size>=md 时
- * 自动切换为左对齐 + media 横置布局。
+ * 视觉规范：左对齐、图标与标题同行、无底部分隔线。
+ * 有 AlertDialogMedia 时自动切换为 icon + title 单行布局。
  */
 function AlertDialogHeader({
   className,
@@ -124,10 +123,7 @@ function AlertDialogHeader({
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn(
-        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 border-b border-border pt-3 pr-14 pb-3 pl-5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=md]/alert-dialog-content:place-items-start sm:group-data-[size=md]/alert-dialog-content:text-left sm:group-data-[size=md]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] sm:group-data-[size=lg]/alert-dialog-content:place-items-start sm:group-data-[size=lg]/alert-dialog-content:text-left sm:group-data-[size=lg]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr] sm:group-data-[size=xl]/alert-dialog-content:place-items-start sm:group-data-[size=xl]/alert-dialog-content:text-left sm:group-data-[size=xl]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
-        className,
-      )}
+      className={cn('flex items-center gap-2 px-5 pt-5', className)}
       {...props}
     />
   );
@@ -136,14 +132,14 @@ function AlertDialogHeader({
 /**
  * AlertDialog 内容区（Body）。
  *
- * 视觉规范：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground。
+ * 视觉规范：`pr-5 pl-11 pt-3`，左侧与 Title 对齐（跳过 icon + gap）。
  * 用于在 Header / Footer 之外承载补充说明、列表等正文内容。
  */
 function AlertDialogBody({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-dialog-body"
-      className={cn('px-5 pt-4 pb-5 text-sm text-muted-foreground', className)}
+      className={cn('pr-5 pl-11 pt-3', className)}
       {...props}
     />
   );
@@ -152,8 +148,8 @@ function AlertDialogBody({ className, ...props }: React.ComponentProps<'div'>) {
 /**
  * Footer 容器。
  *
- * 视觉规范：`px-5 py-4`，顶部分隔线默认透明。
- * sm size 紧凑模式下按钮均分两列；其他 size 在 sm 断点以上水平右对齐。
+ * 视觉规范：`px-5 pt-4 pb-5`，无顶部分隔线。
+ * 移动端纵向堆叠（flex-col-reverse），桌面端水平右对齐。
  */
 function AlertDialogFooter({
   className,
@@ -163,7 +159,7 @@ function AlertDialogFooter({
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 border-t border-transparent px-5 py-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        'flex flex-col-reverse gap-2 px-5 pt-4 pb-5 sm:flex-row sm:justify-end',
         className,
       )}
       {...props}
@@ -172,9 +168,9 @@ function AlertDialogFooter({
 }
 
 /**
- * 标题前的图标 / 媒体槽，用于 destructive / warning 视觉强化。
+ * 标题前的图标 / 媒体槽，用于 destructive / warning / info 视觉强化。
  *
- * 紧凑模式（size=sm）下置顶居中；宽屏模式（size>=md）下置于标题左侧。
+ * 无背景容器，图标与标题垂直居中对齐。
  */
 function AlertDialogMedia({
   className,
@@ -184,7 +180,7 @@ function AlertDialogMedia({
     <div
       data-slot="alert-dialog-media"
       className={cn(
-        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=md]/alert-dialog-content:row-span-2 sm:group-data-[size=lg]/alert-dialog-content:row-span-2 sm:group-data-[size=xl]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        "inline-flex shrink-0 items-center justify-center *:[svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -199,10 +195,7 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn(
-        'text-sm leading-5 font-medium text-foreground sm:group-data-[size=md]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 sm:group-data-[size=lg]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2 sm:group-data-[size=xl]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
-        className,
-      )}
+      className={cn('text-sm font-semibold text-foreground', className)}
       {...props}
     />
   );
@@ -216,7 +209,7 @@ function AlertDialogDescription({
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
       className={cn(
-        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:text-primary *:[a]:hover:text-primary/80',
+        'text-xs leading-normal text-balance text-muted-foreground md:text-pretty *:[a]:text-primary *:[a]:hover:text-primary/80',
         className,
       )}
       {...props}

package/src/components/alert-dialog/meta.md

@@ -6,13 +6,13 @@
 
 确认对话框 AlertDialog
 模态确认弹窗，要求用户对破坏性 / 不可撤销操作进行显式确认，基于 Radix AlertDialog 原语。
-与 Dialog 共享 size scale 与视觉规范（圆角 / padding / 分隔线），区别在于强制焦点陷阱、
+与 Dialog 共享 size scale 与视觉规范（圆角 / padding），区别在于强制焦点陷阱、
 按钮二选一语义、不允许通过外部点击关闭。
 视觉规范：
 - 外层容器圆角走主题默认（`rounded-md`），自身不带 padding，由 Header / Body / Footer 各自控制
-- Header 区：`pt-3 pr-14 pb-3 pl-5`，底部 1px 分隔线默认 `border-border`（紧凑模式居中、宽屏模式左对齐）
-- Body 区：`px-5 pt-4 pb-5`，默认字号 14px、颜色 muted-foreground
-- Footer 区：`px-5 py-4`，顶部分隔线默认透明
+- Header 区：`px-5 pt-5`，icon + 标题同行居中对齐（gap-2），无分隔线
+- Body 区：`pr-5 pl-11 pt-3`，左侧与 Title 对齐（跳过 icon + gap）
+- Footer 区：`px-5 pt-4 pb-5`，无分隔线，右对齐
 
 ## 使用场景
 
@@ -43,11 +43,16 @@
       </AlertDialogTrigger>
       <AlertDialogContent size={size}>
         <AlertDialogHeader>
+          <AlertDialogMedia>
+            <InfoFilledIcon className="text-info" />
+          </AlertDialogMedia>
           <AlertDialogTitle>确认操作？</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogBody>
           <AlertDialogDescription>
-            当前 size={size}。sm 紧凑居中，md/lg 切换为左对齐 + media 横置。
+            当前 size={size}。图标与标题同行，描述文字在 body 区。
           </AlertDialogDescription>
-        </AlertDialogHeader>
+        </AlertDialogBody>
         <AlertDialogFooter>
           <AlertDialogCancel>取消</AlertDialogCancel>
           <AlertDialogAction>确认</AlertDialogAction>
@@ -70,13 +75,15 @@
   <AlertDialogContent size="md">
     <AlertDialogHeader>
       <AlertDialogMedia>
-        <TriangleAlertIcon className="text-warning" />
+        <WarningFilledIcon className="text-warning" />
       </AlertDialogMedia>
       <AlertDialogTitle>操作确认</AlertDialogTitle>
+    </AlertDialogHeader>
+    <AlertDialogBody>
       <AlertDialogDescription>
         你确定要执行此操作吗？该操作将影响所有相关配置，请谨慎操作。
       </AlertDialogDescription>
-    </AlertDialogHeader>
+    </AlertDialogBody>
     <AlertDialogFooter>
       <AlertDialogCancel>取消</AlertDialogCancel>
       <AlertDialogAction>确认</AlertDialogAction>
@@ -84,3 +91,90 @@
   </AlertDialogContent>
 </AlertDialog>
 ```
+
+### Success
+
+成功提示 — 操作完成后的确认。
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button>提交</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogMedia>
+        <SuccessFilledIcon className="text-success" />
+      </AlertDialogMedia>
+      <AlertDialogTitle>提交成功</AlertDialogTitle>
+    </AlertDialogHeader>
+    <AlertDialogBody>
+      <AlertDialogDescription>
+        你的申请已成功提交，审核结果将在 1-3 个工作日内通知。
+      </AlertDialogDescription>
+    </AlertDialogBody>
+    <AlertDialogFooter>
+      <AlertDialogAction>知道了</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
+
+### Notice
+
+通知提示 — 普通信息告知。
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="outline">查看通知</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogMedia>
+        <InfoFilledIcon className="text-info" />
+      </AlertDialogMedia>
+      <AlertDialogTitle>系统升级通知</AlertDialogTitle>
+    </AlertDialogHeader>
+    <AlertDialogBody>
+      <AlertDialogDescription>
+        系统将于今晚 22:00 进行维护升级，预计持续 2
+        小时，届时服务将暂时不可用。
+      </AlertDialogDescription>
+    </AlertDialogBody>
+    <AlertDialogFooter>
+      <AlertDialogCancel>稍后再说</AlertDialogCancel>
+      <AlertDialogAction>我知道了</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
+
+### Warning
+
+警告提示 — 高风险操作前的确认。
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="outline">重置配置</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogMedia>
+        <WarningFilledIcon className="text-warning" />
+      </AlertDialogMedia>
+      <AlertDialogTitle>确认重置？</AlertDialogTitle>
+    </AlertDialogHeader>
+    <AlertDialogBody>
+      <AlertDialogDescription>
+        重置后所有自定义配置将恢复为默认值，已保存的预设方案不受影响。
+      </AlertDialogDescription>
+    </AlertDialogBody>
+    <AlertDialogFooter>
+      <AlertDialogCancel>取消</AlertDialogCancel>
+      <AlertDialogAction>确认重置</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```

package/src/components/alert-dialog/stories.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import {
   AlertDialog,
   AlertDialogAction,
+  AlertDialogBody,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
@@ -13,7 +14,12 @@ import {
   AlertDialogTrigger,
 } from './index';
 import { Button } from '@/components/button';
-import { TriangleAlertIcon } from 'lucide-react';
+import {
+  ErrorFilledIcon,
+  InfoFilledIcon,
+  SuccessFilledIcon,
+  WarningFilledIcon,
+} from '@/components/icon';
 
 const meta = {
   title: '反馈 · Feedback/AlertDialog 确认对话框',
@@ -43,11 +49,16 @@ export const Default: Story = {
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
+          <AlertDialogMedia>
+            <ErrorFilledIcon className="text-destructive" />
+          </AlertDialogMedia>
           <AlertDialogTitle>确认删除？</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogBody>
           <AlertDialogDescription>
             此操作不可撤销，将永久删除该账户和所有相关数据。
           </AlertDialogDescription>
-        </AlertDialogHeader>
+        </AlertDialogBody>
         <AlertDialogFooter>
           <AlertDialogCancel>取消</AlertDialogCancel>
           <AlertDialogAction variant="destructive">确认删除</AlertDialogAction>
@@ -69,11 +80,16 @@ export const Sizes: Story = {
           </AlertDialogTrigger>
           <AlertDialogContent size={size}>
             <AlertDialogHeader>
+              <AlertDialogMedia>
+                <InfoFilledIcon className="text-info" />
+              </AlertDialogMedia>
               <AlertDialogTitle>确认操作？</AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogBody>
               <AlertDialogDescription>
-                当前 size={size}。sm 紧凑居中，md/lg 切换为左对齐 + media 横置。
+                当前 size={size}。图标与标题同行，描述文字在 body 区。
               </AlertDialogDescription>
-            </AlertDialogHeader>
+            </AlertDialogBody>
             <AlertDialogFooter>
               <AlertDialogCancel>取消</AlertDialogCancel>
               <AlertDialogAction>确认</AlertDialogAction>
@@ -96,13 +112,15 @@ export const WithMedia: Story = {
       <AlertDialogContent size="md">
         <AlertDialogHeader>
           <AlertDialogMedia>
-            <TriangleAlertIcon className="text-warning" />
+            <WarningFilledIcon className="text-warning" />
           </AlertDialogMedia>
           <AlertDialogTitle>操作确认</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogBody>
           <AlertDialogDescription>
             你确定要执行此操作吗？该操作将影响所有相关配置，请谨慎操作。
           </AlertDialogDescription>
-        </AlertDialogHeader>
+        </AlertDialogBody>
         <AlertDialogFooter>
           <AlertDialogCancel>取消</AlertDialogCancel>
           <AlertDialogAction>确认</AlertDialogAction>
@@ -112,6 +130,93 @@ export const WithMedia: Story = {
   ),
 };
 
+/** 成功提示 — 操作完成后的确认。 */
+export const Success: Story = {
+  name: '成功提示',
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button>提交</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogMedia>
+            <SuccessFilledIcon className="text-success" />
+          </AlertDialogMedia>
+          <AlertDialogTitle>提交成功</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogBody>
+          <AlertDialogDescription>
+            你的申请已成功提交，审核结果将在 1-3 个工作日内通知。
+          </AlertDialogDescription>
+        </AlertDialogBody>
+        <AlertDialogFooter>
+          <AlertDialogAction>知道了</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
+/** 通知提示 — 普通信息告知。 */
+export const Notice: Story = {
+  name: '通知提示',
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">查看通知</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogMedia>
+            <InfoFilledIcon className="text-info" />
+          </AlertDialogMedia>
+          <AlertDialogTitle>系统升级通知</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogBody>
+          <AlertDialogDescription>
+            系统将于今晚 22:00 进行维护升级，预计持续 2
+            小时，届时服务将暂时不可用。
+          </AlertDialogDescription>
+        </AlertDialogBody>
+        <AlertDialogFooter>
+          <AlertDialogCancel>稍后再说</AlertDialogCancel>
+          <AlertDialogAction>我知道了</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
+/** 警告提示 — 高风险操作前的确认。 */
+export const Warning: Story = {
+  name: '警告提示',
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">重置配置</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogMedia>
+            <WarningFilledIcon className="text-warning" />
+          </AlertDialogMedia>
+          <AlertDialogTitle>确认重置？</AlertDialogTitle>
+        </AlertDialogHeader>
+        <AlertDialogBody>
+          <AlertDialogDescription>
+            重置后所有自定义配置将恢复为默认值，已保存的预设方案不受影响。
+          </AlertDialogDescription>
+        </AlertDialogBody>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction>确认重置</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};
+
 /** 异步确认 — onAction 返回 Promise，loading 期间禁止关闭。 */
 export const Async: Story = {
   name: '异步确认',
@@ -139,11 +244,16 @@ export const Async: Story = {
           </AlertDialogTrigger>
           <AlertDialogContent>
             <AlertDialogHeader>
+              <AlertDialogMedia>
+                <ErrorFilledIcon className="text-destructive" />
+              </AlertDialogMedia>
               <AlertDialogTitle>确认删除？</AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogBody>
               <AlertDialogDescription>
                 onAction 返回 Promise，loading 期间无法关闭对话框。
               </AlertDialogDescription>
-            </AlertDialogHeader>
+            </AlertDialogBody>
             <AlertDialogFooter>
               <AlertDialogCancel disabled={loading}>取消</AlertDialogCancel>
               <Button

package/src/components/avatar/index.tsx

@@ -89,7 +89,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        'flex size-full items-center justify-center bg-muted text-muted-foreground',
+        'flex size-full items-center justify-center bg-border text-muted-foreground',
         'group-data-[shape=circle]/avatar:rounded-full group-data-[shape=square]/avatar:rounded-md',
         'group-data-[size=sm]/avatar:text-xs group-data-[size=default]/avatar:text-xs group-data-[size=lg]/avatar:text-sm',
         '[&>svg]:size-1/2',

package/src/components/badge/index.tsx

@@ -24,7 +24,7 @@ import { cn } from '@/lib/utils';
 
 // ─── Label cva（与 v1 完全一致，保证向后兼容） ──────────────────────────
 const badgeVariants = cva(
-  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&>svg]:pointer-events-none [&>svg]:size-3!',
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-ring/20 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&>svg]:pointer-events-none [&>svg]:size-3!',
   {
     variants: {
       variant: {

package/src/components/button/index.tsx

@@ -19,7 +19,7 @@ import { Spinner } from '@/components/spinner';
 // ─── Button cva ─────────────────────────────────────────────────────────────
 //
 // 视觉由 token 驱动，组件只用语义 utility：
-// - 圆角 `rounded-md`：opentrek=8px / uni-manager=2px
+// - 圆角 `rounded-md`：走 --radius-md（opentrek=8px / uni-manager=2px），各变体 theme.css 驱动
 // - focus ring `ring-ring`：opentrek=品牌色 halo / uni-manager=transparent
 // - shadow：组件不写，uni-manager 通过 theme.css scoped CSS [data-slot='button'] 注入
 
@@ -39,15 +39,9 @@ const buttonVariants = cva(
         dashed:
           'border border-dashed border-input bg-card hover:bg-muted hover:text-foreground aria-expanded:bg-muted',
         ghost:
-          'hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground',
+          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground',
         link: 'text-primary hover:text-primary-hover',
       },
-      // 语义色 — 与 variant 双 prop 组合
-      color: {
-        default: '',
-        primary: '',
-        destructive: '',
-      },
       size: {
         sm: 'h-6 gap-1 px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=size-])]:size-3',
         default:
@@ -69,24 +63,6 @@ const buttonVariants = cva(
       },
     },
     compoundVariants: [
-      // ─── color × variant ─────────────────────────────────────────────
-      {
-        variant: 'outline',
-        color: 'destructive',
-        className:
-          'border-destructive text-destructive hover:bg-destructive/10 hover:text-destructive',
-      },
-      {
-        variant: 'ghost',
-        color: 'destructive',
-        className:
-          'text-destructive hover:bg-destructive/10 hover:text-destructive',
-      },
-      {
-        variant: 'link',
-        color: 'destructive',
-        className: 'text-destructive hover:text-destructive-hover',
-      },
       // ─── ghost / link padding 收紧 ─────────────────────────────────────
       { variant: 'ghost', size: 'sm', className: 'px-1' },
       { variant: 'ghost', size: 'default', className: 'px-1' },
@@ -97,7 +73,6 @@ const buttonVariants = cva(
     ],
     defaultVariants: {
       variant: 'default',
-      color: 'default',
       size: 'default',
       shape: 'default',
       block: false,
@@ -115,6 +90,7 @@ export type ButtonVariant =
   | 'dashed'
   | 'ghost'
   | 'link';
+/** @deprecated 已移除，保留类型避免破坏性变更 */
 export type ButtonColor = 'default' | 'primary' | 'destructive';
 export type ButtonSize =
   | 'sm'
@@ -132,8 +108,6 @@ export interface ButtonProps
     VariantProps<typeof buttonVariants> {
   /** 视觉风格。 @default default */
   variant?: ButtonVariant;
-  /** 语义色，与 variant 双 prop 组合。 @default default */
-  color?: ButtonColor;
   /** 尺寸。 @default default */
   size?: ButtonSize;
   /** 形状。circle/square 为等宽等高，适合纯图标。 @default default */
@@ -151,7 +125,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     {
       className,
       variant,
-      color,
       size,
       shape,
       block,
@@ -176,7 +149,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={cn(
           buttonVariants({
             variant,
-            color,
             size,
             shape,
             block,