@xihan-ui/styles 1.0.0 → 2.0.0

package/css/spinner.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 spinner 样式。 */
+
 @layer xihan.motion {
   /* 转圈的关键帧定义在本文件里。皮肤可以按需单独引入，
      引用别处文件里的动画名时那份文件不一定在场，动画会静默地整个不跑 */
@@ -6,6 +13,13 @@
       transform: rotate(1turn);
     }
   }
+
+  /* 三点档的呼吸：一拍里淡到禁用档再回来 */
+  @keyframes xh-spinner-dots {
+    50% {
+      opacity: var(--xh-state-disabled-opacity);
+    }
+  }
 }
 
 @layer xihan.components {
@@ -21,6 +35,7 @@
     align-items: center;
     gap: var(--xh-spinner-gap, var(--xh-control-gap-md));
     line-height: var(--xh-leading-none);
+    pointer-events: none;
     vertical-align: middle;
   }
 
@@ -30,14 +45,14 @@
     /* 边框算进直径，换厚度不会把圆环撑大 */
     box-sizing: border-box;
     flex: none;
-    inline-size: var(--xh-spinner-size, var(--xh-glyph-size-md));
-    block-size: var(--xh-spinner-size, var(--xh-glyph-size-md));
+    inline-size: var(--xh-spinner-size, var(--xh-glyph-size-lg));
+    block-size: var(--xh-spinner-size, var(--xh-glyph-size-lg));
     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, var(--xh-bg-brand));
-    border-radius: var(--xh-spinner-radius, var(--xh-shape-pill));
-    animation: xh-spinner-rotate var(--xh-spinner-duration, var(--xh-spin-duration)) linear infinite;
+    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;
   }
 
   /* 三档直径走字形尺寸那把尺：圆环与同一行文字里的图标同级，三档同族才不会在 compact 下错位。
@@ -48,8 +63,8 @@
   }
 
   [data-scope='spinner'][data-part='root'][data-size='lg']::before {
-    inline-size: var(--xh-glyph-size-lg);
-    block-size: var(--xh-glyph-size-lg);
+    inline-size: var(--xh-glyph-size-xl);
+    block-size: var(--xh-glyph-size-xl);
   }
 
   /* 语气只换起始边那一段，轨道留在中性描边上：轨道与起始边的反差就是转向的读法，
@@ -57,7 +72,70 @@
      选择器上带 [data-tone] 是必需的：语气槽会沿继承流下来，不限定在写了语气的
      那个节点上，放在语气容器里的转圈会跟着一起改色 */
   [data-scope='spinner'][data-part='root'][data-tone]::before {
-    border-block-start-color: var(--xh-spinner-fg, var(--xh-_tone, var(--xh-bg-brand)));
+    border-block-start-color: var(--xh-spinner-fg, var(--xh-_tone));
+  }
+
+  /*
+   * 渐隐弧：一整圈的色相由角度扫过来，再用一圈环形遮罩把中心挖空，剩下的就是一段
+   * 由浓到无的弧。转的还是同一条 xh-spinner-rotate——这一档只换画法，不换节拍。
+   * 遮罩只吃 alpha，用 currentColor 当不透明的那一端即可。
+   */
+  [data-scope='spinner'][data-part='root'][data-variant='arc']::before {
+    border: 0;
+    background: conic-gradient(transparent, var(--xh-spinner-fg, currentColor));
+    -webkit-mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--xh-spinner-thickness, var(--xh-stroke-thick))),
+      currentColor 0
+    );
+    mask: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--xh-spinner-thickness, var(--xh-stroke-thick))),
+      currentColor 0
+    );
+  }
+
+  [data-scope='spinner'][data-part='root'][data-variant='arc'][data-tone]::before {
+    background: conic-gradient(transparent, var(--xh-spinner-fg, var(--xh-_tone)));
+  }
+
+  /*
+   * 三点：一行三枚圆点，整组一起呼吸。它不转，因此圆角与描边都撤掉，
+   * 图形改由三层径向渐变画；点的颜色走 currentColor，语气档只换这一处。
+   */
+  [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+    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;
+  }
+
+  [data-scope='spinner'][data-part='root'][data-variant='dots'][data-tone]::before {
+    background:
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-_tone)) 100%, transparent) 0 50% / 25% 25% no-repeat,
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-_tone)) 100%, transparent) 50% 50% / 25% 25% no-repeat,
+      radial-gradient(circle closest-side, var(--xh-spinner-fg, var(--xh-_tone)) 100%, transparent) 100% 50% / 25% 25% no-repeat;
+  }
+
+  /* 三点档的呼吸自带一条动画，压不住上面那两块基础降级里的 animation: none，
+     因此这一档各自再写一份。两组规则是同一件事的两个触发条件 */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+    animation: none;
+  }
+
+  @media print {
+    [data-scope='spinner'][data-part='root'][data-variant='dots']::before {
+      animation: none;
+    }
   }
 
   [data-scope='spinner'][data-part='label'] {
@@ -72,23 +150,59 @@
   @media (prefers-reduced-motion: reduce) {
     [data-scope='spinner'][data-part='root']::before {
       border-style: dotted;
-      border-color: var(--xh-spinner-fg, var(--xh-bg-brand));
+      border-color: var(--xh-spinner-fg, currentColor);
       animation: none;
     }
 
     /* 静止态整圈同色，语气跟着铺满整圈 */
     [data-scope='spinner'][data-part='root'][data-tone]::before {
-      border-color: var(--xh-spinner-fg, var(--xh-_tone, var(--xh-bg-brand)));
+      border-color: var(--xh-spinner-fg, var(--xh-_tone));
     }
   }
 
   :where([data-motion='reduce']) [data-scope='spinner'][data-part='root']::before {
     border-style: dotted;
-    border-color: var(--xh-spinner-fg, var(--xh-bg-brand));
+    border-color: var(--xh-spinner-fg, currentColor);
     animation: none;
   }
 
   :where([data-motion='reduce']) [data-scope='spinner'][data-part='root'][data-tone]::before {
-    border-color: var(--xh-spinner-fg, var(--xh-_tone, var(--xh-bg-brand)));
+    border-color: var(--xh-spinner-fg, var(--xh-_tone));
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='spinner'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    [data-scope='spinner'][data-part='root']::before {
+      border-style: dotted;
+      border-color: var(--xh-spinner-fg, currentColor);
+      animation: none;
+    }
+
+    [data-scope='spinner'][data-part='root'][data-tone]::before {
+      border-color: var(--xh-spinner-fg, var(--xh-_tone));
+    }
+  }
+
+  /*
+   * 高对比档：这一档把整层背景图丢掉，而渐隐弧与三点都画在背景上——屏幕上会一片空白。
+   * 两档一并退回描边画法：一圈系统轨道色加一段高亮的起始边，转的还是同一条动画。
+   */
+  @media (forced-colors: active) {
+    [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;
+      border-radius: var(--xh-spinner-radius, var(--xh-shape-circle));
+      background-image: none;
+    }
   }
 }

