@xihan-ui/styles 3.2.0 → 4.0.0

package/css/command.css

@@ -29,6 +29,7 @@
     --xh-_command-input-h: var(--xh-control-h-md);
     --xh-_command-px: var(--xh-control-px-md);
     --xh-_command-item-py: var(--xh-list-option-py-md);
+    --xh-_command-item-h: var(--xh-list-option-h-md);
     --xh-_command-gap: var(--xh-control-gap-md);
     --xh-_command-font-size: var(--xh-control-font-md);
   }
@@ -47,6 +48,7 @@
     --xh-_command-input-h: var(--xh-control-h-sm);
     --xh-_command-px: var(--xh-control-px-sm);
     --xh-_command-item-py: var(--xh-list-option-py-sm);
+    --xh-_command-item-h: var(--xh-list-option-h-sm);
     --xh-_command-gap: var(--xh-control-gap-sm);
     --xh-_command-font-size: var(--xh-control-font-sm);
   }
@@ -57,6 +59,7 @@
     --xh-_command-input-h: var(--xh-control-h-lg);
     --xh-_command-px: var(--xh-control-px-lg);
     --xh-_command-item-py: var(--xh-list-option-py-lg);
+    --xh-_command-item-h: var(--xh-list-option-h-lg);
     --xh-_command-gap: var(--xh-control-gap-lg);
     --xh-_command-font-size: var(--xh-control-font-lg);
   }
@@ -172,7 +175,7 @@
     padding-block: 0;
     padding-inline: var(--xh-command-input-px, var(--xh-_command-px));
     border: 0;
-    border-block-end: var(--xh-stroke-thin) solid var(--xh-command-input-border, var(--xh-material-elevated-separator));
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-command-input-border, var(--xh-material-elevated-border));
     border-radius: 0;
     background: transparent;
     color: var(--xh-command-input-fg, var(--xh-fg-default));
@@ -209,8 +212,9 @@
     flex-direction: column;
     gap: var(--xh-command-list-gap, var(--xh-list-option-gap));
     min-block-size: 0;
-    padding-block: var(--xh-command-list-py, var(--xh-space-2));
-    padding-inline: var(--xh-command-list-px, var(--xh-space-2));
+    /* 行通栏：列表左右不留内衬，行面贴到面板两缘；上下各留 4px */
+    padding-block: var(--xh-command-list-py, var(--xh-space-1));
+    padding-inline: var(--xh-command-list-px, var(--xh-space-0));
     /* 模态面板里的滚动面：到底后不把滚动链穿透给页面 */
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -241,7 +245,7 @@
 
   /* 组间留白只加在后继分组上：首组顶上已经有列表的内边距，再加一层会显得头重 */
   [data-scope='command'][data-part='group'] + [data-scope='command'][data-part='group'] {
-    margin-block-start: var(--xh-command-group-spacing, var(--xh-space-1_5));
+    margin-block-start: var(--xh-command-group-spacing, var(--xh-space-2));
   }
 
   /* 分组标题不是命令、进不了导航，画成小号次要文字，内缩与条目对齐 */
@@ -249,9 +253,9 @@
     display: block;
     padding-block: var(--xh-command-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-command-group-label-px, var(--xh-_command-px));
-    color: var(--xh-command-group-label-fg, var(--xh-fg-muted));
+    color: var(--xh-command-group-label-fg, var(--xh-fg-subtle));
     font-size: var(--xh-command-group-label-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-command-group-label-font-weight, var(--xh-font-weight-medium));
+    font-weight: var(--xh-command-group-label-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
@@ -264,10 +268,11 @@
      布局保持 flex：图标、正文、快捷键按作者顺序排成一行，不用家族网格；间距由行的 gap 给 */
   [data-scope='command'][data-part='item'] {
     --xh-collection-block-padding: var(--xh-command-item-py, var(--xh-_command-item-py));
+    --xh-collection-row-h: var(--xh-command-item-h, var(--xh-_command-item-h));
     --xh-collection-inline-padding: var(--xh-command-item-px, var(--xh-_command-px));
     --xh-collection-gap: 0;
     --xh-collection-font-size: var(--xh-command-item-font-size, var(--xh-_command-font-size));
-    --xh-collection-radius: var(--xh-command-item-radius, var(--xh-shape-inset));
+    --xh-collection-radius: var(--xh-command-item-radius, 0);
     --xh-collection-fg-rest: var(--xh-command-item-fg, var(--xh-fg-default));
     --xh-collection-fg-hover: var(--xh-command-item-fg, var(--xh-fg-default));
     --xh-collection-fg-keyboard-highlight: var(--xh-command-item-fg, var(--xh-fg-default));
@@ -369,7 +374,7 @@
     gap: var(--xh-command-footer-gap, var(--xh-space-2));
     padding-block: var(--xh-command-footer-py, var(--xh-space-2));
     padding-inline: var(--xh-command-footer-px, var(--xh-_command-px));
-    border-block-start: var(--xh-stroke-thin) solid var(--xh-command-footer-border, var(--xh-material-elevated-separator));
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-command-footer-border, var(--xh-material-elevated-border));
     color: var(--xh-command-footer-fg, var(--xh-fg-muted));
     font-size: var(--xh-command-footer-font-size, var(--xh-text-caption-size));
   }

package/css/context-menu.css

