refactor(theme): 使用通用 floating 变量替代 glassPill overrides
- 新增 ThemeConfig 浮动组件层变量 (floatingBg, floatingBtnBg 等) - 移除 overrides.glassPill,改用主层级通用变量 - 优化深色模式配色增强容器与按钮区分度 - CSS 变量名统一为 --bim-floating-* BREAKING CHANGE: glassPill overrides 已移除,使用 floating* 变量替代
This commit is contained in:
@@ -312,12 +312,12 @@
|
|||||||
/* 使用主题系统 CSS 变量,支持深色/浅色主题切换 */
|
/* 使用主题系统 CSS 变量,支持深色/浅色主题切换 */
|
||||||
|
|
||||||
.bim-btn-group-root.type-glass-pill .bim-btn-group-section {
|
.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);
|
backdrop-filter: blur(24px);
|
||||||
-webkit-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;
|
border-radius: 9999px;
|
||||||
box-shadow: var(--bim-glass-pill-section-shadow);
|
box-shadow: var(--bim-floating-shadow);
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
@@ -327,18 +327,18 @@
|
|||||||
height: 48px;
|
height: 48px;
|
||||||
min-width: 48px;
|
min-width: 48px;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
background: var(--bim-glass-pill-btn-bg);
|
background: var(--bim-floating-btn-bg);
|
||||||
border: 1px solid var(--bim-glass-pill-btn-border);
|
border: 1px solid var(--bim-floating-btn-border);
|
||||||
box-shadow: var(--bim-glass-pill-btn-shadow);
|
box-shadow: var(--bim-floating-btn-shadow);
|
||||||
color: var(--bim-text-primary);
|
color: var(--bim-text-primary);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: all 200ms ease-out;
|
transition: all 200ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bim-btn-group-root.type-glass-pill .opt-btn:hover {
|
.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);
|
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 {
|
.bim-btn-group-root.type-glass-pill .opt-btn:active {
|
||||||
@@ -375,7 +375,7 @@
|
|||||||
.bim-btn-group-root.type-glass-pill .opt-btn-icon {
|
.bim-btn-group-root.type-glass-pill .opt-btn-icon {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
color: var(--bim-glass-pill-icon-color);
|
color: var(--bim-floating-icon-color);
|
||||||
transition: color 200ms ease-out;
|
transition: color 200ms ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -385,7 +385,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bim-btn-group-root.type-glass-pill .opt-btn:hover .opt-btn-icon {
|
.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 {
|
.bim-btn-group-root.type-glass-pill .opt-btn-label {
|
||||||
|
|||||||
@@ -284,19 +284,16 @@ export class BimButtonGroup implements IBimComponent {
|
|||||||
style.setProperty('--bim-shadow-lg', theme.shadowLg);
|
style.setProperty('--bim-shadow-lg', theme.shadowLg);
|
||||||
style.setProperty('--bim-shadow-glow', theme.shadowGlow);
|
style.setProperty('--bim-shadow-glow', theme.shadowGlow);
|
||||||
|
|
||||||
const gp = theme.overrides?.glassPill;
|
style.setProperty('--bim-floating-bg', theme.floatingBg);
|
||||||
if (gp) {
|
style.setProperty('--bim-floating-border', theme.floatingBorder);
|
||||||
if (gp.sectionBg) style.setProperty('--bim-glass-pill-section-bg', gp.sectionBg);
|
style.setProperty('--bim-floating-shadow', theme.floatingShadow);
|
||||||
if (gp.sectionBorder) style.setProperty('--bim-glass-pill-section-border', gp.sectionBorder);
|
style.setProperty('--bim-floating-btn-bg', theme.floatingBtnBg);
|
||||||
if (gp.sectionShadow) style.setProperty('--bim-glass-pill-section-shadow', gp.sectionShadow);
|
style.setProperty('--bim-floating-btn-border', theme.floatingBtnBorder);
|
||||||
if (gp.btnBg) style.setProperty('--bim-glass-pill-btn-bg', gp.btnBg);
|
style.setProperty('--bim-floating-btn-shadow', theme.floatingBtnShadow);
|
||||||
if (gp.btnBorder) style.setProperty('--bim-glass-pill-btn-border', gp.btnBorder);
|
style.setProperty('--bim-floating-btn-bg-hover', theme.floatingBtnBgHover);
|
||||||
if (gp.btnShadow) style.setProperty('--bim-glass-pill-btn-shadow', gp.btnShadow);
|
style.setProperty('--bim-floating-btn-shadow-hover', theme.floatingBtnShadowHover);
|
||||||
if (gp.btnBgHover) style.setProperty('--bim-glass-pill-btn-bg-hover', gp.btnBgHover);
|
style.setProperty('--bim-floating-icon-color', theme.floatingIconColor);
|
||||||
if (gp.btnShadowHover) style.setProperty('--bim-glass-pill-btn-shadow-hover', gp.btnShadowHover);
|
style.setProperty('--bim-floating-icon-color-hover', theme.floatingIconColorHover);
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.syncDropdownCssVars(theme);
|
this.syncDropdownCssVars(theme);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -83,6 +83,17 @@ export const lightTheme: ThemeConfig = {
|
|||||||
scrollbarThumb: '#cbd5e1',
|
scrollbarThumb: '#cbd5e1',
|
||||||
scrollbarThumbHover: '#94a3b8',
|
scrollbarThumbHover: '#94a3b8',
|
||||||
|
|
||||||
|
floatingBg: 'rgba(255, 255, 255, 0.8)',
|
||||||
|
floatingBorder: 'rgba(226, 232, 240, 0.5)',
|
||||||
|
floatingShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
|
||||||
|
floatingBtnBg: 'rgba(255, 255, 255, 0.9)',
|
||||||
|
floatingBtnBorder: 'rgba(203, 213, 225, 0.6)',
|
||||||
|
floatingBtnShadow: '0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08)',
|
||||||
|
floatingBtnBgHover: '#ffffff',
|
||||||
|
floatingBtnShadowHover: '0 4px 12px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.1)',
|
||||||
|
floatingIconColor: '#334155',
|
||||||
|
floatingIconColorHover: '#1e293b',
|
||||||
|
|
||||||
overrides: {
|
overrides: {
|
||||||
dialog: {
|
dialog: {
|
||||||
headerBg: '#f8fafc',
|
headerBg: '#f8fafc',
|
||||||
@@ -93,18 +104,6 @@ export const lightTheme: ThemeConfig = {
|
|||||||
buttonBgHover: '#ffffff',
|
buttonBgHover: '#ffffff',
|
||||||
buttonBgActive: '#2563eb',
|
buttonBgActive: '#2563eb',
|
||||||
},
|
},
|
||||||
glassPill: {
|
|
||||||
sectionBg: 'rgba(255, 255, 255, 0.8)',
|
|
||||||
sectionBorder: 'rgba(226, 232, 240, 0.5)',
|
|
||||||
sectionShadow: '0 4px 24px rgba(0, 0, 0, 0.06)',
|
|
||||||
btnBg: 'rgba(255, 255, 255, 0.9)',
|
|
||||||
btnBorder: 'rgba(203, 213, 225, 0.6)',
|
|
||||||
btnShadow: '0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08)',
|
|
||||||
btnBgHover: '#ffffff',
|
|
||||||
btnShadowHover: '0 4px 12px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.1)',
|
|
||||||
iconColor: '#334155',
|
|
||||||
iconColorHover: '#1e293b',
|
|
||||||
},
|
|
||||||
input: {
|
input: {
|
||||||
bg: '#ffffff',
|
bg: '#ffffff',
|
||||||
bgFocus: '#ffffff',
|
bgFocus: '#ffffff',
|
||||||
@@ -185,6 +184,17 @@ export const darkTheme: ThemeConfig = {
|
|||||||
scrollbarThumb: '#475569',
|
scrollbarThumb: '#475569',
|
||||||
scrollbarThumbHover: '#64748b',
|
scrollbarThumbHover: '#64748b',
|
||||||
|
|
||||||
|
floatingBg: 'rgba(15, 23, 42, 0.85)',
|
||||||
|
floatingBorder: 'rgba(51, 65, 85, 0.4)',
|
||||||
|
floatingShadow: '0 4px 24px rgba(0, 0, 0, 0.25)',
|
||||||
|
floatingBtnBg: 'rgba(51, 65, 85, 0.6)',
|
||||||
|
floatingBtnBorder: 'rgba(100, 116, 139, 0.5)',
|
||||||
|
floatingBtnShadow: '0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25)',
|
||||||
|
floatingBtnBgHover: 'rgba(71, 85, 105, 0.7)',
|
||||||
|
floatingBtnShadowHover: '0 4px 12px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.3)',
|
||||||
|
floatingIconColor: '#e2e8f0',
|
||||||
|
floatingIconColorHover: '#f8fafc',
|
||||||
|
|
||||||
overrides: {
|
overrides: {
|
||||||
dialog: {
|
dialog: {
|
||||||
headerBg: '#0f172a',
|
headerBg: '#0f172a',
|
||||||
@@ -195,18 +205,6 @@ export const darkTheme: ThemeConfig = {
|
|||||||
buttonBgHover: 'rgba(71, 85, 105, 0.7)',
|
buttonBgHover: 'rgba(71, 85, 105, 0.7)',
|
||||||
buttonBgActive: '#3b82f6',
|
buttonBgActive: '#3b82f6',
|
||||||
},
|
},
|
||||||
glassPill: {
|
|
||||||
sectionBg: 'rgba(30, 41, 59, 0.8)',
|
|
||||||
sectionBorder: 'rgba(51, 65, 85, 0.5)',
|
|
||||||
sectionShadow: '0 4px 24px rgba(0, 0, 0, 0.15)',
|
|
||||||
btnBg: 'rgba(51, 65, 85, 0.5)',
|
|
||||||
btnBorder: 'rgba(71, 85, 105, 0.4)',
|
|
||||||
btnShadow: '0 2px 8px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2)',
|
|
||||||
btnBgHover: 'rgba(71, 85, 105, 0.6)',
|
|
||||||
btnShadowHover: '0 4px 12px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25)',
|
|
||||||
iconColor: '#e2e8f0',
|
|
||||||
iconColorHover: '#f8fafc',
|
|
||||||
},
|
|
||||||
input: {
|
input: {
|
||||||
bg: '#0f172a',
|
bg: '#0f172a',
|
||||||
bgFocus: '#1e293b',
|
bgFocus: '#1e293b',
|
||||||
|
|||||||
@@ -228,6 +228,31 @@ export interface ThemeConfig {
|
|||||||
/** Scrollbar thumb on hover */
|
/** Scrollbar thumb on hover */
|
||||||
scrollbarThumbHover: ColorToken;
|
scrollbarThumbHover: ColorToken;
|
||||||
|
|
||||||
|
// =========================================================================
|
||||||
|
// Floating Component Layer (工具栏、浮动面板等)
|
||||||
|
// =========================================================================
|
||||||
|
|
||||||
|
/** 浮动容器背景 (支持 rgba 实现毛玻璃效果) */
|
||||||
|
floatingBg: ColorToken;
|
||||||
|
/** 浮动容器边框 */
|
||||||
|
floatingBorder: ColorToken;
|
||||||
|
/** 浮动容器阴影 */
|
||||||
|
floatingShadow: ShadowToken;
|
||||||
|
/** 浮动按钮背景 */
|
||||||
|
floatingBtnBg: ColorToken;
|
||||||
|
/** 浮动按钮边框 */
|
||||||
|
floatingBtnBorder: ColorToken;
|
||||||
|
/** 浮动按钮阴影 */
|
||||||
|
floatingBtnShadow: ShadowToken;
|
||||||
|
/** 浮动按钮悬停背景 */
|
||||||
|
floatingBtnBgHover: ColorToken;
|
||||||
|
/** 浮动按钮悬停阴影 */
|
||||||
|
floatingBtnShadowHover: ShadowToken;
|
||||||
|
/** 浮动组件图标颜色 */
|
||||||
|
floatingIconColor: ColorToken;
|
||||||
|
/** 浮动组件图标悬停颜色 */
|
||||||
|
floatingIconColorHover: ColorToken;
|
||||||
|
|
||||||
// =========================================================================
|
// =========================================================================
|
||||||
// Specific Component Overrides (Optional)
|
// Specific Component Overrides (Optional)
|
||||||
// These allow fine-grained control when semantic tokens aren't enough
|
// These allow fine-grained control when semantic tokens aren't enough
|
||||||
@@ -256,19 +281,6 @@ export interface ThemeConfig {
|
|||||||
bgFocus?: ColorToken;
|
bgFocus?: ColorToken;
|
||||||
placeholder?: ColorToken;
|
placeholder?: ColorToken;
|
||||||
};
|
};
|
||||||
/** Glass-pill button group specific colors */
|
|
||||||
glassPill?: {
|
|
||||||
sectionBg?: ColorToken;
|
|
||||||
sectionBorder?: ColorToken;
|
|
||||||
sectionShadow?: ShadowToken;
|
|
||||||
btnBg?: ColorToken;
|
|
||||||
btnBorder?: ColorToken;
|
|
||||||
btnShadow?: ShadowToken;
|
|
||||||
btnBgHover?: ColorToken;
|
|
||||||
btnShadowHover?: ShadowToken;
|
|
||||||
iconColor?: ColorToken;
|
|
||||||
iconColorHover?: ColorToken;
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -385,6 +397,18 @@ export const CSS_VAR_MAP: Record<keyof Omit<ThemeConfig, 'name' | 'overrides'>,
|
|||||||
scrollbarTrack: '--bim-scrollbar-track',
|
scrollbarTrack: '--bim-scrollbar-track',
|
||||||
scrollbarThumb: '--bim-scrollbar-thumb',
|
scrollbarThumb: '--bim-scrollbar-thumb',
|
||||||
scrollbarThumbHover: '--bim-scrollbar-thumb-hover',
|
scrollbarThumbHover: '--bim-scrollbar-thumb-hover',
|
||||||
|
|
||||||
|
// Floating
|
||||||
|
floatingBg: '--bim-floating-bg',
|
||||||
|
floatingBorder: '--bim-floating-border',
|
||||||
|
floatingShadow: '--bim-floating-shadow',
|
||||||
|
floatingBtnBg: '--bim-floating-btn-bg',
|
||||||
|
floatingBtnBorder: '--bim-floating-btn-border',
|
||||||
|
floatingBtnShadow: '--bim-floating-btn-shadow',
|
||||||
|
floatingBtnBgHover: '--bim-floating-btn-bg-hover',
|
||||||
|
floatingBtnShadowHover: '--bim-floating-btn-shadow-hover',
|
||||||
|
floatingIconColor: '--bim-floating-icon-color',
|
||||||
|
floatingIconColorHover: '--bim-floating-icon-color-hover',
|
||||||
};
|
};
|
||||||
|
|
||||||
// ============================================================================
|
// ============================================================================
|
||||||
|
|||||||
Reference in New Issue
Block a user