@xihan-ui/styles 3.2.0 → 4.0.0

package/css/slider.css

@@ -17,11 +17,12 @@
      切换 orientation 的那一帧还会跟连接层清空另一轴的动作抢位置，把拇指钉在两轴都被约束的地方。
      皮肤只管另一条轴（交叉轴）的尺寸、颜色、圆角与状态表现。 */
 
-  /* 私有槽位：组件令牌 → 中档字面量两级回退。轨道厚度与拇指直径同时被 control / track / thumb
-     三个角色节点用到，收成两个槽位挂在 root 上，尺寸档只改这两处，靠继承发到子部件。 */
+  /* 私有槽位：组件令牌 → 中档两级回退。轨道厚度与拇指直径同时被 control / track / thumb
+     三个角色节点用到，收成两个槽位挂在 root 上，尺寸档只改这两处，靠继承发到子部件。
+     中档是一条 2px 的细轨（描边粗档）配 12px 的拇指（轨道拇指的 md 档） */
   [data-scope='slider'][data-part='root'] {
-    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size));
-    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-track-thickness));
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size-md));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-stroke-thick));
 
     display: flex;
     flex-direction: column;
@@ -38,15 +39,17 @@
   /* 禁用不整体压暗：前景与表面各自降级——连接层把 data-disabled 发到每个角色节点上，
      轨道、区间、拇指、刻度与标签就近消费，写在各自的规则里 */
 
-  /* 字段标签：14 / 500 / fg-default，禁用换到 --xh-fg-subtle */
+  /* 字段标签：14 / 400 / fg-muted，与控件隔 space-2，禁用不另变色 */
   [data-scope='slider'][data-part='label'] {
-    color: var(--xh-slider-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-slider-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-slider-label-gap, var(--xh-space-2)) - var(--xh-slider-gap, var(--xh-space-1)));
+    color: var(--xh-slider-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-slider-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-slider-label-font-weight, var(--xh-text-label-weight));
   }
 
   [data-scope='slider'][data-part='label'][data-disabled] {
-    color: var(--xh-slider-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-slider-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 拇指以它为定位上下文（拇指常常浮出轨道，挂在 track 上会被轨道的盒子束住）。
@@ -88,12 +91,40 @@
     cursor: not-allowed;
   }
 
+  /* 粗指针：控件只有拇指那么厚，命中区沿交叉轴外扩，补足到粗指针命中下限（--xh-control-hit-coarse）。
+     外扩总量是「下限 − 拇指直径」，按拇指算而不是写死一格，sm 档 10px 的拇指也补得到下限。
+     横排时块首朝着标签：那一侧只扩半个余量、且不越过标签与控件之间的间距，点在标签上仍归标签、不直接跳值；
+     少扩的那一截挪到块尾补齐。竖排时标签不在行内轴上，两侧对称各扩一半。
+     落指在轨道上下这一截也能按下即跳、接着拖；伪元素排在刻度之前，刻度文案仍压在它上面接得到点按 */
+  @media (pointer: coarse) {
+    [data-scope='slider'][data-part='control'][data-orientation='horizontal']::before {
+      --xh-_slider-hit-start: min(
+        var(--xh-slider-label-gap, var(--xh-space-2)),
+        (var(--xh-control-hit-coarse) - var(--xh-_thumb-size)) / 2
+      );
+
+      content: '';
+      position: absolute;
+      inset-block-start: calc(-1 * var(--xh-_slider-hit-start));
+      inset-block-end: calc(var(--xh-_slider-hit-start) + var(--xh-_thumb-size) - var(--xh-control-hit-coarse));
+      inset-inline: 0;
+    }
+
+    [data-scope='slider'][data-part='control'][data-orientation='vertical']::before {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+      inset-inline: calc((var(--xh-_thumb-size) - var(--xh-control-hit-coarse)) / 2);
+    }
+  }
+
   /* 已选区间以它为定位上下文。不写 overflow: hidden：作者把拇指写进轨道里也是合法结构，
      一裁就把拇指切掉半个；区间的圆角由它自己那条 border-radius 兜住，本就不靠轨道来裁。 */
   [data-scope='slider'][data-part='track'] {
     position: relative;
     border-radius: var(--xh-slider-track-radius, var(--xh-shape-pill));
-    background: var(--xh-slider-track-bg, var(--xh-bg-subtle-active));
+    /* 底槽取淡底阶梯的 200 档（--xh-bg-subtle-hover） */
+    background: var(--xh-slider-track-bg, var(--xh-bg-subtle-hover));
   }
 
   [data-scope='slider'][data-part='track'][data-orientation='horizontal'] {
@@ -106,7 +137,7 @@
     inline-size: var(--xh-_track-thickness);
   }
 
-  /* 禁用：底槽退到 100 档淡底，已选区间换成禁用前景——两者仍分得开，值还读得出，只是没了品牌色 */
+  /* 禁用：底槽退到 100 档淡底，已选区间退到 200 档——两者仍分得开，值还读得出，只是没了品牌色 */
   [data-scope='slider'][data-part='track'][data-disabled] {
     background: var(--xh-slider-track-bg-disabled, var(--xh-bg-subtle));
   }
@@ -146,39 +177,35 @@
     background: var(--xh-slider-range-bg-invalid, var(--xh-border-invalid));
   }
 
