/** * Button 组件样式 * 引用全局 Design Token(addGlobalClass:true) * * 2026-09-22 修复: * 1) 触摸目标:md 只有 80rpx(40px)、sm 只有 56rpx(28px),低于 44px 下限; * text 变体更是 min-height:auto,几乎点不中。现统一以 --tap-min 兜底。 * 2) 对比度:主按钮背景原为 --color-primary(#E96B6B),白字仅 3.10:1。 * 改用 --color-primary-solid(#C24C50) = 4.73:1,视觉上仍是暖红。 * secondary/text 的红色文字同理从 3.10 提到 --color-primary-strong 的 5.33。 * 3) 危险按钮 --color-danger(#D94A4A) 白字 4.18:1 不达标,改用 -strong 变体。 * 4) 按压反馈统一走 --press-scale / --press-opacity,替代硬编码 0.98 / 0.85。 */ .ui-btn { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; border-radius:var(--radius-full); font-family:var(--font-family-cn); font-weight:var(--font-weight-semibold); text-align:center; transition:transform var(--motion-fast) var(--ease-spring), opacity var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); user-select:none; line-height:1.2; white-space:nowrap; } /* 尺寸:全部以 44×44px 为热区下限 */ .ui-btn--sm { padding:14rpx 28rpx; font-size:var(--font-size-sm); min-height:var(--tap-min); } .ui-btn--md { padding:20rpx 36rpx; font-size:var(--font-size-base); min-height:var(--tap-min); } .ui-btn--lg { padding:26rpx 48rpx; font-size:var(--font-size-lg); min-height:var(--tap-comfortable); } /* 撑满 */ .ui-btn--block { display:flex; width:100%; } /* 变体 */ .ui-btn--primary { background:var(--color-primary-solid); color:var(--color-text-inverse); } .ui-btn--secondary { background:var(--color-bg-card); color:var(--color-primary-strong); border:var(--border-width) solid var(--color-primary-strong); } .ui-btn--ghost { background:transparent; color:var(--color-text-primary); border:var(--border-width) solid var(--color-border-strong); } .ui-btn--danger { background:var(--color-danger-strong); color:var(--color-text-inverse); } .ui-btn--text { background:transparent; color:var(--color-primary-strong); padding-left:var(--spacing-2); padding-right:var(--spacing-2); /* 视觉是纯文字,但热区仍需 44px:多出的部分由 align-items:center 居中留白 */ min-height:var(--tap-min); } /* 状态 */ .ui-btn--disabled, .ui-btn--loading { opacity:0.55; } .ui-btn--disabled.ui-btn--primary, .ui-btn--disabled.ui-btn--danger { background:var(--color-text-disabled); } .ui-btn--disabled.ui-btn--secondary, .ui-btn--disabled.ui-btn--ghost { color:var(--color-text-disabled); border-color:var(--color-text-disabled); } /* 按压反馈(hover-class 与 CSS :active 双保险) */ .ui-btn--hover, .ui-btn:active { opacity:var(--press-opacity); transform:scale(var(--press-scale)); } /* Loading spinner */ .ui-btn__spinner { width:28rpx; height:28rpx; margin-right:12rpx; display:flex; align-items:center; justify-content:center; } .ui-btn__spinner-dot { width:18rpx; height:18rpx; border-radius:50%; border:3rpx solid currentColor; border-top-color:transparent; animation:ui-btn-spin 0.7s linear infinite; } @keyframes ui-btn-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }