@xihan-ui/styles 2.0.0 → 3.0.0

package/css/truncate.css

@@ -42,24 +42,67 @@
     white-space: normal;
   }
 
-  /* 真被裁了才是那颗按钮：装得下的短文本按下去什么都不变，摆出手型等于许一个按不动的按钮。
-     铺开态另收一条——那一档量不出"被裁"，但收回去的入口必须留着 */
-  [data-scope='truncate'][data-part='root'][data-expandable][data-overflowing],
-  [data-scope='truncate'][data-part='root'][data-expandable][data-state='open'] {
-    cursor: pointer;
-    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  /* —— 中间省略 —— */
+  /* 盒子里的原文照旧排着、只是不上色：溢出照它量，读屏照它念，选中与复制拿到的也是整段。
+     看得见的两段由两个伪元素画：前一半从头排、末尾收省略号，后一半从尾排、开头直接截断，
+     两段各占一半宽度，拼起来就是省略号落在中间的那一版 */
+  [data-scope='truncate'][data-part='root'][data-middle-text] {
+    position: relative;
+    text-overflow: clip;
+    -webkit-text-fill-color: transparent;
   }
 
-  /* 是按钮的那一档才提亮：指针停在上面时这段文字与正文分开，
-     按不动的短文本不给这个反馈 */
-  [data-scope='truncate'][data-part='root'][data-expandable][data-overflowing]:hover,
-  [data-scope='truncate'][data-part='root'][data-expandable][data-state='open']:hover {
-    color: var(--xh-fg-default);
+  [data-scope='truncate'][data-part='root'][data-middle-text]::before,
+  [data-scope='truncate'][data-part='root'][data-middle-text]::after {
+    position: absolute;
+    inset-block: 0;
+    inline-size: 50%;
+    overflow: hidden;
+    white-space: nowrap;
+    -webkit-text-fill-color: currentColor;
+    pointer-events: none;
+  }
+
+  /* 替代文字给空串：这两段只是画出来的样子，读屏念的是盒子里的原文 */
+  [data-scope='truncate'][data-part='root'][data-middle-text]::before {
+    content: attr(data-middle-text) / '';
+    inset-inline-start: 0;
+    text-overflow: ellipsis;
+  }
+
+  /* 后一半的盒子贴在末尾侧，文字照正文的方向排：弹性容器按末端对齐，放不下的部分从起始侧溢出，
+     露出来的正是原文的结尾。不翻方向，也就不用分书写方向各写一版 */
+  [data-scope='truncate'][data-part='root'][data-middle-text]::after {
+    content: attr(data-middle-text) / '';
+    inset-inline-end: 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  /* —— 展开按钮 —— */
+  /* 盒型、悬停与按下面由 Action Control 的文字档给（ghost、sm）；排在文字盒子之后另起一行，
+     起始端对齐正文，不被外层的弹性布局拉宽 */
+  [data-scope='truncate'][data-part='trigger'] {
+    flex: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 这一档不保证文字填色照写的走：退回末尾省略，原文按系统色直接显示 */
+    [data-scope='truncate'][data-part='root'][data-middle-text] {
+      text-overflow: ellipsis;
+      -webkit-text-fill-color: currentColor;
+    }
+
+    [data-scope='truncate'][data-part='root'][data-middle-text]::before,
+    [data-scope='truncate'][data-part='root'][data-middle-text]::after {
+      content: none;
+    }
   }
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='truncate'][data-part='root'][hidden] {
+  [data-scope='truncate'][data-part='root'][hidden],
+  [data-scope='truncate'][data-part='trigger'][hidden] {
     display: none;
   }
 }

package/css/typography.css

@@ -6,6 +6,17 @@
 /* 定义 typography 样式。 */
 
 @layer xihan.components {
+  /* 渐变字的前景：缺省透明，透出裁进字形的渐变；高对比作用域里换成实色，盖住渐变。
+     轴边界上只路由这一个简单值，渐变本身仍在文字上按本地的两端颜色与走向求值，
+     内层 default / more 能双向重置，也不会把未解析的组件变量冻结在祖先上。 */
+  :where(:root, [data-contrast='default']) {
+    --xh-_typography-gradient-fg: transparent;
+  }
+
+  :where([data-contrast='more']) {
+    --xh-_typography-gradient-fg: var(--xh-fg-default);
+  }
+
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='typography'] {
     --xh-typography-skin: 1;
@@ -183,6 +194,37 @@
     color: var(--xh-typography-text-fg-tone, var(--xh-_tone-fg));
   }
 
+  /* 删除线与下划线是同一条装饰线的两个取值，两个开关都开时两条都画 */
+  [data-scope='typography'][data-part='text'][data-strikethrough] {
+    text-decoration-line: line-through;
+  }
+
+  [data-scope='typography'][data-part='text'][data-underline] {
+    text-decoration-line: underline;
+    text-underline-offset: var(--xh-typography-text-underline-offset, var(--xh-space-0_5));
+  }
+
+  [data-scope='typography'][data-part='text'][data-underline][data-strikethrough] {
+    text-decoration-line: underline line-through;
+  }
+
+  /* 标记：与文本高亮的命中片段同一副淡底、字色与收边，两处被标出的文字看起来是一回事。
+     排在语气之后：同时写语气时底与字色一起换成该族，只写语气不写标记仍只换字色。
+     跨行时两半各自收边，否则圆角与内边距只画在整段的首尾；两条都写：WebKit 只认带前缀那条 */
+  [data-scope='typography'][data-part='text'][data-marked] {
+    padding-inline: var(--xh-typography-mark-px, var(--xh-space-0_5));
+    border-radius: var(--xh-typography-mark-radius, var(--xh-shape-inset));
+    background: var(--xh-typography-mark-bg, var(--xh-bg-brand-subtle));
+    color: var(--xh-typography-mark-fg, var(--xh-fg-brand-strong));
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  [data-scope='typography'][data-part='text'][data-marked][data-tone] {
+    background: var(--xh-typography-mark-bg, var(--xh-_tone-subtle));
+    color: var(--xh-typography-mark-fg, var(--xh-_tone-fg));
+  }
+
   /* 字重排在形态之后：与 strong 一起写时，粗到哪一档由字重说了算 */
   [data-scope='typography'][data-part='text'][data-weight='regular'] {
     font-weight: var(--xh-font-weight-regular);
@@ -200,6 +242,42 @@
     font-weight: var(--xh-font-weight-bold);
   }
 
+  /* —— 渐变字 —— */
+  /* 渐变画在背景上，再用 background-clip 把背景裁进字形里；前景必须透明才透得出底下的渐变。
+     两条 background-clip 都写：WebKit 只认带前缀那条。
+     -webkit-text-fill-color 在 WebKit 里决定字形填充色并盖过 color，跟着 color 走。
+     排在语气之后：语气写的是前景色，渐变字的前景要留给上面那支透明槽 */
+  [data-scope='typography'][data-part='text'][data-variant='gradient'] {
+    /* 两端颜色各收一个私有槽：语气档换的是这两支，使用者槽仍排在它们前面 */
+    --xh-_typography-gradient-from: var(--xh-gradient-brand-from);
+    --xh-_typography-gradient-to: var(--xh-gradient-brand-to);
+
+    background-image: linear-gradient(
+      var(--xh-typography-gradient-direction, to right),
+      var(--xh-typography-gradient-from, var(--xh-_typography-gradient-from)),
+      var(--xh-typography-gradient-to, var(--xh-_typography-gradient-to))
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: var(--xh-_typography-gradient-fg);
+    -webkit-text-fill-color: currentColor;
+  }
+
+  /* 语气换的是两端颜色：取该族主色与它压深一档的取值，深浅两态自动跟随 */
+  [data-scope='typography'][data-part='text'][data-variant='gradient'][data-tone] {
+    --xh-_typography-gradient-from: var(--xh-_tone);
+    --xh-_typography-gradient-to: var(--xh-_tone-active);
+  }
+
+  /* 无 JS 时的系统高对比、强制色与打印统一退回单色；显式局部轴由文件头那支前景槽负责 */
+  @media (prefers-contrast: more), (forced-colors: active), print {
+    [data-scope='typography'][data-part='text'][data-variant='gradient'] {
+      background-image: none;
+      color: inherit;
+      -webkit-text-fill-color: currentColor;
+    }
+  }
+
   /* —— 行内链接 —— */
   [data-scope='typography'][data-part='link'] {
     border-radius: var(--xh-typography-link-radius, var(--xh-shape-inset));
@@ -376,4 +454,19 @@
   [data-scope='typography'][data-part='prose'] :where(th) {
     font-weight: var(--xh-typography-prose-th-font-weight, var(--xh-font-weight-semibold));
   }
+
+  @media (forced-colors: active) {
+    /* 这一档里自定义底色一律被换成 Canvas，标记会与正文分不开；用系统高亮反色把那一段画回来 */
+    [data-scope='typography'][data-part='text'][data-marked] {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底色，标记只剩字色，被标出的那段在纸上就不显眼了 */
+    [data-scope='typography'][data-part='text'][data-marked] {
+      print-color-adjust: exact;
+    }
+  }
 }

package/css/virtualizer.css

@@ -42,7 +42,7 @@
     overflow-x: auto;
     overflow-y: auto;
     /* 页内结构容器，滚到尽头把剩余的滚动交给外层（overscroll-behavior 保持 auto）：
-       contain 只给浮层、模态 body 与粘底视口（§6.6）。滚动条走 reset 层的原生细条 */
+       contain 只给浮层、模态 body 与粘底视口。滚动条走 reset 层的原生细条 */
   }
 
   /* 单向列表把另一条轴关掉：那一向既没有内容也没有位移，能滚就成了滚不回来的暗格 */
@@ -54,6 +54,33 @@
     overflow-y: hidden;
   }
 
+  /* 随整页滚动：这层不再是滚动容器，高度随内容撑开，两向都不裁 */
+  [data-scope='virtualizer'][data-part='viewport'][data-scroll-container='window'] {
+    block-size: auto;
+    overflow-x: visible;
+    overflow-y: visible;
+  }
+
+  /* 贴底：不足一屏时把内容推到尽头那一侧，最新的一条贴着底；超过一屏时自动外距归零，照常滚动 */
+  [data-scope='virtualizer'][data-part='viewport'][data-anchor='end'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [data-scope='virtualizer'][data-part='viewport'][data-anchor='end'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  [data-scope='virtualizer'][data-part='viewport'][data-anchor='end'] > [data-scope='virtualizer'][data-part='content'] {
+    flex-shrink: 0;
+    margin-block-start: auto;
+  }
+
+  [data-scope='virtualizer'][data-part='viewport'][data-anchor='end'][data-orientation='horizontal'] > [data-scope='virtualizer'][data-part='content'] {
+    margin-block-start: 0;
+    margin-inline-start: auto;
+  }
+
   /* 撑出总长的那层，同时是条目的定位上下文——条目是绝对定位的，
      没有它就会以最近的定位祖先（多半是页面某处）为参照，整列飘走。 */
   [data-scope='virtualizer'][data-part='content'] {
@@ -86,6 +113,24 @@
     block-size: 100%;
   }
 
+  /* 钉住的分组标题：留在文档流里按 sticky 钉在视口起点（连接层不给它写主轴位移），
+     压在滚过去的条目上面，所以要一块实底 */
+  [data-scope='virtualizer'][data-part='item'][data-fixed] {
+    position: sticky;
+    z-index: var(--xh-virtualizer-sticky-layer, var(--xh-layer-sticky));
+    background: var(--xh-virtualizer-sticky-bg, var(--xh-bg-surface));
+  }
+
+  [data-scope='virtualizer'][data-part='item'][data-fixed][data-orientation='vertical'] {
+    inset-block-start: 0;
+  }
+
+  /* 横向时留在文档流里的块会铺满整条内容层，收成自身宽度 */
+  [data-scope='virtualizer'][data-part='item'][data-fixed][data-orientation='horizontal'] {
+    inset-inline-start: 0;
+    inline-size: fit-content;
+  }
+
   /* 除视口外全是纯容器：既不进 Tab 序列也不承载焦点，作者若给它们加了 tabindex，
      该显形的也该是视口那圈环，不是这里再多画一圈。
      条目内部的可聚焦内容（按钮、链接）有它们自己的焦点环，不受这条影响。 */
@@ -99,6 +144,17 @@
      滚动期间关掉 pointer-events 之类的常见招数会让"滚一下就点"落空，
      留给作者按自己的取舍去接。 */
 
+  /* 高对比档里实底换成系统底色、与滚过去的条目同色：钉住的标题补一条系统描边，与下面的内容分开 */
+  @media (forced-colors: active) {
+    [data-scope='virtualizer'][data-part='item'][data-fixed][data-orientation='vertical'] {
+      border-block-end: var(--xh-stroke-thin) solid CanvasText;
+    }
+
+    [data-scope='virtualizer'][data-part='item'][data-fixed][data-orientation='horizontal'] {
+      border-inline-end: var(--xh-stroke-thin) solid CanvasText;
+    }
+  }
+
   /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位。
      连接层只在条目上写 hidden（不在窗口里的那些），其余三个是防作者自己写 hidden */
   [data-scope='virtualizer'][data-part='root'][hidden],

package/css/watermark.css

@@ -50,6 +50,29 @@
     mask-size: var(--xh-watermark-tile, auto);
   }
 
+  /* 全屏档：印子固定铺满整个视口，压在页面一切内容之上（对话框、轻提示、文字提示都在它下面），页面滚动时原地不动。
+     根不再建层叠上下文：隔离了的话，印子的层号只在根里比大小，会被根外那些浮层压住 */
+  [data-scope='watermark'][data-part='root'][data-fullscreen] {
+    isolation: auto;
+  }
+
+  [data-scope='watermark'][data-part='root'][data-state='ready'][data-fullscreen]::after {
+    position: fixed;
+    z-index: var(--xh-watermark-layer, var(--xh-layer-tooltip));
+  }
+
+  /*
+   * 高对比档：印子的颜色是遮罩底下那块底色，这一档里被系统换成 Canvas，与页面同色，整层印子消失。
+   * 印子是防泄露的标记，不能因为读者开了高对比就不印：退出强制换色、取 GrayText——系统给「弱化内容」
+   * 留的那个角色，深浅仍由图样自带的透明度压着，不与正文抢对比
+   */
+  @media (forced-colors: active) {
+    [data-scope='watermark'][data-part='root'][data-state='ready']::after {
+      forced-color-adjust: none;
+      background-color: GrayText;
+    }
+  }
+
   /* 遮罩不支持时整层不画：只剩底色的话，盖上去的会是一整块实心色 */
   @supports not ((mask-image: none) or (-webkit-mask-image: none)) {
     [data-scope='watermark'][data-part='root'][data-state='ready']::after {

package/family/action-control.css

@@ -54,6 +54,7 @@
     transition:
       background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
@@ -116,7 +117,7 @@
     --xh-_action-variant-border-focus-visible: var(--xh-_tone-border-control, var(--xh-border-control));
     --xh-_action-variant-bg-disabled: transparent;
     --xh-_action-variant-fg-disabled: var(--xh-fg-disabled);
-    --xh-_action-variant-border-disabled: var(--xh-border-subtle);
+    --xh-_action-variant-border-disabled: var(--xh-border-default);
     --xh-_action-variant-bg-loading: transparent;
     --xh-_action-variant-fg-loading: var(--xh-_tone-fg, var(--xh-fg-default));
     --xh-_action-variant-border-loading: var(--xh-_tone-border-control, var(--xh-border-control));
@@ -156,8 +157,16 @@
     --xh-_action-variant-fg-loading: var(--xh-action-on-brand-solid);
   }
 
+  [data-xh-action-control][data-xh-ink-surface] {
+    --xh-ink-surface: var(--xh-action-bg-rest, var(--xh-_action-variant-bg-rest));
+  }
+
+  [data-xh-action-control][data-xh-ink-surface][data-disabled] {
+    --xh-ink-surface: var(--xh-action-bg-disabled, var(--xh-bg-subtle-opaque));
+  }
+
   [data-xh-action-control][data-xh-action-size='xs'] {
-    --xh-_action-profile-visual-size: 24px;
+    --xh-_action-profile-visual-size: var(--xh-control-action-size);
     --xh-_action-profile-padding-inline: var(--xh-space-1);
     --xh-_action-profile-padding-block: 0;
     --xh-_action-profile-gap: var(--xh-space-1);
@@ -216,13 +225,13 @@
   }
 
   [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='xs'] {
-    --xh-_action-profile-glyph-size: 12px;
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-sm);
     --xh-_action-profile-font-size: var(--xh-control-caption-sm);
   }
 
   [data-xh-action-control][data-xh-action-profile='field-inset'][data-xh-action-size='sm'] {
-    --xh-_action-profile-visual-size: 24px;
-    --xh-_action-profile-glyph-size: 14px;
+    --xh-_action-profile-visual-size: var(--xh-control-action-size);
+    --xh-_action-profile-glyph-size: var(--xh-control-indicator-md);
     --xh-_action-profile-font-size: var(--xh-control-caption-sm);
   }