@xihan-ui/styles 1.0.0-alpha.0

package/css/color-picker.css

@@ -0,0 +1,424 @@
+@layer xihan.motion {
+  @keyframes xh-color-picker-fade-in {
+    from {
+      opacity: 0;
+      scale: 0.98;
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 定位分工：取色区拇指的两条轴（inset-inline-start / inset-block-start）、
+     通道拇指的主轴（inset-inline-start）、浮层坐标、取色区底色、透明度轨道的渐变，
+     全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
+     写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。 */
+
+  [data-scope='color-picker'][data-part='root'] {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--xh-color-picker-gap, var(--xh-stack-gap-md));
+  }
+
+  [data-scope='color-picker'][data-part='label'] {
+    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));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='color-picker'][data-part='label'][data-disabled] {
+    color: var(--xh-fg-subtle);
+  }
+
+  /* 画成一个框的是 trigger：里面的色块与值文本要看起来是一体的 */
+  [data-scope='color-picker'][data-part='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-color-picker-trigger-gap, var(--xh-control-gap-md));
+    min-inline-size: var(--xh-color-picker-trigger-min-w, 9rem);
+    block-size: var(--xh-color-picker-trigger-h, var(--xh-control-h-md));
+    padding-inline: var(--xh-color-picker-trigger-px, var(--xh-control-px-md));
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-trigger-border, var(--xh-border-default));
+    border-radius: var(--xh-color-picker-trigger-radius, var(--xh-shape-control));
+    background: var(--xh-color-picker-trigger-bg, var(--xh-bg-canvas));
+    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);
+    cursor: pointer;
+    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='color-picker'][data-part='trigger']:hover:not(:disabled) {
+    border-color: var(--xh-color-picker-trigger-border-hover, var(--xh-border-strong));
+  }
+
+  [data-scope='color-picker'][data-part='trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 单体控件用原生 disabled（预设色板那些格子也是原生按钮，同一条规矩） */
+  [data-scope='color-picker'][data-part='trigger']:disabled {
+    background: var(--xh-color-picker-trigger-bg-disabled, var(--xh-bg-subtle));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 只读仍可聚焦、浮层照开，只是改不动：不置灰，只把底色压下去 */
+  [data-scope='color-picker'][data-part='trigger'][data-readonly] {
+    background: var(--xh-color-picker-trigger-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  /* 当前颜色的色块。背景由连接层内联给（含透明度），这里只给形状与描边。
+     刻意不铺棋盘格底：连接层写的是 background 简写，会盖掉这里任何 background-image，
+     半透明色因此直接与页面底色混合——小色块上这么显示是准确的。 */
+  [data-scope='color-picker'][data-part='swatch'] {
+    display: inline-block;
+    flex: none;
+    inline-size: var(--xh-color-picker-swatch-size, 1.125rem);
+    block-size: var(--xh-color-picker-swatch-size, 1.125rem);
+    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-radius-sm));
+  }
+
+  [data-scope='color-picker'][data-part='value-text'] {
+    overflow: hidden;
+    flex: 1;
+    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），这里只定位模式与层级 */
+  [data-scope='color-picker'][data-part='positioner'] {
+    position: fixed;
+    z-index: var(--xh-layer-popover);
+    /* 空壳不吃指针，交互只发生在 content 上 */
+    pointer-events: none;
+  }
+
+  /* 锚点被滚出可视区：整个浮层随之收起 */
+  [data-scope='color-picker'][data-part='positioner'][data-hidden] {
+    visibility: hidden;
+  }
+
+  [data-scope='color-picker'][data-part='content'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-color-picker-content-gap, var(--xh-space-3));
+    inline-size: var(--xh-color-picker-content-w, 15rem);
+    padding: var(--xh-color-picker-content-p, var(--xh-space-3));
+    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));
+    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-2));
+    pointer-events: auto;
+  }
+
+  [data-scope='color-picker'][data-part='content'][data-state='open'] {
+    animation: xh-color-picker-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 浮层本身只是个容器（tabindex=-1 是焦点域的兜底落点），落焦时不画环 */
+  [data-scope='color-picker'][data-part='content']:focus-visible {
+    outline: none;
+  }
+
+  /* 二维取色区。底色是当前色相（连接层内联给），两层渐变盖在上面：
+     横轴由白到透明 = 饱和度，纵轴由透明到黑 = 明度。
+     两层都收在一个 ::before 里：它是盒树里的第一个子节点，作者写的拇指排在它后面，
+     绘制顺序上就压在渐变之上；拆成 ::before + ::after 的话 ::after 是最后一个子节点，
+     会反过来盖住拇指。 */
+  [data-scope='color-picker'][data-part='area'] {
+    position: relative;
+    display: block;
+    block-size: var(--xh-color-picker-area-h, 9rem);
+    border-radius: var(--xh-color-picker-area-radius, var(--xh-radius-md));
+    cursor: crosshair;
+  }
+
+  /* white / black 是 HSV 色彩空间自带的两个端点，不是主题色，因此不走令牌 */
+  [data-scope='color-picker'][data-part='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 下自动换向，饱和度那层渐变不跟着换就反了 */
+  [data-scope='color-picker'][data-part='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] {
+    cursor: default;
+  }
+
+  [data-scope='color-picker'][data-part='area'][data-disabled] {
+    cursor: not-allowed;
+    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'] {
+    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));
+    background: transparent;
+    box-shadow: var(--xh-color-picker-thumb-shadow, var(--xh-elevation-1));
+    cursor: grab;
+    transition: scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 取色区的纵轴也由连接层给（inset-block-start），回拉同样按 block-start 那侧 */
+  [data-scope='color-picker'][data-part='area-thumb'] {
+    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：放大与光标不会三处一起变。
+     放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式不用跟着改 */
+  [data-scope='color-picker'][data-part='area-thumb'][data-dragging],
+  [data-scope='color-picker'][data-part='channel-slider-thumb'][data-dragging] {
+    scale: var(--xh-color-picker-thumb-scale-dragging, 1.15);
+    cursor: grabbing;
+  }
+
+  [data-scope='color-picker'][data-part='area-thumb'][data-readonly],
+  [data-scope='color-picker'][data-part='channel-slider-thumb'][data-readonly] {
+    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;
+  }
+
+  /* 拇指以整条滑杆为定位上下文（拇指浮出轨道，挂在轨道上会被轨道的盒子束住）。
+     厚度取拇指直径：轨道只有几个像素，滑杆若按轨道高，浮出来的拇指会顶到上下相邻的元素。 */
+  [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;
+  }
+
+  [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='channel-slider'][data-readonly] {
+    cursor: default;
+  }
+
+  [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%)
+    );
+  }
+
+  [data-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-h-sm));
+    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-default));
+    border-radius: var(--xh-color-picker-input-radius, var(--xh-shape-control));
+    background: var(--xh-color-picker-input-bg, var(--xh-bg-canvas));
+    color: inherit;
+    /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与周围文本对不上 */
+    font-family: inherit;
+    font-size: var(--xh-color-picker-input-font-size, var(--xh-font-size-sm));
+    text-align: center;
+  }
+
+  [data-scope='color-picker'][data-part='channel-input']:focus-visible {
+    border-color: var(--xh-color-picker-input-border-focus, var(--xh-ring-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    /* 往内收一道发丝：输入框贴着面板边排，环画在外沿会压到相邻通道 */
+    outline-offset: calc(-1 * var(--xh-stroke-thin));
+  }
+
+  /* 打到一半的串：框里留着草稿，但值没动——描边提示"这串还没被收下" */
+  [data-scope='color-picker'][data-part='channel-input'][data-invalid] {
+    border-color: var(--xh-color-picker-input-border-invalid, var(--xh-color-danger-500));
+  }
+
+  [data-scope='color-picker'][data-part='channel-input'][data-readonly] {
+    background: var(--xh-color-picker-input-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  [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'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--xh-color-picker-action-size, 1.75rem);
+    block-size: var(--xh-color-picker-action-size, 1.75rem);
+    padding: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-color-picker-action-border, var(--xh-border-default));
+    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-font-size-sm));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  [data-scope='color-picker'][data-part='eye-dropper-trigger']:hover:not(:disabled) {
+    background: var(--xh-color-picker-action-bg-hover, var(--xh-bg-subtle-hover));
+    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);
+  }
+
+  /* 取色途中按钮保持按下的样子：屏幕取色期间浮层多半被系统的取色镜头盖着，
+     这是用户回到页面时唯一能看出"刚才在取色"的痕迹 */
+  [data-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));
+  }
+
+  [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'] {
+    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-radius-sm));
+    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);
+  }
+
+  [data-scope='color-picker'][data-part='swatch-item']:disabled {
+    cursor: not-allowed;
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  /* 任何 display 都会盖掉 UA 的 [hidden]{display:none}：
+     凡是被赋了 display 的角色节点都要显式让位，漏一处收起态就失效。
+     连接层当下只往 content 上写 hidden，其余几处是给作者自己收起某一块留的后路。 */
+  [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='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='eye-dropper-trigger'][hidden],
+  [data-scope='color-picker'][data-part='swatch-group'][hidden] {
+    display: none;
+  }
+}