@xihan-ui/styles 2.1.0 → 3.0.0

package/css/heatmap.css

@@ -5,6 +5,9 @@
 
 /* 定义 heatmap 样式。 */
 
+/* 详情条与对照条走 Chart 家族配方：与其余图表的提示框、图例同一副外观。本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/chart.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='heatmap'] {
@@ -34,8 +37,9 @@
        改写这个槽为一个看得见的颜色（`var(--xh-heatmap-label-fg, var(--xh-fg-subtle))`）即七行全画。
        周首日是星期一时留下的是二 / 四 / 六，是星期日时留下的是一 / 三 / 五 */
     --xh-_heatmap-week-day-skip: var(--xh-heatmap-week-day-skip, transparent);
-    /* 色阶的两端：0 档的空格底与满档的实心底。没写 data-tone 也没写 data-palette 时就是这里的取值 */
-    --xh-_heatmap-empty: var(--xh-heatmap-empty, var(--xh-bg-subtle));
+    /* 色阶的两端：0 档的空格底与满档的实心底。没写 data-tone 也没写 data-palette 时就是这里的取值。
+       空格底取淡底的不透明档：中间各档由两端按比例兑出，一端半透明，整条色阶都会跟着半透明、偏色 */
+    --xh-_heatmap-empty: var(--xh-heatmap-empty, var(--xh-bg-subtle-opaque));
     --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-bg-brand));
     /* 钉住的行首那一列自带的底色：格子从它下面滚过去时不能透出来。
        整块摆在别的底色上（卡片、分区）时改写 --xh-heatmap-bg，否则那一列会是一块补丁 */
@@ -68,36 +72,65 @@
   }
 
   /* —— 色板 —— */
-  /* 直接按颜色点名，定的是满档那一端的实心底；0 档的空格底与中间各档的兑法一概不动。
-     六条规则与上面那条语气规则同特指度，排在它之后：两个都写时色板赢——
+  /* 直接按颜色点名，定的是满档那一端的实心底：取基础色板里同名色相的 600 档；0 档的空格底与中间各档的兑法一概不动。
+     基础色板同一档跨色相同一明度，十二个色相摊出来的五档深浅一致，换色板不换可读性。
+     这几条规则与上面那条语气规则同特指度，排在它之后：两个都写时色板赢——
      色板指名了一个具体颜色，语气只是推得出一个颜色，指名的那个更具体。
      取值一律逐值写死原语、不经 --xh-_tone：那一族槽位是语气层的派生结果，
      色板借道它就会连带把语气的悬停 / 淡底 / 前景一起绑进来，也会被祖先的 data-tone 染色。
-     色板拼错取值时六条都不命中，落回上面两条，与没写一样 */
+     色板拼错取值时一条都不命中，落回上面两条，与没写一样 */
+  [data-scope='heatmap'][data-part='root'][data-palette='red'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-red-600));
+  }
+
+  [data-scope='heatmap'][data-part='root'][data-palette='orange'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-orange-600));
+  }
+
+  [data-scope='heatmap'][data-part='root'][data-palette='amber'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-amber-600));
+  }
+
+  [data-scope='heatmap'][data-part='root'][data-palette='yellow'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-yellow-600));
+  }
+
+  [data-scope='heatmap'][data-part='root'][data-palette='lime'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-lime-600));
+  }
+
   [data-scope='heatmap'][data-part='root'][data-palette='green'] {
-    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-success-600));
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-green-600));
+  }
+
+  [data-scope='heatmap'][data-part='root'][data-palette='teal'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-teal-600));
+  }
+
+  [data-scope='heatmap'][data-part='root'][data-palette='cyan'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-cyan-600));
   }
 
   [data-scope='heatmap'][data-part='root'][data-palette='blue'] {
-    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-info-600));
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-blue-600));
   }
 
-  [data-scope='heatmap'][data-part='root'][data-palette='orange'] {
-    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-warning-600));
+  [data-scope='heatmap'][data-part='root'][data-palette='indigo'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-indigo-600));
   }
 
   [data-scope='heatmap'][data-part='root'][data-palette='purple'] {
     --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-purple-600));
   }
 
-  [data-scope='heatmap'][data-part='root'][data-palette='red'] {
-    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-danger-600));
+  [data-scope='heatmap'][data-part='root'][data-palette='pink'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-pink-600));
   }
 
