@xihan-ui/styles 3.2.0 → 4.0.0

package/family/action-control.css

@@ -8,22 +8,22 @@
   [data-xh-action-control] {
     --xh-_action-current-highlight: var(--xh-action-highlight-rest, transparent);
     --xh-_action-variant-bg-rest: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_action-variant-fg-rest: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-rest: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-rest: transparent;
     --xh-_action-variant-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_action-variant-fg-hover: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-hover: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-hover: transparent;
     --xh-_action-variant-bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
-    --xh-_action-variant-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-pressed: transparent;
     --xh-_action-variant-bg-focus-visible: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_action-variant-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-focus-visible: transparent;
     --xh-_action-variant-bg-disabled: var(--xh-bg-subtle);
     --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
     --xh-_action-variant-border-disabled: transparent;
     --xh-_action-variant-bg-loading: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-loading: transparent;
 
     position: relative;
@@ -60,6 +60,12 @@
       scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
+  @supports (justify-content: safe center) {
+    [data-xh-action-control] {
+      justify-content: safe center;
+    }
+  }
+
   [data-xh-action-control][data-xh-action-variant='solid'] {
     --xh-_action-variant-bg-rest: var(--xh-_tone, var(--xh-bg-brand));
     --xh-_action-variant-fg-rest: var(--xh-_tone-on, var(--xh-fg-on-brand));
@@ -83,42 +89,42 @@
 
   [data-xh-action-control][data-xh-action-variant='subtle'] {
     --xh-_action-variant-bg-rest: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_action-variant-fg-rest: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-rest: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-rest: transparent;
     --xh-_action-variant-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_action-variant-fg-hover: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-hover: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-hover: transparent;
     --xh-_action-variant-bg-pressed: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
-    --xh-_action-variant-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-pressed: transparent;
     --xh-_action-variant-bg-focus-visible: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_action-variant-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-focus-visible: transparent;
     --xh-_action-variant-bg-disabled: var(--xh-bg-subtle);
     --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
     --xh-_action-variant-border-disabled: transparent;
     --xh-_action-variant-bg-loading: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_action-variant-border-loading: transparent;
   }
 
   [data-xh-action-control][data-xh-action-variant='outline'] {
-    --xh-_action-variant-bg-rest: transparent;
+    --xh-_action-variant-bg-rest: var(--xh-_tone-subtle, transparent);
     --xh-_action-variant-fg-rest: var(--xh-_tone-fg, var(--xh-fg-default));
     --xh-_action-variant-border-rest: var(--xh-_tone-border-control, var(--xh-border-control));
-    --xh-_action-variant-bg-hover: var(--xh-_tone-subtle, var(--xh-action-host-bg-hover, var(--xh-bg-subtle)));
+    --xh-_action-variant-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-action-host-bg-hover, var(--xh-bg-subtle)));
     --xh-_action-variant-fg-hover: var(--xh-_tone-fg, var(--xh-fg-default));
     --xh-_action-variant-border-hover: var(--xh-_tone-border-control, var(--xh-border-control-hover));
-    --xh-_action-variant-bg-pressed: var(--xh-_tone-subtle-hover, var(--xh-action-host-bg-pressed, var(--xh-bg-subtle-hover)));
+    --xh-_action-variant-bg-pressed: var(--xh-_tone-subtle-active, var(--xh-action-host-bg-pressed, var(--xh-bg-subtle-hover)));
     --xh-_action-variant-fg-pressed: var(--xh-_tone-fg, var(--xh-fg-default));
     --xh-_action-variant-border-pressed: var(--xh-_tone-border-control, var(--xh-border-control-hover));
-    --xh-_action-variant-bg-focus-visible: transparent;
+    --xh-_action-variant-bg-focus-visible: var(--xh-_tone-subtle, transparent);
     --xh-_action-variant-fg-focus-visible: var(--xh-_tone-fg, var(--xh-fg-default));
     --xh-_action-variant-border-focus-visible: var(--xh-_tone-border-control, var(--xh-border-control));
     --xh-_action-variant-bg-disabled: transparent;
     --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
     --xh-_action-variant-border-disabled: var(--xh-border-default);
-    --xh-_action-variant-bg-loading: transparent;
+    --xh-_action-variant-bg-loading: var(--xh-_tone-subtle, transparent);
     --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-default));
     --xh-_action-variant-border-loading: var(--xh-_tone-border-control, var(--xh-border-control));
   }
