@xihan-ui/styles 2.0.0 → 3.0.0

package/css/spinner.css

@@ -5,19 +5,20 @@
 
 /* 定义 spinner 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
 @layer xihan.motion {
-  /* 转圈的关键帧定义在本文件里。皮肤可以按需单独引入，
-     引用别处文件里的动画名时那份文件不一定在场，动画会静默地整个不跑 */
-  @keyframes xh-spinner-rotate {
-    to {
-      transform: rotate(1turn);
+  /* 三点档的波：一条亮带沿行扫过三枚点，点依次亮起再暗回禁用档，不再整组同步明暗 */
+  @keyframes xh-spinner-dots {
+    from {
+      -webkit-mask-position: 100% 0;
+      mask-position: 100% 0;
     }
-  }
 
-  /* 三点档的呼吸：一拍里淡到禁用档再回来 */
-  @keyframes xh-spinner-dots {
-    50% {
-      opacity: var(--xh-state-disabled-opacity);
+    to {
+      -webkit-mask-position: 0 0;
+      mask-position: 0 0;
     }
   }
 }
@@ -39,32 +40,37 @@
     vertical-align: middle;
   }
 
+  /* 露面前的等待：整块藏起、位置照留，露面那一刻布局不跳；visibility 同时把它从读屏里摘掉 */
+  [data-scope='spinner'][data-part='root'][data-state='hidden'] {
+    visibility: hidden;
+  }
+
   [data-scope='spinner'][data-part='root']::before {
     content: '';
 
     /* 边框算进直径，换厚度不会把圆环撑大 */
     box-sizing: border-box;
     flex: none;
-    inline-size: var(--xh-spinner-size, var(--xh-glyph-size-lg));
-    block-size: var(--xh-spinner-size, var(--xh-glyph-size-lg));
+    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-block-start-color: var(--xh-spinner-fg, currentColor);
     border-radius: var(--xh-spinner-radius, var(--xh-shape-circle));
-    animation: xh-spinner-rotate var(--xh-spinner-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
+    animation: xh-spin var(--xh-spinner-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite;
   }
 
-  /* 三档直径走字形尺寸那把尺：圆环与同一行文字里的图标同级，三档同族才不会在 compact 下错位。
-     缺省档写在上面的基础规则里 */
+  /* 三档直径走字形尺寸那把尺，与控件内图标同档（sm 16 / md 20 / lg 24）：圆环与同一行文字里的图标同级，
+     三档同族才不会在 compact 下错位。缺省档写在上面的基础规则里 */
   [data-scope='spinner'][data-part='root'][data-size='sm']::before {
     inline-size: var(--xh-glyph-size-sm);
     block-size: var(--xh-glyph-size-sm);
   }
 
   [data-scope='spinner'][data-part='root'][data-size='lg']::before {
-    inline-size: var(--xh-glyph-size-xl);
-    block-size: var(--xh-glyph-size-xl);
+    inline-size: var(--xh-glyph-size-lg);
+    block-size: var(--xh-glyph-size-lg);
   }
 
   /* 语气只换起始边那一段，轨道留在中性描边上：轨道与起始边的反差就是转向的读法，
@@ -77,7 +83,7 @@
 
   /*
    * 渐隐弧：一整圈的色相由角度扫过来，再用一圈环形遮罩把中心挖空，剩下的就是一段
-   * 由浓到无的弧。转的还是同一条 xh-spinner-rotate——这一档只换画法，不换节拍。
+   * 由浓到无的弧。转的还是同一条 xh-spin——这一档只换画法，不换节拍。
    * 遮罩只吃 alpha，用 currentColor 当不透明的那一端即可。
    */
   [data-scope='spinner'][data-part='root'][data-variant='arc']::before {
@@ -100,17 +106,26 @@
   }
 
   /*
-   * 三点：一行三枚圆点，整组一起呼吸。它不转，因此圆角与描边都撤掉，
+   * 三点：一行三枚圆点，依次亮起成一道波。它不转，因此圆角与描边都撤掉，
    * 图形改由三层径向渐变画；点的颜色走 currentColor，语气档只换这一处。
+   * 明暗不靠整组的不透明度（那样三点同步明灭，读起来像整体在闪），而是一层三倍宽的遮罩：
+   * 两端压在禁用档的不透明度，正中一道满不透明度的亮带，遮罩位置从行首外扫到行尾外，
+   * 亮带依次掠过三枚点。
    */
   [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+    --xh-_spinner-dot-dim: color-mix(in srgb, currentColor calc(var(--xh-state-disabled-opacity) * 100%), transparent);
+
     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;
-    animation: xh-spinner-dots var(--xh-spinner-duration, var(--xh-spin-duration)) var(--xh-motion-ease-sweep) infinite;
+    -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;
+    /* 波跟着书写方向走：三枚点左右对称，按书写方向符号水平翻过来，RTL 下就从右往左依次亮起 */
+    scale: var(--xh-direction-sign) 1;
   }
 
   [data-scope='spinner'][data-part='root'][data-variant='dots'][data-tone]::before {
@@ -120,20 +135,26 @@
       radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-_tone)) 100%, transparent) 100% 50% / 25% 25% no-repeat;
   }
 