-  /* 灰是唯一按主题换档的一族：五个彩色族的 600 档明度在 0.577–0.705，
+  /* 灰是唯一按主题换档的一族：十二个色相的 600 档明度都是 0.546，
      深色态的空格底（neutral-800，明度 0.269）离得够远；中性 600 档只有 0.439，
      五档摊下来每档只差 0.0425、相邻两档对比度 1.16–1.20，等于看不出分档。
-     深色态改取 neutral-450（明度 0.65），步长回到 0.095、相邻两档 1.42–1.50，与彩色族齐平。
+     深色态改取 neutral-450（明度 0.65），步长回到 0.095、相邻两档 1.42–1.50，不输彩色族。
      不取更亮的 neutral-400：高对比档的 border-default 正是那一档，满档格子的描边会与底色同色。
      data-theme 写在自己身上还是写在祖先上都算，两种用法都成立 */
   [data-scope='heatmap'][data-part='root'][data-palette='gray'] {
@@ -108,6 +141,23 @@
     --xh-_heatmap-ink: var(--xh-heatmap-ink, var(--xh-color-neutral-450));
   }
 
+  /* —— 发散色阶 ——
+     以中点为界两侧各自加深：中点那一格是数据色的中性中点，低于中点兑向负向色、高于中点兑向正向色。
+     三色都取数据色的发散三色，语气与色板在这一档不生效。中点是没有色相的中性色，兑色走 oklab
+     （格子的基础规则已是 in oklab），oklch 会绕着色相环走出一段杂色 */
+  [data-scope='heatmap'][data-part='root'][data-scale='diverging'] {
+    --xh-_heatmap-empty: var(--xh-heatmap-diverging-center, var(--xh-chart-diverging-center));
+  }
+
+  /* 两侧的墨色写在格子上而不是根上：根上的语气与色板规则（含暗色的中性色板）不论权重多高都盖不到这里 */
+  [data-scope='heatmap'][data-part='root'][data-scale='diverging'] :is([data-scope='heatmap'][data-part='cell'], [data-scope='heatmap'][data-part='legend-item'])[data-polarity='negative'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-diverging-negative, var(--xh-chart-diverging-negative));
+  }
+
+  [data-scope='heatmap'][data-part='root'][data-scale='diverging'] :is([data-scope='heatmap'][data-part='cell'], [data-scope='heatmap'][data-part='legend-item'])[data-polarity='positive'] {
+    --xh-_heatmap-ink: var(--xh-heatmap-diverging-positive, var(--xh-chart-diverging-positive));
+  }
+
   /* —— 尺寸 —— */
   /* 缺省的 md 档写在上面的基础规则里 */
   [data-scope='heatmap'][data-part='root'][data-size='sm'] {
@@ -209,7 +259,28 @@
     /* 空格与浅档在浅色底上几乎没有边界，描一圈极淡的线把方格勾出来。
        这一档不能取 border-subtle：它与空格底色 bg-subtle 是同一个原色，描了等于没描 */
     box-shadow: inset 0 0 0 var(--xh-stroke-thin) var(--xh-heatmap-cell-border, var(--xh-border-default));
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 详情条正在说的那一格（指针停着或焦点落着）描一圈正文色的粗线：扫过一片格子时看得出条说的是哪一格 */
+  [data-scope='heatmap'][data-part='cell'][data-highlighted] {
+    box-shadow: inset 0 0 0 var(--xh-stroke-thick) var(--xh-heatmap-cell-border-highlighted, var(--xh-fg-default));
+  }
+
+  /* 首次出现：有颜色的格子从空格底色填到自己的档位色，按日期（矩阵按列）的先后扫过去。
+     连接层写入这一格在扫描里的位置，乘上扫描时长就是它开始填色的延迟；
+     减弱动效下扫描时长归零，各格一起淡变填色 */
+  [data-scope='heatmap'][data-part='cell'][data-drawing] {
+    animation: xh-heatmap-fill var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) both;
+    animation-delay: calc(var(--xh-motion-duration-reveal) * var(--xh-_chart-reveal-at));
+  }
+
+  /* 数据变化后的换色：各格从旧档的颜色过渡到新档。只在连接层标出的这一段过渡，
+     主题与语气的换色照常一步到位，不被数据的时长拖慢 */
+  [data-scope='heatmap'][data-part='root'][data-animating] [data-scope='heatmap'][data-part='cell'] {
+    transition:
+      background-color var(--xh-motion-duration-morph) var(--xh-motion-ease-continuous),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 错列打在本行第一个格子上：打在行上会连行首的星期名一起往后推，
@@ -320,22 +391,21 @@
     /* 至少与格子同宽，一两个字的详情也不会瘦成一条 */
     min-inline-size: var(--xh-_heatmap-tip-w);
     max-inline-size: var(--xh-heatmap-tooltip-max-w, var(--xh-overlay-max-w));
-    padding-block: var(--xh-heatmap-tooltip-py, var(--xh-space-1));
-    padding-inline: var(--xh-heatmap-tooltip-px, var(--xh-space-2));
-    border-radius: var(--xh-heatmap-tooltip-radius, var(--xh-shape-control));
-    /* 与 Tooltip 同一副反白气泡：任何浮层都得有一圈非透明描边，描边从字色里兑两成，
-       深浅主题与语气换色时跟着字色走；影走 frosted 紧凑档，与 Tooltip 的 content 同深 */
-    border: var(--xh-stroke-thin) solid var(--xh-heatmap-tooltip-border, color-mix(in oklab, var(--xh-heatmap-tooltip-fg, var(--xh-bg-surface)) 20%, transparent));
-    background: var(--xh-heatmap-tooltip-bg, var(--xh-fg-default));
-    color: var(--xh-heatmap-tooltip-fg, var(--xh-bg-surface));
-    /* 字号与 Tooltip 缺省档同一把尺（次级标注档 13px） */
-    font-size: var(--xh-heatmap-tooltip-font-size, var(--xh-control-caption-md));
+    /* 配方按物理左缘与平移落位，详情条自己按格子的逻辑缘落位：把配方那两处让开 */
+    translate: none;
+    /* 材质、圆角、内边距与影走配方：frosted、overlay 圆角、正文排版，不反白 */
+    --xh-_chart-tip-x: auto;
+    --xh-_chart-tooltip-gap: var(--xh-space-1);
+    --xh-_chart-tooltip-py: var(--xh-heatmap-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-heatmap-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-heatmap-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-heatmap-tooltip-shadow, var(--xh-material-frosted-shadow));
+    /* 作者覆盖的底、字与描边压在配方的材质上：只换颜色那一层，顶部的边界光与模糊照旧 */
+    border-color: var(--xh-heatmap-tooltip-border, var(--xh-material-frosted-border));
+    background-color: var(--xh-heatmap-tooltip-bg, var(--xh-material-frosted-bg));
+    color: var(--xh-heatmap-tooltip-fg, var(--xh-material-frosted-fg));
+    font-size: var(--xh-heatmap-tooltip-font-size, var(--xh-text-body-size));
     line-height: var(--xh-leading-normal);
-    white-space: nowrap;
-    box-shadow: var(--xh-heatmap-tooltip-shadow, var(--xh-material-frosted-compact-shadow));
-    /* 详情条不接指针：压在格子上时指针要能穿过去，否则一进条里就算离开了格子，
-       详情自己把自己收起来，来回闪 */
-    pointer-events: none;
   }
 
   /* 从格子的末缘往回长：条比一格宽得多，格子后面的地方比前面少时往后长会伸出滚动容器被裁掉，
@@ -360,10 +430,13 @@
     inset-block-end: calc(100% - var(--xh-_heatmap-tip-y) + var(--xh-_heatmap-gap));
   }
 
+  /* 对照条的排布走配方，间距由配方的私有槽给出；色阶是一条连续的尺，不折行：
+     「少」、一排色块、「多」断开就读不出哪端表示多 */
   [data-scope='heatmap'][data-part='legend'] {
-    display: flex;
+    --xh-_chart-legend-gap: var(--xh-heatmap-legend-gap, var(--xh-_heatmap-gap));
+
+    flex-wrap: nowrap;
     align-items: center;
-    gap: var(--xh-heatmap-legend-gap, var(--xh-_heatmap-gap));
     color: var(--xh-heatmap-label-fg, var(--xh-fg-subtle));
   }
 
