@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/reset.css

@@ -0,0 +1,117 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 库自己的基线，只作用于带 data-scope 的库节点，不碰宿主页面的任何元素。
+ *
+ * 层序上 xihan.reset 在 xihan.components 之前，所以组件皮肤里的任何显式声明都盖得住这里。
+ *
+ * 本层全部选择器（剥去伪元素）特指度为 (0,0,0)：一律以 :where() 包住。无层产物
+ * index.unlayered.css 里没有层序可依，只按特指度竞争，而 Family Recipe 的根规则
+ * （[data-xh-action-control] 一类，(0,1,0)）在产物里排在本文件之前——本层若同为 (0,1,0)，
+ * 靠源序就把配方的三档字号压掉。压到 (0,0,0) 后，无层产物里任何皮肤与配方规则都压得住它；
+ * 代价是无层模式下宿主的元素选择器 (0,0,1) 也压得过，写在文档站「皮肤与样式分层」。
+ */
+@layer xihan.reset {
+  /* 尺寸一律含边框：皮肤里的宽高都是照可见盒子写的。 */
+  :where([data-scope]) {
+    box-sizing: border-box;
+  }
+
+  /* 伪元素自身带 (0,0,1)，无法再低；:where() 只压掉宿主那一截。 */
+  :where([data-scope])::before,
+  :where([data-scope])::after {
+    box-sizing: border-box;
+  }
+
+  /*
+   * UA 样式会把表单控件的字体锁成系统默认，不跟随页面。
+   * 这几个元素是 UA 唯一强制字体的地方，标题一类不在其中，故不做全局 font: inherit。
+   */
+  :where([data-scope]):where(button, input, optgroup, select, textarea) {
+    font: inherit;
+    letter-spacing: inherit;
+  }
+
+  /*
+   * 浮层定位层的生命周期契约：落位才露。
+   *
+   * 坐标依赖浮层自己的尺寸，尺寸要等元素进 DOM 参与排版才量得到，所以浮层一定先渲染、
+   * 再量、再定位——展开的那几帧坐标还是兜底的 0。默认藏着，连接层算出坐标后打
+   * data-positioned 才显示，忘了接线的新浮层只会不显示，不会先在视口左上角闪一帧。
+   * 用 visibility 而不是 display：display:none 会让浮层退出排版，引擎量不到它的尺寸。
+   * 锚点被滚出可视区时引擎置 hidden，各皮肤另有一条 [data-hidden] 压回去。
+   */
+  :where([data-scope][data-part='positioner']) {
+    visibility: hidden;
+  }
+
+  :where([data-scope][data-part='positioner'][data-positioned]) {
+    visibility: visible;
+  }
+
+  /*
+   * 库内原生滚动面与作者容器共用的细条。
+   *
+   * 两档滚动面里的「原生细条」档：页内结构容器（Table、Tree、Virtualizer viewport、
+   * Dialog / Drawer body、Log 视口一类）不接自绘条，靠这里把原生条统一成 thin + 令牌色阶。
+   * 三个入口：库节点（[data-scope][data-part]）、作者自建滚动容器与文档示例（[data-xh-scroll]）、
+   * Typography prose 里的 <pre>——它是库内唯一不带 data-part 的滚动面，作者只写 <pre> 不写角色。
+   * 皮肤不得再手写 scrollbar-width / scrollbar-color（stylelint 判红），要藏条写 none。
+   * 这里不写 scrollbar-gutter：auto 是初始值，stable 只给内容高度会变的容器由皮肤显式写。
+   * ::-webkit-scrollbar-thumb 的圆角取 pill：原生滑块与自绘 scrollbar:thumb 同为一维对象，
+   * 不再按厚度折半凑半圆，三档厚度都是同一身份。
+   *
+   * 令牌住在 xihan.tokens 层、排在本层之后，但自定义属性的求值不受层序影响：
+   * var() 在计算值阶段沿元素树取值，层序只裁决同一属性的两条声明谁赢。
+   * [data-xh-scrollbar] 的 scrollbar-width: none 是 (0,1,0)，有层与无层两种产物里都压得住本条；
+   * ::-webkit-scrollbar 伪元素自带 (0,0,1)，ScrollArea 那条 display: none 同样压得住。
+   */
+  :where([data-scope][data-part], [data-xh-scroll], .xh-scope-typography[data-part='prose'] pre) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--xh-fg-scrollbar-thumb) var(--xh-bg-scrollbar-track);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], .xh-scope-typography[data-part='prose'] pre)::-webkit-scrollbar {
+    width: var(--xh-scrollbar-thickness-md);
+    height: var(--xh-scrollbar-thickness-md);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], .xh-scope-typography[data-part='prose'] pre)::-webkit-scrollbar-track {
+    background: var(--xh-bg-scrollbar-track);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], .xh-scope-typography[data-part='prose'] pre)::-webkit-scrollbar-thumb {
+    border-radius: var(--xh-shape-pill);
+    background: var(--xh-fg-scrollbar-thumb);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], .xh-scope-typography[data-part='prose'] pre)::-webkit-scrollbar-thumb:hover {
+    background: var(--xh-fg-scrollbar-thumb-hover);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], .xh-scope-typography[data-part='prose'] pre)::-webkit-scrollbar-thumb:active {
+    background: var(--xh-fg-scrollbar-thumb-active);
+  }
+
+  /*
+   * 选区高亮的底与字。不写这条时用的是 UA 的系统高亮色（多数是系统蓝底白字）：
+   * 它不跟主题走，深色档下这块蓝会横在面板上，选中的文字反而比没选中时更难认。
+   *
+   * 后代那条不是冗余。高亮样式虽然会沿元素树往下继承，但「直接命中该元素的声明」
+   * 永远压过继承来的值：宿主页面自己写一条通配的 ::selection，它直接命中我们子树里
+   * 的每一个后代元素——只写第一条时，库节点自己的裸文本是我们的色，里面每个 <span>
+   * 却回退成宿主的色，一段文字选出两种底。两条一起写，整棵子树才是同一个色。
+   * 两条都以 [data-scope] 起手，着色止于库子树，宿主页面自己的选区不受影响。
+   *
+   * 只写这两个属性：高亮伪元素能吃的属性极窄，box-shadow / border 一类多数引擎
+   * 直接丢弃，不报错也不生效，写了只会让人以为已经处理过。
+   */
+  :where([data-scope])::selection,
+  :where([data-scope]) *::selection {
+    background: var(--xh-bg-brand-subtle);
+    color: var(--xh-fg-default);
+  }
+}

