@xihan-ui/styles 1.0.0-alpha.2 → 1.0.0

package/css/empty-state.css

@@ -8,9 +8,9 @@
     /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_empty-state-gap: var(--xh-stack-gap-md);
-    --xh-_empty-state-py: var(--xh-section-py);
-    --xh-_empty-state-icon-size: 2.5rem;
-    --xh-_empty-state-title-size: var(--xh-font-size-lg);
+    --xh-_empty-state-py: var(--xh-section-py-md);
+    --xh-_empty-state-icon-size: var(--xh-glyph-size-2xl);
+    --xh-_empty-state-title-size: var(--xh-control-font-lg);
     /* 说明的读行宽度：整句话不收窄就会拉成一条难读的长行 */
     --xh-_empty-state-measure: 32rem;
 
@@ -31,17 +31,17 @@
   }
 
   [data-scope='empty-state'][data-part='root'][data-size='sm'] {
-    --xh-_empty-state-gap: var(--xh-space-2);
-    --xh-_empty-state-py: var(--xh-space-4);
-    --xh-_empty-state-icon-size: 2rem;
-    --xh-_empty-state-title-size: var(--xh-font-size-md);
+    --xh-_empty-state-gap: var(--xh-stack-gap-sm);
+    --xh-_empty-state-py: var(--xh-section-py-sm);
+    --xh-_empty-state-icon-size: var(--xh-glyph-size-xl);
+    --xh-_empty-state-title-size: var(--xh-control-font-md);
   }
 
   [data-scope='empty-state'][data-part='root'][data-size='lg'] {
-    --xh-_empty-state-gap: var(--xh-space-6);
-    --xh-_empty-state-py: var(--xh-space-8);
-    --xh-_empty-state-icon-size: 3.5rem;
-    --xh-_empty-state-title-size: var(--xh-font-size-xl);
+    --xh-_empty-state-gap: var(--xh-stack-gap-lg);
+    --xh-_empty-state-py: var(--xh-section-py-lg);
+    --xh-_empty-state-icon-size: var(--xh-glyph-size-3xl);
+    --xh-_empty-state-title-size: var(--xh-text-heading-3-size);
   }
 
   [data-scope='empty-state'][data-part='icon'] {
@@ -49,11 +49,14 @@
     align-items: center;
     justify-content: center;
     flex: none;
+    /* 作者塞进图标槽的 XhIcon 与皮肤画的字形同一把尺，都按展示档的图标框量 */
+    --xh-icon-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
+
     block-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
     inline-size: var(--xh-empty-state-icon-size, var(--xh-_empty-state-icon-size));
     color: var(--xh-empty-state-icon-fg, var(--xh-fg-subtle));
     /* 图标常是一个字形，字号跟着图标框走，line-height 不再另占高度 */
-    font-size: var(--xh-empty-state-icon-font-size, var(--xh-font-size-3xl));
+    font-size: var(--xh-empty-state-icon-font-size, var(--xh-_empty-state-icon-size));
     line-height: var(--xh-leading-none);
   }
 
@@ -80,4 +83,11 @@
     justify-content: center;
     gap: var(--xh-empty-state-action-gap, var(--xh-space-2));
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='empty-state'][data-part='icon'][hidden],
+  [data-scope='empty-state'][data-part='action'][hidden] {
+    display: none;
+  }
 }

package/css/field.css

