@xihan-ui/styles 1.0.0 → 2.0.0

package/css/float-button.css

@@ -1,3 +1,15 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 float button 样式。 */
+
+@import '../family/action-control.css';
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='float-button'] {
@@ -10,16 +22,18 @@
      transform / filter / backdrop-filter / contain，包含块就被抢走，整组立刻贴错位置——
      所以别往覆盖钩子里加这几个属性。 */
   [data-scope='float-button'][data-part='root'] {
-    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-glyph-size-text));
-
     --xh-_float-button-offset: var(--xh-space-6);
-    /* 触发器与展开的每一条动作共用这两个私有槽，换档只改这里 */
-    --xh-_float-button-size: var(--xh-float-button-size, var(--xh-control-h-lg));
-    --xh-_float-button-radius: var(--xh-float-button-radius, var(--xh-shape-pill));
+    /* 展开列表里原生动作项的身量与字形尺：触发器自己走 Action Control floating 档
+       （sm = box-md / md = box-lg / lg = box-lg + space-2，字形 md / lg / xl），
+       原生动作项不是 Headless 部件、配方打不到它，这两支私有槽按同一张表镜像，换档只改这里 */
+    --xh-_float-button-size: var(--xh-control-box-lg);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-lg);
+    /* 作者塞进指示符槽的图标跟着尺寸档走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_float-button-glyph-size));
 
     position: fixed;
-    z-index: var(--xh-float-button-layer, var(--xh-layer-sticky));
+    /* 展开时消费 LayerRegistry 的实时层序；收起后没有逻辑层，仍回到普通 sticky 槽。 */
+    z-index: var(--xh-float-button-layer, var(--xh-_layer, var(--xh-layer-sticky)));
     display: flex;
     /* 摞的方向由落位定，下面四条各自覆盖；这里给的是没写落位时的落点 */
     flex-direction: column;
@@ -29,76 +43,160 @@
 
   /* —— 四角 ——
      start / end 用逻辑属性，RTL 下自动换到另一侧。
-     摞的方向按贴的是上沿还是下沿定：离屏幕边最近的恒是触发器，展开的那一组往页面中间长 */
+     摞的方向按贴的是上沿还是下沿定：离屏幕边最近的恒是触发器，展开的那一组往页面中间长。
+     四条贴边都与安全区取大的一头：刘海、圆角与底部横条压住的那一段由系统给出，
+     贴边比它窄时钮会被切掉一角；桌面上 env() 恒为 0，取值与贴边槽完全一致。
+     安全区只有物理方向的四个名字，行内轴上两侧同取较宽的那一段，RTL 下不会翻错边。 */
   [data-scope='float-button'][data-part='root'][data-placement^='top'] {
-    inset-block-start: var(--xh-_float-button-offset);
+    inset-block-start: max(var(--xh-_float-button-offset), env(safe-area-inset-top));
     flex-direction: column;
   }
 
   [data-scope='float-button'][data-part='root'][data-placement^='bottom'] {
-    inset-block-end: var(--xh-_float-button-offset);
+    inset-block-end: max(var(--xh-_float-button-offset), env(safe-area-inset-bottom));
     flex-direction: column-reverse;
   }
 
   [data-scope='float-button'][data-part='root'][data-placement$='-start'] {
-    inset-inline-start: var(--xh-_float-button-offset);
+    inset-inline-start: max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right));
   }
 
   [data-scope='float-button'][data-part='root'][data-placement$='-end'] {
-    inset-inline-end: var(--xh-_float-button-offset);
+    inset-inline-end: max(var(--xh-_float-button-offset), env(safe-area-inset-left), env(safe-area-inset-right));
   }
 
-  /* —— 外形 —— */
-  /* 使用者令牌排在形态之前：写了 --xh-float-button-radius 就以它为准，没写才按 shape 换档 */
-  [data-scope='float-button'][data-part='root'][data-shape='square'] {
-    --xh-_float-button-radius: var(--xh-float-button-radius, var(--xh-shape-control));
+  /* —— 尺寸：原生动作项与触发器的 floating 档逐档同表 —— */
+  [data-scope='float-button'][data-part='root'][data-size='sm'] {
+    --xh-_float-button-size: var(--xh-control-box-md);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
   }
 
-  /* —— 触发器 —— */
-  /* 里面通常只放一个图标，宽高同取一档尺寸 */
-  [data-scope='float-button'][data-part='trigger'] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--xh-_float-button-size);
-    block-size: var(--xh-_float-button-size);
-    padding: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-float-button-border, var(--xh-border-control));
-    border-radius: var(--xh-_float-button-radius);
-    /* 使用者令牌排在缺省之前：写了覆盖钩子就以它为准，没写才退到中性缺省 */
-    background: var(--xh-float-button-bg, var(--xh-bg-surface-raised));
-    color: var(--xh-float-button-fg, var(--xh-fg-default));
-    /* 浮在内容之上，靠投影与页面拉开层次 */
-    box-shadow: var(--xh-float-button-shadow, var(--xh-elevation-sheet));
-    cursor: pointer;
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  [data-scope='float-button'][data-part='root'][data-size='md'] {
+    --xh-_float-button-size: var(--xh-control-box-lg);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-lg);
   }
 
