advance-semi-theme 1.0.0

package/dist/core/variables.css

@@ -0,0 +1,258 @@
+/**
+ * Semi Design CSS 变量定义
+ * 共享核心变量，供 antd 和 element 主题使用
+ */
+
+:root {
+  /* ========== 基础色板 (RGB格式，支持透明度) ========== */
+  
+  /* Blue 蓝色系 */
+  --semi-blue-0: 234, 245, 255;
+  --semi-blue-1: 203, 231, 254;
+  --semi-blue-2: 152, 205, 253;
+  --semi-blue-3: 102, 178, 252;
+  --semi-blue-4: 51, 152, 251;
+  --semi-blue-5: 0, 100, 250;
+  --semi-blue-6: 0, 98, 214;
+  --semi-blue-7: 0, 79, 179;
+  --semi-blue-8: 0, 61, 143;
+  --semi-blue-9: 0, 42, 107;
+  
+  /* Green 绿色系 */
+  --semi-green-0: 236, 247, 236;
+  --semi-green-1: 208, 240, 209;
+  --semi-green-2: 164, 224, 167;
+  --semi-green-5: 59, 179, 70;
+  --semi-green-6: 48, 149, 59;
+  --semi-green-7: 38, 119, 48;
+  
+  /* Red 红色系 */
+  --semi-red-0: 254, 242, 237;
+  --semi-red-1: 254, 221, 210;
+  --semi-red-2: 253, 183, 165;
+  --semi-red-5: 249, 57, 32;
+  --semi-red-6: 213, 37, 21;
+  --semi-red-7: 178, 24, 13;
+  
+  /* Orange 橙色系 */
+  --semi-orange-0: 255, 248, 234;
+  --semi-orange-1: 254, 238, 204;
+  --semi-orange-2: 254, 217, 152;
+  --semi-orange-5: 252, 136, 0;
+  --semi-orange-6: 210, 103, 0;
+  --semi-orange-7: 168, 72, 0;
+  
+  /* Yellow 黄色系 */
+  --semi-yellow-5: 250, 200, 0;
+  --semi-yellow-6: 208, 160, 0;
+  
+  /* Purple 紫色系 */
+  --semi-purple-5: 166, 71, 255;
+  --semi-purple-6: 134, 54, 219;
+  --semi-purple-7: 105, 40, 184;
+  
+  /* Cyan 青色系 */
+  --semi-cyan-5: 0, 149, 238;
+  --semi-cyan-6: 0, 122, 202;
+  
+  /* Teal 蓝绿色系 */
+  --semi-teal-5: 2, 167, 131;
+  --semi-teal-6: 1, 139, 109;
+  
+  /* Pink 粉色系 */
+  --semi-pink-5: 245, 49, 157;
+  --semi-pink-6: 207, 38, 130;
+  
+  /* Indigo 靛蓝色系 */
+  --semi-indigo-5: 79, 70, 229;
+  --semi-indigo-6: 64, 55, 194;
+  
+  /* Grey 灰色系 */
+  --semi-grey-0: 249, 249, 249;
+  --semi-grey-1: 230, 232, 234;
+  --semi-grey-2: 198, 202, 205;
+  --semi-grey-3: 167, 171, 176;
+  --semi-grey-4: 136, 141, 146;
+  --semi-grey-5: 107, 112, 117;
+  --semi-grey-6: 85, 91, 97;
+  --semi-grey-7: 65, 70, 76;
+  --semi-grey-8: 46, 50, 56;
+  --semi-grey-9: 28, 31, 35;
+  --semi-white: 255, 255, 255;
+  --semi-black: 0, 0, 0;
+  
+  /* ========== 语义化颜色 ========== */
+  
+  /* Primary 主色 */
+  --semi-color-primary: rgb(var(--semi-blue-5));
+  --semi-color-primary-hover: rgb(var(--semi-blue-6));
+  --semi-color-primary-active: rgb(var(--semi-blue-7));
+  --semi-color-primary-disabled: rgba(var(--semi-blue-5), 0.4);
+  --semi-color-primary-light-default: rgb(var(--semi-blue-0));
+  --semi-color-primary-light-hover: rgb(var(--semi-blue-1));
+  --semi-color-primary-light-active: rgb(var(--semi-blue-2));
+  
+  /* Success 成功色 */
+  --semi-color-success: rgb(var(--semi-green-5));
+  --semi-color-success-hover: rgb(var(--semi-green-6));
+  --semi-color-success-active: rgb(var(--semi-green-7));
+  --semi-color-success-disabled: rgba(var(--semi-green-5), 0.4);
+  --semi-color-success-light-default: rgb(var(--semi-green-0));
+  --semi-color-success-light-hover: rgb(var(--semi-green-1));
+  --semi-color-success-light-active: rgb(var(--semi-green-2));
+  
+  /* Danger 危险色 */
+  --semi-color-danger: rgb(var(--semi-red-5));
+  --semi-color-danger-hover: rgb(var(--semi-red-6));
+  --semi-color-danger-active: rgb(var(--semi-red-7));
+  --semi-color-danger-disabled: rgba(var(--semi-red-5), 0.4);
+  --semi-color-danger-light-default: rgb(var(--semi-red-0));
+  --semi-color-danger-light-hover: rgb(var(--semi-red-1));
+  --semi-color-danger-light-active: rgb(var(--semi-red-2));
+  
+  /* Warning 警告色 */
+  --semi-color-warning: rgb(var(--semi-orange-5));
+  --semi-color-warning-hover: rgb(var(--semi-orange-6));
+  --semi-color-warning-active: rgb(var(--semi-orange-7));
+  --semi-color-warning-disabled: rgba(var(--semi-orange-5), 0.4);
+  --semi-color-warning-light-default: rgb(var(--semi-orange-0));
+  --semi-color-warning-light-hover: rgb(var(--semi-orange-1));
+  --semi-color-warning-light-active: rgb(var(--semi-orange-2));
+  
+  /* Info 信息色 */
+  --semi-color-info: rgb(var(--semi-blue-5));
+  --semi-color-info-light-default: rgb(var(--semi-blue-0));
+  
+  /* Secondary 次要色 */
+  --semi-color-secondary: rgb(var(--semi-cyan-5));
+  --semi-color-secondary-hover: rgb(var(--semi-cyan-6));
+  
+  /* Tertiary 第三色 */
+  --semi-color-tertiary: rgb(var(--semi-grey-5));
+  --semi-color-tertiary-hover: rgb(var(--semi-grey-6));
+  
+  /* ========== 填充色 (Semi 核心：填充式设计) ========== */
+  --semi-color-fill-0: rgba(var(--semi-grey-8), 0.08);
+  --semi-color-fill-1: rgba(var(--semi-grey-8), 0.12);
+  --semi-color-fill-2: rgba(var(--semi-grey-8), 0.16);
+  
+  /* ========== 文本色 ========== */
+  --semi-color-text-0: rgba(var(--semi-grey-9), 1);
+  --semi-color-text-1: rgba(var(--semi-grey-9), 0.8);
+  --semi-color-text-2: rgba(var(--semi-grey-9), 0.62);
+  --semi-color-text-3: rgba(var(--semi-grey-9), 0.35);
+  
+  /* ========== 背景色 ========== */
+  --semi-color-bg-0: rgb(var(--semi-white));
+  --semi-color-bg-1: rgb(var(--semi-grey-0));
+  --semi-color-bg-2: rgb(var(--semi-white));
+  --semi-color-bg-3: rgb(var(--semi-white));
+  
+  /* ========== 边框色 ========== */
+  --semi-color-border: rgba(var(--semi-grey-9), 0.08);
+  --semi-color-focus-border: rgb(var(--semi-blue-5));
+  
+  /* ========== 禁用态 ========== */
+  --semi-color-disabled-text: rgba(var(--semi-grey-9), 0.35);
+  --semi-color-disabled-fill: rgba(var(--semi-grey-8), 0.04);
+  --semi-color-disabled-bg: rgb(var(--semi-grey-1));
+  --semi-color-disabled-border: rgb(var(--semi-grey-1));
+  
+  /* ========== 链接色 ========== */
+  --semi-color-link: rgb(var(--semi-blue-5));
+  --semi-color-link-hover: rgb(var(--semi-blue-6));
+  --semi-color-link-active: rgb(var(--semi-blue-7));
+  --semi-color-link-visited: rgb(var(--semi-purple-5));
+  
+  /* ========== 蒙层 ========== */
+  --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
+  
+  /* ========== 导航背景 ========== */
+  --semi-color-nav-bg: rgb(var(--semi-white));
+  
+  /* ========== 阴影 ========== */
+  --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
+  --semi-shadow-raised: 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.08);
+  --semi-shadow-floating: 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.15);
+  
+  /* ========== 圆角 ========== */
+  --semi-border-radius-extra-small: 3px;
+  --semi-border-radius-small: 3px;
+  --semi-border-radius-medium: 6px;
+  --semi-border-radius-large: 12px;
+  --semi-border-radius-full: 9999px;
+  
+  /* ========== 过渡 ========== */
+  --semi-transition-fast: 0.1s ease;
+  --semi-transition-normal: 0.2s ease;
+  --semi-transition-slow: 0.3s ease;
+  
+  /* ========== 间距 ========== */
+  --semi-spacing-extra-tight: 4px;
+  --semi-spacing-tight: 8px;
+  --semi-spacing-base-tight: 12px;
+  --semi-spacing-base: 16px;
+  --semi-spacing-base-loose: 20px;
+  --semi-spacing-loose: 24px;
+  --semi-spacing-extra-loose: 32px;
+  
+  /* ========== 字体 ========== */
+  --semi-font-size-small: 12px;
+  --semi-font-size-regular: 14px;
+  --semi-font-size-large: 16px;
+  --semi-font-size-header-6: 16px;
+  --semi-font-size-header-5: 18px;
+  --semi-font-size-header-4: 20px;
+  --semi-font-size-header-3: 24px;
+  --semi-font-size-header-2: 28px;
+  --semi-font-size-header-1: 32px;
+  
+  /* ========== AI 渐变色 ========== */
+  --semi-ai-purple-5: 166, 71, 255;
+  --semi-ai-purple-6: 134, 54, 219;
+  --semi-ai-purple-7: 105, 40, 184;
+  --semi-ai-general-5-0: 233, 69, 255;
+  --semi-ai-general-5-1: 166, 71, 255;
+  --semi-ai-general-5-2: 107, 97, 255;
+  --semi-ai-general-5-3: 46, 140, 255;
+  
+  --semi-color-ai-general: linear-gradient(278deg, rgba(var(--semi-ai-general-5-0)) 0%, rgba(var(--semi-ai-general-5-1)) 30%, rgba(var(--semi-ai-general-5-2)) 60%, rgba(var(--semi-ai-general-5-3)) 100%);
+  --semi-color-ai-purple: rgba(var(--semi-ai-purple-5));
+  --semi-color-ai-purple-hover: rgba(var(--semi-ai-purple-6));
+  --semi-color-ai-purple-active: rgba(var(--semi-ai-purple-7));
+}
+
+/* ========== 暗色模式 ========== */
+[data-theme="dark"],
+.dark,
+[theme-mode="dark"] {
+  --semi-grey-0: 28, 31, 35;
+  --semi-grey-1: 46, 50, 56;
+  --semi-grey-2: 65, 70, 76;
+  --semi-grey-7: 198, 202, 205;
+  --semi-grey-8: 230, 232, 234;
+  --semi-grey-9: 249, 249, 249;
+  --semi-white: 28, 31, 35;
+  
+  --semi-color-bg-0: rgb(28, 31, 35);
+  --semi-color-bg-1: rgb(46, 50, 56);
+  --semi-color-bg-2: rgb(46, 50, 56);
+  --semi-color-bg-3: rgb(65, 70, 76);
+  
+  --semi-color-fill-0: rgba(255, 255, 255, 0.08);
+  --semi-color-fill-1: rgba(255, 255, 255, 0.12);
+  --semi-color-fill-2: rgba(255, 255, 255, 0.16);
+  
+  --semi-color-text-0: rgba(255, 255, 255, 0.9);
+  --semi-color-text-1: rgba(255, 255, 255, 0.72);
+  --semi-color-text-2: rgba(255, 255, 255, 0.55);
+  --semi-color-text-3: rgba(255, 255, 255, 0.35);
+  
+  --semi-color-border: rgba(255, 255, 255, 0.08);
+  --semi-color-disabled-text: rgba(255, 255, 255, 0.35);
+  --semi-color-disabled-fill: rgba(255, 255, 255, 0.04);
+  --semi-color-disabled-bg: rgb(65, 70, 76);
+  --semi-color-disabled-border: rgb(65, 70, 76);
+  
+  --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.3);
+}

