@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/color-picker.css

@@ -0,0 +1,649 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 color picker 样式。 */
+
+@import '../family/field-chrome.css';
+@import '../family/action-control.css';
+@import '../family/swatch.css';
+@import '../family/motion.css';
+@import '../family/tag-list.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-color-picker {
+    --xh-color-picker-skin: 1;
+  }
+
+  /* 定位分工：取色区拇指的两条轴（inset-inline-start / inset-block-start）、浮层坐标、取色区底色，
+     全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
+     写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。
+     色相 / 透明度两条滑块与预设色板是内嵌组件，各自的皮归 color-slider.css 与 color-swatch-picker.css；
+     这里只画三个挂载点——它们同时充当内嵌组件的根节点，根上那几条规则要在这儿照抄一遍。 */
+
+  /* 标签一行、盒一行的两行堆叠 */
+  .xh-scope-color-picker[data-part='root'] {
+    /* 盒的度量走私有槽中转，与同族的下拉选择一处对一处 */
+    --xh-_color-picker-h: var(--xh-control-h-md);
+    --xh-_color-picker-px: var(--xh-control-px-md);
+    --xh-_color-picker-gap: var(--xh-control-gap-md);
+
+
+    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%;
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。浮层那一侧也要挂：positioner 被搬到 portal 落点，
+     继承不到根上的私有槽，所以两个部件一起收 */
+  .xh-scope-color-picker:is([data-part='root'], [data-part='positioner'])[data-size='sm'] {
+    --xh-_color-picker-h: var(--xh-control-h-sm);
+    --xh-_color-picker-px: var(--xh-control-px-sm);
+    --xh-_color-picker-gap: var(--xh-control-gap-sm);
+  }
+
+  .xh-scope-color-picker:is([data-part='root'], [data-part='positioner'])[data-size='lg'] {
+    --xh-_color-picker-h: var(--xh-control-h-lg);
+    --xh-_color-picker-px: var(--xh-control-px-lg);
+    --xh-_color-picker-gap: var(--xh-control-gap-lg);
+  }
+
+  .xh-scope-color-picker[data-part='label'] {
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-color-picker-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-color-picker-label-gap, var(--xh-space-2)) - var(--xh-color-picker-gap, var(--xh-space-1)));
+    color: var(--xh-color-picker-label-fg, var(--xh-fg-muted));
+    /* 字段标签不随档：与同族字段同一档标签字号 */
+    font-size: var(--xh-color-picker-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-color-picker-label-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* 盒：接字段外壳家族（data-xh-field-chrome），描边、底色、控件高度、行内内衬、悬停与聚焦面
+     都由家族按 data-variant 与状态画，与同族的下拉选择一处对一处；这里只把组件自己的覆盖槽桥接进去。
+     静息无影、悬停取家族的 45% 淡底、聚焦边一律 --xh-border-control-focus（不随语气） */
+  .xh-scope-color-picker[data-part='control'] {
+    --xh-field-control-height: var(--xh-color-picker-control-h, var(--xh-_color-picker-h));
+    --xh-field-control-padding-inline: var(--xh-color-picker-control-px, var(--xh-_color-picker-px));
+    --xh-field-control-gap: var(--xh-color-picker-control-gap, var(--xh-_color-picker-gap));
+    --xh-field-control-min-inline-size: var(--xh-color-picker-control-min-w, var(--xh-control-min-w));
+    --xh-field-control-radius: var(--xh-color-picker-control-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-color-picker-control-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-color-picker-control-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-color-picker-control-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-color-picker-control-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-color-picker-control-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-color-picker-control-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-color-picker-control-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-color-picker-control-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-shadow-rest: var(--xh-color-picker-control-shadow, none);
+    --xh-field-cursor-rest: pointer;
+  }
+
+  .xh-scope-color-picker[data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* 多选的标签行：选中的颜色在盒里排成标签，超过 maxTagCount 的折进 +N。
+     行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方。
+     基准取 0：只吃触发钮剩下的宽度、在自己里面折行；按内容宽算基准的话，盒子会先在钮前面折行，把钮挤到最后一行 */
+  .xh-scope-color-picker[data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-color-picker-tag-list-gap, var(--xh-space-1));
+
+    flex: 1 1 0;
+    flex-wrap: wrap;
+  }
+
+  /* 颜色标签是定长的值串，截短了就读不出是哪个颜色：不收缩，排不下就折到下一行，
+     盒随行数长高（字段家族的 multi-tag 布局给），到上限后在盒内滚动 */
+  .xh-scope-color-picker[data-part='tag-list'] > .xh-scope-tag[data-part='root'] {
+    flex: none;
+  }
+
+  /* 每枚标签前一个色点，颜色由连接层写进内联私有槽；+N 那一枚没有 data-value，不画。
+     白色与近底色的颜色靠一圈默认描边从标签底上分出来 */
+  .xh-scope-color-picker[data-part='tag-list'] > .xh-scope-tag[data-part='root'][data-value]::before {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--xh-color-picker-tag-dot-size, var(--xh-control-indicator-sm));
+    block-size: var(--xh-color-picker-tag-dot-size, var(--xh-control-indicator-sm));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-tag-dot-border, var(--xh-border-default));
+    border-radius: var(--xh-shape-circle);
+    background-color: var(--xh-_color-picker-tag-color, transparent);
+    content: '';
+    print-color-adjust: exact;
+  }
+
+  .xh-scope-color-picker[data-part='control'][data-xh-field-layout='multi-tag'] {
+    max-block-size: var(--xh-color-picker-control-max-h, var(--xh-viewport-h-sm));
+    overflow-y: auto;
+  }
+
+  /* 多选时值文字让位，触发钮只剩一颗显示工作色的色块：不再占满剩余宽度，标签行吃掉余下的位置 */
+  .xh-scope-color-picker[data-part='control'][data-xh-field-layout='multi-tag'] > .xh-scope-color-picker[data-part='trigger'] {
+    flex: none;
+  }
+
+  /* 盒内那颗可聚焦的按钮：不画描边不铺底也不自带高度，只占满剩余宽度、排布色块与值文本 */
+  .xh-scope-color-picker[data-part='trigger'] {
+    display: inline-flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--xh-color-picker-trigger-gap, var(--xh-_color-picker-gap));
+    min-inline-size: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--xh-color-picker-trigger-fg, var(--xh-fg-default));
+    font-family: inherit;
+    font-size: var(--xh-color-picker-trigger-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-none);
+    text-align: start;
+    cursor: pointer;
+  }
+
+  .xh-scope-color-picker[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 单体控件用原生 disabled */
+  .xh-scope-color-picker[data-part='trigger']:disabled {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 当前颜色的色块：面、棋盘格、描边与尺寸档全由色块面家族画（带 data-xh-swatch），
+     半透明色铺在棋盘格上；组件层只把自己的公开槽映射到家族合同 */
+  .xh-scope-color-picker[data-part='swatch'] {
+    --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));
+  }
+
+  /* 值串可能很长，必须能截断；框宽由盒定，这里得允许自己被压缩 */
+  .xh-scope-color-picker[data-part='value-text'] {
+    overflow: hidden;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    color: var(--xh-color-picker-value-fg, var(--xh-fg-default));
+    font-size: var(--xh-color-picker-value-font-size, var(--xh-text-body-size));
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
+  .xh-scope-color-picker[data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+    --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, var(--xh-layer-popover)));
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  .xh-scope-color-picker[data-part='positioner'][data-placement^='top'] {
+    --xh-_overlay-enter-down: 1;
+  }
+
+  .xh-scope-color-picker[data-part='positioner'][data-placement^='bottom'] {
+    --xh-_overlay-enter-up: 1;
+  }
+
+  .xh-scope-color-picker[data-part='positioner'][data-placement^='left'] {
+    --xh-_overlay-enter-right: 1;
+  }
+
+  .xh-scope-color-picker[data-part='positioner'][data-placement^='right'] {
+    --xh-_overlay-enter-left: 1;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  .xh-scope-color-picker[data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  .xh-scope-color-picker[data-part='content'] {
+    /* 内衬落进私有槽：贴顶通栏的取色区与色板区的通栏分隔按同一份内衬往外撑 */
+    --xh-_color-picker-content-py: var(--xh-color-picker-content-py, var(--xh-space-3));
+    --xh-_color-picker-content-px: var(--xh-color-picker-content-px, var(--xh-space-3));
+
+    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-max-w-sm));
+    /* 定宽的面板也要夹一道：窄视口下伸出去，右半边的取色区就点不到了 */
+    max-inline-size: var(--xh-_color-picker-available-w);
+    padding-block: var(--xh-_color-picker-content-py);
+    padding-inline: var(--xh-_color-picker-content-px);
+    max-block-size: min(var(--xh-color-picker-max-h, var(--xh-viewport-h-lg)), var(--xh-_color-picker-available-h));
+    overflow-y: auto;
+    /* 浮层滚动面：滚到头不把页面一起带走 */
+    overscroll-behavior: contain;
+    /* 面域 + 滑杆 + 通道输入的表单型多列面板，走 floating 材质——实体底 + --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-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-instant）属于首帧，直接呈现；常驻形态的取色面一直在，没有进退场 */
+  .xh-scope-color-picker[data-part='content'][data-state='open']:not([data-instant], [data-inline]) {
+    animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 退场：收起那一帧 hidden 由退场闸门押后，这里才播得出来。forwards 把末态钉住，
+     免得动画结束到真收起之间闪一下原样 */
+  .xh-scope-color-picker[data-part='content'][data-state='closed']:not([data-inline]) {
+    animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 浮层本身只是个容器（tabindex=-1 是焦点域的兜底落点），落焦时不画环 */
+  .xh-scope-color-picker[data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* 常驻形态：根不再取字段缺省宽，跟着取色面走 */
+  .xh-scope-color-picker[data-part='root'][data-inline] {
+    inline-size: auto;
+    min-inline-size: 0;
+  }
+
+  /* 常驻形态的取色面是页面里的静态内容面（solid）：surface 圆角、border-default 描边、实体底、不落影。
+     没有定位层给出可用宽高，不限高也不自己滚；它一直在，没有进退场 */
+  .xh-scope-color-picker[data-part='content'][data-inline] {
+    max-inline-size: 100%;
+    max-block-size: none;
+    overflow-y: visible;
+    border-radius: var(--xh-color-picker-content-radius, var(--xh-shape-surface));
+    box-shadow: var(--xh-color-picker-content-shadow, none);
+  }
+
+  /* 二维取色区。底色是当前色相（连接层内联给），两层渐变盖在上面：
+     横轴由白到透明 = 饱和度，纵轴由透明到黑 = 明度。
+     两层都收在一个 ::before 里：它是盒树里的第一个子节点，作者写的拇指排在它后面，
+     绘制顺序上就压在渐变之上；拆成 ::before + ::after 的话 ::after 是最后一个子节点，
+     会反过来盖住拇指。 */
+  .xh-scope-color-picker[data-part='saturation-area'] {
+    position: relative;
+    display: block;
+    flex: none;
+    block-size: var(--xh-color-picker-saturation-area-h, var(--xh-overlay-color-area-h));
+    border-radius: var(--xh-color-picker-saturation-area-radius, var(--xh-shape-control));
+    cursor: crosshair;
+  }
+
+  /* 取色区排在面板最前时贴着面板顶边通栏：往外撑掉顶边与两侧的内衬、不取圆角，
+     四角由面板（滚动面）自己的圆角裁出；后面的内容照常留内衬 */
+  .xh-scope-color-picker[data-part='content'] > [data-part='saturation-area']:first-child:where(.xh-scope-color-picker) {
+    margin-block-start: calc(-1 * var(--xh-_color-picker-content-py));
+    margin-inline: calc(-1 * var(--xh-_color-picker-content-px));
+    border-radius: var(--xh-color-picker-saturation-area-radius, 0);
+  }
+
+  /* white / black 是 HSV 色彩空间自带的两个端点，不是主题色，因此不走令牌 */
+  .xh-scope-color-picker[data-part='saturation-area']::before {
+    position: absolute;
+    border-radius: inherit;
+    background-image:
+      linear-gradient(to bottom, transparent, black),
+      linear-gradient(to right, white, transparent);
+    content: '';
+    inset: 0;
+  }
+
+  /* 渐变方向没有逻辑关键字可用，只能靠 :dir() 分流：
+     拇指走的是 inset-inline-start，rtl 下自动换向，饱和度那层渐变不跟着换就反了 */
+  .xh-scope-color-picker[data-part='saturation-area']:dir(rtl)::before {
+    background-image:
+      linear-gradient(to bottom, transparent, black),
+      linear-gradient(to left, white, transparent);
+  }
+
+  .xh-scope-color-picker[data-part='saturation-area'][data-readonly]:not([data-disabled]) {
+    cursor: default;
+  }
+
+  .xh-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 必须显式写：描边要吃进直径里，否则实际盒子比变量宽两条边，回拉就对不上圆心。
+     两条滑块的拇指归 color-slider 那份皮，与这一颗同一副长相。 */
+  .xh-scope-color-picker[data-part='area-thumb'] {
+    position: absolute;
+    box-sizing: border-box;
+    inline-size: var(--xh-color-picker-thumb-size, var(--xh-control-indicator-md));
+    block-size: var(--xh-color-picker-thumb-size, var(--xh-control-indicator-md));
+    margin-inline-start: calc(var(--xh-color-picker-thumb-size, var(--xh-control-indicator-md)) / -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-circle));
+    background: transparent;
+    box-shadow: var(--xh-color-picker-thumb-shadow, var(--xh-elevation-raised));
+    cursor: grab;
+    transition: scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 取色区的纵轴也由连接层给（inset-block-start），回拉同样按 block-start 那侧 */
+  .xh-scope-color-picker[data-part='area-thumb'] {
+    margin-block-start: calc(var(--xh-color-picker-thumb-size, var(--xh-control-indicator-md)) / -2);
+  }
+
+  /* 只有手真正拖着时带 data-dragging：放大与光标不会几处一起变。
+     放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式不用跟着改 */
+  .xh-scope-color-picker[data-part='area-thumb'][data-dragging] {
+    scale: var(--xh-color-picker-thumb-scale-dragging, var(--xh-motion-scale-drag));
+    cursor: grabbing;
+  }
+
+  .xh-scope-color-picker[data-part='area-thumb'][data-readonly]:not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* 两条颜色滑块的挂载点，同时充当各自的根节点：color-slider 那份皮的 root 规则落在
+     .xh-scope-color-slider[data-part='root'] 上，而这里没有那个节点，所以根上挂的两个私有槽
+     （拇指直径、轨道厚度，control / track / thumb 都读它们）与排布得在这儿照抄一遍；
+     滑块内部的皮仍归 color-slider 那一份。尺寸档跟着浮层上的 data-size 走，不必再各写一遍 */
+  .xh-scope-color-picker[data-part='hue-slider'],
+  .xh-scope-color-picker[data-part='alpha-slider'] {
+    --xh-_thumb-size: var(--xh-color-picker-slider-thumb-size, var(--xh-control-indicator-md));
+    --xh-_track-thickness: var(--xh-color-picker-slider-track-thickness, var(--xh-space-3));
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* 面板里两条滑块的拇指：一枚承载面色的白盘 + 1px 描边，正中一颗 8px 的当前色点。
+     颜色带本身就是一排颜色，拇指整颗填当前色会融进色带里，留白盘才分得出拇指在哪；
+     当前色点读滑块自己按拇指写的那支色 */
+  .xh-scope-color-picker:is([data-part='hue-slider'], [data-part='alpha-slider']) .xh-scope-color-slider[data-part='thumb'] {
+    border-width: var(--xh-stroke-thin);
+    background:
+      radial-gradient(circle, var(--xh-_color-slider-thumb-color) 0 var(--xh-space-1), transparent var(--xh-space-1)),
+      var(--xh-color-picker-slider-thumb-bg, var(--xh-bg-surface-raised));
+  }
+
+  /* 标题与轨道之间的间隙 */
+  .xh-scope-color-picker[data-part='hue-slider'] {
+    gap: var(--xh-color-picker-hue-slider-gap, var(--xh-stack-gap-md));
+  }
+
+  .xh-scope-color-picker[data-part='alpha-slider'] {
+    gap: var(--xh-color-picker-alpha-slider-gap, var(--xh-stack-gap-md));
+  }
+
+  /* 禁用的整体压暗只做一次，落在最外层；alpha 关掉时透明度那条整条压暗 */
+  .xh-scope-color-picker[data-part='hue-slider'][data-disabled],
+  .xh-scope-color-picker[data-part='alpha-slider'][data-disabled] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  /* 通道输入照字段外壳：字段淡底 + 控件描边、24px 小号盒、说明档字号；悬停描边升一档，
+     聚焦换承载面底 + 品牌描边、不画环（焦点由描边换色与底色差标出，强制色档补一圈 Highlight 环） */
+  .xh-scope-color-picker[data-part='channel-input'] {
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: var(--xh-color-picker-input-h, var(--xh-control-action-size));
+    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-field));
+    color: inherit;
+    /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与周围文本对不上 */
+    font-family: inherit;
+    font-size: var(--xh-color-picker-input-font-size, var(--xh-text-caption-size));
+    text-align: center;
+  }
+
+  .xh-scope-color-picker[data-part='channel-input']:hover:not(:disabled, :focus, [data-readonly], [data-invalid]) {
+    border-color: var(--xh-color-picker-input-border-hover, var(--xh-border-strong));
+  }
+
+  .xh-scope-color-picker[data-part='channel-input']:focus {
+    /* 焦点边一律 --xh-border-control-focus，不随语气 */
+    border-color: var(--xh-color-picker-input-border-focus, var(--xh-border-control-focus));
+    background: var(--xh-color-picker-input-bg-focus, var(--xh-bg-surface));
+  }
+
+  .xh-scope-color-picker[data-part='channel-input']:focus-visible {
+    outline: none;
+  }
+
+  /* 打到一半的串：框里留着草稿，但值没动——描边提示"这串还没被收下" */
+  .xh-scope-color-picker[data-part='channel-input'][data-invalid] {
+    border-color: var(--xh-color-picker-input-border-invalid, var(--xh-border-invalid));
+  }
+
+  .xh-scope-color-picker[data-part='channel-input'][data-readonly] {
+    background: var(--xh-color-picker-input-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  .xh-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);
+  }
+
+  .xh-scope-color-picker[data-part='eye-dropper-trigger'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-color-picker-action-size, var(--xh-control-action-size));
+    block-size: var(--xh-color-picker-action-size, var(--xh-control-action-size));
+    padding: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-action-border, var(--xh-border-control));
+    border-radius: var(--xh-color-picker-action-radius, var(--xh-shape-control));
+    background: var(--xh-color-picker-action-bg, transparent);
+    color: var(--xh-color-picker-action-fg, var(--xh-fg-muted));
+    font-family: inherit;
+    font-size: var(--xh-color-picker-action-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color 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);
+  }
+
+  .xh-scope-color-picker[data-part='eye-dropper-trigger']:hover:not(:disabled) {
+    /* 坐在浮层白底上：白底承载阶梯 hover 100 → pressed 200 */
+    background: var(--xh-color-picker-action-bg-hover, var(--xh-bg-subtle));
+    color: var(--xh-color-picker-action-fg-hover, var(--xh-fg-default));
+  }
+
+  /* 按下去要有回应：换底之外再压一档。取色是一次「点下去就交给系统」的操作，
+     松手那一刻浮层多半已经被系统的取色镜头盖住，按下的回执只有这一瞬看得见。
+     指针 :active 与 Headless 投影的 data-pressed（Space / Enter 与触屏按住）看见同一副按压面 */
+  .xh-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-hover));
+    scale: var(--xh-motion-scale-press);
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  /* 取色途中按钮保持按下的样子：屏幕取色期间浮层多半被系统的取色镜头盖着，
+     这是用户回到页面时唯一能看出"刚才在取色"的痕迹 */
+  .xh-scope-color-picker[data-part='eye-dropper-trigger'][data-state='picking'] {
+    border-color: var(--xh-color-picker-action-border-active, var(--xh-bg-brand));
+    background: var(--xh-color-picker-action-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  .xh-scope-color-picker[data-part='eye-dropper-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+  }
+
+  /* 「添加」沉到面板的行尾：它是多选时整块面板的出口，不跟取色面左对齐 */
+  .xh-scope-color-picker[data-part='content'] > .xh-scope-color-picker[data-part='confirm-trigger'] {
+    flex: none;
+    align-self: flex-end;
+  }
+
+  /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
+     text solid 档给；槽名统一按部件取 --xh-color-picker-confirm-trigger-*，只映射到家族桥接槽 */
+  .xh-scope-color-picker[data-part='confirm-trigger'] {
+    --xh-action-visual-size: var(--xh-color-picker-confirm-trigger-h, var(--xh-control-action-size));
+    --xh-action-padding-inline: var(--xh-color-picker-confirm-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-color-picker-confirm-trigger-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-color-picker-confirm-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-color-picker-confirm-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-color-picker-confirm-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-color-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-hover: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-color-picker-confirm-trigger-shadow, none);
+    --xh-action-font-size: var(--xh-text-secondary-size);
+
+    border-width: 0;
+  }
+
+  /* 单选时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  .xh-scope-color-picker[data-part='confirm-trigger'][hidden] {
+    display: none;
+  }
+
+  /* 预设色板的挂载点，同时充当色板的根节点：color-swatch-picker 那份皮的 root 规则落在
+     .xh-scope-color-swatch-picker[data-part='root'] 上，而这里没有那个节点，所以根上挂的那几个私有槽
+     （格子边长、间距、徽标尺寸、语气色、图标尺）与排布得在这儿照抄一遍；格子的皮仍归色板那一份。
+     浮层里的色板走小号格子：与滑块的拇指、数值框一个量级，整块面板才不会被色板撑开。
+     最近使用色是同一台色块选择器，挂载点同一套 */
+  .xh-scope-color-picker:is([data-part='swatch-picker'], [data-part='recent-swatch-picker']) {
+    --xh-_color-swatch-picker-cell: var(--xh-color-picker-swatch-cell, var(--xh-glyph-size-sm));
+    --xh-_color-swatch-picker-gap: var(--xh-color-picker-swatch-gap, var(--xh-space-2));
+    --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;
+    align-items: center;
+    gap: var(--xh-color-picker-swatch-picker-gap, var(--xh-_color-swatch-picker-gap));
+  }
+
+  .xh-scope-color-picker:is([data-part='swatch-picker'], [data-part='recent-swatch-picker'])[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* 粗指针：16px 的格子手指压不准，格子回到小号控件高 */
+  @media (pointer: coarse) {
+    .xh-scope-color-picker:is([data-part='swatch-picker'], [data-part='recent-swatch-picker']) {
+      --xh-_color-swatch-picker-cell: var(--xh-color-picker-swatch-cell, var(--xh-control-h-sm));
+    }
+  }
+
+  /* 色板区与上面的取色控件之间一条通栏分隔：撑掉两侧内衬铺满面板宽，线取面板材质的描边档；
+     两块色板挨着时只在头一块上画 */
+  .xh-scope-color-picker[data-part='content']
+    > :is([data-part='swatch-picker'], [data-part='recent-swatch-picker']):where(.xh-scope-color-picker):not(:is([data-part='swatch-picker'], [data-part='recent-swatch-picker']) + *) {
+    margin-inline: calc(-1 * var(--xh-_color-picker-content-px));
+    padding-block-start: var(--xh-_color-picker-content-py);
+    padding-inline: var(--xh-_color-picker-content-px);
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-color-picker-separator, var(--xh-material-solid-border));
+  }
+
+  /* 任何 display 都会盖掉 UA 的 [hidden]{display:none}：
+     凡是被赋了 display 的角色节点都要显式让位，漏一处收起态就失效。
+     content 的收起交给 presence：退场结束后由适配器写内联 display:none，避免截断动画。 */
+  .xh-scope-color-picker[data-part='root'][hidden],
+  .xh-scope-color-picker[data-part='trigger'][hidden],
+  .xh-scope-color-picker[data-part='saturation-area'][hidden],
+  .xh-scope-color-picker[data-part='area-thumb'][hidden],
+  .xh-scope-color-picker[data-part='hue-slider'][hidden],
+  .xh-scope-color-picker[data-part='alpha-slider'][hidden],
+  .xh-scope-color-picker[data-part='eye-dropper-trigger'][hidden],
+  .xh-scope-color-picker[data-part='swatch-picker'][hidden],
+  .xh-scope-color-picker[data-part='recent-swatch-picker'][hidden] {
+    display: none;
+  }
+
+  /* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
+     （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
+     刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */
+  .xh-scope-color-picker[data-part='hidden-input'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    .xh-scope-color-picker[data-part='positioner'] {
+      display: none;
+    }
+  }
+
+  /*
+   * 高对比档：取色面画的就是颜色本身，被系统换掉之后整个组件不再能取色。这一处退出强制着色，
+   * 自己保住原色；退出之后它不再跟着系统底色走，补一圈系统描边把它从背景里框出来。
+   * 触发钮里的色块归 Swatch 家族、两条滑块的轨道与色板的格子归各自那份皮，都已各自退出强制着色。
+   */
+  @media (forced-colors: active) {
+    /* 高对比档里底色被系统换掉，取色按钮按下那一档用系统高亮反色画回 */
+    .xh-scope-color-picker[data-part='eye-dropper-trigger']:not(:disabled):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+
+    .xh-scope-color-picker[data-part='saturation-area'],
+    .xh-scope-color-picker[data-part='saturation-area']::before {
+      forced-color-adjust: none;
+    }
+
+    .xh-scope-color-picker[data-part='saturation-area'] {
+      outline: var(--xh-stroke-thin) solid ButtonBorder;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+    }
+
+    /* 通道输入聚焦不画环，靠描边换色；这一档描边被换成系统色，补一圈 Highlight 环 */
+    .xh-scope-color-picker[data-part='channel-input']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+
+    /* 标签前的色点画的也是颜色本身：同样退出强制着色，用系统文字色描一圈 */
+    .xh-scope-color-picker[data-part='tag-list'] > .xh-scope-tag[data-part='root'][data-value]::before {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+    }
+  }
+}