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

46
src/themes/presets.ts
View File

@@ -83,6 +83,17 @@ export const lightTheme: ThemeConfig = {
scrollbarThumb: '#cbd5e1',
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: {
dialog: {
headerBg: '#f8fafc',
@@ -93,18 +104,6 @@ export const lightTheme: ThemeConfig = {
buttonBgHover: '#ffffff',
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: {
bg: '#ffffff',
bgFocus: '#ffffff',
@@ -185,6 +184,17 @@ export const darkTheme: ThemeConfig = {
scrollbarThumb: '#475569',
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: {
dialog: {
headerBg: '#0f172a',
@@ -195,18 +205,6 @@ export const darkTheme: ThemeConfig = {
buttonBgHover: 'rgba(71, 85, 105, 0.7)',
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: {
bg: '#0f172a',
bgFocus: '#1e293b',

50
src/themes/types.ts
View File

@@ -228,6 +228,31 @@ export interface ThemeConfig {
/** Scrollbar thumb on hover */
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)
// These allow fine-grained control when semantic tokens aren't enough
@@ -256,19 +281,6 @@ export interface ThemeConfig {
bgFocus?: 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',
scrollbarThumb: '--bim-scrollbar-thumb',
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',
};
// ============================================================================