@xihan-ui/styles 1.0.0 → 2.0.0

package/css/file-upload.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.
+ */
+
+/* 定义 file upload 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='file-upload'] {
@@ -5,7 +12,9 @@
   }
 
   [data-scope='file-upload'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    /* 作者放进缩略图槽、删除钮与清空钮里的图标跟着字号走，与皮肤画的兜底叉同一把尺。
+       条目行首自绘的状态标记（传完的勾、失败的警示）不读这支：它们是指示符，与同一行里 icon 档的
+       删除钮并排、走 --xh-control-indicator-* 一族（§6.5），尺寸由 --xh-file-upload-item-mark-size 单独控 */
     --xh-icon-size: var(--xh-file-upload-icon-size, var(--xh-glyph-size-text));
 
     display: flex;
@@ -22,7 +31,6 @@
     color: var(--xh-file-upload-label-fg, var(--xh-fg-default));
     font-size: var(--xh-file-upload-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-file-upload-label-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
   }
 
   [data-scope='file-upload'][data-part='label'][data-disabled] {
@@ -42,7 +50,7 @@
     padding-inline: var(--xh-file-upload-dropzone-px, var(--xh-space-4));
     border: var(--xh-stroke-thick) dashed var(--xh-file-upload-dropzone-border, var(--xh-border-control));
     border-radius: var(--xh-file-upload-dropzone-radius, var(--xh-shape-surface));
-    background: var(--xh-file-upload-dropzone-bg, var(--xh-bg-canvas));
+    background: var(--xh-file-upload-dropzone-bg, transparent);
     color: var(--xh-file-upload-dropzone-fg, var(--xh-fg-muted));
     font-size: var(--xh-file-upload-dropzone-font-size, var(--xh-text-body-size));
     text-align: center;
@@ -57,15 +65,17 @@
     display: none;
   }
 
-  /* hover 只在中性态换描边：invalid 与 dragging 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
+  /* hover 只在中性态命中：invalid 与 dragging 正拿边框颜色说事，被 hover 盖掉那条信息就没了。
+     描边与底一起换：这块面有整整八行高，只挪一圈 1px 的描边在这个面积上几乎读不出来 */
   [data-scope='file-upload'][data-part='dropzone']:hover:not([data-disabled], [data-invalid], [data-dragging]) {
     border-color: var(--xh-file-upload-dropzone-border-hover, var(--xh-border-control-hover));
+    background: var(--xh-file-upload-dropzone-bg-hover, var(--xh-bg-subtle));
   }
 
