iter(g197): accent 淡底五档收敛为两档语义令牌

llms-full.txt

@@ -2184,6 +2184,8 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id>|docs|tokens
 - --ua-color-border: rgba(0, 0, 0, 0.15)（暗色 rgba(255, 255, 255, 0.15)）
 - --ua-color-accent: #185fa5（暗色 #378add）
 - --ua-color-accent-contrast: #ffffff（暗色 #042c53）
+- --ua-color-tint-accent: color-mix(in srgb, var(--ua-color-accent) 10%, transparent)（暗色 color-mix(in srgb, var(--ua-color-accent) 14%, transparent)）
+- --ua-color-tint-accent-weak: color-mix(in srgb, var(--ua-color-accent) 5%, transparent)（暗色 color-mix(in srgb, var(--ua-color-accent) 8%, transparent)）
 - --ua-color-danger: #a32d2d（暗色 #d96a6a）
 - --ua-color-success: #0f6e56（暗色 #4fc39e）
 - --ua-color-warning: #9a6b1f（暗色 #d9a94f）

packages/design/tokens/tokens.css

@@ -18,6 +18,8 @@
   --ua-color-border: rgba(0, 0, 0, 0.15); /* 基础边框色：输入框 / 卡片 / 分割线 */
   --ua-color-accent: #185fa5; /* 强调色：主操作、选中态、焦点环底色 */
   --ua-color-accent-contrast: #ffffff; /* 强调色上的文字色：保证主按钮对比度 */
+  --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; /* 危险色：错误、删除、校验失败 */
   --ua-color-success: #0f6e56; /* 成功色：完成、通过、正向结果 */
   --ua-color-warning: #9a6b1f; /* 警告色：提醒、需注意但不阻断 */
@@ -125,6 +127,8 @@
   --ua-color-border: rgba(255, 255, 255, 0.15); /* 暗色基础边框色：改用白色低透明度，避免黑边在暗底上消失 */
   --ua-color-accent: #378add; /* 暗色强调色：提亮以保证暗底可读 */
   --ua-color-accent-contrast: #042c53; /* 暗色强调色上的文字色：深色反白，维持对比 */
+  --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; /* 暗色危险色 */
   --ua-color-success: #4fc39e; /* 暗色成功色 */
   --ua-color-warning: #d9a94f; /* 暗色警告色 */

packages/skin/ui/ui.css

