@xihan-ui/styles 2.0.0 → 3.0.0

package/css/context-menu.css

@@ -7,7 +7,9 @@
 
 /* 共享关键帧由 family/motion.css 提供，条目走 Collection Item 家族；本皮肤 @import 它们，单独引入仍成立。 */
 @import '../family/collection-item.css';
+@import '../family/menu-choice.css';
 @import '../family/motion.css';
+@import '../family/material.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -63,7 +65,7 @@
   /* 私有槽同时声明在根与 positioner 上：浮层被搬到 portal 落点，不是根的后代，继承不过去 */
   [data-scope='context-menu']:is([data-part='root'], [data-part='positioner']) {
     /* 条目外的字形（分组标题等）按档取尺，缺省 md，随 data-size 换档；同样声明在 positioner 上，被搬走的浮层
-       才拿得到；条目里作者放的图标由家族随 data-xh-collection-size 下发（§6.5）。菜单自绘的状态字形（标记位的盒、
+       才拿得到；条目里作者放的图标由家族随 data-xh-collection-size 下发。菜单自绘的状态字形（标记位的盒、
        盒里兜底的勾、子菜单的展开 chevron）不读这支：它们是指示符，走 --xh-control-indicator-* 一族——标记位在
        自己身上把 --xh-icon-size 改接到盒的尺，子菜单箭头走 --xh-context-menu-submenu-indicator-size */
     --xh-icon-size: var(--xh-context-menu-icon-size, var(--xh-glyph-size-md));
@@ -83,6 +85,15 @@
   }
 
   [data-scope='context-menu'][data-part='content'] {
+    /* 材质由家族配方画（family/material.css 的 frosted 面：描边、底、1px 顶光、前景、投影与背景滤镜），
+       这里只把使用者槽接进来 */
+    --xh-frosted-bg: var(--xh-context-menu-content-bg, var(--xh-_material-bg));
+    --xh-frosted-border: var(--xh-context-menu-border, var(--xh-_material-border));
+    --xh-frosted-fg: var(--xh-context-menu-content-fg, var(--xh-_material-fg));
+    --xh-frosted-shadow: var(--xh-context-menu-content-shadow, var(--xh-_material-shadow));
+    --xh-frosted-backdrop: var(--xh-context-menu-backdrop, var(--xh-_material-backdrop));
+    --xh-frosted-highlight: var(--xh-context-menu-highlight, var(--xh-_material-highlight));
+
     position: relative;
     display: flex;
     flex-direction: column;
@@ -94,32 +105,14 @@
     max-block-size: min(var(--xh-context-menu-max-h, var(--xh-overlay-menu-max-h)), var(--xh-_context-menu-available-h));
     padding-block: var(--xh-context-menu-content-py, var(--xh-surface-pad-xs));
     padding-inline: var(--xh-context-menu-content-px, var(--xh-surface-pad-xs));
-    border: var(--xh-stroke-thin) solid var(--xh-context-menu-border, var(--xh-material-frosted-border));
     border-radius: var(--xh-context-menu-content-radius, var(--xh-shape-overlay));
-    background: var(--xh-context-menu-content-bg, var(--xh-material-frosted-bg));
-    color: var(--xh-context-menu-content-fg, var(--xh-material-frosted-fg));
-    box-shadow: var(--xh-context-menu-content-shadow, var(--xh-material-frosted-shadow));
-    -webkit-backdrop-filter: var(--xh-context-menu-backdrop, var(--xh-material-frosted-backdrop));
-    backdrop-filter: var(--xh-context-menu-backdrop, var(--xh-material-frosted-backdrop));
     /* 条目超过上限就在菜单内部滚；内收焦点环不会被内边距缘裁掉。
-       浮层滚动面：到底后不把滚动链穿透给页面（§6.6） */
+       浮层滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
     overscroll-behavior: contain;
     pointer-events: auto;
   }
 