package/dist/element/index.d.ts

@@ -0,0 +1,3 @@
+export { ElementSemiThemeOptions, ElementSupportedComponent, SUPPORTED_COMPONENTS, SemiThemePlugin, createSemiTheme, createSemiTheme as default } from './plugin.js';
+export { semiColors, semiColorsRGB } from '../core/index.js';
+import 'vue';

package/dist/element/index.js

@@ -0,0 +1,17 @@
+import {
+  SUPPORTED_COMPONENTS,
+  SemiThemePlugin,
+  createSemiTheme
+} from "../chunk-NGAVTDQ2.js";
+import {
+  semiColors,
+  semiColorsRGB
+} from "../chunk-QQOB6AOA.js";
+export {
+  SUPPORTED_COMPONENTS,
+  SemiThemePlugin,
+  createSemiTheme,
+  createSemiTheme as default,
+  semiColors,
+  semiColorsRGB
+};

package/dist/element/plugin.d.ts

@@ -0,0 +1,34 @@
+import { Plugin } from 'vue';
+import { SemiThemeOptions } from '../core/index.js';
+
+/**
+ * Semi Theme for Element Plus
+ *
+ * 支持三种使用方式：
+ *
+ * 1. 全局模式（默认）- 所有组件都应用 Semi 样式
+ *    app.use(createSemiTheme())
+ *
+ * 2. 组件模式 - 只对指定组件应用 Semi 样式
+ *    app.use(createSemiTheme({ components: ['Button', 'Input'] }))
+ *
+ * 3. 排除模式 - 排除指定组件，其他都应用
+ *    app.use(createSemiTheme({ exclude: ['Table'] }))
+ */
+
+declare const SUPPORTED_COMPONENTS: readonly ["Button", "Input", "Select", "Checkbox", "Radio", "Switch", "Slider", "Rate", "DatePicker", "TimePicker", "Upload", "Transfer", "Tree", "TreeSelect", "Form", "Table", "Card", "Tag", "Tabs", "Collapse", "Avatar", "Badge", "Timeline", "Dialog", "Drawer", "Message", "Notification", "Tooltip", "Popover", "Popconfirm", "Progress", "Alert", "Steps", "Pagination", "Menu", "Dropdown", "Breadcrumb", "Backtop", "Loading", "Skeleton", "Empty", "Result", "Image", "Carousel", "Calendar", "Descriptions", "Statistic", "Divider", "Space", "Cascader", "Autocomplete", "InputNumber", "Segmented", "ColorPicker", "Watermark", "Text", "Link"];
+type ElementSupportedComponent = typeof SUPPORTED_COMPONENTS[number];
+interface ElementSemiThemeOptions extends SemiThemeOptions {
+    components?: ElementSupportedComponent[];
+    exclude?: ElementSupportedComponent[];
+}
+/**
+ * 创建 Semi 主题插件 (Element Plus)
+ */
+declare function createSemiTheme(options?: ElementSemiThemeOptions): Plugin;
+/**
+ * 默认导出 - 全局模式插件
+ */
+declare const SemiThemePlugin: Plugin;
+
+export { type ElementSemiThemeOptions, type ElementSupportedComponent, SUPPORTED_COMPONENTS, SemiThemePlugin, createSemiTheme, createSemiTheme as default };

