@xihan-ui/styles 1.0.0 → 2.0.0

package/css/checkbox.css

@@ -1,3 +1,12 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 checkbox 样式。 */
+
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='checkbox'] {
@@ -5,51 +14,83 @@
   }
 
   [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-control-indicator-md);
     --xh-_checkbox-glyph: calc(var(--xh-_checkbox-box) * 0.75);
+    /* 作者塞进指示符槽的图标和兜底字形共用盒比例；显式 icon-size 仍可覆盖。 */
+    --xh-icon-size: var(--xh-checkbox-icon-size, var(--xh-_checkbox-glyph));
 
-    /* 选中态的底与描边随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
-    --xh-_checkbox-accent: var(--xh-_tone, var(--xh-bg-brand));
+    /* 选中态是小面积控件边界，使用保证 3:1 的语气 control 色；没写 tone 时退回品牌底。 */
+    --xh-_checkbox-accent: var(--xh-_tone-border-control, var(--xh-bg-brand));
 
     /* 实心底上的勾与横杠，同样没写 data-tone 时退回原来的品牌底前景色 */
     --xh-_checkbox-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
 
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--xh-_checkbox-box);
-    block-size: var(--xh-_checkbox-box);
+    /* 方框接 Action Control icon 档（§9.1 定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
+       焦点环由家族配方给，这里只把使用者槽映射到桥接槽。面按字段静息形态取值（§8.3）：透明底 +
+       --xh-border-control 描边 + 无影，不消费海拔与顶光；悬停只把描边升一档，底不动；按下换到 200 档中性面
+       （白底承载）；边长随 --xh-control-indicator-* 走，不取家族的 profile 尺寸。
+       常态 / 勾中 / 校验失败 / 只读只换下面四支私有槽，桥接槽的映射写一次 */
+    --xh-_checkbox-bg: var(--xh-checkbox-bg, transparent);
+    --xh-_checkbox-bg-pressed: var(--xh-checkbox-bg-pressed, var(--xh-bg-subtle-hover));
+    --xh-_checkbox-border: var(--xh-checkbox-border, var(--xh-border-control));
+    --xh-_checkbox-border-hover: var(--xh-checkbox-border-hover, var(--xh-border-control-hover));
+
+    --xh-action-visual-size: var(--xh-_checkbox-box);
+    --xh-action-min-inline-size: var(--xh-_checkbox-box);
+    --xh-action-radius: var(--xh-checkbox-radius, var(--xh-shape-inset));
+    --xh-action-bg-rest: var(--xh-_checkbox-bg);
+    --xh-action-bg-hover: var(--xh-_checkbox-bg);
+    --xh-action-bg-pressed: var(--xh-_checkbox-bg-pressed);
+    --xh-action-bg-focus-visible: var(--xh-_checkbox-bg);
+    --xh-action-bg-disabled: var(--xh-checkbox-bg-disabled, var(--xh-bg-subtle));
+    --xh-action-border-rest: var(--xh-_checkbox-border);
+    --xh-action-border-hover: var(--xh-_checkbox-border-hover);
+    --xh-action-border-pressed: var(--xh-_checkbox-border-hover);
+    --xh-action-border-focus-visible: var(--xh-_checkbox-border);
+    --xh-action-border-disabled: var(--xh-checkbox-border-disabled, var(--xh-border-default));
+    --xh-action-fg-rest: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
+    --xh-action-fg-hover: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
+    --xh-action-fg-pressed: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
+    --xh-action-fg-focus-visible: var(--xh-checkbox-fg, var(--xh-_checkbox-on-accent));
+    --xh-action-fg-disabled: var(--xh-checkbox-fg-disabled, var(--xh-fg-disabled));
+    --xh-action-shadow-rest: var(--xh-checkbox-shadow, none);
+    --xh-action-shadow-hover: var(--xh-checkbox-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-checkbox-shadow, none);
+    --xh-action-shadow-focus-visible: var(--xh-checkbox-shadow, none);
+    --xh-action-shadow-disabled: var(--xh-checkbox-shadow, none);
+
+    /* 家族的 icon 档不写 padding-block；UA 给 button 的 1px 上下内距会把 16px 盒里的勾挤扁 */
     padding: 0;
-    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;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 半选与全选同样是「有值」，方框都得填上：
-     只填全选的话，半选那条横杠是实心底上的前景色，压在同色画布上等于没画 */
+     只填全选的话，半选那条横杠是实心底上的前景色，压在同色画布上等于没画。
+     面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     勾中的方框描边与底同色，悬停不换描边——填色本身已经在表达状态；按下换到语气的 active 档 */
   [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));
