@xihan-ui/styles 3.2.0 → 4.0.0

package/dist/css/tooltip.css

@@ -71,13 +71,14 @@
 
   .xh-scope-tooltip[data-part='content'] {
     /* 尺寸档只换这三个私有槽。tooltip 没有 root 部件，两轴都落在浮层树最外层的 content 上，
-       箭头是它的后代，语气槽一并继承 */
-    --xh-_tooltip-py: var(--xh-space-1);
-    --xh-_tooltip-px: var(--xh-space-2);
-    --xh-_tooltip-font-size: var(--xh-control-caption-md);
+       箭头是它的后代，语气槽一并继承。缺省档纵 8 横 12、正文 14px */
+    --xh-_tooltip-py: var(--xh-space-2);
+    --xh-_tooltip-px: var(--xh-space-3);
+    --xh-_tooltip-font-size: var(--xh-text-body-size);
     /* Tooltip 保留反白身份（登记的反白 compact frosted）：短提示要与可交互的普通主题浮层一眼分开。
-       94% 是六种 tone 在纯黑/纯白最坏底色上仍托住 4.5:1 正文的首个安全档。
-       边不取 --xh-material-frosted-border：那是深色 14% 的透明边，压在反白深底上看不见，
+       底取正文色、字取承载面色：浅色主题下是深底白字，深色主题下整块翻成浅底深字，两头都是同一对反色。
+       compact 档的透明度缺省不透明，底是实底；主题要透景时再由材质令牌给。
+       边不取 --xh-material-frosted-border：那是中性描边色，压在反白深底上看不见，
        浮层要的 1px 可见边界由 on 色 20% 拼色承担；浮层不用玻璃高光，顶光缺省不画 */
     --xh-_tooltip-solid: var(--xh-_tone, var(--xh-fg-default));
     --xh-_tooltip-on: var(--xh-_tone-on, var(--xh-bg-surface));
@@ -94,8 +95,8 @@
     max-inline-size: var(--xh-tooltip-max-w, var(--xh-overlay-max-w));
     padding-block: var(--xh-tooltip-py, var(--xh-_tooltip-py));
     padding-inline: var(--xh-tooltip-px, var(--xh-_tooltip-px));
-    /* 这里刻意用 control 而不是浮层那档 surface：提示气泡通常只有一行字、高度接近控件，
-       8px 圆角在这个尺寸上占比过大，看着会发胖。档位定义里为此单列了一条 */
+    /* 这里刻意用 control 而不是浮层那档 overlay：提示气泡通常只有一行字、高度接近控件，
+       与控件同一形状身份。档位定义里为此单列了一条 */
     border-radius: var(--xh-tooltip-radius, var(--xh-shape-control));
     border: var(--xh-stroke-thin) solid var(--xh-tooltip-border, var(--xh-_tooltip-border));
     background: transparent;
@@ -152,18 +153,16 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里。提示的内边距与字号本就不在 control-* 那把尺上
-     （它是浮层不是控件），故按 space / font-size 档上下各挪一级 */
+  /* 缺省档写在 content 的基础规则里。提示的内边距与字号不在 control-* 那把尺上
+     （它是浮层不是控件）：三档字号都是正文 14px，一行字的提示不缩字，档位只换内距——
+     小号档只收纵向（纵 4 横 12），大号档纵横各放一档（纵 12 横 16） */
   .xh-scope-tooltip[data-part='content'][data-size='sm'] {
-    --xh-_tooltip-py: var(--xh-space-0_5);
-    --xh-_tooltip-px: var(--xh-space-1_5);
-    --xh-_tooltip-font-size: var(--xh-control-caption-sm);
+    --xh-_tooltip-py: var(--xh-space-1);
   }
 
   .xh-scope-tooltip[data-part='content'][data-size='lg'] {
-    --xh-_tooltip-py: var(--xh-space-1_5);
-    --xh-_tooltip-px: var(--xh-space-2_5);
-    --xh-_tooltip-font-size: var(--xh-control-caption-lg);
+    --xh-_tooltip-py: var(--xh-space-3);
+    --xh-_tooltip-px: var(--xh-space-4);
   }
 
   /* 箭头的底色与描边色，几何在 overlay-arrow.css。

package/dist/css/tour.css

@@ -92,7 +92,7 @@
       var(--xh-_tour-spotlight-radius, var(--xh-shape-surface))
     );
     box-shadow:
-      0 0 0 var(--xh-stroke-thick) var(--xh-tour-spotlight-ring, var(--xh-ring-focus)),
+      0 0 0 var(--xh-stroke-thick) var(--xh-tour-spotlight-ring, var(--xh-_tour-spotlight-ring, var(--xh-ring-focus))),
       0 0 0 100vmax var(--xh-_tour-spotlight-shroud);
   }
 
@@ -113,8 +113,10 @@
       top var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
   }
 
+  /* 压暗时暗幕本身已把目标框出来，高亮框不再描一圈环；不压暗时那圈环是唯一的指示 */
   .xh-scope-tour[data-part='spotlight'][data-dimmed] {
     --xh-_tour-spotlight-shroud: var(--xh-tour-spotlight-shroud, var(--xh-bg-overlay));
+    --xh-_tour-spotlight-ring: transparent;
   }
 
   .xh-scope-tour[data-part='spotlight'][hidden] {
@@ -197,7 +199,7 @@
     inline-size: max-content;
     /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
     max-inline-size: min(var(--xh-tour-max-w, var(--xh-overlay-max-w-lg)), var(--xh-_tour-available-w));
-    padding-block: var(--xh-tour-py, var(--xh-surface-py-md));
+    padding-block: var(--xh-tour-py, var(--xh-surface-py-sm));
     padding-inline: var(--xh-tour-px, var(--xh-surface-px-md));
     /* 引导步骤的正文长度由作者定，矮视口下不限高气泡会整块伸出视口 */
     max-block-size: min(var(--xh-tour-max-h, var(--xh-overlay-max-h)), var(--xh-_tour-available-h));
@@ -237,6 +239,11 @@
     color: var(--xh-tour-title-fg, var(--xh-fg-default));
   }
 
+  /* 标题与说明是一组：两者之间只留 4px，其余部件之间才是整档间距 */
+  .xh-scope-tour[data-part='title'] + .xh-scope-tour[data-part='description'] {
+    margin-block-start: calc(var(--xh-space-1) - var(--xh-tour-gap, var(--xh-space-2)));
+  }
+
   /* 关闭按钮是绝对定位的，不占流内宽度：标题得自己让出右上角那块，
      否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
   .xh-scope-tour[data-part='content']:has(.xh-scope-tour[data-part='close-trigger'])
@@ -258,22 +265,22 @@
     color: var(--xh-tour-progress-fg, var(--xh-fg-subtle));
   }
 
-  /* 圆点组：一步一颗，横排 */
+  /* 圆点组：一步一颗，横排；点距与走马灯的分页点同为 8px */
   .xh-scope-tour[data-part='progress-indicator'] {
     display: inline-flex;
     align-items: center;
-    gap: var(--xh-tour-progress-indicator-gap, var(--xh-space-1));
+    gap: var(--xh-tour-progress-indicator-gap, var(--xh-space-2));
   }
 
   .xh-scope-tour[data-part='progress-indicator'][hidden] {
     display: none;
   }
 
-  /* 圆点：8px 正圆取 circle（分页点统一款），未走到的一档取中性描边色。
+  /* 圆点：6px 正圆取 circle（与走马灯分页点同一种语言），未走到的一档取中性描边色。
      宽度与底色都随状态换，换步那一下能看出进度在推进 */
   .xh-scope-tour[data-part='progress-dot'] {
-    inline-size: var(--xh-space-2);
-    block-size: var(--xh-space-2);
+    inline-size: var(--xh-space-1_5);
+    block-size: var(--xh-space-1_5);
     border-radius: var(--xh-shape-circle);
     background: var(--xh-tour-progress-dot-bg, var(--xh-border-default));
     transition:

package/dist/css/transfer.css

@@ -34,6 +34,8 @@
     /* 尺寸档只换这六个私有槽，面板头、搜索框、条目与勾选格都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_transfer-item-py: var(--xh-list-option-py-md);
+    /* 行至少一个同档控件高（md 32px），勾选格、文字与悬停面都有落脚的余量 */
+    --xh-_transfer-item-h: var(--xh-control-h-md);
     --xh-_transfer-h: var(--xh-control-h-md);
     --xh-_transfer-px: var(--xh-control-px-md);
     --xh-_transfer-gap: var(--xh-control-gap-md);
@@ -48,7 +50,7 @@
     display: grid;
     grid-template-rows: auto auto;
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-    gap: var(--xh-transfer-gap, var(--xh-space-3));
+    gap: var(--xh-transfer-gap, var(--xh-space-5));
     align-items: center;
     color: var(--xh-transfer-fg, var(--xh-fg-default));
   }
@@ -58,6 +60,7 @@
   .xh-scope-transfer[data-part='root'][data-size='sm'] {
     --xh-icon-size: var(--xh-transfer-icon-size, var(--xh-glyph-size-sm));
     --xh-_transfer-item-py: var(--xh-list-option-py-sm);
+    --xh-_transfer-item-h: var(--xh-control-h-sm);
     --xh-_transfer-h: var(--xh-control-h-sm);
     --xh-_transfer-px: var(--xh-control-px-sm);
     --xh-_transfer-gap: var(--xh-control-gap-sm);
@@ -68,6 +71,7 @@
   .xh-scope-transfer[data-part='root'][data-size='lg'] {
     --xh-icon-size: var(--xh-transfer-icon-size, var(--xh-glyph-size-lg));
     --xh-_transfer-item-py: var(--xh-list-option-py-lg);
+    --xh-_transfer-item-h: var(--xh-control-h-lg);
     --xh-_transfer-h: var(--xh-control-h-lg);
     --xh-_transfer-px: var(--xh-control-px-lg);
     --xh-_transfer-gap: var(--xh-control-gap-lg);
@@ -131,14 +135,15 @@
     background: var(--xh-transfer-panel-bg-disabled, var(--xh-bg-muted));
   }
 
-  /* 面板内三个角色的槽都带 panel- 段，与部件名逐字对上 */
+  /* 面板内三个角色的槽都带 panel- 段，与部件名逐字对上。
+     栏头是一条淡底：靠底色与下面的列表分开，不再画分隔线；上下 12px，单行约 40px 高 */
   .xh-scope-transfer[data-part='panel-header'] {
     display: flex;
     gap: var(--xh-transfer-panel-header-gap, var(--xh-_transfer-gap));
     align-items: center;
-    padding-block: var(--xh-transfer-panel-header-py, var(--xh-space-2));
+    padding-block: var(--xh-transfer-panel-header-py, var(--xh-space-3));
     padding-inline: var(--xh-transfer-panel-header-px, var(--xh-_transfer-px));
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-transfer-panel-border, var(--xh-border-default));
+    background: var(--xh-transfer-panel-header-bg, var(--xh-bg-muted));
   }
 
   /* 标题占满剩余宽度，把计数挤到行尾侧 */
@@ -147,9 +152,9 @@
     min-inline-size: 0;
     overflow: hidden;
     color: var(--xh-transfer-panel-title-fg, var(--xh-fg-default));
-    /* 面板标头是 Surface 内的标题：14 / 600 */
+    /* 面板标头是 Surface 内的标题：14 / 500 */
     font-size: var(--xh-transfer-panel-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-transfer-panel-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-transfer-panel-title-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -209,9 +214,10 @@
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--xh-transfer-list-gap, var(--xh-list-option-gap));
-    block-size: var(--xh-transfer-list-h, var(--xh-viewport-h-md));
-    padding-block: var(--xh-transfer-list-py, var(--xh-space-1));
-    padding-inline: var(--xh-transfer-list-px, var(--xh-space-1));
+    /* 行通栏：列表不留内衬，行面直接贴到面板两缘 */
+    block-size: var(--xh-transfer-list-h, var(--xh-viewport-h-sm));
+    padding-block: var(--xh-transfer-list-py, var(--xh-space-0));
+    padding-inline: var(--xh-transfer-list-px, var(--xh-space-0));
     overflow: auto;
     transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
@@ -359,7 +365,7 @@
     --xh-collection-inline-padding: var(--xh-transfer-item-px, var(--xh-_transfer-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-transfer-item-font-size, var(--xh-_transfer-font-size));
-    --xh-collection-radius: var(--xh-transfer-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-transfer-item-radius, 0);
     /* 作者的图标尺槽经桥接槽下发到条目，家族缺省按 data-xh-collection-size 取档 */
     --xh-collection-glyph-size: var(--xh-transfer-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-transfer-item-fg, var(--xh-fg-default));
@@ -382,6 +388,7 @@
     flex: none;
     gap: var(--xh-transfer-item-gap, var(--xh-_transfer-gap));
     align-items: center;
+    min-block-size: var(--xh-transfer-item-h, var(--xh-_transfer-item-h));
     /* 行高留出文字的上下伸展空间，行内那层 overflow:hidden 才不会把字削掉 */
     line-height: var(--xh-transfer-item-leading, var(--xh-leading-normal));
     white-space: nowrap;
@@ -417,7 +424,7 @@
     justify-content: center;
     inline-size: var(--xh-transfer-checkbox-size, var(--xh-_transfer-box));
     block-size: var(--xh-transfer-checkbox-size, var(--xh-_transfer-box));
-    border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-control));
+    border: var(--xh-stroke-thin) solid var(--xh-transfer-checkbox-border, var(--xh-border-strong));
     border-radius: var(--xh-transfer-checkbox-radius, var(--xh-shape-inset));
     background: var(--xh-transfer-checkbox-bg, transparent);
     color: var(--xh-transfer-checkbox-fg, var(--xh-_transfer-on-accent));