@@ -390,11 +463,6 @@
     box-shadow: inset 0 0 0 var(--xh-stroke-thin) var(--xh-heatmap-cell-border, var(--xh-border-default));
   }
 
-  /* 详情条的收起态：没有哪一格是活的时候整条藏起来 */
-  [data-scope='heatmap'][data-part='tooltip'][data-state='hidden'] {
-    display: none;
-  }
-
   /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
      不补的话作者给节点加 hidden 后它照样显示。
      格子没有声明 display，UA 那条兜得住，不必列在这里 */
@@ -451,6 +519,12 @@
     [data-scope='heatmap'][data-part='legend-item'][data-level='3'] {
       --xh-_heatmap-ink-ring: calc(var(--xh-_heatmap-cell-size) * 0.4);
     }
+
+    /* 发散色阶两侧同档的环一样粗，纸上分不出正负：负向一侧改用点线，点线在任何粗细下都认得出 */
+    [data-scope='heatmap'][data-part='cell'][data-polarity='negative'],
+    [data-scope='heatmap'][data-part='legend-item'][data-polarity='negative'] {
+      border-style: dotted;
+    }
   }
 
   /*
@@ -467,3 +541,12 @@
     }
   }
 }
+
+@layer xihan.motion {
+  /* 只写起点：终点是格子自己的档位色，作者改写 --xh-heatmap-cell-bg 时同样成立 */
+  @keyframes xh-heatmap-fill {
+    from {
+      background-color: var(--xh-_heatmap-empty);
+    }
+  }
+}