@@ -73,6 +73,7 @@
     /* 尺寸档只换这四个私有槽，条目与分组标题都从这两处继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_context-menu-item-py: var(--xh-list-option-py-md);
+    --xh-_context-menu-item-h: var(--xh-list-option-h-md);
     --xh-_context-menu-item-px: var(--xh-control-px-md);
     --xh-_context-menu-item-gap: var(--xh-control-gap-md);
     --xh-_context-menu-font-size: var(--xh-control-font-md);
@@ -104,7 +105,7 @@
     /* 两道上限取更小的那道：自己的高度上限，以及落定那一侧真正剩下的空间。 */
     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));
+    padding-inline: var(--xh-context-menu-content-px, 0);
     border-radius: var(--xh-context-menu-content-radius, var(--xh-shape-overlay));
     /* 条目超过上限就在菜单内部滚；内收焦点环不会被内边距缘裁掉。
        浮层滚动面：到底后不把滚动链穿透给页面 */
@@ -123,6 +124,7 @@
   [data-scope='context-menu']:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
     --xh-icon-size: var(--xh-context-menu-icon-size, var(--xh-glyph-size-sm));
     --xh-_context-menu-item-py: var(--xh-list-option-py-sm);
+    --xh-_context-menu-item-h: var(--xh-list-option-h-sm);
     --xh-_context-menu-item-px: var(--xh-control-px-sm);
     --xh-_context-menu-item-gap: var(--xh-control-gap-sm);
     --xh-_context-menu-font-size: var(--xh-control-font-sm);
@@ -131,6 +133,7 @@
   [data-scope='context-menu']:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
     --xh-icon-size: var(--xh-context-menu-icon-size, var(--xh-glyph-size-lg));
     --xh-_context-menu-item-py: var(--xh-list-option-py-lg);
+    --xh-_context-menu-item-h: var(--xh-list-option-h-lg);
     --xh-_context-menu-item-px: var(--xh-control-px-lg);
     --xh-_context-menu-item-gap: var(--xh-control-gap-lg);
     --xh-_context-menu-font-size: var(--xh-control-font-lg);
@@ -192,15 +195,16 @@
     display: none;
   }
 
-  /* 分组标题不是条目、进不了导航，画成小号次要文字，
+  /* 分组标题不是条目、进不了导航，画成小号常规字重的次要文字，上方让出 8px 与上一组分开；
      内缩与条目对齐（同一个 padding-inline），标题与条目文字才在一条竖线上 */
   [data-scope='context-menu'][data-part='group-label'] {
     display: block;
+    margin-block-start: var(--xh-context-menu-group-label-mt, var(--xh-space-2));
     padding-block: var(--xh-context-menu-group-label-py, var(--xh-space-1));
     padding-inline: var(--xh-context-menu-group-label-px, var(--xh-_context-menu-item-px));
     color: var(--xh-context-menu-group-label-fg, var(--xh-material-frosted-fg-muted));
     font-size: var(--xh-context-menu-group-label-font-size, var(--xh-text-caption-size));
-    font-weight: var(--xh-context-menu-group-label-font-weight, var(--xh-font-weight-medium));
+    font-weight: var(--xh-context-menu-group-label-font-weight, var(--xh-font-weight-regular));
     line-height: var(--xh-leading-none);
     user-select: none;
   }
@@ -215,10 +219,11 @@
      子菜单箭头是行尾的伪元素；间距统一由行的 gap 给，家族按槽下发的外边距归零 */
   [data-scope='context-menu'][data-part='item'] {
     --xh-collection-block-padding: var(--xh-context-menu-item-py, var(--xh-_context-menu-item-py));
+    --xh-collection-row-h: var(--xh-context-menu-item-h, var(--xh-_context-menu-item-h));
     --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-inset));
+    --xh-collection-radius: var(--xh-context-menu-item-radius, 0);
     --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));
@@ -261,7 +266,7 @@
     margin-inline-start: auto;
     inline-size: var(--xh-context-menu-submenu-indicator-size, var(--xh-control-indicator-size));
     block-size: var(--xh-context-menu-submenu-indicator-size, var(--xh-control-indicator-size));
-    background-color: var(--xh-context-menu-submenu-indicator-fg, var(--xh-material-frosted-fg-muted));
+    background-color: var(--xh-context-menu-submenu-indicator-fg, currentColor);
     -webkit-mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
     mask: var(--xh-glyph-mark-chevron-right) center / contain no-repeat;
   }

package/css/date-field.css

@@ -63,7 +63,9 @@
   }
 
   [data-scope='date-field'][data-part='label'] {
-    color: var(--xh-date-field-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-date-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-date-field-label-gap, var(--xh-space-2)) - var(--xh-date-field-gap, var(--xh-space-1)));
+    color: var(--xh-date-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-date-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-date-field-label-font-weight, var(--xh-text-label-weight));
   }
@@ -73,7 +75,7 @@
   }
 
   [data-scope='date-field'][data-part='label'][data-disabled] {
-    color: var(--xh-date-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-date-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 分段框整体长得像一个输入框：描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome 家族画在
@@ -93,8 +95,6 @@
     --xh-field-border-hover: var(--xh-date-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-date-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-date-field-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-date-field-control-shadow, none);
     --xh-field-cursor-rest: default;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */