@xihan-ui/styles 2.1.0 → 3.1.0

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

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