bim_xg/bim_engine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(theme): 使用通用 floating 变量替代 glassPill overrides

Browse Source 
- 新增 ThemeConfig 浮动组件层变量 (floatingBg, floatingBtnBg 等)
- 移除 overrides.glassPill，改用主层级通用变量
- 优化深色模式配色增强容器与按钮区分度
- CSS 变量名统一为 --bim-floating-*

BREAKING CHANGE: glassPill overrides 已移除，使用 floating* 变量替代
This commit is contained in:
yuding
2026-01-21 16:46:14 +08:00
parent 19f7e3ffbc
commit 99aece7b89
4 changed files with 79 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/button-group/index.css
View File

@@ -312,12 +312,12 @@
/* 使用主题系统 CSS 变量，支持深色/浅色主题切换 */
.bim-btn-group-root.type-glass-pill .bim-btn-group-section {
background: var(--bim-glass-pill-section-bg);
background: var(--bim-floating-bg);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--bim-glass-pill-section-border);
border: 1px solid var(--bim-floating-border);
border-radius: 9999px;
box-shadow: var(--bim-glass-pill-section-shadow);
box-shadow: var(--bim-floating-shadow);
padding: 8px;
gap: 10px;
}
@@ -327,18 +327,18 @@
height: 48px;
min-width: 48px;
border-radius: 9999px;
background: var(--bim-glass-pill-btn-bg);
border: 1px solid var(--bim-glass-pill-btn-border);
box-shadow: var(--bim-glass-pill-btn-shadow);
background: var(--bim-floating-btn-bg);
border: 1px solid var(--bim-floating-btn-border);
box-shadow: var(--bim-floating-btn-shadow);
color: var(--bim-text-primary);
padding: 0;
transition: all 200ms ease-out;
}
.bim-btn-group-root.type-glass-pill .opt-btn:hover {
background: var(--bim-glass-pill-btn-bg-hover);
background: var(--bim-floating-btn-bg-hover);
transform: scale(1.05);
box-shadow: var(--bim-glass-pill-btn-shadow-hover);
box-shadow: var(--bim-floating-btn-shadow-hover);
}
.bim-btn-group-root.type-glass-pill .opt-btn:active {
@@ -375,7 +375,7 @@
.bim-btn-group-root.type-glass-pill .opt-btn-icon {
width: 18px;
height: 18px;
color: var(--bim-glass-pill-icon-color);
color: var(--bim-floating-icon-color);
transition: color 200ms ease-out;
}
@@ -385,7 +385,7 @@
}
.bim-btn-group-root.type-glass-pill .opt-btn:hover .opt-btn-icon {
color: var(--bim-glass-pill-icon-color-hover);
color: var(--bim-floating-icon-color-hover);
}
.bim-btn-group-root.type-glass-pill .opt-btn-label {

23
src/components/button-group/index.ts
View File

@@ -284,19 +284,16 @@ export class BimButtonGroup implements IBimComponent {
style.setProperty('--bim-shadow-lg', theme.shadowLg);
style.setProperty('--bim-shadow-glow', theme.shadowGlow);
const gp = theme.overrides?.glassPill;
if (gp) {
if (gp.sectionBg) style.setProperty('--bim-glass-pill-section-bg', gp.sectionBg);
if (gp.sectionBorder) style.setProperty('--bim-glass-pill-section-border', gp.sectionBorder);
if (gp.sectionShadow) style.setProperty('--bim-glass-pill-section-shadow', gp.sectionShadow);
if (gp.btnBg) style.setProperty('--bim-glass-pill-btn-bg', gp.btnBg);
if (gp.btnBorder) style.setProperty('--bim-glass-pill-btn-border', gp.btnBorder);
if (gp.btnShadow) style.setProperty('--bim-glass-pill-btn-shadow', gp.btnShadow);
if (gp.btnBgHover) style.setProperty('--bim-glass-pill-btn-bg-hover', gp.btnBgHover);
if (gp.btnShadowHover) style.setProperty('--bim-glass-pill-btn-shadow-hover', gp.btnShadowHover);
if (gp.iconColor) style.setProperty('--bim-glass-pill-icon-color', gp.iconColor);
if (gp.iconColorHover) style.setProperty('--bim-glass-pill-icon-color-hover', gp.iconColorHover);
}
style.setProperty('--bim-floating-bg', theme.floatingBg);
style.setProperty('--bim-floating-border', theme.floatingBorder);
style.setProperty('--bim-floating-shadow', theme.floatingShadow);
style.setProperty('--bim-floating-btn-bg', theme.floatingBtnBg);
style.setProperty('--bim-floating-btn-border', theme.floatingBtnBorder);
style.setProperty('--bim-floating-btn-shadow', theme.floatingBtnShadow);
style.setProperty('--bim-floating-btn-bg-hover', theme.floatingBtnBgHover);
style.setProperty('--bim-floating-btn-shadow-hover', theme.floatingBtnShadowHover);
style.setProperty('--bim-floating-icon-color', theme.floatingIconColor);
style.setProperty('--bim-floating-icon-color-hover', theme.floatingIconColorHover);
this.syncDropdownCssVars(theme);
}