package/css/hierarchy-chart.css

@@ -0,0 +1,298 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 hierarchy chart 样式。 */
+
+/* 标题、图例容器、视口、提示框、空态、焦点环与顺序色阶走 Chart 家族配方；下钻路径的项归 Collection Item 导航当前（nav 语境），
+   面、字色、字重与按压时间线由家族配方给，本皮肤只映射桥接槽。两份都 @import，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+@import '../family/collection-item.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='hierarchy-chart'] {
+    --xh-hierarchy-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  [data-scope='hierarchy-chart'][data-part='root'] {
+    --xh-_chart-metric-bar-max: var(--xh-chart-bar-max);
+    --xh-_chart-metric-gap: var(--xh-hierarchy-chart-node-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-hierarchy-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-hierarchy-chart-gap, var(--xh-space-3));
+    /* 路径上的尖角与作者塞进来的图标跟着路径的字号档走 */
+    --xh-icon-size: var(--xh-hierarchy-chart-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  [data-scope='hierarchy-chart'][data-part='viewport'] {
+    --xh-_chart-height: var(--xh-hierarchy-chart-height, var(--xh-chart-height));
+  }
+
+  [data-scope='hierarchy-chart'][data-part='legend'] {
+    --xh-_chart-legend-gap: var(--xh-hierarchy-chart-legend-gap, var(--xh-space-4));
+  }
+
+  [data-scope='hierarchy-chart'][data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-hierarchy-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-hierarchy-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-hierarchy-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-hierarchy-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-hierarchy-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  [data-scope='hierarchy-chart'][data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-hierarchy-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  [data-scope='hierarchy-chart'][data-part='tooltip-swatch'] {
+    --xh-_chart-tooltip-swatch-radius: var(--xh-hierarchy-chart-tooltip-swatch-radius, var(--xh-shape-inset));
+  }
+
+  [data-scope='hierarchy-chart'][data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-hierarchy-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 下钻路径：一行按钮，项与项之间画一个向前的尖角。尖角画在项的外面、不接指针，按钮的命中区只是自己的名字 —— */
+  [data-scope='hierarchy-chart'][data-part='path'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: var(--xh-hierarchy-chart-path-column-gap, calc(var(--xh-icon-size, var(--xh-glyph-size-sm)) + var(--xh-space-1) * 2));
+    row-gap: var(--xh-hierarchy-chart-path-row-gap, var(--xh-space-1));
+    font-size: var(--xh-hierarchy-chart-path-font-size, var(--xh-control-font-sm));
+  }
+
+  [data-scope='hierarchy-chart'][data-part='path'][hidden] {
+    display: none;
+  }
+
+  /* 项的几何、字号与面全经家族桥接槽：静息 muted，悬停换面，当前的根由连接层投影 data-xh-collection-terminal，
+     走家族的 terminal 态（不响应悬停与按下）。本条 (0,2,0) 压过家族基础块 (0,1,0)，不能再写 color / background */
+  [data-scope='hierarchy-chart'][data-part='path-item'] {
+    --xh-collection-block-padding: var(--xh-space-0);
+    --xh-collection-inline-padding: var(--xh-hierarchy-chart-path-item-px, var(--xh-space-1));
+    --xh-collection-radius: var(--xh-hierarchy-chart-path-item-radius, var(--xh-shape-control));
+    --xh-collection-font-size: var(--xh-hierarchy-chart-path-font-size, var(--xh-control-font-sm));
+    --xh-collection-fg-rest: var(--xh-hierarchy-chart-path-fg, var(--xh-fg-muted));
+    --xh-collection-bg-hover: var(--xh-hierarchy-chart-path-item-bg-hover, var(--xh-bg-subtle));
+    --xh-collection-fg-hover: var(--xh-hierarchy-chart-path-item-fg-hover, var(--xh-fg-default));
+    --xh-collection-bg-pressed: var(--xh-hierarchy-chart-path-item-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-collection-fg-terminal: var(--xh-hierarchy-chart-path-item-fg-current, var(--xh-fg-default));
+    --xh-collection-font-weight-terminal: var(--xh-hierarchy-chart-path-item-font-weight-current, var(--xh-font-weight-medium));
+
+    /* 不裁溢出：尖角画在项的盒子外面。名字长时整条路径折行，不截断 */
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    border: none;
+    font-family: inherit;
+    line-height: var(--xh-leading-tight);
+    white-space: nowrap;
+  }
+
+  [data-scope='hierarchy-chart'][data-part='path-item'] + [data-scope='hierarchy-chart'][data-part='path-item']::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: calc(100% + var(--xh-space-1));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    margin-block: auto;
+    background-color: var(--xh-hierarchy-chart-path-separator-fg, var(--xh-fg-subtle));
+    -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
+    pointer-events: none;
+  }
+
+  [data-scope='hierarchy-chart'][data-part='path-item'][hidden] {
+    display: none;
+  }
+
+  /* 从右往左排版时「向前」在左边 */
+  [dir='rtl'] [data-scope='hierarchy-chart'][data-part='path-item']::before {
+    rotate: 180deg;
+  }
+
+  /* —— 色槽：第一层分支各取一个分类色，后代继承；作者可以在节点上覆盖 --xh-hierarchy-chart-series-color。
+     节点、名字与提示框的色标都带着色槽，各自从这里取系列色与配对的前景色 —— */
+  [data-scope='hierarchy-chart'][data-xh-chart-slot='1'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-1));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-1);
+  }
+
+  [data-scope='hierarchy-chart'][data-xh-chart-slot='2'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-2));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-2);
+  }
+
+  [data-scope='hierarchy-chart'][data-xh-chart-slot='3'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-3));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-3);
+  }
+
+  [data-scope='hierarchy-chart'][data-xh-chart-slot='4'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-4));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-4);
+  }
+
+  [data-scope='hierarchy-chart'][data-xh-chart-slot='5'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-5));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-5);
+  }
+
+  [data-scope='hierarchy-chart'][data-xh-chart-slot='6'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-6));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-6);
+  }
+
+  [data-scope='hierarchy-chart'][data-xh-chart-slot='7'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-7));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-7);
+  }
+
+  [data-scope='hierarchy-chart'][data-xh-chart-slot='8'] {
+    --xh-_chart-series: var(--xh-hierarchy-chart-series-color, var(--xh-chart-categorical-8));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-8);
+  }
+
+  /* —— 节点：第一层取满色，往下每层向承载面混色变浅；名字的前景随之换：满色上取配对的前景色，
+     浅色上取正文色。连接层写的层按当前的根数，下钻之后看得见的第一层照样是满色 —— */
+  [data-scope='hierarchy-chart'][data-part='node'],
+  [data-scope='hierarchy-chart'][data-part='node-label'],
+  [data-scope='hierarchy-chart'][data-part='group-header'] {
+    --xh-_hierarchy-mix: 100%;
+    --xh-_hierarchy-ink: var(--xh-_chart-on-series);
+  }
+
+  [data-scope='hierarchy-chart'][data-level='2'] {
+    --xh-_hierarchy-mix: 48%;
+    --xh-_hierarchy-ink: var(--xh-fg-default);
+  }
+
+  [data-scope='hierarchy-chart'][data-level='3'] {
+    --xh-_hierarchy-mix: 32%;
+    --xh-_hierarchy-ink: var(--xh-fg-default);
+  }
+
+  [data-scope='hierarchy-chart'][data-level='4'] {
+    --xh-_hierarchy-mix: 22%;
+    --xh-_hierarchy-ink: var(--xh-fg-default);
+  }
+
+  /* 相邻节点之间的间隙由几何留出，不画描边；指着一个节点时不在同一条祖孙链上的节点淡出，被指着的不位移 */
+  [data-scope='hierarchy-chart'][data-part='node'] {
+    --xh-_hierarchy-fill: color-mix(in oklab, var(--xh-_chart-series) var(--xh-_hierarchy-mix), var(--xh-chart-surface));
+
+    fill: var(--xh-_hierarchy-fill);
+    stroke: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 有子节点的节点点下去是下钻 */
+  [data-scope='hierarchy-chart'][data-part='node'][aria-expanded] {
+    cursor: pointer;
+  }
+
+  /* 按值着色：颜色由 Chart 家族配方按段号与段内百分比兑好放在私有槽里，不再按层变浅。色阶的起点贴着承载面、
+     终点远离承载面：浅的一段写正文色，深的一段写承载面色，亮暗主题下都读得清 */
+  [data-scope='hierarchy-chart'][data-part='node'][data-seg] {
+    fill: var(--xh-_chart-seq-fill);
+  }
+
+  [data-scope='hierarchy-chart'][data-seg='low'] {
+    --xh-_hierarchy-ink: var(--xh-fg-default);
+  }
+
+  [data-scope='hierarchy-chart'][data-seg='high'] {
+    --xh-_hierarchy-ink: var(--xh-chart-surface);
+  }
+
+  [data-scope='hierarchy-chart'][data-part='node'][data-dimmed],
+  [data-scope='hierarchy-chart'][data-part='node-label'][data-dimmed],
+  [data-scope='hierarchy-chart'][data-part='group-header'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 名字与分组标题压在节点的颜色上：前景随层与着色方式取；它们不接指针，命中归节点 */
+  [data-scope='hierarchy-chart'][data-part='node-label'],
+  [data-scope='hierarchy-chart'][data-part='group-header'] {
+    fill: var(--xh-_hierarchy-ink);
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='hierarchy-chart'][data-part='group-header'] {
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* 色阶图例：每层一条，名字、低端的值、渐变条、高端的值排成一行；值是标注字色、等宽数字 */
+  [data-scope='hierarchy-chart'][data-part='legend-scale'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-hierarchy-chart-legend-scale-gap, var(--xh-space-2));
+    color: var(--xh-fg-muted);
+    font-size: var(--xh-text-caption-size);
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-scope='hierarchy-chart'][data-part='legend-scale-name'] {
+    color: var(--xh-fg-default);
+    font-size: var(--xh-text-body-size);
+  }
+
+  [data-scope='hierarchy-chart'][data-part='legend-scale-bar'] {
+    inline-size: var(--xh-hierarchy-chart-legend-scale-width, var(--xh-chart-legend-scale-width));
+    block-size: var(--xh-space-2);
+    border-radius: var(--xh-hierarchy-chart-legend-scale-bar-radius, var(--xh-shape-inset));
+    /* 低端在行首：角度乘方向符号，rtl 下渐变从右往左 */
+    background: linear-gradient(calc(90deg * var(--xh-direction-sign)), var(--xh-_hierarchy-scale-from), var(--xh-_chart-seq-mid) 28.6%, var(--xh-_chart-seq-end));
+    /* 节点只用色阶上 0.3–1 这一段（最浅的一段压在承载面上看不见）：渐变按同一段画，起点即 0.3 处的颜色，
+       中点落在 (0.5 − 0.3) / 0.7 处 */
+    --xh-_hierarchy-scale-from: color-mix(in oklch, var(--xh-_chart-seq-mid) 60%, var(--xh-_chart-seq-start));
+  }
+
+  /* 强制色：节点改成系统色的面与描边，名字取正文色；路径的尖角取正文色；色阶只留轮廓；焦点环在配方里 */
+  @media (forced-colors: active) {
+    [data-scope='hierarchy-chart'][data-part='node'],
+    [data-scope='hierarchy-chart'][data-part='node'][data-seg] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    [data-scope='hierarchy-chart'][data-part='node-label'],
+    [data-scope='hierarchy-chart'][data-part='group-header'] {
+      fill: CanvasText;
+    }
+
+    [data-scope='hierarchy-chart'][data-part='path-item'] + [data-scope='hierarchy-chart'][data-part='path-item']::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    /* 色阶在系统色下画不出来：只留轮廓，两端的值照常可读 */
+    [data-scope='hierarchy-chart'][data-part='legend-scale-bar'] {
+      border: var(--xh-stroke-thin) solid CanvasText;
+      background: Canvas;
+    }
+  }
+
+  /* 色阶声明了 display：作者写 hidden 时照样收起 */
+  [data-scope='hierarchy-chart'][data-part='legend-scale'][hidden] {
+    display: none;
+  }
+}

package/css/hover-card.css

@@ -7,6 +7,7 @@
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -92,9 +93,37 @@
     --xh-_overlay-enter-left: 1;
   }
 
