@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/statistic.css

@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 statistic 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-statistic {
+    --xh-statistic-skin: 1;
+  }
+
+  /* 三个尺寸档只换这几个私有槽，各段从 root 继承它们，换档不必给每个部件各写一条选择器 */
+  .xh-scope-statistic[data-part='root'] {
+    --xh-_statistic-label-size: var(--xh-control-caption-md);
+    --xh-_statistic-value-size: var(--xh-text-heading-2-size);
+    --xh-_statistic-affix-size: var(--xh-control-font-md);
+    --xh-_statistic-row-gap: var(--xh-space-1);
+    /* 涨跌箭头与作者塞进来的图标同一把尺：跟着前后缀那一档字（14px）走，取 sm 字形 16px，大档抬到 md */
+    --xh-_statistic-icon-size: var(--xh-glyph-size-sm);
+    --xh-icon-size: var(--xh-statistic-icon-size, var(--xh-_statistic-icon-size));
+
+    /* 折行排布：标签独占一行，前缀、数值、后缀在下一行按基线对齐排在一起 */
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    /* 前后缀默认贴着数值：货币符号与百分号中间留白就不成一个数了，要间距的写法自己开槽 */
+    column-gap: var(--xh-statistic-gap, var(--xh-space-0));
+    row-gap: var(--xh-statistic-row-gap, var(--xh-_statistic-row-gap));
+    color: var(--xh-statistic-fg, var(--xh-fg-default));
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  .xh-scope-statistic[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  .xh-scope-statistic[data-part='root'][data-size='sm'] {
+    --xh-_statistic-label-size: var(--xh-control-caption-sm);
+    --xh-_statistic-value-size: var(--xh-text-heading-3-size);
+    --xh-_statistic-affix-size: var(--xh-control-font-sm);
+    --xh-_statistic-row-gap: var(--xh-space-0_5);
+  }
+
+  .xh-scope-statistic[data-part='root'][data-size='lg'] {
+    --xh-_statistic-label-size: var(--xh-control-caption-lg);
+    --xh-_statistic-value-size: var(--xh-text-heading-1-size);
+    --xh-_statistic-affix-size: var(--xh-control-font-lg);
+    --xh-_statistic-row-gap: var(--xh-space-1_5);
+    --xh-_statistic-icon-size: var(--xh-glyph-size-md);
+  }
+
+  /* —— 各段 —— */
+  /* 占满一整行，把前缀、数值、后缀挤到下一行去 */
+  .xh-scope-statistic[data-part='label'] {
+    flex: 0 0 100%;
+    color: var(--xh-statistic-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-statistic-label-font-size, var(--xh-_statistic-label-size));
+    font-weight: var(--xh-font-weight-regular);
+    line-height: var(--xh-leading-normal);
+  }
+
+  /* 等宽数字：逐位宽度一致，数值刷新时后面的字符不会左右挪动 */
+  .xh-scope-statistic[data-part='value'] {
+    color: var(--xh-statistic-value-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
+    font-size: var(--xh-statistic-value-font-size, var(--xh-_statistic-value-size));
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--xh-font-weight-semibold);
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 前后缀比数值小一档、跟着数值的语气走；没写语气时退成弱前景 */
+  .xh-scope-statistic[data-part='prefix'],
+  .xh-scope-statistic[data-part='suffix'] {
+    color: var(--xh-statistic-affix-fg, var(--xh-_tone-fg, var(--xh-fg-muted)));
+    font-size: var(--xh-statistic-affix-font-size, var(--xh-_statistic-affix-size));
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--xh-font-weight-regular);
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* —— 涨跌 —— */
+  /* 与数值同一行，中间空开一档；比数（同比、环比）由作者写进来 */
+  .xh-scope-statistic[data-part='trend'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-statistic-trend-gap, var(--xh-space-0_5));
+    margin-inline-start: var(--xh-statistic-trend-offset, var(--xh-space-2));
+    color: var(--xh-statistic-trend-fg, var(--xh-_tone-fg, var(--xh-fg-muted)));
+    font-size: var(--xh-statistic-trend-font-size, var(--xh-_statistic-affix-size));
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--xh-font-weight-regular);
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 方向逐档换字形，箭头由皮肤画，示例里不必手打 */
+  .xh-scope-statistic[data-part='trend'][data-direction='up'] {
+    --xh-_statistic-trend-mark: var(--xh-glyph-mark-arrow-up);
+  }
+
+  .xh-scope-statistic[data-part='trend'][data-direction='down'] {
+    --xh-_statistic-trend-mark: var(--xh-glyph-mark-arrow-down);
+  }
+
+  .xh-scope-statistic[data-part='trend'][data-direction='flat'] {
+    --xh-_statistic-trend-mark: var(--xh-glyph-mark-minus);
+  }
+
+  .xh-scope-statistic[data-part='trend'][data-direction]::before {
+    content: '';
+    display: inline-block;
+    flex: none;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-sm));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-_statistic-trend-mark) center / contain no-repeat;
+    mask: var(--xh-_statistic-trend-mark) center / contain no-repeat;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-statistic[data-part='trend'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       落在 Canvas 面上的取 CanvasText */
+    .xh-scope-statistic[data-part='trend'][data-direction]::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
+}