@xihan-ui/styles 3.2.0 → 4.0.0

package/css/rating.css

@@ -17,10 +17,12 @@
      根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
   [data-scope='rating'][data-part='root'] {
     /* 尺寸档只换这三个私有槽，星星与分值都从 root 继承它们，换档不必给每个部件各写一条选择器。
-       星是控件内的字形，按档取 --xh-glyph-size-sm / md / lg；标签字号不随档 */
+       星是评分的主体而不是控件里的附属图标，比同档控件内图标大一档：sm / md / lg 取
+       --xh-glyph-size-md / lg / xl（20 / 24 / 32px）；盒比星大一圈 4px（24 / 28 / 36px），星落在家族那圈透明边位之内、
+       不被挤偏。标签字号不随档 */
     --xh-_rating-item-gap: var(--xh-control-gap-md);
-    --xh-_rating-item-size: var(--xh-glyph-size-md);
-    --xh-_rating-item-box-size: var(--xh-control-action-size);
+    --xh-_rating-item-size: var(--xh-glyph-size-lg);
+    --xh-_rating-item-box-size: calc(var(--xh-_rating-item-size) + var(--xh-space-1));
     --xh-_rating-font-size: var(--xh-control-font-md);
     --xh-icon-size: var(--xh-rating-item-font-size, var(--xh-_rating-item-size));
     /* 点亮色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的警示色 */
@@ -36,25 +38,27 @@
   /* —— 尺寸 —— */
   [data-scope='rating'][data-part='root'][data-size='sm'] {
     --xh-_rating-item-gap: var(--xh-control-gap-sm);
-    --xh-_rating-item-size: var(--xh-glyph-size-sm);
+    --xh-_rating-item-size: var(--xh-glyph-size-md);
     --xh-_rating-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='rating'][data-part='root'][data-size='lg'] {
     --xh-_rating-item-gap: var(--xh-control-gap-lg);
-    --xh-_rating-item-size: var(--xh-glyph-size-lg);
+    --xh-_rating-item-size: var(--xh-glyph-size-xl);
     --xh-_rating-font-size: var(--xh-control-font-lg);
   }
 
-  /* 字段标签：14 / 500 / fg-default，禁用换到 --xh-fg-subtle；文字部件不叠 opacity */
+  /* 字段标签：14 / 400 / fg-muted，与控件隔 space-2，禁用不另变色；文字部件不叠 opacity */
   [data-scope='rating'][data-part='label'] {
-    color: var(--xh-rating-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-rating-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-rating-label-gap, var(--xh-space-2)) - var(--xh-rating-gap, var(--xh-space-1)));
+    color: var(--xh-rating-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-rating-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-rating-label-font-weight, var(--xh-text-label-weight));
   }
 
   [data-scope='rating'][data-part='label'][data-disabled] {
-    color: var(--xh-rating-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-rating-label-fg-disabled, var(--xh-fg-muted));
   }
 
   [data-scope='rating'][data-part='control'] {
@@ -106,10 +110,14 @@
 
   /* 条目固定成一枚方形图标盒：连接层用 clientWidth 判定指针落在左半还是右半，
      固定盒能让半档分界与图形中心严格重合。
-     星接 Action Control icon 档（定尺的星）：盒型、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族配方给，
+     星接 Action Control icon 档（定尺的星）：盒型、按下 / 禁用面、换底、焦点环与过渡由家族配方给，
      这里只把使用者槽映射到桥接槽。静息透明（ghost 形态）；悬停不换底——悬停预览由点亮的星形（data-highlighted）
-     表达，再给盒换面是重复的通道；按下换到 200 档中性面（白底承载）。前景五态映射同一个值：点亮时五态一起换到
-     点亮色，家族的悬停 / 按下块才不会把点亮色换回静息色；禁用不换前景，星带整体的压暗落在 control 的 opacity 上 */
+     表达，再给盒换面是重复的通道。缩放是统一按压反馈的登记例外：悬停与键盘聚焦把这颗星放大到
+     --xh-motion-scale-emphasis（1.2）强调落点，按下保持放大（不取 --xh-motion-scale-press）并换到 200 档中性面
+     （白底承载）——按压的回执是换面，不往回缩。悬停放大只给能悬停的设备：触屏点过之后 :hover 会一直留在那颗星上，
+     放大跟着停住。减弱动效下放大比例为 1，只留换色。
+     前景五态映射同一个值：点亮时五态一起换到点亮色，家族的悬停 / 按下块才不会把点亮色换回静息色；
+     禁用不换前景，星带整体的压暗落在 control 的 opacity 上 */
   [data-scope='rating'][data-part='item'] {
     --xh-_rating-item-bg-pressed: var(--xh-rating-item-bg-pressed, var(--xh-bg-subtle-hover));
 
@@ -119,6 +127,8 @@
     --xh-action-font-size: var(--xh-rating-item-font-size, var(--xh-_rating-item-size));
     --xh-action-bg-hover: transparent;
     --xh-action-bg-pressed: var(--xh-_rating-item-bg-pressed);
+    --xh-action-scale-focus-visible: var(--xh-motion-scale-emphasis);
+    --xh-action-scale-pressed: var(--xh-motion-scale-emphasis);
     --xh-action-fg-rest: var(--xh-rating-item-fg, var(--xh-fg-subtle));
     --xh-action-fg-hover: var(--xh-rating-item-fg, var(--xh-fg-subtle));
     --xh-action-fg-pressed: var(--xh-rating-item-fg, var(--xh-fg-subtle));
@@ -131,8 +141,14 @@
     --xh-action-border-disabled: transparent;
   }
 
+  @media (hover: hover) {
+    [data-scope='rating'][data-part='item'] {
+      --xh-action-scale-hover: var(--xh-motion-scale-emphasis);
+    }
+  }
+
   /* 家族 icon 档在粗指针下用 ::after 扩热区到 44px：五颗星密排，44px 热区会压住相邻的星，
-     连接层又按 currentTarget 的宽度判半颗，热区串到邻星上半档就判错；星本身仍是 24px 盒，热区不外扩。
+     连接层又按 currentTarget 的宽度判半颗，热区串到邻星上半档就判错；星本身仍是不小于 24px 的盒，热区不外扩。
      空条目的 ::after 是点亮那层星形，下限归零才不会被撑成 44px */
   @media (pointer: coarse) {
     [data-scope='rating'][data-part='item']::after {
@@ -205,10 +221,11 @@
     clip-path: inset(0 calc(50% * var(--xh-_rating-end)) 0 calc(50% * var(--xh-_rating-start)));
   }
 
-  /* 只读仍进得了 Tab 序列、读屏也念得出，只是改不动：收掉手型，别暗示"点这儿能改"；
-     家族的按压块由这里的映射钉回静息面——按下不缩放、不换底 */
+  /* 只读仍进得了 Tab 序列、读屏也念得出，只是改不动：收掉手型与悬停放大，别暗示"点这儿能改"；
+     家族的按压块由这里的映射钉回静息面——按下不缩放、不换底；键盘聚焦的放大留着，那是焦点落点 */
   [data-scope='rating'][data-part='item'][data-readonly]:not([data-disabled]) {
     --xh-_rating-item-bg-pressed: transparent;
+    --xh-action-scale-hover: none;
     --xh-action-scale-pressed: none;
     --xh-action-cursor-rest: default;
     --xh-action-cursor-hover: default;

package/css/select.css

@@ -72,6 +72,7 @@
     --xh-_select-h: var(--xh-control-h-md);
     --xh-_select-px: var(--xh-control-px-md);
     --xh-_select-item-py: var(--xh-list-option-py-md);
+    --xh-_select-item-h: var(--xh-list-option-h-md);
     --xh-_select-item-px: var(--xh-control-px-md);
     --xh-_select-gap: var(--xh-control-gap-md);
     --xh-_select-font-size: var(--xh-control-font-md);
@@ -105,6 +106,7 @@
     --xh-_select-h: var(--xh-control-h-sm);
     --xh-_select-px: var(--xh-control-px-sm);
     --xh-_select-item-py: var(--xh-list-option-py-sm);
+    --xh-_select-item-h: var(--xh-list-option-h-sm);
     --xh-_select-item-px: var(--xh-control-px-sm);
     --xh-_select-gap: var(--xh-control-gap-sm);
     --xh-_select-font-size: var(--xh-control-font-sm);
@@ -123,20 +125,23 @@
     --xh-_select-h: var(--xh-control-h-lg);
     --xh-_select-px: var(--xh-control-px-lg);
     --xh-_select-item-py: var(--xh-list-option-py-lg);
+    --xh-_select-item-h: var(--xh-list-option-h-lg);
     --xh-_select-item-px: var(--xh-control-px-lg);
     --xh-_select-gap: var(--xh-control-gap-lg);
     --xh-_select-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='select'][data-part='label'] {
-    color: var(--xh-select-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-select-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-select-label-gap, var(--xh-space-2)) - var(--xh-select-gap, var(--xh-space-1)));
+    color: var(--xh-select-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-select-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-select-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
   }
 
   [data-scope='select'][data-part='label'][data-disabled] {
-    color: var(--xh-select-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-select-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 盒：描边、底色、圆角、控件高度、行内内衬、聚焦环、五态与悬停由 Field Chrome 家族画在这一层，
@@ -157,8 +162,6 @@
     --xh-field-border-hover: var(--xh-select-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-select-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-select-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-select-control-shadow, none);
     --xh-field-cursor-rest: pointer;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
@@ -312,7 +315,7 @@
     max-inline-size: var(--xh-select-content-max-w, none);
     max-block-size: min(var(--xh-select-content-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_select-available-h));
     padding-block: var(--xh-select-content-py, var(--xh-space-1));
-    padding-inline: var(--xh-select-content-px, var(--xh-space-1));
+    padding-inline: var(--xh-select-content-px, 0);
     border-radius: var(--xh-select-content-radius, var(--xh-shape-overlay));
     /* 条目的悬停底色是方角，滚到两端时会探出外壳的圆角 */
     overflow: hidden;
@@ -462,10 +465,11 @@
   [data-scope='select'][data-part='item'] {
     /* 公开 Select 槽只映射到家族合同；网格、尺寸与状态选择器不在组件皮肤复制。pressed 面与 selected 各态由家族按 overlay 上下文给出。 */
     --xh-collection-block-padding: var(--xh-select-item-py, var(--xh-_select-item-py));
+    --xh-collection-row-h: var(--xh-select-item-h, var(--xh-_select-item-h));
     --xh-collection-inline-padding: var(--xh-select-item-px, var(--xh-_select-item-px));
     --xh-collection-gap: var(--xh-select-item-gap, var(--xh-_select-gap));
     --xh-collection-font-size: var(--xh-select-item-font-size, var(--xh-_select-font-size));
-    --xh-collection-radius: var(--xh-select-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-select-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
@@ -474,10 +478,10 @@
     --xh-collection-fg-selected-hover: var(--xh-select-item-fg-selected, var(--xh-select-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-select-item-fg-selected, var(--xh-select-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-pressed: var(--xh-select-item-fg, var(--xh-material-frosted-fg));
-    --xh-collection-font-weight-selected: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-select-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-select-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-select-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-select-item-bg-hover, var(--xh-bg-subtle));

package/css/separator.css

@@ -16,7 +16,7 @@
    * 各自取用：换档只改槽，画在哪个节点上互不影响。
    */
   [data-scope='separator'][data-part='root'] {
-    --xh-_separator-color: var(--xh-separator-color, var(--xh-material-frosted-separator));
+    --xh-_separator-color: var(--xh-separator-color, var(--xh-border-default));
     --xh-_separator-dash: var(--xh-separator-dash-length, var(--xh-space-1_5));
     --xh-_separator-dash-gap: var(--xh-separator-dash-gap, var(--xh-space-1_5));
     --xh-_separator-paint: var(--xh-_separator-color);
@@ -26,15 +26,20 @@
     background: var(--xh-_separator-paint);
   }
 
+  /* 分隔线自带上下（竖向为左右）留白：横向上下各 20px，竖向左右各 12px，放进内容里不必另包一层加边距 */
   [data-scope='separator'][data-part='root'][data-orientation='horizontal'] {
     inline-size: 100%;
     block-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
+    margin-block: var(--xh-separator-my, var(--xh-space-5));
   }
 
   [data-scope='separator'][data-part='root'][data-orientation='vertical'] {
     align-self: stretch;
     inline-size: var(--xh-separator-thickness, var(--xh-stroke-thin));
     block-size: 100%;
+    /* 父容器没有高度时也留一截与文字等高的线 */
+    min-block-size: var(--xh-glyph-size-text);
+    margin-inline: var(--xh-separator-mx, var(--xh-space-3));
   }
 
   /* —— 形态 ——
@@ -74,7 +79,9 @@
     align-items: center;
     inline-size: 100%;
     block-size: auto;
-    gap: var(--xh-separator-gap, var(--xh-space-3));
+    gap: var(--xh-separator-gap, var(--xh-space-4));
+    /* 文字自带一行行高，上下留白收一半，整段占的高度与单线时相当 */
+    margin-block: var(--xh-separator-my, var(--xh-space-2_5));
     background: none;
   }
 
@@ -102,8 +109,9 @@
   /* 分节文字：不参与等分，也不折行 */
   [data-scope='separator'][data-part='content'] {
     flex: none;
-    color: var(--xh-separator-content-fg, var(--xh-fg-muted));
-    font-size: var(--xh-separator-content-font-size, var(--xh-text-secondary-size));
+    color: var(--xh-separator-content-fg, var(--xh-fg-default));
+    font-size: var(--xh-separator-content-font-size, var(--xh-text-body-size));
+    font-weight: var(--xh-separator-content-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-normal);
     white-space: nowrap;
   }
@@ -114,6 +122,16 @@
     flex: 0 0 var(--xh-separator-align-length, var(--xh-space-6));
   }
 
+  /* 强制色：线是底色（与虚线的渐变）画的，系统会把底色换成 Canvas，线就此消失。
+     线退出强制换色、颜色直接取 CanvasText，实线与虚线同一条槽 */
+  @media (forced-colors: active) {
+    [data-scope='separator']:is([data-part='root'], [data-part='line']) {
+      --xh-_separator-color: CanvasText;
+
+      forced-color-adjust: none;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='separator'][data-part='root'][hidden] {

package/css/side-nav.css

@@ -30,8 +30,11 @@
        把 --xh-icon-size 改接到 --xh-control-indicator-* 一族的盒尺 */
     --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换这三个私有槽，行从这两处继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_side-nav-row-h: var(--xh-control-h-md);
+    /* 尺寸档只换这三个私有槽，行从这两处继承它们，换档不必给每个部件各写一条选择器。
+       行高取导航行的尺（比同档控件高一截） */
+    --xh-_side-nav-row-h: var(--xh-nav-row-h-md);
+    /* 面板内的搜索框是字段，高度仍走控件尺 */
+    --xh-_side-nav-input-h: var(--xh-control-h-md);
     --xh-_side-nav-row-px: var(--xh-control-px-md);
     --xh-_side-nav-row-gap: var(--xh-control-gap-md);
     --xh-_side-nav-row-font-size: var(--xh-control-font-md);
@@ -41,7 +44,8 @@
   /* 缺省档写在上面那条里 */
   [data-scope='side-nav']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
     --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-sm));
-    --xh-_side-nav-row-h: var(--xh-control-h-sm);
+    --xh-_side-nav-row-h: var(--xh-nav-row-h-sm);
+    --xh-_side-nav-input-h: var(--xh-control-h-sm);
     --xh-_side-nav-row-px: var(--xh-control-px-sm);
     --xh-_side-nav-row-gap: var(--xh-control-gap-sm);
     --xh-_side-nav-row-font-size: var(--xh-control-font-sm);
@@ -49,7 +53,8 @@
 
   [data-scope='side-nav']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
     --xh-icon-size: var(--xh-side-nav-icon-size, var(--xh-glyph-size-lg));
-    --xh-_side-nav-row-h: var(--xh-control-h-lg);
+    --xh-_side-nav-row-h: var(--xh-nav-row-h-lg);
+    --xh-_side-nav-input-h: var(--xh-control-h-lg);
     --xh-_side-nav-row-px: var(--xh-control-px-lg);
     --xh-_side-nav-row-gap: var(--xh-control-gap-lg);
     --xh-_side-nav-row-font-size: var(--xh-control-font-lg);
@@ -79,7 +84,7 @@
 
     flex: none;
     min-inline-size: 0;
-    block-size: var(--xh-side-nav-input-h, var(--xh-_side-nav-row-h));
+    block-size: var(--xh-side-nav-input-h, var(--xh-_side-nav-input-h));
     padding-block: 0;
     padding-inline: var(--xh-side-nav-input-px, var(--xh-_side-nav-row-px));
     border: none;
@@ -213,7 +218,7 @@
     --xh-collection-inline-padding: var(--xh-side-nav-link-px, var(--xh-_side-nav-row-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-side-nav-link-font-size, var(--xh-_side-nav-row-font-size));
-    --xh-collection-radius: var(--xh-side-nav-link-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-side-nav-link-radius, var(--xh-shape-surface));
     /* 作者的图标尺槽经桥接槽下发到行，家族缺省按 data-xh-collection-size 取档 */
     --xh-collection-glyph-size: var(--xh-side-nav-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-side-nav-row-fg, currentColor);
@@ -223,16 +228,16 @@
     --xh-collection-bg-hover: var(--xh-side-nav-row-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-side-nav-row-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-pressed: var(--xh-side-nav-row-bg-pressed, var(--xh-bg-subtle-hover));
-    /* 当前页：页内持久集合的唯一标记是品牌淡底行面 + 淡底前景，字重不变（与静息同为 regular） */
+    /* 当前页：页内持久集合的标记是品牌淡底行面 + 淡底前景；侧栏另把字重提到 semibold，整列扫读时当前项一眼可见 */
     --xh-collection-bg-current: var(--xh-side-nav-row-bg-active, var(--xh-bg-brand-subtle));
     --xh-collection-fg-current: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
     --xh-collection-fg-current-hover: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
     --xh-collection-fg-current-highlight: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
     --xh-collection-fg-current-pressed: var(--xh-side-nav-row-fg-active, var(--xh-fg-on-brand-subtle));
-    --xh-collection-font-weight-current: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-current-hover: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-current-highlight: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-current-pressed: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-current: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
+    --xh-collection-font-weight-current-hover: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
+    --xh-collection-font-weight-current-highlight: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
+    --xh-collection-font-weight-current-pressed: var(--xh-side-nav-row-font-weight-active, var(--xh-font-weight-semibold));
     --xh-collection-indicator-fg-current: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));
     --xh-collection-indicator-fg-current-hover: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));
     --xh-collection-indicator-fg-current-highlight: var(--xh-side-nav-indicator-color, var(--xh-fg-brand));

package/css/signature-pad.css

@@ -23,34 +23,34 @@
     gap: var(--xh-signature-pad-gap, var(--xh-space-2));
   }
 
-  /* 复合单字段的标签：14 / 500 / fg-default，不随档；贴画布 space-1——
+  /* 复合单字段的标签：14 / 400 / fg-muted，不随档；与画布隔 space-2——
      容器的 gap 归画布之后的部件，标签在它之上补一段差值把距离收成目标值 */
   [data-scope='signature-pad'][data-part='label'] {
     margin-block-end: calc(
-      var(--xh-signature-pad-label-gap, var(--xh-space-1))
+      var(--xh-signature-pad-label-gap, var(--xh-space-2))
       - var(--xh-signature-pad-gap, var(--xh-space-2))
     );
-    color: var(--xh-signature-pad-label-fg, var(--xh-fg-default));
+    color: var(--xh-signature-pad-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-signature-pad-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-signature-pad-label-font-weight, var(--xh-text-label-weight));
   }
 
   [data-scope='signature-pad'][data-part='label'][data-disabled] {
-    color: var(--xh-signature-pad-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-signature-pad-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 画布是块状的写字区：宽度铺满外层，高度由宽高比决定。
      控件行高那把尺量的是一行控件，一块要写字的面积用不上它。
      touch-action 由连接层内联写死，触摸落笔才不会被页面滚动抢走。
      外壳按字段规则自绘（登记的画布型字段例外：字段家族配方钉死控件行高，画布按宽高比撑高吃不下它）：
-     静息透明底 + border-control 描边 + control 圆角 + 无影 */
+     静息字段淡底 + border-control 描边 + control 圆角 + 无影，与字段外壳同一副面 */
   [data-scope='signature-pad'][data-part='control'] {
     display: block;
     inline-size: 100%;
     aspect-ratio: var(--xh-signature-pad-aspect-ratio, 5 / 2);
     border: var(--xh-stroke-thin) solid var(--xh-signature-pad-border, var(--xh-border-control));
     border-radius: var(--xh-signature-pad-radius, var(--xh-shape-control));
-    background: var(--xh-signature-pad-bg, transparent);
+    background: var(--xh-signature-pad-bg, var(--xh-bg-field));
     cursor: crosshair;
     /* 一划就会把画布连同旁边的文字一起刷成选中态 */
     user-select: none;
@@ -60,14 +60,21 @@
       background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 悬停：底不变、描边升 border-strong，与字段外壳的悬停同一档 */
+  [data-scope='signature-pad'][data-part='control']:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-drawing]):hover {
+    border-color: var(--xh-signature-pad-border-hover, var(--xh-border-strong));
+  }
+
+  /* 校验失败：失效描边 + 4% 失效色淡底，与字段外壳的失效档同一副面 */
   [data-scope='signature-pad'][data-part='control'][data-invalid] {
     border-color: var(--xh-signature-pad-control-border-invalid, var(--xh-border-invalid));
+    background: var(--xh-signature-pad-bg-invalid, var(--xh-bg-field-invalid));
   }
 
-  /* 落笔期间把描边压深一档。border-strong 是装饰梯度里的一档，比 border-control 更淡，
-     用在这儿会让描边在落笔时反而变弱 */
+  /* 落笔期间与字段聚焦同一副面：换承载面 + 聚焦描边。排在失效之后，落笔时失效档让位 */
   [data-scope='signature-pad'][data-part='control'][data-drawing] {
-    border-color: var(--xh-signature-pad-border-drawing, var(--xh-border-control-hover));
+    border-color: var(--xh-signature-pad-border-drawing, var(--xh-border-control-focus));
+    background: var(--xh-signature-pad-bg-drawing, var(--xh-bg-surface));
   }
 
   /* 只读仍看得见签名，只是改不动：收掉手型，别暗示"在这儿能写"；
@@ -176,4 +183,11 @@
   [data-scope='signature-pad'][data-part='clear-trigger'][hidden] {
     display: none;
   }
+
+  /* 高对比档底色被系统换掉，落笔与失效只剩描边分得开：换系统高亮色 */
+  @media (forced-colors: active) {
+    [data-scope='signature-pad'][data-part='control']:is([data-drawing], [data-invalid]) {
+      border-color: Highlight;
+    }
+  }
 }

package/css/skeleton.css

@@ -27,7 +27,7 @@
   [data-scope='skeleton'][data-part='root'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-skeleton-gap, var(--xh-space-3));
+    gap: var(--xh-skeleton-gap, var(--xh-space-4));
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，补这条兜住加载结束后的收起态 */
@@ -45,8 +45,8 @@
   /*
    * 单根骨架条。底色与微光两层叠在一起：
    * background-color 是静止时看到的那层，background-image 是扫过去的那道光。
-   * 微光取比底亮一档的那支面色：浅色下比 bg-subtle 亮、深色下同样比它亮，
-   * 两个主题里扫过去的都是一道亮带，而不是浅色下反倒扫出一道暗带。
+   * 微光取淡底一档叠在条底上：浅色下黑墨叠深、扫过去是一道比条底深的暗带，
+   * 深色下白墨叠亮、是一道亮带；两个主题里都是条底往前景方向再进一档。
    */
   [data-scope='skeleton'][data-part='item'] {
     inline-size: 100%;
@@ -56,7 +56,7 @@
     background-image: linear-gradient(
       90deg,
       transparent 20%,
-      var(--xh-skeleton-sheen, var(--xh-bg-surface-raised)) 50%,
+      var(--xh-skeleton-sheen, var(--xh-bg-subtle)) 50%,
       transparent 80%
     );
     background-repeat: no-repeat;
@@ -65,10 +65,10 @@
     animation: xh-shimmer var(--xh-skeleton-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
   }
 
-  /* 一行文字的高度取正文字号，圆角拉满，看起来就是一行还没排出来的字 */
+  /* 一行文字的高度取一行正文的行框，小圆角的方条，看起来就是一行还没排出来的字 */
   [data-scope='skeleton'][data-part='item'][data-shape='text'] {
-    block-size: var(--xh-skeleton-text-block-size, var(--xh-text-caption-size));
-    border-radius: var(--xh-skeleton-text-radius, var(--xh-shape-pill));
+    block-size: var(--xh-skeleton-text-block-size, var(--xh-text-body-line-h));
+    border-radius: var(--xh-skeleton-text-radius, var(--xh-shape-inset));
   }
 
   /* 头像位：正方形加满圆角。宽度定死不跟着容器拉长，高度也不许被主轴压扁 */