-  /* 顶光单独叠在真实四边 border 内侧；强制色归零后轮廓仍在。 */
-  [data-scope='context-menu'][data-part='content']::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    block-size: var(--xh-stroke-thin);
-    border-radius: inherit;
-    background: var(--xh-context-menu-highlight, var(--xh-material-frosted-highlight));
-    pointer-events: none;
-  }
-
   [data-scope='context-menu'][data-part='root'][hidden] {
     display: none;
   }
@@ -147,7 +140,7 @@
      长按会先选中区域内的文字，长按菜单弹出时手指底下是一片高亮，很难看 */
   [data-scope='context-menu'][data-part='trigger'] {
     user-select: none;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 触屏没有右键，菜单靠长按计时打开。这段等待里若一点变化都没有，用户会当成没按上而提前
@@ -177,9 +170,8 @@
   }
 
   /* 首帧落位后从锚点一侧淡入短移，不缩放整张面。 */
-  [data-scope='context-menu'][data-part='content'][data-state='open'] {
-    /* 在场那一档才提前备好合成层：属性随 data-state 一起消失，收起后不长期占着 */
-    will-change: opacity, translate;
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='context-menu'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -226,7 +218,7 @@
     --xh-collection-inline-padding: var(--xh-context-menu-item-px, var(--xh-_context-menu-item-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-context-menu-item-font-size, var(--xh-_context-menu-font-size));
-    --xh-collection-radius: var(--xh-context-menu-item-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-context-menu-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-context-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-context-menu-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-context-menu-item-fg, var(--xh-material-frosted-fg));
@@ -260,7 +252,7 @@
   }
 
   /* 子菜单箭头留在主行末端；description 即使写在它前面，也由 order 独占下一行。
-     箭头是指示符（§6.5）：与标记位的盒同走 --xh-control-indicator-size，不读 --xh-icon-size——
+     箭头是指示符：与标记位的盒同走 --xh-control-indicator-size，不读 --xh-icon-size——
      按图标档取的 20px 会比 16px 的标记位盒大一圈 */
   [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']::after {
     content: '';
@@ -292,7 +284,7 @@
     display: none;
   }
 
-  /* 标记位（勾选符号 / 图标）按作者写入的槽位留在主行，不为没写的条目强制占列。盒是指示符（§6.5）：按指示符档
+  /* 标记位（勾选符号 / 图标）按作者写入的槽位留在主行，不为没写的条目强制占列。盒是指示符：按指示符档
      取尺，与 Menu / Cascader 的标记位同走 --xh-control-indicator-size，不读家族按档下发的 --xh-icon-size——
      按图标档取的 20px 会比同一行 16px 的指示符档大一圈。盒在自己身上把 --xh-icon-size 改接到盒的尺，
      皮肤画的兜底勾与作者塞进标记位的 XhIcon 读同一把尺、与盒同边长（行尾标记不是勾选格，不取 × 0.75）；
@@ -323,7 +315,8 @@
     order: 2;
     min-inline-size: 0;
     color: var(--xh-context-menu-item-description-fg, var(--xh-material-frosted-fg-muted));
-    font-size: var(--xh-context-menu-item-description-font-size, var(--xh-text-caption-size));
+    /* 与同一行的快捷键、Select 等列表的说明同档：控件次级字号，不取 caption 令牌 */
+    font-size: var(--xh-context-menu-item-description-font-size, var(--xh-control-caption-md));
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -384,6 +377,28 @@
     -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       条目面上取 CanvasText；按下与没被高亮时的悬停，家族把条目涂成 Highlight，字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']::after,
+    [data-scope='context-menu'][data-part='item-indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='context-menu'][data-part='item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted])) [data-scope='context-menu'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='context-menu'][data-part='item'][aria-haspopup='menu']:is([aria-disabled='true'], [data-disabled])::after,
+    [data-scope='context-menu'][data-part='item']:is([aria-disabled='true'], [data-disabled]) [data-scope='context-menu'][data-part='item-indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
 }
 
 @layer xihan.motion {

package/css/date-field.css

@@ -143,6 +143,10 @@
     user-select: none;
     /* 触屏上连点两下不该被当成缩放手势 */
     touch-action: manipulation;
+    /* 反白随当前段换色：状态角色的 micro 淡变，与 TimeField 同一档；焦点环画在 control 上，不进过渡 */
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* granularity 用不上的段带 hidden 留在文档里（不卸载作者节点）。
@@ -252,4 +256,23 @@
     white-space: nowrap;
     pointer-events: none;
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='date-field'][data-part='clear-trigger']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='date-field'][data-part='clear-trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='date-field'][data-part='clear-trigger'][data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }

package/css/date-picker.css

@@ -73,6 +73,7 @@
     --xh-_date-picker-control-px: var(--xh-control-px-md);
     --xh-_date-picker-gap: var(--xh-control-gap-md);
     --xh-_date-picker-font-size: var(--xh-control-font-md);
+    --xh-_date-picker-item-py: var(--xh-list-option-py-md);
 
     /* 选中对号随语气走。没写 data-tone 时这几个 --xh-_tone* 没被声明，退回品牌色 */
     /* 内嵌日期段沿用日期输入的轻强调焦点：当前段是「当前项」，淡底 + 淡底前景，不另画一套实心选择态。 */
@@ -80,7 +81,8 @@
     --xh-_date-field-segment-fg: var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle));
     /* 对号画在普通面上，取语气前景角色，不能拿确认按钮的实心背景色充当前景。 */
     --xh-_date-picker-check-fg: var(--xh-_tone, var(--xh-fg-brand));