+  /* 区间叠在底槽上：取不透明档，半透明的墨色压在半透明的底槽上会再叠深一层 */
   [data-scope='slider'][data-part='range'][data-disabled] {
-    background: var(--xh-slider-range-bg-disabled, var(--xh-fg-disabled));
+    background: var(--xh-slider-range-bg-disabled, var(--xh-bg-subtle-hover-opaque));
   }
 
   /* 圆点浮在轨道之上：轨道是流内的，拇指是绝对定位的，天然后来居上，不必再堆 z-index。
      box-sizing 必须显式写：描边要吃进直径里，否则实际盒子比 --xh-_thumb-size 宽两条边，
      下面按半个直径回拉的负外边距就对不上圆心。
-     拇指是可拖起的 raised 面：描边取装饰边（不透明档），raised 影只是加成、不作边界 */
+     拇指是平面的白底圆：2px 强调色描边就是它的边界，静止不投影；跟着手走时才抬起（见拖动那档） */
   [data-scope='slider'][data-part='thumb'] {
     position: absolute;
     box-sizing: border-box;
     inline-size: var(--xh-_thumb-size);
     block-size: var(--xh-_thumb-size);
-    /* 描边取装饰边的不透明档：墨色描边半透明，压在圆点自己的底上只会是底色的深一档，框不住圆点，
-       拇指就与同色的已选区间糊成一片 */
-    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-border-default-opaque));
+    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-_tone, var(--xh-bg-brand)));
     border-radius: var(--xh-slider-thumb-radius, var(--xh-shape-circle));
-    background: var(--xh-slider-thumb-bg, var(--xh-_tone, var(--xh-bg-brand)));
-    /* 圆点上没有字，这一支是给环用的：环灌 currentColor 时取到的是与这块底配对的前景色，
-       不写就取到从页面继承下来的正文色 */
-    color: var(--xh-_tone-on, var(--xh-fg-on-brand));
-    box-shadow: var(--xh-slider-thumb-shadow, var(--xh-elevation-raised));
+    background: var(--xh-slider-thumb-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-slider-thumb-shadow, none);
     cursor: grab;
     transition:
       scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