package/dist/element/plugin.js

@@ -0,0 +1,12 @@
+import {
+  SUPPORTED_COMPONENTS,
+  SemiThemePlugin,
+  createSemiTheme,
+  plugin_default
+} from "../chunk-NGAVTDQ2.js";
+export {
+  SUPPORTED_COMPONENTS,
+  SemiThemePlugin,
+  createSemiTheme,
+  plugin_default as default
+};

package/dist/element/styles/base.css

@@ -0,0 +1,277 @@
+/**
+ * Semi Theme for Element Plus - 基础样式
+ * 
+ * 包含：
+ * - Semi Design CSS 变量定义
+ * - Element Plus CSS 变量映射
+ * - 全局基础样式
+ * 
+ * 使用方式：
+ * import 'semi-theme/element/styles/base'
+ */
+
+/* ========== Semi Design 颜色变量 ========== */
+:root {
+  /* 品牌色 - Primary */
+  --semi-color-primary: #0064FA;
+  --semi-color-primary-hover: #0050D0;
+  --semi-color-primary-active: #003DA8;
+  --semi-color-primary-disabled: rgba(0, 100, 250, 0.4);
+  --semi-color-primary-light-default: rgba(0, 100, 250, 0.08);
+  --semi-color-primary-light-hover: rgba(0, 100, 250, 0.12);
+  --semi-color-primary-light-active: rgba(0, 100, 250, 0.16);
+
+  /* 成功色 - Success */
+  --semi-color-success: #3BB346;
+  --semi-color-success-hover: #2E9E39;
+  --semi-color-success-active: #22892C;
+  --semi-color-success-light-default: rgba(59, 179, 70, 0.08);
+  --semi-color-success-light-hover: rgba(59, 179, 70, 0.12);
+
+  /* 警告色 - Warning */
+  --semi-color-warning: #FC8800;
+  --semi-color-warning-hover: #E07800;
+  --semi-color-warning-active: #C46800;
+  --semi-color-warning-light-default: rgba(252, 136, 0, 0.08);
+  --semi-color-warning-light-hover: rgba(252, 136, 0, 0.12);
+
+  /* 危险色 - Danger */
+  --semi-color-danger: #F93920;
+  --semi-color-danger-hover: #DD2C15;
+  --semi-color-danger-active: #C1200A;
+  --semi-color-danger-light-default: rgba(249, 57, 32, 0.08);
+  --semi-color-danger-light-hover: rgba(249, 57, 32, 0.12);
+
+  /* 信息色 - Info */
+  --semi-color-info: #0064FA;
+  --semi-color-info-light-default: rgba(0, 100, 250, 0.08);
+
+  /* 文字颜色 */
+  --semi-color-text-0: rgba(28, 31, 35, 1);
+  --semi-color-text-1: rgba(28, 31, 35, 0.8);
+  --semi-color-text-2: rgba(28, 31, 35, 0.62);
+  --semi-color-text-3: rgba(28, 31, 35, 0.35);
+
+  /* 填充色 */
+  --semi-color-fill-0: rgba(46, 50, 56, 0.05);
+  --semi-color-fill-1: rgba(46, 50, 56, 0.09);
+  --semi-color-fill-2: rgba(46, 50, 56, 0.13);
+
+  /* 边框色 */
+  --semi-color-border: rgba(28, 31, 35, 0.08);
+  --semi-color-border-hover: rgba(28, 31, 35, 0.12);
+  --semi-color-focus-border: #0064FA;
+
+  /* 禁用状态 */
+  --semi-color-disabled-fill: rgba(46, 50, 56, 0.04);
+  --semi-color-disabled-text: rgba(28, 31, 35, 0.35);
+  --semi-color-disabled-bg: rgba(46, 50, 56, 0.04);
+
+  /* 背景色 */
+  --semi-color-bg-0: #fff;
+  --semi-color-bg-1: rgba(46, 50, 56, 0.02);
+  --semi-color-bg-2: rgba(46, 50, 56, 0.05);
+  --semi-color-bg-3: rgba(46, 50, 56, 0.08);
+
+  /* 圆角 */
+  --semi-border-radius-extra-small: 3px;
+  --semi-border-radius-small: 3px;
+  --semi-border-radius-medium: 6px;
+  --semi-border-radius-large: 8px;
+  --semi-border-radius-full: 9999px;
+
+  /* 字体大小 */
+  --semi-font-size-small: 12px;
+  --semi-font-size-regular: 14px;
+  --semi-font-size-large: 16px;
+
+  /* 阴影 */
+  --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
+  --semi-shadow-floating: 0 0 1px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* 过渡 */
+  --semi-transition-duration: 0.15s;
+  --semi-transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ========== Element Plus CSS 变量映射 ========== */
+.semi {
+  /* 主色映射 */
+  --el-color-primary: var(--semi-color-primary);
+  --el-color-primary-light-3: var(--semi-color-primary-light-active);
+  --el-color-primary-light-5: var(--semi-color-primary-light-hover);
+  --el-color-primary-light-7: var(--semi-color-primary-light-default);
+  --el-color-primary-light-8: var(--semi-color-primary-light-default);
+  --el-color-primary-light-9: var(--semi-color-primary-light-default);
+  --el-color-primary-dark-2: var(--semi-color-primary-hover);
+
+  /* 成功色映射 */
+  --el-color-success: var(--semi-color-success);
+  --el-color-success-light-3: var(--semi-color-success-light-hover);
+  --el-color-success-light-5: var(--semi-color-success-light-default);
+  --el-color-success-light-7: var(--semi-color-success-light-default);
+  --el-color-success-light-8: var(--semi-color-success-light-default);
+  --el-color-success-light-9: var(--semi-color-success-light-default);
+  --el-color-success-dark-2: var(--semi-color-success-hover);
+
+  /* 警告色映射 */
+  --el-color-warning: var(--semi-color-warning);
+  --el-color-warning-light-3: var(--semi-color-warning-light-hover);
+  --el-color-warning-light-5: var(--semi-color-warning-light-default);
+  --el-color-warning-light-7: var(--semi-color-warning-light-default);
+  --el-color-warning-light-8: var(--semi-color-warning-light-default);
+  --el-color-warning-light-9: var(--semi-color-warning-light-default);
+  --el-color-warning-dark-2: var(--semi-color-warning-hover);
+
+  /* 危险色映射 */
+  --el-color-danger: var(--semi-color-danger);
+  --el-color-danger-light-3: var(--semi-color-danger-light-hover);
+  --el-color-danger-light-5: var(--semi-color-danger-light-default);
+  --el-color-danger-light-7: var(--semi-color-danger-light-default);
+  --el-color-danger-light-8: var(--semi-color-danger-light-default);
+  --el-color-danger-light-9: var(--semi-color-danger-light-default);
+  --el-color-danger-dark-2: var(--semi-color-danger-hover);
+
+  /* 信息色映射 */
+  --el-color-info: var(--semi-color-text-2);
+  --el-color-info-light-3: var(--semi-color-fill-2);
+  --el-color-info-light-5: var(--semi-color-fill-1);
+  --el-color-info-light-7: var(--semi-color-fill-0);
+  --el-color-info-light-8: var(--semi-color-fill-0);
+  --el-color-info-light-9: var(--semi-color-fill-0);
+
+  /* 文字颜色映射 */
+  --el-text-color-primary: var(--semi-color-text-0);
+  --el-text-color-regular: var(--semi-color-text-1);
+  --el-text-color-secondary: var(--semi-color-text-2);
+  --el-text-color-placeholder: var(--semi-color-text-3);
+  --el-text-color-disabled: var(--semi-color-disabled-text);
+
+  /* 边框颜色映射 */
+  --el-border-color: var(--semi-color-border);
+  --el-border-color-light: var(--semi-color-border);
+  --el-border-color-lighter: var(--semi-color-border);
+  --el-border-color-extra-light: var(--semi-color-border);
+  --el-border-color-dark: var(--semi-color-border-hover);
+  --el-border-color-darker: var(--semi-color-border-hover);
+  --el-border-color-hover: var(--semi-color-focus-border);
+
+  /* 填充色映射 */
+  --el-fill-color: var(--semi-color-fill-0);
+  --el-fill-color-light: var(--semi-color-fill-0);
+  --el-fill-color-lighter: var(--semi-color-fill-0);
+  --el-fill-color-extra-light: var(--semi-color-fill-0);
+  --el-fill-color-dark: var(--semi-color-fill-1);
+  --el-fill-color-darker: var(--semi-color-fill-2);
+  --el-fill-color-blank: #fff;
+
+  /* 背景色映射 */
+  --el-bg-color: var(--semi-color-bg-0);
+  --el-bg-color-page: var(--semi-color-bg-1);
+  --el-bg-color-overlay: var(--semi-color-bg-0);
+
+  /* 圆角映射 */
+  --el-border-radius-base: var(--semi-border-radius-small);
+  --el-border-radius-small: var(--semi-border-radius-extra-small);
+  --el-border-radius-round: var(--semi-border-radius-full);
+  --el-border-radius-circle: var(--semi-border-radius-full);
+
+  /* 字体映射 */
+  --el-font-size-extra-small: var(--semi-font-size-small);
+  --el-font-size-small: var(--semi-font-size-small);
+  --el-font-size-base: var(--semi-font-size-regular);
+  --el-font-size-medium: var(--semi-font-size-regular);
+  --el-font-size-large: var(--semi-font-size-large);
+  --el-font-size-extra-large: 18px;
+
+  /* 阴影映射 */
+  --el-box-shadow: var(--semi-shadow-elevated);
+  --el-box-shadow-light: var(--semi-shadow-elevated);
+  --el-box-shadow-lighter: var(--semi-shadow-elevated);
+  --el-box-shadow-dark: var(--semi-shadow-floating);
+
+  /* 禁用色映射 */
+  --el-disabled-bg-color: var(--semi-color-disabled-bg);
+  --el-disabled-text-color: var(--semi-color-disabled-text);
+  --el-disabled-border-color: var(--semi-color-border);
+
+  /* 遮罩层 */
+  --el-overlay-color: rgba(22, 22, 26, 0.6);
+  --el-overlay-color-light: rgba(22, 22, 26, 0.4);
+  --el-overlay-color-lighter: rgba(22, 22, 26, 0.2);
+
+  /* 过渡 */
+  --el-transition-duration: var(--semi-transition-duration);
+  --el-transition-duration-fast: 0.1s;
+
+  /* 组件尺寸 */
+  --el-component-size-large: 40px;
+  --el-component-size: 32px;
+  --el-component-size-small: 24px;
+}
+
+/* ========== 深色模式变量 ========== */
+.semi-dark,
+.semi.dark,
+[data-theme="dark"] .semi,
+html.dark .semi {
+  /* Semi Design 深色模式变量 */
+  --semi-color-primary: #54A9FF;
+  --semi-color-primary-hover: #78BBFF;
+  --semi-color-primary-active: #3D9BFF;
+  --semi-color-primary-light-default: rgba(84, 169, 255, 0.15);
+  --semi-color-primary-light-hover: rgba(84, 169, 255, 0.2);
+
+  --semi-color-success: #5DC264;
+  --semi-color-success-hover: #70CC76;
+  --semi-color-success-light-default: rgba(93, 194, 100, 0.15);
+
+  --semi-color-warning: #FFA633;
+  --semi-color-warning-hover: #FFB54D;
+  --semi-color-warning-light-default: rgba(255, 166, 51, 0.15);
+
+  --semi-color-danger: #FC7266;
+  --semi-color-danger-hover: #FD8A80;
+  --semi-color-danger-light-default: rgba(252, 114, 102, 0.15);
+
+  --semi-color-text-0: rgba(249, 249, 249, 1);
+  --semi-color-text-1: rgba(249, 249, 249, 0.8);
+  --semi-color-text-2: rgba(249, 249, 249, 0.62);
+  --semi-color-text-3: rgba(249, 249, 249, 0.35);
+
+  --semi-color-fill-0: rgba(255, 255, 255, 0.08);
+  --semi-color-fill-1: rgba(255, 255, 255, 0.12);
+  --semi-color-fill-2: rgba(255, 255, 255, 0.16);
+
+  --semi-color-border: rgba(255, 255, 255, 0.08);
+  --semi-color-border-hover: rgba(255, 255, 255, 0.12);
+  --semi-color-focus-border: #54A9FF;
+
+  --semi-color-disabled-fill: rgba(255, 255, 255, 0.04);
+  --semi-color-disabled-text: rgba(249, 249, 249, 0.35);
+  --semi-color-disabled-bg: rgba(255, 255, 255, 0.04);
+
+  --semi-color-bg-0: #16161A;
+  --semi-color-bg-1: #232429;
+  --semi-color-bg-2: #2E3035;
+  --semi-color-bg-3: #3A3D42;
+
+  --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.25);
+  --semi-shadow-floating: 0 0 1px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3);
+
+  /* Element Plus 深色模式背景 */
+  --el-bg-color: var(--semi-color-bg-0);
+  --el-bg-color-page: var(--semi-color-bg-0);
+  --el-bg-color-overlay: var(--semi-color-bg-1);
+  --el-fill-color-blank: var(--semi-color-bg-1);
+}
+
+/* ========== 全局基础样式重置 ========== */
+.semi {
+  color: var(--semi-color-text-0);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: var(--semi-font-size-regular);
+  line-height: 1.5715;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/dist/element/styles/components/affix.css

@@ -0,0 +1,7 @@
+/**
+ * Element Plus Affix - Semi Design 风格
+ */
+
+body.semi .el-affix--fixed {
+  z-index: 100;
+}

package/dist/element/styles/components/alert.css

@@ -0,0 +1,44 @@
+/**
+ * Element Plus Alert - Semi Design 风格
+ */
+
+body.semi .el-alert {
+  border: none;
+  border-radius: var(--semi-border-radius-small);
+}
+
+body.semi .el-alert--success {
+  background-color: var(--semi-color-success-light-default);
+}
+
+body.semi .el-alert--success .el-alert__title {
+  color: var(--semi-color-success);
+}
+
+body.semi .el-alert--warning {
+  background-color: var(--semi-color-warning-light-default);
+}
+
+body.semi .el-alert--warning .el-alert__title {
+  color: var(--semi-color-warning);
+}
+
+body.semi .el-alert--error {
+  background-color: var(--semi-color-danger-light-default);
+}
+
+body.semi .el-alert--error .el-alert__title {
+  color: var(--semi-color-danger);
+}
+
+body.semi .el-alert--info {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-alert--info .el-alert__title {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-alert__description {
+  color: var(--semi-color-text-1);
+}

package/dist/element/styles/components/anchor.css

@@ -0,0 +1,34 @@
+/**
+ * Element Plus Anchor (如果有) - Semi Design 风格
+ * 注：Element Plus 没有官方的 Anchor 组件，此文件为预留
+ */
+
+body.semi .el-anchor {
+  padding-left: 2px;
+}
+
+body.semi .el-anchor__list {
+  padding-left: 16px;
+}
+
+body.semi .el-anchor__link {
+  color: var(--semi-color-text-2);
+  padding: 4px 0;
+  font-size: var(--semi-font-size-regular);
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-anchor__link:hover {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-anchor__link.is-active {
+  color: var(--semi-color-primary);
+  font-weight: 500;
+}
+
+body.semi .el-anchor__marker {
+  background-color: var(--semi-color-primary);
+  width: 2px;
+  border-radius: 1px;
+}