feat(theme): 重构主题系统，新增 glass-pill 按钮样式
- ThemeConfig 接口扩展至 60+ 语义化属性 - 新增深浅主题预设 (glassPill overrides) - button-group 支持 glass-pill 样式变体 - 默认主题改为浅色 - 移除 toolbar 容器硬编码定位 - 统一组件 CSS 变量命名规范 - 暂时隐藏下拉箭头
This commit is contained in:
yuding
235
dist/index.d.ts
vendored
235
dist/index.d.ts
vendored
@@ -36,6 +36,16 @@ declare class BimButtonGroup implements IBimComponent {
|
||||
* 只会应用到没有被用户自定义的颜色属性上
|
||||
*/
|
||||
setTheme(theme: ThemeConfig): void;
|
||||
/**
|
||||
* 应用主题系统的 CSS 变量到容器
|
||||
* 供 glass-pill 等样式变体使用
|
||||
*/
|
||||
private applyThemeCssVars;
|
||||
/**
|
||||
* 同步 CSS 变量到所有 dropdown 元素
|
||||
* dropdown 被添加到 body，无法继承容器的 CSS 变量
|
||||
*/
|
||||
private syncDropdownCssVars;
|
||||
/**
|
||||
* 直接设置颜色（强制覆盖）
|
||||
* 设置的颜色会被标记为自定义，后续的 setTheme 不会覆盖它们
|
||||
@@ -273,6 +283,12 @@ declare class BimTreeNode {
|
||||
destroy(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Blur Token
|
||||
* CSS backdrop-filter blur value (e.g., '24px')
|
||||
*/
|
||||
declare type BlurToken = string;
|
||||
|
||||
/** 按钮内部文字图标排列 */
|
||||
declare type ButtonAlign = 'vertical' | 'horizontal';
|
||||
|
||||
@@ -336,6 +352,8 @@ declare class ButtonGroupManager extends BimComponent {
|
||||
|
||||
export declare interface ButtonGroupOptions extends ButtonGroupColors {
|
||||
container: HTMLElement | string;
|
||||
/** 样式类型 (默认 'default') */
|
||||
type?: ButtonGroupType;
|
||||
/** 屏幕位置 (如 top-left) */
|
||||
position?: GroupPosition;
|
||||
/** 按钮组排列方向 (默认 row) */
|
||||
@@ -349,6 +367,9 @@ export declare interface ButtonGroupOptions extends ButtonGroupColors {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/** 按钮组样式类型 */
|
||||
declare type ButtonGroupType = 'default' | 'glass-pill';
|
||||
|
||||
declare type ButtonType = 'button' | 'menu';
|
||||
|
||||
/**
|
||||
@@ -392,6 +413,24 @@ export declare interface CollapseOptions {
|
||||
onChange?: (activeIds: string[]) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* BIM Engine SDK - Unified Theme System
|
||||
*
|
||||
* Design Principles:
|
||||
* 1. Semantic naming - colors describe PURPOSE, not appearance
|
||||
* 2. Hierarchical structure - organized by category for scalability
|
||||
* 3. Complete coverage - all UI states and component needs
|
||||
* 4. Accessibility - ensures proper contrast ratios
|
||||
* 5. Glassmorphism support - includes transparency and blur values
|
||||
*
|
||||
* Color Palette Reference: Tailwind CSS (slate, blue, red, green, amber)
|
||||
*/
|
||||
/**
|
||||
* Semantic Color Token
|
||||
* Represents a single color value with optional transparency
|
||||
*/
|
||||
declare type ColorToken = string;
|
||||
|
||||
/**
|
||||
* 底部工具栏管理器 (ToolbarManager)
|
||||
* 仅负责管理底部工具栏实例。
|
||||
@@ -1156,40 +1195,180 @@ declare class SectionPlaneDialogManager extends BimComponent {
|
||||
}
|
||||
|
||||
/**
|
||||
* 全局主题配置接口
|
||||
* 定义系统通用的语义化颜色
|
||||
* Shadow Token
|
||||
* CSS box-shadow value
|
||||
*/
|
||||
declare type ShadowToken = string;
|
||||
|
||||
/**
|
||||
* Complete Theme Configuration Interface
|
||||
*
|
||||
* All colors use semantic naming to describe their purpose.
|
||||
* Components should map these to their internal CSS variables.
|
||||
*/
|
||||
export declare interface ThemeConfig {
|
||||
/** 主题名称 */
|
||||
/** Theme identifier: 'dark' | 'light' | custom name */
|
||||
name: string;
|
||||
/** 品牌色/主色 */
|
||||
primary: string;
|
||||
/** 主色悬停/激活态 */
|
||||
primaryHover: string;
|
||||
/** 基础背景色 (应用整体背景) */
|
||||
background: string;
|
||||
/** 面板背景色 (工具栏、弹窗背景) */
|
||||
panelBackground: string;
|
||||
/** 主要文字颜色 */
|
||||
textPrimary: string;
|
||||
/** 次要文字颜色 */
|
||||
textSecondary: string;
|
||||
/** 边框/分割线颜色 */
|
||||
border: string;
|
||||
/** 图标默认颜色 */
|
||||
icon: string;
|
||||
/** 图标激活颜色 */
|
||||
iconActive: string;
|
||||
/** 交互组件背景 (如按钮默认背景) */
|
||||
componentBackground: string;
|
||||
/** 交互组件悬停背景 */
|
||||
componentHover: string;
|
||||
/** 交互组件激活背景 */
|
||||
componentActive: string;
|
||||
/** Primary brand color - used for key actions, links, active states */
|
||||
primary: ColorToken;
|
||||
/** Primary color on hover */
|
||||
primaryHover: ColorToken;
|
||||
/** Primary color when pressed/active */
|
||||
primaryActive: ColorToken;
|
||||
/** Subtle primary for backgrounds (e.g., selected row) */
|
||||
primarySubtle: ColorToken;
|
||||
/** Success color - confirmations, completed states */
|
||||
success: ColorToken;
|
||||
/** Success color on hover */
|
||||
successHover: ColorToken;
|
||||
/** Subtle success for backgrounds */
|
||||
successSubtle: ColorToken;
|
||||
/** Warning color - caution, pending states */
|
||||
warning: ColorToken;
|
||||
/** Warning color on hover */
|
||||
warningHover: ColorToken;
|
||||
/** Subtle warning for backgrounds */
|
||||
warningSubtle: ColorToken;
|
||||
/** Danger/Error color - destructive actions, errors */
|
||||
danger: ColorToken;
|
||||
/** Danger color on hover */
|
||||
dangerHover: ColorToken;
|
||||
/** Subtle danger for backgrounds */
|
||||
dangerSubtle: ColorToken;
|
||||
/** Info color - informational states */
|
||||
info: ColorToken;
|
||||
/** Info color on hover */
|
||||
infoHover: ColorToken;
|
||||
/** Subtle info for backgrounds */
|
||||
infoSubtle: ColorToken;
|
||||
/** Base/canvas background - the deepest layer (app background) */
|
||||
bgBase: ColorToken;
|
||||
/** Elevated surface - panels, cards, dialogs floating above base */
|
||||
bgElevated: ColorToken;
|
||||
/** Overlay background - modals, dropdowns, popovers */
|
||||
bgOverlay: ColorToken;
|
||||
/** Inset/recessed background - inputs, wells, sunken areas */
|
||||
bgInset: ColorToken;
|
||||
/**
|
||||
* Glassmorphism surface - semi-transparent with blur
|
||||
* Used for floating toolbars, modern panels
|
||||
*/
|
||||
bgGlass: ColorToken;
|
||||
/** Glassmorphism blur amount */
|
||||
bgGlassBlur: BlurToken;
|
||||
/** Primary text - headings, body text, high emphasis */
|
||||
textPrimary: ColorToken;
|
||||
/** Secondary text - descriptions, labels, medium emphasis */
|
||||
textSecondary: ColorToken;
|
||||
/** Tertiary text - placeholders, hints, low emphasis */
|
||||
textTertiary: ColorToken;
|
||||
/** Disabled text - inactive elements */
|
||||
textDisabled: ColorToken;
|
||||
/** Inverted text - text on primary/dark backgrounds */
|
||||
textInverse: ColorToken;
|
||||
/** Link text color */
|
||||
textLink: ColorToken;
|
||||
/** Link text on hover */
|
||||
textLinkHover: ColorToken;
|
||||
/** Default icon color */
|
||||
iconDefault: ColorToken;
|
||||
/** Icon on hover */
|
||||
iconHover: ColorToken;
|
||||
/** Active/selected icon */
|
||||
iconActive: ColorToken;
|
||||
/** Disabled icon */
|
||||
iconDisabled: ColorToken;
|
||||
/** Inverted icon (on colored backgrounds) */
|
||||
iconInverse: ColorToken;
|
||||
/** Default border - inputs, cards, containers */
|
||||
borderDefault: ColorToken;
|
||||
/** Subtle border - dividers, separators */
|
||||
borderSubtle: ColorToken;
|
||||
/** Strong border - focus rings, emphasis */
|
||||
borderStrong: ColorToken;
|
||||
/** Disabled border */
|
||||
borderDisabled: ColorToken;
|
||||
/** Divider color - horizontal/vertical separators */
|
||||
divider: ColorToken;
|
||||
/**
|
||||
* Component Background States
|
||||
* Used for buttons, list items, interactive elements
|
||||
*/
|
||||
/** Default component background (often transparent) */
|
||||
componentBg: ColorToken;
|
||||
/** Component background on hover */
|
||||
componentBgHover: ColorToken;
|
||||
/** Component background when pressed */
|
||||
componentBgActive: ColorToken;
|
||||
/** Component background when selected */
|
||||
componentBgSelected: ColorToken;
|
||||
/** Disabled component background */
|
||||
componentBgDisabled: ColorToken;
|
||||
/** Focus ring color */
|
||||
focusRing: ColorToken;
|
||||
/** Focus ring offset color (for contrast) */
|
||||
focusRingOffset: ColorToken;
|
||||
/** Selection background (text selection, highlighted items) */
|
||||
selectionBg: ColorToken;
|
||||
/** Selection text color */
|
||||
selectionText: ColorToken;
|
||||
/** Small shadow - subtle elevation (buttons, small cards) */
|
||||
shadowSm: ShadowToken;
|
||||
/** Medium shadow - moderate elevation (dropdowns, popovers) */
|
||||
shadowMd: ShadowToken;
|
||||
/** Large shadow - high elevation (modals, dialogs) */
|
||||
shadowLg: ShadowToken;
|
||||
/** Extra large shadow - maximum elevation */
|
||||
shadowXl: ShadowToken;
|
||||
/** Glow shadow for active/highlighted elements */
|
||||
shadowGlow: ShadowToken;
|
||||
/** Scrollbar track background */
|
||||
scrollbarTrack: ColorToken;
|
||||
/** Scrollbar thumb */
|
||||
scrollbarThumb: ColorToken;
|
||||
/** Scrollbar thumb on hover */
|
||||
scrollbarThumbHover: ColorToken;
|
||||
/**
|
||||
* Component-specific overrides
|
||||
* Only define these when absolutely necessary
|
||||
*/
|
||||
overrides?: {
|
||||
/** Dialog specific colors */
|
||||
dialog?: {
|
||||
headerBg?: ColorToken;
|
||||
footerBg?: ColorToken;
|
||||
};
|
||||
/** Toolbar specific colors */
|
||||
toolbar?: {
|
||||
bg?: ColorToken;
|
||||
buttonBg?: ColorToken;
|
||||
buttonBgHover?: ColorToken;
|
||||
buttonBgActive?: ColorToken;
|
||||
};
|
||||
/** Input specific colors */
|
||||
input?: {
|
||||
bg?: ColorToken;
|
||||
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;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 主题类型定义
|
||||
* Theme type definition
|
||||
*/
|
||||
export declare type ThemeType = 'dark' | 'light' | 'custom';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user