package/css/splitter.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 splitter 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='splitter'] {
@@ -33,9 +40,12 @@
     outline: none;
   }
 
-  /* 禁用的整体压暗只做一次，落在最外层：面板与分隔条各自再叠一层 opacity 会越叠越黑 */
+  /* 禁用的整体压暗只做一次，落在最外层：面板与分隔条各自再叠一层 opacity 会越叠越黑。
+     这一档压的是宿主塞进面板里的正文，不是控件自己的图形，所以地板比 --xh-state-disabled-opacity
+     高：那一档是 0.5，黑字白底压完只有 3.94:1，读不出字。压暗仍要表达「这块动不了」，
+     所以留一个槽让使用者按自己的配色调，而不是直接不压。 */
   [data-scope='splitter'][data-part='root'][data-disabled] {
-    opacity: 0.6;
+    opacity: var(--xh-splitter-disabled-opacity, 0.6);
   }
 
   /* 拖动期间整块不许选中文字：手在分隔条上来回蹭时会顺带把两侧的正文刷成高亮 */
@@ -101,8 +111,10 @@
     cursor: row-resize;
   }
 
+  /* 分隔条是一根线不是一块面：悬停不走面阶梯（300 只留给 pressed，§7.2 第 3 条），
+     按线取——与字段描边 rest → hover 同向加深一档 */
   [data-scope='splitter'][data-part='resize-trigger']:hover {
-    background: var(--xh-splitter-trigger-bg-hover, var(--xh-bg-subtle-active));
+    background: var(--xh-splitter-trigger-bg-hover, var(--xh-border-control));
   }
 
   /* 只有正被拖的那条带 data-dragging：多条分隔条时全高亮就分不出手在哪一条上 */
