@xihan-ui/styles 1.0.0 → 2.0.0

package/css/typography.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 typography 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='typography'] {
@@ -34,6 +41,12 @@
     display: none;
   }
 
+  /* 中间没有断点的长串——网址、令牌、无空格的标识——排到行尾就断开，不把整块正文顶宽。
+     属性由后代继承，这里逐个部件写一遍，是为了任一部件单独用时也盖得到 */
+  [data-scope='typography']:is([data-part='root'], [data-part='heading'], [data-part='paragraph'], [data-part='prose']) {
+    overflow-wrap: break-word;
+  }
+
   /* —— 尺寸 —— */
   /* 小档整体降一级字号档位 */
   [data-scope='typography'][data-part='root'][data-size='sm'] {
@@ -55,6 +68,40 @@
     --xh-_typography-heading-gap: var(--xh-space-8);
   }
 
+  /* —— 对齐与字重 —— */
+  /* 两轴都画在根上，整块正文一起换；各段沿继承拿到 */
+  [data-scope='typography'][data-part='root'][data-align='start'] {
+    text-align: start;
+  }
+
+  [data-scope='typography'][data-part='root'][data-align='center'] {
+    text-align: center;
+  }
+
+  [data-scope='typography'][data-part='root'][data-align='end'] {
+    text-align: end;
+  }
+
+  [data-scope='typography'][data-part='root'][data-align='justify'] {
+    text-align: justify;
+  }
+
+  [data-scope='typography'][data-part='root'][data-weight='regular'] {
+    font-weight: var(--xh-typography-font-weight, var(--xh-font-weight-regular));
+  }
+
+  [data-scope='typography'][data-part='root'][data-weight='medium'] {
+    font-weight: var(--xh-typography-font-weight, var(--xh-font-weight-medium));
+  }
+
+  [data-scope='typography'][data-part='root'][data-weight='semibold'] {
+    font-weight: var(--xh-typography-font-weight, var(--xh-font-weight-semibold));
+  }
+
+  [data-scope='typography'][data-part='root'][data-weight='bold'] {
+    font-weight: var(--xh-typography-font-weight, var(--xh-font-weight-bold));
+  }
+
   /* —— 块级段落 —— */
   /* 库里没有全局 preflight，作者写的 hN / p 带着 UA 外边距，在这儿抹平 */
   [data-scope='typography'][data-part='heading'],
@@ -112,8 +159,10 @@
 
   /* —— 行内文字 —— */
   /* 不写形态与语气时就是一段普通正文，这里只声明形态各自加的那一层 */
+  /* 次要文字与语气文字各有各的槽：两者同特异度、共用一个槽的话，
+     调淡次要文字会把六族语气一并换成同一个灰。 */
   [data-scope='typography'][data-part='text'][data-variant='muted'] {
-    color: var(--xh-typography-text-fg, var(--xh-fg-muted));
+    color: var(--xh-typography-text-fg-muted, var(--xh-fg-muted));
   }
 
   [data-scope='typography'][data-part='text'][data-variant='strong'] {
@@ -131,7 +180,24 @@
 
   /* 语气排在形态之后：两个轴一起写时，用哪族颜色由语气说了算 */
   [data-scope='typography'][data-part='text'][data-tone] {
-    color: var(--xh-typography-text-fg, var(--xh-_tone-fg));
+    color: var(--xh-typography-text-fg-tone, var(--xh-_tone-fg));
+  }
+
+  /* 字重排在形态之后：与 strong 一起写时，粗到哪一档由字重说了算 */
+  [data-scope='typography'][data-part='text'][data-weight='regular'] {
+    font-weight: var(--xh-font-weight-regular);
+  }
+
+  [data-scope='typography'][data-part='text'][data-weight='medium'] {
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  [data-scope='typography'][data-part='text'][data-weight='semibold'] {
+    font-weight: var(--xh-font-weight-semibold);
+  }
+
+  [data-scope='typography'][data-part='text'][data-weight='bold'] {
+    font-weight: var(--xh-font-weight-bold);
   }
 
   /* —— 行内链接 —— */
@@ -140,6 +206,7 @@
     color: var(--xh-typography-link-fg, var(--xh-fg-brand));
     text-decoration: underline;
     text-underline-offset: var(--xh-typography-link-underline-offset, var(--xh-space-0_5));
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 悬停只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
@@ -149,8 +216,164 @@
     }
   }
 
