@xihan-ui/styles 1.0.0-alpha.2 → 1.0.0

package/css/checkbox-group.css

@@ -7,6 +7,9 @@
   /* 组容器：label、trigger、条目都是它的直接子节点，排布方式只能读 data-orientation——
      连接层明说了 role=group 不接受 aria-orientation，那个属性它根本没输出 */
   [data-scope='checkbox-group'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-checkbox-group-icon-size, var(--xh-glyph-size-text));
+
     display: flex;
     gap: var(--xh-checkbox-group-gap, var(--xh-stack-gap-md));
   }
@@ -62,7 +65,6 @@
   [data-scope='checkbox-group'][data-part='item'][data-disabled] {
     color: var(--xh-checkbox-group-item-fg-disabled, var(--xh-fg-disabled));
     cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
   }
 
   /* 只读整组都改不动，但不是禁用：颜色照常，只把"可点"这个暗示收回来。
@@ -81,13 +83,13 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    inline-size: var(--xh-checkbox-group-indicator-size, 16px);
-    block-size: var(--xh-checkbox-group-indicator-size, 16px);
+    inline-size: var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size));
+    block-size: var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size));
     border: var(--xh-stroke-thin) solid var(--xh-checkbox-group-indicator-border, var(--xh-border-control));
-    border-radius: var(--xh-checkbox-group-indicator-radius, var(--xh-radius-sm));
+    border-radius: var(--xh-checkbox-group-indicator-radius, var(--xh-shape-inset));
     background: var(--xh-checkbox-group-indicator-bg, var(--xh-bg-canvas));
     color: var(--xh-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
-    font-size: var(--xh-checkbox-group-indicator-font-size, 12px);
+    font-size: var(--xh-checkbox-group-indicator-font-size, calc(var(--xh-control-indicator-size) * 0.75));
     line-height: var(--xh-leading-none);
     transition:
       background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
@@ -107,32 +109,79 @@
     border-color: var(--xh-checkbox-group-indicator-border-hover, var(--xh-border-control-hover));
   }
 
-  /* 选中即填色：条目是二态，全选格三态里 all 与 some 都算"有值"，共用同一副填色 */
+  /* 选中即填色：条目是二态，全选格三态里 checked 与 indeterminate 都算"有值"，共用同一副填色 */
   [data-scope='checkbox-group'][data-part='indicator'][data-state='checked'],
-  [data-scope='checkbox-group'][data-part='trigger']:is([data-state='all'], [data-state='some'])::before {
+  [data-scope='checkbox-group'][data-part='trigger']:is([data-state='checked'], [data-state='indeterminate'])::before {
     border-color: var(--xh-checkbox-group-indicator-border-checked, var(--xh-bg-brand));
     background: var(--xh-checkbox-group-indicator-bg-checked, var(--xh-bg-brand));
   }
 
   /* 勾号由皮肤补，作者不必自己往 indicator 里塞字符 */
-  [data-scope='checkbox-group'][data-part='indicator'][data-state='checked']::before {
-    content: '✓';
-  }
-
-  /* 全选格的三态：all 打勾、some 打横杠、none 留空。
-     some 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state */
-  [data-scope='checkbox-group'][data-part='trigger'][data-state='all']::before {
-    content: '✓';
-  }
-
-  [data-scope='checkbox-group'][data-part='trigger'][data-state='some']::before {
-    content: '−';
+  [data-scope='checkbox-group'][data-part='indicator'][data-state='checked']: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-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  /* 全选格的三态：checked 打勾、indeterminate 打横杠、unchecked 留空。
+     indeterminate 就是读屏听到的 aria-checked=mixed，两者同源，样式只认 data-state。
+
+     字形走 ::after 而不是画方框的那颗 ::before：mask 会把所在元素的描边与底色一并裁成
+     字形的轮廓，写在 ::before 上就等于把方框本身裁没了，只剩一枚白勾。条目那一侧是
+     真实节点当方框、它的 ::before 当字形的两层结构，这里 anatomy 到 trigger 为止、
+     没有第二个节点，只能用第二个伪元素补上那一层。
+     方框是行首那颗 ::before、宽度即指示符尺寸，所以字形按「盒与字形的宽度差之半」
+     内推即落在圆心；纵向靠 inset-block: 0 + margin-block: auto 居中。
+     font-size 与 ::before 同值，--xh-icon-size 的 1em 兜底才和条目那侧量得一样大 */
+  [data-scope='checkbox-group'][data-part='trigger'][data-state='checked']::after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    margin-block: auto;
+    margin-inline-start: calc(
+      (
+        var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size)) -
+          var(--xh-icon-size, var(--xh-glyph-size-text))
+      ) / 2
+    );
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: var(--xh-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-checkbox-group-indicator-font-size, calc(var(--xh-control-indicator-size) * 0.75));
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  [data-scope='checkbox-group'][data-part='trigger'][data-state='indeterminate']::after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    margin-block: auto;
+    margin-inline-start: calc(
+      (
+        var(--xh-checkbox-group-indicator-size, var(--xh-control-indicator-size)) -
+          var(--xh-icon-size, var(--xh-glyph-size-text))
+      ) / 2
+    );
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: var(--xh-checkbox-group-indicator-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-checkbox-group-indicator-font-size, calc(var(--xh-control-indicator-size) * 0.75));
+    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
   /* 校验失败标在每个方框上：root 上的 data-invalid 是唯一出处，条目自己不带这个属性 */
   [data-scope='checkbox-group'][data-part='root'][data-invalid]
     [data-scope='checkbox-group'][data-part='indicator'] {
-    border-color: var(--xh-checkbox-group-indicator-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-checkbox-group-indicator-border-invalid, var(--xh-border-invalid));
   }
 
   [data-scope='checkbox-group'][data-part='item-text'] {
@@ -141,8 +190,10 @@
   }
 
   /* 全选格与条目同形，但字重加一档，读起来才不像又一个普通选项。
-     它是普通元素而非原生控件（三态只有非原生控件表达得出），禁用态同样只能读 data-disabled */
+     它是普通元素而非原生控件（三态只有非原生控件表达得出），禁用态同样只能读 data-disabled。
+     position 是给叠在方框上的那颗字形 ::after 当定位基准 */
   [data-scope='checkbox-group'][data-part='trigger'] {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--xh-checkbox-group-trigger-gap, var(--xh-control-gap-md));
@@ -163,7 +214,6 @@
   [data-scope='checkbox-group'][data-part='trigger'][data-disabled] {
     color: var(--xh-checkbox-group-trigger-fg-disabled, var(--xh-fg-disabled));
     cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
   }
 
   /* 只读与禁用会同时出现在 trigger 上（连接层两个属性各写各的），

package/css/checkbox.css

@@ -5,9 +5,12 @@
   }
 
   [data-scope='checkbox'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-checkbox-icon-size, var(--xh-glyph-size-text));
+
     /* 尺寸档只换方框边长这一个私有槽，勾的字号按边长的比例跟着走；
        指示器从 root 继承这两个槽，换档不必给每个部件各写一条选择器 */
-    --xh-_checkbox-box: var(--xh-space-4);
+    --xh-_checkbox-box: var(--xh-control-indicator-md);
     --xh-_checkbox-glyph: calc(var(--xh-_checkbox-box) * 0.75);
 
     /* 选中态的底与描边随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
@@ -23,8 +26,8 @@
     inline-size: var(--xh-_checkbox-box);
     block-size: var(--xh-_checkbox-box);
     padding: 0;
-    border: 1px solid var(--xh-checkbox-border, var(--xh-border-control));
-    border-radius: var(--xh-radius-sm);
+    border: var(--xh-stroke-thin) solid var(--xh-checkbox-border, var(--xh-border-control));
+    border-radius: var(--xh-checkbox-radius, var(--xh-shape-inset));
     background: var(--xh-checkbox-bg, var(--xh-bg-canvas));
     color: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
     cursor: pointer;
@@ -34,13 +37,27 @@
   }
 
   /* 半选与全选同样是「有值」，方框都得填上：
-     只填全选的话，半选那条横杠是实心底上的前景色（白），压在白画布上等于没画 */
+     只填全选的话，半选那条横杠是实心底上的前景色，压在同色画布上等于没画 */
   [data-scope='checkbox'][data-part='root'][data-state='checked'],
   [data-scope='checkbox'][data-part='root'][data-state='indeterminate'] {
     border-color: var(--xh-checkbox-border-checked, var(--xh-_checkbox-accent));
     background: var(--xh-checkbox-bg-checked, var(--xh-_checkbox-accent));
   }
 
+  /* 校验失败：方框描边转警示色。未勾时只有描边，勾上后填充仍走语气色，
+     两者不打架——描边压在 checked 规则之后，选择器同特指度靠书写顺序取胜 */
+  [data-scope='checkbox'][data-part='root'][data-invalid],
+  [data-scope='checkbox'][data-part='root'][data-state='checked'][data-invalid],
+  [data-scope='checkbox'][data-part='root'][data-state='indeterminate'][data-invalid] {
+    border-color: var(--xh-checkbox-border-invalid, var(--xh-border-invalid));
+  }
+
+  /* 文字随方框一起转警示色：给了默认插槽时外层是 <label>，方框自己的描边够不到那段文字 */
+  [data-scope='checkbox'][data-part='label'][data-invalid],
+  [data-scope='checkbox'][data-part='text'][data-invalid] {
+    color: var(--xh-checkbox-fg-invalid, var(--xh-fg-danger));
+  }
+
   [data-scope='checkbox'][data-part='root'][data-disabled] {
     cursor: not-allowed;
     opacity: var(--xh-state-disabled-opacity);
@@ -54,11 +71,11 @@
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里 */
   [data-scope='checkbox'][data-part='root'][data-size='sm'] {
-    --xh-_checkbox-box: var(--xh-space-3);
+    --xh-_checkbox-box: var(--xh-control-indicator-sm);
   }
 
   [data-scope='checkbox'][data-part='root'][data-size='lg'] {
-    --xh-_checkbox-box: var(--xh-space-5);
+    --xh-_checkbox-box: var(--xh-control-indicator-lg);
   }
 
   [data-scope='checkbox'][data-part='indicator'] {
@@ -71,15 +88,25 @@
     font-size: var(--xh-_checkbox-glyph);
   }
 
-  [data-scope='checkbox'][data-part='indicator']::before {
-    content: '✓';
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-scope='checkbox'][data-part='indicator']: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-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
   [data-scope='checkbox'][data-part='indicator'][data-state='unchecked'] {
     display: none;
   }
 
-  /* 半选画一条横杠盖住勾：aria-checked=mixed 在视觉上也得与「全选」分得开 */
+  /* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与「全选」分得开。
+     横杠与勾同走字形令牌，作者换掉标记时两态一起换；此前这条是手画的几何盒
+     （60% × stroke-thick），同一页上会出现两种横杠 */
   [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate'] {
     position: relative;
     color: transparent;
@@ -87,10 +114,40 @@
 
   [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
     position: absolute;
-    inline-size: 60%;
-    block-size: var(--xh-stroke-thick);
-    border-radius: var(--xh-radius-full);
-    background: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: var(--xh-checkbox-indicator-fg, var(--xh-_checkbox-on-accent));
     content: '';
+    -webkit-mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
+  }
+
+  /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox-group 的条目同一副样子 —— */
+  [data-scope='checkbox'][data-part='label'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-checkbox-label-gap, var(--xh-control-gap-md));
+    color: var(--xh-checkbox-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-checkbox-label-font-size, var(--xh-text-label-size));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='checkbox'][data-part='label'][data-disabled] {
+    color: var(--xh-checkbox-label-fg-disabled, var(--xh-fg-disabled));
+    cursor: not-allowed;
+  }
+
+  [data-scope='checkbox'][data-part='text'] {
+    color: inherit;
+    user-select: none;
+  }
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  [data-scope='checkbox'][data-part='root'][hidden],
+  [data-scope='checkbox'][data-part='indicator'][hidden],
+  [data-scope='checkbox'][data-part='label'][hidden] {
+    display: none;
   }
 }

package/css/clipboard.css

@@ -39,7 +39,7 @@
   }
 
   [data-scope='clipboard'][data-part='input'] {
-    min-inline-size: var(--xh-clipboard-input-min-w, 12rem);
+    min-inline-size: var(--xh-clipboard-input-min-w, var(--xh-control-min-w));
     block-size: var(--xh-clipboard-input-h, var(--xh-control-h-md));
     padding-inline: var(--xh-clipboard-input-px, var(--xh-control-px-md));
     padding-block: 0;
@@ -58,6 +58,7 @@
   }
 
   [data-scope='clipboard'][data-part='input']:focus-visible {
+    border-color: var(--xh-clipboard-input-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }

package/css/code-block.css

@@ -50,15 +50,20 @@
     white-space: pre;
   }
 
-  /* 语法配色。令牌集里没有语法色这一类，所以就地声明成可覆盖的变量：
-     注释与标点复用既有语义色，只有三种真需要色相的走 light-dark()。
-     浏览器不认 light-dark() 时这几条整体失效，退化成单色代码，读起来照常。 */
+  /* 开了换行：pre-wrap 仍保留缩进与连续空白，只是允许行尾折下来；
+     anywhere 让没有空格的长串（url、base64）也能断，否则照样撑出横向滚动 */
+  [data-scope='code-block'][data-part='code'][data-wrap] {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+
+  /* 语法配色：注释与标点复用既有语义色，三种真需要色相的走 --xh-syntax-* 语法令牌（随主题明暗切换）。 */
   [data-scope='code-block'][data-part='root'] {
     --xh-code-block-comment-fg: var(--xh-fg-muted);
     --xh-code-block-punctuation-fg: var(--xh-fg-subtle);
-    --xh-code-block-string-fg: light-dark(#0a7f5f, #7ee2b8);
-    --xh-code-block-number-fg: light-dark(#9a5b00, #f0b866);
-    --xh-code-block-keyword-fg: light-dark(#8250df, #d2a8ff);
+    --xh-code-block-string-fg: var(--xh-syntax-string);
+    --xh-code-block-number-fg: var(--xh-syntax-number);
+    --xh-code-block-keyword-fg: var(--xh-syntax-keyword);
   }
 
   /* 记号本身不带任何布局，只上色：它是 <code> 里的行内片段，多一点盒模型都会破坏对齐 */
@@ -77,7 +82,7 @@
 
   [data-scope='code-block'][data-part='token'][data-kind='keyword'] {
     color: var(--xh-code-block-keyword-fg);
-    font-weight: var(--xh-code-block-keyword-weight, 600);
+    font-weight: var(--xh-code-block-keyword-weight, var(--xh-font-weight-semibold));
   }
 
   [data-scope='code-block'][data-part='token'][data-kind='punctuation'] {

package/css/collapsible.css

@@ -10,7 +10,7 @@
     --xh-_collapsible-trigger-h: var(--xh-control-h-md);
     --xh-_collapsible-trigger-px: var(--xh-control-px-md);
     --xh-_collapsible-trigger-gap: var(--xh-control-gap-md);
-    --xh-_collapsible-trigger-font-size: var(--xh-text-label-size);
+    --xh-_collapsible-trigger-font-size: var(--xh-control-font-md);
   }
 
   /* —— 尺寸 —— */
@@ -19,14 +19,14 @@
     --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-font-size-sm);
+    --xh-_collapsible-trigger-font-size: var(--xh-control-font-sm);
   }
 
   [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-font-size-lg);
+    --xh-_collapsible-trigger-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='collapsible'][data-part='trigger'] {
@@ -61,8 +61,54 @@
     opacity: var(--xh-state-disabled-opacity);
   }
 
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
+     收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点 */
   [data-scope='collapsible'][data-part='content'] {
+    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));
   }
+
+  [data-scope='collapsible'][data-part='content'][data-state='open'] {
+    animation: xh-collapsible-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='collapsible'][data-part='content'][data-state='closed'] {
+    animation: xh-collapsible-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] {
+    display: none;
+  }
 }