@xihan-ui/styles 1.0.0 → 2.0.0

package/family/field-chrome.css

@@ -0,0 +1,298 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* AUTO-GENERATED by build/field-chrome-recipe.mjs — do not edit. */
+@layer xihan.components {
+  [data-xh-field-chrome] {
+    display: inline-flex;
+    box-sizing: border-box;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: var(--xh-field-control-gap, var(--xh-_field-size-gap));
+    min-inline-size: min(var(--xh-field-control-min-inline-size, var(--xh-control-min-w)), 100%);
+    block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    min-block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    padding-inline: var(--xh-field-control-padding-inline, var(--xh-_field-size-padding-inline));
+    padding-block: 0;
+    --xh-icon-size: var(--xh-field-glyph-size, var(--xh-_field-size-glyph-size));
+    --xh-_field-variant-bg-rest: transparent;
+    --xh-_field-variant-border-rest: var(--xh-border-control);
+    --xh-_field-variant-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
+    --xh-_field-variant-border-hover: var(--xh-border-control-hover);
+    --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-border-invalid: var(--xh-border-invalid);
+    --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
+    --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_field-variant-border-disabled: var(--xh-border-default);
+    border: var(--xh-stroke-thin) solid var(--xh-field-border-rest, var(--xh-_field-variant-border-rest));
+    border-radius: var(--xh-field-control-radius, var(--xh-shape-control));
+    outline: var(--xh-ring-width) solid transparent;
+    outline-offset: var(--xh-ring-offset);
+    background-color: var(--xh-field-bg-rest, var(--xh-_field-variant-bg-rest));
+    color: var(--xh-field-fg-rest, var(--xh-fg-default));
+    box-shadow: var(--xh-field-shadow-rest, none);
+    cursor: var(--xh-field-cursor-rest, text);
+    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),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      outline-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-xh-field-chrome][data-variant='outline'] {
+    --xh-_field-variant-bg-rest: transparent;
+    --xh-_field-variant-border-rest: var(--xh-border-control);
+    --xh-_field-variant-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
+    --xh-_field-variant-border-hover: var(--xh-border-control-hover);
+    --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-border-invalid: var(--xh-border-invalid);
+    --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
+    --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_field-variant-border-disabled: var(--xh-border-default);
+  }
+
+  [data-xh-field-chrome][data-variant='subtle'] {
+    --xh-_field-variant-bg-rest: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_field-variant-border-rest: transparent;
+    --xh-_field-variant-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_field-variant-border-hover: var(--xh-border-control);
+    --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-border-invalid: var(--xh-border-invalid);
+    --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
+    --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_field-variant-border-disabled: var(--xh-border-default);
+  }
+
+  [data-xh-field-chrome][data-variant='ghost'] {
+    --xh-_field-variant-bg-rest: transparent;
+    --xh-_field-variant-border-rest: transparent;
+    --xh-_field-variant-bg-hover: color-mix(in oklab, var(--xh-bg-subtle) 45%, transparent);
+    --xh-_field-variant-border-hover: var(--xh-border-control);
+    --xh-_field-variant-border-focus: var(--xh-border-control-focus);
+    --xh-_field-variant-border-invalid: var(--xh-border-invalid);
+    --xh-_field-variant-bg-read-only: var(--xh-bg-subtle);
+    --xh-_field-variant-bg-disabled: var(--xh-bg-subtle);
+    --xh-_field-variant-border-disabled: var(--xh-border-default);
+  }
+
+  [data-xh-field-chrome][data-xh-field-size='sm'] {
+    --xh-_field-size-control-height: var(--xh-control-h-sm);
+    --xh-_field-size-padding-inline: var(--xh-control-px-sm);
+    --xh-_field-size-gap: var(--xh-control-gap-sm);
+    --xh-_field-size-font-size: var(--xh-control-font-sm);
+    --xh-_field-size-glyph-size: var(--xh-glyph-size-sm);
+  }
+
+  [data-xh-field-chrome][data-xh-field-size='md'] {
+    --xh-_field-size-control-height: var(--xh-control-h-md);
+    --xh-_field-size-padding-inline: var(--xh-control-px-md);
+    --xh-_field-size-gap: var(--xh-control-gap-md);
+    --xh-_field-size-font-size: var(--xh-control-font-md);
+    --xh-_field-size-glyph-size: var(--xh-glyph-size-md);
+  }
+
+  [data-xh-field-chrome][data-xh-field-size='lg'] {
+    --xh-_field-size-control-height: var(--xh-control-h-lg);
+    --xh-_field-size-padding-inline: var(--xh-control-px-lg);
+    --xh-_field-size-gap: var(--xh-control-gap-lg);
+    --xh-_field-size-font-size: var(--xh-control-font-lg);
+    --xh-_field-size-glyph-size: var(--xh-glyph-size-lg);
+  }
+
+  [data-xh-field-chrome][data-xh-field-layout='single-line'],
+  [data-xh-field-chrome]:has([data-xh-field-input][data-xh-field-layout='single-line']) {
+    align-items: center;
+    flex-wrap: nowrap;
+    block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    min-block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    padding-block: 0;
+  }
+
+  [data-xh-field-chrome][data-xh-field-layout='textarea'],
+  [data-xh-field-chrome]:has([data-xh-field-input][data-xh-field-layout='textarea']) {
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    block-size: auto;
+    min-block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    padding-block: 0;
+  }
+
+  [data-xh-field-chrome][data-xh-field-layout='multi-tag'],
+  [data-xh-field-chrome]:has([data-xh-field-input][data-xh-field-layout='multi-tag']) {
+    align-items: center;
+    flex-wrap: wrap;
+    block-size: auto;
+    min-block-size: var(--xh-field-control-height, var(--xh-_field-size-control-height));
+    padding-block: var(--xh-space-1);
+  }
+
+  [data-xh-field-chrome]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-loading]):hover {
+    background-color: var(--xh-field-bg-hover, var(--xh-_field-variant-bg-hover));
+    border-color: var(--xh-field-border-hover, var(--xh-_field-variant-border-hover));
+  }
+
+  [data-xh-field-chrome]:focus-within:not([data-disabled]) {
+    border-color: var(--xh-field-border-focus, var(--xh-_field-variant-border-focus));
+    outline: var(--xh-ring-width) solid var(--xh-field-ring-focus, var(--xh-ring-focus));
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-xh-field-chrome][data-readonly] {
+    background-color: var(--xh-field-bg-read-only, var(--xh-_field-variant-bg-read-only));
+    cursor: var(--xh-field-cursor-read-only, default);
+  }
+
+  [data-xh-field-chrome][data-loading] {
+    color: var(--xh-field-fg-loading, var(--xh-fg-muted));
+    cursor: var(--xh-field-cursor-loading, progress);
+  }
+
+  [data-xh-field-chrome][data-invalid] {
+    border-color: var(--xh-field-border-invalid, var(--xh-_field-variant-border-invalid));
+  }
+
+  [data-xh-field-chrome][data-invalid]:focus-within:not([data-disabled]) {
+    outline-color: var(--xh-field-ring-invalid, var(--xh-ring-invalid));
+  }
+
+  [data-xh-field-chrome][data-disabled] {
+    background-color: var(--xh-field-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    color: var(--xh-field-fg-disabled, var(--xh-fg-disabled));
+    border-color: var(--xh-field-border-disabled, var(--xh-_field-variant-border-disabled));
+    cursor: var(--xh-field-cursor-disabled, not-allowed);
+  }
+
+  [data-xh-field-affix] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--xh-field-affix-fg, var(--xh-fg-muted));
+    font-size: var(--xh-field-affix-font-size, var(--xh-_field-size-font-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+  }
+
+  [data-xh-field-affix][data-disabled] {
+    color: var(--xh-field-affix-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  [data-xh-field-input] {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    block-size: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    appearance: none;
+    background: transparent;
+    box-shadow: none;
+    color: var(--xh-field-input-fg, var(--xh-fg-default));
+    font-family: inherit;
+    font-size: var(--xh-field-input-font-size, var(--xh-_field-size-font-size));
+    line-height: var(--xh-leading-normal);
+    text-align: start;
+  }
+
+  [data-xh-field-chrome] [data-xh-field-input]:focus-visible {
+    outline: none;
+  }
+
+  [data-xh-field-chrome] [data-xh-action-profile='field-inset']:focus-visible {
+    outline: none;
+  }
+
+  [data-xh-field-input][data-disabled] {
+    color: var(--xh-field-input-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  [data-xh-field-input]::placeholder {
+    color: var(--xh-field-placeholder-fg, var(--xh-fg-subtle));
+  }
+
+  [data-xh-field-input][data-xh-field-layout='textarea'] {
+    block-size: auto;
+    max-inline-size: 100%;
+    padding-block: var(--xh-field-textarea-padding-block, var(--xh-space-2));
+    overflow: auto;
+    resize: vertical;
+  }
+
+  [data-xh-field-input][data-xh-field-layout='textarea'][data-xh-field-auto-size] {
+    overflow: hidden;
+    resize: none;
+  }
+
+  [data-xh-field-input]:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-field-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-field-autofill-fg, var(--xh-fg-default));
+  }
+
+  [data-xh-field-input]:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-field-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-field-autofill-fg, var(--xh-fg-default));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-xh-field-chrome] {
+      transition: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-xh-field-chrome] {
+    transition: none;
+  }
+
+  @media (forced-colors: active) {
+    [data-xh-field-chrome] {
+      background-color: Canvas;
+      color: CanvasText;
+      border-color: ButtonText;
+      box-shadow: none;
+      opacity: 1;
+    }
+
+    [data-xh-field-chrome]:not([data-disabled]):not([data-readonly]):not([data-invalid]):not([data-loading]):hover {
+      border-color: Highlight;
+    }
+
+    [data-xh-field-chrome]:focus-within:not([data-disabled]) {
+      border-color: Highlight;
+      outline-color: Highlight;
+    }
+
+    [data-xh-field-chrome][data-readonly] {
+      border-color: GrayText;
+    }
+
+    [data-xh-field-chrome][data-loading] {
+      border-style: dashed;
+    }
+
+    [data-xh-field-chrome][data-invalid] {
+      border-color: Highlight;
+    }
+
+    [data-xh-field-chrome][data-disabled] {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    [data-xh-field-input]::placeholder {
+      color: GrayText;
+    }
+
+    [data-xh-field-input]:autofill {
+      box-shadow: inset 0 0 0 100vmax Canvas;
+      -webkit-text-fill-color: CanvasText;
+    }
+
+    [data-xh-field-input]:-webkit-autofill {
+      box-shadow: inset 0 0 0 100vmax Canvas;
+      -webkit-text-fill-color: CanvasText;
+    }
+  }
+}

package/family/motion.css

@@ -0,0 +1,166 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 motion 样式。 */
+
+/* 共享关键帧的唯一真源（规范 §9.4 / §9.5）。
+ *
+ * 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+ * 动画会静默地整个不跑。所以引用这里任一名字的皮肤都 @import 本文件，单独引入那份皮肤时
+ * 关键帧仍在场；全量入口由 emit-unlayered 按物理文件去重，有层入口靠打包器对同一 URL 的
+ * @import 去重，同名同帧体即使重复插入也无副作用。
+ *
+ * 本文件只放跨皮肤共用的关键帧，皮肤内不得重定义这些名字（check-keyframe-refs 判红）；
+ * 组件专属关键帧仍住在各自皮肤。幅度只引 --xh-motion-distance-sm 与 --xh-motion-scale-enter /
+ * -exit，减弱动效档由令牌层把它们归零。四个方向槽 --xh-_overlay-enter-* 由浮层皮肤按
+ * placement 写在 positioner 上，四个都没写时位移退回 0。
+ */
+@layer xihan.motion {
+  /* ── 锚定列表 / 菜单：沿落位方向短位移，不缩放文字与选中标记 ──
+     Menu、Select、Combobox、Cascader、ContextMenu、Menubar、Mention、TreeSelect、
+     Date / Time picker、Tooltip */
+  @keyframes xh-overlay-slide-in {
+    from {
+      opacity: 0;
+      translate:
+        calc((var(--xh-_overlay-enter-right, 0) - var(--xh-_overlay-enter-left, 0)) * var(--xh-motion-distance-sm))
+        calc((var(--xh-_overlay-enter-down, 0) - var(--xh-_overlay-enter-up, 0)) * var(--xh-motion-distance-sm));
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  @keyframes xh-overlay-slide-out {
+    from {
+      opacity: 1;
+      translate: 0 0;
+    }
+
+    to {
+      opacity: 0;
+      translate:
+        calc((var(--xh-_overlay-enter-right, 0) - var(--xh-_overlay-enter-left, 0)) * var(--xh-motion-distance-sm))
+        calc((var(--xh-_overlay-enter-down, 0) - var(--xh-_overlay-enter-up, 0)) * var(--xh-motion-distance-sm));
+    }
+  }
+
+  /* ── 锚定面板：从锚点那一侧冒出来，缩放叠短位移 ──
+     Popover、HoverCard、Popconfirm、Tour、Command。
+     起点朝哪个方向退让由 placement 写进四个方向槽（那一侧写 1），四个都没写就退回原地缩放 */
+  @keyframes xh-overlay-pop-in {
+    from {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+      translate:
+        calc((var(--xh-_overlay-enter-right, 0) - var(--xh-_overlay-enter-left, 0)) * var(--xh-motion-distance-sm))
+        calc((var(--xh-_overlay-enter-down, 0) - var(--xh-_overlay-enter-up, 0)) * var(--xh-motion-distance-sm));
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* 退场只缩放淡出，不再沿方向退让；锚定面板与无锚定弹出共用 */
+  @keyframes xh-pop-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      scale: var(--xh-motion-scale-exit);
+    }
+  }
+
+  /* ── 无锚定弹出：原地缩放淡入，没有方向 ──
+     NavigationMenu、SideNav popout、FloatingPanel、FloatButton 列表、Pagination 弹层 */
+  @keyframes xh-pop-in {
+    from {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
+    }
+
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  /* ── 遮罩与全屏面：只动不透明度 ──
+     Dialog / Drawer / ImageViewer / Tour / Command 的遮罩，Avatar / Image 的载入揭示，
+     Cascader 列项的淡入 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  /* 页内内容的上浮进场：淡入叠一小段向上位移。Command 的分组、EmptyState、QuestionFlow */
+  @keyframes xh-rise-in {
+    from {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-sm);
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  /* ── Surface 级 disclosure：行高 0fr → 1fr，内缩同帧动 ──
+     Accordion、Collapsible、Reasoning、ToolCall 的 content。
+     内缩不归零的话，border-box 会把盒子钳在上下内缩之和上，收不干净。
+     两端内缩由各皮肤在 content 上写进 --xh-_disclosure-pt / --xh-_disclosure-pb，
+     没写的那一端按 0 动（与该端本来就没有内缩的皮肤一致） */
+  @keyframes xh-disclosure-expand {
+    from {
+      grid-template-rows: 0fr;
+      padding-block-start: 0;
+      padding-block-end: 0;
+    }
+
+    to {
+      grid-template-rows: 1fr;
+      padding-block-start: var(--xh-_disclosure-pt, 0);
+      padding-block-end: var(--xh-_disclosure-pb, 0);
+    }
+  }
+
+  @keyframes xh-disclosure-collapse {
+    from {
+      grid-template-rows: 1fr;
+      padding-block-start: var(--xh-_disclosure-pt, 0);
+      padding-block-end: var(--xh-_disclosure-pb, 0);
+    }
+
+    to {
+      grid-template-rows: 0fr;
+      padding-block-start: 0;
+      padding-block-end: 0;
+    }
+  }
+}

package/family/swatch.css

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* AUTO-GENERATED by build/swatch-recipe.mjs — do not edit. */
+@layer xihan.components {
+  [data-xh-swatch] {
+    --xh-_swatch-size: var(--xh-glyph-size-md);
+    --xh-_swatch-checker-tile: var(--xh-space-1);
+    --xh-_swatch-color: transparent;
+
+    display: inline-block;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--xh-swatch-size, var(--xh-_swatch-size));
+    block-size: var(--xh-swatch-size, var(--xh-_swatch-size));
+    border: var(--xh-stroke-thin) solid var(--xh-swatch-border, var(--xh-border-default));
+    border-radius: var(--xh-swatch-radius, var(--xh-shape-inset));
+    background-color: var(--xh-swatch-checker-base, var(--xh-bg-surface));
+    background-image:
+      linear-gradient(var(--xh-_swatch-color), var(--xh-_swatch-color)),
+      linear-gradient(45deg, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--xh-swatch-checker, var(--xh-color-neutral-300)) 75%);
+    background-position:
+      0 0,
+      0 0,
+      0 var(--xh-_swatch-checker-tile),
+      var(--xh-_swatch-checker-tile) calc(-1 * var(--xh-_swatch-checker-tile)),
+      calc(-1 * var(--xh-_swatch-checker-tile)) 0;
+    background-size:
+      100% 100%,
+      calc(var(--xh-_swatch-checker-tile) * 2) calc(var(--xh-_swatch-checker-tile) * 2),
+      calc(var(--xh-_swatch-checker-tile) * 2) calc(var(--xh-_swatch-checker-tile) * 2),
+      calc(var(--xh-_swatch-checker-tile) * 2) calc(var(--xh-_swatch-checker-tile) * 2),
+      calc(var(--xh-_swatch-checker-tile) * 2) calc(var(--xh-_swatch-checker-tile) * 2);
+    background-clip: padding-box;
+    print-color-adjust: exact;
+  }
+
+  [data-xh-swatch][data-xh-swatch-size='sm'] {
+    --xh-_swatch-size: var(--xh-glyph-size-sm);
+    --xh-_swatch-checker-tile: var(--xh-space-1);
+  }
+
+  [data-xh-swatch][data-xh-swatch-size='lg'] {
+    --xh-_swatch-size: var(--xh-glyph-size-lg);
+    --xh-_swatch-checker-tile: var(--xh-space-1_5);
+  }
+
+  @media (forced-colors: active) {
+    [data-xh-swatch] {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+    }
+  }
+}