diff --git a/src/components/button-group/index.css b/src/components/button-group/index.css index a9160c3..3851e1d 100644 --- a/src/components/button-group/index.css +++ b/src/components/button-group/index.css @@ -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 { diff --git a/src/components/button-group/index.ts b/src/components/button-group/index.ts index 4510086..02f86e3 100644 --- a/src/components/button-group/index.ts +++ b/src/components/button-group/index.ts @@ -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); } diff --git a/src/themes/presets.ts b/src/themes/presets.ts index 54be0a7..8db9dd7 100644 --- a/src/themes/presets.ts +++ b/src/themes/presets.ts @@ -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', diff --git a/src/themes/types.ts b/src/themes/types.ts index ea6080c..0173dab 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -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, 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', }; // ============================================================================