@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/file-upload.css

@@ -0,0 +1,429 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 file upload 样式。 */
+
+/* 文件行的进场、退场与完成对号的淡入取共享关键帧。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-file-upload {
+    --xh-file-upload-skin: 1;
+  }
+
+  .xh-scope-file-upload[data-part='root'] {
+    /* 作者放进缩略图槽、删除钮与清空钮里的图标跟着字号走，与皮肤画的兜底叉同一把尺。
+       条目行首自绘的状态标记（传完的勾、失败的警示）不读这支：它们是指示符，与同一行里 icon 档的
+       删除钮并排、走 --xh-control-indicator-* 一族，尺寸由 --xh-file-upload-item-mark-size 单独控 */
+    --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));
+  }
+
+  /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  .xh-scope-file-upload[data-part='root'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-file-upload[data-part='label'] {
+    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));
+  }
+
+  .xh-scope-file-upload[data-part='label'][data-disabled] {
+    color: var(--xh-file-upload-label-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 虚线框是"这里能放东西"的通用说法，实线框看起来只是一个普通面板。
+     整块可点、可聚焦（连接层给了 role=button 与 tabindex），所以指针形状用 pointer */
+  .xh-scope-file-upload[data-part='dropzone'] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-file-upload-dropzone-gap, var(--xh-space-2));
+    min-block-size: var(--xh-file-upload-dropzone-min-h, 8rem);
+    padding-block: var(--xh-file-upload-dropzone-py, var(--xh-space-5));
+    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, 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;
+    cursor: pointer;
+    /* 拖着文件经过时颜色要立刻跟上：这是"松手就能放下"的唯一提示 */
+    transition:
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-file-upload[data-part='dropzone'][hidden] {
+    display: none;
+  }
+
+  /* hover 只在中性态命中：invalid 与 dragging 正拿边框颜色说事，被 hover 盖掉那条信息就没了。
+     描边与底一起换：这块面有整整八行高，只挪一圈 1px 的描边在这个面积上几乎读不出来 */
+  .xh-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));
+  }
+
+  /* 键盘落焦时描边跟着语气走，与聚焦环同族；环由 focus.css 统一画。
+     摘掉的三档与 hover 那条一致：它们各自正拿边框颜色说事 */
+  .xh-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)));
+  }
+
+  /* 悬停在上方：整块换成品牌色描边加浅底，比只换边框显眼得多 */
+  .xh-scope-file-upload[data-part='dropzone'][data-dragging] {
+    border-color: var(--xh-file-upload-dropzone-border-dragging, var(--xh-bg-brand));
+    background: var(--xh-file-upload-dropzone-bg-dragging, var(--xh-bg-subtle));
+  }
+
+  .xh-scope-file-upload[data-part='dropzone'][data-invalid] {
+    border-color: var(--xh-file-upload-dropzone-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 投放区是 div，没有原生 disabled 可用，禁用态只能靠 data-disabled 表达，写 :disabled 永远不命中 */
+  .xh-scope-file-upload[data-part='dropzone'][data-disabled] {
+    border-color: var(--xh-border-default);
+    background: var(--xh-file-upload-dropzone-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 「选择文件」是定尺的独立动作按钮：盒型、三档几何、悬停 100 / 按下 200 与 0.97 按压、焦点环、禁用面与
+     粗指针命中区由 Action Control 家族按 text 档 outline 给（连接层投影），不再悬停抬 raised 影。
+     这里只把使用者槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省） */
+  .xh-scope-file-upload[data-part='trigger'] {
+    --xh-action-bg-rest: var(--xh-file-upload-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-file-upload-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-file-upload-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-file-upload-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-file-upload-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-file-upload-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: var(--xh-file-upload-trigger-border, var(--xh-_action-variant-border-rest));
+    /* 矩阵各态无影：使用者槽仍可自行加 */
+    --xh-action-shadow-hover: var(--xh-file-upload-trigger-shadow-hover, none);
+    --xh-action-radius: var(--xh-file-upload-trigger-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-file-upload-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-file-upload-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-gap: var(--xh-file-upload-trigger-gap, var(--xh-_action-profile-gap));
+    --xh-action-font-size: var(--xh-file-upload-trigger-font-size, var(--xh-_action-profile-font-size));
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    flex: none;
+    font-weight: var(--xh-file-upload-trigger-font-weight, var(--xh-text-label-weight));
+  }
+
+  .xh-scope-file-upload[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 连接层已经把这一套视觉隐藏写进了内联 style，这里是给元素升级前那一瞬兜底
+     （作者手写的是一个普通 file input，接线完成前它是可见的）。
+     刻意不写 display：藏起来的输入仍要留在布局里，原生表单校验的气泡才有可指的锚点 */
+  .xh-scope-file-upload[data-part='hidden-input'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* 文件条数由用户一次选进来多少给，行数没有尽头：
+     列表到这个高度就不再长，剩下的行在列表内滚出来，投放区与触发钮不会被推出视野。
+     定位是给列表动效放离场替身用的：删掉的那一行在原排布位上播完退场 */
+  .xh-scope-file-upload[data-part='list'] {
+    position: relative;
+    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));
+  }
+
+  .xh-scope-file-upload[data-part='list'][hidden] {
+    display: none;
+  }
+
+  /* 私有槽一个：传输进度的 0..1 比例，由连接层写进进度条的内联样式，
+     这里给个 0 的缺省——没接上传器时进度条根本不露面，也就没有宽度可算。 */
+  .xh-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-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));
+    font-size: var(--xh-file-upload-item-font-size, var(--xh-text-body-size));
+  }
+
+  /* 列表动效：新收下的文件进场，同一批按到达顺序错开；首帧就在的直接呈现（自己或列表带 data-instant）。
+     删掉的那一行由替身留在原处淡出，播完即移除；其余行先按旧位置反向补偿、再沿 translate 过渡滑到新位置 */
+  .xh-scope-file-upload[data-part='item'] {
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  .xh-scope-file-upload[data-part='item']:not([data-instant], [data-instant] > :where(.xh-scope-file-upload)) {
+    animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+    animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
+  }
+
+  /* 替身的 data-state 换成了 closed，传输状态从进度条（同一份状态事实）上读回来：
+     失败与传完那一行退场时仍带着行首标记与失败配色，文件名不会在淡出途中往行首一跳 */
+  .xh-scope-file-upload[data-part='item'][data-state='closed'] {
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  .xh-scope-file-upload[data-part='item'][hidden] {
+    display: none;
+  }
+
+  .xh-scope-file-upload[data-part='item'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 上传失败的那一行必须一眼认出来：不标出来的话它跟传完的行渲染完全一致，
+     用户不知道该按哪一条的重试。红边之外再补一枚警示字形——只靠颜色的话，
+     色觉障碍用户与灰度打印下这一档等于没有。
+     警示与下面的勾都是固定状态标记（不是 :empty 兜底，作者塞进条目的部件顶不掉）：按指示符档取尺
+     （comfortable 16 / compact 14，随密度换档），不读只管作者图标的 --xh-icon-size——随文 1em 落在
+     14 上下，comfortable 下比同一行里的指示符档小一圈、compact 下又不换档 */
+  .xh-scope-file-upload[data-part='item'][data-state='error'],
+  .xh-scope-file-upload[data-part='item'][data-state='closed']:has(> [data-part='item-progress'][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));
+  }
+
+  .xh-scope-file-upload[data-part='item'][data-state='error']::before,
+  .xh-scope-file-upload[data-part='item'][data-state='closed']:has(> [data-part='item-progress'][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;
+  }
+
+  /* 传完的那一行补一枚对勾，与失败那一枚警示字形对称：
+     不标出来的话「传完了」与「还没开始」在这一行上看不出分别 */
+  .xh-scope-file-upload[data-part='item'][data-state='done']::before,
+  .xh-scope-file-upload[data-part='item'][data-state='closed']:has(> [data-part='item-progress'][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;
+  }
+
+  /* 这一会儿才传完的那一行：进度条走满之后与对号交叉——条子淡出、对号淡入。
+     已经落定的与远程附件没有进度条可播，对号直接呈现 */
+  .xh-scope-file-upload[data-part='item'][data-state='done']:has(> [data-part='item-progress']:not([hidden]))::before {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter) var(--xh-motion-duration-move) backwards;
+  }
+
+  /* 传输进度条：只在传输中不透明，填充按连接层写下的比例平移到位；进度是连续量，走 continuous 曲线。
+     传完那一刻不当场收起：填充先走满（move），随后整条淡出（exit，延后一个 move），播完连接层才写 hidden。
+     没在传也没刚传完的由连接层写 hidden */
+  .xh-scope-file-upload[data-part='item-progress'] {
+    display: block;
+    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));
+    opacity: 0;
+    transition: opacity var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) var(--xh-motion-duration-move);
+  }
+
+  .xh-scope-file-upload[data-part='item-progress'][data-state='uploading'] {
+    opacity: 1;
+  }
+
+  /* 铺满轨道，往行首平移藏起未完成的那一截、由轨道裁掉：推进只走合成，不重排也不重绘。
+     translate 只认物理方向，乘书写方向的符号，RTL 下平移方向翻转 */
+  .xh-scope-file-upload[data-part='item-progress']::before {
+    content: '';
+    display: block;
+    block-size: 100%;
+    border-radius: inherit;
+    background: var(--xh-file-upload-item-progress-fill, var(--xh-bg-brand));
+    inline-size: 100%;
+    translate: calc((var(--xh-_file-upload-progress, 0) - 1) * 100% * var(--xh-direction-sign)) 0;
+    transition: translate var(--xh-motion-duration-move) var(--xh-motion-ease-continuous);
+  }
+
+  .xh-scope-file-upload[data-part='item-progress'][hidden] {
+    display: none;
+  }
+
+  /* 缩略图占位：作者往里塞图标或真缩略图，尺寸由这里定死，一行行的图标才对得齐 */
+  .xh-scope-file-upload[data-part='item-preview'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-file-upload-preview-size, var(--xh-control-h-md));
+    block-size: var(--xh-file-upload-preview-size, var(--xh-control-h-md));
+    border-radius: var(--xh-file-upload-preview-radius, var(--xh-shape-control));
+    background: var(--xh-file-upload-preview-bg, var(--xh-bg-subtle));
+    color: var(--xh-file-upload-preview-fg, var(--xh-fg-muted));
+    overflow: hidden;
+  }
+
+  .xh-scope-file-upload[data-part='item-preview'][hidden] {
+    display: none;
+  }
+
+  /* data-file-type 是完整 MIME，按前缀分档即可；系统给不出类型时是 unknown，落回上面的中性底。
+     只挑图标色不换底色：底色一换，一列文件里图片那几行会跳出来抢戏。
+     取语义 token 而不是品牌色阶原值，深色主题才跟着走 */
+  .xh-scope-file-upload[data-part='item-preview'][data-file-type^='image/'] {
+    color: var(--xh-file-upload-preview-fg-image, var(--xh-fg-brand));
+  }
+
+  /* 塞进来的真缩略图撑满这个方框，长宽比不对就裁掉，不许把格子顶变形 */
+  .xh-scope-file-upload[data-part='item-preview'] img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  /* 文件名占满中间那段并用省略号收口。
+     下限是这一行的换行点：名字缩到这个宽度还不够，后面的部件就被推去下一行；
+     再用 100% 收一次口——容器比这个下限还窄时，名字只占满容器，不把整行顶宽 */
+  .xh-scope-file-upload[data-part='item-name'] {
+    flex: 1;
+    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;
+  }
+
+  /* 大小是次要信息：画淡、缩小，并用等宽数字——各位字宽不一时，
+     一列文件的大小读起来会左右参差 */
+  .xh-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-text-caption-size));
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .xh-scope-file-upload[data-part='item-size-text'][data-disabled] {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 删除是一行里的小图标钮：Action Control icon 档 ghost、xs 视觉盒，悬停 100 / 按下 200 与 0.97 按压由家族给；
+     悬停与按下时字换危险色，说明这一下会删掉。钮里的叉按 xs 档的字形尺画 */
+  .xh-scope-file-upload[data-part='item-delete-trigger'] {
+    --xh-action-bg-hover: var(--xh-file-upload-delete-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-file-upload-delete-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-file-upload-delete-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-file-upload-delete-fg-hover, var(--xh-fg-danger-hover));
+    --xh-action-fg-pressed: var(--xh-file-upload-delete-fg-hover, var(--xh-fg-danger-hover));
+    --xh-action-radius: var(--xh-file-upload-delete-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-file-upload-delete-size, var(--xh-_action-profile-visual-size));
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    flex: none;
+  }
+
+  .xh-scope-file-upload[data-part='item-delete-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 清空是收尾动作，画成不带底的文字钮：Action Control text 档 ghost、sm，比「选择文件」小一档 */
+  .xh-scope-file-upload[data-part='clear-trigger'] {
+    --xh-action-bg-hover: var(--xh-file-upload-clear-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-file-upload-clear-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-file-upload-clear-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-file-upload-clear-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-file-upload-clear-fg-hover, var(--xh-fg-default));
+    --xh-action-radius: var(--xh-file-upload-clear-radius, var(--xh-shape-control));
+    --xh-action-visual-size: var(--xh-file-upload-clear-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-file-upload-clear-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-gap: var(--xh-file-upload-clear-gap, var(--xh-_action-profile-gap));
+    --xh-action-font-size: var(--xh-file-upload-clear-font-size, var(--xh-_action-profile-font-size));
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    flex: none;
+    align-self: flex-start;
+  }
+
+  .xh-scope-file-upload[data-part='clear-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 空列表时按钮照常可按（收起它会让焦点掉回 body），只把前景压淡一档；三态一起压，家族的悬停规则更特定 */
+  .xh-scope-file-upload[data-part='clear-trigger'][data-empty] {
+    --xh-action-fg-rest: var(--xh-fg-subtle);
+    --xh-action-fg-hover: var(--xh-fg-subtle);
+    --xh-action-fg-pressed: var(--xh-fg-subtle);
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  .xh-scope-file-upload[data-part='item-delete-trigger']:empty::before,
+  .xh-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;
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       落在 Canvas 面上的取 CanvasText；
+       禁用取 GrayText */
+    .xh-scope-file-upload[data-part='item'][data-state='error']::before,
+    .xh-scope-file-upload[data-part='item'][data-state='closed']:has(> [data-part='item-progress'][data-state='error'])::before,
+    .xh-scope-file-upload[data-part='item'][data-state='done']::before,
+    .xh-scope-file-upload[data-part='item'][data-state='closed']:has(> [data-part='item-progress'][data-state='done'])::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .xh-scope-file-upload:is([data-part='item-delete-trigger'], [data-part='clear-trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-file-upload:is([data-part='item-delete-trigger'], [data-part='clear-trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-file-upload:is([data-part='item-delete-trigger'], [data-part='clear-trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
+}