@@ -110,14 +122,15 @@
     background: var(--xh-splitter-trigger-bg-dragging, var(--xh-bg-brand));
   }
 
-  /* 焦点环往里画：分隔条只有几像素粗，往外画的那圈会被 root 的 overflow: hidden 切掉 */
-  [data-scope='splitter'][data-part='resize-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(var(--xh-ring-offset) * -1);
+  /* 常态灰面与公共品牌环已经过线；拖动态才改用品牌面配对前景，避免同色环。 */
+  [data-scope='splitter'][data-part='resize-trigger'][data-dragging]:focus-visible {
+    --xh-_ring-color: var(--xh-fg-on-brand);
   }
 
   /* 分隔条是 div、role=separator，原生 disabled 在它身上不生效，
-     禁用只表达成 aria-disabled 与 data-disabled，写 :disabled 永远不命中 */
+     禁用只表达成 aria-disabled 与 data-disabled，写 :disabled 永远不命中。
+     光标不交给公共层：上面两条按走向给的 col-resize / row-resize 特异性相同又排在后面，
+     公共层那条压不过它们 */
   [data-scope='splitter'][data-part='resize-trigger'][data-disabled] {
     background: var(--xh-splitter-trigger-bg-disabled, var(--xh-border-subtle));
     cursor: not-allowed;
@@ -129,4 +142,12 @@
   [data-scope='splitter'][data-part='resize-trigger'][hidden] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    /* 分隔条画的是一块纯底色，这一档里底色被统一换成 Canvas，那条线整根消失，
+       两侧面板就糊成一块。换成前景色画回来 */
+    [data-scope='splitter'][data-part='resize-trigger'] {
+      background: CanvasText;
+    }
+  }
 }

package/css/statistic.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 statistic 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='statistic'] {
@@ -10,6 +17,9 @@
     --xh-_statistic-value-size: var(--xh-text-heading-2-size);
     --xh-_statistic-affix-size: var(--xh-control-font-md);
     --xh-_statistic-row-gap: var(--xh-space-1);
+    /* 涨跌箭头与作者塞进来的图标同一把尺：跟着前后缀那一档字（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));
 
     /* 折行排布：标签独占一行，前缀、数值、后缀在下一行按基线对齐排在一起 */
     display: flex;
@@ -39,6 +49,7 @@
     --xh-_statistic-value-size: var(--xh-text-heading-1-size);
     --xh-_statistic-affix-size: var(--xh-control-font-lg);
     --xh-_statistic-row-gap: var(--xh-space-1_5);
+    --xh-_statistic-icon-size: var(--xh-glyph-size-md);
   }
 
   /* —— 各段 —— */
@@ -69,4 +80,48 @@
     font-weight: var(--xh-font-weight-regular);
     line-height: var(--xh-leading-tight);
   }
+
+  /* —— 涨跌 —— */
+  /* 与数值同一行，中间空开一档；比数（同比、环比）由作者写进来 */
+  [data-scope='statistic'][data-part='trend'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-statistic-trend-gap, var(--xh-space-0_5));
+    margin-inline-start: var(--xh-statistic-trend-offset, var(--xh-space-2));
+    color: var(--xh-statistic-trend-fg, var(--xh-_tone-fg, var(--xh-fg-muted)));
+    font-size: var(--xh-statistic-trend-font-size, var(--xh-_statistic-affix-size));
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--xh-font-weight-regular);
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 方向逐档换字形，箭头由皮肤画，示例里不必手打 */
+  [data-scope='statistic'][data-part='trend'][data-direction='up'] {
+    --xh-_statistic-trend-mark: var(--xh-glyph-mark-arrow-up);
+  }
+
+  [data-scope='statistic'][data-part='trend'][data-direction='down'] {
+    --xh-_statistic-trend-mark: var(--xh-glyph-mark-arrow-down);
+  }
+
+  [data-scope='statistic'][data-part='trend'][data-direction='flat'] {
+    --xh-_statistic-trend-mark: var(--xh-glyph-mark-minus);
+  }
+
+  [data-scope='statistic'][data-part='trend'][data-direction]::before {
+    content: '';
+    display: inline-block;
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-_statistic-trend-mark) center / contain no-repeat;
+    mask: var(--xh-_statistic-trend-mark) center / contain no-repeat;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='statistic'][data-part='trend'][hidden] {
+    display: none;
+  }
 }