package/dist/css/resizable.css

@@ -0,0 +1,242 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 resizable 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-resizable {
+    --xh-resizable-skin: 1;
+  }
+
+  /* 分工：**尺寸与位移**由连接层每帧写进内联样式（inline-size / block-size / left / top）。
+     这份皮肤一条都不碰那四个——内联优先级更高，写了不但是死声明，
+     还会在拖动的每一帧跟连接层抢位置。皮肤只管定位上下文、把手落位与状态表现。 */
+
+  /* 定位上下文，八向可调靠它才成立：
+     推西边与北边时容器的起点会动，那段位移写成 left / top。relative 的 left / top
+     是视觉位移、元素仍占原位，因此对边钉得住。改成 static 会让这两个方向只变尺寸不移位。 */
+  .xh-scope-resizable[data-part='root'] {
+    position: relative;
+    /* 把层序关在容器里：把手的 1 / 2 只跟彼此比，不跟外面的层号打架 */
+    isolation: isolate;
+    box-sizing: border-box;
+  }
+
+  /* 调整期间关掉选中：把手一按就会把容器里的文字刷成选中态 */
+  .xh-scope-resizable[data-part='root'][data-resizing] {
+    user-select: none;
+  }
+
+  /* 这里的 data-disabled 关掉的是「能不能调尺寸」，容器里作者的内容照常可用：
+     光标交回给作者，不摆共享层那个「不可用」的样子 */
+  .xh-scope-resizable[data-part='root'][data-disabled] {
+    cursor: inherit;
+  }
+
+  .xh-scope-resizable[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 把手命中区留在容器内部并覆盖对应边；视觉指示条贴住容器边框，由伪元素绘制。 */
+  .xh-scope-resizable[data-part='handle'] {
+    --xh-_resizable-indicator-color: var(
+      --xh-resizable-handle-bg,
+      color-mix(in oklab, var(--xh-fg-default) 18%, transparent)
+    );
+
+    position: absolute;
+    z-index: 1;
+    display: block;
+    background: transparent;
+    touch-action: none;
+  }
+
+  .xh-scope-resizable[data-part='handle']::after {
+    content: '';
+    position: absolute;
+    border-radius: var(--xh-resizable-handle-radius, var(--xh-shape-pill));
+    background: var(--xh-_resizable-indicator-color);
+    pointer-events: none;
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-resizable[data-part='handle']:hover {
+    --xh-_resizable-indicator-color: var(
+      --xh-resizable-handle-bg-hover,
+      color-mix(in oklab, var(--xh-fg-default) 32%, transparent)
+    );
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-resizing] {
+    --xh-_resizable-indicator-color: var(--xh-resizable-handle-bg-active, var(--xh-bg-brand));
+  }
+
+  .xh-scope-resizable[data-part='handle']:focus-visible {
+    --xh-_resizable-indicator-color: var(--xh-ring-focus);
+
+    outline: none;
+  }
+
+  .xh-scope-resizable[data-part='handle'][hidden] {
+    display: none;
+  }
+
+  /* 四条边：各占一整条，厚度是可抓的余量 */
+  .xh-scope-resizable[data-part='handle'][data-edge='n'],
+  .xh-scope-resizable[data-part='handle'][data-edge='s'] {
+    inset-inline: var(--xh-resizable-grip, var(--xh-space-2));
+    block-size: var(--xh-resizable-grip, var(--xh-space-2));
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='e'],
+  .xh-scope-resizable[data-part='handle'][data-edge='w'] {
+    inset-block: var(--xh-resizable-grip, var(--xh-space-2));
+    inline-size: var(--xh-resizable-grip, var(--xh-space-2));
+  }
+
+  /* 落位用逻辑属性：e 说的是行尾侧，从右往左排版时它就该落在屏幕左边——
+     机器那边也是把逻辑边翻成物理边再算几何的，两处同源 */
+  .xh-scope-resizable[data-part='handle'][data-edge='n'] {
+    inset-block-start: 0;
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='s'] {
+    inset-block-end: 0;
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='e'] {
+    inset-inline-end: 0;
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='w'] {
+    inset-inline-start: 0;
+  }
+
+  .xh-scope-resizable[data-part='handle']:is([data-edge='n'], [data-edge='s'])::after {
+    inset-inline-start: 50%;
+    inline-size: var(--xh-resizable-indicator-length, var(--xh-space-8));
+    block-size: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    translate: -50% 0;
+  }
+
+  /* 起点是逻辑属性、平移是物理通道：rtl 下行内分量掉头，指示条才落回把手正中 */
+  .xh-scope-resizable[data-part='handle']:is([data-edge='n'], [data-edge='s']):dir(rtl)::after {
+    translate: 50% 0;
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='n']::after {
+    inset-block-start: var(--xh-resizable-indicator-inset, 0);
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='s']::after {
+    inset-block-end: var(--xh-resizable-indicator-inset, 0);
+  }
+
+  .xh-scope-resizable[data-part='handle']:is([data-edge='e'], [data-edge='w'])::after {
+    inset-block-start: 50%;
+    inline-size: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    block-size: var(--xh-resizable-indicator-length, var(--xh-space-8));
+    translate: 0 -50%;
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='e']::after {
+    inset-inline-end: var(--xh-resizable-indicator-inset, 0);
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='w']::after {
+    inset-inline-start: var(--xh-resizable-indicator-inset, 0);
+  }
+
+  /* 四个角：压在两条边的交点上，盖过相邻两条边（它们同时动两轴） */
+  .xh-scope-resizable[data-part='handle'][data-edge='ne'],
+  .xh-scope-resizable[data-part='handle'][data-edge='nw'],
+  .xh-scope-resizable[data-part='handle'][data-edge='se'],
+  .xh-scope-resizable[data-part='handle'][data-edge='sw'] {
+    z-index: 2;
+    inline-size: var(--xh-resizable-corner, var(--xh-space-4));
+    block-size: var(--xh-resizable-corner, var(--xh-space-4));
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='nw'] {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    border-start-start-radius: inherit;
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='ne'] {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    border-start-end-radius: inherit;
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='sw'] {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    border-end-start-radius: inherit;
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='se'] {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    border-end-end-radius: inherit;
+  }
+
+  .xh-scope-resizable[data-part='handle']:is(
+    [data-edge='ne'],
+    [data-edge='nw'],
+    [data-edge='se'],
+    [data-edge='sw']
+  )::after {
+    inline-size: 50%;
+    block-size: 50%;
+    border: 0 solid var(--xh-_resizable-indicator-color);
+    border-radius: inherit;
+    background: transparent;
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='nw']::after {
+    inset-block-start: var(--xh-resizable-corner-inset, 0);
+    inset-inline-start: var(--xh-resizable-corner-inset, 0);
+    border-block-start-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    border-inline-start-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='ne']::after {
+    inset-block-start: var(--xh-resizable-corner-inset, 0);
+    inset-inline-end: var(--xh-resizable-corner-inset, 0);
+    border-block-start-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    border-inline-end-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='sw']::after {
+    inset-block-end: var(--xh-resizable-corner-inset, 0);
+    inset-inline-start: var(--xh-resizable-corner-inset, 0);
+    border-block-end-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    border-inline-start-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  .xh-scope-resizable[data-part='handle'][data-edge='se']::after {
+    inset-block-end: var(--xh-resizable-corner-inset, 0);
+    inset-inline-end: var(--xh-resizable-corner-inset, 0);
+    border-block-end-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    border-inline-end-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  /* 没开放的边不显示把手：留着一个抓不动的区域只会让人反复去试 */
+  .xh-scope-resizable[data-part='handle'][data-disabled] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 把手那两档全是底色画出来的，这一档里底色被统一换成系统底色，两档与静息塌成一个样子。
+       改由描边把正在拖的那一条画出来 */
+    .xh-scope-resizable[data-part='handle'][data-resizing] {
+      --xh-_resizable-indicator-color: Highlight;
+    }
+  }
+}

package/dist/css/sankey-chart.css

@@ -0,0 +1,174 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 sankey chart 样式。 */
+
+/* 标题、视口、图例、提示框、空态与焦点环走 Chart 家族配方。本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-sankey-chart {
+    --xh-sankey-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何。
+     节点的厚度借柱的最大厚度那一格传进去 */
+  .xh-scope-sankey-chart[data-part='root'] {
+    --xh-_chart-metric-bar-max: var(--xh-sankey-chart-node-width, var(--xh-space-3));
+    --xh-_chart-metric-gap: var(--xh-chart-gap);
+    --xh-_chart-metric-line-width: var(--xh-chart-line-width);
+    --xh-_chart-metric-point-size: var(--xh-chart-point-size);
+    --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-radius: var(--xh-sankey-chart-node-radius, var(--xh-shape-inset));
+    --xh-_chart-metric-font-size: var(--xh-text-caption-size);
+    --xh-_chart-metric-leading: var(--xh-leading-tight);
+    --xh-_chart-gap: var(--xh-sankey-chart-gap, var(--xh-space-3));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、图例、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  .xh-scope-sankey-chart[data-part='viewport'] {
+    --xh-_chart-height: var(--xh-sankey-chart-height, var(--xh-chart-height));
+  }
+
+  .xh-scope-sankey-chart[data-part='legend'] {
+    --xh-_chart-legend-gap: var(--xh-sankey-chart-legend-gap, var(--xh-space-1));
+  }
+
+  .xh-scope-sankey-chart[data-part='legend-swatch'] {
+    --xh-_chart-legend-swatch-radius: var(--xh-sankey-chart-legend-swatch-radius, var(--xh-shape-inset));
+  }
+
+  .xh-scope-sankey-chart[data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-sankey-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-sankey-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-sankey-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-sankey-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-sankey-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  .xh-scope-sankey-chart[data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-sankey-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  .xh-scope-sankey-chart[data-part='tooltip-swatch'] {
+    --xh-_chart-tooltip-swatch-radius: var(--xh-sankey-chart-tooltip-swatch-radius, var(--xh-shape-inset));
+  }
+
+  .xh-scope-sankey-chart[data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-sankey-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 色槽：分组由色槽承担，作者可以在节点上覆盖 --xh-sankey-chart-series-color ——
+     节点、取了颜色的流带、渐变的色标、图例项与提示框的行都带着色槽，各自从这里取系列色 */
+  .xh-scope-sankey-chart[data-xh-chart-slot='1'] {
+    --xh-_chart-series: var(--xh-sankey-chart-series-color, var(--xh-chart-categorical-1));
+  }
+
+  .xh-scope-sankey-chart[data-xh-chart-slot='2'] {
+    --xh-_chart-series: var(--xh-sankey-chart-series-color, var(--xh-chart-categorical-2));
+  }
+
+  .xh-scope-sankey-chart[data-xh-chart-slot='3'] {
+    --xh-_chart-series: var(--xh-sankey-chart-series-color, var(--xh-chart-categorical-3));
+  }
+
+  .xh-scope-sankey-chart[data-xh-chart-slot='4'] {
+    --xh-_chart-series: var(--xh-sankey-chart-series-color, var(--xh-chart-categorical-4));
+  }
+
+  .xh-scope-sankey-chart[data-xh-chart-slot='5'] {
+    --xh-_chart-series: var(--xh-sankey-chart-series-color, var(--xh-chart-categorical-5));
+  }
+
+  .xh-scope-sankey-chart[data-xh-chart-slot='6'] {
+    --xh-_chart-series: var(--xh-sankey-chart-series-color, var(--xh-chart-categorical-6));
+  }
+
+  .xh-scope-sankey-chart[data-xh-chart-slot='7'] {
+    --xh-_chart-series: var(--xh-sankey-chart-series-color, var(--xh-chart-categorical-7));
+  }
+
+  .xh-scope-sankey-chart[data-xh-chart-slot='8'] {
+    --xh-_chart-series: var(--xh-sankey-chart-series-color, var(--xh-chart-categorical-8));
+  }
+
+  /* —— 流带：缺省是半透明的中性色，交叠处叠深、读得出汇合；取了颜色或渐变时换成对应的面。
+     指着一个节点或一条流带时相连的流带换色，其余淡出 —— */
+  .xh-scope-sankey-chart[data-part='link'] {
+    --xh-_sankey-link: var(--xh-sankey-chart-link-color, var(--xh-chart-categorical-other));
+
+    fill: var(--xh-_sankey-link);
+    fill-opacity: var(--xh-sankey-chart-link-alpha, var(--xh-chart-link-alpha));
+    stroke: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-sankey-chart[data-part='link'][data-xh-chart-slot] {
+    --xh-_sankey-link: var(--xh-_chart-series);
+  }
+
+  .xh-scope-sankey-chart[data-part='link'][data-gradient] {
+    --xh-_sankey-link: var(--xh-_sankey-gradient);
+  }
+
+  .xh-scope-sankey-chart[data-part='gradient-stop'] {
+    stop-color: var(--xh-_chart-series);
+  }
+
+  /* —— 节点：取分组的系列色，压在流带两端上 —— */
+  .xh-scope-sankey-chart[data-part='node'] {
+    fill: var(--xh-_chart-series);
+    stroke: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-sankey-chart[data-part='link'][data-dimmed],
+  .xh-scope-sankey-chart[data-part='node'][data-dimmed],
+  .xh-scope-sankey-chart[data-part='node-label'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 节点名写在列间的空当里，底下可能压着流带：正文色，描一圈承载面色，交叠处也读得清。名字不接指针，命中归节点 */
+  .xh-scope-sankey-chart[data-part='node-label'] {
+    fill: var(--xh-fg-default);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-stroke-thick);
+    stroke-linejoin: round;
+    paint-order: stroke;
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 强制色：节点改成系统色的面与描边，流带取次级系统色、被指着的取高亮色，名字取正文色；
+     焦点环、图例与色标在配方里 */
+  @media (forced-colors: active) {
+    .xh-scope-sankey-chart[data-part='node'] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    .xh-scope-sankey-chart[data-part='link'],
+    .xh-scope-sankey-chart[data-part='link'][data-xh-chart-slot],
+    .xh-scope-sankey-chart[data-part='link'][data-gradient] {
+      --xh-_sankey-link: GrayText;
+    }
+
+    .xh-scope-sankey-chart[data-part='link'][data-highlighted] {
+      --xh-_sankey-link: Highlight;
+    }
+
+    .xh-scope-sankey-chart[data-part='node-label'] {
+      fill: CanvasText;
+      stroke: Canvas;
+    }
+  }
+}