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

package/css/timer.css

@@ -0,0 +1,119 @@
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='timer'] {
+    --xh-timer-skin: 1;
+  }
+
+  /* 三个尺寸档只换这几个私有槽，各部件从 root 继承它们，换档不必给每个部件各写一条选择器 */
+  [data-scope='timer'][data-part='root'] {
+    --xh-_timer-digit-size: var(--xh-text-heading-2-size);
+    --xh-_timer-gap: var(--xh-space-3);
+    --xh-_timer-control-h: var(--xh-control-h-md);
+    --xh-_timer-control-px: var(--xh-control-px-md);
+    --xh-_timer-control-gap: var(--xh-control-gap-md);
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-timer-gap, var(--xh-_timer-gap));
+    color: var(--xh-timer-fg, var(--xh-fg-default));
+  }
+
+  /* 上面声明了 display，会盖掉 UA 的 [hidden] 规则，收起态要在这里接回来 */
+  [data-scope='timer'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 尺寸 —— */
+  [data-scope='timer'][data-part='root'][data-size='sm'] {
+    --xh-_timer-digit-size: var(--xh-text-heading-3-size);
+    --xh-_timer-gap: var(--xh-space-2);
+    --xh-_timer-control-h: var(--xh-control-h-sm);
+    --xh-_timer-control-px: var(--xh-control-px-sm);
+    --xh-_timer-control-gap: var(--xh-control-gap-sm);
+  }
+
+  [data-scope='timer'][data-part='root'][data-size='lg'] {
+    --xh-_timer-digit-size: var(--xh-text-heading-1-size);
+    --xh-_timer-gap: var(--xh-space-4);
+    --xh-_timer-control-h: var(--xh-control-h-lg);
+    --xh-_timer-control-px: var(--xh-control-px-lg);
+    --xh-_timer-control-gap: var(--xh-control-gap-lg);
+  }
+
+  /* —— 时间区 —— */
+  /* 等宽数字：逐位宽度一致，秒数换位时分隔符与后面的段都不会左右挪动。
+     direction 钉成 ltr：每段是一个独立的 flex 项，主轴方向跟着文字方向走，
+     不钉住的话 rtl 页面上时分秒会整体倒过来排——时间串的读序两个方向都一样。 */
+  [data-scope='timer'][data-part='area'] {
+    display: inline-flex;
+    align-items: baseline;
+    direction: ltr;
+    color: var(--xh-timer-area-fg, var(--xh-fg-default));
+    font-size: var(--xh-timer-digit-font-size, var(--xh-_timer-digit-size));
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--xh-font-weight-semibold);
+    line-height: var(--xh-leading-tight);
+  }
+
+  [data-scope='timer'][data-part='area'][hidden] {
+    display: none;
+  }
+
+  /* 走完之后这串数字不再是活的信息，退一档；暂停在半路的仍是要盯着看的数，不退 */
+  [data-scope='timer'][data-part='area'][data-state='completed'] {
+    color: var(--xh-timer-completed-fg, var(--xh-fg-muted));
+  }
+
+  /* 记号只是排版，比数字弱一档、两侧留一点气口 */
+  [data-scope='timer'][data-part='separator'] {
+    padding-inline: var(--xh-timer-separator-px, var(--xh-space-0_5));
+    color: var(--xh-timer-separator-fg, var(--xh-fg-subtle));
+    font-weight: var(--xh-font-weight-regular);
+  }
+
+  /* —— 起停按钮 —— */
+  [data-scope='timer'][data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--xh-timer-control-gap, var(--xh-_timer-control-gap));
+    block-size: var(--xh-timer-control-h, var(--xh-_timer-control-h));
+    padding-inline: var(--xh-timer-control-px, var(--xh-_timer-control-px));
+    border: var(--xh-stroke-thin) solid var(--xh-timer-control-border, var(--xh-border-control));
+    border-radius: var(--xh-timer-control-radius, var(--xh-shape-control));
+    background: var(--xh-timer-control-bg, var(--xh-bg-surface));
+    color: var(--xh-timer-control-fg, var(--xh-fg-default));
+    font-size: var(--xh-text-label-size);
+    font-weight: var(--xh-text-label-weight);
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='timer'][data-part='control'][hidden] {
+    display: none;
+  }
+
+  [data-scope='timer'][data-part='control']:hover {
+    border-color: var(--xh-timer-control-border-hover, var(--xh-border-control-hover));
+    background: var(--xh-timer-control-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='timer'][data-part='control']:active {
+    background: var(--xh-timer-control-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='timer'][data-part='control']:focus-visible {
+    border-color: var(--xh-timer-control-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 作者把按钮禁掉时的样子。文字改用 fg-disabled 就不再叠 opacity，两条一起上会掉到读不出来 */
+  [data-scope='timer'][data-part='control']:disabled {
+    border-color: var(--xh-timer-control-border-disabled, var(--xh-border-subtle));
+    background: var(--xh-timer-control-bg-disabled, var(--xh-bg-muted));
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+}

package/css/toast.css

@@ -27,7 +27,7 @@
 
     to {
       opacity: 0;
-      translate: 0 var(--xh-motion-distance-sm);
+      translate: 0 var(--xh-motion-distance-md);
       scale: var(--xh-motion-scale-enter);
     }
   }
@@ -40,27 +40,30 @@
   }
 
   [data-scope='toast'][data-part='root'] {
+    /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-toast-icon-size, var(--xh-glyph-size-text));
+
     display: flex;
     flex-direction: column;
     gap: var(--xh-toast-gap, var(--xh-space-1));
-    inline-size: var(--xh-toast-w, 20rem);
+    inline-size: var(--xh-toast-w, var(--xh-overlay-max-w));
     /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
        窄屏上不必再算一遍 viewport 减法 */
     max-inline-size: 100%;
-    padding-block: var(--xh-toast-py, var(--xh-space-3));
-    padding-inline: var(--xh-toast-px, var(--xh-space-4));
+    padding-block: var(--xh-toast-py, var(--xh-surface-py-sm));
+    padding-inline: var(--xh-toast-px, var(--xh-surface-px-sm));
     border: var(--xh-stroke-thin) solid var(--xh-toast-border, var(--xh-border-default));
     /* 语气色条做成起始侧的粗边，而不是伪元素：圆角与阴影都不用再对第二遍。
        两条必须排在 border 简写之后，否则被简写重置回细边与常规描边色。
        颜色由 connect 从 type 派生的 data-tone 经语气层给出，作者写 --xh-toast-accent
        就能把某一条整体改色；两者都没有时退回原来的 info 蓝 */
-    border-inline-start-width: var(--xh-toast-accent-width, 4px);
+    border-inline-start-width: var(--xh-toast-accent-width, var(--xh-space-1));
     border-inline-start-color: var(--xh-toast-accent, var(--xh-_tone-soft, var(--xh-color-info-500)));
     border-radius: var(--xh-toast-radius, var(--xh-shape-surface));
     background: var(--xh-toast-bg, var(--xh-bg-surface-raised));
     color: var(--xh-toast-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-toast-shadow, var(--xh-elevation-3));
-    font-size: var(--xh-toast-font-size, var(--xh-font-size-sm));
+    box-shadow: var(--xh-toast-shadow, var(--xh-elevation-sheet));
+    font-size: var(--xh-toast-font-size, var(--xh-text-secondary-size));
     line-height: var(--xh-toast-leading, var(--xh-leading-normal));
     /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
        悬停按住计时、按钮可点、焦点进出，全指着这一条 */
@@ -94,7 +97,7 @@
     /* 作者可能把它写成 h2/p，外边距得先归零，否则卡片内的行距对不上 */
     margin: 0;
     color: var(--xh-toast-title-fg, var(--xh-fg-default));
-    font-size: var(--xh-toast-title-font-size, var(--xh-font-size-md));
+    font-size: var(--xh-toast-title-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-toast-title-font-weight, var(--xh-font-weight-semibold));
     line-height: var(--xh-toast-title-leading, var(--xh-leading-tight));
   }
@@ -102,7 +105,7 @@
   [data-scope='toast'][data-part='description'] {
     margin: 0;
     color: var(--xh-toast-description-fg, var(--xh-fg-muted));
-    font-size: var(--xh-toast-description-font-size, var(--xh-font-size-sm));
+    font-size: var(--xh-toast-description-font-size, var(--xh-text-secondary-size));
   }
 
   /* 没给文案的那一个仍然要留在 DOM 里（aria-labelledby / aria-describedby 指着它），
@@ -169,6 +172,10 @@
     font: inherit;
     line-height: var(--xh-leading-none);
     cursor: pointer;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半：
@@ -178,10 +185,15 @@
   }
 
   [data-scope='toast'][data-part='close-trigger']:hover:not(:disabled) {
-    background: var(--xh-toast-close-bg-hover, var(--xh-bg-subtle));
+    background: var(--xh-toast-close-bg-hover, var(--xh-bg-subtle-hover));
     color: var(--xh-toast-close-fg-hover, var(--xh-fg-default));
   }
 
+  [data-scope='toast'][data-part='close-trigger']:active {
+    background: var(--xh-toast-close-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
+  }
+
   /* 单体控件用原生 disabled。常规路径下它与 hidden 同时出现看不见，
      但作者若在覆盖层把收起改了回来，至少还能看出这颗叉是按不动的 */
   [data-scope='toast'][data-part='close-trigger']:disabled {
@@ -193,4 +205,16 @@
     outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='toast'][data-part='close-trigger']: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));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-close) center / contain no-repeat;
