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

package/css/color-picker.css

@@ -1,5 +1,5 @@
 @layer xihan.motion {
-  @keyframes xh-color-picker-fade-in {
+  @keyframes xh-pop-in {
     from {
       opacity: 0;
       scale: var(--xh-motion-scale-enter);
@@ -10,6 +10,17 @@
       scale: 1;
     }
   }
+  @keyframes xh-pop-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+    }
+  }
 }
 
 @layer xihan.components {
@@ -23,15 +34,42 @@
      全都由连接层每帧写进内联样式。这份皮肤一个都不碰：内联优先级高于样式表，
      写了不但是死声明，还会跟连接层抢位置。皮肤只管尺寸、颜色、圆角与状态表现。 */
 
+  /* 标签一行、盒一行的两行堆叠 */
   [data-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);
+    --xh-_color-picker-label-font-size: var(--xh-control-font-md);
+
+    /* 聚焦环恒用固定环色 */
+    --xh-_color-picker-ring: var(--xh-ring-focus);
+
     display: inline-flex;
     flex-direction: column;
-    gap: var(--xh-color-picker-gap, var(--xh-stack-gap-md));
+    gap: var(--xh-color-picker-gap, var(--xh-space-1));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里。浮层那一侧也要挂：positioner 被搬到 portal 落点，
+     继承不到根上的私有槽，所以两个部件一起收 */
+  [data-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-_color-picker-label-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-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-_color-picker-label-font-size: var(--xh-control-font-lg);
   }
 
   [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));
+    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);
   }
@@ -40,44 +78,74 @@
     color: var(--xh-fg-subtle);
   }
 
-  /* 画成一个框的是 trigger：里面的色块与值文本要看起来是一体的 */
-  [data-scope='color-picker'][data-part='trigger'] {
+  /* 盒：描边、底色、控件高度与行内内衬都落在这一层 */
+  [data-scope='color-picker'][data-part='control'] {
     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-control));
-    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);
+    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));
+    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));
+    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);
   }
 
-  [data-scope='color-picker'][data-part='trigger']:hover:not(:disabled) {
-    border-color: var(--xh-color-picker-trigger-border-hover, var(--xh-border-control-hover));
+  [data-scope='color-picker'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  [data-scope='color-picker'][data-part='control']:hover:not([data-disabled]) {
+    border-color: var(--xh-color-picker-control-border-hover, var(--xh-border-control-hover));
   }
 
-  [data-scope='color-picker'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  /* Tab 停靠点是盒里的 trigger，环画在盒上 */
+  [data-scope='color-picker'][data-part='control']:focus-within:not([data-disabled]) {
+    border-color: var(--xh-color-picker-control-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
+    outline: var(--xh-ring-width) solid var(--xh-_color-picker-ring);
     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));
+  [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;
   }
 
   /* 只读仍可聚焦、浮层照开，只是改不动：不置灰，只把底色压下去 */
-  [data-scope='color-picker'][data-part='trigger'][data-readonly] {
-    background: var(--xh-color-picker-trigger-bg-readonly, var(--xh-bg-subtle));
+  [data-scope='color-picker'][data-part='control'][data-readonly] {
+    background: var(--xh-color-picker-control-bg-readonly, var(--xh-bg-subtle));
+  }
+
+  /* 盒内那颗可聚焦的按钮：不画描边不铺底也不自带高度，只占满剩余宽度、排布色块与值文本 */
+  [data-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;
+  }
+
+  [data-scope='color-picker'][data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 单体控件用原生 disabled（预设色板那些格子也是原生按钮，同一条规矩） */
+  [data-scope='color-picker'][data-part='trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
   }
 
   /* 当前颜色的色块。背景由连接层内联给（含透明度），这里只给形状与描边。
@@ -86,15 +154,17 @@
   [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);
+    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-radius-sm));
+    border-radius: var(--xh-color-picker-swatch-radius, var(--xh-shape-inset));
   }
 
+  /* 值串可能很长，必须能截断；框宽由盒定，这里得允许自己被压缩 */
   [data-scope='color-picker'][data-part='value-text'] {
     overflow: hidden;
-    flex: 1;
+    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;
@@ -104,8 +174,15 @@
 
   /* 坐标由定位引擎写进 style（inset-inline-start / inset-block-start），这里只定位模式与层级 */
   [data-scope='color-picker'][data-part='positioner'] {
+    /* 落定那一侧的可用高度，由定位引擎经内联自定义属性写进来，内容层继承它限高；
+       引擎没算（尚未落位 / 无引擎 / 贴边归零）时不额外限高 */
+    --xh-_color-picker-available-h: 100vh;
+
+    /* 面板的自绘条浮在内容之上：轨道不上底色，实色轨道会在面板右缘糊出一条竖灰带 */
+    --xh-scrollbar-track-bg: transparent;
+
     position: fixed;
-    z-index: var(--xh-layer-popover);
+    z-index: var(--xh-color-picker-layer, var(--xh-layer-popover));
     /* 空壳不吃指针，交互只发生在 content 上 */
     pointer-events: none;
   }
@@ -119,18 +196,27 @@
     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));
+    inline-size: var(--xh-color-picker-content-w, var(--xh-overlay-min-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;
     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));
+    box-shadow: var(--xh-color-picker-content-shadow, var(--xh-elevation-floating));
     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);
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* 退场：收起那一帧 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;
   }
 
   /* 浮层本身只是个容器（tabindex=-1 是焦点域的兜底落点），落焦时不画环 */
@@ -147,7 +233,7 @@
     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));
+    border-radius: var(--xh-color-picker-area-radius, var(--xh-shape-control));
     cursor: crosshair;
   }
 
@@ -194,7 +280,7 @@
     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));
+    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);
   }
@@ -220,7 +306,7 @@
      放大用 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);
+    scale: var(--xh-color-picker-thumb-scale-dragging, var(--xh-motion-scale-drag));
     cursor: grabbing;
   }
 
@@ -312,12 +398,12 @@
     color: inherit;
     /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族，与周围文本对不上 */
     font-family: inherit;
-    font-size: var(--xh-color-picker-input-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-color-picker-input-font-size, var(--xh-text-secondary-size));
     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));
+    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));
@@ -325,7 +411,7 @@
 
   /* 打到一半的串：框里留着草稿，但值没动——描边提示"这串还没被收下" */
   [data-scope='color-picker'][data-part='channel-input'][data-invalid] {
-    border-color: var(--xh-color-picker-input-border-invalid, var(--xh-color-danger-500));
+    border-color: var(--xh-color-picker-input-border-invalid, var(--xh-border-invalid));
   }
 
   [data-scope='color-picker'][data-part='channel-input'][data-readonly] {
@@ -343,15 +429,15 @@
     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);
+    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-font-size-sm));
+    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;
@@ -390,8 +476,8 @@
     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-control));
-    border-radius: var(--xh-color-picker-swatch-radius, var(--xh-radius-sm));
+    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;
   }