@@ -488,16 +495,15 @@
     font-weight: var(--xh-font-weight-medium);
   }
 
-  /* 两颗搬运钮是只有字形的离散动作钮：接 Action Control 的 icon 档、outline 形态（中性描边、透明底，
-     白底承载 hover 100 → pressed 200，按下 0.97 并同时换底），盒、焦点环、粗指针热区与禁用面由家族给；
-     此前的 raised 悬停抬升退役（边界只由描边承担）。这里只把使用者槽映射到桥接槽；
-     钮是正方盒，按 sm 档取一个控件高 */
+  /* 两颗搬运钮是只有字形的离散动作钮：接 Action Control 的 icon 档、subtle 形态（淡底、无边，
+     淡底阶梯 hover 200 → pressed 300），盒、焦点环、粗指针热区与禁用面由家族给。
+     钮是正方盒，按 sm 档取一个控件高，正方盒取圆形 */
   .xh-scope-transfer[data-part='to-target-trigger'],
   .xh-scope-transfer[data-part='to-source-trigger'] {
     --xh-action-visual-size: var(--xh-transfer-trigger-size, var(--xh-_action-profile-visual-size));
     --xh-action-min-inline-size: var(--xh-transfer-trigger-size, var(--xh-_action-profile-visual-size));
     --xh-action-padding-inline: var(--xh-transfer-trigger-px, var(--xh-_action-profile-padding-inline));
-    --xh-action-radius: var(--xh-transfer-trigger-radius, var(--xh-shape-control));
+    --xh-action-radius: var(--xh-transfer-trigger-radius, var(--xh-shape-circle));
     --xh-action-border-rest: var(--xh-transfer-trigger-border, var(--xh-_action-variant-border-rest));
     --xh-action-border-hover: var(--xh-transfer-trigger-border, var(--xh-_action-variant-border-hover));
     --xh-action-border-pressed: var(--xh-transfer-trigger-border, var(--xh-_action-variant-border-pressed));

package/dist/css/tree-select.css

@@ -129,7 +129,9 @@
   }
 
   .xh-scope-tree-select[data-part='label'] {
-    color: var(--xh-tree-select-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-tree-select-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-tree-select-label-gap, var(--xh-space-2)) - var(--xh-tree-select-gap, var(--xh-space-1)));
+    color: var(--xh-tree-select-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-tree-select-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-tree-select-label-font-weight, var(--xh-text-label-weight));
     line-height: var(--xh-leading-none);