-    --xh-_date-picker-time-item-check-size: var(--xh-glyph-size-sm);
+    /* 时间列与预设的对号与 Select 等列表的对号同一把尺：指示符档，随密度收放 */
+    --xh-_date-picker-time-item-check-size: var(--xh-control-indicator-size);
   }
 
   /* 与文本框、分段日期同一套堆叠：标签一行、输入行一行 */
@@ -107,6 +109,7 @@
     --xh-_date-picker-control-px: var(--xh-control-px-sm);
     --xh-_date-picker-gap: var(--xh-control-gap-sm);
     --xh-_date-picker-font-size: var(--xh-control-font-sm);
+    --xh-_date-picker-item-py: var(--xh-list-option-py-sm);
   }
 
   [data-scope='date-picker']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
@@ -115,10 +118,11 @@
     --xh-_date-picker-control-px: var(--xh-control-px-lg);
     --xh-_date-picker-gap: var(--xh-control-gap-lg);
     --xh-_date-picker-font-size: var(--xh-control-font-lg);
+    --xh-_date-picker-item-py: var(--xh-list-option-py-lg);
   }
 
   /* 375px 复合面板要同时容下日历与时/分两列；手机档用正式小指示符，平板起恢复16px。 */
-  @media (width < 768px) {
+  @media not all and (min-width: 768px) {
     [data-scope='date-picker']:is([data-part='root'], [data-part='positioner']) {
       --xh-_date-picker-time-item-check-size: var(--xh-control-indicator-sm);
     }
@@ -291,9 +295,8 @@
     outline: none;
   }
 
-  [data-scope='date-picker'][data-part='content'][data-state='open'] {
-    /* 只在展开态挂着：随状态属性一起消失，不长期占着合成层 */
-    will-change: opacity, translate;
+  /* 挂载时就开着的那一段（data-instant）属于首帧，直接呈现 */
+  [data-scope='date-picker'][data-part='content'][data-state='open']:not([data-instant]) {
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -346,7 +349,7 @@
      手机档两张月历折行堆叠，线画在块起始边 */
   [data-scope='date-picker'][data-part='calendar'] + [data-scope='date-picker'][data-part='calendar'] {
     padding-block-start: var(--xh-date-picker-panel-gap, var(--xh-space-3));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-date-picker-panel-divider, var(--xh-material-frosted-separator));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-date-picker-panel-divider, var(--xh-material-solid-separator));
   }
 
   /* 平板起两张月历并排放得下，线改画在行内起始边 */
@@ -355,7 +358,7 @@
       padding-block-start: 0;
       padding-inline-start: var(--xh-date-picker-panel-gap, var(--xh-space-3));
       border-block-start: none;
-      border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-panel-divider, var(--xh-material-frosted-separator));
+      border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-panel-divider, var(--xh-material-solid-separator));
     }
   }
 