-  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
-     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
-     禁用的拇指退成白面，不在这一档里，吃库环 */
-  [data-scope='slider'][data-part='thumb']:not([data-disabled]):focus-visible {
-    --xh-_ring-color: currentColor;
+  /* 可悬停设备上指针落到拇指即放大一档，与拖动中同一比例：提示它抓得起来 */
+  @media (hover: hover) {
+    [data-scope='slider'][data-part='thumb']:hover:not([data-disabled], [data-readonly]) {
+      scale: var(--xh-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
+    }
   }
 
   /* 内联样式把 inset-inline-start 定在值所在的比例上，那是拇指的**起始边**不是圆心；
@@ -201,7 +228,7 @@
 
   /* 多拇指时只有手真正推着的那一个带 data-dragging，放大与光标因此不会全组一起变。
      放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式也不用跟着改。
-     海拔从静态的 raised 换到 lifted：跟着手走的东西比贴在页面上的抬得高一档，
+     静止时不投影，拖动中才抬起到 lifted：跟着手走的东西离开页面一档，
      又不到锚定浮层那一层——用 floating 会让拇指和下拉面板一样重。 */
   [data-scope='slider'][data-part='thumb'][data-dragging] {
     /* 放大比例落进私有槽：挂在拇指里的值气泡读同一支反向缩回原尺寸 */
@@ -213,16 +240,16 @@
   }
 
   [data-scope='slider'][data-part='thumb'][data-invalid] {
-    background: var(--xh-slider-thumb-bg-invalid, var(--xh-border-invalid));
+    border-color: var(--xh-slider-thumb-border-invalid, var(--xh-border-invalid));
   }
 
   [data-scope='slider'][data-part='thumb'][data-readonly]:not([data-disabled]) {
     cursor: default;
   }
 
-  /* 禁用：面退到实体白面、描边留着、影收掉——拖不起来的东西不该看着像浮在轨道上。
-     不写 color：圆点上没有字，禁用拇指不进 Tab 序列也不会聚焦，环的前景在这里没有消费者 */
+  /* 禁用：白面留着、描边退到 200 档（不透明档：描边压在拇指自己的白底上，半透明的墨色要先兑实）、影收掉 */
   [data-scope='slider'][data-part='thumb'][data-disabled] {
+    border-color: var(--xh-slider-thumb-border-disabled, var(--xh-bg-subtle-hover-opaque));
     background: var(--xh-slider-thumb-bg-disabled, var(--xh-bg-surface));
     box-shadow: var(--xh-slider-thumb-shadow-disabled, none);
     cursor: not-allowed;
@@ -280,15 +307,14 @@
 
   /* —— 尺寸 —— */
   /* 尺寸只改 root 上那两个槽位，control / track / thumb 跟着一起走；中间档不写规则，缺省即中档。
-     两档都保持"拇指是轨道的三倍厚"这个比例，换档时圆点与底槽的关系看着不变。 */
+     拇指按轨道拇指的三档取 10 / 12 / 16px；轨道小档沿用中档的 2px（再细就读不出是条轨道），大档加到 3px */
   [data-scope='slider'][data-part='root'][data-size='sm'] {
-    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-space-3));
-    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-1));
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size-sm));
   }
 
   [data-scope='slider'][data-part='root'][data-size='lg'] {
-    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-space-6));
-    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-2));
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size-lg));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-stroke-strong));
   }
 
   /* —— 刻度：圆点钉在轨道上、文案排在轨道外侧，坐标由连接层按百分比内联给出 —— */
@@ -298,21 +324,24 @@
     pointer-events: none;
   }
 
-  /* 刻度点是正方盒，取 circle（正方盒不得用 pill 冒充圆） */
+  /* 刻度点是 8px 的白底小圆，2px 描边取轨道色；正方盒取 circle（正方盒不得用 pill 冒充圆）。
+     box-sizing 显式写：描边吃进直径里，平移回中才落在比例点上 */
   [data-scope='slider'][data-part='tick'] {
     position: absolute;
     inset-block-start: 50%;
-    inline-size: var(--xh-slider-tick-size, var(--xh-space-1));
-    block-size: var(--xh-slider-tick-size, var(--xh-space-1));
+    box-sizing: border-box;
+    inline-size: var(--xh-slider-tick-size, var(--xh-space-2));
+    block-size: var(--xh-slider-tick-size, var(--xh-space-2));
+    border: var(--xh-stroke-thick) solid var(--xh-slider-tick-border, var(--xh-bg-subtle-hover));
     border-radius: var(--xh-slider-tick-radius, var(--xh-shape-circle));
-    background: var(--xh-slider-tick-bg, var(--xh-border-strong));
+    background: var(--xh-slider-tick-bg, var(--xh-bg-surface));
     /* 连接层把比例点写在 inset-inline-start 上：平移的行内分量乘书写方向的符号，rtl 下掉头，刻度点才以比例点为中心 */
     translate: calc(-50% * var(--xh-direction-sign)) -50%;
   }
 