-  /* 悬停只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
-  @media (hover: hover) {
-    [data-scope='float-button'][data-part='trigger']:not([data-disabled]):hover {
-      border-color: var(--xh-float-button-border-hover, var(--xh-border-control-hover));
-      background: var(--xh-float-button-bg-hover, var(--xh-bg-subtle-hover));
-    }
+  [data-scope='float-button'][data-part='root'][data-size='lg'] {
+    --xh-_float-button-size: calc(var(--xh-control-box-lg) + var(--xh-space-2));
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-xl);
   }
 
-  [data-scope='float-button'][data-part='trigger']:not([data-disabled]):active {
-    background: var(--xh-float-button-bg-active, var(--xh-bg-subtle-active));
+  /* —— 形态：给展开列表里原生动作项用的面 ——
+     触发器的面由 Action Control 形态矩阵按 data-xh-action-variant 给（solid / subtle / ghost），
+     原生动作项读不到矩阵，这几块私有槽按矩阵同一张表镜像；ghost 与 outline 的悬停 / 按下走画布承载的
+     阶梯（100 → 200，§7.2 第 3 条）。缺省 outline（连接层不传 variant 时显式落）是磨砂面：背景、边缘、
+     顶光、投影与磨砂从同一份 M2 配方取，高对比、减少透明度、打印和强制色便能一起降级——钮浮在正文
+     之上，透空的面在任何内容上都读不出边界，所以 outline 这一档面留着 */
+  [data-scope='float-button'][data-part='root'][data-variant='solid'] {
+    --xh-_float-button-bg: var(--xh-_tone, var(--xh-bg-brand));
+    --xh-_float-button-bg-hover: var(--xh-_tone-hover, var(--xh-bg-brand-hover));
+    --xh-_float-button-bg-active: var(--xh-_tone-active, var(--xh-bg-brand-active));
+    --xh-_float-button-fg: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    --xh-_float-button-border: transparent;
+    --xh-_float-button-border-hover: transparent;
+    --xh-_float-button-shadow: none;
   }
 