@@ -395,7 +398,7 @@
     inset-block: 0;
     inset-inline-end: calc(-1 * var(--xh-stroke-thin));
     inline-size: var(--xh-stroke-thin);
-    background: var(--xh-date-picker-column-divider, var(--xh-material-frosted-separator));
+    background: var(--xh-date-picker-column-divider, var(--xh-material-solid-separator));
     pointer-events: none;
   }
 
@@ -420,7 +423,7 @@
     overflow-y: hidden;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-frosted-separator));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   /* 平板起：换成贴在日历行内起始一侧的竖列，滚动轴与分隔线一起转过来 */
@@ -430,7 +433,7 @@
       flex-direction: column;
       overflow: auto;
       border-block-end: none;
-      border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-frosted-separator));
+      border-inline-end: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-solid-separator));
     }
   }
 
@@ -445,7 +448,7 @@
     --xh-collection-block-padding: var(--xh-date-picker-preset-py, var(--xh-space-1));
     --xh-collection-inline-padding: var(--xh-date-picker-preset-px, var(--xh-space-3));
     --xh-collection-font-size: var(--xh-text-secondary-size);
-    --xh-collection-radius: var(--xh-date-picker-preset-radius, var(--xh-shape-control));
+    --xh-collection-radius: var(--xh-date-picker-preset-radius, var(--xh-shape-inset));
     /* 面板是实体面（floating），正文取页面前景 */
     --xh-collection-fg-rest: var(--xh-fg-default);
     --xh-collection-fg-hover: var(--xh-fg-default);
@@ -472,7 +475,7 @@
     /* 对号的末端轨始终留着，切换选中时文字与整列宽度都不移动。 */
     padding-inline-end: calc(
       var(--xh-date-picker-preset-px, var(--xh-space-3)) +
-        var(--xh-date-picker-preset-check-size, var(--xh-glyph-size-sm)) +
+        var(--xh-date-picker-preset-check-size, var(--xh-control-indicator-size)) +
         var(--xh-space-1)
     );
     white-space: nowrap;
@@ -497,8 +500,8 @@
     position: absolute;
     inset-block-start: 50%;
     inset-inline-end: var(--xh-date-picker-preset-px, var(--xh-space-3));
-    inline-size: var(--xh-date-picker-preset-check-size, var(--xh-glyph-size-sm));
-    block-size: var(--xh-date-picker-preset-check-size, var(--xh-glyph-size-sm));
+    inline-size: var(--xh-date-picker-preset-check-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-date-picker-preset-check-size, var(--xh-control-indicator-size));
     translate: 0 -50%;
     background-color: var(--xh-date-picker-preset-check-fg, var(--xh-_date-picker-check-fg));
     opacity: 0;
@@ -525,10 +528,7 @@
     gap: var(--xh-date-picker-time-column-gap, 0);
     min-inline-size: var(--xh-date-picker-time-column-min-w, var(--xh-overlay-column-min-w));
     /* 几列并排：定高而不是随内容收，否则时列与分列的可选值一多一少就错位 */