@@ -137,7 +139,7 @@
 
   /* 整个控件禁用会把 data-disabled 一路打到 label / value-text / indicator 上，各处观感保持一致 */
   .xh-scope-tree-select[data-part='label'][data-disabled] {
-    color: var(--xh-fg-subtle);
+    color: var(--xh-tree-select-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 盒：描边、底色、圆角、控件高度、行内内衬、聚焦环、五态与悬停由 Field Chrome 家族画在这一层，
@@ -158,8 +160,6 @@
     --xh-field-border-hover: var(--xh-tree-select-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-tree-select-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-tree-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-tree-select-control-shadow, none);
     --xh-field-cursor-rest: pointer;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
@@ -311,7 +311,7 @@
     max-inline-size: var(--xh-tree-select-content-max-w, none);
     max-block-size: min(var(--xh-tree-select-content-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_tree-select-available-h));
     padding-block: var(--xh-tree-select-content-py, var(--xh-space-1));
-    padding-inline: var(--xh-tree-select-content-px, var(--xh-space-1));
+    padding-inline: var(--xh-tree-select-content-px, 0);
     border-radius: var(--xh-tree-select-content-radius, var(--xh-shape-overlay));
     /* 面板只是外壳，滚动归树：搜索框与底部操作区因此钉在树的上下沿，不随行滚走。
        行的悬停底色是方角，滚到两端时会探出外壳的圆角 */
@@ -508,7 +508,7 @@
     --xh-collection-inline-padding: var(--xh-tree-select-item-px, var(--xh-_tree-select-row-px));
     --xh-collection-gap: var(--xh-tree-select-item-gap, var(--xh-_tree-select-gap));
     --xh-collection-font-size: var(--xh-tree-select-item-font-size, var(--xh-_tree-select-font-size));
-    --xh-collection-radius: var(--xh-tree-select-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-tree-select-item-radius, 0);
     --xh-collection-glyph-size: var(--xh-tree-select-icon-size, var(--xh-_collection-glyph-size));
     --xh-collection-fg-rest: var(--xh-tree-select-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-tree-select-item-fg, var(--xh-material-frosted-fg));
@@ -518,10 +518,10 @@
     --xh-collection-fg-selected-hover: var(--xh-tree-select-item-fg-selected, var(--xh-tree-select-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-selected-pressed: var(--xh-tree-select-item-fg-selected, var(--xh-tree-select-item-fg, var(--xh-material-frosted-fg)));
     --xh-collection-fg-pressed: var(--xh-tree-select-item-fg, var(--xh-material-frosted-fg));
-    --xh-collection-font-weight-selected: var(--xh-tree-select-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-highlight: var(--xh-tree-select-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-hover: var(--xh-tree-select-item-font-weight-selected, var(--xh-font-weight-regular));
-    --xh-collection-font-weight-selected-pressed: var(--xh-tree-select-item-font-weight-selected, var(--xh-font-weight-regular));
+    --xh-collection-font-weight-selected: var(--xh-tree-select-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-highlight: var(--xh-tree-select-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-hover: var(--xh-tree-select-item-font-weight-selected, var(--xh-font-weight-medium));
+    --xh-collection-font-weight-selected-pressed: var(--xh-tree-select-item-font-weight-selected, var(--xh-font-weight-medium));
     --xh-collection-bg-hover: var(--xh-tree-select-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-keyboard-highlight: var(--xh-tree-select-item-bg-hover, var(--xh-bg-subtle));
     --xh-collection-bg-selected-highlight: var(--xh-tree-select-item-bg-hover, var(--xh-bg-subtle));

package/dist/css/tree.css

@@ -18,13 +18,15 @@
 
   .xh-scope-tree[data-part='root'] {
     /* 尺寸档只换这几支私有槽，行、指示符盒、缩进与占位从 root 继承，走集合家族的尺寸档：
-       行的块向内衬取列表条目档、行内内衬 / 间距 / 字号取控件档、指示符盒取指示符档、缩进一档一格 */
+       行的块向内衬取列表条目档、间距 / 字号取控件档、指示符盒取指示符档。
+       行内内衬只留一条窄边（树行首就是箭头盒，不需要列表那样的起始留白）；
+       缩进 = 箭头盒 + 箭头到文字的间距，子节点的箭头正好对齐父节点的文字起点 */
     --xh-_tree-row-py: var(--xh-list-option-py-md);
-    --xh-_tree-row-px: var(--xh-control-px-md);
+    --xh-_tree-row-px: var(--xh-space-1);
     --xh-_tree-row-gap: var(--xh-control-gap-md);
     --xh-_tree-font-size: var(--xh-control-font-md);
     --xh-_tree-indicator: var(--xh-control-indicator-md);
-    --xh-_tree-indent: var(--xh-space-4);
+    --xh-_tree-indent: calc(var(--xh-_tree-indicator) + var(--xh-_tree-row-gap));
     /* 行外的字形（空态 / 在途占位里的加载环与作者塞的图标）按档取尺；行内的由家族随 data-xh-collection-size
        下发。这支只管作者放进行里的图标：树自绘的状态字形（展开方向、行尾对号与半选杠）是指示符，
        各部件在自己身上把 --xh-icon-size 改接到指示符盒的尺 */
@@ -37,21 +39,19 @@
 
   .xh-scope-tree[data-part='root'][data-size='sm'] {
     --xh-_tree-row-py: var(--xh-list-option-py-sm);
-    --xh-_tree-row-px: var(--xh-control-px-sm);
+    --xh-_tree-row-px: var(--xh-space-0_5);
     --xh-_tree-row-gap: var(--xh-control-gap-sm);
     --xh-_tree-font-size: var(--xh-control-font-sm);
     --xh-_tree-indicator: var(--xh-control-indicator-sm);
-    --xh-_tree-indent: var(--xh-space-3);
     --xh-icon-size: var(--xh-tree-icon-size, var(--xh-glyph-size-sm));
   }
 
   .xh-scope-tree[data-part='root'][data-size='lg'] {
     --xh-_tree-row-py: var(--xh-list-option-py-lg);
-    --xh-_tree-row-px: var(--xh-control-px-lg);
+    --xh-_tree-row-px: var(--xh-space-1_5);
     --xh-_tree-row-gap: var(--xh-control-gap-lg);
     --xh-_tree-font-size: var(--xh-control-font-lg);
     --xh-_tree-indicator: var(--xh-control-indicator-lg);
-    --xh-_tree-indent: var(--xh-space-5);
     --xh-icon-size: var(--xh-tree-icon-size, var(--xh-glyph-size-lg));
   }
 
@@ -89,7 +89,7 @@
   .xh-scope-tree[data-part='tree'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-tree-tree-gap, var(--xh-list-option-gap));
+    gap: var(--xh-tree-tree-gap, var(--xh-space-0));
     max-block-size: var(--xh-tree-max-h, var(--xh-viewport-h-lg));
     padding-block: var(--xh-tree-py, var(--xh-space-1));
     padding-inline: var(--xh-tree-px, var(--xh-space-1));
@@ -170,7 +170,7 @@
   .xh-scope-tree[data-part='branch'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+    gap: var(--xh-tree-branch-gap, var(--xh-space-0));
   }
 
   .xh-scope-tree[data-part='branch'][hidden] {
@@ -337,7 +337,7 @@
 
   /* 展开箭头与方向指示符：两者都可能被作者用作"点这里展开"的把手，
      所以尺寸与叶子的勾选标记一致，两种行的文字起点才对得齐。
-     盒里的 chevron 是指示符：与盒同边长，--xh-icon-size 在自己身上改接到盒的尺 */
+     盒里的 chevron 是指示符：盒与 --xh-icon-size 同边长，兜底字形只画盒的四分之三（16px 盒里 12px） */
   .xh-scope-tree[data-part='branch-trigger'],
   .xh-scope-tree[data-part='branch-indicator'] {
     --xh-icon-size: var(--xh-_tree-indicator-size);
@@ -347,7 +347,7 @@
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-_tree-indicator-size);
-    color: var(--xh-tree-branch-indicator-fg, var(--xh-fg-subtle));
+    color: var(--xh-tree-branch-indicator-fg, var(--xh-fg-muted));
     transition: rotate var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
   }
 
@@ -378,7 +378,7 @@
   .xh-scope-tree[data-part='branch-content'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-tree-branch-content-gap, var(--xh-list-option-gap));
+    gap: var(--xh-tree-branch-content-gap, var(--xh-space-0));
     padding-inline-start: var(--xh-tree-indent, var(--xh-_tree-indent));
   }
 
@@ -389,7 +389,7 @@
    * 把竖线接过它整棵子树，交给下一个兄弟。子节点之间、分支行与子层之间的间距由线向上下伸出补齐，竖线不断开。
    * 只画在竖排的子层里：顶层节点没有父节点可连，横排的末端层没有行首可接。
    * 首个与末位子节点按子层里的结构次序认：子层里只放节点，收起的子树整块不显示、不影响次序。
-   * 它是内部分隔的一种，颜色取 border-subtle；行悬停与选中换面时线压在面上照样看得见
+   * 颜色取 border-default，与容器描边同一档；行悬停与选中换面时线压在面上照样看得见
    */
   .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'] {
     position: relative;
@@ -406,19 +406,19 @@
         var(--xh-tree-indent, var(--xh-_tree-indent))
     );
     --xh-_tree-line-top: 0px;
-    --xh-_tree-line-bottom: var(--xh-tree-branch-content-gap, var(--xh-list-option-gap));
+    --xh-_tree-line-bottom: var(--xh-tree-branch-content-gap, var(--xh-space-0));
 
     position: relative;
   }
 
   .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='item']:first-child,
   .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch']:first-child > .xh-scope-tree[data-part='branch-control'] {
-    --xh-_tree-line-top: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+    --xh-_tree-line-top: var(--xh-tree-branch-gap, var(--xh-space-0));
   }
 
   /* 展开着的非末位分支：行下面先是它自己的子层，竖线只伸到子层顶上，余下那段由子层接着画 */
   .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch'] > .xh-scope-tree[data-part='branch-control'][data-state='open'] {
-    --xh-_tree-line-bottom: var(--xh-tree-branch-gap, var(--xh-list-option-gap));
+    --xh-_tree-line-bottom: var(--xh-tree-branch-gap, var(--xh-space-0));
   }
 
   .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='item']::before,
@@ -429,9 +429,9 @@
     inset-inline-start: var(--xh-_tree-line-x);
     /* 分支横出到展开箭头盒的起点；叶子没有箭头，横线穿过占位那一格接到正文前 */
     inline-size: calc(var(--xh-tree-row-px, var(--xh-_tree-row-px)) - var(--xh-_tree-line-x));
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-subtle));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-default));
     /* 横出的那段落在行的中线：线盒上下伸出的量不对称时按差值的一半补回 */
-    background: linear-gradient(var(--xh-tree-line-color, var(--xh-border-subtle)), var(--xh-tree-line-color, var(--xh-border-subtle)))
+    background: linear-gradient(var(--xh-tree-line-color, var(--xh-border-default)), var(--xh-tree-line-color, var(--xh-border-default)))
       0 calc(50% + (var(--xh-_tree-line-top) - var(--xh-_tree-line-bottom)) / 2) / 100% var(--xh-stroke-thin) no-repeat;
     pointer-events: none;
   }
@@ -448,7 +448,7 @@
   .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='item']:last-child::before,
   .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch']:last-child > .xh-scope-tree[data-part='branch-control']::before {
     inset-block-end: calc(50% - var(--xh-stroke-thin) / 2);
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-subtle));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-default));
     background: none;
   }
 
@@ -457,14 +457,14 @@
   .xh-scope-tree[data-part='tree'][data-lines] .xh-scope-tree[data-part='branch-content'][data-orientation='vertical'] > .xh-scope-tree[data-part='branch']:not(:last-child) > .xh-scope-tree[data-part='branch-content']::after {
     content: '';
     position: absolute;
-    inset-block: 0 calc(var(--xh-tree-branch-content-gap, var(--xh-list-option-gap)) * -1);
+    inset-block: 0 calc(var(--xh-tree-branch-content-gap, var(--xh-space-0)) * -1);
     inset-inline-start: calc(
       var(--xh-tree-row-px, var(--xh-_tree-row-px)) +
         var(--xh-tree-indicator-size, var(--xh-_tree-indicator)) / 2 -
         var(--xh-stroke-thin) / 2 -
         var(--xh-tree-indent, var(--xh-_tree-indent))
     );
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-subtle));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-tree-line-color, var(--xh-border-default));
     pointer-events: none;
   }
 
@@ -474,7 +474,7 @@
     flex-flow: row wrap;
     align-items: center;
     column-gap: var(--xh-tree-leaf-row-gap, var(--xh-space-3));
-    row-gap: var(--xh-tree-branch-content-gap, var(--xh-list-option-gap));
+    row-gap: var(--xh-tree-branch-content-gap, var(--xh-space-0));
   }
 
   /* 横排的一层里节点并排，行盒不能再各自吃满一行 */
@@ -499,8 +499,8 @@
     block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
     vertical-align: var(--xh-glyph-baseline-shift);
     background-color: currentColor;
-    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
-    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / 75% no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / 75% no-repeat;
   }
 
   /* 勾与半选杠叠成两层遮罩，按状态只换两层的尺寸：离开半选淡出的那一段里横杠留着，
@@ -529,10 +529,11 @@
     transition-delay: 0s;
   }
 
-  /* 这一枝在取子节点：展开箭头换成转圈，不再按开合转向；只换字形，颜色沿用箭头的弱前景 */
+  /* 这一枝在取子节点：展开箭头换成品牌色的转圈，不再按开合转向 */
   .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-trigger'],
   .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-indicator'] {
     rotate: none;
+    color: var(--xh-tree-branch-loading-fg, var(--xh-fg-brand));
   }
 
   .xh-scope-tree[data-part='branch'][data-loading] > .xh-scope-tree[data-part='branch-control'] .xh-scope-tree[data-part='branch-trigger']:empty::before,

