@zhang_jifan/fanui 2.1.0

package/src/components/_button.scss

@@ -0,0 +1,351 @@
+// =============================================================================
+// fanUI · 按钮 Button
+// -----------------------------------------------------------------------------
+// 结构（BEM）：
+//   .fanui-btn                       基础类
+//   .fanui-btn__icon                 图标槽
+//   .fanui-btn--<variant>            实心变体：primary/accent/success/warning/danger/info
+//   .fanui-btn--<size>               xs/sm/md/lg/xl
+//   .fanui-btn--outline              描边风格（配合变体色）
+//   .fanui-btn--ghost / --text / --link
+//   .fanui-btn--block / --square / --pill / --loading
+// 状态：.is-loading / .is-active / :disabled / .is-disabled
+// 组合：.fanui-btn-group
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+.fanui-btn {
+  // ---- 可变令牌（默认值 = primary 实心）----
+  --fanui-btn-bg: #{fn.fanui-var("primary")};
+  --fanui-btn-fg: #{fn.fanui-var("primary-fg", #fff)};
+  --fanui-btn-border: #{fn.fanui-var("primary")};
+  --fanui-btn-hover-bg: #{fn.fanui-var("primary-hover")};
+  --fanui-btn-hover-fg: #{fn.fanui-var("primary-fg", #fff)};
+  --fanui-btn-hover-border: #{fn.fanui-var("primary-hover")};
+  --fanui-btn-active-bg: #{fn.fanui-var("primary-active")};
+  --fanui-btn-active-fg: #{fn.fanui-var("primary-fg", #fff)};
+  --fanui-btn-active-border: #{fn.fanui-var("primary-active")};
+  --fanui-btn-ring: #{fn.fanui-var("primary-ring")};
+  --fanui-btn-height: #{fn.fanui-var("control-h", v.$fanui-control-height-base)};
+  --fanui-btn-padding-x: #{fn.fanui-var("control-px", v.$fanui-control-padding-x)};
+  --fanui-btn-font-size: #{fn.fanui-var("font-size-base")};
+  --fanui-btn-radius: #{fn.fanui-var("radius-base")};
+  --fanui-btn-gap: 6px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--fanui-btn-gap);
+  min-height: var(--fanui-btn-height);
+  padding: 0 var(--fanui-btn-padding-x);
+  font-family: inherit;
+  font-size: var(--fanui-btn-font-size);
+  font-weight: map.get(v.$fanui-font-weights, "medium");
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  text-decoration: none;
+  text-align: center;
+  color: var(--fanui-btn-fg);
+  background-color: var(--fanui-btn-bg);
+  border: 1px solid var(--fanui-btn-border);
+  border-radius: var(--fanui-btn-radius);
+  cursor: pointer;
+  user-select: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  @include mx.fanui-transition((color, background-color, border-color, box-shadow, transform, opacity), v.$fanui-duration-fast);
+  @include mx.fanui-appearance-none();
+
+  // ---- hover ----
+  &:hover:not(:disabled):not(.is-disabled) {
+    color: var(--fanui-btn-hover-fg);
+    background-color: var(--fanui-btn-hover-bg);
+    border-color: var(--fanui-btn-hover-border);
+    text-decoration: none;
+  }
+
+  // ---- active ----
+  &:active:not(:disabled):not(.is-disabled),
+  &.is-active {
+    color: var(--fanui-btn-active-fg);
+    background-color: var(--fanui-btn-active-bg);
+    border-color: var(--fanui-btn-active-border);
+  }
+
+  // ---- focus ----
+  &:focus-visible {
+    outline: 0;
+    box-shadow: 0 0 0 var(--fanui-btn-ring);
+  }
+
+  // ---- 图标 ----
+  > svg,
+  .fanui-btn__icon {
+    flex: 0 0 auto;
+    width: 1em;
+    height: 1em;
+    font-size: 1.15em;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  @include mx.fanui-disabled();
+
+  &[aria-busy="true"] { pointer-events: none; }
+}
+
+// -----------------------------------------------------------------------------
+// 1. 实心变体
+// -----------------------------------------------------------------------------
+
+@each $name, $color in v.$fanui-theme-colors {
+  .fanui-btn--#{$name} {
+    --fanui-btn-bg: #{fn.fanui-var("#{$name}", $color)};
+    --fanui-btn-fg: #{fn.fanui-var("#{$name}-fg", fn.fanui-contrast($color))};
+    --fanui-btn-border: #{fn.fanui-var("#{$name}", $color)};
+    --fanui-btn-hover-bg: #{fn.fanui-var("#{$name}-hover", fn.fanui-shade($color, 10%))};
+    --fanui-btn-hover-fg: #{fn.fanui-var("#{$name}-fg", fn.fanui-contrast($color))};
+    --fanui-btn-hover-border: #{fn.fanui-var("#{$name}-hover", fn.fanui-shade($color, 10%))};
+    --fanui-btn-active-bg: #{fn.fanui-var("#{$name}-active", fn.fanui-shade($color, 18%))};
+    --fanui-btn-active-fg: #{fn.fanui-var("#{$name}-fg", fn.fanui-contrast($color))};
+    --fanui-btn-active-border: #{fn.fanui-var("#{$name}-active", fn.fanui-shade($color, 18%))};
+    --fanui-btn-ring: #{fn.fanui-var("#{$name}-ring", fn.fanui-alpha($color, v.$fanui-focus-ring-alpha))};
+  }
+}
+
+// 中性 / 默认（次要按钮：浅灰底）
+.fanui-btn--neutral,
+.fanui-btn--default {
+  --fanui-btn-bg: #{fn.fanui-var("color-surface")};
+  --fanui-btn-fg: #{fn.fanui-var("color-text")};
+  --fanui-btn-border: #{fn.fanui-var("color-border-strong")};
+  --fanui-btn-hover-bg: #{fn.fanui-var("color-hover")};
+  --fanui-btn-hover-fg: #{fn.fanui-var("color-text-strong")};
+  --fanui-btn-hover-border: #{fn.fanui-var("color-border-strong")};
+  --fanui-btn-active-bg: #{fn.fanui-var("color-active")};
+  --fanui-btn-active-fg: #{fn.fanui-var("color-text-strong")};
+  --fanui-btn-active-border: #{fn.fanui-var("color-border-strong")};
+  --fanui-btn-ring: #{fn.fanui-alpha(v.$fanui-primary, 0.28)};
+}
+
+// 白色（用于深色/彩色背景之上）
+.fanui-btn--white {
+  @include mx.fanui-button-variant(#ffffff, fn.fanui-var("color-text-strong"), #ffffff);
+}
+
+// -----------------------------------------------------------------------------
+// 2. 描边 / 幽灵 / 文字 / 链接
+// -----------------------------------------------------------------------------
+
+@each $name, $color in v.$fanui-theme-colors {
+  .fanui-btn--outline.fanui-btn--#{$name} {
+    --fanui-btn-bg: transparent;
+    --fanui-btn-fg: #{fn.fanui-var("#{$name}", $color)};
+    --fanui-btn-border: #{fn.fanui-var("#{$name}", $color)};
+    --fanui-btn-hover-bg: #{fn.fanui-var("#{$name}", $color)};
+    --fanui-btn-hover-fg: #{fn.fanui-var("#{$name}-fg", fn.fanui-contrast($color))};
+    --fanui-btn-hover-border: #{fn.fanui-var("#{$name}", $color)};
+    --fanui-btn-active-bg: #{fn.fanui-var("#{$name}-active", fn.fanui-shade($color, 18%))};
+    --fanui-btn-active-fg: #{fn.fanui-var("#{$name}-fg", fn.fanui-contrast($color))};
+    --fanui-btn-active-border: #{fn.fanui-var("#{$name}-active", fn.fanui-shade($color, 18%))};
+    --fanui-btn-ring: #{fn.fanui-var("#{$name}-ring", fn.fanui-alpha($color, v.$fanui-focus-ring-alpha))};
+  }
+}
+
+.fanui-btn--ghost,
+.fanui-btn--text {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: #{fn.fanui-var("color-text-muted")};
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: #{fn.fanui-var("color-hover")};
+  --fanui-btn-hover-fg: #{fn.fanui-var("color-text")};
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: #{fn.fanui-var("color-active")};
+  --fanui-btn-active-fg: #{fn.fanui-var("color-text-strong")};
+  --fanui-btn-active-border: transparent;
+  --fanui-btn-ring: #{fn.fanui-var("primary-ring")};
+}
+
+@each $name, $color in v.$fanui-theme-colors {
+  .fanui-btn--ghost.fanui-btn--#{$name},
+  .fanui-btn--text.fanui-btn--#{$name} {
+    --fanui-btn-bg: transparent;
+    --fanui-btn-fg: #{fn.fanui-var("#{$name}", $color)};
+    --fanui-btn-border: transparent;
+    --fanui-btn-hover-bg: #{fn.fanui-var("#{$name}-soft", fn.fanui-alpha($color, 0.10))};
+    --fanui-btn-hover-fg: #{fn.fanui-var("#{$name}-hover", fn.fanui-shade($color, 8%))};
+    --fanui-btn-hover-border: transparent;
+    --fanui-btn-active-bg: #{fn.fanui-alpha($color, 0.18)};
+    --fanui-btn-active-fg: #{fn.fanui-var("#{$name}-active", fn.fanui-shade($color, 16%))};
+    --fanui-btn-active-border: transparent;
+    --fanui-btn-ring: #{fn.fanui-var("#{$name}-ring", fn.fanui-alpha($color, v.$fanui-focus-ring-alpha))};
+  }
+}
+
+.fanui-btn--link {
+  --fanui-btn-bg: transparent;
+  --fanui-btn-fg: #{fn.fanui-var("primary")};
+  --fanui-btn-border: transparent;
+  --fanui-btn-hover-bg: transparent;
+  --fanui-btn-hover-fg: #{fn.fanui-var("primary-hover")};
+  --fanui-btn-hover-border: transparent;
+  --fanui-btn-active-bg: transparent;
+  --fanui-btn-active-fg: #{fn.fanui-var("primary-active")};
+  --fanui-btn-active-border: transparent;
+
+  padding: 0;
+  min-height: auto;
+  text-decoration: none;
+
+  &:hover { text-decoration: underline; }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 尺寸
+// -----------------------------------------------------------------------------
+
+.fanui-btn--xs {
+  @include mx.fanui-button-size(24px, 8px, fn.fanui-var("font-size-xs"), fn.fanui-var("radius-sm"));
+  --fanui-btn-gap: 4px;
+}
+.fanui-btn--sm {
+  @include mx.fanui-button-size(28px, 10px, fn.fanui-var("font-size-sm"));
+  --fanui-btn-gap: 4px;
+}
+.fanui-btn--md {
+  @include mx.fanui-button-size(32px, 12px, fn.fanui-var("font-size-base"));
+}
+.fanui-btn--base, .fanui-btn--lg {
+  @include mx.fanui-button-size(40px, 16px, fn.fanui-var("font-size-md"));
+}
+.fanui-btn--xl {
+  @include mx.fanui-button-size(48px, 22px, fn.fanui-var("font-size-lg"), fn.fanui-var("radius-md"));
+}
+
+// -----------------------------------------------------------------------------
+// 4. 形状 / 布局修饰
+// -----------------------------------------------------------------------------
+
+.fanui-btn--block {
+  display: flex;
+  width: 100%;
+}
+
+.fanui-btn--square {
+  --fanui-btn-padding-x: 0;
+  width: var(--fanui-btn-height);
+  padding: 0;
+  flex: 0 0 auto;
+}
+
+.fanui-btn--circle {
+  --fanui-btn-padding-x: 0;
+  width: var(--fanui-btn-height);
+  padding: 0;
+  border-radius: 9999px;
+  flex: 0 0 auto;
+}
+
+.fanui-btn--pill { --fanui-btn-radius: 9999px; }
+.fanui-btn--sharp { --fanui-btn-radius: 0; }
+
+.fanui-btn--icon-start { flex-direction: row-reverse; }
+.fanui-btn--icon-end   { flex-direction: row; }
+
+// -----------------------------------------------------------------------------
+// 5. 加载态
+// -----------------------------------------------------------------------------
+
+.fanui-btn--loading,
+.fanui-btn.is-loading {
+  pointer-events: none;
+  color: transparent !important;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 1em;
+    height: 1em;
+    margin: -0.5em 0 0 -0.5em;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    color: var(--fanui-btn-fg);
+    animation: fanui-spin 700ms linear infinite;
+  }
+
+  > * { visibility: hidden; }
+}
+
+// -----------------------------------------------------------------------------
+// 6. 按钮组
+// -----------------------------------------------------------------------------
+
+.fanui-btn-group {
+  display: inline-flex;
+  vertical-align: middle;
+  border-radius: fn.fanui-var("radius-base");
+  overflow: hidden;
+
+  > .fanui-btn {
+    border-radius: 0;
+    margin-inline-start: -1px;
+    flex: 1 1 auto;
+  }
+
+  > .fanui-btn:first-child {
+    margin-inline-start: 0;
+    border-start-start-radius: fn.fanui-var("radius-base");
+    border-end-start-radius: fn.fanui-var("radius-base");
+  }
+
+  > .fanui-btn:last-child {
+    border-start-end-radius: fn.fanui-var("radius-base");
+    border-end-end-radius: fn.fanui-var("radius-base");
+  }
+
+  > .fanui-btn:hover,
+  > .fanui-btn:focus-visible,
+  > .fanui-btn.is-active {
+    z-index: 1;
+  }
+
+  &--pill { border-radius: 9999px; }
+
+  &--vertical {
+    flex-direction: column;
+
+    > .fanui-btn {
+      margin-inline-start: 0;
+      margin-top: -1px;
+      width: 100%;
+    }
+
+    > .fanui-btn:first-child {
+      border-radius: fn.fanui-var("radius-base") fn.fanui-var("radius-base") 0 0;
+    }
+
+    > .fanui-btn:last-child {
+      border-radius: 0 0 fn.fanui-var("radius-base") fn.fanui-var("radius-base");
+    }
+  }
+}
+
+// 工具栏（按钮组之间自动留白）
+.fanui-btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+}