-    block-size: var(
-      --xh-date-picker-time-column-h,
-      min(var(--xh-viewport-h-md), calc(var(--xh-control-h-sm) * 7 + var(--xh-space-7)))
-    );
+    block-size: var(--xh-date-picker-time-column-h, var(--xh-overlay-calendar-column-h));
     margin-block-start: var(
       --xh-date-picker-time-column-offset,
       calc(var(--xh-control-h-sm) + var(--xh-date-picker-calendar-gap, var(--xh-space-2)))
@@ -539,7 +539,7 @@
     overflow-y: auto;
     /* 浮层滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-frosted-separator));
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-column-divider, var(--xh-material-solid-separator));
   }
 
   [data-scope='date-picker'][data-part='time-column'][hidden] {
@@ -556,10 +556,10 @@
       var(--xh-date-picker-time-item-px, var(--xh-space-0_5)),
       calc(var(--xh-date-picker-time-item-check-size, var(--xh-_date-picker-time-item-check-size)) + var(--xh-space-0_5))
     );
-    --xh-collection-block-padding: var(--xh-date-picker-time-item-py, 0);
+    --xh-collection-block-padding: var(--xh-date-picker-time-item-py, var(--xh-_date-picker-item-py));
     --xh-collection-inline-padding: var(--xh-_date-picker-time-item-rail);
-    --xh-collection-font-size: var(--xh-text-secondary-size);
-    --xh-collection-radius: var(--xh-date-picker-time-item-radius, var(--xh-shape-control));
+    --xh-collection-font-size: var(--xh-date-picker-time-item-font-size, var(--xh-_date-picker-font-size));
+    --xh-collection-radius: var(--xh-date-picker-time-item-radius, var(--xh-shape-inset));
     --xh-collection-fg-rest: var(--xh-date-picker-time-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-hover: var(--xh-date-picker-time-item-fg, var(--xh-material-frosted-fg));
     --xh-collection-fg-keyboard-highlight: var(--xh-date-picker-time-item-fg, var(--xh-material-frosted-fg));
@@ -586,8 +586,9 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    block-size: var(--xh-date-picker-time-item-h, calc(var(--xh-control-h-sm) - var(--xh-space-1)));
+    block-size: var(--xh-date-picker-time-item-h, auto);
     font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-normal);
     text-align: center;
     white-space: nowrap;
     user-select: none;
@@ -630,7 +631,12 @@
     opacity: 1;
   }
 
-  @media (width < 768px) {
+  /* 界外、被判为不可用的格走 aria-disabled，家族按它给禁用面；选中标记跟着降级 */
+  [data-scope='date-picker'][data-part='time-item'][data-disabled]::after {
+    background-color: var(--xh-fg-disabled);
+  }
+
+  @media not all and (min-width: 768px) {
     [data-scope='date-picker'][data-part='content'] {
       padding-inline: var(--xh-date-picker-content-px, var(--xh-space-2));
     }
@@ -735,16 +741,43 @@
       background-color: CanvasText;
     }
 
+    /* 按下与没被高亮时的悬停，家族把条目涂成 Highlight，对号跟着换 HighlightText */
+    [data-scope='date-picker'][data-part='preset']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after,
+    [data-scope='date-picker'][data-part='time-item']:not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]):is(:active, [data-pressed], :hover:not(:focus-visible, [data-highlighted]))::after {
+      background-color: HighlightText;
+    }
+
     [data-scope='date-picker'][data-part='preset'][data-disabled]::after,
+    [data-scope='date-picker'][data-part='time-item'][data-disabled]::after,
     [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item']::after {
       background-color: GrayText;
     }
 
     [data-scope='date-picker'][data-part='preset'][data-disabled],
+    [data-scope='date-picker'][data-part='time-item'][data-disabled],
     [data-scope='date-picker'][data-part='time-column'][aria-disabled='true'] [data-part='time-item'] {
       color: GrayText;
     }
   }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    [data-scope='date-picker']:is([data-part='clear-trigger'], [data-part='trigger']):empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    [data-scope='date-picker']:is([data-part='clear-trigger'], [data-part='trigger']):not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]):empty::before {
+      background-color: HighlightText;
+    }
+
+    [data-scope='date-picker']:is([data-part='clear-trigger'], [data-part='trigger'])[data-disabled]:empty::before {
+      background-color: GrayText;
+    }
+  }
 }
 
 @layer xihan.motion {