package/dist/css/typography.css

@@ -27,12 +27,13 @@
     --xh-_typography-body-size: var(--xh-text-body-size);
     --xh-_typography-block-gap: var(--xh-space-4);
     --xh-_typography-heading-gap: var(--xh-space-6);
-    --xh-_typography-h1: var(--xh-font-size-3xl);
-    --xh-_typography-h2: var(--xh-font-size-2xl);
-    --xh-_typography-h3: var(--xh-font-size-xl);
-    --xh-_typography-h4: var(--xh-font-size-lg);
-    --xh-_typography-h5: var(--xh-font-size-md);
-    --xh-_typography-h6: var(--xh-font-size-sm);
+    /* 六级标题沿字号阶梯从 36 逐档降到 16：最小的 h6 仍比正文大一号 */
+    --xh-_typography-h1: var(--xh-font-size-5xl);
+    --xh-_typography-h2: var(--xh-font-size-4xl);
+    --xh-_typography-h3: var(--xh-font-size-3xl);
+    --xh-_typography-h4: var(--xh-font-size-2xl);
+    --xh-_typography-h5: var(--xh-font-size-xl);
+    --xh-_typography-h6: var(--xh-font-size-lg);
     /* 读行宽度：整块正文不收窄就会拉成一行行难读的长句 */
     --xh-_typography-measure: 68ch;
     /* 行内代码跟着所在那行的字号缩：以「随文字走」的字形尺寸为基数按比例收一点，不取固定档位 */