@@ -22,8 +22,10 @@
   [data-scope='form'][data-part='root'][data-layout='horizontal'] [data-scope='field'][data-part='label'] {
     grid-column: 1;
     justify-self: end;
-    /* 与控件的首行文字对齐：按控件高度撑一行再居中 */
-    line-height: var(--xh-control-h-md);
+    /* 与控件的首行文字对齐：行高保持正文行距（标签折行时每行不会撑成一个控件高），
+       上下留白把单行文本盒撑到控件高度；配的是哪一档控件由 --xh-field-control-h 告诉它 */
+    line-height: var(--xh-field-label-leading, var(--xh-leading-normal));
+    padding-block: calc((var(--xh-field-control-h, var(--xh-control-h-md)) - 1lh) / 2);
   }
 
   [data-scope='form'][data-part='root'][data-layout='horizontal'][data-label-align='start'] [data-scope='field'][data-part='label'] {
@@ -47,7 +49,7 @@
 
   /* 必填星号：跟着根上的 data-required 亮，选填不标 */
   [data-scope='field'][data-part='root'][data-required] [data-part='label']::after {
-    content: '*';
+    content: var(--xh-glyph-mark-required);
     margin-inline-start: var(--xh-space-1);
     color: var(--xh-field-label-star, var(--xh-fg-danger));
   }
@@ -65,12 +67,13 @@
   }
 
   [data-scope='field'][data-part='control']:focus-visible {
+    border-color: var(--xh-field-control-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
   [data-scope='field'][data-part='control'][data-invalid] {
-    border-color: var(--xh-field-control-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-field-control-border-invalid, var(--xh-border-invalid));
   }
 
   /* 禁用由作者在控件上落原生 disabled，样式统一走 data-disabled */
@@ -83,7 +86,7 @@
   [data-scope='field'][data-part='description'] {
     margin: 0;
     color: var(--xh-field-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-field-description-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-field-description-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
   }
 
@@ -95,7 +98,14 @@
   [data-scope='field'][data-part='error-text'] {
     margin: 0;
     color: var(--xh-field-error-fg, var(--xh-fg-danger));
-    font-size: var(--xh-field-error-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-field-error-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-leading-normal);
   }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='field'][data-part='root'][hidden],
+  [data-scope='form'][data-part='root'][hidden] {
+    display: none;
+  }
 }

package/css/fieldset.css

@@ -0,0 +1,69 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='fieldset'] {
+    --xh-fieldset-skin: 1;
+  }
+
+  /* 抹掉 UA 给 <fieldset> 的边框、内外边距与 min-content 下限，间距全部改由令牌给。
+     display 落在 fieldset 的匿名内容盒上：首个 <legend> 不在这个盒子里，
+     所以 gap 只作用于组内各块，legend 与内容之间的留白由 legend 自己的下外边距给。 */
+  [data-scope='fieldset'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-fieldset-gap, var(--xh-space-4));
+    margin: 0;
+    border: 0;
+    padding: 0;
+    min-inline-size: 0;
+  }
+
+  [data-scope='fieldset'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='fieldset'][data-part='legend'] {
+    padding: 0;
+    margin-block-end: var(--xh-fieldset-legend-gap, var(--xh-space-2));
+    color: var(--xh-fieldset-legend-fg, var(--xh-fg-default));
+    font-size: var(--xh-fieldset-legend-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-fieldset-legend-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-tight);
+  }
+
+  /* 整组无效时组标题转警示色：没渲染错误文案的字段集上，这是屏幕上唯一变化的东西 */
+  [data-scope='fieldset'][data-part='root'][data-invalid] > [data-scope='fieldset'][data-part='legend'] {
+    color: var(--xh-fieldset-legend-fg-invalid, var(--xh-fg-danger));
+  }
+
+  /* 整组禁用时组标题跟着变淡；组内控件由原生 fieldset[disabled] 各自呈现禁用态。
+     选择器与上一条同权重且排在后面，禁用与无效同时为真时以禁用为准。 */
+  [data-scope='fieldset'][data-part='root'] > [data-scope='fieldset'][data-part='legend'][data-disabled] {
+    color: var(--xh-fieldset-legend-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 必填星号：跟着根上的 data-required 亮，选填不标 */
+  [data-scope='fieldset'][data-part='root'][data-required] > [data-scope='fieldset'][data-part='legend']::after {
+    content: var(--xh-glyph-mark-required);
+    margin-inline-start: var(--xh-space-1);
+    color: var(--xh-fieldset-legend-star, var(--xh-fg-danger));
+  }
+
+  [data-scope='fieldset'][data-part='helper-text'] {
+    margin: 0;
+    color: var(--xh-fieldset-helper-fg, var(--xh-fg-muted));
+    font-size: var(--xh-fieldset-helper-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
+  }
+
+  [data-scope='fieldset'][data-part='helper-text'][data-disabled] {
+    color: var(--xh-fieldset-helper-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 不 invalid 时节点带 hidden：此处不声明 display，交给浏览器的 [hidden] 规则收起 */
+  [data-scope='fieldset'][data-part='error-text'] {
+    margin: 0;
+    color: var(--xh-fieldset-error-fg, var(--xh-fg-danger));
+    font-size: var(--xh-fieldset-error-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
+  }
+}

package/css/file-upload.css

@@ -5,6 +5,9 @@
   }
 
   [data-scope='file-upload'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-file-upload-icon-size, var(--xh-glyph-size-text));
+
     display: flex;
     flex-direction: column;
     gap: var(--xh-file-upload-gap, var(--xh-space-3));
@@ -72,7 +75,7 @@
   }
 
   [data-scope='file-upload'][data-part='dropzone'][data-invalid] {
-    border-color: var(--xh-file-upload-dropzone-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-file-upload-dropzone-border-invalid, var(--xh-border-invalid));
   }
 
   /* 投放区是 div，没有原生 disabled 可用，禁用态只能靠 data-disabled 表达，写 :disabled 永远不命中 */
@@ -190,7 +193,7 @@
      只挑图标色不换底色：底色一换，一列文件里图片那几行会跳出来抢戏。
      取语义 token 而不是品牌色阶原值，深色主题才跟着走 */
   [data-scope='file-upload'][data-part='item-preview'][data-file-type^='image/'] {
-    color: var(--xh-file-upload-preview-fg-image, var(--xh-bg-brand));
+    color: var(--xh-file-upload-preview-fg-image, var(--xh-fg-brand));
   }
 
   /* 塞进来的真缩略图撑满这个方框，长宽比不对就裁掉，不许把格子顶变形 */
@@ -215,7 +218,7 @@
   [data-scope='file-upload'][data-part='item-size-text'] {
     flex: none;
     color: var(--xh-file-upload-size-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-file-upload-size-font-size, var(--xh-font-size-xs));
+    font-size: var(--xh-file-upload-size-font-size, var(--xh-text-caption-size));
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -230,8 +233,8 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-file-upload-delete-size, var(--xh-control-h-sm));
-    block-size: var(--xh-file-upload-delete-size, var(--xh-control-h-sm));
+    inline-size: var(--xh-file-upload-delete-size, var(--xh-control-action-size));
+    block-size: var(--xh-file-upload-delete-size, var(--xh-control-action-size));
     padding: 0;
     border: 0;
     border-radius: var(--xh-file-upload-delete-radius, var(--xh-shape-control));
@@ -240,6 +243,9 @@
     font-family: inherit;
     line-height: var(--xh-leading-none);
     cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='file-upload'][data-part='item-delete-trigger'][hidden] {
@@ -251,6 +257,12 @@
     color: var(--xh-file-upload-delete-fg-hover, var(--xh-fg-danger-hover));
   }
 
+  /* 按下：换到按压档底色并轻微下压，松手弹回；禁用钮不压 */
+  [data-scope='file-upload'][data-part='item-delete-trigger']:not(:disabled):active {
+    background: var(--xh-file-upload-delete-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
+  }
+
   [data-scope='file-upload'][data-part='item-delete-trigger']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
@@ -261,8 +273,7 @@
     cursor: not-allowed;
   }
 
-  /* 清空是收尾动作，画成不带底色的文字按钮：它比"选择文件"次要，
-     且列表为空时连接层会给原生 disabled，那时它本就该看着点不动 */
+  /* 清空是收尾动作，画成不带底色的文字按钮：它比"选择文件"次要 */
   [data-scope='file-upload'][data-part='clear-trigger'] {
     display: inline-flex;
     flex: none;
@@ -277,9 +288,12 @@
     background: transparent;
     color: var(--xh-file-upload-clear-fg, var(--xh-fg-muted));
     font-family: inherit;
-    font-size: var(--xh-file-upload-clear-font-size, var(--xh-font-size-xs));
+    font-size: var(--xh-file-upload-clear-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-none);
     cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='file-upload'][data-part='clear-trigger'][hidden] {
@@ -291,13 +305,37 @@
     color: var(--xh-file-upload-clear-fg-hover, var(--xh-fg-default));
   }
 
+  /* 按下：换到按压档底色并轻微下压，松手弹回；禁用钮不压 */
+  [data-scope='file-upload'][data-part='clear-trigger']:not(:disabled):active {
+    background: var(--xh-file-upload-clear-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
+  }
+
   [data-scope='file-upload'][data-part='clear-trigger']:focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
+  /* 空列表时按钮照常可按（收起它会让焦点掉回 body），只把前景压淡一档 */
+  [data-scope='file-upload'][data-part='clear-trigger'][data-empty] {
+    color: var(--xh-fg-subtle);
+  }
+
   [data-scope='file-upload'][data-part='clear-trigger']:disabled {
     color: var(--xh-fg-disabled);
     cursor: not-allowed;
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='file-upload'][data-part='item-delete-trigger']:empty::before,
+  [data-scope='file-upload'][data-part='clear-trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
 }

package/css/flex.css

@@ -17,11 +17,11 @@
   }
 
   /* —— 方向 —— */
-  [data-scope='flex'][data-part='root'][data-direction='row'] {
+  [data-scope='flex'][data-part='root'][data-orientation='horizontal'] {
     flex-direction: row;
   }
 
-  [data-scope='flex'][data-part='root'][data-direction='column'] {
+  [data-scope='flex'][data-part='root'][data-orientation='vertical'] {
     flex-direction: column;
   }
 
@@ -79,22 +79,28 @@
   /* —— 间距档位 —— */
   /* 每一档指向一个间距令牌，折行时行与行之间也吃这份间距 */
   [data-scope='flex'][data-part='root'][data-gap='xs'] {
-    gap: var(--xh-flex-gap, var(--xh-space-1));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-xs));
   }
 
   [data-scope='flex'][data-part='root'][data-gap='sm'] {
-    gap: var(--xh-flex-gap, var(--xh-space-2));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-sm));
   }
 
   [data-scope='flex'][data-part='root'][data-gap='md'] {
-    gap: var(--xh-flex-gap, var(--xh-space-3));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-md));
   }
 
   [data-scope='flex'][data-part='root'][data-gap='lg'] {
-    gap: var(--xh-flex-gap, var(--xh-space-4));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-lg));
   }
 
   [data-scope='flex'][data-part='root'][data-gap='xl'] {
-    gap: var(--xh-flex-gap, var(--xh-space-6));
+    gap: var(--xh-flex-gap, var(--xh-layout-gap-xl));
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='flex'][data-part='root'][hidden] {
+    display: none;
   }
 }