-  /* 投放区自己承载焦点（它就是那个大按钮），所以画环而不是 outline:none */
-  [data-scope='file-upload'][data-part='dropzone']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 键盘落焦时描边跟着语气走，与聚焦环同族；环由 focus.css 统一画。
+     摘掉的三档与 hover 那条一致：它们各自正拿边框颜色说事 */
+  [data-scope='file-upload'][data-part='dropzone']:focus-visible:not([data-disabled], [data-invalid], [data-dragging]) {
+    border-color: var(--xh-file-upload-dropzone-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
   }
 
   /* 悬停在上方：整块换成品牌色描边加浅底，比只换边框显眼得多 */
@@ -80,10 +90,9 @@
 
   /* 投放区是 div，没有原生 disabled 可用，禁用态只能靠 data-disabled 表达，写 :disabled 永远不命中 */
   [data-scope='file-upload'][data-part='dropzone'][data-disabled] {
-    border-color: var(--xh-border-subtle);
+    border-color: var(--xh-border-default);
     background: var(--xh-file-upload-dropzone-bg-disabled, var(--xh-bg-subtle));
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
   [data-scope='file-upload'][data-part='trigger'] {
@@ -103,26 +112,35 @@
     font-size: var(--xh-file-upload-trigger-font-size, var(--xh-text-body-size));
     line-height: var(--xh-leading-none);
     cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
   [data-scope='file-upload'][data-part='trigger'][hidden] {
     display: none;
   }
 
+  /* 悬停换底色的同时把这块面抬起一档：只换底色的回执在一颗按钮上太轻 */
   [data-scope='file-upload'][data-part='trigger']:hover:not(:disabled) {
     background: var(--xh-file-upload-trigger-bg-hover, var(--xh-bg-subtle-hover));
+    box-shadow: var(--xh-file-upload-trigger-shadow-hover, var(--xh-elevation-raised));
   }
 
-  [data-scope='file-upload'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 按下：换到按压档底色并轻微下压，抬起的那一档同时落回，松手弹回；禁用钮不压 */
+  [data-scope='file-upload'][data-part='trigger']:not(:disabled):is(:active, [data-pressed]) {
+    background: var(--xh-file-upload-trigger-bg-active, var(--xh-bg-subtle-active));
+    box-shadow: none;
+    scale: var(--xh-motion-scale-press);
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
   }
 
   /* 单体控件走原生 disabled（与集合条目的 aria-disabled 相反），因此用 :disabled */
   [data-scope='file-upload'][data-part='trigger']:disabled {
     background: var(--xh-bg-subtle);
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
   /* 连接层已经把这一套视觉隐藏写进了内联 style，这里是给元素升级前那一瞬兜底
@@ -140,23 +158,34 @@
     white-space: nowrap;
   }
 
-  [data-scope='file-upload'][data-part='item-group'] {
+  /* 文件条数由用户一次选进来多少给，行数没有尽头：
+     列表到这个高度就不再长，剩下的行在列表内滚出来，投放区与触发钮不会被推出视野 */
+  [data-scope='file-upload'][data-part='list'] {
     display: flex;
+    max-block-size: var(--xh-file-upload-list-max-h, var(--xh-viewport-h-md));
+    overflow-y: auto;
     flex-direction: column;
     gap: var(--xh-file-upload-item-gap, var(--xh-space-2));
   }
 
-  [data-scope='file-upload'][data-part='item-group'][hidden] {
+  [data-scope='file-upload'][data-part='list'][hidden] {
     display: none;
   }
 
+  /* 私有槽一个：传输进度的 0..1 比例，由连接层写进进度条的内联样式，
+     这里给个 0 的缺省——没接上传器时进度条根本不露面，也就没有宽度可算。 */
   [data-scope='file-upload'][data-part='item'] {
+    --xh-_file-upload-progress: 0;
+
     display: flex;
+    /* 一行排不下就换行：文件名有自己的下限，挤到那个下限之后由后面的部件另起一行，
+       而不是把文件名继续压到零宽 */
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--xh-file-upload-item-inner-gap, var(--xh-control-gap-md));
     padding-block: var(--xh-file-upload-item-py, var(--xh-space-2));
     padding-inline: var(--xh-file-upload-item-px, var(--xh-space-3));
-    border: var(--xh-stroke-thin) solid var(--xh-file-upload-item-border, var(--xh-border-subtle));
+    border: var(--xh-stroke-thin) solid var(--xh-file-upload-item-border, var(--xh-border-default));
     border-radius: var(--xh-file-upload-item-radius, var(--xh-shape-control));
     background: var(--xh-file-upload-item-bg, var(--xh-bg-surface));
     color: var(--xh-file-upload-item-fg, var(--xh-fg-default));
@@ -171,6 +200,69 @@
     color: var(--xh-fg-disabled);
   }
 
+  /* 上传失败的那一行必须一眼认出来：不标出来的话它跟传完的行渲染完全一致，
+     用户不知道该按哪一条的重试。红边之外再补一枚警示字形——只靠颜色的话，
+     色觉障碍用户与灰度打印下这一档等于没有。
+     警示与下面的勾都是固定状态标记（不是 :empty 兜底，作者塞进条目的部件顶不掉）：按指示符档取尺
+     （comfortable 16 / compact 14，随密度换档），不读只管作者图标的 --xh-icon-size——随文 1em 落在
+     14 上下，comfortable 下比同一行里的指示符档小一圈、compact 下又不换档 */
+  [data-scope='file-upload'][data-part='item'][data-state='error'] {
+    border-color: var(--xh-file-upload-item-border-error, var(--xh-border-invalid));
+    color: var(--xh-file-upload-item-fg-error, var(--xh-fg-danger));
+  }
+
+  [data-scope='file-upload'][data-part='item'][data-state='error']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-file-upload-item-mark-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-file-upload-item-mark-size, var(--xh-control-indicator-size));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-warning) center / contain no-repeat;
+  }
+
+  /* 传完的那一行补一枚对勾，与失败那一枚警示字形对称：
+     不标出来的话「传完了」与「还没开始」在这一行上看不出分别 */
+  [data-scope='file-upload'][data-part='item'][data-state='done']::before {
+    content: '';
+    flex: none;
+    inline-size: var(--xh-file-upload-item-mark-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-file-upload-item-mark-size, var(--xh-control-indicator-size));
+    background-color: var(--xh-file-upload-item-fg-done, var(--xh-fg-success));
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  /* 传输进度条：只在传输中露面，宽度按连接层写下的比例走。
+     进度是连续量，走 continuous 曲线，不是入场曲线 */
+  [data-scope='file-upload'][data-part='item-progress'] {
+    display: none;
+    overflow: hidden;
+    flex: none;
+    inline-size: var(--xh-file-upload-item-progress-w, calc(var(--xh-control-h-md) * 2));
+    block-size: var(--xh-file-upload-item-progress-h, var(--xh-stroke-thick));
+    border-radius: var(--xh-file-upload-item-progress-radius, var(--xh-shape-pill));
+    background: var(--xh-file-upload-item-progress-track, var(--xh-bg-subtle));
+  }
+
+  [data-scope='file-upload'][data-part='item-progress'][data-state='uploading'] {
+    display: block;
+  }
+
+  [data-scope='file-upload'][data-part='item-progress'][data-state='uploading']::before {
+    content: '';
+    display: block;
+    block-size: 100%;
+    border-radius: inherit;
+    background: var(--xh-file-upload-item-progress-fill, var(--xh-bg-brand));
+    inline-size: calc(var(--xh-_file-upload-progress, 0) * 100%);
+    transition: inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous);
+  }
+
+  [data-scope='file-upload'][data-part='item-progress'][hidden] {
+    display: none;
+  }
+
   /* 缩略图占位：作者往里塞图标或真缩略图，尺寸由这里定死，一行行的图标才对得齐 */
   [data-scope='file-upload'][data-part='item-preview'] {
     display: inline-flex;
@@ -203,11 +295,12 @@
     object-fit: cover;
   }
 
-  /* 文件名占满中间那段并用省略号收口：不写 min-inline-size 的话，
-     flex 项的最小尺寸是内容宽度，长文件名会把整行顶宽而不是被截断 */
+  /* 文件名占满中间那段并用省略号收口。
+     下限是这一行的换行点：名字缩到这个宽度还不够，后面的部件就被推去下一行；
+     再用 100% 收一次口——容器比这个下限还窄时，名字只占满容器，不把整行顶宽 */
   [data-scope='file-upload'][data-part='item-name'] {
     flex: 1;
-    min-inline-size: 0;
+    min-inline-size: min(var(--xh-file-upload-item-name-min-w, var(--xh-control-min-w)), 100%);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -245,7 +338,7 @@
     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);
+      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
   [data-scope='file-upload'][data-part='item-delete-trigger'][hidden] {
@@ -258,19 +351,15 @@
   }
 
   /* 按下：换到按压档底色并轻微下压，松手弹回；禁用钮不压 */
-  [data-scope='file-upload'][data-part='item-delete-trigger']:not(:disabled):active {
+  [data-scope='file-upload'][data-part='item-delete-trigger']:not(:disabled):is(:active, [data-pressed]) {
     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);
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
   }
 
   [data-scope='file-upload'][data-part='item-delete-trigger']:disabled {
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
   /* 清空是收尾动作，画成不带底色的文字按钮：它比"选择文件"次要 */
@@ -293,7 +382,7 @@
     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);
+      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
   [data-scope='file-upload'][data-part='clear-trigger'][hidden] {
@@ -306,14 +395,11 @@
   }
 
   /* 按下：换到按压档底色并轻微下压，松手弹回；禁用钮不压 */
-  [data-scope='file-upload'][data-part='clear-trigger']:not(:disabled):active {
+  [data-scope='file-upload'][data-part='clear-trigger']:not(:disabled):is(:active, [data-pressed]) {
     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);
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
   }
 
   /* 空列表时按钮照常可按（收起它会让焦点掉回 body），只把前景压淡一档 */
@@ -323,7 +409,19 @@
 
   [data-scope='file-upload'][data-part='clear-trigger']:disabled {
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  }
+
+  /*
+   * 高对比档：三颗钮的按压面常态靠换底表出，这一档里底色被统一换成 Canvas，按住那一下与静息塌成同一个样子；
+   * 用系统高亮反色画回来，兜底字形读 currentColor、自己跟着换
+   */
+  @media (forced-colors: active) {
+    [data-scope='file-upload'][data-part='trigger']:not(:disabled):is(:active, [data-pressed]),
+    [data-scope='file-upload'][data-part='item-delete-trigger']:not(:disabled):is(:active, [data-pressed]),
+    [data-scope='file-upload'][data-part='clear-trigger']:not(:disabled):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */

package/css/flex.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.
+ */
+
+/* 定义 flex 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='flex'] {
@@ -16,13 +23,24 @@
     display: inline-flex;
   }
 
-  /* —— 方向 —— */
+  /* 分隔符：夹在两个子项之间的装饰件，样子由放进去的内容决定。
+     这里只兜住两件事——不被主轴挤扁（一条 1px 的竖线会被弹性收缩吃没），
+     交叉轴上不单独发话，跟着容器的对齐走：横排随中线、竖排随拉伸 */
+  [data-scope='flex'][data-part='split'] {
+    flex: none;
+  }
+
+  /* —— 方向与缺省对齐 —— */
+  /* 横排时按中线对齐：一排里混着文字、按钮、标签，高度本就不齐，居中最不容易看出错位 */
   [data-scope='flex'][data-part='root'][data-orientation='horizontal'] {
     flex-direction: row;
+    align-items: center;
   }
 
+  /* 竖排时拉伸：一列里的块级子项该占满容器宽度 */
   [data-scope='flex'][data-part='root'][data-orientation='vertical'] {
     flex-direction: column;
+    align-items: stretch;
   }
 
   /* —— 折行 —— */
@@ -31,6 +49,7 @@
   }
 
   /* —— 交叉轴对齐 —— */
+  /* 排在方向之后：两者特指度相同，写了 align 就该压过随方向来的那份缺省 */
   [data-scope='flex'][data-part='root'][data-align='start'] {
     align-items: flex-start;
   }