@@ -51,7 +51,7 @@
   color: var(--ua-color-accent);
 }
 .ua-btn-ghost:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-btn-danger {
   background: var(--ua-color-danger);
@@ -190,11 +190,11 @@ body.ua-col-resizing {
   background: color-mix(in srgb, var(--ua-color-border) 18%, transparent);
 }
 .ua-table tbody tr:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 6%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-table tr.ua-row-selected,
 .ua-table tr.ua-row-selected:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-table tr.ua-row-selected td {
   color: var(--ua-color-text-muted);
@@ -456,16 +456,16 @@ body.ua-col-resizing {
   transition: background var(--ua-duration-fast) var(--ua-ease);
 }
 .ua-option:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 /* 选中态：低视觉比重——淡色底 + 弱化文字，不抢焦点 */
 .ua-option-selected {
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
   color: var(--ua-color-text-muted);
   font-weight: var(--ua-weight-normal);
 }
 .ua-option-selected:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 14%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 
 /* —— 下拉菜单 —— */
@@ -534,7 +534,7 @@ body.ua-col-resizing {
   transition: background var(--ua-duration-fast) var(--ua-ease);
 }
 .ua-menu-item:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-menu-item.is-danger {
   color: var(--ua-color-danger);
@@ -684,7 +684,7 @@ body.ua-col-resizing {
   transition: background var(--ua-duration-fast) var(--ua-ease);
 }
 .ua-acc-head:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--ua-color-accent) 6%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-acc-head:focus-visible {
   outline: none;
@@ -729,7 +729,7 @@ body.ua-col-resizing {
   flex: none;
   border-radius: 50%;
   overflow: hidden;
-  background: color-mix(in srgb, var(--ua-color-accent) 14%, transparent);
+  background: var(--ua-color-tint-accent);
   color: var(--ua-color-accent);
   font-size: var(--ua-font-size-md);
   font-weight: var(--ua-weight-medium);
@@ -1276,7 +1276,7 @@ button.ua-step-dot:hover {
 }
 .ua-alert-info {
   border-color: var(--ua-color-accent);
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-alert-success {
   border-color: var(--ua-color-success);
@@ -1359,7 +1359,7 @@ button.ua-step-dot:hover {
 }
 .ua-page-btn.ua-active {
   border-color: var(--ua-color-accent);
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); /* 选中态低视觉比重 */
+  background: var(--ua-color-tint-accent); /* 选中态低视觉比重 */
   color: var(--ua-color-text-muted);
 }
 .ua-page-gap {
@@ -1587,7 +1587,7 @@ button.ua-step-dot:hover {
 }
 .ua-tab:hover {
   color: var(--ua-color-text);
-  background: color-mix(in srgb, var(--ua-color-accent) 5%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-tab:focus-visible {
   outline: none;
@@ -1635,7 +1635,7 @@ button.ua-step-dot:hover {
 }
 .ua-tab-close:hover {
   color: var(--ua-color-text);
-  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 @media (hover: none) {
   .ua-tab-close {
@@ -2519,7 +2519,7 @@ button.ua-step-dot:hover {
   cursor: pointer;
 }
 .ua-list-clickable:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent); /* 低视觉比重的悬停底色 */
+  background: var(--ua-color-tint-accent-weak); /* 低视觉比重的悬停底色 */
 }
 .ua-list-avatar {
   flex: none;
@@ -2640,13 +2640,13 @@ button.ua-step-dot:hover {
   transition: background var(--ua-duration-fast) ease;
 }
 .ua-tree-row:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-tree-row:focus-visible {
   box-shadow: var(--ua-focus-ring);
 }
 .ua-tree-selected {
-  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent); /* 选中低视觉比重 */
+  background: var(--ua-color-tint-accent); /* 选中低视觉比重 */
   font-weight: var(--ua-weight-semibold);
 }
 .ua-tree-caret {
@@ -2724,7 +2724,7 @@ button.ua-step-dot:hover {
 .ua-upload-zone:hover,
 .ua-upload-over {
   border-color: var(--ua-color-accent);
-  background: color-mix(in srgb, var(--ua-color-accent) 6%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-upload-zone:focus-visible {
   box-shadow: var(--ua-focus-ring);
@@ -2976,7 +2976,7 @@ button.ua-step-dot:hover {
   transition: background var(--ua-duration-fast) ease;
 }
 .ua-transfer-item:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-transfer-item.is-disabled {
   opacity: 0.45;
@@ -3120,7 +3120,7 @@ button.ua-step-dot:hover {
 }
 .ua-cascader-opt:hover:not(:disabled),
 .ua-cascader-opt.is-active {
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-cascader-opt.is-picked {
   color: var(--ua-color-accent);
@@ -3265,7 +3265,7 @@ button.ua-step-dot:hover {
 }
 .ua-autocomplete-opt.is-active,
 .ua-autocomplete-opt:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-autocomplete-hint {
   font-size: var(--ua-font-size-sm);
@@ -3399,7 +3399,7 @@ button.ua-step-dot:hover {
   transition: background var(--ua-duration-fast) ease, color var(--ua-duration-fast) ease;
 }
 .ua-datepicker-day:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-datepicker-day.is-today {
   box-shadow: var(--ua-shadow-inset-accent);
@@ -3451,7 +3451,7 @@ button.ua-step-dot:hover {
 .ua-datepicker-preset:hover {
   color: var(--ua-color-accent);
   border-color: var(--ua-color-accent);
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 @keyframes ua-dp-in {
   from { opacity: 0; transform: translateY(-4px); }
@@ -3791,7 +3791,7 @@ button.ua-step-dot:hover {
   padding: var(--ua-space-05) var(--ua-space-15);
   font-size: var(--ua-font-size-sm);
   color: var(--ua-color-text);
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
   border-radius: var(--ua-radius-sm);
 }
 .ua-multiselect-tag > span {
@@ -3807,7 +3807,7 @@ button.ua-step-dot:hover {
   font-variant-numeric: tabular-nums;
 }
 .ua-multiselect-tag.is-more:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-multiselect-x {
   padding: 0;
@@ -3880,7 +3880,7 @@ button.ua-step-dot:hover {
 }
 .ua-multiselect-opt.is-active,
 .ua-multiselect-opt:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-multiselect-opt.is-selected {
   color: var(--ua-color-accent);
@@ -3963,12 +3963,12 @@ button.ua-step-dot:hover {
 }
 .ua-anchor-link:hover {
   color: var(--ua-color-text);
-  background: color-mix(in srgb, var(--ua-color-accent) 6%, transparent);
+  background: var(--ua-color-tint-accent-weak);
   transform: translateX(2px);
 }
 .ua-anchor-link.is-active {
   color: var(--ua-color-text);
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-anchor-link.is-active::before {
   content: '';
@@ -4052,7 +4052,7 @@ button.ua-step-dot:hover {
 }
 .ua-select-clear:hover {
   color: var(--ua-color-text);
-  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-select-clear:focus-visible {
   outline: 2px solid var(--ua-color-accent);
@@ -4075,7 +4075,7 @@ button.ua-step-dot:hover {
 }
 .ua-crumb-fold:hover {
   color: var(--ua-color-accent);
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-crumb-fold:focus-visible {
   outline: 2px solid var(--ua-color-accent);
@@ -4137,7 +4137,7 @@ button.ua-step-dot:hover {
 }
 .ua-calendar-nav:hover {
   color: var(--ua-color-accent);
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-calendar-nav:focus-visible {
   outline: 2px solid var(--ua-color-accent);
@@ -4170,14 +4170,14 @@ button.ua-step-dot:hover {
   transition: background-color var(--ua-duration-fast) var(--ua-ease), color var(--ua-duration-fast) var(--ua-ease), transform var(--ua-duration-fast) var(--ua-ease);
 }
 .ua-calendar-day:hover {
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
   transform: translateY(-1px);
 }
 .ua-calendar-day.is-today {
   box-shadow: var(--ua-shadow-inset-border); /* 今天只用细内框，不与选中态抢视觉 */
 }
 .ua-calendar-day.is-selected {
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
   color: var(--ua-color-accent);
   font-weight: var(--ua-weight-medium);
   transform: none;
@@ -4278,7 +4278,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 }
 .ua-type-copy:hover {
   color: var(--ua-color-accent);
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent);
+  background: var(--ua-color-tint-accent);
 }
 .ua-type-copy.is-ok { color: var(--ua-color-success); }
 .ua-type-copybox {
@@ -4457,7 +4457,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   transition: background var(--ua-duration-fast) ease;
 }
 .ua-mentions-item.is-active {
-  background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); /* 选中态低视觉比重 */
+  background: var(--ua-color-tint-accent); /* 选中态低视觉比重 */
 }
 .ua-mentions-name {
   color: var(--ua-color-text);
@@ -4614,7 +4614,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
 
 /* —— 日期区间：两端仍走 is-selected，中间用低比重底色连成一条 —— */
 .ua-datepicker-day.is-in-range {
-  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent);
+  background: var(--ua-color-tint-accent);
   border-radius: 0;
 }
 .ua-datepicker-day.is-in-range:hover {
@@ -4626,7 +4626,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   cursor: pointer;
 }
 .ua-row-clickable:hover td {
-  background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent);
+  background: var(--ua-color-tint-accent-weak);
 }
 .ua-row-clickable:focus-visible {
   outline: 2px solid var(--ua-color-accent);
@@ -4846,7 +4846,7 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
   transition: background var(--ua-duration-fast) var(--ua-ease), color var(--ua-duration-fast) var(--ua-ease);
 }
 .ua-cmdk-item.is-active {
-  background: color-mix(in srgb, var(--ua-color-accent) 12%, transparent); /* 选中态低视觉比重：淡色底不抢文字 */
+  background: var(--ua-color-tint-accent); /* 选中态低视觉比重：淡色底不抢文字 */
   color: var(--ua-color-accent);
 }
 .ua-cmdk-label {