@@ -176,7 +182,7 @@
 
   [data-xh-action-control][data-xh-action-size='sm'] {
     --xh-_action-profile-visual-size: var(--xh-control-h-sm);
-    --xh-_action-profile-padding-inline: var(--xh-control-px-sm);
+    --xh-_action-profile-padding-inline: var(--xh-space-3);
     --xh-_action-profile-padding-block: 0;
     --xh-_action-profile-gap: var(--xh-control-gap-sm);
     --xh-_action-profile-glyph-size: var(--xh-glyph-size-sm);
@@ -185,7 +191,7 @@
 
   [data-xh-action-control][data-xh-action-size='md'] {
     --xh-_action-profile-visual-size: var(--xh-control-h-md);
-    --xh-_action-profile-padding-inline: var(--xh-control-px-md);
+    --xh-_action-profile-padding-inline: var(--xh-space-4);
     --xh-_action-profile-padding-block: 0;
     --xh-_action-profile-gap: var(--xh-control-gap-md);
     --xh-_action-profile-glyph-size: var(--xh-glyph-size-md);
@@ -194,7 +200,7 @@
 
   [data-xh-action-control][data-xh-action-size='lg'] {
     --xh-_action-profile-visual-size: var(--xh-control-h-lg);
-    --xh-_action-profile-padding-inline: var(--xh-control-px-lg);
+    --xh-_action-profile-padding-inline: var(--xh-space-5);
     --xh-_action-profile-padding-block: 0;
     --xh-_action-profile-gap: var(--xh-control-gap-lg);
     --xh-_action-profile-glyph-size: var(--xh-glyph-size-lg);
@@ -231,19 +237,19 @@
 
   [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='sm'] {
     --xh-_action-profile-visual-size: var(--xh-control-action-size);
-    --xh-_action-profile-glyph-size: var(--xh-control-indicator-md);
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-sm);
     --xh-_action-profile-font-size: var(--xh-control-caption-sm);
   }
 
   [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='md'] {
     --xh-_action-profile-visual-size: var(--xh-control-h-sm);
-    --xh-_action-profile-glyph-size: var(--xh-glyph-size-sm);
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-sm);
     --xh-_action-profile-font-size: var(--xh-control-caption-md);
   }
 
   [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='lg'] {
     --xh-_action-profile-visual-size: var(--xh-control-h-md);
-    --xh-_action-profile-glyph-size: var(--xh-glyph-size-md);
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-md);
     --xh-_action-profile-font-size: var(--xh-control-caption-lg);
   }
 
@@ -285,14 +291,17 @@
   }
 
   [data-xh-action-control][data-xh-action-profile='row'][data-xh-action-size='sm'] {
+    --xh-_action-profile-padding-inline: var(--xh-control-px-sm);
     --xh-_action-profile-padding-block: var(--xh-list-option-py-sm);
   }
 
   [data-xh-action-control][data-xh-action-profile='row'][data-xh-action-size='md'] {
+    --xh-_action-profile-padding-inline: var(--xh-control-px-md);
     --xh-_action-profile-padding-block: var(--xh-list-option-py-md);
   }
 
   [data-xh-action-control][data-xh-action-profile='row'][data-xh-action-size='lg'] {
+    --xh-_action-profile-padding-inline: var(--xh-control-px-lg);
     --xh-_action-profile-padding-block: var(--xh-list-option-py-lg);
   }
 