+  /* 交叉轴原点按对齐取：start / end 对齐时卡片与锚点在那一端齐平，缩放从那一端涨开，贴着短链接的卡片
+     才像是从链接里长出来；居中对齐留在中线。上下两侧的 start / end 是行内轴上的逻辑对齐，RTL 下起始缘在右；
+     左右两侧的 start / end 落在块轴上，不随书写方向翻 */
+  /* 起始缘与末尾缘按就近的书写方向取：LTR 起始在左，RTL 起始在右 */
+  [data-scope='hover-card'][data-part='positioner']:is([data-placement='top-start'], [data-placement='bottom-start']) {
+    --xh-_overlay-origin-x: var(--xh-direction-start);
+  }
+
+  [data-scope='hover-card'][data-part='positioner']:is([data-placement='top-end'], [data-placement='bottom-end']) {
+    --xh-_overlay-origin-x: var(--xh-direction-end);
+  }
+
+  [data-scope='hover-card'][data-part='positioner']:is([data-placement='left-start'], [data-placement='right-start']) {
+    --xh-_overlay-origin-y: 0;
+  }
+
+  [data-scope='hover-card'][data-part='positioner']:is([data-placement='left-end'], [data-placement='right-end']) {
+    --xh-_overlay-origin-y: 100%;
+  }
+
   /* 与 tooltip 不同：卡片本体承载交互，必须吃指针——
      指针停在卡片上就不该收起，里面的链接与按钮也要点得到 */
   [data-scope='hover-card'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-hover-card-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-hover-card-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-hover-card-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-hover-card-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-hover-card-backdrop, var(--xh-_material-backdrop));