@@ -64,15 +65,15 @@
     --xh-_typography-body-size: var(--xh-font-size-sm);
     --xh-_typography-block-gap: var(--xh-space-3);
     --xh-_typography-heading-gap: var(--xh-space-5);
-    --xh-_typography-h1: var(--xh-font-size-2xl);
-    --xh-_typography-h2: var(--xh-font-size-xl);
-    --xh-_typography-h3: var(--xh-font-size-lg);
-    --xh-_typography-h4: var(--xh-font-size-md);
-    --xh-_typography-h5: var(--xh-font-size-sm);
-    --xh-_typography-h6: var(--xh-font-size-xs);
+    --xh-_typography-h1: var(--xh-font-size-4xl);
+    --xh-_typography-h2: var(--xh-font-size-3xl);
+    --xh-_typography-h3: var(--xh-font-size-2xl);
+    --xh-_typography-h4: var(--xh-font-size-xl);
+    --xh-_typography-h5: var(--xh-font-size-lg);
+    --xh-_typography-h6: var(--xh-font-size-md);
   }
 
-  /* 大档只放大正文与段距：标题档位在 3xl 见顶，六档保持原样 */
+  /* 大档只放大正文与段距：标题档位在 5xl 见顶，六档保持原样 */
   .xh-scope-typography[data-part='root'][data-size='lg'] {
     --xh-_typography-body-size: var(--xh-font-size-lg);
     --xh-_typography-block-gap: var(--xh-space-5);
@@ -123,7 +124,7 @@
   .xh-scope-typography[data-part='heading'] {
     color: var(--xh-typography-heading-fg, var(--xh-fg-default));
     font-size: var(--xh-typography-heading-font-size, var(--xh-_typography-h3));
-    font-weight: var(--xh-typography-heading-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-typography-heading-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-typography-heading-leading, var(--xh-leading-tight));
     /* 标题折行时把各行拉得一样长 */
     text-wrap: balance;
@@ -177,14 +178,15 @@
   }
 
   .xh-scope-typography[data-part='text'][data-variant='strong'] {
-    font-weight: var(--xh-typography-text-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-typography-text-font-weight, var(--xh-font-weight-medium));
   }
 
   .xh-scope-typography[data-part='text'][data-variant='code'] {
     padding-block: var(--xh-typography-code-py, var(--xh-space-0_5));
-    padding-inline: var(--xh-typography-code-px, var(--xh-space-1));
+    padding-inline: var(--xh-typography-code-px, var(--xh-space-2));
     border-radius: var(--xh-typography-code-radius, var(--xh-shape-inset));
     background: var(--xh-typography-code-bg, var(--xh-bg-subtle));
+    color: var(--xh-typography-code-fg, var(--xh-fg-muted));
     font-family: var(--xh-typography-code-font, var(--xh-font-family-mono));
     font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
   }
@@ -214,8 +216,8 @@
   .xh-scope-typography[data-part='text'][data-marked] {
     padding-inline: var(--xh-typography-mark-px, var(--xh-space-0_5));
     border-radius: var(--xh-typography-mark-radius, var(--xh-shape-inset));
-    background: var(--xh-typography-mark-bg, var(--xh-bg-brand-subtle));
-    color: var(--xh-typography-mark-fg, var(--xh-fg-brand-strong));
+    background: var(--xh-typography-mark-bg, var(--xh-bg-mark));
+    color: var(--xh-typography-mark-fg, var(--xh-fg-default));
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
@@ -330,7 +332,7 @@
 
   .xh-scope-typography[data-part='prose'] :where(h1, h2, h3, h4, h5, h6) {
     color: var(--xh-typography-prose-heading-fg, var(--xh-fg-default));
-    font-weight: var(--xh-typography-prose-heading-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-typography-prose-heading-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-tight);
     text-wrap: balance;
   }
@@ -362,7 +364,7 @@
 
   /* 列表：项目符号要留在容器里面，缩进画在列表自己的起始内衬上 */
   .xh-scope-typography[data-part='prose'] :where(ul, ol) {
-    padding-inline-start: var(--xh-typography-prose-list-ps, var(--xh-space-6));
+    padding-inline-start: var(--xh-typography-prose-list-ps, var(--xh-space-5));
   }
 
   .xh-scope-typography[data-part='prose'] :where(li + li) {
@@ -386,15 +388,16 @@
   }
 
   .xh-scope-typography[data-part='prose'] :where(strong) {
-    font-weight: var(--xh-typography-prose-strong-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-typography-prose-strong-font-weight, var(--xh-font-weight-medium));
   }
 
   /* 行内代码与 text 部件的 code 形态同源，同一块正文里两条路写出来一个样 */
   .xh-scope-typography[data-part='prose'] :where(code) {
     padding-block: var(--xh-typography-code-py, var(--xh-space-0_5));
-    padding-inline: var(--xh-typography-code-px, var(--xh-space-1));
+    padding-inline: var(--xh-typography-code-px, var(--xh-space-2));
     border-radius: var(--xh-typography-code-radius, var(--xh-shape-inset));
     background: var(--xh-typography-code-bg, var(--xh-bg-subtle));
+    color: var(--xh-typography-code-fg, var(--xh-fg-muted));
     font-family: var(--xh-typography-code-font, var(--xh-font-family-mono));
     font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
   }
@@ -418,10 +421,10 @@
   }
 
   .xh-scope-typography[data-part='prose'] :where(blockquote) {
-    padding-inline-start: var(--xh-typography-prose-quote-ps, var(--xh-space-4));
+    padding-inline-start: var(--xh-typography-prose-quote-ps, var(--xh-space-2));
     border-inline-start: var(--xh-stroke-thick) solid
-      var(--xh-typography-prose-quote-border, var(--xh-border-subtle));
-    color: var(--xh-typography-prose-quote-fg, var(--xh-fg-muted));
+      var(--xh-typography-prose-quote-border, var(--xh-border-strong));
+    color: var(--xh-typography-prose-quote-fg, inherit);
   }
 
   .xh-scope-typography[data-part='prose'] :where(hr) {