@@ -314,17 +323,14 @@
   }
 
   [data-xh-action-control][data-xh-action-profile='disclosure-trigger'][data-xh-action-size='sm'] {
-    --xh-_action-profile-padding-inline: var(--xh-space-3);
     --xh-_action-profile-padding-block: var(--xh-space-3);
   }
 
   [data-xh-action-control][data-xh-action-profile='disclosure-trigger'][data-xh-action-size='md'] {
-    --xh-_action-profile-padding-inline: var(--xh-space-4);
     --xh-_action-profile-padding-block: var(--xh-space-4);
   }
 
   [data-xh-action-control][data-xh-action-profile='disclosure-trigger'][data-xh-action-size='lg'] {
-    --xh-_action-profile-padding-inline: var(--xh-space-5);
     --xh-_action-profile-padding-block: var(--xh-space-5);
   }
 

package/family/chart.css

@@ -7,6 +7,63 @@
 
 /* 转圈与淡入关键帧由 motion.css 提供：引入本配方的图表皮肤同时 @import 它；家族文件之间不互相引入，
    全量入口里每份家族只内联一次。 */
+
+/* 几何度量登记成长度：计算值是算好的像素，内核读到的圆角、间隙与柱厚上限跟着 calc() / max() 写法走。
+   要继承：部件从根上取同一份度量 */
+@property --xh-_chart-metric-bar-max {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --xh-_chart-metric-gap {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --xh-_chart-metric-line-width {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --xh-_chart-metric-point-size {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --xh-_chart-metric-hit-min {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --xh-_chart-metric-tick-length {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --xh-_chart-metric-label-gap {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --xh-_chart-metric-radius {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --xh-_chart-metric-font-size {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
 @layer xihan.components {
   /* 根不画外边、不填底，透出宿主面；需要框时由作者放进 Card。提示框按根的内边距盒绝对定位，参照系就是它；
      它抬的那一层只在根里排序。图随容器铺满：在 flex / grid 里也不按内容收缩成默认的 300px */

package/family/collection-item.css

@@ -37,6 +37,10 @@
     grid-template-rows: auto minmax(0, max-content);
     align-items: center;
     min-inline-size: 0;
+    /* 定高行：锚定浮层里的集合（下拉、菜单、级联、命令面板）由皮肤经这支桥接槽接上按档的行高，
+       一行文字的行落在这一档、带说明的行照常撑高；条目在 reset 里已是 border-box，行高就是可见盒高。
+       overlay 语境同时覆盖页内列表、树与时间格，它们不接这支槽，仍由内距加一行文字撑开 */
+    min-block-size: var(--xh-collection-row-h, auto);
     padding-block: var(--xh-collection-block-padding, var(--xh-_collection-block-padding));
     padding-inline: var(--xh-collection-inline-padding, var(--xh-_collection-inline-padding));
     border-radius: var(--xh-collection-radius, var(--xh-shape-control));
@@ -217,7 +221,7 @@
     --xh-_collection-description-fg: var(--xh-collection-description-fg-selected, var(--xh-material-frosted-fg-muted));
     --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected, var(--xh-fg-brand));
     --xh-_collection-outline: var(--xh-collection-outline-selected, transparent);
-    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected, var(--xh-font-weight-medium));
     --xh-_collection-cursor: var(--xh-collection-cursor-selected, pointer);
     --xh-_collection-opacity: var(--xh-collection-opacity-selected, 1);
   }
@@ -228,7 +232,7 @@
     --xh-_collection-description-fg: var(--xh-collection-description-fg-selected-hover, var(--xh-material-frosted-fg-muted));
     --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected-hover, var(--xh-fg-brand));
     --xh-_collection-outline: var(--xh-collection-outline-selected-hover, transparent);
-    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-hover, var(--xh-font-weight-regular));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-hover, var(--xh-font-weight-medium));
     --xh-_collection-cursor: var(--xh-collection-cursor-selected-hover, pointer);
     --xh-_collection-opacity: var(--xh-collection-opacity-selected-hover, 1);
   }
@@ -239,7 +243,7 @@
     --xh-_collection-description-fg: var(--xh-collection-description-fg-selected-highlight, var(--xh-material-frosted-fg-muted));
     --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected-highlight, var(--xh-fg-brand));
     --xh-_collection-outline: var(--xh-collection-outline-selected-highlight, var(--xh-ring-focus));
-    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-highlight, var(--xh-font-weight-regular));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-highlight, var(--xh-font-weight-medium));
     --xh-_collection-cursor: var(--xh-collection-cursor-selected-highlight, pointer);
     --xh-_collection-opacity: var(--xh-collection-opacity-selected-highlight, 1);
   }