+  }
 }

package/css/toaster.css

@@ -30,7 +30,7 @@
     position: fixed;
     inset-block: 0;
     inset-inline: 0;
-    z-index: var(--xh-layer-toast);
+    z-index: var(--xh-toaster-layer, var(--xh-layer-toast));
     display: flex;
     flex-direction: column;
     /* 基线按默认落位 bottom-end 写，下面只覆盖跟它不同的那几个位 */

package/css/toggle.css

@@ -95,14 +95,14 @@
 
   /* —— 尺寸 —— */
   [data-scope='toggle'][data-part='root'][data-size='sm'] {
-    block-size: var(--xh-control-h-sm);
-    padding-inline: var(--xh-control-px-sm);
-    font-size: var(--xh-font-size-sm);
+    block-size: var(--xh-toggle-h, var(--xh-control-h-sm));
+    padding-inline: var(--xh-toggle-px, var(--xh-control-px-sm));
+    font-size: var(--xh-toggle-font-size, var(--xh-control-font-sm));
   }
 
   [data-scope='toggle'][data-part='root'][data-size='lg'] {
-    block-size: var(--xh-control-h-lg);
-    padding-inline: var(--xh-control-px-lg);
-    font-size: var(--xh-font-size-lg);
+    block-size: var(--xh-toggle-h, var(--xh-control-h-lg));
+    padding-inline: var(--xh-toggle-px, var(--xh-control-px-lg));
+    font-size: var(--xh-toggle-font-size, var(--xh-control-font-lg));
   }
 }