-  /* 禁用只换颜色，不叠不透明度：两者同时用只会互相抵消，把字压到读不出来 */
-  [data-scope='float-button'][data-part='trigger'][data-disabled] {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  [data-scope='float-button'][data-part='root'][data-variant='subtle'] {
+    --xh-_float-button-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_float-button-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_float-button-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
+    --xh-_float-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_float-button-border: transparent;
+    --xh-_float-button-border-hover: transparent;
+    --xh-_float-button-shadow: none;
   }
 
-  /* 聚焦环恒是 --xh-ring-focus，不随外形与落位走 */
-  [data-scope='float-button'][data-part='trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  [data-scope='float-button'][data-part='root'][data-variant='outline'] {
+    --xh-_float-button-bg: var(--xh-material-frosted-bg);
+    --xh-_float-button-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_float-button-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_float-button-fg: var(--xh-material-frosted-fg);
+    --xh-_float-button-border: var(--xh-material-frosted-border);
+    --xh-_float-button-border-hover: var(--xh-material-frosted-border);
+    --xh-_float-button-shadow: var(--xh-material-frosted-shadow);
+  }
+
+  [data-scope='float-button'][data-part='root'][data-variant='ghost'] {
+    --xh-_float-button-bg: transparent;
+    --xh-_float-button-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
+    --xh-_float-button-bg-active: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    --xh-_float-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    --xh-_float-button-border: transparent;
+    --xh-_float-button-border-hover: transparent;
+    --xh-_float-button-shadow: none;
+  }
+
+  /* —— 触发器 ——
+     浮在内容之上的单图标圆钮，接 Action Control floating 档（§4.1）：盒型（md = box-lg 48px，圆形）、
+     四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
+     这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射 */
+  [data-scope='float-button'][data-part='trigger'] {
+    --xh-action-bg-rest: var(--xh-float-button-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-float-button-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-float-button-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-float-button-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-disabled: var(--xh-float-button-bg, var(--xh-_action-variant-bg-disabled));
+    --xh-action-fg-rest: var(--xh-float-button-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-float-button-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-float-button-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-float-button-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-border-rest: var(--xh-float-button-border, var(--xh-_action-variant-border-rest));
+    --xh-action-border-hover: var(--xh-float-button-border-hover, var(--xh-_action-variant-border-hover));
+    --xh-action-border-pressed: var(--xh-float-button-border-hover, var(--xh-_action-variant-border-pressed));
+    --xh-action-border-focus-visible: var(--xh-float-button-border, var(--xh-_action-variant-border-focus-visible));
+    --xh-action-border-disabled: var(--xh-float-button-border, var(--xh-_action-variant-border-disabled));
+    /* 矩阵各态无影（§8.3 淡底与阴影互斥）；outline 那一档的磨砂投影在下面另桥接 */
+    --xh-action-shadow-rest: var(--xh-float-button-shadow, none);
+    --xh-action-shadow-hover: var(--xh-float-button-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-float-button-shadow, none);
+    --xh-action-shadow-focus-visible: var(--xh-float-button-shadow, none);
+    --xh-action-shadow-disabled: var(--xh-float-button-shadow, none);
+    --xh-action-radius: var(--xh-float-button-radius, var(--xh-_action-profile-radius));
+    --xh-action-visual-size: var(--xh-float-button-size, var(--xh-_action-profile-visual-size));
+    /* 作者塞进来的图标跟着 floating 档走（md 24px），与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_action-profile-glyph-size));
+  }
+
+  /* 缺省 outline 是 M2 磨砂面：背景、边缘、顶光、投影与磨砂从同一份配方取。
+     悬停 / 按下的底走矩阵 outline 列的画布阶梯（100 → 200），边缘与投影不动；
+     键盘聚焦时铺配方的实体 focus surface——透明面上的内收环没有稳定的底可量对比；
+     置灰只换字色（矩阵 disabled 列的前景），面仍留着，透空的面在任何内容上都读不出边界 */
+  [data-scope='float-button'][data-part='root'][data-variant='outline']
+    [data-scope='float-button'][data-part='trigger'] {
+    --xh-action-bg-rest: var(--xh-float-button-bg, var(--xh-_float-button-bg));
+    --xh-action-bg-focus-visible: var(--xh-float-button-bg, var(--xh-material-frosted-focus-surface));
+    --xh-action-bg-disabled: var(--xh-float-button-bg, var(--xh-_float-button-bg));
+    --xh-action-fg-rest: var(--xh-float-button-fg, var(--xh-_float-button-fg));
+    --xh-action-fg-hover: var(--xh-float-button-fg, var(--xh-_float-button-fg));
+    --xh-action-fg-pressed: var(--xh-float-button-fg, var(--xh-_float-button-fg));
+    --xh-action-fg-focus-visible: var(--xh-float-button-fg, var(--xh-_float-button-fg));
+    --xh-action-border-rest: var(--xh-float-button-border, var(--xh-_float-button-border));
+    --xh-action-border-hover: var(--xh-float-button-border-hover, var(--xh-_float-button-border-hover));
+    --xh-action-border-pressed: var(--xh-float-button-border-hover, var(--xh-_float-button-border-hover));
+    --xh-action-border-focus-visible: var(--xh-float-button-border, var(--xh-_float-button-border));
+    --xh-action-border-disabled: var(--xh-float-button-border, var(--xh-_float-button-border));
+    --xh-action-shadow-rest: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
+    --xh-action-shadow-hover: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
+    --xh-action-shadow-pressed: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
+    --xh-action-shadow-focus-visible: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
+    --xh-action-shadow-disabled: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
+    /* M2 顶光走配方的高光通道：实心、淡色与透空形态各有自身表面，不能把磨砂高光误铺上去 */
+    --xh-action-highlight-rest: var(--xh-material-frosted-highlight);
+    --xh-action-highlight-hover: var(--xh-material-frosted-highlight);
+    --xh-action-highlight-pressed: var(--xh-material-frosted-highlight);
+    --xh-action-highlight-focus-visible: var(--xh-material-frosted-highlight);
+    --xh-action-highlight-disabled: var(--xh-material-frosted-highlight);
+
+    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
+    backdrop-filter: var(--xh-material-frosted-backdrop);
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     置灰后矩阵把面换成中性淡底，公共环压上去足够对比，不再另灌 */
+  [data-scope='float-button'][data-part='trigger'][data-xh-action-variant='solid']:not([data-disabled]):focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
   }
 
   /* —— 展开的那一组 —— */
@@ -122,12 +220,88 @@
   /* 展开的每一条动作与触发器同一副身量：它们是一排里的同类，作者只管往里放按钮 */
   [data-scope='float-button'][data-part='list'] > * {
     flex: none;
-    inline-size: var(--xh-_float-button-size);
-    block-size: var(--xh-_float-button-size);
-    border-radius: var(--xh-_float-button-radius);
+    inline-size: var(--xh-float-button-size, var(--xh-_float-button-size));
+    block-size: var(--xh-float-button-size, var(--xh-_float-button-size));
+    border-radius: var(--xh-float-button-radius, var(--xh-shape-circle));
+    /* 逐条依次冒出来，离触发器最近的那条先到。backwards 让每条在自己那份延迟里保持起始帧 */
+    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
-  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  /* 原生按钮直接作为动作项时，沿用触发器的视觉面（同一组公开槽、同一张形态表）；XhButton 保留自己的皮肤。 */
+  [data-scope='float-button'][data-part='list'] > button:not([data-scope]) {
+    padding: 0;
+    border: var(--xh-stroke-thin) solid var(--xh-float-button-border, var(--xh-_float-button-border));
+    background-color: var(--xh-float-button-bg, var(--xh-_float-button-bg));
+    color: var(--xh-float-button-fg, var(--xh-_float-button-fg));
+    box-shadow: var(--xh-float-button-shadow, var(--xh-_float-button-shadow));
+    font: inherit;
+    cursor: pointer;
+    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);
+  }
+
+  [data-scope='float-button'][data-part='root'][data-variant='outline']
+    [data-scope='float-button'][data-part='list']
+    > button:not([data-scope]) {
+    background-image: linear-gradient(
+      to bottom,
+      var(--xh-material-frosted-highlight) 0 var(--xh-stroke-thin),
+      transparent var(--xh-stroke-thin)
+    );
+    -webkit-backdrop-filter: var(--xh-material-frosted-backdrop);
+    backdrop-filter: var(--xh-material-frosted-backdrop);
+  }
+
+  [data-scope='float-button'][data-part='list'] > button:not([data-scope]):focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  @media (hover: hover) {
+    [data-scope='float-button'][data-part='list'] > button:not([data-scope]):not(:disabled):hover {
+      border-color: var(--xh-float-button-border-hover, var(--xh-_float-button-border-hover));
+      background-color: var(--xh-float-button-bg-hover, var(--xh-_float-button-bg-hover));
+    }
+  }
+
+  [data-scope='float-button'][data-part='list'] > button:not([data-scope]):not(:disabled):active {
+    background-color: var(--xh-float-button-bg-active, var(--xh-_float-button-bg-active));
+    scale: var(--xh-motion-scale-press);
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  [data-scope='float-button'][data-part='list'] > button:not([data-scope]):disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* 交错的间隔：第二条起逐级往后推，第六条起统一钉在第五级，
+     动作再多也不会拖出一条越来越慢的尾巴 */
+  [data-scope='float-button'][data-part='list'] > *:nth-child(2) {
+    animation-delay: var(--xh-motion-stagger-step);
+  }
+
+  [data-scope='float-button'][data-part='list'] > *:nth-child(3) {
+    animation-delay: calc(2 * var(--xh-motion-stagger-step));
+  }
+
+  [data-scope='float-button'][data-part='list'] > *:nth-child(4) {
+    animation-delay: calc(3 * var(--xh-motion-stagger-step));
+  }
+
+  [data-scope='float-button'][data-part='list'] > *:nth-child(5) {
+    animation-delay: calc(4 * var(--xh-motion-stagger-step));
+  }
+
+  [data-scope='float-button'][data-part='list'] > *:nth-child(n + 6) {
+    animation-delay: calc(5 * var(--xh-motion-stagger-step));
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。
+     粗指针的 44px 命中区由配方的 ::after 给，字形占的是 ::before */
   [data-scope='float-button'][data-part='trigger']:empty::before {
     content: '';
     display: inline-block;
@@ -145,4 +319,11 @@
   [data-scope='float-button'][data-part='trigger'][hidden] {
     display: none;
   }
+
+  @media print {
+    /* 打印：悬浮动作钮固定在视口上，纸上没有视口——它会印在页面某处盖住正文，而且按不动。 */
+    [data-scope='float-button'][data-part='root'] {
+      display: none;
+    }
+  }
 }