fix(ui): 收敛激活态描边、修正内层圆角溢出并替换 emoji 图标

packages/design/tokens/tokens.css

@@ -19,6 +19,7 @@
   --ua-color-highlight: rgba(255, 255, 255, 0.5); /* 内高光白：主按钮等实色控件顶缘的 1px 高光（暗色必须降档，否则刺眼） */
   --ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */
   --ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */
+  --ua-color-accent-soft: color-mix(in srgb, var(--ua-color-accent) 72%, var(--ua-color-bg)); /* 柔和强调色：细线 / 指示条 / 内嵌焦点环用，纯 accent 做 2px 实线会发刺 */
   --ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); /* 语义淡底标准档：选中底、激活项底 */
   --ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 5%, transparent); /* 语义淡底弱档：悬停底、极弱强调底 */
   --ua-color-danger: #a32d2d; /* 危险色：错误、删除、校验失败 */
@@ -29,6 +30,7 @@
   --ua-radius-sm: 4px; /* 小圆角：按钮 / 输入框 / 标签等控件 */
   --ua-radius-md: 8px; /* 中圆角：卡片 / 面板 / 分组容器 */
   --ua-radius-lg: 12px; /* 大圆角：弹窗 / 抽屉等浮层外壳 */
+  --ua-radius-md-inset: calc(var(--ua-radius-md) - 1px); /* 内衬圆角：贴边的内层块（输入附加块等）与外层弧线对齐，减去 1px 边框 */
 
   /* ---- 间距：4px 基准四档 + 表格单元格复合值 ---- */
   --ua-space-1: 4px; /* 间距 1 档：图标与文字之间、紧邻元素 */
@@ -105,7 +107,7 @@
   --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 25%, transparent); /* 语义警告焦点环：评分等以警告色为主色的控件 */
   --ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 18%, transparent); /* 错误强调环：校验失败时叠在被标红控件外侧，比 danger 描边更外扩一圈 */
   --ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 4%, transparent); /* 呼吸光晕档：与焦点环交替出现做脉冲动画（时间线条目） */
-  --ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent); /* 选中环（非焦点）：色板格子等「当前选中」标记，实色不透明 */
+  --ua-focus-ring-selected: 0 0 0 1.5px var(--ua-color-accent-soft); /* 选中环（非焦点）：细一档 + 柔和色，2px 实色在色板/网格里像加粗边框 */
 
   /* ---- 控件高度：三档，略放大以提升可点面积 ---- */
   --ua-control-h-sm: 28px; /* 小控件高度：紧凑工具栏、标签内嵌按钮 */
@@ -136,6 +138,7 @@
   --ua-color-highlight: rgba(255, 255, 255, 0.08); /* 暗色内高光：暗底上白高光刺眼，降到 8% 只留一道细光 */
   --ua-color-accent: #378add; /* 暗色强调色：提亮以保证暗底可读 */
   --ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */
+  --ua-color-accent-soft: color-mix(in srgb, var(--ua-color-accent) 82%, var(--ua-color-bg)); /* 暗色柔和强调色：与亮色同结构，混入暗底即自然降饱和 */
   --ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 14%, transparent); /* 暗色淡底标准档：暗底上淡底不可见，透明度升一档 */
   --ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 暗色淡底弱档：透明度升一档 */
   --ua-color-danger: #d96a6a; /* 暗色危险色 */
@@ -159,5 +162,5 @@
   --ua-focus-ring-warning: 0 0 0 3px color-mix(in srgb, var(--ua-color-warning) 34%, transparent); /* 暗色警告焦点环 */
   --ua-focus-ring-danger: 0 0 0 3px color-mix(in srgb, var(--ua-color-danger) 30%, transparent); /* 暗色错误强调环 */
   --ua-focus-ring-pulse: 0 0 0 5px color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 暗色呼吸光晕：暗底上低透明度看不见，加倍 */
-  --ua-focus-ring-selected: 0 0 0 2px var(--ua-color-accent); /* 暗色选中环：随 accent 翻转，与亮色同结构 */
+  --ua-focus-ring-selected: 0 0 0 1.5px var(--ua-color-accent-soft); /* 暗色选中环：随 accent 翻转并与亮色同口径 */
 }

packages/design/tokens/tokens.json

@@ -44,12 +44,53 @@
     "warning": {
       "light": "#9a6b1f",
       "dark": "#d9a94f"
+    },
+    "surface2": {
+      "light": "color-mix(in srgb, var(--ua-color-text) 4%, var(--ua-color-bg))",
+      "dark": "color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg))"
+    },
+    "surface3": {
+      "light": "color-mix(in srgb, var(--ua-color-text) 8%, var(--ua-color-bg))",
+      "dark": "color-mix(in srgb, var(--ua-color-text) 10%, var(--ua-color-bg))"
+    },
+    "surfaceInset": {
+      "light": "color-mix(in srgb, var(--ua-color-text) 5%, var(--ua-color-bg))",
+      "dark": "color-mix(in srgb, var(--ua-color-text) 6%, var(--ua-color-bg))"
+    },
+    "textSecondary": {
+      "light": "#4b5158",
+      "dark": "#b4bac2"
+    },
+    "textFaint": {
+      "light": "#9aa0a8",
+      "dark": "#62676f"
+    },
+    "overlay": {
+      "light": "rgba(0, 0, 0, 0.45)",
+      "dark": "rgba(0, 0, 0, 0.6)"
+    },
+    "overlayStrong": {
+      "light": "rgba(0, 0, 0, 0.6)",
+      "dark": "rgba(0, 0, 0, 0.7)"
+    },
+    "tintAccent": {
+      "light": "color-mix(in srgb, var(--ua-color-accent) 10%, transparent)",
+      "dark": "color-mix(in srgb, var(--ua-color-accent) 14%, transparent)"
+    },
+    "tintAccentWeak": {
+      "light": "color-mix(in srgb, var(--ua-color-accent) 5%, transparent)",
+      "dark": "color-mix(in srgb, var(--ua-color-accent) 8%, transparent)"
+    },
+    "accentSoft": {
+      "light": "color-mix(in srgb, var(--ua-color-accent) 72%, var(--ua-color-bg))",
+      "dark": "color-mix(in srgb, var(--ua-color-accent) 82%, var(--ua-color-bg))"
     }
   },
   "radius": {
     "sm": "4px",
     "md": "8px",
-    "lg": "12px"
+    "lg": "12px",
+    "mdInset": "calc(var(--ua-radius-md) - 1px)"
   },
   "space": {
     "1": "4px",
@@ -196,4 +237,4 @@
     "modal": 400,
     "toast": 500
   }
-}
+}