package/css/tone.css

@@ -18,6 +18,10 @@
  *
  * 这两个槽用的都是固定原语而不是 --xh-fg-default：实心底本身是原语色、不随主题翻，
  * 配色若跟着主题翻，暗色下就会变成白字压在浅黄底上（实测对比度 2.70）。
+ *
+ * brand 是例外：那一族的色相归使用者，所以它的底与前景走 --xh-bg-brand / --xh-fg-on-brand
+ * 这两个语义令牌。缺省主题下它们就解析成 brand-600 与 neutral-0，与其余五族同值；
+ * 改写过品牌色的使用者只改这两个令牌，实心底与它上面的字就一起跟着走。
  */
 @layer xihan.components {
   [data-tone] {
@@ -46,9 +50,9 @@
   }
 
   [data-tone='brand'] {
-    --xh-_tone: var(--xh-color-brand-600);
+    --xh-_tone: var(--xh-bg-brand);
     --xh-_tone-soft: var(--xh-color-brand-500);
-    --xh-_tone-on: var(--xh-color-neutral-0);
+    --xh-_tone-on: var(--xh-fg-on-brand);
     --xh-_tone-shift: var(--xh-color-neutral-950);
   }
 
@@ -88,12 +92,13 @@
 
   /* 主色本体在各自的底上有两族够不到 3:1：黄在白底上只有 2.70，中性在深色底上只有 2.54。
      语气色是固定原语、不随主题翻，所以这两族只能按主题各兜一次。
-     浅色是缺省态（不写 data-theme 也算浅色），深色靠属性选择器压过它 */
+     浅色是缺省态（不写 data-theme 也算浅色），深色靠属性选择器压过它。
+     data-theme 写在语气容器自己身上还是写在祖先上都算，两种用法都成立 */
   [data-tone='warning'] {
     --xh-_tone-border-control: var(--xh-color-warning-700);
   }
 
-  [data-theme='dark'] [data-tone='warning'] {
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='warning'] {
     --xh-_tone-border-control: var(--xh-color-warning-600);
   }
 
@@ -101,7 +106,7 @@
     --xh-_tone-border-control: var(--xh-color-neutral-600);
   }
 
-  [data-theme='dark'] [data-tone='neutral'] {
+  :is([data-theme='dark'] *, [data-theme='dark'])[data-tone='neutral'] {
     --xh-_tone-border-control: var(--xh-color-neutral-550);
   }
 }

package/css/toolbar.css

@@ -101,7 +101,7 @@
   [data-scope='toolbar'][data-part='separator'] {
     flex: none;
     align-self: stretch;
-    border-radius: var(--xh-toolbar-separator-radius, var(--xh-radius-full));
+    border-radius: var(--xh-toolbar-separator-radius, var(--xh-shape-pill));
     background: var(--xh-toolbar-separator-color, var(--xh-border-default));
   }
 

package/css/tooltip.css

@@ -1,13 +1,27 @@
 @layer xihan.motion {
   /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
      动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
-  @keyframes xh-fade-in {
+  @keyframes xh-pop-in {
     from {
       opacity: 0;
+      scale: var(--xh-motion-scale-enter);
     }
 
     to {
       opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes xh-pop-out {
+    from {
+      opacity: 1;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      scale: var(--xh-motion-scale-enter);
     }
   }
 }
@@ -40,7 +54,7 @@
     position: fixed;
     inset-block-start: 0;
     inset-inline-start: 0;
-    z-index: var(--xh-layer-tooltip);
+    z-index: var(--xh-tooltip-layer, var(--xh-layer-tooltip));
     /* 浮层不承载交互：指针必须能穿过去点到底下的东西 */
     pointer-events: none;
   }
@@ -55,25 +69,36 @@
        箭头是它的后代，语气槽一并继承 */
     --xh-_tooltip-py: var(--xh-space-1);
     --xh-_tooltip-px: var(--xh-space-2);
-    --xh-_tooltip-font-size: var(--xh-font-size-sm);
+    --xh-_tooltip-font-size: var(--xh-text-secondary-size);
 
     /* 与 positioner 相反：浮层本体要能接指针，指针停在提示上就不该收起
        （长文案需要停留细看）。positioner 仍是 none，空白区域照样点得穿。 */
+    /* 显式声明 display 是为了盖掉 UA 的 [hidden]{display:none}：收起那一帧 content 仍带 hidden，
+       盒子得先在,退场动画才播得出来。真正的收起由宿主在退场结束后落成内联 display */
+    display: block;
     pointer-events: auto;
     max-inline-size: var(--xh-tooltip-max-w, var(--xh-overlay-max-w));
     padding-block: var(--xh-tooltip-py, var(--xh-_tooltip-py));
     padding-inline: var(--xh-tooltip-px, var(--xh-_tooltip-px));
+    /* 这里刻意用 control 而不是浮层那档 surface：提示气泡通常只有一行字、高度接近控件，
+       8px 圆角在这个尺寸上占比过大，看着会发胖。档位定义里为此单列了一条 */
     border-radius: var(--xh-tooltip-radius, var(--xh-shape-control));
     /* 实心底与其上的文字色随语气走。没写 data-tone 时两个槽都没被声明，退回原来的取值 */
     background: var(--xh-tooltip-bg, var(--xh-_tone, var(--xh-fg-default)));
     color: var(--xh-tooltip-fg, var(--xh-_tone-on, var(--xh-bg-surface)));
     font-size: var(--xh-tooltip-font-size, var(--xh-_tooltip-font-size));
     line-height: var(--xh-leading-normal);
-    box-shadow: var(--xh-tooltip-shadow, var(--xh-elevation-2));
+    box-shadow: var(--xh-tooltip-shadow, var(--xh-elevation-floating));
   }
 
   [data-scope='tooltip'][data-part='content'][data-state='open'] {
-    animation: xh-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='tooltip'][data-part='content'][data-state='closed'] {
+    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   /* —— 尺寸 —— */
@@ -82,46 +107,24 @@
   [data-scope='tooltip'][data-part='content'][data-size='sm'] {
     --xh-_tooltip-py: var(--xh-space-0_5);
     --xh-_tooltip-px: var(--xh-space-1_5);
-    --xh-_tooltip-font-size: var(--xh-font-size-xs);
+    --xh-_tooltip-font-size: var(--xh-control-caption-sm);
   }
 
   [data-scope='tooltip'][data-part='content'][data-size='lg'] {
     --xh-_tooltip-py: var(--xh-space-1_5);
     --xh-_tooltip-px: var(--xh-space-2_5);
-    --xh-_tooltip-font-size: var(--xh-font-size-md);
+    --xh-_tooltip-font-size: var(--xh-control-caption-lg);
   }
 
-  /* 箭头是旋转 45° 的方块，按自报的落定朝向贴在 content 对侧边上；
+  /* 箭头的底色与描边色，几何在 overlay-arrow.css。
      交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
   [data-scope='tooltip'][data-part='arrow'] {
-    --xh-_tooltip-arrow-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
     --xh-_tooltip-arrow-x: 50%;
     --xh-_tooltip-arrow-y: 50%;
+    --xh-_overlay-arrow-size: var(--xh-tooltip-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_overlay-arrow-x: var(--xh-_tooltip-arrow-x);
+    --xh-_overlay-arrow-y: var(--xh-_tooltip-arrow-y);
 
-    position: absolute;
-    inline-size: var(--xh-_tooltip-arrow-size);
-    block-size: var(--xh-_tooltip-arrow-size);
     background: var(--xh-tooltip-bg, var(--xh-_tone, var(--xh-fg-default)));
-    transform: rotate(45deg);
-  }
-
-  [data-scope='tooltip'][data-part='arrow'][data-placement^='bottom'] {
-    inset-block-start: calc(var(--xh-_tooltip-arrow-size) / -2);
-    inset-inline-start: calc(var(--xh-_tooltip-arrow-x) - var(--xh-_tooltip-arrow-size) / 2);
-  }
-
-  [data-scope='tooltip'][data-part='arrow'][data-placement^='top'] {
-    inset-block-end: calc(var(--xh-_tooltip-arrow-size) / -2);
-    inset-inline-start: calc(var(--xh-_tooltip-arrow-x) - var(--xh-_tooltip-arrow-size) / 2);
-  }
-
-  [data-scope='tooltip'][data-part='arrow'][data-placement^='left'] {
-    inset-block-start: calc(var(--xh-_tooltip-arrow-y) - var(--xh-_tooltip-arrow-size) / 2);
-    inset-inline-end: calc(var(--xh-_tooltip-arrow-size) / -2);
-  }
-
-  [data-scope='tooltip'][data-part='arrow'][data-placement^='right'] {
-    inset-block-start: calc(var(--xh-_tooltip-arrow-y) - var(--xh-_tooltip-arrow-size) / 2);
-    inset-inline-start: calc(var(--xh-_tooltip-arrow-size) / -2);
   }
 }