@@ -250,7 +254,7 @@
     --xh-_collection-description-fg: var(--xh-collection-description-fg-selected-pressed, var(--xh-material-frosted-fg-muted));
     --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-selected-pressed, var(--xh-fg-brand));
     --xh-_collection-outline: var(--xh-collection-outline-selected-pressed, transparent);
-    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-pressed, var(--xh-font-weight-regular));
+    --xh-_collection-font-weight: var(--xh-collection-font-weight-selected-pressed, var(--xh-font-weight-medium));
     --xh-_collection-cursor: var(--xh-collection-cursor-selected-pressed, pointer);
     --xh-_collection-opacity: var(--xh-collection-opacity-selected-pressed, 1);
   }
@@ -403,7 +407,7 @@
 
   [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) {
     --xh-_collection-bg: var(--xh-collection-bg-current, transparent);
-    --xh-_collection-fg: var(--xh-collection-fg-current, var(--xh-fg-brand-strong));
+    --xh-_collection-fg: var(--xh-collection-fg-current, var(--xh-fg-brand));
     --xh-_collection-description-fg: var(--xh-collection-description-fg-current, var(--xh-fg-muted));
     --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current, var(--xh-fg-brand));
     --xh-_collection-outline: var(--xh-collection-outline-current, transparent);
@@ -414,7 +418,7 @@
 
   [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):hover {
     --xh-_collection-bg: var(--xh-collection-bg-current-hover, var(--xh-bg-subtle));
-    --xh-_collection-fg: var(--xh-collection-fg-current-hover, var(--xh-fg-brand-strong));
+    --xh-_collection-fg: var(--xh-collection-fg-current-hover, var(--xh-fg-brand));
     --xh-_collection-description-fg: var(--xh-collection-description-fg-current-hover, var(--xh-fg-muted));
     --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current-hover, var(--xh-fg-brand));
     --xh-_collection-outline: var(--xh-collection-outline-current-hover, transparent);
@@ -425,7 +429,7 @@
 
   [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:focus-visible, [data-highlighted]) {
     --xh-_collection-bg: var(--xh-collection-bg-current-highlight, var(--xh-bg-subtle));
-    --xh-_collection-fg: var(--xh-collection-fg-current-highlight, var(--xh-fg-brand-strong));
+    --xh-_collection-fg: var(--xh-collection-fg-current-highlight, var(--xh-fg-brand));
     --xh-_collection-description-fg: var(--xh-collection-description-fg-current-highlight, var(--xh-fg-muted));
     --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current-highlight, var(--xh-fg-brand));
     --xh-_collection-outline: var(--xh-collection-outline-current-highlight, var(--xh-ring-focus));
