@xihan-ui/styles 1.0.0 → 2.0.0

package/css/collapsible.css

@@ -1,114 +1,159 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 collapsible 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立；
+   独立皮肤同时传递引入触发器的动作控件配方，full bundle 递归去重。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='collapsible'] {
     --xh-collapsible-skin: 1;
   }
 
-  /* 根容器自己不排版，这条只声明尺寸档的私有槽：触发按钮从 root 继承它们，
-     换档不必给部件各写一条选择器 */
+  /* 根容器自己不排版，这条只声明尺寸档的私有槽：正文与标题行从 root 继承它们，
+     换档不必给部件各写一条选择器；触发器的三档几何由家族 disclosure-trigger 档给 */
   [data-scope='collapsible'][data-part='root'] {
-    --xh-_collapsible-trigger-h: var(--xh-control-h-md);
-    --xh-_collapsible-trigger-px: var(--xh-control-px-md);
+    /* 作者塞进正文里的图标与皮肤画的兜底字形同一把尺：md 档（§6.5），触发器上另按家族档取值 */
+    --xh-icon-size: var(--xh-collapsible-icon-size, var(--xh-glyph-size-md));
+
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-md);
-    --xh-_collapsible-trigger-font-size: var(--xh-control-font-md);
+    --xh-_collapsible-content-px: var(--xh-space-4);
+    --xh-_collapsible-content-pb: var(--xh-space-4);
+
+    /* 语气落在展开着的触发器上，指示器写在触发器里、跟着继承这个色，不另立规则。
+       没写 data-tone 时 --xh-_tone-fg 没被声明，退回原来的前景色。
+       聚焦环不在其列，它恒是 --xh-ring-focus */
+    --xh-_collapsible-open-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+  }
+
+  /* 触发器与其同排内容住的那一行；触发器自己已经是整行宽，这里只负责把两者摆平 */
+  [data-scope='collapsible'][data-part='header'] {
+    display: flex;
+    align-items: center;
+    gap: var(--xh-collapsible-header-gap, var(--xh-_collapsible-trigger-gap));
+    inline-size: 100%;
+  }
+
+  [data-scope='collapsible'][data-part='header'][hidden] {
+    display: none;
   }
 
   /* —— 尺寸 —— */
   /* 缺省档写在上面那条里 */
   [data-scope='collapsible'][data-part='root'][data-size='sm'] {
-    --xh-_collapsible-trigger-h: var(--xh-control-h-sm);
-    --xh-_collapsible-trigger-px: var(--xh-control-px-sm);
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-sm);
-    --xh-_collapsible-trigger-font-size: var(--xh-control-font-sm);
+    --xh-_collapsible-content-px: var(--xh-space-3);
+    --xh-_collapsible-content-pb: var(--xh-space-3);
   }
 
   [data-scope='collapsible'][data-part='root'][data-size='lg'] {
-    --xh-_collapsible-trigger-h: var(--xh-control-h-lg);
-    --xh-_collapsible-trigger-px: var(--xh-control-px-lg);
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-lg);
-    --xh-_collapsible-trigger-font-size: var(--xh-control-font-lg);
+    --xh-_collapsible-content-px: var(--xh-space-5);
+    --xh-_collapsible-content-pb: var(--xh-space-5);
   }
 
+  /* 触发器铺满一行，盒型、三档几何、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给
+     （ghost 形态：根无壳，按画布承载 hover 100 → pressed 200；按下只换面不缩放，§9.2）；
+     这里只把使用者槽映射到桥接槽：字色三态同值（家族的 hover / pressed 字色规则比皮肤更特定，不映射会被换回
+     缺省字色），字形按触发器自己的档位取 --xh-_action-profile-glyph-size；边归零贴住标题行，几何与迁移前一致 */
   [data-scope='collapsible'][data-part='trigger'] {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    inline-size: 100%;
-    gap: var(--xh-collapsible-trigger-gap, var(--xh-_collapsible-trigger-gap));
-    block-size: var(--xh-collapsible-trigger-h, var(--xh-_collapsible-trigger-h));
-    padding-inline: var(--xh-collapsible-trigger-px, var(--xh-_collapsible-trigger-px));
-    border: 0;
-    border-radius: var(--xh-collapsible-trigger-radius, var(--xh-shape-control));
-    background: var(--xh-collapsible-trigger-bg, transparent);
-    color: var(--xh-collapsible-trigger-fg, var(--xh-fg-default));
-    font-size: var(--xh-collapsible-trigger-font-size, var(--xh-_collapsible-trigger-font-size));
+    --xh-action-gap: var(--xh-collapsible-trigger-gap, var(--xh-_action-profile-gap));
+    --xh-action-visual-size: var(--xh-collapsible-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-block: var(--xh-collapsible-trigger-py, var(--xh-_action-profile-padding-block));
+    --xh-action-padding-inline: var(--xh-collapsible-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-collapsible-trigger-radius, var(--xh-_action-profile-radius));
+    --xh-action-bg-rest: var(--xh-collapsible-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-collapsible-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-fg-rest: var(--xh-collapsible-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-collapsible-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-collapsible-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-font-size: var(--xh-collapsible-trigger-font-size, var(--xh-_action-profile-font-size));
+    --xh-icon-size: var(--xh-collapsible-icon-size, var(--xh-_action-profile-glyph-size));
+
+    border-width: 0;
     font-weight: var(--xh-collapsible-trigger-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
   }
 
-  [data-scope='collapsible'][data-part='trigger']:hover {
-    background: var(--xh-collapsible-trigger-bg-hover, var(--xh-bg-subtle));
+  /* 展开着的那一档单开一个槽：与常态共用一个的话，作者一改常态字色就把展开态也改掉了。
+     悬停 / 按下的面与收起态同档（§7.3 open 与家族 hover 同档中性） */
+  [data-scope='collapsible'][data-part='trigger'][data-state='open'] {
+    --xh-action-fg-rest: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
+    --xh-action-fg-hover: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
+    --xh-action-fg-pressed: var(--xh-collapsible-trigger-fg-open, var(--xh-_collapsible-open-fg));
   }
 
-  [data-scope='collapsible'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 禁用前景换成禁用色，不靠 opacity 压暗（家族按 data-disabled 给禁用面与指针，字色槽在这里保留优先） */
+  [data-scope='collapsible'][data-part='trigger'][data-disabled] {
+    --xh-action-fg-disabled: var(--xh-collapsible-trigger-fg-disabled, var(--xh-_action-variant-fg-disabled));
   }
 
-  [data-scope='collapsible'][data-part='trigger'][data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
+  /* 开合方向的标记，排在触发器行尾（触发器是 space-between 两端对齐） */
+  [data-scope='collapsible'][data-part='indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    color: var(--xh-collapsible-indicator-fg, var(--xh-fg-muted));
+    line-height: var(--xh-leading-none);
+    /* 指示器与正文同档转向（§9.4）：正文 enter 档展开，箭头也用同一段时长翻过去 */
+    transition: rotate var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-scope='collapsible'][data-part='indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+  }
+
+  [data-scope='collapsible'][data-part='indicator'][data-state='open'] {
+    rotate: 180deg;
   }
 
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
      收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点 */
   [data-scope='collapsible'][data-part='content'] {
+    /* 行高与内缩同帧动的共享关键帧读这条槽：只有末端有内缩，起端不写、按 0 动 */
+    --xh-_disclosure-pb: var(--xh-collapsible-content-pb, var(--xh-_collapsible-content-pb));
+
     display: grid;
     grid-template-rows: 1fr;
     overflow: clip;
-    padding-block: var(--xh-collapsible-content-py, var(--xh-stack-gap-md));
-    color: var(--xh-collapsible-content-fg, var(--xh-fg-default));
+    padding-block-start: 0;
+    padding-block-end: var(--xh-collapsible-content-pb, var(--xh-_collapsible-content-pb));
+    padding-inline: var(--xh-collapsible-content-px, var(--xh-_collapsible-content-px));
+    color: var(--xh-collapsible-content-fg, var(--xh-fg-muted));
+    font-size: var(--xh-collapsible-content-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-normal);
   }
 
+  /* 展开那一档才提前备好行高这条通道：属性随 data-state 一起消失，收起后不长期占着 */
   [data-scope='collapsible'][data-part='content'][data-state='open'] {
-    animation: xh-collapsible-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    will-change: grid-template-rows;
+    animation: xh-disclosure-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   [data-scope='collapsible'][data-part='content'][data-state='closed'] {
-    animation: xh-collapsible-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+    animation: xh-disclosure-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 }
 
 @layer xihan.motion {
-  /* 行高与内缩同帧动：内缩不归零的话，border-box 会把盒子钳在上下内缩之和上，收不干净 */
-  @keyframes xh-collapsible-expand {
-    from {
-      grid-template-rows: 0fr;
-      padding-block: 0;
-    }
-
-    to {
-      grid-template-rows: 1fr;
-      padding-block: var(--xh-collapsible-content-py, var(--xh-stack-gap-md));
-    }
-  }
-
-  @keyframes xh-collapsible-collapse {
-    from {
-      grid-template-rows: 1fr;
-      padding-block: var(--xh-collapsible-content-py, var(--xh-stack-gap-md));
-    }
-
-    to {
-      grid-template-rows: 0fr;
-      padding-block: 0;
-    }
-  }
-
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='collapsible'][data-part='trigger'][hidden] {
+  [data-scope='collapsible'][data-part='trigger'][hidden],
+  [data-scope='collapsible'][data-part='indicator'][hidden] {
     display: none;
   }
 }

package/css/color-field.css

@@ -0,0 +1,158 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* TextField 独立皮肤同时传递引入字段视觉盒与字段内动作；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+@import '../family/action-control.css';
+@import '../family/swatch.css';
+
+@layer xihan.components {
+  [data-scope='color-field'] {
+    --xh-color-field-skin: 1;
+  }
+
+  /* 组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明；
+     色块吃 Swatch 家族，只在这里补一条与输入框的间距。 */
+  [data-scope='color-field'][data-part='root'] {
+    --xh-_color-field-h: var(--xh-control-h-md);
+    --xh-_color-field-px: var(--xh-control-px-md);
+    --xh-_color-field-gap: var(--xh-control-gap-md);
+    --xh-_color-field-font-size: var(--xh-control-font-md);
+    --xh-_color-field-action-font-size: var(--xh-control-caption-md);
+
+    --xh-icon-size: var(--xh-color-field-icon-size, var(--xh-glyph-size-md));
+
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-color-field-gap, var(--xh-space-1));
+    /* 不传尺寸时一律这么宽，宽度不随内容走；父容器给不出这么宽时整件跟着收，地板同步让步，不越出父容器。
+       地板不高过缺省宽：使用者把缺省宽钉到底线以下时不必再放开底线 */
+    inline-size: var(--xh-color-field-control-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-color-field-control-w, var(--xh-control-w)), var(--xh-color-field-control-min-w, var(--xh-control-min-w)), 100%);
+    max-inline-size: 100%;
+  }
+
+  [data-scope='color-field'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='color-field'][data-part='root'][data-size='sm'] {
+    --xh-_color-field-h: var(--xh-control-h-sm);
+    --xh-_color-field-px: var(--xh-control-px-sm);
+    --xh-_color-field-gap: var(--xh-control-gap-sm);
+    --xh-_color-field-font-size: var(--xh-control-font-sm);
+    --xh-_color-field-action-font-size: var(--xh-control-caption-sm);
+    --xh-icon-size: var(--xh-color-field-icon-size, var(--xh-glyph-size-sm));
+  }
+
+  [data-scope='color-field'][data-part='root'][data-size='lg'] {
+    --xh-_color-field-h: var(--xh-control-h-lg);
+    --xh-_color-field-px: var(--xh-control-px-lg);
+    --xh-_color-field-gap: var(--xh-control-gap-lg);
+    --xh-_color-field-font-size: var(--xh-control-font-lg);
+    --xh-_color-field-action-font-size: var(--xh-control-caption-lg);
+    --xh-icon-size: var(--xh-color-field-icon-size, var(--xh-glyph-size-lg));
+  }
+
+  [data-scope='color-field'][data-part='label'] {
+    color: var(--xh-color-field-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-color-field-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-color-field-label-font-weight, var(--xh-text-label-weight));
+  }
+
+  [data-scope='color-field'][data-part='label'][data-disabled] {
+    color: var(--xh-color-field-label-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  [data-scope='color-field'][data-part='control'] {
+    --xh-field-control-height: var(--xh-color-field-control-h, var(--xh-_color-field-h));
+    --xh-field-control-padding-inline: var(--xh-color-field-control-px, var(--xh-_color-field-px));
+    --xh-field-control-gap: var(--xh-color-field-control-gap, var(--xh-_color-field-gap));
+    --xh-field-control-min-inline-size: var(--xh-color-field-control-min-w, var(--xh-control-min-w));
+    --xh-field-control-radius: var(--xh-color-field-control-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-color-field-control-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-color-field-control-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-color-field-control-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-color-field-control-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-color-field-control-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-color-field-control-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-color-field-control-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-color-field-control-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-border-invalid: var(--xh-color-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-color-field-control-shadow, none);
+    /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
+    --xh-field-glyph-size: var(--xh-color-field-icon-size, var(--xh-_field-size-glyph-size));
+  }
+
+  /* 当前颜色的色块：棋盘格、颜色层、描边与尺寸档由 Swatch 家族画（节点带 data-xh-swatch），
+     组件层只把自己的公开槽映射到家族合同；它排在输入框前面，间距由 Field Chrome 的 gap 给 */
+  [data-scope='color-field'][data-part='swatch'] {
+    --xh-swatch-size: var(--xh-color-field-swatch-size, var(--xh-_swatch-size));
+    --xh-swatch-radius: var(--xh-color-field-swatch-radius, var(--xh-shape-inset));
+    --xh-swatch-border: var(--xh-color-field-swatch-border, var(--xh-border-default));
+  }
+
+  [data-scope='color-field'][data-part='swatch'][data-disabled] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  [data-scope='color-field'][data-part='swatch'][hidden] {
+    display: none;
+  }
+
+  [data-scope='color-field'][data-part='input'] {
+    --xh-field-input-fg: var(--xh-color-field-input-fg, var(--xh-fg-default));
+    --xh-field-input-font-size: var(--xh-color-field-input-font-size, var(--xh-_color-field-font-size));
+    --xh-field-placeholder-fg: var(--xh-color-field-placeholder-fg, var(--xh-fg-subtle));
+    --xh-field-autofill-bg: var(--xh-color-field-input-autofill-bg, var(--xh-bg-canvas));
+    --xh-field-autofill-fg: var(--xh-color-field-input-autofill-fg, var(--xh-fg-default));
+
+  }
+
+  [data-scope='color-field'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* clear 的视觉、悬停/按压阶梯与粗指针热区来自 field-inset ghost 档，组件只映射既有覆盖槽。 */
+  [data-scope='color-field'][data-part='clear-trigger'] {
+    --xh-action-visual-size: var(--xh-color-field-action-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-color-field-action-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-color-field-action-radius, var(--xh-shape-inset));
+    /* 底色阶梯由 ghost 档给（透明 → 100 → 200），使用者槽只作覆盖入口 */
+    --xh-action-bg-rest: var(--xh-color-field-action-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-color-field-action-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-color-field-action-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-color-field-action-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-color-field-action-fg-hover, var(--xh-fg-default));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    --xh-action-font-size: var(--xh-color-field-action-font-size, var(--xh-_color-field-action-font-size));
+    /* 配方尚未把 profile 字形档灌进 --xh-icon-size，钮内字形先按 field-inset 档逐钮取值 */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    border-width: 0;
+  }
+
+  [data-scope='color-field'][data-part='clear-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='color-field'][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;
+  }
+
+}