+    --xh-_checkbox-bg: var(--xh-checkbox-bg-checked, var(--xh-_checkbox-accent));
+    --xh-_checkbox-bg-pressed: var(--xh-checkbox-bg-checked-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
+    --xh-_checkbox-border: var(--xh-checkbox-border-checked, var(--xh-_checkbox-accent));
+    --xh-_checkbox-border-hover: var(--xh-checkbox-border-checked, var(--xh-_checkbox-accent));
+    --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* 校验失败：方框描边转警示色。未勾时只有描边，勾上后填充仍走语气色，
+  /* 高对比轴把未选中边界提到 strong；有值两态仍由实心语气底与配对勾形表达。 */
+  :where([data-contrast='more']) [data-scope='checkbox'][data-part='root'][data-state='unchecked'] {
+    --xh-_checkbox-border: var(--xh-checkbox-border, var(--xh-border-strong));
+  }
+
+  /* 校验失败：方框描边转警示色，悬停与按下都不换回控件边。未勾时只有描边，勾上后填充仍走语气色，
      两者不打架——描边压在 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));
+    --xh-_checkbox-border: var(--xh-checkbox-border-invalid, var(--xh-border-invalid));
+    --xh-_checkbox-border-hover: var(--xh-checkbox-border-invalid, var(--xh-border-invalid));
   }
 
   /* 文字随方框一起转警示色：给了默认插槽时外层是 <label>，方框自己的描边够不到那段文字 */
@@ -58,14 +99,31 @@
     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);
+  /* 悬停标签文字时也让控制盒回应，整行可点不再只有移到 16px 小盒上才看得出来：
+     指针落在方框上时由家族的悬停块换到 --xh-action-border-hover，落在标签文字上时这里补同一档；
+     未勾选的方框描边升一档（字段静息 → hover 的同一条阶梯，§8.3），勾中 / 校验失败的方框由上面的映射钉住不换 */
+  @media (hover: hover) {
+    [data-scope='checkbox'][data-part='label']:not([data-disabled]):not([data-readonly]):hover
+      [data-scope='checkbox'][data-part='root'] {
+      border-color: var(--xh-_checkbox-border-hover);
+    }
   }
 
-  [data-scope='checkbox'][data-part='root']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 只读改不动值，但不是禁用：颜色与不透明度都照常，只把「可点」这个暗示与悬停 / 按下的回应一起收回来。
+     方框与整行文字一起收——给了默认插槽时外层是 <label>，只收方框的话文字那半仍摆着手型。
+     排掉禁用是因为这条选择器权重高过禁用那条，不排就会把 not-allowed 覆盖回 default */
+  [data-scope='checkbox'][data-part='root'][data-readonly]:not([data-disabled]) {
+    --xh-_checkbox-bg-pressed: var(--xh-_checkbox-bg);
+    --xh-_checkbox-border-hover: var(--xh-_checkbox-border);
+    --xh-action-scale-pressed: none;
+    --xh-action-cursor-rest: default;
+    --xh-action-cursor-hover: default;
+    --xh-action-cursor-pressed: default;
+    --xh-action-cursor-focus-visible: default;
+  }
+
+  [data-scope='checkbox'][data-part='label'][data-readonly]:not([data-disabled]) {
+    cursor: default;
   }
 
   /* —— 尺寸 —— */
@@ -78,14 +136,39 @@
     --xh-_checkbox-box: var(--xh-control-indicator-lg);
   }
 
+  /* 鼠标落点：方框只有一档指示符那么大，命中区靠一枚绝对定位的伪元素往外扩，
+     盒子本身一动不动——放大盒子会把并排的文字挤开。常态外扩 6px，最小的 sm 档由 12px 到 24px；
+     粗指针下的 44px 热区由家族 icon 档的 ::after 给，这里只把起点交还 */
+  [data-scope='checkbox'][data-part='root']::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--xh-space-1_5));
+  }
+
+  /* 粗指针：家族在同一个 ::after 上写 44×44 的盒、50% 起点与 -50% 平移把它钉在方框中心。
+     上面那条 inset 负值特指度更高，留着的话起点被钉在 -6px、再被家族的平移拉走半个盒，
+     热区的中心落到方框左上角外面，方框右下大半摸不着 */
+  @media (pointer: coarse) {
+    [data-scope='checkbox'][data-part='root']::after {
+      inset-block: 50% auto;
+      inset-inline: 50% auto;
+    }
+  }
+
   [data-scope='checkbox'][data-part='indicator'] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     inline-size: 100%;
     block-size: 100%;
+    opacity: 0;
     line-height: var(--xh-leading-none);
     font-size: var(--xh-_checkbox-glyph);
+    pointer-events: none;
+    scale: var(--xh-motion-scale-enter);
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
   }
 
   /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
@@ -100,8 +183,9 @@
     mask: var(--xh-glyph-mark-check) center / contain no-repeat;
   }
 
-  [data-scope='checkbox'][data-part='indicator'][data-state='unchecked'] {
-    display: none;
+  [data-scope='checkbox'][data-part='indicator']:is([data-state='checked'], [data-state='indeterminate']) {
+    opacity: 1;
+    scale: 1;
   }
 
   /* 半选换一枚横杠字形盖住勾：aria-checked=mixed 在视觉上也得与「全选」分得开。
@@ -122,23 +206,46 @@
     mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
-  /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox-group 的条目同一副样子 —— */
+  /* 禁用时横杠也走置灰色：它自己画底色，不从 root 的 color 继承 */
+  [data-scope='checkbox'][data-part='root'][data-disabled]
+    [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
+    background-color: var(--xh-checkbox-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox-group 的条目、switch 的标签同一副样子 ——
+     文字是控件自己的文字，字号随 size 档取 --xh-control-font-*（§6.4 控件字号随档）；
+     行高取正文档，长文字可以自然换行 */
   [data-scope='checkbox'][data-part='label'] {
+    --xh-_checkbox-label-gap: var(--xh-control-gap-md);
+    --xh-_checkbox-label-font-size: var(--xh-control-font-md);
+
     display: inline-flex;
     align-items: center;
-    gap: var(--xh-checkbox-label-gap, var(--xh-control-gap-md));
+    gap: var(--xh-checkbox-label-gap, var(--xh-_checkbox-label-gap));
     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);
+    font-size: var(--xh-checkbox-label-font-size, var(--xh-_checkbox-label-font-size));
+    line-height: var(--xh-checkbox-label-leading, var(--xh-leading-normal));
     cursor: pointer;
   }
 
+  [data-scope='checkbox'][data-part='label'][data-size='sm'] {
+    --xh-_checkbox-label-gap: var(--xh-control-gap-sm);
+    --xh-_checkbox-label-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='checkbox'][data-part='label'][data-size='lg'] {
+    --xh-_checkbox-label-gap: var(--xh-control-gap-lg);
+    --xh-_checkbox-label-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 禁用标签色统一 --xh-fg-subtle（§6.4） */
   [data-scope='checkbox'][data-part='label'][data-disabled] {
-    color: var(--xh-checkbox-label-fg-disabled, var(--xh-fg-disabled));
+    color: var(--xh-checkbox-label-fg-disabled, var(--xh-fg-subtle));
     cursor: not-allowed;
   }
 
   [data-scope='checkbox'][data-part='text'] {
+    min-inline-size: 0;
     color: inherit;
     user-select: none;
   }
@@ -150,4 +257,34 @@
   [data-scope='checkbox'][data-part='label'][hidden] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    /* 真实 border 保住盒，系统前景重新画出勾与半选横杠。 */
+    [data-scope='checkbox'][data-part='indicator']:empty::before,
+    [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
+      background-color: CanvasText;
+    }
+
+    [data-scope='checkbox'][data-part='root'][data-disabled]
+      [data-scope='checkbox'][data-part='indicator']:empty::before,
+    [data-scope='checkbox'][data-part='root'][data-disabled]
+      [data-scope='checkbox'][data-part='indicator'][data-state='indeterminate']::after {
+      background-color: GrayText;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底色：勾上与半选两档全靠实心底加底上那枚浅色标记表达，落到纸上与没勾的一模一样
+       （标记本身也是一块 background，同样印不出来）。改用描边这条印得出来的通道：
+       两档各加粗一级把方框分出来，半选再换成虚线，三档在纸上各不相同。
+       描边吃进定尺盒里（reset 层已把 box-sizing 收成 border-box），方框边长不变。 */
+    [data-scope='checkbox'][data-part='root'][data-state='checked'] {
+      border-width: var(--xh-stroke-thick);
+    }
+
+    [data-scope='checkbox'][data-part='root'][data-state='indeterminate'] {
+      border-width: var(--xh-stroke-thick);
+      border-style: dashed;
+    }
+  }
 }