-  /* 三点档的呼吸自带一条动画，压不住上面那两块基础降级里的 animation: none，
-     因此这一档各自再写一份。两组规则是同一件事的两个触发条件 */
+  /* 三点档的波自带一条动画，压不住上面那两块基础降级里的 animation: none，
+     因此这一档各自再写一份；遮罩一并撤掉，三点满不透明度静止。两组规则是同一件事的两个触发条件 */
   @media (prefers-reduced-motion: reduce) {
     [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+      -webkit-mask: none;
+      mask: none;
       animation: none;
     }
   }
 
   :where([data-motion='reduce']) [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+    -webkit-mask: none;
+    mask: none;
     animation: none;
   }
 
   @media print {
     [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+      -webkit-mask: none;
+      mask: none;
       animation: none;
     }
   }
@@ -204,5 +225,12 @@
       border-radius: var(--xh-spinner-radius, var(--xh-shape-circle));
       background-image: none;
     }
+
+    /* 三点档退回描边后撤掉扫点的遮罩，改转圆环那一条 */
+    [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+      -webkit-mask: none;
+      mask: none;
+      animation-name: xh-spin;
+    }
   }
 }

package/css/splitter.css

@@ -85,6 +85,12 @@
     outline: none;
   }
 
+  /* 折叠 / 展开（Enter、双击、命令式）时面板尺寸走过渡，与 Layout 侧栏折叠同一种节奏；
+     拖拽与方向键步进跟手，连接层不投影 data-animating，照旧瞬时。尺寸仍由连接层写内联，这里只挂过渡 */
+  [data-scope='splitter'][data-part='root'][data-animating] > [data-scope='splitter'][data-part='panel'] {
+    transition: flex-basis var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
   /* 折叠到 0 时连边框都不该露出来：留一条缝比留一块面板更像坏了 */
   [data-scope='splitter'][data-part='panel'][data-collapsed] {
     border: none;
@@ -98,7 +104,7 @@
     align-items: center;
     justify-content: center;
     background: var(--xh-splitter-trigger-bg, var(--xh-border-default));
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='splitter'][data-part='resize-trigger'][data-orientation='horizontal'] {
@@ -111,7 +117,7 @@
     cursor: row-resize;
   }
 
-  /* 分隔条是一根线不是一块面：悬停不走面阶梯（300 只留给 pressed，§7.2 第 3 条），
+  /* 分隔条是一根线不是一块面：悬停不走面阶梯（300 只留给 pressed），
      按线取——与字段描边 rest → hover 同向加深一档 */
   [data-scope='splitter'][data-part='resize-trigger']:hover {
     background: var(--xh-splitter-trigger-bg-hover, var(--xh-border-control));

package/css/statistic.css

@@ -124,4 +124,14 @@
   [data-scope='statistic'][data-part='trend'][hidden] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       落在 Canvas 面上的取 CanvasText */
+    [data-scope='statistic'][data-part='trend'][data-direction]::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
 }