@xihan-ui/styles 1.0.0 → 2.0.0

package/css/dialog.css

@@ -1,26 +1,15 @@
-@layer xihan.motion {
-  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
-     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
-  @keyframes xh-fade-in {
-    from {
-      opacity: 0;
-    }
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
 
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes xh-fade-out {
-    from {
-      opacity: 1;
-    }
+/* 定义 dialog 样式。 */
 
-    to {
-      opacity: 0;
-    }
-  }
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
 
+@layer xihan.motion {
   /* 幅度走令牌，减弱动效时由令牌层归零；位移与缩放用独立属性而非 transform 简写，
      两者互不覆盖，手势期间写 translate 也不会把 scale 抹掉 */
   @keyframes xh-dialog-in {
@@ -47,7 +36,7 @@
     to {
       opacity: 0;
       translate: 0 var(--xh-motion-distance-md);
-      scale: var(--xh-motion-scale-enter);
+      scale: var(--xh-motion-scale-exit);
     }
   }
 }
@@ -58,13 +47,39 @@
     --xh-dialog-skin: 1;
   }
 
+  /*
+   * 触发器是页面上的独立文字按钮（§9.1）：盒型、md 档几何、outline 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方按连接层投影的 data-xh-action-variant / -size 给出。皮肤没有自己的外观规则，
+   * 只把作者塞进按钮的图标接到随档字形尺（md = 20px）。
+   */
+  [data-scope='dialog'][data-part='trigger'] {
+    --xh-icon-size: var(--xh-dialog-icon-size, var(--xh-_action-profile-glyph-size));
+  }
+
+  /* 家族配方给了 display，作者手写 hidden 时得把 UA 的 [hidden]{display:none} 还回去 */
+  [data-scope='dialog'][data-part='trigger'][hidden] {
+    display: none;
+  }
+
   [data-scope='dialog'][data-part='backdrop'] {
     position: fixed;
     inset: 0;
-    z-index: var(--xh-dialog-backdrop-layer, var(--xh-layer-modal));
+    z-index: var(--xh-dialog-backdrop-layer, var(--xh-_layer, var(--xh-layer-modal)));
     background: var(--xh-dialog-backdrop-bg, var(--xh-bg-overlay));
   }
 
+  /* 同一层 dim 之上再做一层短半径采样。默认 opaque 的语义不变；只有作者显式选 blur
+     才会启用。保留既有 blur 槽，新的完整 filter 槽可覆盖整个表达。 */
+  [data-scope='dialog'][data-part='backdrop'][data-variant='blur'] {
+    -webkit-backdrop-filter: var(--xh-dialog-backdrop-filter, blur(var(--xh-dialog-backdrop-blur, var(--xh-overlay-backdrop-blur))));
+    backdrop-filter: var(--xh-dialog-backdrop-filter, blur(var(--xh-dialog-backdrop-blur, var(--xh-overlay-backdrop-blur))));
+  }
+
+  /* 去掉底色，只留下这一层吃指针：交互外关闭与滚动锁定照旧 */
+  [data-scope='dialog'][data-part='backdrop'][data-variant='transparent'] {
+    background: transparent;
+  }
+
   [data-scope='dialog'][data-part='backdrop'][data-state='open'] {
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
@@ -77,26 +92,37 @@
   [data-scope='dialog'][data-part='positioner'] {
     position: fixed;
     inset: 0;
-    z-index: var(--xh-dialog-layer, var(--xh-layer-modal));
+    z-index: var(--xh-dialog-layer, var(--xh-_layer, var(--xh-layer-modal)));
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--xh-dialog-positioner-padding, var(--xh-space-4));
-  }
-
-  [data-scope='dialog'][data-part='positioner'][data-position='top'] {
-    align-items: flex-start;
+    /* 全屏定位层只负责排版，不截获页面指针；模态拦截由 backdrop 承担。 */
+    pointer-events: none;
+    /* 这段内衬是面板与视口边之间的全部距离，与安全区取大的一头：
+       刘海、圆角与底部横条压住的那一段由系统给出，内衬比它窄时面板的一角会被切掉。
+       桌面上 env() 恒为 0，取值与内衬槽完全一致。安全区只有物理方向的四个名字，
+       行内轴上两侧同取较宽的那一段，RTL 下不会翻错边。 */
+    padding-block-start: max(var(--xh-dialog-positioner-padding, var(--xh-space-4)), env(safe-area-inset-top));
+    padding-block-end: max(var(--xh-dialog-positioner-padding, var(--xh-space-4)), env(safe-area-inset-bottom));
+    padding-inline: max(
+      var(--xh-dialog-positioner-padding, var(--xh-space-4)),
+      env(safe-area-inset-left),
+      env(safe-area-inset-right)
+    );
   }
 
   [data-scope='dialog'][data-part='content'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-dialog-icon-size, var(--xh-glyph-size-text));
+    /* 作者塞进面板里的图标按控件档取（§6.5）；语气徽记与关闭钮另有各自的尺 */
+    --xh-icon-size: var(--xh-dialog-icon-size, var(--xh-glyph-size-md));
 
     /* 尺寸档只换这一个私有槽。它声明在 content 而不是别处：dialog 的解剖里没有 root，
        positioner 又不是必需部件，content 才是这层浮层恒在的最外层，且它会被 portal 到 body，
        选择器只认得它自己身上那一份 data-size。 */
     --xh-_dialog-max-w: var(--xh-overlay-sheet-w-md);
 
+    /* positioner 不吃指针，面板自身恢复交互。 */
+    pointer-events: auto;
+
     position: relative;
     inline-size: 100%;
     max-inline-size: var(--xh-dialog-max-w, var(--xh-_dialog-max-w));
@@ -105,10 +131,28 @@
     gap: var(--xh-dialog-gap, var(--xh-stack-gap-md));
     padding-block: var(--xh-dialog-py, var(--xh-surface-py-md));
     padding-inline: var(--xh-dialog-px, var(--xh-surface-px-md));
-    border-radius: var(--xh-dialog-radius, var(--xh-shape-surface));
-    background: var(--xh-dialog-bg, var(--xh-bg-surface));
-    color: var(--xh-dialog-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-dialog-shadow, var(--xh-elevation-sheet));
+    border: var(--xh-stroke-thin) solid var(--xh-dialog-border, var(--xh-material-elevated-border));
+    border-radius: var(--xh-dialog-radius, var(--xh-shape-overlay));
+    /* M4 是不透明的 sheet 实体面；顶部 lens 与正文同一实体面，作者可用 --xh-dialog-header-bg 单独换头部底色，
+       让标题保留空间感而不把长正文也放进透明区。两层都先留组件公开槽。 */
+    background:
+      linear-gradient(
+        to bottom,
+        var(--xh-dialog-highlight, var(--xh-material-elevated-highlight)) 0 var(--xh-stroke-thin),
+        transparent var(--xh-stroke-thin)
+      ),
+      linear-gradient(
+        to bottom,
+        var(--xh-dialog-content-lens-bg, var(--xh-dialog-header-bg, var(--xh-material-elevated-bg))),
+        var(
+          --xh-dialog-bg,
+          var(--xh-material-elevated-bg)
+        ) var(--xh-dialog-content-lens-depth, var(--xh-dialog-header-lens-depth, calc(var(--xh-dialog-py, var(--xh-surface-py-md)) + var(--xh-control-h-md))))
+      );
+    color: var(--xh-dialog-fg, var(--xh-material-elevated-fg));
+    box-shadow: var(--xh-dialog-shadow, var(--xh-material-elevated-shadow));
+    -webkit-backdrop-filter: var(--xh-dialog-content-backdrop-filter, var(--xh-dialog-backdrop-filter, var(--xh-material-elevated-backdrop)));
+    backdrop-filter: var(--xh-dialog-content-backdrop-filter, var(--xh-dialog-backdrop-filter, var(--xh-material-elevated-backdrop)));
   }
 
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 drawer 一致：
@@ -135,13 +179,125 @@
   }
 
   [data-scope='dialog'][data-part='content'][data-state='open'] {
-    animation: xh-dialog-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+    animation: xh-dialog-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+    /* 只在开着的这一档挂：合成层随 data-state 一起收走，收起后不再占着 */
+    will-change: opacity, scale, translate;
   }
 
   [data-scope='dialog'][data-part='content'][data-state='closed'] {
     animation: xh-dialog-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
+  /* —— 面板三段 —— */
+  /* header / body / footer 把面板切成「头尾定在原处、正文自己滚」三段，
+     与抽屉、浮动面板同一套角色划分：头尾不参与压缩，正文吃掉剩下的高度并自己滚。
+     面板的内衬仍由 content 一层给出，三段只接手段与段之间那道缝——
+     内衬换成三段各留一份，安全区与局部容器两档就要在三处各算一遍。
+     写了正文段的这一档同时封顶：不封顶正文永远没有可滚的余量，滚动条出不来。 */
+  [data-scope='dialog'][data-part='content']:has([data-scope='dialog'][data-part='body']) {
+    max-block-size: 100%;
+    gap: 0;
+    overflow: hidden;
+  }
+
+  /* 头段：标题与说明纵向堆叠；不参与压缩，正文再长也压不扁它 */
+  [data-scope='dialog'][data-part='header'] {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-dialog-header-gap, var(--xh-stack-gap-sm));
+    padding-block-end: var(--xh-dialog-header-pb, var(--xh-space-2));
+  }
+
+  /* 三段结构出现时，分隔线走 M4 令牌；无 body / footer 的轻量对话框不会凭空多一条线。 */
+  [data-scope='dialog'][data-part='content']:has([data-scope='dialog'][data-part='body'])
+    [data-scope='dialog'][data-part='header'] {
+    border-block-end: var(--xh-stroke-thin) solid var(--xh-dialog-separator, var(--xh-material-elevated-separator));
+  }
+
+  /* 语气徽记：圆底与字形两层。圆底是这个节点自己（底色、直径、圆角），字形走下面那条
+     :empty::before；作者往里塞了节点，兜底那几条即不命中，整枚换成他的图形。
+     底与前景取语气层派生好的槽，不在这儿另兑一遍——兑法差一档，字形压上去的对比度
+     就跟着差一档。节点自己带 data-tone 时那一族的槽就声明在它身上。 */
+  [data-scope='dialog'][data-part='indicator'] {
+    /* 圆底里的图形四边各收一个 space-1，不顶到圆边上；
+       这把尺同时给作者塞进来的图标，换成 XhIcon 也不会撑破圆底 */
+    --xh-icon-size: var(--xh-dialog-indicator-mark-size, calc(var(--xh-dialog-indicator-size, var(--xh-glyph-size-md)) - 2 * var(--xh-space-1)));
+
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: var(--xh-dialog-indicator-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-dialog-indicator-size, var(--xh-glyph-size-md));
+    border-radius: var(--xh-dialog-indicator-radius, var(--xh-shape-circle));
+    background: var(--xh-dialog-indicator-bg, var(--xh-_tone-subtle, var(--xh-bg-muted)));
+    color: var(--xh-dialog-indicator-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
+  }
+
+  [data-scope='dialog'][data-part='indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-info) center / contain no-repeat;
+  }
+
+  /* 画哪枚字形跟着语气走，与命令式服务弹出来的那一枚同一套映射 */
+  [data-scope='dialog'][data-part='indicator'][data-tone='success']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-check);
+    mask-image: var(--xh-glyph-mark-check);
+  }
+
+  [data-scope='dialog'][data-part='indicator'][data-tone='warning']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-warning);
+    mask-image: var(--xh-glyph-mark-warning);
+  }
+
+  [data-scope='dialog'][data-part='indicator'][data-tone='danger']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-close);
+    mask-image: var(--xh-glyph-mark-close);
+  }
+
+  /* 正文段：面板里唯一会滚的一段。最小高度归零，
+     否则弹性项按内容撑高，容器再矮也不产生溢出，滚动条永远出不来。
+     模态 body 是原生细条滚动面（§6.6）：细条由 reset 层统一给，滚到头不把页面一起带走 */
+  [data-scope='dialog'][data-part='body'] {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* 正文高度随交互变化（表单校验、展开段落）：还在用原生滚动条的正文留一条稳定空道，
+     滚动条出现与消失时不推动文字。带 data-xh-scrollbar 的容器已经把原生条藏成零宽，排除掉 */
+  [data-scope='dialog'][data-part='body']:not([data-xh-scrollbar]) {
+    scrollbar-gutter: stable;
+  }
+
+  /* 尾段：动作按钮排一行靠尾；同样不参与压缩 */
+  [data-scope='dialog'][data-part='footer'] {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--xh-dialog-footer-gap, var(--xh-control-gap-md));
+    padding-block-start: var(--xh-dialog-footer-pt, var(--xh-space-2));
+  }
+
+  [data-scope='dialog'][data-part='content']:has([data-scope='dialog'][data-part='footer'])
+    [data-scope='dialog'][data-part='footer'] {
+    border-block-start: var(--xh-stroke-thin) solid var(--xh-dialog-separator, var(--xh-material-elevated-separator));
+  }
+
+  /* 声明过 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
+  [data-scope='dialog'][data-part='header'][hidden],
+  [data-scope='dialog'][data-part='body'][hidden],
+  [data-scope='dialog'][data-part='footer'][hidden] {
+    display: none;
+  }
+
   [data-scope='dialog'][data-part='title'] {
     margin: 0;
     font-size: var(--xh-dialog-title-font-size, var(--xh-text-heading-3-size));
@@ -149,9 +305,10 @@
     color: var(--xh-dialog-title-fg, var(--xh-fg-default));
   }
 
+  /* 说明文字走说明档（§6.4）：13px + fg-muted */
   [data-scope='dialog'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-text-body-size);
+    font-size: var(--xh-dialog-description-font-size, var(--xh-text-secondary-size));
     color: var(--xh-dialog-description-fg, var(--xh-fg-muted));
   }
 
@@ -159,47 +316,38 @@
      否则长标题会直接钻到按钮底下。只在真有关闭按钮时让位。 */
   [data-scope='dialog'][data-part='content']:has([data-scope='dialog'][data-part='close-trigger'])
     [data-scope='dialog'][data-part='title'] {
-    padding-inline-end: calc(var(--xh-dialog-close-size, var(--xh-control-h-sm)) + var(--xh-space-3));
+    padding-inline-end: calc(var(--xh-dialog-close-size, var(--xh-control-h-sm)) + var(--xh-surface-action-inset));
   }
 
+  /*
+   * 关闭钮是面板角落的单图标钮（§9.1）：正方盒、sm 档几何、ghost 四态面、0.97 按压并换底与粗指针命中区
+   * 由家族配方给出——白面上走画布承载阶梯悬停 --xh-bg-subtle（100）→ 按下 --xh-bg-subtle-hover（200），
+   * 焦点面透明吃库环。这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与摆放，
+   * 聚焦档的 -bg-focus / -fg-focus 两槽同样桥到配方的 focus-visible 面，缺省仍是透明底与悬停字色；
+   * 静息前景取 muted 字色，悬停 / 按下回到 fg-default。
+   */
   [data-scope='dialog'][data-part='close-trigger'] {
+    --xh-action-visual-size: var(--xh-dialog-close-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-dialog-close-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: var(--xh-dialog-close-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-dialog-close-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-dialog-close-bg-focus, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-fg-rest: var(--xh-dialog-close-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-dialog-close-fg-hover, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-dialog-close-fg-hover, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-dialog-close-fg-focus, var(--xh-dialog-close-fg-hover, var(--xh-_action-variant-fg-focus-visible)));
+    /* 作者塞进按钮的图标随档取字形尺（sm = 16px），与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-dialog-icon-size, var(--xh-_action-profile-glyph-size));
+
     position: absolute;
-    inset-block-start: var(--xh-space-3);
-    inset-inline-end: var(--xh-space-3);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    block-size: var(--xh-dialog-close-size, var(--xh-control-h-sm));
-    inline-size: var(--xh-dialog-close-size, var(--xh-control-h-sm));
-    border: 0;
-    border-radius: var(--xh-dialog-close-radius, var(--xh-shape-control));
-    background: transparent;
-    color: var(--xh-fg-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    inset-block-start: var(--xh-surface-action-inset);
+    inset-inline-end: var(--xh-surface-action-inset);
   }
 
   [data-scope='dialog'][data-part='close-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='dialog'][data-part='close-trigger']:hover {
-    background: var(--xh-dialog-close-bg-hover, var(--xh-bg-subtle-hover));
-    color: var(--xh-fg-default);
-  }
-
-  [data-scope='dialog'][data-part='close-trigger']:active {
-    background: var(--xh-dialog-close-bg-active, var(--xh-bg-subtle-active));
-    scale: var(--xh-motion-scale-press);
-  }
-
-  [data-scope='dialog'][data-part='close-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
   [data-scope='dialog'][data-part='close-trigger']:empty::before {
     content: '';
@@ -214,7 +362,38 @@
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
-  [data-scope='dialog'][data-part='positioner'][hidden] {
+  [data-scope='dialog'][data-part='positioner'][hidden],
+  [data-scope='dialog'][data-part='indicator'][hidden] {
     display: none;
   }
+
+  /* 光学效果只在常规档存在：高对比、显式/系统减少透明度与强制色均把 blur 的遮罩原位实体化。 */
+  :where([data-contrast='more']) [data-scope='dialog'][data-part='backdrop'][data-variant='blur'],
+  :where([data-transparency='reduce']) [data-scope='dialog'][data-part='backdrop'][data-variant='blur'] {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+
+  @media (prefers-contrast: more), (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    [data-scope='dialog'][data-part='backdrop'][data-variant='blur'] {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    /* 强制色会接管渐变；改回同名实体 M4 底，保留 Canvas / CanvasText 的轮廓与正文。 */
+    [data-scope='dialog'][data-part='content'] {
+      background: var(--xh-dialog-bg, var(--xh-material-elevated-bg));
+    }
+  }
+
+  @media print {
+    /* 打印：定位层与遮罩是交互期才存在的东西，落到纸上只会盖住底下的正文。
+       收起写在这份皮肤里而不是 reset：reset 层排在组件层之前，组件层里任何一条 display 都压得住它。 */
+    [data-scope='dialog'][data-part='backdrop'],
+    [data-scope='dialog'][data-part='positioner'] {
+      display: none;
+    }
+  }
 }