-  [data-scope='typography'][data-part='link']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* —— 富文本 —— */
+  /*
+   * 外来的整段 HTML 铺在这里：Markdown 渲染结果、后端返回的富文本，节点由内容自己带，
+   * 作者写不出 data-part，所以样式按标签给。
+   *
+   * 标签一律包进 :where()，整条规则的特异度只剩 prose 这一层，块里嵌 XiHan 组件时
+   * 那份皮肤仍然赢。字号档位与段间距取根上那几支私有槽，跟着 data-size 一起换。
+   */
+  [data-scope='typography'][data-part='prose'] {
+    color: var(--xh-typography-prose-fg, var(--xh-fg-default));
+    font-size: var(--xh-typography-prose-font-size, var(--xh-_typography-body-size));
+    line-height: var(--xh-typography-prose-leading, var(--xh-text-prose-leading));
+  }
+
+  /* 库里没有全局 preflight，外来节点带着 UA 外边距，先在这儿抹平 */
+  [data-scope='typography'][data-part='prose']
+    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, hr) {
+    margin: 0;
+  }
+
+  /* 间距画在后一块的上边，块与块之间只留一份，末块也不多出一截 */
+  [data-scope='typography'][data-part='prose']
+    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, hr)
+    + :where(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, hr) {
+    margin-block-start: var(--xh-typography-prose-block-gap, var(--xh-_typography-block-gap));
+  }
+
+  /* 标题上面留得更开，它带起的是下面一整段 */
+  [data-scope='typography'][data-part='prose']
+    :where(h1, h2, h3, h4, h5, h6, p, ul, ol, pre, blockquote, table, hr)
+    + :where(h1, h2, h3, h4, h5, h6) {
+    margin-block-start: var(--xh-typography-prose-heading-gap, var(--xh-_typography-heading-gap));
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--xh-typography-prose-heading-fg, var(--xh-fg-default));
+    font-weight: var(--xh-typography-prose-heading-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-leading-tight);
+    text-wrap: balance;
+  }
+
+  /* 六档字号与 heading 部件同源：同一块正文里，作者写的标题与外来的标题一样大 */
+  [data-scope='typography'][data-part='prose'] :where(h1) {
+    font-size: var(--xh-typography-prose-h1, var(--xh-_typography-h1));
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(h2) {
+    font-size: var(--xh-typography-prose-h2, var(--xh-_typography-h2));
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(h3) {
+    font-size: var(--xh-typography-prose-h3, var(--xh-_typography-h3));
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(h4) {
+    font-size: var(--xh-typography-prose-h4, var(--xh-_typography-h4));
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(h5) {
+    font-size: var(--xh-typography-prose-h5, var(--xh-_typography-h5));
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(h6) {
+    font-size: var(--xh-typography-prose-h6, var(--xh-_typography-h6));
+  }
+
+  /* 列表：项目符号要留在容器里面，缩进画在列表自己的起始内衬上 */
+  [data-scope='typography'][data-part='prose'] :where(ul, ol) {
+    padding-inline-start: var(--xh-typography-prose-list-ps, var(--xh-space-6));
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(li + li) {
+    margin-block-start: var(--xh-typography-prose-item-gap, var(--xh-space-1));
+  }
+
+  /* 嵌套列表贴着上一项走，不按块与块之间那一档拉开 */
+  [data-scope='typography'][data-part='prose'] :where(li) > :where(ul, ol) {
+    margin-block-start: var(--xh-typography-prose-item-gap, var(--xh-space-1));
+  }
+
+  /* 富文本里的链接缺省跟着 link 部件走：同一块正文里两处不同源就会有两种链接样式 */
+  [data-scope='typography'][data-part='prose'] :where(a) {
+    border-radius: var(--xh-typography-prose-link-radius, var(--xh-typography-link-radius, var(--xh-shape-inset)));
+    color: var(--xh-typography-prose-link-fg, var(--xh-typography-link-fg, var(--xh-fg-brand)));
+    text-decoration: underline;
+    text-underline-offset: var(
+      --xh-typography-prose-link-underline-offset,
+      var(--xh-typography-link-underline-offset, var(--xh-space-0_5))
+    );
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(strong) {
+    font-weight: var(--xh-typography-prose-strong-font-weight, var(--xh-font-weight-semibold));
+  }
+
+  /* 行内代码与 text 部件的 code 形态同源，同一块正文里两条路写出来一个样 */
+  [data-scope='typography'][data-part='prose'] :where(code) {
+    padding-block: var(--xh-typography-code-py, var(--xh-space-0_5));
+    padding-inline: var(--xh-typography-code-px, var(--xh-space-1));
+    border-radius: var(--xh-typography-code-radius, var(--xh-shape-inset));
+    background: var(--xh-typography-code-bg, var(--xh-bg-subtle));
+    font-family: var(--xh-typography-code-font, var(--xh-font-family-mono));
+    font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
+  }
+
+  /* 代码块自己成一片面，长行横向滚动而不是把整块正文撑宽 */
+  [data-scope='typography'][data-part='prose'] :where(pre) {
+    overflow-x: auto;
+    padding: var(--xh-typography-prose-pre-padding, var(--xh-space-4));
+    border-radius: var(--xh-typography-prose-pre-radius, var(--xh-shape-surface));
+    background: var(--xh-typography-prose-pre-bg, var(--xh-bg-subtle));
+    font-family: var(--xh-typography-code-font, var(--xh-font-family-mono));
+    font-size: var(--xh-typography-code-font-size, var(--xh-_typography-code-size));
+  }
+
+  /* 代码块里的 code 已经在 pre 那片面里，不再各自套一层内衬与底色 */
+  [data-scope='typography'][data-part='prose'] :where(pre) :where(code) {
+    padding: 0;
+    border-radius: 0;
+    background: none;
+    font-size: inherit;
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(blockquote) {
+    padding-inline-start: var(--xh-typography-prose-quote-ps, var(--xh-space-4));
+    border-inline-start: var(--xh-stroke-thick) solid
+      var(--xh-typography-prose-quote-border, var(--xh-border-subtle));
+    color: var(--xh-typography-prose-quote-fg, var(--xh-fg-muted));
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(hr) {
+    border: none;
+    border-block-start: var(--xh-stroke-thin) solid
+      var(--xh-typography-prose-rule-border, var(--xh-border-subtle));
+  }
+
+  /* 图片不许把整块正文撑宽，高度跟着缩才不变形 */
+  [data-scope='typography'][data-part='prose'] :where(img) {
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(table) {
+    inline-size: 100%;
+    border-collapse: collapse;
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(th, td) {
+    padding-block: var(--xh-typography-prose-cell-py, var(--xh-space-2));
+    padding-inline: var(--xh-typography-prose-cell-px, var(--xh-space-3));
+    border-block-end: var(--xh-stroke-thin) solid
+      var(--xh-typography-prose-cell-border, var(--xh-border-subtle));
+    text-align: start;
+    /* 表格的宽度由各格的最小宽度撑出来，格里的长串断得开，整张表才收得进正文的宽度 */
+    overflow-wrap: anywhere;
+  }
+
+  [data-scope='typography'][data-part='prose'] :where(th) {
+    font-weight: var(--xh-typography-prose-th-font-weight, var(--xh-font-weight-semibold));
   }
 }

package/css/undefined.css

@@ -1,3 +1,8 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
 /*
  * 元素升级前的形态。
  *
@@ -15,8 +20,10 @@
     xh-collapsible,
     xh-color-picker,
     xh-combobox,
+    xh-command,
     xh-context-menu,
     xh-date-picker,
+    xh-date-range-picker,
     xh-dialog,
     xh-drawer,
     xh-floating-panel,
@@ -29,11 +36,13 @@
     xh-pagination,
     xh-popconfirm,
     xh-popover,
-    xh-popselect,
+    xh-reasoning,
     xh-select,
     xh-side-nav,
     xh-steps,
     xh-time-picker,
+    xh-time-range-picker,
+    xh-tool-call,
     xh-tooltip,
     xh-tour,
     xh-tree-select

package/css/virtualizer.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 virtualizer 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='virtualizer'] {
@@ -34,9 +41,8 @@
        这两条是本文件里仅有的物理属性，换成逻辑写法会在多数浏览器上直接失效 */
     overflow-x: auto;
     overflow-y: auto;
-    /* 滚到尽头时不把剩余的滚动传给外层：长列表嵌在页面里时，
-       滚到底还继续带着整页走会让人找不着北 */
-    overscroll-behavior: contain;
+    /* 页内结构容器，滚到尽头把剩余的滚动交给外层（overscroll-behavior 保持 auto）：
+       contain 只给浮层、模态 body 与粘底视口（§6.6）。滚动条走 reset 层的原生细条 */
   }
 
   /* 单向列表把另一条轴关掉：那一向既没有内容也没有位移，能滚就成了滚不回来的暗格 */
@@ -48,13 +54,6 @@
     overflow-y: hidden;
   }
 
-  /* 视口带 tabindex=0（长列表里可能一个可聚焦元素都没有），因此要有焦点环。
-     偏移取负：环画在视口内侧，否则会被 root 的 overflow:hidden 裁掉半圈 */
-  [data-scope='virtualizer'][data-part='viewport']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
-  }
-
   /* 撑出总长的那层，同时是条目的定位上下文——条目是绝对定位的，
      没有它就会以最近的定位祖先（多半是页面某处）为参照，整列飘走。 */
   [data-scope='virtualizer'][data-part='content'] {

package/css/visually-hidden.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 visually hidden 样式。 */
+
 @layer xihan.components {
   .xh-visually-hidden {
     position: absolute;

package/css/watermark.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 watermark 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='watermark'] {