-  /* 落进已选区间的刻度点跟 range 同色 */
+  /* 落进已选区间的刻度点描边跟 range 同色 */
   [data-scope='slider'][data-part='tick'][data-passed] {
-    background: var(--xh-slider-tick-bg-active, var(--xh-_tone, var(--xh-bg-brand)));
+    border-color: var(--xh-slider-tick-border-active, var(--xh-_tone, var(--xh-bg-brand)));
   }
 
   [data-scope='slider'][data-part='tick-label'] {
@@ -334,13 +363,13 @@
   }
 
   /* 禁用：刻度点与文案由 tick-group 上的 data-disabled 下发（连接层不给每个刻度单发），
-     已过的刻度点与区间同色，文案换禁用前景，点它跳档的手型收掉 */
+     刻度点描边与底槽同退到 100 档、已过的与区间同退到 200 档，文案换禁用前景，点它跳档的手型收掉 */
   [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick']:where([data-scope='slider']) {
-    background: var(--xh-slider-tick-bg-disabled, var(--xh-border-default));
+    border-color: var(--xh-slider-tick-border-disabled, var(--xh-bg-subtle));
   }
 
   [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'][data-passed]:where([data-scope='slider']) {
-    background: var(--xh-slider-tick-bg-active-disabled, var(--xh-fg-disabled));
+    border-color: var(--xh-slider-tick-border-active-disabled, var(--xh-bg-subtle-hover-opaque));
   }
 
   [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick-label']:where([data-scope='slider']) {

package/css/sparkline.css

@@ -23,6 +23,12 @@
     --xh-_chart-metric-gap: var(--xh-chart-gap);
     --xh-_chart-metric-bar-max: var(--xh-sparkline-bar-max, var(--xh-chart-bar-max));
     --xh-_chart-metric-radius: var(--xh-sparkline-bar-radius, var(--xh-shape-inset));
+    /* 迷你图不画轴、标签与命中区，这几项照样写全：度量槽登记成了长度，不写的那项读到的是初始值 0，不是缺省 */
+    --xh-_chart-metric-hit-min: var(--xh-chart-hit-min);
+    --xh-_chart-metric-tick-length: var(--xh-chart-tick-length);
+    --xh-_chart-metric-label-gap: var(--xh-chart-label-gap);
+    --xh-_chart-metric-font-size: var(--xh-text-caption-size);
+    --xh-_chart-metric-leading: var(--xh-leading-tight);
 
     /* 缺省中性：线与柱退到弱化色，只让标记点取品牌色相的色槽 1，读者先看到「现在在哪」 */
     --xh-_sparkline-color: var(--xh-sparkline-color, var(--xh-chart-deemphasis));
@@ -30,9 +36,9 @@
 
     display: inline-block;
     inline-size: var(--xh-sparkline-width, 6rem);
-    /* 级联兜底：先写一行的高度算式（正文字号 × 正文行距），再写 1lh。
+    /* 级联兜底：先写一行正文的行框令牌（正文字号 × 正文行距），再写 1lh。
        1lh 晚于本库声明的浏览器地板，取不到时旧引擎丢掉后一条、留下前一条。 */
-    block-size: var(--xh-sparkline-height, calc(var(--xh-text-body-size) * var(--xh-text-body-leading)));
+    block-size: var(--xh-sparkline-height, var(--xh-text-body-line-h));
     block-size: var(--xh-sparkline-height, 1lh);
     /* 高度正好是一个行盒：顶边贴行盒顶边，行高不被撑开；居中对齐会按字的 x 高度再挪半格，行盒就多出一截 */
     vertical-align: top;

package/css/spinner.css

@@ -40,6 +40,12 @@
     vertical-align: middle;
   }
 