package/css/float-button.css

@@ -10,6 +10,9 @@
      transform / filter / backdrop-filter / contain，包含块就被抢走，整组立刻贴错位置——
      所以别往覆盖钩子里加这几个属性。 */
   [data-scope='float-button'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-glyph-size-text));
+
     --xh-_float-button-offset: var(--xh-space-6);
     /* 触发器与展开的每一条动作共用这两个私有槽，换档只改这里 */
     --xh-_float-button-size: var(--xh-float-button-size, var(--xh-control-h-lg));
@@ -67,7 +70,7 @@
     background: var(--xh-float-button-bg, var(--xh-bg-surface-raised));
     color: var(--xh-float-button-fg, var(--xh-fg-default));
     /* 浮在内容之上，靠投影与页面拉开层次 */
-    box-shadow: var(--xh-elevation-3);
+    box-shadow: var(--xh-float-button-shadow, var(--xh-elevation-sheet));
     cursor: pointer;
     transition:
       background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
@@ -123,4 +126,23 @@
     block-size: var(--xh-_float-button-size);
     border-radius: var(--xh-_float-button-radius);
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='float-button'][data-part='trigger']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='float-button'][data-part='root'][hidden],
+  [data-scope='float-button'][data-part='trigger'][hidden] {
+    display: none;
+  }
 }