@@ -436,7 +440,7 @@
 
   [data-xh-collection-item][data-xh-collection-context='nav'][data-current]:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed]) {
     --xh-_collection-bg: var(--xh-collection-bg-current-pressed, var(--xh-bg-subtle-hover));
-    --xh-_collection-fg: var(--xh-collection-fg-current-pressed, var(--xh-fg-brand-strong));
+    --xh-_collection-fg: var(--xh-collection-fg-current-pressed, var(--xh-fg-brand));
     --xh-_collection-description-fg: var(--xh-collection-description-fg-current-pressed, var(--xh-fg-muted));
     --xh-_collection-indicator-fg: var(--xh-collection-indicator-fg-current-pressed, var(--xh-fg-brand));
     --xh-_collection-outline: var(--xh-collection-outline-current-pressed, transparent);

package/family/field-chrome.css

@@ -18,19 +18,19 @@
     padding-inline: var(--xh-field-control-padding-inline, var(--xh-_field-size-padding-inline));
     padding-block: 0;
     --xh-icon-size: var(--xh-field-glyph-size, var(--xh-_field-size-glyph-size));
-    --xh-_field-variant-bg-rest: transparent;
+    --xh-_field-variant-bg-rest: var(--xh-bg-field);
     --xh-_field-variant-border-rest: var(--xh-border-control);
-    --xh-_field-variant-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
-    --xh-_field-variant-border-hover: var(--xh-border-control-hover);
+    --xh-_field-variant-bg-hover: var(--xh-bg-field);
+    --xh-_field-variant-border-hover: var(--xh-border-strong);
+    --xh-_field-variant-bg-focus: var(--xh-bg-surface);
     --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-bg-invalid: var(--xh-bg-field-invalid);
     --xh-_field-variant-border-invalid: var(--xh-border-invalid);
     --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
     --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
     --xh-_field-variant-border-disabled: var(--xh-border-default);
     border: var(--xh-stroke-thin) solid var(--xh-field-border-rest, var(--xh-_field-variant-border-rest));
     border-radius: var(--xh-field-control-radius, var(--xh-shape-control));
-    outline: var(--xh-ring-width) solid transparent;
-    outline-offset: var(--xh-ring-offset);
     background-color: var(--xh-field-bg-rest, var(--xh-_field-variant-bg-rest));
     color: var(--xh-field-fg-rest, var(--xh-fg-default));
     box-shadow: var(--xh-field-shadow-rest, none);
@@ -42,11 +42,13 @@
   }
 
   [data-xh-field-chrome][data-variant='outline'] {
-    --xh-_field-variant-bg-rest: transparent;
+    --xh-_field-variant-bg-rest: var(--xh-bg-field);
     --xh-_field-variant-border-rest: var(--xh-border-control);
-    --xh-_field-variant-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
-    --xh-_field-variant-border-hover: var(--xh-border-control-hover);
+    --xh-_field-variant-bg-hover: var(--xh-bg-field);
+    --xh-_field-variant-border-hover: var(--xh-border-strong);
+    --xh-_field-variant-bg-focus: var(--xh-bg-surface);
     --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-bg-invalid: var(--xh-bg-field-invalid);
     --xh-_field-variant-border-invalid: var(--xh-border-invalid);
     --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
     --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
@@ -58,7 +60,9 @@
     --xh-_field-variant-border-rest: transparent;
     --xh-_field-variant-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
     --xh-_field-variant-border-hover: var(--xh-border-control);
+    --xh-_field-variant-bg-focus: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-bg-invalid: var(--xh-bg-field-invalid);
     --xh-_field-variant-border-invalid: var(--xh-border-invalid);
     --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
     --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
@@ -70,7 +74,9 @@
     --xh-_field-variant-border-rest: transparent;
     --xh-_field-variant-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
     --xh-_field-variant-border-hover: var(--xh-border-control);
+    --xh-_field-variant-bg-focus: transparent;
     --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-bg-invalid: var(--xh-bg-field-invalid);
     --xh-_field-variant-border-invalid: var(--xh-border-invalid);
     --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
     --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
@@ -125,18 +131,18 @@
     flex-wrap: wrap;
     block-size: auto;
     min-block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
-    padding-block: var(--xh-space-1);
+    padding-block: var(--xh-space-0_5);
   }
 
-  [data-xh-field-chrome]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-loading]):hover {
+  [data-xh-field-chrome]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-loading]):not(:focus-within):hover {
     background-color: var(--xh-field-bg-hover, var(--xh-_field-variant-bg-hover));
     border-color: var(--xh-field-border-hover, var(--xh-_field-variant-border-hover));
   }
 
   [data-xh-field-chrome]:focus-within:not([data-disabled]) {
+    background-color: var(--xh-field-bg-focus, var(--xh-_field-variant-bg-focus));
     border-color: var(--xh-field-border-focus, var(--xh-_field-variant-border-focus));
-    outline: var(--xh-ring-width) solid var(--xh-field-ring-focus, var(--xh-ring-focus));
-    outline-offset: var(--xh-ring-offset);
+    outline: none;
   }
 
   [data-xh-field-chrome][data-readonly] {
@@ -150,13 +156,10 @@
   }
 
   [data-xh-field-chrome][data-invalid] {
+    background-color: var(--xh-field-bg-invalid, var(--xh-_field-variant-bg-invalid));
     border-color: var(--xh-field-border-invalid, var(--xh-_field-variant-border-invalid));
   }
 
