@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/progress.css

@@ -0,0 +1,502 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 progress 样式。 */
+
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  /* 固定宽度的一段从轨道行首外扫到行尾外：只动 translate，不动布局。
+     百分比参照这一段自身的宽度（轨道的 40%），RTL 下两端由私有槽换号 */
+  @keyframes xh-progress-indeterminate {
+    from {
+      translate: var(--xh-_progress-sweep-from, -100%) 0;
+    }
+
+    to {
+      translate: var(--xh-_progress-sweep-to, 250%) 0;
+    }
+  }
+
+  /* 条纹沿行向流动：每轮挪过一整格纹理，首尾两帧的图案重合，循环无缝。RTL 下行尾在左，位移随方向符号翻转 */
+  @keyframes xh-progress-stripes {
+    from {
+      background-position: 0 0;
+    }
+
+    to {
+      background-position: calc(var(--xh-_progress-stripe-size) * var(--xh-direction-sign)) 0;
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-progress {
+    --xh-progress-skin: 1;
+  }
+
+  /* 私有槽位：组件令牌 → 中档两级回退。厚度写在 root 上而不是 track 上，
+     尺寸档才改得动一处就够，track 靠继承拿到值。线形是一条细轨，按轨道厚度三档取 sm / md / lg = 3 / 4 / 8px */
+  .xh-scope-progress[data-part='root'] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-md));
+
+    /* 目标刻度与环形的刻度值按根落位 */
+    position: relative;
+    display: inline-block;
+    inline-size: 100%;
+  }
+
+  /* 线形轨道把填充放在交叉轴正中：子弹图的填充比轨道窄，压在色带正中 */
+  .xh-scope-progress[data-part='track'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    inline-size: 100%;
+    block-size: var(--xh-_progress-thickness);
+    border-radius: var(--xh-progress-track-radius, var(--xh-shape-pill));
+    /* 底槽取淡底阶梯的 200 档（--xh-bg-subtle-hover），环形的底槽同一支 */
+    background: var(--xh-progress-track, var(--xh-bg-subtle-hover));
+  }
+
+  /* 语气槽由 root 上的 data-tone 声明、经继承发下来；没写 data-tone 时退回原来的品牌色。
+     轨道不跟着换族：只有已完成的那段换色，底槽保持中性才读得出"完成了多少"。 */
+  .xh-scope-progress[data-part='range'] {
+    /* 填充铺满轨道，按未完成的比例往行首平移、由轨道裁掉：进度变化只走合成，不重排也不重绘。
+       露出来的前端保留自己的圆角，行首那一侧由轨道的圆角裁出 */
+    /* 定位后才压得住同在轨道里的色带 */
+    position: relative;
+    flex: none;
+    inline-size: 100%;
+    block-size: var(--xh-_progress-range-size, 100%);
+    border-radius: var(--xh-progress-range-radius, var(--xh-shape-pill));
+    background: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
+    translate: calc((var(--xh-_progress-value, 0) - 1) * 100%) 0;
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* translate 只认物理方向：RTL 下行首在右边，平移与不定进度的扫向一起翻转 */
+  .xh-scope-progress[data-part='range'][data-variant='line']:dir(rtl) {
+    --xh-_progress-sweep-from: 100%;
+    --xh-_progress-sweep-to: -250%;
+
+    translate: calc((1 - var(--xh-_progress-value, 0)) * 100%) 0;
+  }
+
+  /* —— 线形的三样外观：分段、条纹与缓冲 —— */
+  /* 分段：遮罩把轨道切成等宽的格，格间留一道间隙，填充、缓冲与色带随轨道一起被切开。
+     周期是（全长 + 一道间隙）÷ 格数，最后一格恰好收在行尾，图案左右对称，RTL 下不必翻转 */
+  .xh-scope-progress[data-part='track'][data-stepped] {
+    --xh-_progress-step-gap: var(--xh-progress-step-gap, var(--xh-space-0_5));
+    --xh-_progress-step-period: calc((100% + var(--xh-_progress-step-gap)) / var(--xh-_progress-steps, 1));
+    --xh-_progress-step-mask: repeating-linear-gradient(
+      to right,
+      black 0 calc(var(--xh-_progress-step-period) - var(--xh-_progress-step-gap)),
+      transparent 0 var(--xh-_progress-step-period)
+    );
+
+    -webkit-mask-image: var(--xh-_progress-step-mask);
+    mask-image: var(--xh-_progress-step-mask);
+  }
+
+  /* 条纹：填充上铺一层 45° 斜纹，颜色取填充同族更深一档。纹理是正方形平铺，45° 才能首尾相接；
+     RTL 下斜向随方向符号镜像 */
+  .xh-scope-progress[data-part='range'][data-striped] {
+    --xh-_progress-stripe: var(--xh-progress-stripe-color, var(--xh-_tone-active, var(--xh-bg-brand-active)));
+    --xh-_progress-stripe-size: var(--xh-progress-stripe-size, var(--xh-space-4));
+
+    background-image: linear-gradient(
+      calc(45deg * var(--xh-direction-sign)),
+      var(--xh-_progress-stripe) 25%,
+      transparent 25% 50%,
+      var(--xh-_progress-stripe) 50% 75%,
+      transparent 75%
+    );
+    background-size: var(--xh-_progress-stripe-size) var(--xh-_progress-stripe-size);
+  }
+
+  /* 只在进行中流动：完成了就停下；进度未知时整段已在往复扫，不再叠一层流动 */
+  .xh-scope-progress[data-part='range'][data-striped][data-state='loading'] {
+    animation: xh-progress-stripes var(--xh-progress-stripe-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 缓冲段与填充同一种画法：铺满轨道、按缓冲比例往行首平移、由轨道裁掉，只走合成。
+     颜色取填充那一族的淡色，排在填充之前、被它压住。物理方向的平移量乘方向符号，RTL 下往右收 */
+  .xh-scope-progress[data-part='buffer'] {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--xh-progress-buffer-radius, var(--xh-progress-range-radius, var(--xh-shape-pill)));
+    background: var(--xh-progress-buffer, var(--xh-_tone-subtle-active));
+    translate: calc((var(--xh-_progress-buffer, 0) - 1) * 100% * var(--xh-direction-sign)) 0;
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* —— 尺寸 —— */
+  /* 线形只有厚度分档；中间档不写规则，缺省即中档 */
+  .xh-scope-progress[data-part='root'][data-size='sm'] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-sm));
+  }
+
+  .xh-scope-progress[data-part='root'][data-size='lg'] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-lg));
+  }
+
+  /* —— 环形 —— */
+  /* 环画在固定的 100×100 viewBox 里，直径由这里的尺寸决定；
+     画面与环心文字叠在同一格上，文字因此恒在圆心 */
+  .xh-scope-progress[data-part='root'][data-variant='circle'],
+  .xh-scope-progress[data-part='root'][data-variant='dashboard'] {
+    --xh-_progress-diameter: var(--xh-progress-size, 7.5rem);
+
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--xh-_progress-diameter);
+    block-size: var(--xh-_progress-diameter);
+  }
+
+  .xh-scope-progress[data-part='root'][data-variant='circle'][data-size='sm'],
+  .xh-scope-progress[data-part='root'][data-variant='dashboard'][data-size='sm'] {
+    --xh-_progress-diameter: var(--xh-progress-size, 5rem);
+  }
+
+  .xh-scope-progress[data-part='root'][data-variant='circle'][data-size='lg'],
+  .xh-scope-progress[data-part='root'][data-variant='dashboard'][data-size='lg'] {
+    --xh-_progress-diameter: var(--xh-progress-size, 10rem);
+  }
+
+  .xh-scope-progress[data-part='canvas'],
+  .xh-scope-progress[data-part='label'] {
+    grid-area: 1 / 1;
+  }
+
+  .xh-scope-progress[data-part='canvas'] {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  /* 环心文字：12px 次级色，占位不撑格子，长内容自己换行由作者定 */
+  .xh-scope-progress[data-part='label'] {
+    color: var(--xh-progress-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-progress-label-font-size, var(--xh-text-caption-size));
+    line-height: var(--xh-leading-none);
+    text-align: center;
+  }
+
+  /* 圆心、半径与那两段虚线都由连接层算好写进内联样式，这里只上色。
+     底槽不跟着语气换族：只有已完成的那段换色，才读得出"完成了多少" */
+  .xh-scope-progress[data-part='track'][data-variant='circle'],
+  .xh-scope-progress[data-part='track'][data-variant='dashboard'] {
+    stroke: var(--xh-progress-track, var(--xh-bg-subtle-hover));
+  }
+
+  .xh-scope-progress[data-part='range'][data-variant='circle'],
+  .xh-scope-progress[data-part='range'][data-variant='dashboard'] {
+    stroke: var(--xh-progress-range, var(--xh-_tone, var(--xh-bg-brand)));
+    stroke-linecap: var(--xh-progress-linecap, round);
+    /* 环形的走完多少由虚线偏移表达，线形那一套按比例的平移在这里归零：SVG 图元的百分比平移按整个 viewBox 算，会把整段弧挪出画面 */
+    translate: none;
+    transition: stroke-dashoffset var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* —— 量的刻画：分段色带、目标刻度、量程刻度与指针 —— */
+  /* 子弹图：有分段时轨道加厚一档，填充收窄成中间一条压在色带上，色带在填充两侧照样读得出。
+     三档厚度各比普通线形高一档，阶梯次序不变 */
+  .xh-scope-progress[data-part='root'][data-variant='line'][data-banded] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-md));
+    --xh-_progress-range-size: 50%;
+  }
+
+  .xh-scope-progress[data-part='root'][data-variant='line'][data-banded][data-size='sm'] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-sm));
+  }
+
+  .xh-scope-progress[data-part='root'][data-variant='line'][data-banded][data-size='lg'] {
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-lg));
+  }
+
+  /* 色带取本段语气的淡色：同一族颜色里填充是实色、色带浅一档，读得出填充落在哪一段 */
+  .xh-scope-progress[data-part='threshold'] {
+    --xh-_progress-threshold: var(--xh-progress-threshold-color, var(--xh-_tone-subtle-active));
+  }
+
+  .xh-scope-progress[data-part='threshold'][data-variant='line'] {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(var(--xh-_progress-from, 0) * 100%);
+    inline-size: calc((var(--xh-_progress-to, 0) - var(--xh-_progress-from, 0)) * 100%);
+    background: var(--xh-_progress-threshold);
+  }
+
+  .xh-scope-progress[data-part='threshold'][data-variant='circle'],
+  .xh-scope-progress[data-part='threshold'][data-variant='dashboard'] {
+    stroke: var(--xh-_progress-threshold);
+  }
+
+  /* 目标刻度：一道竖线横穿轨道、上下各探出一点，读者一眼看出离目标还差多少 */
+  .xh-scope-progress[data-part='target'] {
+    --xh-_progress-target: var(--xh-progress-target-color, var(--xh-fg-default));
+  }
+
+  .xh-scope-progress[data-part='target'][data-variant='line'] {
+    position: absolute;
+    inset-block-start: calc(-1 * var(--xh-space-1));
+    inset-inline-start: calc(var(--xh-_progress-at, 0) * 100%);
+    inline-size: var(--xh-stroke-thick);
+    block-size: calc(var(--xh-_progress-thickness) + 2 * var(--xh-space-1));
+    border-radius: var(--xh-progress-target-radius, var(--xh-shape-pill));
+    background: var(--xh-_progress-target);
+    translate: -50% 0;
+  }
+
+  .xh-scope-progress[data-part='target'][data-variant='line']:dir(rtl) {
+    translate: 50% 0;
+  }
+
+  .xh-scope-progress[data-part='target'][data-variant='circle'],
+  .xh-scope-progress[data-part='target'][data-variant='dashboard'] {
+    stroke: var(--xh-_progress-target);
+    stroke-width: var(--xh-stroke-thick);
+    stroke-linecap: round;
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* 量程刻度：图表家具，线与字都取图表的标注色，数字等宽，不随进度的语气换色 */
+  .xh-scope-progress[data-part='scale'] {
+    color: var(--xh-chart-label);
+    font-size: var(--xh-text-caption-size);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-tight);
+    pointer-events: none;
+  }
+
+  .xh-scope-progress[data-part='scale'][data-variant='line'] {
+    position: relative;
+    block-size: calc(var(--xh-chart-tick-length) + var(--xh-chart-label-gap) + var(--xh-text-caption-size) * var(--xh-leading-tight));
+    margin-block-start: var(--xh-space-1);
+  }
+
+  .xh-scope-progress[data-part='scale-tick'][data-variant='line'] {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--xh-_progress-at, 0) * 100%);
+    inline-size: var(--xh-stroke-thin);
+    block-size: var(--xh-chart-tick-length);
+    background: var(--xh-chart-axis);
+    translate: -50% 0;
+  }
+
+  .xh-scope-progress[data-part='scale-tick'][data-variant='line']:dir(rtl) {
+    translate: 50% 0;
+  }
+
+  /* 两端的刻度值贴着轨道两端对齐，中间的居中在刻度线上：连接层给出对齐比例 */
+  .xh-scope-progress[data-part='scale-label'][data-variant='line'] {
+    position: absolute;
+    inset-block-start: calc(var(--xh-chart-tick-length) + var(--xh-chart-label-gap));
+    inset-inline-start: calc(var(--xh-_progress-at, 0) * 100%);
+    white-space: nowrap;
+    translate: calc(var(--xh-_progress-label-align) * -100%) 0;
+  }
+
+  .xh-scope-progress[data-part='scale-label'][data-variant='line']:dir(rtl) {
+    translate: calc(var(--xh-_progress-label-align) * 100%) 0;
+  }
+
+  .xh-scope-progress[data-part='scale-tick'][data-variant='circle'],
+  .xh-scope-progress[data-part='scale-tick'][data-variant='dashboard'] {
+    stroke: var(--xh-chart-axis);
+    stroke-width: var(--xh-stroke-thin);
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* 环形的刻度值叠在环上：与画面同一格，按连接层给出的百分比坐标落位。环形不随 RTL 镜像 */
+  .xh-scope-progress[data-part='scale'][data-variant='circle'],
+  .xh-scope-progress[data-part='scale'][data-variant='dashboard'] {
+    position: relative;
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .xh-scope-progress[data-part='scale-label'][data-variant='circle'],
+  .xh-scope-progress[data-part='scale-label'][data-variant='dashboard'] {
+    position: absolute;
+    inset-block-start: var(--xh-_progress-y, 50%);
+    /* stylelint-disable-next-line property-disallowed-list -- 环形不随 RTL 镜像，刻度值横坐标由连接层按物理左缘写入 */
+    left: var(--xh-_progress-x, 50%);
+    white-space: nowrap;
+    translate: -50% -50%;
+  }
+
+  /* 仪表盘的指针：朝 3 点钟画好，按当前值的角度绕环心转过去。转动是数值变化，不是部件原地形变：
+     与圆弧填充同一档时长与曲线，同一次值变化两者一起起步一起落定 */
+  .xh-scope-progress[data-part='needle'] {
+    fill: var(--xh-progress-needle-color, var(--xh-fg-default));
+    transform-box: view-box;
+    transform-origin: 50% 50%;
+    rotate: var(--xh-_progress-needle-angle, 0deg);
+    transition: rotate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  /* 指针从环心伸出：环心内容让到缺口那一侧 */
+  .xh-scope-progress[data-part='label'][data-indicator='needle'] {
+    align-self: end;
+  }
+
+  /* 进度未知：线形条改为固定宽度的一小段来回扫，位移交给动画，按比例的平移与它的过渡让开 */
+  .xh-scope-progress[data-part='track'][data-state='indeterminate'] {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .xh-scope-progress[data-part='range'][data-state='indeterminate'] {
+    position: absolute;
+    inset-inline-start: 0;
+    inline-size: 40%;
+    transition: none;
+    animation: xh-progress-indeterminate var(--xh-progress-indeterminate-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /* 减弱动效档：不来回扫，改成一条铺满的静态条——进度仍然未知，只是不再动。
+     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-progress[data-part='range'][data-state='indeterminate'] {
+      position: static;
+      inline-size: 100%;
+      opacity: 0.5;
+      translate: none;
+      animation: none;
+    }
+
+    /* 条纹留着、不再流动：纹理本身是静态的非颜色通道 */
+    .xh-scope-progress[data-part='range'][data-striped][data-state='loading'] {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-progress[data-part='range'][data-state='indeterminate'] {
+    position: static;
+    inline-size: 100%;
+    opacity: 0.5;
+    translate: none;
+    animation: none;
+  }
+
+  :where([data-motion='reduce']) .xh-scope-progress[data-part='range'][data-striped][data-state='loading'] {
+    animation: none;
+  }
+
+  /* 零进度：整段不画，从零起步的那一帧也不留一粒圆点 */
+  .xh-scope-progress[data-part='range'][data-empty] {
+    visibility: hidden;
+  }
+
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-progress[data-part='root'][hidden],
+  .xh-scope-progress[data-part='track'][hidden] {
+    display: none;
+  }
+
+  /* 指针档由指针指出当前值，弧上的填充收起、只留色带 */
+  .xh-scope-progress[data-part='range'][data-indicator='needle'] {
+    display: none;
+  }
+
+  /* SVG 里的部件不吃 UA 的 [hidden] 规则：作者自己写的目标刻度、指针在不适用时得自己收 */
+  .xh-scope-progress[data-part='target'][hidden],
+  .xh-scope-progress[data-part='scale'][hidden],
+  .xh-scope-progress[data-part='needle'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 高对比档：走完的那段与底槽都是底色画的，这一档里两者被换成同一个系统色，
+   * 整根条子成了一色，读不出走到哪儿。走完的那段改取系统高亮色，底槽补一圈环把全长框出来。
+   * 环用 outline 不用 border：条子的厚度是写死的，加边会把它顶高一档。
+   * 环形档画的是描边，stroke 在这一档里照旧生效，两条各自换成系统色即可。
+   */
+  @media (forced-colors: active) {
+    .xh-scope-progress[data-part='track'] {
+      outline: var(--xh-stroke-thin) solid CanvasText;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+    }
+
+    .xh-scope-progress[data-part='range'] {
+      background: Highlight;
+    }
+
+    .xh-scope-progress[data-part='track'][data-variant='circle'],
+    .xh-scope-progress[data-part='track'][data-variant='dashboard'] {
+      outline: none;
+      stroke: CanvasText;
+    }
+
+    .xh-scope-progress[data-part='range'][data-variant='circle'],
+    .xh-scope-progress[data-part='range'][data-variant='dashboard'] {
+      stroke: Highlight;
+    }
+
+    /* 色带在这一档里只剩分界：线形每段末端画一道灰线，环形的色带退掉，分段名仍由读屏文字给出 */
+    .xh-scope-progress[data-part='threshold'][data-variant='line'] {
+      forced-color-adjust: none;
+      border-inline-end: var(--xh-stroke-thin) solid GrayText;
+      background: Canvas;
+    }
+
+    .xh-scope-progress[data-part='threshold'][data-variant='circle'],
+    .xh-scope-progress[data-part='threshold'][data-variant='dashboard'] {
+      stroke: transparent;
+    }
+
+    .xh-scope-progress[data-part='target'][data-variant='line'],
+    .xh-scope-progress[data-part='scale-tick'][data-variant='line'] {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    .xh-scope-progress[data-part='target'][data-variant='circle'],
+    .xh-scope-progress[data-part='target'][data-variant='dashboard'],
+    .xh-scope-progress[data-part='scale-tick'][data-variant='circle'],
+    .xh-scope-progress[data-part='scale-tick'][data-variant='dashboard'] {
+      stroke: CanvasText;
+    }
+
+    .xh-scope-progress[data-part='needle'] {
+      fill: CanvasText;
+    }
+
+    /* 条纹在这一档里退掉：填充整段取高亮色才读得出走到哪儿，斜纹会把它切碎 */
+    .xh-scope-progress[data-part='range'][data-striped] {
+      background-image: none;
+    }
+
+    /* 缓冲段取灰：与底槽的 Canvas、填充的高亮色三者分得开 */
+    .xh-scope-progress[data-part='buffer'] {
+      forced-color-adjust: none;
+      background: GrayText;
+    }
+  }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    .xh-scope-progress[data-part='range'][data-state='indeterminate'] {
+      position: static;
+      inline-size: 100%;
+      opacity: 0.5;
+      translate: none;
+      animation: none;
+    }
+
+    .xh-scope-progress[data-part='range'][data-striped][data-state='loading'] {
+      animation: none;
+    }
+  }
+}