@xihan-ui/styles 3.1.0 → 4.0.0

package/dist/css/button.css

@@ -0,0 +1,216 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 独立 Button 皮肤与 full bundle 都从同一份 Family Recipe 取得布局、状态和命中区。 */
+@import '../family/action-control.css';
+@import '../family/loading-ring.css';
+@import '../family/motion.css';
+
+@layer xihan.components {
+  .xh-scope-button {
+    --xh-button-skin: 1;
+  }
+
+  /* 四种形态的底 / 前景 / 描边由家族形态矩阵按 data-xh-action-variant 给出（缺省 solid 由连接层显式投影，
+     只有 Button 缺省品牌实心）；这里只把公开颜色槽桥接到矩阵之前：使用者槽 → 形态矩阵 → 家族缺省，
+     再映射几何、海拔与顶光。状态选择器、命中区与尺寸 profile 不在这里复制。 */
+  .xh-scope-button[data-part='root'] {
+    --xh-action-bg-rest: var(--xh-button-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-button-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-button-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-bg-focus-visible: var(--xh-button-bg, var(--xh-_action-variant-bg-focus-visible));
+    --xh-action-bg-loading: var(--xh-button-bg, var(--xh-_action-variant-bg-loading));
+    --xh-action-fg-rest: var(--xh-button-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-button-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-button-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-fg-focus-visible: var(--xh-button-fg, var(--xh-_action-variant-fg-focus-visible));
+    --xh-action-fg-loading: var(--xh-button-fg, var(--xh-_action-variant-fg-loading));
+    --xh-action-highlight-rest: transparent;
+    --xh-action-highlight-pressed: transparent;
+    /* 海拔只有 solid 一档有：其余形态无影，私有槽在下面的 solid 块里才被赋值 */
+    --xh-_button-shadow-rest: var(--xh-button-shadow, none);
+    --xh-_button-shadow-hover: var(--xh-button-shadow-hover, none);
+    --xh-_button-shadow-pressed: none;
+    --xh-action-shadow-rest: var(--xh-_button-shadow-rest);
+    --xh-action-shadow-hover: var(--xh-_button-shadow-hover);
+    --xh-action-shadow-pressed: var(--xh-_button-shadow-pressed);
+    --xh-action-radius: var(--xh-button-radius, var(--xh-_button-radius));
+    /* 成组时几何从 ButtonGroup 的私有槽取：高度、内距、间距与字号沿继承流下来 */
+    --xh-action-visual-size: var(--xh-button-h, var(--xh-_button-group-h, var(--xh-_action-profile-visual-size)));
+    --xh-action-padding-inline: var(--xh-button-px, var(--xh-_button-group-px, var(--xh-_action-profile-padding-inline)));
+    --xh-action-gap: var(--xh-button-gap, var(--xh-_button-group-gap, var(--xh-_action-profile-gap)));
+    --xh-action-font-size: var(--xh-button-font-size, var(--xh-_button-group-font-size, var(--xh-_action-profile-font-size)));
+    /* 圆角只有一个身份：普通 control 的 4px，与 toggle / button-group 一致，按钮没有 shape 轴；
+       成组时由按钮组接管相接侧，要换档写 --xh-button-radius */
+    --xh-_button-radius: var(--xh-_button-group-radius, var(--xh-shape-control));
+    --xh-icon-size: var(--xh-button-icon-size, var(--xh-_action-profile-glyph-size));
+
+    font-weight: var(--xh-button-font-weight, var(--xh-text-label-weight));
+  }
+
+  /* Button 是登记在册的 raised 消费者：solid 一档悬停抬到 raised。raised 缺省 none，实心钮是平的——
+     不画顶光、不落软影，层级只靠面色（主题给 raised 一层影，悬停才抬起来）。
+     成组时段与段共边焊成一条，悬停不抬起：投影会压到左右两段的面上，ButtonGroup 用 --xh-_button-group-shadow-hover 关掉 */
+  .xh-scope-button[data-part='root'][data-variant='solid'] {
+    --xh-_button-shadow-hover: var(--xh-_button-group-shadow-hover, var(--xh-elevation-raised));
+  }
+
+  /* 实心面用对比前景作内环，再加品牌外环；不覆盖表面 box-shadow。 */
+  .xh-scope-button[data-part='root'][data-xh-action-variant='solid']:focus-visible {
+    --xh-action-ring-color-focus-visible: currentColor;
+  }
+
+  .xh-scope-button[data-part='root'][data-xh-action-variant='solid']:focus-visible::before {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * (var(--xh-ring-width) + var(--xh-stroke-thin)));
+    border: var(--xh-ring-width) solid var(--xh-ring-focus);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  /* liquid 档的交互光：实心钮进入悬停时，一道光沿 1px 描边环扫过一次。环与焦点环同法，用透明描边画，
+     遮罩只留描边那一圈。光只走描边、不进面——
+     面内叠一层白光，品牌实心面上白字的对比就从 5.08:1 往下掉。光用面上前景色（currentColor），
+     各语气自动跟随；只在细指针可悬停的设备上播，粗指针下 ::after 另有用处（44px 热区）。
+     减弱动效下时长归 1ms，一闪即过、看不见；强制色下系统配色，不画装饰光 */
+  @media (hover: hover) and (pointer: fine) and (forced-colors: none) {
+    :where([data-material='liquid'])
+      .xh-scope-button[data-part='root'][data-xh-action-variant='solid']:not([data-disabled]):not([data-loading]):hover::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--xh-stroke-thin));
+      border: var(--xh-stroke-thin) solid transparent;
+      border-radius: inherit;
+      background: linear-gradient(100deg, transparent 42%, currentColor 50%, transparent 58%) border-box no-repeat;
+      background-size: 300% 100%;
+      background-position: 0% 0;
+      pointer-events: none;
+      mask:
+        linear-gradient(currentColor 0 0) padding-box exclude,
+        linear-gradient(currentColor 0 0);
+      animation: xh-glint var(--xh-button-glint-duration, var(--xh-motion-duration-glint)) var(--xh-motion-ease-enter) both;
+    }
+
+    /* 从右往左书写时光从行首（右缘）扫起 */
+    :where([data-material='liquid'])
+      .xh-scope-button[data-part='root'][data-xh-action-variant='solid']:not([data-disabled]):not([data-loading]):dir(rtl):hover::after {
+      animation-direction: reverse;
+    }
+  }
+
+  /* icon profile 已经给出正方视觉盒；Button 的公开 px 槽不能把它重新撑开。 */
+  .xh-scope-button[data-part='root'][data-icon-only] {
+    --xh-action-padding-inline: 0;
+  }
+
+  .xh-scope-button[data-part='root'][data-full-width] {
+    inline-size: 100%;
+  }
+
+  .xh-scope-button[data-part='label'],
+  .xh-scope-button[data-part='prefix'],
+  .xh-scope-button[data-part='suffix'],
+  .xh-scope-button[data-part='indicator'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: inherit;
+  }
+
+  .xh-scope-button[data-part='label'] {
+    min-inline-size: 0;
+  }
+
+  .xh-scope-button[data-part='prefix'],
+  .xh-scope-button[data-part='suffix'],
+  .xh-scope-button[data-part='indicator'] {
+    flex: none;
+    line-height: 0;
+  }
+
+  .xh-scope-button[data-part='prefix'] > svg,
+  .xh-scope-button[data-part='suffix'] > svg,
+  .xh-scope-button[data-part='indicator'],
+  .xh-scope-button[data-part='indicator'] > svg {
+    inline-size: var(--xh-icon-size);
+    block-size: var(--xh-icon-size);
+  }
+
+  /* 在途指示压在钮上、不进排布，钮宽不变。部件空着时环由加载环配方画在 ::before 上（连接层投影
+     data-xh-loading-ring="overlay"），进入在途一个 micro 之后才淡入，退出不等 */
+  .xh-scope-button[data-part='indicator'] {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    pointer-events: none;
+  }
+
+  /* 作者往部件里放了自己的图形：环让位，作者图形按同一节拍淡入淡出并转 */
+  .xh-scope-button[data-part='indicator']:not(:empty)::before {
+    content: none;
+  }
+
+  /* 作者的图形是任意节点，规则主体没有可认的特征：加载与否写在 indicator 自己的私有槽上，
+     图形只读槽。翻转 data-loading 时失效的只有 indicator 本身，不会让全页同名属性的变化整棵子树重算 */
+  .xh-scope-button[data-part='indicator'] > * {
+    opacity: var(--xh-_button-indicator-opacity, 0);
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition-delay: calc(var(--xh-motion-duration-micro) * var(--xh-_button-indicator-delay, 0));
+    animation: xh-spin var(--xh-button-spin-duration, var(--xh-motion-loop-spin)) var(--xh-motion-ease-loop) infinite paused;
+    animation-play-state: var(--xh-_button-indicator-play, paused);
+  }
+
+  .xh-scope-button[data-part='root'][data-loading] > .xh-scope-button[data-part='indicator'] {
+    --xh-_button-indicator-opacity: 1;
+    --xh-_button-indicator-delay: 1;
+    --xh-_button-indicator-play: running;
+  }
+
+  /* 钮里原有的内容与环交叉：进入在途同样等一个 micro 才淡出、留位不塌，退出不等 */
+  .xh-scope-button:is([data-part='label'], [data-part='prefix'], [data-part='suffix']) {
+    transition: opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-button[data-part='root'][data-loading]:has(> .xh-scope-button[data-part='indicator'])
+    > .xh-scope-button:is([data-part='label'], [data-part='prefix'], [data-part='suffix']) {
+    opacity: 0;
+    transition-delay: var(--xh-motion-duration-micro);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-button[data-part='indicator'] > * {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-button[data-part='indicator'] > * {
+    animation: none;
+  }
+
+  .xh-scope-button[data-part='root'][hidden],
+  .xh-scope-button[data-part='label'][hidden],
+  .xh-scope-button[data-part='prefix'][hidden],
+  .xh-scope-button[data-part='suffix'][hidden],
+  .xh-scope-button[data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .xh-scope-button[data-part='root'][data-xh-action-variant='solid']:focus-visible::before {
+      border-color: Highlight;
+    }
+  }
+
+  @media print {
+    .xh-scope-button[data-part='root'] {
+      box-shadow: none;
+    }
+
+    .xh-scope-button[data-part='indicator'] > * {
+      animation: none;
+    }
+  }
+}