-  [data-xh-field-chrome][data-invalid]:focus-within:not([data-disabled]) {
-    outline-color: var(--xh-field-ring-invalid, var(--xh-ring-invalid));
-  }
-
   [data-xh-field-chrome][data-disabled] {
     background-color: var(--xh-field-bg-disabled, var(--xh-_field-variant-bg-disabled));
     color: var(--xh-field-fg-disabled, var(--xh-fg-disabled));
@@ -164,6 +167,11 @@
     cursor: var(--xh-field-cursor-disabled, not-allowed);
   }
 
+  [data-xh-field-chrome]:not([data-variant='ghost']):not(:focus-within) {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+  }
+
   [data-xh-field-affix] {
     display: inline-flex;
     flex: none;
@@ -215,7 +223,7 @@
   [data-xh-field-input][data-xh-field-layout='textarea'] {
     block-size: auto;
     max-inline-size: 100%;
-    padding-block: var(--xh-field-textarea-padding-block, var(--xh-space-2));
+    padding-block: var(--xh-field-textarea-padding-block, var(--xh-space-1));
     overflow: auto;
     resize: vertical;
   }
@@ -244,13 +252,14 @@
       opacity: 1;
     }
 
-    [data-xh-field-chrome]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-loading]):hover {
+    [data-xh-field-chrome]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-loading]):not(:focus-within):hover {
       border-color: Highlight;
     }
 
     [data-xh-field-chrome]:focus-within:not([data-disabled]) {
       border-color: Highlight;
-      outline-color: Highlight;
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
     }
 
     [data-xh-field-chrome][data-readonly] {

package/family/loading-ring.css

@@ -4,16 +4,16 @@
  */
 
 /*
- * 加载环家族配方：「这里正在等」的那枚圆环，与 Spinner 环档同一副画法——一整圈轨道色，
- * 只有起始边换成前景色，绕中心匀速转，转起来才看得出方向。
+ * 加载环家族配方：「这里正在等」的那枚圆环，与 Spinner 环档同一副画法——一段 270° 的弧，
+ * 不画轨道，起始边留空，绕中心匀速转，缺口转起来就看得出方向。
  *
  * 连接层在承载者上投影 data-xh-loading-ring，并用共享的 data-loading 说此刻在不在等。
  * 环画在承载者的 ::before 上：伪元素有没有、多大、摆在哪由皮肤决定（皮肤写 content 与尺寸），
  * 配方只负责把它画成环、随 data-loading 淡入淡出并转停。收起时环停在当前角度淡出，
  * 与皮肤里接替它的那枚字形交叉淡变；不在等时不转。
  *
- * 轨道取 --xh-border-default、环粗取 --xh-stroke-thick；起始边颜色走私有槽 --xh-_loading-ring-fg，
- * 皮肤按自己的语气与公开槽给，没给时取 currentColor。转一圈的时长走私有槽 --xh-_loading-ring-duration，
+ * 环粗取 --xh-stroke-thick；弧色走私有槽 --xh-_loading-ring-fg，皮肤按自己的语气与公开槽给，
+ * 没给时取品牌色（与 Spinner 同一枚）；压在动作钮上的那一档没给时随钮的字色。转一圈的时长走私有槽 --xh-_loading-ring-duration，
  * 皮肤把自己的公开时长槽接进来，没给时取 --xh-motion-loop-spin。
  *
  * 进行中的动作钮投影 data-xh-loading-ring="overlay"：环居中压在钮上、不占排布，钮宽不变，直径取钮的图标档。
@@ -25,10 +25,12 @@
  */
 @layer xihan.components {
   [data-xh-loading-ring]::before {
+    --xh-_loading-ring-color: var(--xh-_loading-ring-fg, var(--xh-fg-brand));
+
     /* 环粗算进直径，换厚度不会把环撑大 */
     box-sizing: border-box;
-    border: var(--xh-stroke-thick) solid var(--xh-border-default);
-    border-block-start-color: var(--xh-_loading-ring-fg, currentColor);
+    border: var(--xh-stroke-thick) solid var(--xh-_loading-ring-color);
+    border-block-start-color: transparent;
     border-radius: var(--xh-shape-circle);
     /* 承载者的这枚伪元素在别的状态下可能画着字形：环不带底、不带遮罩 */
     background: none;
@@ -45,8 +47,11 @@
     animation-play-state: running;
   }
 
-  /* 压在动作钮上的环：钮是定位盒（Action Control 给 position: relative），环在钮正中、不进排布 */
+  /* 压在动作钮上的环：钮是定位盒（Action Control 给 position: relative），环在钮正中、不进排布；
+     弧色没给时随钮的字色（实心钮上是钮面的前景色，不是品牌色） */
   [data-xh-loading-ring='overlay']::before {
+    --xh-_loading-ring-color: var(--xh-_loading-ring-fg, currentColor);
+
     content: '';
     position: absolute;
     inset: 0;
@@ -66,30 +71,32 @@
   @media (prefers-reduced-motion: reduce) {
     [data-xh-loading-ring]::before {
       border-style: dotted;
-      border-color: var(--xh-_loading-ring-fg, currentColor);
+      border-color: var(--xh-_loading-ring-color);
       animation: none;
     }
   }
 
   :where([data-motion='reduce']) [data-xh-loading-ring]::before {
     border-style: dotted;
-    border-color: var(--xh-_loading-ring-fg, currentColor);
+    border-color: var(--xh-_loading-ring-color);
     animation: none;
   }
 
   @media print {
     [data-xh-loading-ring]::before {
       border-style: dotted;
-      border-color: var(--xh-_loading-ring-fg, currentColor);
+      border-color: var(--xh-_loading-ring-color);
       animation: none;
     }
   }
 
-  /* 强制色：轨道取系统文字色，起始边取高亮色，转向照样读得出 */
+  /* 强制色：弧取高亮色，缺口取画布色（不画轨道，缺口就是转向的读法）；
+     退出强制换色，系统色直接写，缺口不被换成别的颜色 */
   @media (forced-colors: active) {
     [data-xh-loading-ring]::before {
-      border-color: CanvasText;
-      border-block-start-color: Highlight;
+      forced-color-adjust: none;
+      border-color: Highlight;
+      border-block-start-color: Canvas;
     }
   }
 }

package/family/swatch.css

@@ -20,10 +20,10 @@
     background-color: var(--xh-swatch-checker-base, var(--xh-bg-surface));
     background-image:
       linear-gradient(var(--xh-_swatch-color), var(--xh-_swatch-color)),
-      linear-gradient(45deg, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 75%);
+      linear-gradient(45deg, var(--xh-swatch-checker, var(--xh-bg-subtle)) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--xh-swatch-checker, var(--xh-bg-subtle)) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--xh-swatch-checker, var(--xh-bg-subtle)) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--xh-swatch-checker, var(--xh-bg-subtle)) 75%);
     background-position:
       0 0,
       0 0,

package/family/tag-list.css

@@ -56,4 +56,10 @@
   [data-xh-tag-list] > [data-scope='tag'][data-part='root'][data-count] {
     flex: none;
   }
+
+  /* 盒里有标签时起始内衬收到 --xh-space-1：标签自带内距，行首再留一整段控件内衬就显得空。
+     标签自己的面（没聚焦时白底 + 描边）写在 tag.css 的字段宿主档 */
+  [data-xh-field-chrome]:has([data-xh-tag-list]:not([hidden])) {
+    padding-inline-start: var(--xh-space-1);
+  }
 }