@fishdingding/bim-engine-sdk 1.0.2 → 1.0.3

package/dist/index.d.ts

@@ -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';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishdingding/bim-engine-sdk",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "BIM Engine SDK for Vue2, Vue3, React and HTML",
   "main": "./dist/bim-engine-sdk.umd.js",
   "module": "./dist/bim-engine-sdk.es.js",