@xihan-ui/styles 2.1.0 → 3.1.0

package/css/grid.css

@@ -460,10 +460,12 @@
   [data-scope='grid'][data-part='item'] {
     grid-column-start: var(--xh-_grid-start);
     grid-column-end: span var(--xh-_grid-span);
+    grid-row-end: span var(--xh-_grid-row-span);
 
-    /* 两个槽位在每一格上都声明一遍，嵌套时内层的格子不吃外层那一格的值 */
+    /* 三个槽位在每一格上都声明一遍，嵌套时内层的格子不吃外层那一格的值 */
     --xh-_grid-span: 1;
     --xh-_grid-start: auto;
+    --xh-_grid-row-span: 1;
   }
 
   /* —— 跨列 —— */
@@ -942,6 +944,255 @@
     }
   }
 
+  /* —— 跨行 —— */
+  /* 占一行是格子上的缺省，这里从跨两行起逐值写。行高由内容撑出时跨几行就占几条行轨道，
+     同一行里其余的格子按各自内容排，不被拉成同高 */
+  [data-scope='grid'][data-part='item'][data-row-span='2'] {
+    --xh-_grid-row-span: 2;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='3'] {
+    --xh-_grid-row-span: 3;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='4'] {
+    --xh-_grid-row-span: 4;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='5'] {
+    --xh-_grid-row-span: 5;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='6'] {
+    --xh-_grid-row-span: 6;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='7'] {
+    --xh-_grid-row-span: 7;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='8'] {
+    --xh-_grid-row-span: 8;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='9'] {
+    --xh-_grid-row-span: 9;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='10'] {
+    --xh-_grid-row-span: 10;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='11'] {
+    --xh-_grid-row-span: 11;
+  }
+
+  [data-scope='grid'][data-part='item'][data-row-span='12'] {
+    --xh-_grid-row-span: 12;
+  }
+
+  /* —— 逐档跨行 —— */
+  /* 与逐档跨列逐字同构：移动优先，没写的档沿用比它窄的那一档；每档都从 1 写起，某一档收回一行同样合法 */
+  @media (min-width: 640px) {
+    [data-scope='grid'][data-part='item'][data-row-span-sm='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-sm='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  @media (min-width: 768px) {
+    [data-scope='grid'][data-part='item'][data-row-span-md='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-md='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    [data-scope='grid'][data-part='item'][data-row-span-lg='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-lg='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    [data-scope='grid'][data-part='item'][data-row-span-xl='1'] {
+      --xh-_grid-row-span: 1;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='2'] {
+      --xh-_grid-row-span: 2;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='3'] {
+      --xh-_grid-row-span: 3;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='4'] {
+      --xh-_grid-row-span: 4;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='5'] {
+      --xh-_grid-row-span: 5;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='6'] {
+      --xh-_grid-row-span: 6;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='7'] {
+      --xh-_grid-row-span: 7;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='8'] {
+      --xh-_grid-row-span: 8;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='9'] {
+      --xh-_grid-row-span: 9;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='10'] {
+      --xh-_grid-row-span: 10;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='11'] {
+      --xh-_grid-row-span: 11;
+    }
+
+    [data-scope='grid'][data-part='item'][data-row-span-xl='12'] {
+      --xh-_grid-row-span: 12;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='grid'][data-part='root'][hidden] {

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);
+    }
+  }
+}