+  /* 竖排：转圈在上、配文在下居中，整块区域的等待用它 */
+  [data-scope='spinner'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+    gap: var(--xh-spinner-gap, var(--xh-space-1_5));
+  }
+
   /* 露面前的等待：整块藏起、位置照留，露面那一刻布局不跳；visibility 同时把它从读屏里摘掉 */
   [data-scope='spinner'][data-part='root'][data-state='hidden'] {
     visibility: hidden;
@@ -53,10 +59,10 @@
     flex: none;
     inline-size: var(--xh-spinner-size, var(--xh-glyph-size-md));
     block-size: var(--xh-spinner-size, var(--xh-glyph-size-md));
-    border: var(--xh-spinner-thickness, var(--xh-stroke-thick)) solid var(--xh-spinner-track, var(--xh-border-default));
+    border: var(--xh-spinner-thickness, var(--xh-stroke-thick)) solid var(--xh-spinner-fg, var(--xh-fg-brand));
 
-    /* 一整圈是轨道色，只有起始边换成前景色，转起来才看得出方向 */
-    border-block-start-color: var(--xh-spinner-fg, currentColor);
+    /* 一段 270° 的品牌色弧：起始边那一段是缺口（不画轨道，缺省透明），缺口转起来就看得出方向 */
+    border-block-start-color: var(--xh-spinner-track, transparent);
     border-radius: var(--xh-spinner-radius, var(--xh-shape-circle));
     animation: xh-spin var(--xh-spinner-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite;
   }
@@ -73,12 +79,12 @@
     block-size: var(--xh-glyph-size-lg);
   }
 
-  /* 语气只换起始边那一段，轨道留在中性描边上：轨道与起始边的反差就是转向的读法，
-     两者同时换成同一族颜色，转到哪儿就看不出来了。
+  /* 语气只换弧那三段，缺口照旧：弧与缺口的反差就是转向的读法。
      选择器上带 [data-tone] 是必需的：语气槽会沿继承流下来，不限定在写了语气的
      那个节点上，放在语气容器里的转圈会跟着一起改色 */
   [data-scope='spinner'][data-part='root'][data-tone]::before {
-    border-block-start-color: var(--xh-spinner-fg, var(--xh-_tone));
+    border-color: var(--xh-spinner-fg, var(--xh-_tone));
+    border-block-start-color: var(--xh-spinner-track, transparent);
   }
 
   /*
@@ -88,7 +94,7 @@
    */
   [data-scope='spinner'][data-part='root'][data-variant='arc']::before {
     border: 0;
-    background: conic-gradient(transparent, var(--xh-spinner-fg, currentColor));
+    background: conic-gradient(transparent, var(--xh-spinner-fg, var(--xh-fg-brand)));
     -webkit-mask: radial-gradient(
       farthest-side,
       transparent calc(100% - var(--xh-spinner-thickness, var(--xh-stroke-thick))),
@@ -107,7 +113,7 @@
 
   /*
    * 三点：一行三枚圆点，依次亮起成一道波。它不转，因此圆角与描边都撤掉，
-   * 图形改由三层径向渐变画；点的颜色走 currentColor，语气档只换这一处。
+   * 图形改由三层径向渐变画；点取品牌色，语气档只换这一处。
    * 明暗不靠整组的不透明度（那样三点同步明灭，读起来像整体在闪），而是一层三倍宽的遮罩：
    * 两端压在禁用档的不透明度，正中一道满不透明度的亮带，遮罩位置从行首外扫到行尾外，
    * 亮带依次掠过三枚点。
@@ -118,9 +124,9 @@
     border: 0;
     border-radius: 0;
     background:
-      radial-gradient(circle closest-side, var(--xh-spinner-fg, currentColor) 100%, transparent) 0 50% / 25% 25% no-repeat,
-      radial-gradient(circle closest-side, var(--xh-spinner-fg, currentColor) 100%, transparent) 50% 50% / 25% 25% no-repeat,
-      radial-gradient(circle closest-side, var(--xh-spinner-fg, currentColor) 100%, transparent) 100% 50% / 25% 25% no-repeat;
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-fg-brand)) 100%, transparent) 0 50% / 25% 25% no-repeat,
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-fg-brand)) 100%, transparent) 50% 50% / 25% 25% no-repeat,
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-fg-brand)) 100%, transparent) 100% 50% / 25% 25% no-repeat;
     -webkit-mask: linear-gradient(90deg, var(--xh-_spinner-dot-dim) 40%, currentColor 50%, var(--xh-_spinner-dot-dim) 60%) 100% 0 / 300% 100% no-repeat;
     mask: linear-gradient(90deg, var(--xh-_spinner-dot-dim) 40%, currentColor 50%, var(--xh-_spinner-dot-dim) 60%) 100% 0 / 300% 100% no-repeat;
     animation: xh-spinner-dots var(--xh-spinner-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite;
@@ -159,9 +165,11 @@
     }
   }
 
+  /* 配文与转圈同一族颜色：品牌色、正文字号、中等字重 */
   [data-scope='spinner'][data-part='label'] {
-    color: var(--xh-spinner-label-fg, var(--xh-fg-muted));
-    font-size: var(--xh-spinner-label-size, var(--xh-text-secondary-size));
+    color: var(--xh-spinner-label-fg, var(--xh-fg-brand));
+    font-size: var(--xh-spinner-label-size, var(--xh-text-body-size));
+    font-weight: var(--xh-spinner-label-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-none);
   }
 
@@ -171,7 +179,7 @@
   @media (prefers-reduced-motion: reduce) {
     [data-scope='spinner'][data-part='root']::before {
       border-style: dotted;
-      border-color: var(--xh-spinner-fg, currentColor);
+      border-color: var(--xh-spinner-fg, var(--xh-fg-brand));
       animation: none;
     }
 
@@ -183,7 +191,7 @@
 
   :where([data-motion='reduce']) [data-scope='spinner'][data-part='root']::before {
     border-style: dotted;
-    border-color: var(--xh-spinner-fg, currentColor);
+    border-color: var(--xh-spinner-fg, var(--xh-fg-brand));
     animation: none;
   }
 
@@ -204,7 +212,7 @@
        并成一条之后这层配对关系在文本上就断了。 */
     [data-scope='spinner'][data-part='root']::before {
       border-style: dotted;
-      border-color: var(--xh-spinner-fg, currentColor);
+      border-color: var(--xh-spinner-fg, var(--xh-fg-brand));
       animation: none;
     }
 
@@ -215,13 +223,25 @@
 
   /*
    * 高对比档：这一档把整层背景图丢掉，而渐隐弧与三点都画在背景上——屏幕上会一片空白。
-   * 两档一并退回描边画法：一圈系统轨道色加一段高亮的起始边，转的还是同一条动画。
+   * 三档一并退回环档的画法：高亮色的弧加一段画布色的缺口，转的还是同一条动画。
+   * 伪元素退出强制换色、直接写系统色，缺口不被换成别的颜色。
+   * 带语气的那几条（[data-tone]、[data-variant][data-tone]）特指度更高，这里逐条写上同样的限定：
+   * 退出了强制换色的伪元素不会再被系统改色，少一条语气色的弧或渐变就原样画出来
    */
   @media (forced-colors: active) {
+    [data-scope='spinner'][data-part='root']::before,
+    [data-scope='spinner'][data-part='root'][data-tone]::before {
+      forced-color-adjust: none;
+      border-color: Highlight;
+      border-block-start-color: Canvas;
+    }
+
     [data-scope='spinner'][data-part='root'][data-variant='arc']::before,
-    [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
-      border: var(--xh-spinner-thickness, var(--xh-stroke-thick)) solid CanvasText;
-      border-block-start-color: Highlight;
+    [data-scope='spinner'][data-part='root'][data-variant='arc'][data-tone]::before,
+    [data-scope='spinner'][data-part='root'][data-variant='dots']::before,
+    [data-scope='spinner'][data-part='root'][data-variant='dots'][data-tone]::before {
+      border: var(--xh-spinner-thickness, var(--xh-stroke-thick)) solid Highlight;
+      border-block-start-color: Canvas;
       border-radius: var(--xh-spinner-radius, var(--xh-shape-circle));
       background-image: none;
     }

package/css/statistic.css

@@ -13,10 +13,10 @@
 
   /* 三个尺寸档只换这几个私有槽，各段从 root 继承它们，换档不必给每个部件各写一条选择器 */
   [data-scope='statistic'][data-part='root'] {
-    --xh-_statistic-label-size: var(--xh-control-caption-md);
-    --xh-_statistic-value-size: var(--xh-text-heading-2-size);
+    --xh-_statistic-label-size: var(--xh-control-font-md);
+    --xh-_statistic-value-size: var(--xh-text-heading-1-size);
     --xh-_statistic-affix-size: var(--xh-control-font-md);
-    --xh-_statistic-row-gap: var(--xh-space-1);
+    --xh-_statistic-row-gap: var(--xh-space-2);
     /* 涨跌箭头与作者塞进来的图标同一把尺：跟着前后缀那一档字（14px）走，取 sm 字形 16px，大档抬到 md */
     --xh-_statistic-icon-size: var(--xh-glyph-size-sm);
     --xh-icon-size: var(--xh-statistic-icon-size, var(--xh-_statistic-icon-size));
@@ -38,17 +38,17 @@
 
   /* —— 尺寸 —— */
   [data-scope='statistic'][data-part='root'][data-size='sm'] {
-    --xh-_statistic-label-size: var(--xh-control-caption-sm);
-    --xh-_statistic-value-size: var(--xh-text-heading-3-size);
+    --xh-_statistic-label-size: var(--xh-control-font-sm);
+    --xh-_statistic-value-size: var(--xh-text-heading-2-size);
     --xh-_statistic-affix-size: var(--xh-control-font-sm);
-    --xh-_statistic-row-gap: var(--xh-space-0_5);
+    --xh-_statistic-row-gap: var(--xh-space-1);
   }
 
   [data-scope='statistic'][data-part='root'][data-size='lg'] {
-    --xh-_statistic-label-size: var(--xh-control-caption-lg);
-    --xh-_statistic-value-size: var(--xh-text-heading-1-size);
+    --xh-_statistic-label-size: var(--xh-control-font-lg);
+    --xh-_statistic-value-size: var(--xh-text-display-size);
     --xh-_statistic-affix-size: var(--xh-control-font-lg);
-    --xh-_statistic-row-gap: var(--xh-space-1_5);
+    --xh-_statistic-row-gap: var(--xh-space-3);
     --xh-_statistic-icon-size: var(--xh-glyph-size-md);
   }
 
@@ -67,17 +67,17 @@
     color: var(--xh-statistic-value-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
     font-size: var(--xh-statistic-value-font-size, var(--xh-_statistic-value-size));
     font-variant-numeric: tabular-nums;
-    font-weight: var(--xh-font-weight-semibold);
-    line-height: var(--xh-leading-tight);
+    font-weight: var(--xh-font-weight-medium);
+    line-height: var(--xh-leading-normal);
   }
 
-  /* 前后缀比数值小一档、跟着数值的语气走；没写语气时退成弱前景 */
+  /* 前后缀比数值小一档，颜色与字重同数值：它们是这个数的一部分（货币符号、单位），不是旁注 */
   [data-scope='statistic'][data-part='prefix'],
   [data-scope='statistic'][data-part='suffix'] {
-    color: var(--xh-statistic-affix-fg, var(--xh-_tone-fg, var(--xh-fg-muted)));
+    color: var(--xh-statistic-affix-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
     font-size: var(--xh-statistic-affix-font-size, var(--xh-_statistic-affix-size));
     font-variant-numeric: tabular-nums;
-    font-weight: var(--xh-font-weight-regular);
+    font-weight: var(--xh-font-weight-medium);
     line-height: var(--xh-leading-tight);
   }