+
     /* 尺寸档只换这两个私有槽。size 落在 content 上而非 root：root 是可选部件，
        面板几何也长在 content 上。语气不接：卡片是内容容器，语气该由里面的内容表达 */
     --xh-_hover-card-pad: var(--xh-surface-pad-md);
@@ -114,20 +143,7 @@
     overscroll-behavior: contain;
     padding-block: var(--xh-hover-card-py, var(--xh-_hover-card-pad));
     padding-inline: var(--xh-hover-card-px, var(--xh-_hover-card-pad));
-    border: var(--xh-stroke-thin) solid var(--xh-hover-card-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-hover-card-radius, var(--xh-shape-overlay));
-    /* 与气泡族共用 M2：顶光只占一像素，正文保持实体，只在内容层采样一次背景。 */
-    background:
-      linear-gradient(
-        to bottom,
-        var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
-        transparent var(--xh-stroke-thin)
-      ),
-      var(--xh-hover-card-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-hover-card-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-hover-card-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-hover-card-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-hover-card-backdrop, var(--xh-material-frosted-backdrop));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
     transform-origin: var(--xh-_overlay-origin-x, 50%) var(--xh-_overlay-origin-y, 50%);
@@ -144,7 +160,8 @@
     outline: none;
   }
 
-  [data-scope='hover-card'][data-part='content'][data-state='open'] {
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='hover-card'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }