@xihan-ui/styles 2.1.0 → 3.1.0

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

package/css/icon.css

@@ -122,4 +122,104 @@
   [data-scope='icon'][data-part='root'][data-flip='both'] {
     scale: -1 -1;
   }
+
+  /* —— 底框 —— */
+  /*
+   * 加了框的图标是一个定直径的圆底座：框画在 <svg> 自己的盒上，图元落在内容盒里居中。
+   * sm / md / lg 三档框与头像同档（取同一支控件高度令牌），图元按自己的档位取字形直径，
+   * 内衬由两者之差算出，框换档时图元跟着一起换。
+   * 框里的图元不读外层统一图元直径的通道 --xh-icon-size：框自己就是一个定尺对象，
+   * 落在按钮、提示条这类下发图元直径的容器里也不被改小。
+   * 排在档位与语气之后：框接管了盒的尺寸与配色。
+   */
+  [data-scope='icon'][data-part='root'][data-frame] {
+    /* 三档之外的档位经两支 step 槽给出字形直径与框直径，三档本身在下面的档位块里换 */
+    --xh-_icon-glyph: var(--xh-icon-frame-glyph-size, var(--xh-_icon-glyph-step, var(--xh-glyph-size-md)));
+    --xh-_icon-frame-size: var(--xh-icon-frame-size, var(--xh-_icon-frame-step, var(--xh-control-h-md)));
+
+    inline-size: var(--xh-_icon-frame-size);
+    block-size: var(--xh-_icon-frame-size);
+    padding: calc((var(--xh-_icon-frame-size) - var(--xh-_icon-glyph)) / 2 - var(--xh-stroke-thin));
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-icon-frame-radius, var(--xh-shape-circle));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='sm'] {
+    --xh-_icon-glyph: var(--xh-icon-frame-glyph-size, var(--xh-glyph-size-sm));
+    --xh-_icon-frame-size: var(--xh-icon-frame-size, var(--xh-control-h-sm));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='lg'] {
+    --xh-_icon-glyph: var(--xh-icon-frame-glyph-size, var(--xh-glyph-size-lg));
+    --xh-_icon-frame-size: var(--xh-icon-frame-size, var(--xh-control-h-lg));
+  }
+
+  /* 头像只有三档；其余档的框沿用 md 档的内衬厚度：框直径 = 本档字形 + md 档框与字形之差 */
+  [data-scope='icon'][data-part='root'][data-frame][data-size='text'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-text);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-text) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='2xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-2xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-2xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='3xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-3xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-3xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame][data-size='4xl'] {
+    --xh-_icon-glyph-step: var(--xh-glyph-size-4xl);
+    --xh-_icon-frame-step: calc(var(--xh-glyph-size-4xl) + var(--xh-control-h-md) - var(--xh-glyph-size-md));
+  }
+
+  /* 框的四种形态只决定颜色怎么用；用哪族颜色由 data-tone 决定，没写语气取品牌实心 / 中性。
+     语气只认自己身上的 data-tone：语气槽会沿继承流下来，放在语气容器里的框不跟着改色。
+     实心档在顶边画一条极浅的内高光，把这块底座衬出厚度；另外三档面上没有实心底，不画 */
+  [data-scope='icon'][data-part='root'][data-frame='solid'] {
+    background: var(--xh-icon-frame-bg, var(--xh-bg-brand));
+    box-shadow: var(--xh-icon-frame-shadow, var(--xh-_highlight-brand));
+    color: var(--xh-icon-fg, var(--xh-fg-on-brand));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='solid'][data-tone] {
+    background: var(--xh-icon-frame-bg, var(--xh-_tone));
+    box-shadow: var(--xh-icon-frame-shadow, var(--xh-_highlight-tone));
+    color: var(--xh-icon-fg, var(--xh-_tone-on));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='subtle'] {
+    background: var(--xh-icon-frame-bg, var(--xh-bg-subtle));
+    color: var(--xh-icon-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='subtle'][data-tone] {
+    background: var(--xh-icon-frame-bg, var(--xh-_tone-subtle));
+    color: var(--xh-icon-fg, var(--xh-_tone-fg));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='outline'] {
+    border-color: var(--xh-icon-frame-border, var(--xh-border-default));
+    color: var(--xh-icon-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='outline'][data-tone] {
+    border-color: var(--xh-icon-frame-border, var(--xh-_tone-border));
+    color: var(--xh-icon-fg, var(--xh-_tone-fg));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='ghost'] {
+    color: var(--xh-icon-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='icon'][data-part='root'][data-frame='ghost'][data-tone] {
+    color: var(--xh-icon-fg, var(--xh-_tone-fg));
+  }
 }

package/css/image-cropper.css

@@ -5,6 +5,8 @@
 
 /* 定义 image cropper 样式。 */
 
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='image-cropper'] {
@@ -90,17 +92,17 @@
       linear-gradient(
         to right,
         transparent 0 33.3333%,
-        var(--xh-image-cropper-grid-line, var(--xh-border-subtle)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
         transparent calc(33.3333% + var(--xh-_image-cropper-grid-w)) 66.6667%,
-        var(--xh-image-cropper-grid-line, var(--xh-border-subtle)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
         transparent calc(66.6667% + var(--xh-_image-cropper-grid-w)) 100%
       ),
       linear-gradient(
         to bottom,
         transparent 0 33.3333%,
-        var(--xh-image-cropper-grid-line, var(--xh-border-subtle)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 33.3333% calc(33.3333% + var(--xh-_image-cropper-grid-w)),
         transparent calc(33.3333% + var(--xh-_image-cropper-grid-w)) 66.6667%,
-        var(--xh-image-cropper-grid-line, var(--xh-border-subtle)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
+        var(--xh-image-cropper-grid-line, var(--xh-bg-subtle-opaque)) 66.6667% calc(66.6667% + var(--xh-_image-cropper-grid-w)),
         transparent calc(66.6667% + var(--xh-_image-cropper-grid-w)) 100%
       );
     pointer-events: none;
@@ -133,7 +135,7 @@
     background: var(--xh-_image-cropper-handle-color);
     pointer-events: none;
     transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
@@ -145,9 +147,10 @@
     content: '';
   }
 
-  /* 把手静息是白面（bg-surface），悬停从同一语义面派生一档，不切到品牌淡底；拖动中才是品牌实心 */
+  /* 把手静息是白面（bg-surface），悬停从同一语义面派生一档，不切到品牌淡底；拖动中才是品牌实心。
+     把手与网格线都压在照片上，取淡底的不透明档，照片深浅不一时才看得见 */
   [data-scope='image-cropper'][data-part='crop-handle']:hover:not([data-disabled], [data-readonly]) {
-    --xh-_image-cropper-handle-color: var(--xh-image-cropper-handle-bg-hover, var(--xh-bg-subtle));
+    --xh-_image-cropper-handle-color: var(--xh-image-cropper-handle-bg-hover, var(--xh-bg-subtle-opaque));
   }
 
   [data-scope='image-cropper'][data-part='crop-handle'][data-resizing] {
@@ -327,6 +330,29 @@
     accent-color: var(--xh-image-cropper-slider-accent, var(--xh-bg-brand));
   }
 
+  /*
+   * 翻转按钮是裁切器旁的独立开关钮：盒型、sm 档几何、outline 四态面、0.97 按压与粗指针命中区由家族配方
+   * 按连接层投影的 data-xh-action-* 给出。翻着（data-state='on'）是无滑块开关的选中面：品牌淡底 12 → 悬停 20
+   * → 按压 28，前景 fg-on-brand-subtle；outline 的描边不换，淡底面上没有描边就与悬停面分不开。
+   */
+  [data-scope='image-cropper'][data-part='flip-trigger'] {
+    /* 作者塞进来的图标随档取字形尺（sm = 16px） */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+  }
+
+  [data-scope='image-cropper'][data-part='flip-trigger'][data-state='on'] {
+    --xh-action-bg-rest: var(--xh-bg-brand-subtle);
+    --xh-action-bg-hover: var(--xh-bg-brand-subtle-hover);
+    --xh-action-bg-pressed: var(--xh-bg-brand-subtle-active);
+    --xh-action-bg-focus-visible: var(--xh-bg-brand-subtle);
+    /* 翻着又被禁用：底色掺一半中性面，选中信息不丢。掺的是淡底的不透明档，墨色淡底半透明 */
+    --xh-action-bg-disabled: color-mix(in oklab, var(--xh-bg-brand-subtle) 50%, var(--xh-bg-subtle-opaque));
+    --xh-action-fg-rest: var(--xh-fg-on-brand-subtle);
+    --xh-action-fg-hover: var(--xh-fg-on-brand-subtle);
+    --xh-action-fg-pressed: var(--xh-fg-on-brand-subtle);
+    --xh-action-fg-focus-visible: var(--xh-fg-on-brand-subtle);
+  }
+
   /* 禁用的整体压暗只做一次，落在最外层：视口、裁切框、把手各自再叠一层会越叠越黑。
      这里只用 opacity、不换前景色：框里是图像，没有文字可换。 */
   [data-scope='image-cropper'][data-part='root'][data-disabled] {