fix(Fluent): 主题 .btn 规则覆盖组件库 .btn-xs 尺寸变量导致 TableCellButton 变大

[h2ls]

问题描述

使用 Fluent 主题（BootstrapBlazor.Theme.Fluent）时，表格行内按钮 TableCellButton（默认 btn-xs）显示为正常按钮大小，而非行内小按钮。

根因分析

主题 fluent.css 中的 .btn 规则设置了：

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: .875rem;
    --bs-btn-line-height: 20px;
    --bs-btn-padding-y: 5px;
}

组件库的 .btn-xs, .btn-group-xs > .btn 规则（Button.razor.scss）与 .btn 同为单类选择器（优先级相同 0-1-0），但主题 CSS 后加载，于是 --bs-btn-padding-y / --bs-btn-font-size / --bs-btn-line-height 全部被覆盖成正常按钮尺寸。

修复方案

在 fluent.css（及 fluent.min.css）的 .btn 规则之后新增 .btn-xs 规则，恢复组件库默认值（$bs-btn-xs-* 与 Bootstrap 默认 line-height 1.5）：

.btn-xs,
.btn-group-xs > .btn {
    --bs-btn-padding-x: .3125rem;
    --bs-btn-padding-y: .0625rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-line-height: 1.5;
}

该规则已在应用层 site.css（最后加载）验证通过，xs 按钮恢复小尺寸。

修复分支：fix/fluent-theme-btn-xs

[bb-auto]

@h2ls Thank you for filing this issue. In order for us to investigate this issue, please provide a minimalistic repro project that illustrates the problem.