@xihan-ui/styles 1.0.0 → 2.0.0

package/css/color-picker.css

@@ -1,27 +1,13 @@
-@layer xihan.motion {
-  @keyframes xh-pop-in {
-    from {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
 
-    to {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-  @keyframes xh-pop-out {
-    from {
-      opacity: 1;
-      scale: 1;
-    }
+/* 定义 color picker 样式。 */
+
+@import '../family/swatch.css';
+@import '../family/motion.css';
 
-    to {
-      opacity: 0;
-      scale: var(--xh-motion-scale-enter);
-    }
-  }
-}
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -29,10 +15,11 @@
     --xh-color-picker-skin: 1;
   }
 
-  /* 定位分工：取色区拇指的两条轴（inset-inline-start / inset-block-start）、
-     通道拇指的主轴（inset-inline-start）、浮层坐标、取色区底色、透明度轨道的渐变，
+  /* 定位分工：取色区拇指的两条轴（inset-inline-start / inset-block-start）、浮层坐标、取色区底色，
      全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
-     写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。 */
+     写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。
+     色相 / 透明度两条滑块与预设色板是内嵌组件，各自的皮归 color-slider.css 与 color-swatch-picker.css；
+     这里只画三个挂载点——它们同时充当内嵌组件的根节点，根上那几条规则要在这儿照抄一遍。 */
 
   /* 标签一行、盒一行的两行堆叠 */
   [data-scope='color-picker'][data-part='root'] {
@@ -48,6 +35,12 @@
     display: inline-flex;
     flex-direction: column;
     gap: var(--xh-color-picker-gap, var(--xh-space-1));
+
+    /* 不传尺寸时一律这么宽，宽度不随内容走；父容器给不出这么宽时整件跟着收，地板同步让步，不越出父容器。
+       地板不高过缺省宽：使用者把缺省宽钉到底线以下时不必再放开底线 */
+    inline-size: var(--xh-color-picker-control-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-color-picker-control-w, var(--xh-control-w)), var(--xh-color-picker-control-min-w, var(--xh-control-min-w)), 100%);
+    max-inline-size: 100%;
   }
 
   /* —— 尺寸 —— */
@@ -71,35 +64,37 @@
     color: var(--xh-color-picker-label-fg, var(--xh-fg-default));
     font-size: var(--xh-color-picker-label-font-size, var(--xh-_color-picker-label-font-size));
     font-weight: var(--xh-color-picker-label-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
   }
 
-  [data-scope='color-picker'][data-part='label'][data-disabled] {
-    color: var(--xh-fg-subtle);
-  }
-
-  /* 盒：描边、底色、控件高度与行内内衬都落在这一层 */
+  /* 盒：描边、底色、控件高度与行内内衬都落在这一层，
+     另加一档静态落影把它从页面里抬起一层 */
   [data-scope='color-picker'][data-part='control'] {
     display: inline-flex;
     align-items: center;
     gap: var(--xh-color-picker-control-gap, var(--xh-_color-picker-gap));
-    min-inline-size: var(--xh-color-picker-control-min-w, var(--xh-control-min-w));
+    min-inline-size: min(var(--xh-color-picker-control-min-w, var(--xh-control-min-w)), 100%);
     block-size: var(--xh-color-picker-control-h, var(--xh-_color-picker-h));
     padding-inline: var(--xh-color-picker-control-px, var(--xh-_color-picker-px));
     border: var(--xh-stroke-thin) solid var(--xh-color-picker-control-border, var(--xh-border-control));
     border-radius: var(--xh-color-picker-control-radius, var(--xh-shape-control));
-    background: var(--xh-color-picker-control-bg, var(--xh-bg-canvas));
+    background: var(--xh-color-picker-control-bg, transparent);
+    box-shadow: var(--xh-color-picker-control-shadow, var(--xh-elevation-raised));
     color: var(--xh-color-picker-control-fg, var(--xh-fg-default));
     cursor: pointer;
-    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='color-picker'][data-part='control'][hidden] {
     display: none;
   }
 
-  [data-scope='color-picker'][data-part='control']:hover:not([data-disabled]) {
+  /* 悬停换描边的同时换填充：这个盒里大半面积是那块色样，只挪一圈 1px 的描边读不出来。
+     只读档摘掉：它正拿压低一档的底色说「改不动」，被悬停的填充盖掉那条信息就没了 */
+  [data-scope='color-picker'][data-part='control']:hover:not([data-disabled], [data-readonly]) {
     border-color: var(--xh-color-picker-control-border-hover, var(--xh-border-control-hover));
+    background: var(--xh-color-picker-control-bg-hover, var(--xh-bg-subtle));
   }
 
   /* Tab 停靠点是盒里的 trigger，环画在盒上 */
@@ -112,7 +107,6 @@
   [data-scope='color-picker'][data-part='control'][data-disabled] {
     background: var(--xh-color-picker-control-bg-disabled, var(--xh-bg-subtle));
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
   /* 只读仍可聚焦、浮层照开，只是改不动：不置灰，只把底色压下去 */
@@ -142,22 +136,17 @@
     display: none;
   }
 
-  /* 单体控件用原生 disabled（预设色板那些格子也是原生按钮，同一条规矩） */
+  /* 单体控件用原生 disabled */
   [data-scope='color-picker'][data-part='trigger']:disabled {
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
-  /* 当前颜色的色块。背景由连接层内联给（含透明度），这里只给形状与描边。
-     刻意不铺棋盘格底：连接层写的是 background 简写，会盖掉这里任何 background-image，
-     半透明色因此直接与页面底色混合——小色块上这么显示是准确的。 */
+  /* 当前颜色的色块：面、棋盘格、描边与尺寸档全由色块面家族画（带 data-xh-swatch），
+     半透明色铺在棋盘格上；组件层只把自己的公开槽映射到家族合同 */
   [data-scope='color-picker'][data-part='swatch'] {
-    display: inline-block;
-    flex: none;
-    inline-size: var(--xh-color-picker-swatch-size, 18px);
-    block-size: var(--xh-color-picker-swatch-size, 18px);
-    border: var(--xh-stroke-thin) solid var(--xh-color-picker-swatch-border, var(--xh-border-default));
-    border-radius: var(--xh-color-picker-swatch-radius, var(--xh-shape-inset));
+    --xh-swatch-size: var(--xh-color-picker-swatch-size, var(--xh-_swatch-size));
+    --xh-swatch-radius: var(--xh-color-picker-swatch-radius, var(--xh-shape-inset));
+    --xh-swatch-border: var(--xh-color-picker-swatch-border, var(--xh-border-default));
   }
 
   /* 值串可能很长，必须能截断；框宽由盒定，这里得允许自己被压缩 */
@@ -177,46 +166,79 @@
     /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
        引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
     --xh-_color-picker-available-h: 100vh;
+    /* 落定那一侧的可用宽度，同样由定位引擎经内联自定义属性写进来，内容层据此夹住行内轴；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时退到视口宽 */
+    --xh-_color-picker-available-w: 100vw;
+    /* 每个面板按自身落位方向进入，截断祖先浮层方向的继承。 */
+    --xh-_overlay-enter-up: 0;
+    --xh-_overlay-enter-down: 0;
+    --xh-_overlay-enter-left: 0;
+    --xh-_overlay-enter-right: 0;
 
     /* 面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊出一条竖灰带 */
     --xh-scrollbar-track-bg: transparent;
 
     position: fixed;
-    z-index: var(--xh-color-picker-layer, var(--xh-layer-popover));
+    z-index: var(--xh-color-picker-layer, var(--xh-_layer, var(--xh-layer-popover)));
     /* 空壳不吃指针，交互只发生在 content 上 */
     pointer-events: none;
   }
 
+  [data-scope='color-picker'][data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-enter-down: 1;
+  }
+
+  [data-scope='color-picker'][data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-enter-up: 1;
+  }
+
+  [data-scope='color-picker'][data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-enter-right: 1;
+  }
+
+  [data-scope='color-picker'][data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-enter-left: 1;
+  }
+
   /* 锚点被滚出可视区：整个浮层随之收起 */
   [data-scope='color-picker'][data-part='positioner'][data-hidden] {
     visibility: hidden;
   }
 
   [data-scope='color-picker'][data-part='content'] {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: var(--xh-color-picker-content-gap, var(--xh-space-3));
     inline-size: var(--xh-color-picker-content-w, var(--xh-overlay-min-w));
+    /* 定宽的面板也要夹一道：窄视口下伸出去，右半边的取色区就点不到了 */
+    max-inline-size: var(--xh-_color-picker-available-w);
     padding-block: var(--xh-color-picker-content-py, var(--xh-space-3));
     padding-inline: var(--xh-color-picker-content-px, var(--xh-space-3));
     max-block-size: min(var(--xh-color-picker-max-h, var(--xh-viewport-h-md)), var(--xh-_color-picker-available-h));
     overflow-y: auto;
+    /* 浮层滚动面：滚到头不把页面一起带走（§6.6） */
+    overscroll-behavior: contain;
+    /* 面域 + 滑杆 + 通道输入的表单型多列面板，走 floating 材质（§8.4）——实体底 + --xh-border-default 描边 +
+       --xh-elevation-floating 落影，不透景、不画顶部边界光 */
     border: var(--xh-stroke-thin) solid var(--xh-color-picker-content-border, var(--xh-border-default));
-    border-radius: var(--xh-color-picker-content-radius, var(--xh-shape-surface));
+    border-radius: var(--xh-color-picker-content-radius, var(--xh-shape-overlay));
     background: var(--xh-color-picker-content-bg, var(--xh-bg-surface));
     color: var(--xh-color-picker-content-fg, var(--xh-fg-default));
     box-shadow: var(--xh-color-picker-content-shadow, var(--xh-elevation-floating));
     pointer-events: auto;
   }
 
+  /* 在场那一档才提前备好合成层：属性随 data-state 一起消失，收起后不长期占着 */
   [data-scope='color-picker'][data-part='content'][data-state='open'] {
-    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    will-change: opacity, translate;
+    animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
   /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
      免得动画结束到真收起之间闪一下原样 */
   [data-scope='color-picker'][data-part='content'][data-state='closed'] {
-    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+    animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   /* 浮层本身只是个容器（tabindex=-1 是焦点域的兜底落点），落焦时不画环 */
@@ -229,16 +251,16 @@
      两层都收在一个 ::before 里：它是盒树里的第一个子节点，作者写的拇指排在它后面，
      绘制顺序上就压在渐变之上；拆成 ::before + ::after 的话 ::after 是最后一个子节点，
      会反过来盖住拇指。 */
-  [data-scope='color-picker'][data-part='area'] {
+  [data-scope='color-picker'][data-part='saturation-area'] {
     position: relative;
     display: block;
-    block-size: var(--xh-color-picker-area-h, 9rem);
-    border-radius: var(--xh-color-picker-area-radius, var(--xh-shape-control));
+    block-size: var(--xh-color-picker-saturation-area-h, 9rem);
+    border-radius: var(--xh-color-picker-saturation-area-radius, var(--xh-shape-control));
     cursor: crosshair;
   }
 
   /* white / black 是 HSV 色彩空间自带的两个端点，不是主题色，因此不走令牌 */
-  [data-scope='color-picker'][data-part='area']::before {
+  [data-scope='color-picker'][data-part='saturation-area']::before {
     position: absolute;
     border-radius: inherit;
     background-image:
@@ -250,39 +272,38 @@
 
   /* 渐变方向没有逻辑关键字可用，只能靠 :dir() 分流：
      拇指走的是 inset-inline-start，rtl 下自动换向，饱和度那层渐变不跟着换就反了 */
-  [data-scope='color-picker'][data-part='area']:dir(rtl)::before {
+  [data-scope='color-picker'][data-part='saturation-area']:dir(rtl)::before {
     background-image:
       linear-gradient(to bottom, transparent, black),
       linear-gradient(to left, white, transparent);
   }
 
-  [data-scope='color-picker'][data-part='area'][data-readonly] {
+  [data-scope='color-picker'][data-part='saturation-area'][data-readonly]:not([data-disabled]) {
     cursor: default;
   }
 
-  [data-scope='color-picker'][data-part='area'][data-disabled] {
-    cursor: not-allowed;
+  [data-scope='color-picker'][data-part='saturation-area'][data-disabled] {
     opacity: var(--xh-state-disabled-opacity);
   }
 
-  /* 两处拇指同一副长相：镂空的小圆环，中心正好落在值所在的比例点上。
+  /* 取色区的拇指：镂空的小圆环，中心正好落在值所在的比例点上。
      内联样式把 inset-* 定在比例上，那是拇指的起始边不是圆心，用负的逻辑外边距回拉半径。
      刻意不用 translate(-50%)：rtl 下 inset-inline-start 映射到 right，
      位移量是物理方向的，会把拇指推向错误的一侧；负的逻辑外边距自己就跟着换向。
-     box-sizing 必须显式写：描边要吃进直径里，否则实际盒子比变量宽两条边，回拉就对不上圆心。 */
-  [data-scope='color-picker'][data-part='area-thumb'],
-  [data-scope='color-picker'][data-part='channel-slider-thumb'] {
+     box-sizing 必须显式写：描边要吃进直径里，否则实际盒子比变量宽两条边，回拉就对不上圆心。
+     两条滑块的拇指归 color-slider 那份皮，与这一颗同一副长相。 */
+  [data-scope='color-picker'][data-part='area-thumb'] {
     position: absolute;
     box-sizing: border-box;
     inline-size: var(--xh-color-picker-thumb-size, 14px);
     block-size: var(--xh-color-picker-thumb-size, 14px);
     margin-inline-start: calc(var(--xh-color-picker-thumb-size, 14px) / -2);
     border: var(--xh-stroke-thick) solid var(--xh-color-picker-thumb-border, var(--xh-color-neutral-0));
-    border-radius: var(--xh-color-picker-thumb-radius, var(--xh-shape-pill));
+    border-radius: var(--xh-color-picker-thumb-radius, var(--xh-shape-circle));
     background: transparent;
     box-shadow: var(--xh-color-picker-thumb-shadow, var(--xh-elevation-raised));
     cursor: grab;
-    transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong);
   }
 
   /* 取色区的纵轴也由连接层给（inset-block-start），回拉同样按 block-start 那侧 */
@@ -290,101 +311,43 @@
     margin-block-start: calc(var(--xh-color-picker-thumb-size, 14px) / -2);
   }
 
-  /* 通道拇指的纵轴归样式表：连接层只写主轴，交叉轴不写就得在这里钉死居中 */
-  [data-scope='color-picker'][data-part='channel-slider-thumb'] {
-    inset-block-start: 50%;
-    margin-block-start: calc(var(--xh-color-picker-thumb-size, 14px) / -2);
-  }
-
-  [data-scope='color-picker'][data-part='area-thumb']:focus-visible,
-  [data-scope='color-picker'][data-part='channel-slider-thumb']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 只有手真正拖着的那一处带 data-dragging：放大与光标不会三处一起变。
+  /* 只有手真正拖着时带 data-dragging：放大与光标不会几处一起变。
      放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式不用跟着改 */
-  [data-scope='color-picker'][data-part='area-thumb'][data-dragging],
-  [data-scope='color-picker'][data-part='channel-slider-thumb'][data-dragging] {
+  [data-scope='color-picker'][data-part='area-thumb'][data-dragging] {
     scale: var(--xh-color-picker-thumb-scale-dragging, var(--xh-motion-scale-drag));
     cursor: grabbing;
   }
 
-  [data-scope='color-picker'][data-part='area-thumb'][data-readonly],
-  [data-scope='color-picker'][data-part='channel-slider-thumb'][data-readonly] {
+  [data-scope='color-picker'][data-part='area-thumb'][data-readonly]:not([data-disabled]) {
     cursor: default;
   }
 
-  [data-scope='color-picker'][data-part='area-thumb'][data-disabled],
-  [data-scope='color-picker'][data-part='channel-slider-thumb'][data-disabled] {
-    cursor: not-allowed;
-  }
+  /* 两条颜色滑块的挂载点，同时充当各自的根节点：color-slider 那份皮的 root 规则落在
+     [data-scope='color-slider'][data-part='root'] 上，而这里没有那个节点，所以根上挂的两个私有槽
+     （拇指直径、轨道厚度，control / track / thumb 都读它们）与排布得在这儿照抄一遍；
+     滑块内部的皮仍归 color-slider 那一份。尺寸档跟着浮层上的 data-size 走，不必再各写一遍 */
+  [data-scope='color-picker'][data-part='hue-slider'],
+  [data-scope='color-picker'][data-part='alpha-slider'] {
+    --xh-_thumb-size: var(--xh-color-picker-slider-thumb-size, var(--xh-track-thumb-size));
+    --xh-_track-thickness: var(--xh-color-picker-slider-track-thickness, var(--xh-space-3));
 
-  /* 拇指以整条滑杆为定位上下文（拇指浮出轨道，挂在轨道上会被轨道的盒子束住）。
-     厚度取拇指直径：轨道只有几个像素，滑杆若按轨道高，浮出来的拇指会顶到上下相邻的元素。 */
-  [data-scope='color-picker'][data-part='channel-slider'] {
-    position: relative;
     display: flex;
-    align-items: center;
-    block-size: var(--xh-color-picker-thumb-size, 14px);
-    border-radius: var(--xh-color-picker-track-radius, var(--xh-shape-pill));
-    cursor: pointer;
-  }
-
-  /* 透明度那条的棋盘格铺在滑杆上、垫在轨道底下：
-     轨道自己的渐变从全透明走到实色，透明那半正好把棋盘格露出来。
-     铺在轨道上是做不到的——那儿的 background-image 归连接层。 */
-  [data-scope='color-picker'][data-part='channel-slider'][data-channel='alpha'] {
-    background-image:
-      linear-gradient(45deg, var(--xh-color-picker-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
-      linear-gradient(-45deg, var(--xh-color-picker-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--xh-color-picker-checker, var(--xh-color-neutral-300)) 75%),
-      linear-gradient(-45deg, transparent 75%, var(--xh-color-picker-checker, var(--xh-color-neutral-300)) 75%);
-    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
-    background-size: 8px 8px;
+    flex-direction: column;
   }
 
-  [data-scope='color-picker'][data-part='channel-slider'][data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
+  /* 标题与轨道之间的间隙 */
+  [data-scope='color-picker'][data-part='hue-slider'] {
+    gap: var(--xh-color-picker-hue-slider-gap, var(--xh-stack-gap-md));
   }
 
-  [data-scope='color-picker'][data-part='channel-slider'][data-readonly] {
-    cursor: default;
+  [data-scope='color-picker'][data-part='alpha-slider'] {
+    gap: var(--xh-color-picker-alpha-slider-gap, var(--xh-stack-gap-md));
   }
 
-  [data-scope='color-picker'][data-part='channel-slider-track'] {
-    inline-size: 100%;
-    block-size: var(--xh-color-picker-track-thickness, 8px);
-    border-radius: var(--xh-color-picker-track-radius, var(--xh-shape-pill));
-  }
-
-  /* 色相轨道是一条固定的彩虹：色相的六个锚点，与颜色主题无关，因此不走令牌。
-     透明度轨道的渐变归连接层（它要用到当前颜色），这里不碰。 */
-  [data-scope='color-picker'][data-part='channel-slider-track'][data-channel='hue'] {
-    background-image: linear-gradient(
-      to right,
-      hsl(0deg 100% 50%),
-      hsl(60deg 100% 50%),
-      hsl(120deg 100% 50%),
-      hsl(180deg 100% 50%),
-      hsl(240deg 100% 50%),
-      hsl(300deg 100% 50%),
-      hsl(360deg 100% 50%)
-    );
-  }
-
-  [data-scope='color-picker'][data-part='channel-slider-track'][data-channel='hue']:dir(rtl) {
-    background-image: linear-gradient(
-      to left,
-      hsl(0deg 100% 50%),
-      hsl(60deg 100% 50%),
-      hsl(120deg 100% 50%),
-      hsl(180deg 100% 50%),
-      hsl(240deg 100% 50%),
-      hsl(300deg 100% 50%),
-      hsl(360deg 100% 50%)
-    );
+  /* 禁用的整体压暗只做一次，落在最外层；alpha 关掉时透明度那条整条压暗 */
+  [data-scope='color-picker'][data-part='hue-slider'][data-disabled],
+  [data-scope='color-picker'][data-part='alpha-slider'][data-disabled] {
+    opacity: var(--xh-state-disabled-opacity);
   }
 
   [data-scope='color-picker'][data-part='channel-input'] {
@@ -394,7 +357,7 @@
     padding-inline: var(--xh-color-picker-input-px, var(--xh-control-px-sm));
     border: var(--xh-stroke-thin) solid var(--xh-color-picker-input-border, var(--xh-border-control));
     border-radius: var(--xh-color-picker-input-radius, var(--xh-shape-control));
-    background: var(--xh-color-picker-input-bg, var(--xh-bg-canvas));
+    background: var(--xh-color-picker-input-bg, transparent);
     color: inherit;
     /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与周围文本对不上 */
     font-family: inherit;
@@ -405,8 +368,7 @@
   [data-scope='color-picker'][data-part='channel-input']:focus-visible {
     border-color: var(--xh-color-picker-input-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    /* 往内收一道发丝：输入框贴着面板边排，环画在外沿会压到相邻通道 */
-    outline-offset: calc(-1 * var(--xh-stroke-thin));
+    outline-offset: var(--xh-ring-offset);
   }
 
   /* 打到一半的串：框里留着草稿，但值没动——描边提示"这串还没被收下" */
@@ -421,7 +383,6 @@
   [data-scope='color-picker'][data-part='channel-input']:disabled {
     background: var(--xh-color-picker-input-bg-disabled, var(--xh-bg-subtle));
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
   [data-scope='color-picker'][data-part='eye-dropper-trigger'] {
@@ -441,6 +402,10 @@
     line-height: var(--xh-leading-none);
     cursor: pointer;
     user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
   }
 
   [data-scope='color-picker'][data-part='eye-dropper-trigger']:hover:not(:disabled) {
@@ -448,9 +413,14 @@
     color: var(--xh-color-picker-action-fg-hover, var(--xh-fg-default));
   }
 
-  [data-scope='color-picker'][data-part='eye-dropper-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 按下去要有回应：换底之外再压一档。取色是一次「点下去就交给系统」的操作，
+     松手那一刻浮层多半已经被系统的取色镜头盖住，按下的回执只有这一瞬看得见。
+     指针 :active 与 Headless 投影的 data-pressed（Space / Enter 与触屏按住）看见同一副按压面 */
+  [data-scope='color-picker'][data-part='eye-dropper-trigger']:not(:disabled):is(:active, [data-pressed]) {
+    background: var(--xh-color-picker-action-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
   }
 
   /* 取色途中按钮保持按下的样子：屏幕取色期间浮层多半被系统的取色镜头盖着，
@@ -462,54 +432,41 @@
 
   [data-scope='color-picker'][data-part='eye-dropper-trigger']:disabled {
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
   }
 
-  [data-scope='color-picker'][data-part='swatch-group'] {
+  /* 预设色板的挂载点，同时充当色板的根节点：color-swatch-picker 那份皮的 root 规则落在
+     [data-scope='color-swatch-picker'][data-part='root'] 上，而这里没有那个节点，所以根上挂的那几个私有槽
+     （格子边长、间距、徽标尺寸、语气色、图标尺）与排布得在这儿照抄一遍；格子的皮仍归色板那一份。
+     浮层里的色板走小号格子：与滑块的拇指、数值框一个量级，整块面板才不会被色板撑开 */
+  [data-scope='color-picker'][data-part='swatch-picker'] {
+    --xh-_color-swatch-picker-cell: var(--xh-color-picker-swatch-cell, var(--xh-control-h-sm));
+    --xh-_color-swatch-picker-gap: var(--xh-color-picker-swatch-gap, var(--xh-control-gap-sm));
+    --xh-_color-swatch-picker-indicator: var(--xh-control-indicator-sm);
+    --xh-_color-swatch-picker-mark: calc(var(--xh-_color-swatch-picker-indicator) - var(--xh-space-1));
+    --xh-_color-swatch-picker-accent: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-icon-size: var(--xh-color-picker-swatch-icon-size, var(--xh-_color-swatch-picker-mark));
+
     display: flex;
     flex-wrap: wrap;
-    gap: var(--xh-color-picker-swatch-gap, var(--xh-space-1));
-  }
-
-  /* 每格都是原生按钮、各占一个 Tab 位；背景由连接层内联给 */
-  [data-scope='color-picker'][data-part='swatch-item'] {
-    inline-size: var(--xh-color-picker-swatch-item-size, 1.25rem);
-    block-size: var(--xh-color-picker-swatch-item-size, 1.25rem);
-    padding: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-color-picker-swatch-border, var(--xh-border-default));
-    border-radius: var(--xh-color-picker-swatch-radius, var(--xh-shape-inset));
-    cursor: pointer;
-  }
-
-  /* 正被选中的那一格：环画在盒子外面，不挤占色块本身的面积 */
-  [data-scope='color-picker'][data-part='swatch-item'][data-state='checked'] {
-    outline: var(--xh-ring-width) solid var(--xh-color-picker-swatch-ring, var(--xh-bg-brand));
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  [data-scope='color-picker'][data-part='swatch-item']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    align-items: center;
+    gap: var(--xh-color-picker-swatch-picker-gap, var(--xh-_color-swatch-picker-gap));
   }
 
-  [data-scope='color-picker'][data-part='swatch-item']:disabled {
+  [data-scope='color-picker'][data-part='swatch-picker'][data-disabled] {
     cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
   }
 
   /* 任何 display 都会盖掉 UA 的 [hidden]{display:none}：
      凡是被赋了 display 的角色节点都要显式让位，漏一处收起态就失效。
-     连接层当下只往 content 上写 hidden，其余几处是给作者自己收起某一块留的后路。 */
+     content 的收起交给 presence：退场结束后由适配器写内联 display:none，避免截断动画。 */
   [data-scope='color-picker'][data-part='root'][hidden],
   [data-scope='color-picker'][data-part='trigger'][hidden],
-  [data-scope='color-picker'][data-part='swatch'][hidden],
-  [data-scope='color-picker'][data-part='content'][hidden],
-  [data-scope='color-picker'][data-part='area'][hidden],
+  [data-scope='color-picker'][data-part='saturation-area'][hidden],
   [data-scope='color-picker'][data-part='area-thumb'][hidden],
-  [data-scope='color-picker'][data-part='channel-slider'][hidden],
-  [data-scope='color-picker'][data-part='channel-slider-thumb'][hidden],
+  [data-scope='color-picker'][data-part='hue-slider'][hidden],
+  [data-scope='color-picker'][data-part='alpha-slider'][hidden],
   [data-scope='color-picker'][data-part='eye-dropper-trigger'][hidden],
-  [data-scope='color-picker'][data-part='swatch-group'][hidden] {
+  [data-scope='color-picker'][data-part='swatch-picker'][hidden] {
     display: none;
   }
 
@@ -528,4 +485,35 @@
     white-space: nowrap;
     pointer-events: none;
   }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    [data-scope='color-picker'][data-part='positioner'] {
+      display: none;
+    }
+  }
+
+  /*
+   * 高对比档：取色面画的就是颜色本身，被系统换掉之后整个组件不再能取色。这一处退出强制着色，
+   * 自己保住原色；退出之后它不再跟着系统底色走，补一圈系统描边把它从背景里框出来。
+   * 触发钮里的色块归 Swatch 家族、两条滑块的轨道与色板的格子归各自那份皮，都已各自退出强制着色。
+   */
+  @media (forced-colors: active) {
+    /* 高对比档里底色被系统换掉，取色按钮按下那一档用系统高亮反色画回 */
+    [data-scope='color-picker'][data-part='eye-dropper-trigger']:not(:disabled):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    [data-scope='color-picker'][data-part='saturation-area'],
+    [data-scope='color-picker'][data-part='saturation-area']::before {
+      forced-color-adjust: none;
+    }
+
+    [data-scope='color-picker'][data-part='saturation-area'] {
+      outline: var(--xh-stroke-thin) solid ButtonBorder;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+    }
+  }
 }