@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/cartesian-chart.css

@@ -0,0 +1,830 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 cartesian chart 样式。 */
+
+/* 描线与淡入关键帧由 family/motion.css 提供；标题、视口、图例、提示框、空态、焦点环与引导线走 Chart 家族配方。
+   本皮肤 @import 它们，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/chart.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-cartesian-chart {
+    --xh-cartesian-chart-skin: 1;
+  }
+
+  /* 几何要用的像素值以这里的私有槽为真源：机器挂载后从计算样式读它们，作者覆盖组件槽即改变几何 */
+  .xh-scope-cartesian-chart[data-part='root'] {
+    --xh-_chart-metric-bar-max: var(--xh-cartesian-chart-bar-max, var(--xh-chart-bar-max));
+    --xh-_chart-metric-gap: var(--xh-chart-gap);
+    --xh-_chart-metric-line-width: var(--xh-cartesian-chart-line-width, var(--xh-chart-line-width));
+    --xh-_chart-metric-point-size: var(--xh-cartesian-chart-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-cartesian-chart-bar-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-cartesian-chart-gap, var(--xh-space-3));
+  }
+
+  /* —— 家族配方的组件槽：标题、视口、图例、提示框与空态由 family/chart.css 画，本图表的覆盖槽写在
+     对应部件上接进配方的私有槽，作者在部件或它的祖先上覆盖都生效 —— */
+  .xh-scope-cartesian-chart[data-part='viewport'] {
+    --xh-_chart-height: var(--xh-cartesian-chart-height, var(--xh-chart-height));
+  }
+
+  .xh-scope-cartesian-chart[data-part='legend'] {
+    --xh-_chart-legend-gap: var(--xh-cartesian-chart-legend-gap, var(--xh-space-1));
+  }
+
+  .xh-scope-cartesian-chart[data-part='legend-swatch'] {
+    --xh-_chart-legend-swatch-radius: var(--xh-cartesian-chart-legend-swatch-radius, var(--xh-shape-inset));
+  }
+
+  .xh-scope-cartesian-chart[data-part='legend-swatch'][data-mark='line'] {
+    --xh-_chart-legend-swatch-line-radius: var(--xh-cartesian-chart-legend-swatch-line-radius, var(--xh-shape-pill));
+  }
+
+  .xh-scope-cartesian-chart[data-part='tooltip'] {
+    --xh-_chart-tooltip-gap: var(--xh-cartesian-chart-tooltip-gap, var(--xh-space-1));
+    --xh-_chart-tooltip-py: var(--xh-cartesian-chart-tooltip-py, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-px: var(--xh-cartesian-chart-tooltip-px, var(--xh-surface-pad-sm));
+    --xh-_chart-tooltip-radius: var(--xh-cartesian-chart-tooltip-radius, var(--xh-shape-overlay));
+    --xh-_chart-tooltip-shadow: var(--xh-cartesian-chart-tooltip-shadow, var(--xh-material-frosted-shadow));
+  }
+
+  .xh-scope-cartesian-chart[data-part='tooltip-row'] {
+    --xh-_chart-tooltip-row-gap: var(--xh-cartesian-chart-tooltip-row-gap, var(--xh-space-2));
+  }
+
+  .xh-scope-cartesian-chart[data-part='tooltip-swatch'] {
+    --xh-_chart-tooltip-swatch-radius: var(--xh-cartesian-chart-tooltip-swatch-radius, var(--xh-shape-inset));
+  }
+
+  .xh-scope-cartesian-chart[data-part='tooltip-swatch'][data-mark='line'] {
+    --xh-_chart-tooltip-swatch-line-radius: var(--xh-cartesian-chart-tooltip-swatch-line-radius, var(--xh-shape-pill));
+  }
+
+  /* 散点的色标画成点的形状：圆取整圆，方块沿用色标的缺省圆角，其余形状按裁切多边形画出 */
+  .xh-scope-cartesian-chart[data-part='legend-swatch'][data-symbol='circle'] {
+    --xh-_chart-legend-swatch-radius: var(--xh-shape-circle);
+  }
+
+  .xh-scope-cartesian-chart[data-part='tooltip-swatch'][data-symbol='circle'] {
+    --xh-_chart-tooltip-swatch-radius: var(--xh-shape-circle);
+  }
+
+  .xh-scope-cartesian-chart[data-symbol='diamond'] {
+    --xh-_chart-symbol-clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  }
+
+  .xh-scope-cartesian-chart[data-symbol='triangle'] {
+    --xh-_chart-symbol-clip: polygon(50% 0, 100% 100%, 0 100%);
+  }
+
+  .xh-scope-cartesian-chart[data-symbol='triangleDown'] {
+    --xh-_chart-symbol-clip: polygon(0 0, 100% 0, 50% 100%);
+  }
+
+  .xh-scope-cartesian-chart[data-symbol='cross'] {
+    --xh-_chart-symbol-clip: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
+  }
+
+  .xh-scope-cartesian-chart[data-symbol='star'] {
+    --xh-_chart-symbol-clip: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+  }
+
+  .xh-scope-cartesian-chart[data-symbol='wye'] {
+    --xh-_chart-symbol-clip: polygon(38% 0, 62% 0, 62% 42%, 98% 70%, 86% 88%, 50% 60%, 14% 88%, 2% 70%, 38% 42%);
+  }
+
+  .xh-scope-cartesian-chart[data-part='legend-swatch'][data-mark='point'],
+  .xh-scope-cartesian-chart[data-part='tooltip-swatch'][data-mark='point'] {
+    clip-path: var(--xh-_chart-symbol-clip, none);
+  }
+
+  /* 裁切出来的形状画不出空心：隐藏的项改为淡出，名字的删除线与次级字色照常 */
+  .xh-scope-cartesian-chart[data-part='legend-item'][aria-pressed='false'] > [data-part='legend-swatch'][data-mark='point']:where(.xh-scope-cartesian-chart):not([data-symbol='circle'], [data-symbol='square']) {
+    background: var(--xh-_chart-series);
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 色阶图例：名字、低端的值、渐变条、高端的值排成一行，跟在图例项后面；值是标注字色、等宽数字 */
+  .xh-scope-cartesian-chart[data-part='legend-scale'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-cartesian-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;
+  }
+
+  .xh-scope-cartesian-chart[data-part='legend-scale-name'] {
+    color: var(--xh-fg-default);
+    font-size: var(--xh-text-body-size);
+  }
+
+  .xh-scope-cartesian-chart[data-part='legend-scale-bar'] {
+    inline-size: var(--xh-cartesian-chart-legend-scale-width, var(--xh-chart-legend-scale-width));
+    block-size: var(--xh-space-2);
+    border-radius: var(--xh-cartesian-chart-legend-scale-bar-radius, var(--xh-shape-inset));
+    background: linear-gradient(to right, var(--xh-_chart-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-_chart-scale-from: color-mix(in oklch, var(--xh-_chart-seq-mid) 60%, var(--xh-_chart-seq-start));
+  }
+
+  /* 图例随文字方向镜像：低端的值在行首，渐变也从行首起 */
+  :where([dir='rtl']) .xh-scope-cartesian-chart[data-part='legend-scale-bar'] {
+    background: linear-gradient(to left, var(--xh-_chart-scale-from), var(--xh-_chart-seq-mid) 28.6%, var(--xh-_chart-seq-end));
+  }
+
+  /* —— 画布模式：数据层画在画布上，三层叠在视口里——垫层 svg（网格、坐标轴、参考带、准线）在最下，
+     画布在中间，绘图区在最上（系列分组、前景、焦点代理与焦点环，指针与键盘都在它上面）。
+     垫层与绘图区同一套排版：刻度标签的字号与等宽数字一致；两层都不接指针 —— */
+  .xh-scope-cartesian-chart[data-part='underlay'] {
+    position: absolute;
+    inset: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    font-size: var(--xh-_chart-metric-font-size);
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+  }
+
+  /* 画布铺满视口，后备尺寸按 DPR 由机器设；没有可画的数据时淡出，数据到来淡入 */
+  .xh-scope-cartesian-chart[data-part='canvas'] {
+    position: absolute;
+    inset: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-cartesian-chart[data-part='canvas'][data-empty] {
+    opacity: 0;
+    transition-duration: var(--xh-motion-duration-exit);
+    transition-timing-function: var(--xh-motion-ease-exit);
+  }
+
+  .xh-scope-cartesian-chart[data-part='underlay'][hidden],
+  .xh-scope-cartesian-chart[data-part='canvas'][hidden] {
+    display: none;
+  }
+
+  /* —— 缩放与刷选：能缩放或刷选的方向上触屏的拖动与捏合归绘图区，另一个方向照常滚动页面；
+     放大后指针是可拖动的手，拖着时是抓住的手；开了刷选时指针是十字，拖动即框选 —— */
+  .xh-scope-cartesian-chart[data-part='plot'][data-touch-axis='horizontal'] {
+    touch-action: pan-y;
+  }
+
+  .xh-scope-cartesian-chart[data-part='plot'][data-touch-axis='vertical'] {
+    touch-action: pan-x;
+  }
+
+  .xh-scope-cartesian-chart[data-part='plot'][data-touch-axis='both'] {
+    touch-action: none;
+  }
+
+  .xh-scope-cartesian-chart[data-part='plot'][data-zoomed] {
+    cursor: grab;
+  }
+
+  .xh-scope-cartesian-chart[data-part='plot'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  .xh-scope-cartesian-chart[data-part='plot'][data-selectable] {
+    cursor: crosshair;
+  }
+
+  /* 缩放条：淡底的轨道上，窗口是选中区（品牌淡底），两端的手柄是品牌色的竖条。它对着自变量轴的整条轴；
+     绘图区不随 RTL 镜像，缩放条也不镜像，左右是物理方向 */
+  .xh-scope-cartesian-chart[data-part='zoom-slider'] {
+    position: relative;
+    /* stylelint-disable-next-line property-disallowed-list, declaration-property-value-disallowed-list -- 缩放条不随 RTL 镜像，左右内缩对着绘图区的物理两边 */
+    margin-left: var(--xh-_chart-zoom-left, 0);
+    /* stylelint-disable-next-line property-disallowed-list, declaration-property-value-disallowed-list -- 同上 */
+    margin-right: var(--xh-_chart-zoom-right, 0);
+    block-size: var(--xh-cartesian-chart-zoom-h, var(--xh-space-6));
+    touch-action: none;
+    user-select: none;
+  }
+
+  .xh-scope-cartesian-chart[data-part='zoom-track'] {
+    position: absolute;
+    inset: 0;
+    /* 手柄与缩略线的层号只在轨道里排 */
+    isolation: isolate;
+    border-radius: var(--xh-cartesian-chart-zoom-track-radius, var(--xh-shape-inset));
+    background: var(--xh-cartesian-chart-zoom-track-bg, var(--xh-bg-subtle));
+  }
+
+  .xh-scope-cartesian-chart[data-part='zoom-window'] {
+    position: absolute;
+    inset-block: 0;
+    /* stylelint-disable-next-line property-disallowed-list -- 缩放条不随 RTL 镜像，窗口两端是物理的左右 */
+    left: var(--xh-_chart-zoom-start, 0%);
+    /* stylelint-disable-next-line property-disallowed-list -- 同上 */
+    right: calc(100% - var(--xh-_chart-zoom-end, 100%));
+    border-radius: var(--xh-cartesian-chart-zoom-window-radius, var(--xh-shape-inset));
+    background: var(--xh-cartesian-chart-zoom-window-bg, var(--xh-bg-brand-subtle));
+    cursor: grab;
+  }
+
+  .xh-scope-cartesian-chart[data-part='zoom-slider'][data-dragging] [data-part='zoom-window']:where(.xh-scope-cartesian-chart) {
+    cursor: grabbing;
+  }
+
+  /* 缩略线：整条轴上的走势，弱化色的细线铺满轨道，压在窗口的淡底之上、手柄之下；指针穿过它落到轨道与窗口上 */
+  .xh-scope-cartesian-chart[data-part='zoom-preview'] {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .xh-scope-cartesian-chart[data-part='zoom-preview-line'] {
+    fill: none;
+    stroke: var(--xh-cartesian-chart-zoom-preview-color, var(--xh-chart-deemphasis));
+    stroke-width: var(--xh-stroke-thin);
+    stroke-linejoin: round;
+  }
+
+  /* 手柄骑在窗口的两端：一半在窗口里、一半在外，拖它改窗口的一端；键盘聚焦时画焦点环 */
+  .xh-scope-cartesian-chart[data-part='zoom-handle'] {
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--xh-cartesian-chart-zoom-handle-w, var(--xh-space-2));
+    border-radius: var(--xh-cartesian-chart-zoom-handle-radius, var(--xh-shape-inset));
+    background: var(--xh-cartesian-chart-zoom-handle-bg, var(--xh-bg-brand));
+    /* 竖条上没有字：补一支与品牌面配对的墨色，聚焦环取它 */
+    color: var(--xh-fg-on-brand);
+    cursor: ew-resize;
+    translate: -50% 0;
+    /* 压在缩略线之上 */
+    z-index: 1;
+  }
+
+  /* 手柄只有竖条那么宽：命中区向两侧各外扩一截，补到与缩放条一样高的正方 */
+  .xh-scope-cartesian-chart[data-part='zoom-handle']::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline: calc(-1 * var(--xh-space-2));
+  }
+
+  .xh-scope-cartesian-chart[data-part='zoom-handle'][data-placement='start'] {
+    /* stylelint-disable-next-line property-disallowed-list -- 缩放条不随 RTL 镜像 */
+    left: 0;
+  }
+
+  .xh-scope-cartesian-chart[data-part='zoom-handle'][data-placement='end'] {
+    /* stylelint-disable-next-line property-disallowed-list -- 缩放条不随 RTL 镜像 */
+    left: 100%;
+  }
+
+  /* 环往内收、压在品牌色的竖条上：换成与面配对的前景色才看得见 */
+  .xh-scope-cartesian-chart[data-part='zoom-handle']:focus-visible {
+    --xh-_ring-color: currentColor;
+  }
+
+  .xh-scope-cartesian-chart[data-part='empty'][data-state='loading'] {
+    --xh-_chart-empty-gap: var(--xh-cartesian-chart-empty-gap, var(--xh-space-2));
+  }
+
+  /* —— 色槽：身份由色槽承担，作者可以在系列上覆盖 --xh-cartesian-chart-series-color ——
+     分组、激活的点、图例项与提示框的行都带着色槽，各自从这里取系列色 */
+  .xh-scope-cartesian-chart[data-xh-chart-slot='1'] {
+    --xh-_chart-series: var(--xh-cartesian-chart-series-color, var(--xh-chart-categorical-1));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-1);
+  }
+
+  .xh-scope-cartesian-chart[data-xh-chart-slot='2'] {
+    --xh-_chart-series: var(--xh-cartesian-chart-series-color, var(--xh-chart-categorical-2));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-2);
+  }
+
+  .xh-scope-cartesian-chart[data-xh-chart-slot='3'] {
+    --xh-_chart-series: var(--xh-cartesian-chart-series-color, var(--xh-chart-categorical-3));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-3);
+  }
+
+  .xh-scope-cartesian-chart[data-xh-chart-slot='4'] {
+    --xh-_chart-series: var(--xh-cartesian-chart-series-color, var(--xh-chart-categorical-4));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-4);
+  }
+
+  .xh-scope-cartesian-chart[data-xh-chart-slot='5'] {
+    --xh-_chart-series: var(--xh-cartesian-chart-series-color, var(--xh-chart-categorical-5));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-5);
+  }
+
+  .xh-scope-cartesian-chart[data-xh-chart-slot='6'] {
+    --xh-_chart-series: var(--xh-cartesian-chart-series-color, var(--xh-chart-categorical-6));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-6);
+  }
+
+  .xh-scope-cartesian-chart[data-xh-chart-slot='7'] {
+    --xh-_chart-series: var(--xh-cartesian-chart-series-color, var(--xh-chart-categorical-7));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-7);
+  }
+
+  .xh-scope-cartesian-chart[data-xh-chart-slot='8'] {
+    --xh-_chart-series: var(--xh-cartesian-chart-series-color, var(--xh-chart-categorical-8));
+    --xh-_chart-on-series: var(--xh-chart-on-categorical-8);
+  }
+
+  /* 语义系列取语气的实心色：语气层在 [data-tone] 上给出整族取值 */
+  .xh-scope-cartesian-chart[data-tone] {
+    --xh-_chart-series: var(--xh-cartesian-chart-series-color, var(--xh-_tone));
+    --xh-_chart-on-series: var(--xh-_tone-on);
+  }
+
+  /* 按值着色的系列不取分类色：系列色换成色阶中点，图例与提示框的色标跟着取它，点各自按值取色 */
+  .xh-scope-cartesian-chart[data-xh-chart-scale='sequential'] {
+    --xh-_chart-series: var(--xh-_chart-seq-mid);
+  }
+
+  /* —— 图表家具：不承载数据的结构线 —— */
+  .xh-scope-cartesian-chart[data-part='grid-line'] {
+    fill: none;
+    stroke: var(--xh-chart-grid);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  .xh-scope-cartesian-chart[data-part='axis-line'],
+  .xh-scope-cartesian-chart[data-part='tick'] {
+    fill: none;
+    stroke: var(--xh-chart-axis);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  /* 轴标签是次级标注：文字不用系列色 */
+  .xh-scope-cartesian-chart[data-part='tick-label'] {
+    fill: var(--xh-chart-label);
+  }
+
+  .xh-scope-cartesian-chart[data-part='axis-title'] {
+    fill: var(--xh-chart-label);
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* —— 数据标记 —— */
+  .xh-scope-cartesian-chart[data-part='series'] {
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 悬停图例或强调一个系列时，其余系列淡出；被强调的保持原样。刷选时框外的数据标记同样淡出 */
+  .xh-scope-cartesian-chart[data-part='series'][data-dimmed],
+  .xh-scope-cartesian-chart[data-part='series'] [data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 柱：相邻柱之间的间隙由几何留出，不画描边 */
+  .xh-scope-cartesian-chart[data-part='bar'] {
+    fill: var(--xh-_chart-series);
+    stroke: none;
+  }
+
+  /* 瀑布：一步涨取涨色、跌取跌色，小计保持系列色；纹理模式在后面，颜色不可靠时让给纹理，涨跌仍由柱的走向看出 */
+  .xh-scope-cartesian-chart[data-part='bar'][data-trend='rise'] {
+    fill: var(--xh-chart-rise);
+  }
+
+  .xh-scope-cartesian-chart[data-part='bar'][data-trend='fall'] {
+    fill: var(--xh-chart-fall);
+  }
+
+  /* K 线：涨取涨色、跌取跌色（缺省绿涨红跌，主题可以翻过来）；实体是方角，影线与美国线是细线 */
+  .xh-scope-cartesian-chart[data-trend='rise'] {
+    --xh-_chart-trend: var(--xh-chart-rise);
+  }
+
+  .xh-scope-cartesian-chart[data-trend='fall'] {
+    --xh-_chart-trend: var(--xh-chart-fall);
+  }
+
+  .xh-scope-cartesian-chart[data-part='candle'] {
+    fill: var(--xh-_chart-trend, var(--xh-_chart-series));
+    stroke: none;
+  }
+
+  .xh-scope-cartesian-chart[data-part='candle'][data-style='ohlc'],
+  .xh-scope-cartesian-chart[data-part='wick'] {
+    fill: none;
+    stroke: var(--xh-_chart-trend, var(--xh-_chart-series));
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  .xh-scope-cartesian-chart[data-part='candle'][data-style='ohlc'] {
+    stroke-width: var(--xh-_chart-metric-line-width);
+  }
+
+  /* 箱线：箱铺系列色的淡洗、描出轮廓，中位线加粗，须线细线；离群点是空心小圆。小提琴同箱的画法 */
+  .xh-scope-cartesian-chart[data-part='box'] {
+    fill: var(--xh-_chart-series);
+    fill-opacity: var(--xh-chart-area-alpha);
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  .xh-scope-cartesian-chart[data-part='median'] {
+    fill: none;
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-_chart-metric-line-width);
+  }
+
+  .xh-scope-cartesian-chart[data-part='whisker'] {
+    fill: none;
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  .xh-scope-cartesian-chart[data-part='outlier'] {
+    fill: var(--xh-chart-surface);
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  /* 棒棒糖的细杆：系列色的线，杆顶的点沿用点的画法（系列色加一圈承载面色的描边环） */
+  .xh-scope-cartesian-chart[data-part='stem'] {
+    fill: none;
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-_chart-metric-line-width);
+  }
+
+  /* 瀑布的连接线：上一步的终点连到下一步的起点，结构色的细线 */
+  .xh-scope-cartesian-chart[data-part='connector'] {
+    fill: none;
+    stroke: var(--xh-chart-axis);
+    stroke-width: var(--xh-stroke-thin);
+    pointer-events: none;
+  }
+
+  .xh-scope-cartesian-chart[data-part='line'] {
+    fill: none;
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-_chart-metric-line-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  /* 新出现的折线从头描到尾：连接层在它入场的这一轮写 data-drawing 与 pathLength="1"，
+     过渡结束即撤掉；与柱从基线长出同一档时长 */
+  .xh-scope-cartesian-chart[data-part='line'][data-drawing] {
+    stroke-dasharray: 1;
+    animation: xh-draw var(--xh-motion-duration-reveal) var(--xh-motion-ease-continuous) both;
+  }
+
+  /* 数据点与折线上的标签等描线的笔尖扫到才淡入，柱的标签等柱快长完、合计与线尾标签最后淡入：
+     连接层写入它占入场时长的比例，乘上入场时长就是延迟，作者改时长、系统开减弱动效时跟着缩放 */
+  .xh-scope-cartesian-chart[data-part='dot'][data-drawing],
+  .xh-scope-cartesian-chart[data-part='data-label'][data-drawing],
+  .xh-scope-cartesian-chart[data-part='total-label'][data-drawing],
+  .xh-scope-cartesian-chart[data-part='end-label'][data-drawing],
+  .xh-scope-cartesian-chart[data-part='annotation'][data-drawing],
+  .xh-scope-cartesian-chart[data-part='annotation-label'][data-drawing] {
+    animation: xh-fade-in 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-motion */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-cartesian-chart[data-part='line'][data-drawing] {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-cartesian-chart[data-part='line'][data-drawing] {
+    animation: none;
+  }
+
+  /* 面积：系列色淡洗，上沿是同一条实色折线 */
+  .xh-scope-cartesian-chart[data-part='area-fill'] {
+    fill: var(--xh-_chart-series);
+    fill-opacity: var(--xh-chart-area-alpha);
+    stroke: none;
+  }
+
+  /* 点带一圈承载面色的描边环，压在线上也分得开 */
+  .xh-scope-cartesian-chart[data-part='dot'],
+  .xh-scope-cartesian-chart[data-part='point'] {
+    fill: var(--xh-_chart-series);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-chart-gap);
+  }
+
+  /* 按值着色的点：颜色由 Chart 家族配方按段号与段内百分比兑好，放在私有槽里 */
+  .xh-scope-cartesian-chart[data-part='point'][data-seg] {
+    fill: var(--xh-_chart-seq-fill);
+  }
+
+  /* 数据标签、堆叠合计与线尾标签是标注：标注字色，不取系列色，不接指针 */
+  .xh-scope-cartesian-chart[data-part='data-label'],
+  .xh-scope-cartesian-chart[data-part='total-label'],
+  .xh-scope-cartesian-chart[data-part='end-label'] {
+    fill: var(--xh-chart-label);
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 线尾标签被推开时的引导线：画法在配方里，与饼图同一副；它压在标记上，不接指针，随系列淡出时带过渡 */
+  .xh-scope-cartesian-chart[data-part='leader-line'] {
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* —— 注释：帮读者读数的参照，只给眼睛看、不接指针。参考线是结构色的虚线（虚线表达阈值与推算），
+     参考带是整条的淡底；标出的点、平均线与趋势线跟着系列取系列色，随系列淡出 —— */
+  .xh-scope-cartesian-chart[data-part='annotation'] {
+    fill: none;
+    stroke: var(--xh-chart-label);
+    stroke-width: var(--xh-stroke-thin);
+    stroke-dasharray: calc(var(--xh-_chart-metric-line-width) * 2) calc(var(--xh-_chart-metric-line-width) * 2);
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-cartesian-chart[data-part='annotation'][data-kind='band'] {
+    fill: var(--xh-chart-band-highlight);
+    stroke: none;
+  }
+
+  .xh-scope-cartesian-chart[data-part='annotation'][data-kind='average'],
+  .xh-scope-cartesian-chart[data-part='annotation'][data-kind='trend'] {
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-stroke-thick);
+  }
+
+  /* 三种线各有线型：数据是实线，移动平均是圆点线（数据的平滑），最小二乘直线是虚线（推算） */
+  .xh-scope-cartesian-chart[data-part='annotation'][data-kind='trend'][data-method='moving-average'] {
+    stroke-dasharray: 0 calc(var(--xh-_chart-metric-line-width) * 2);
+    stroke-linecap: round;
+  }
+
+  /* 标出的点是一圈实线环：套在数据点外，隔一道表面间隙 */
+  .xh-scope-cartesian-chart[data-part='annotation'][data-kind='point'] {
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-stroke-thick);
+    stroke-dasharray: none;
+  }
+
+  .xh-scope-cartesian-chart[data-part='annotation-label'] {
+    fill: var(--xh-chart-label);
+    font-weight: var(--xh-font-weight-medium);
+    pointer-events: none;
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-cartesian-chart[data-part='annotation'][data-dimmed],
+  .xh-scope-cartesian-chart[data-part='annotation-label'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* 压在柱上的标签：取与色槽配对的前景色 */
+  .xh-scope-cartesian-chart[data-part='data-label'][data-placement='inside'] {
+    fill: var(--xh-_chart-on-series);
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  .xh-scope-cartesian-chart[data-part='total-label'] {
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  /* 所属系列被淡出时，它的标签一起淡出 */
+  .xh-scope-cartesian-chart[data-part='data-label'][data-dimmed],
+  .xh-scope-cartesian-chart[data-part='end-label'][data-dimmed] {
+    opacity: var(--xh-chart-dim-alpha);
+  }
+
+  /* —— 前景：随激活变化，不改几何 —— */
+  .xh-scope-cartesian-chart[data-part='crosshair'][data-kind='line'] {
+    fill: none;
+    stroke: var(--xh-chart-crosshair);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  /* 柱图的准线是整条类目带的淡底：一条细线落在柱缝里看不出指的是哪一组 */
+  .xh-scope-cartesian-chart[data-part='crosshair'][data-kind='band'] {
+    fill: var(--xh-chart-band-highlight);
+    stroke: none;
+  }
+
+  /* 刷选框：选中语义的淡底垫在数据之下，一圈聚焦色的细边标出范围 */
+  .xh-scope-cartesian-chart[data-part='brush'] {
+    fill: var(--xh-cartesian-chart-brush-bg, var(--xh-bg-brand-subtle));
+    stroke: var(--xh-cartesian-chart-brush-border, var(--xh-border-control-focus));
+    stroke-width: var(--xh-stroke-thin);
+    pointer-events: none;
+  }
+
+  /* —— 纹理：颜色不可用或不可靠时（强制色、打印、祖先写了 data-xh-chart-patterns），柱与面积改用本系列在
+     defs 里的纹理填充、描出轮廓，折线换线型；压在柱上的标签改用标签色、描一圈承载面色。色标的纹理在配方里 —— */
+  :where([data-xh-chart-patterns]) .xh-scope-cartesian-chart[data-xh-chart-pattern] > [data-part='bar']:where(.xh-scope-cartesian-chart),
+  :where([data-xh-chart-patterns]) .xh-scope-cartesian-chart[data-xh-chart-pattern] > [data-part='area-fill']:where(.xh-scope-cartesian-chart) {
+    fill: var(--xh-_chart-pattern);
+    fill-opacity: 1;
+    stroke: var(--xh-_chart-series);
+    stroke-width: var(--xh-stroke-thin);
+  }
+
+  :where([data-xh-chart-patterns]) .xh-scope-cartesian-chart[data-xh-chart-pattern] > [data-part='line']:where(.xh-scope-cartesian-chart):not([data-drawing]) {
+    stroke-dasharray: var(--xh-_chart-dash);
+  }
+
+  :where([data-xh-chart-patterns]) .xh-scope-cartesian-chart[data-part='data-label'][data-placement='inside'] {
+    fill: var(--xh-chart-label);
+    stroke: var(--xh-chart-surface);
+    stroke-width: var(--xh-stroke-thick);
+    paint-order: stroke;
+  }
+
+  /* 强制色：数据标记改成系统色的描边，网格取灰字色；纹理总是开启；焦点环、引导线与色标在配方里 */
+  @media (forced-colors: active) {
+    .xh-scope-cartesian-chart[data-part='bar'],
+    .xh-scope-cartesian-chart[data-part='bar'][data-trend] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    .xh-scope-cartesian-chart[data-part='connector'],
+    .xh-scope-cartesian-chart[data-part='stem'],
+    .xh-scope-cartesian-chart[data-part='whisker'],
+    .xh-scope-cartesian-chart[data-part='median'],
+    .xh-scope-cartesian-chart[data-part='wick'],
+    .xh-scope-cartesian-chart[data-part='candle'][data-style='ohlc'] {
+      stroke: CanvasText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='box'],
+    .xh-scope-cartesian-chart[data-part='outlier'] {
+      fill: Canvas;
+      stroke: CanvasText;
+    }
+
+    /* 系统色下涨跌分不开：涨空心、跌实心 */
+    .xh-scope-cartesian-chart[data-part='candle'][data-trend='rise'] {
+      fill: Canvas;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    .xh-scope-cartesian-chart[data-part='candle'][data-trend='fall'] {
+      fill: CanvasText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='line'] {
+      stroke: CanvasText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='area-fill'] {
+      fill: none;
+    }
+
+    .xh-scope-cartesian-chart[data-part='dot'],
+    .xh-scope-cartesian-chart[data-part='point'],
+    .xh-scope-cartesian-chart[data-part='point'][data-seg] {
+      fill: CanvasText;
+      stroke: Canvas;
+    }
+
+    .xh-scope-cartesian-chart[data-part='annotation'],
+    .xh-scope-cartesian-chart[data-part='annotation'][data-kind='average'],
+    .xh-scope-cartesian-chart[data-part='annotation'][data-kind='trend'],
+    .xh-scope-cartesian-chart[data-part='annotation'][data-kind='point'] {
+      stroke: CanvasText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='annotation'][data-kind='band'] {
+      fill: none;
+      stroke: GrayText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='annotation-label'] {
+      fill: CanvasText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='zoom-track'] {
+      border: var(--xh-stroke-thin) solid CanvasText;
+      background: Canvas;
+    }
+
+    .xh-scope-cartesian-chart[data-part='zoom-window'] {
+      background: Highlight;
+    }
+
+    .xh-scope-cartesian-chart[data-part='zoom-preview-line'] {
+      stroke: GrayText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='zoom-handle'] {
+      background: CanvasText;
+    }
+
+    /* 系统色下前景与竖条同是 CanvasText：环改取 Highlight */
+    .xh-scope-cartesian-chart[data-part='zoom-handle']:focus-visible {
+      --xh-_ring-color: Highlight;
+    }
+
+    /* 色阶在系统色下画不出来：只留轮廓，两端的值照常可读 */
+    .xh-scope-cartesian-chart[data-part='legend-scale-bar'] {
+      border: var(--xh-stroke-thin) solid CanvasText;
+      background: Canvas;
+    }
+
+    .xh-scope-cartesian-chart[data-part='grid-line'] {
+      stroke: GrayText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='axis-line'],
+    .xh-scope-cartesian-chart[data-part='tick'] {
+      stroke: CanvasText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='tick-label'],
+    .xh-scope-cartesian-chart[data-part='axis-title'],
+    .xh-scope-cartesian-chart[data-part='data-label'],
+    .xh-scope-cartesian-chart[data-part='data-label'][data-placement='inside'],
+    .xh-scope-cartesian-chart[data-part='total-label'],
+    .xh-scope-cartesian-chart[data-part='end-label'] {
+      fill: CanvasText;
+    }
+
+    .xh-scope-cartesian-chart[data-part='crosshair'][data-kind='band'] {
+      fill: none;
+      stroke: Highlight;
+    }
+
+    /* 系统色下淡底画不出来：刷选框只留一圈 Highlight 的边 */
+    .xh-scope-cartesian-chart[data-part='brush'] {
+      fill: none;
+      stroke: Highlight;
+    }
+
+    .xh-scope-cartesian-chart[data-xh-chart-pattern] > [data-part='bar']:where(.xh-scope-cartesian-chart),
+    .xh-scope-cartesian-chart[data-xh-chart-pattern] > [data-part='area-fill']:where(.xh-scope-cartesian-chart) {
+      forced-color-adjust: none;
+      fill: var(--xh-_chart-pattern);
+      fill-opacity: 1;
+      stroke: CanvasText;
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    .xh-scope-cartesian-chart[data-xh-chart-pattern] > [data-part='line']:where(.xh-scope-cartesian-chart):not([data-drawing]) {
+      stroke-dasharray: var(--xh-_chart-dash);
+    }
+
+    .xh-scope-cartesian-chart[data-part='data-label'][data-placement='inside'] {
+      fill: CanvasText;
+      stroke: Canvas;
+      stroke-width: var(--xh-stroke-thick);
+      paint-order: stroke;
+    }
+  }
+
+  /* 打印：纸上没有指针，准线与缩放条不印；纹理开启；提示框与焦点环在配方里 */
+  @media print {
+    .xh-scope-cartesian-chart[data-part='crosshair'],
+    .xh-scope-cartesian-chart[data-part='zoom-slider'] {
+      display: none;
+    }
+
+    .xh-scope-cartesian-chart[data-xh-chart-pattern] > [data-part='bar']:where(.xh-scope-cartesian-chart),
+    .xh-scope-cartesian-chart[data-xh-chart-pattern] > [data-part='area-fill']:where(.xh-scope-cartesian-chart) {
+      fill: var(--xh-_chart-pattern);
+      fill-opacity: 1;
+      stroke: var(--xh-_chart-series);
+      stroke-width: var(--xh-stroke-thin);
+    }
+
+    .xh-scope-cartesian-chart[data-xh-chart-pattern] > [data-part='line']:where(.xh-scope-cartesian-chart):not([data-drawing]) {
+      stroke-dasharray: var(--xh-_chart-dash);
+    }
+
+    .xh-scope-cartesian-chart[data-part='data-label'][data-placement='inside'] {
+      fill: var(--xh-chart-label);
+      stroke: var(--xh-chart-surface);
+      stroke-width: var(--xh-stroke-thick);
+      paint-order: stroke;
+    }
+  }
+
+  /* 色阶图例随按值着色显隐：声明了 display 的部件在这里让 hidden 生效 */
+  .xh-scope-cartesian-chart[data-part='legend-scale'][hidden] {
+    display: none;
+  }
+}