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

package/css/notification.css

@@ -0,0 +1,377 @@
+@layer xihan.motion {
+  /*
+   * 九个位共用同一条进出场，位移不跟着落位走：要按位置分方向，就得从 group 的
+   * data-placement 反向选到卡片上，落位一改名整条动效静默失效。
+   * 竖向一小段位移在九个位上都说得通。
+   */
+  @keyframes xh-notification-in {
+    from {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-md);
+      scale: var(--xh-motion-scale-enter);
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+      scale: 1;
+    }
+  }
+
+  /* loading 那枚字形自己转。逐皮肤自带一份：跨皮肤共用动画名，
+     引用方那份皮肤不在场时动画就静默不跑 */
+  @keyframes xh-notification-spin {
+    to {
+      rotate: 360deg;
+    }
+  }
+
+  @keyframes xh-notification-out {
+    from {
+      opacity: 1;
+      translate: 0 0;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-md);
+      scale: var(--xh-motion-scale-enter);
+    }
+  }
+}
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='notification'] {
+    --xh-notification-skin: 1;
+  }
+
+  /* 作用域包装不占布局：通知落在哪儿由九个 group 各自的 fixed 说了算，
+     root 只是把队列的作用域圈起来（地标挂在那一摞上，不在这里）。
+     它若留下一个块盒，写在页面中段的用法（按钮和队列摆在一起）就会凭空多出一行空白。
+     另一件必须提防的事：fixed 认的是视口，祖先上一旦出现
+     transform / filter / backdrop-filter / contain，包含块就被抢走，整摞通知立刻贴错位置——
+     所以这里连 position 都不碰，也别往覆盖钩子里加这几个属性。 */
+  [data-scope='notification'][data-part='root'] {
+    display: contents;
+  }
+
+  /* 只要声明过 display，就盖掉了 UA 的 [hidden]{display:none}，收起态得自己补回来 */
+  [data-scope='notification'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 一摞 = 一整面视口大小的定位面：贴边靠 padding，九个位靠 justify/align 表达。
+   * 不用四角 inset 逐个摆，是因为 column flex 的 align-items 走的是行内轴，
+   * RTL 下 start/end 自动跟着翻；写死 inset-inline-start 的话居中那三个位
+   * 还得再配一次 translate，方向一变就错。
+   * 条目次序按队列原样（旧的在前）：贴底那三个位于是新的离屏幕边最近，符合直觉。
+   */
+  [data-scope='notification'][data-part='group'] {
+    position: fixed;
+    inset-block: 0;
+    inset-inline: 0;
+    z-index: var(--xh-notification-layer, var(--xh-layer-toast));
+    display: flex;
+    flex-direction: column;
+    /* 基线按默认落位 bottom-end 写，下面只覆盖跟它不同的那几个位 */
+    justify-content: flex-end;
+    align-items: center;
+    padding-block: var(--xh-notification-inset, var(--xh-space-6));
+    padding-inline: var(--xh-notification-inset, var(--xh-space-6));
+    /* 摞内间距由连接层写进内联 style（两个适配器共用同一份），这里绝不重复写：
+       写了也会被内联盖掉，只会让人误以为间距归样式层管 */
+    /* 整面铺开就等于罩住了整块视口。面本身不吃指针，只有卡片吃（见下），
+       否则九个位一叠，底下的页面就再也点不动了 */
+    pointer-events: none;
+  }
+
+  [data-scope='notification'][data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 空摞直接撤掉：九个位同时挂九张全屏定位面，白白多九个合成层 */
+  [data-scope='notification'][data-part='group'][data-empty] {
+    display: none;
+  }
+
+  /* 块轴落位：^= 一次吃掉某一行的三个位（top / top-start / top-end） */
+  [data-scope='notification'][data-part='group'][data-placement^='top'] {
+    justify-content: flex-start;
+  }
+
+  [data-scope='notification'][data-part='group'][data-placement^='middle'] {
+    justify-content: center;
+  }
+
+  /* 行内轴落位：不带后缀的 top / middle / bottom 用基线的居中 */
+  [data-scope='notification'][data-part='group'][data-placement$='-start'] {
+    align-items: flex-start;
+  }
+
+  [data-scope='notification'][data-part='group'][data-placement$='-end'] {
+    align-items: flex-end;
+  }
+
+  /*
+   * 一张通知卡：左列一枚类型字形，右列「标题 + 说明 + 操作」竖着排，叉钉在右上角。
+   * 用网格而不是竖排 flex：叉要脱离文档流钉到角上，正文要在字形右边成一列——
+   * 竖排 flex 里这两件事都做不到（叉会变成第三行）。
+   * 底与描边一律中性，语气只由左列那枚字形承载：整片兑色是轻提示那条的做法，
+   * 一张有标题有正文的卡片全片染色会把两层文字都压在同一片语气色上。
+   */
+  [data-scope='notification'][data-part='item'] {
+    /* 叉与操作钮的兜底字形按控件指示符那一档走；左列那枚类型字形另有自己的尺寸 */
+    --xh-icon-size: var(--xh-notification-icon-size, var(--xh-control-indicator-size));
+
+    position: relative;
+    display: grid;
+    /* 左列宽度由字形自己决定，作者不放指示符时它就是 0，正文自然贴到左内衬 */
+    grid-template-columns: auto 1fr;
+    align-items: start;
+    column-gap: var(--xh-notification-gap, var(--xh-space-3));
+    row-gap: var(--xh-notification-row-gap, var(--xh-space-2));
+    inline-size: var(--xh-notification-w, var(--xh-overlay-max-w-lg));
+    /* 摞是整面视口宽的定位面且带内边距，取 100% 就等于自动让出两侧留白，
+       窄屏上不必再算一遍 viewport 减法 */
+    max-inline-size: 100%;
+    padding-block: var(--xh-notification-py, var(--xh-space-4));
+    padding-inline: var(--xh-notification-px, var(--xh-space-4));
+    border: var(--xh-stroke-thin) solid var(--xh-notification-border, var(--xh-border-default));
+    border-radius: var(--xh-notification-radius, var(--xh-shape-surface));
+    background: var(--xh-notification-bg, var(--xh-bg-surface-raised));
+    color: var(--xh-notification-fg, var(--xh-fg-default));
+    box-shadow: var(--xh-notification-shadow, var(--xh-elevation-sheet));
+    font-size: var(--xh-notification-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-notification-leading, var(--xh-text-body-leading));
+    /* 摞的定位面整面铺开且不吃指针，卡片必须自己吃回来：
+       悬停按住计时、按钮可点、焦点进出，全指着这一条 */
+    pointer-events: auto;
+  }
+
+  /* 除指示符外一律落第二列：作者往卡片里塞的任何东西都跟着正文走 */
+  [data-scope='notification'][data-part='item'] > *:not([data-part='item-indicator']) {
+    grid-column: 2;
+  }
+
+  /* 退场窗口走完连接层给的是 hidden 属性，而上面声明了 display——
+     漏掉这条，已经"卸载"的通知会一直杵在屏幕上，且再也没人来收 */
+  [data-scope='notification'][data-part='item'][hidden] {
+    display: none;
+  }
+
+  /* 生命周期只有三段，unmounted 那段由上面的 [hidden] 收走，这里只管前两段 */
+  [data-scope='notification'][data-part='item'][data-state='visible'] {
+    animation: xh-notification-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
+  }
+
+  /* forwards 不能省：退场窗口（removeDelay 默认 200ms）比退场动画长，
+     不定住末帧的话动画跑完会弹回全不透明，卡片在被收起前先闪一下 */
+  [data-scope='notification'][data-part='item'][data-state='dismissing'] {
+    animation: xh-notification-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 独占第一列第一行，并与标题首行顶对齐：盒高取一行标题的行高，
+     字形在盒里居中，标题字号改了也不会错位 */
+  [data-scope='notification'][data-part='item-indicator'] {
+    --xh-icon-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+
+    grid-column: 1;
+    grid-row: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: calc(var(--xh-notification-title-font-size, var(--xh-text-label-size)) * var(--xh-leading-tight));
+    inline-size: var(--xh-notification-indicator-size, var(--xh-glyph-size-md));
+    color: var(--xh-notification-indicator-fg, var(--xh-_tone-fg));
+  }
+
+  [data-scope='notification'][data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 作者没往指示符里写内容就由皮肤画兜底字形，按语气各画一枚；
+     塞了自己的图形这几条即不命中 */
+  [data-scope='notification'][data-part='item-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));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    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='notification'][data-part='item'][data-type='success'] [data-part='item-indicator']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-check);
+    mask-image: var(--xh-glyph-mark-check);
+  }
+
+  [data-scope='notification'][data-part='item'][data-type='warning'] [data-part='item-indicator']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-warning);
+    mask-image: var(--xh-glyph-mark-warning);
+  }
+
+  [data-scope='notification'][data-part='item'][data-type='error'] [data-part='item-indicator']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-close);
+    mask-image: var(--xh-glyph-mark-close);
+  }
+
+  /* loading 说的是「事情还没完」，不是好消息也不是坏消息：走中性前景档而不是语气色 */
+  [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator'] {
+    color: var(--xh-notification-indicator-fg, var(--xh-fg-muted));
+  }
+
+  [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+    -webkit-mask-image: var(--xh-glyph-mark-rotate-right);
+    mask-image: var(--xh-glyph-mark-rotate-right);
+    animation: xh-notification-spin var(--xh-spin-duration) linear infinite;
+  }
+
+  /* 减少动效：转圈停下，静止的箭头仍然读得出「还没好」；
+     "在等什么"由卡片上的 role=status 与可见文案继续承担。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='notification'][data-part='item'][data-type='loading'] [data-part='item-indicator']:empty::before {
+    animation: none;
+  }
+
+  [data-scope='notification'][data-part='item-title'] {
+    /* 作者可能把它写成 h2/p，外边距得先归零，否则卡片内的行距对不上 */
+    margin: 0;
+    color: var(--xh-notification-title-fg, var(--xh-fg-default));
+    font-size: var(--xh-notification-title-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-notification-title-font-weight, var(--xh-font-weight-semibold));
+    line-height: var(--xh-notification-title-leading, var(--xh-leading-tight));
+  }
+
+  /* 叉钉在右上角，标题得给它让位；说明与操作在第二行往下，不受影响 */
+  [data-scope='notification'][data-part='item']:has([data-part='item-close-trigger']) [data-part='item-title'] {
+    padding-inline-end: calc(var(--xh-notification-close-size, var(--xh-control-h-sm)) + var(--xh-space-2));
+  }
+
+  [data-scope='notification'][data-part='item-description'] {
+    margin: 0;
+    color: var(--xh-notification-description-fg, var(--xh-fg-muted));
+    font-size: var(--xh-notification-description-font-size, var(--xh-text-secondary-size));
+  }
+
+  /* 没给文案的那一个仍然要留在 DOM 里（aria-labelledby / aria-describedby 指着它），
+     但空盒子会照吃一份 gap，卡片看着就多出一截莫名的留白 */
+  [data-scope='notification'][data-part='item-title']:empty,
+  [data-scope='notification'][data-part='item-description']:empty {
+    display: none;
+  }
+
+  [data-scope='notification'][data-part='item-title'][hidden],
+  [data-scope='notification'][data-part='item-description'][hidden] {
+    display: none;
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger'] {
+    /* 网格列默认拉满，按钮要贴着起始侧收成自己的宽度 */
+    justify-self: start;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-notification-action-h, var(--xh-control-h-sm));
+    padding-inline: var(--xh-notification-action-px, var(--xh-control-px-sm));
+    border: var(--xh-stroke-thin) solid var(--xh-notification-action-border, var(--xh-border-default));
+    border-radius: var(--xh-notification-action-radius, var(--xh-shape-control));
+    background: var(--xh-notification-action-bg, var(--xh-bg-subtle));
+    color: var(--xh-notification-action-fg, var(--xh-fg-default));
+    /* 按钮不继承字族字号，不接回来的话卡片里会突然冒出一段系统 UI 字体 */
+    font: inherit;
+    font-weight: var(--xh-notification-action-font-weight, var(--xh-font-weight-medium));
+    line-height: var(--xh-leading-none);
+    cursor: pointer;
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger']:hover:not(:disabled) {
+    background: var(--xh-notification-action-bg-hover, var(--xh-bg-subtle-hover));
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger']:active:not(:disabled) {
+    background: var(--xh-notification-action-bg-active, var(--xh-bg-subtle-active));
+  }
+
+  [data-scope='notification'][data-part='item-action-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 钉在右上角的内衬处，不参与网格排布——留在流里它会变成正文下面的第三行 */
+  [data-scope='notification'][data-part='item-close-trigger'] {
+    position: absolute;
+    inset-block-start: var(--xh-notification-close-inset, var(--xh-space-3));
+    inset-inline-end: var(--xh-notification-close-inset, var(--xh-space-3));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-notification-close-size, var(--xh-control-h-sm));
+    inline-size: var(--xh-notification-close-size, var(--xh-control-h-sm));
+    border: 0;
+    border-radius: var(--xh-notification-close-radius, var(--xh-shape-control));
+    background: transparent;
+    color: var(--xh-notification-close-fg, var(--xh-fg-muted));
+    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，这条是它真正收起的那一半：
+     上面声明了 display，不补回来就会留下一个按不动的叉，比压根没有叉更让人困惑 */
+  [data-scope='notification'][data-part='item-close-trigger'][hidden] {
+    display: none;
+  }
+
+  [data-scope='notification'][data-part='item-close-trigger']:hover:not(:disabled) {
+    background: var(--xh-notification-close-bg-hover, var(--xh-bg-subtle-hover));
+    color: var(--xh-notification-close-fg-hover, var(--xh-fg-default));
+  }
+
+  [data-scope='notification'][data-part='item-close-trigger']:active {
+    background: var(--xh-notification-close-bg-active, var(--xh-bg-subtle-active));
+    scale: var(--xh-motion-scale-press);
+  }
+
+  /* 单体控件用原生 disabled。常规路径下它与 hidden 同时出现看不见，
+     但作者若在覆盖层把收起改了回来，至少还能看出这颗叉是按不动的 */
+  [data-scope='notification'][data-part='item-close-trigger']:disabled {
+    color: var(--xh-fg-disabled);
+    cursor: not-allowed;
+  }
+
+  [data-scope='notification'][data-part='item-close-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
+  [data-scope='notification'][data-part='item-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/number-animation.css

@@ -24,14 +24,14 @@
 
   /* —— 尺寸 —— */
   [data-scope='number-animation'][data-part='root'][data-size='sm'] {
-    --xh-_number-animation-size: var(--xh-font-size-lg);
+    --xh-_number-animation-size: var(--xh-control-font-lg);
   }
 
   [data-scope='number-animation'][data-part='root'][data-size='md'] {
-    --xh-_number-animation-size: var(--xh-font-size-2xl);
+    --xh-_number-animation-size: var(--xh-text-heading-2-size);
   }
 
   [data-scope='number-animation'][data-part='root'][data-size='lg'] {
-    --xh-_number-animation-size: var(--xh-font-size-3xl);
+    --xh-_number-animation-size: var(--xh-text-heading-1-size);
   }
 }