advance-semi-theme 1.0.0

package/dist/antd/styles/overrides.css

@@ -0,0 +1,147 @@
+/**
+ * Token 无法覆盖的补充样式
+ * 这些是 Ant Design Vue Token 系统未暴露的样式属性
+ */
+
+/* ========== 全局过渡效果 ========== */
+body,
+body * {
+  transition-property: background-color, color, border-color, box-shadow;
+  transition-duration: 0.2s;
+  transition-timing-function: ease;
+}
+
+/* ========== 滚动条样式（Token 不支持） ========== */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(46, 50, 56, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(46, 50, 56, 0.3);
+}
+
+/* ========== 选区样式（Token 不支持） ========== */
+::selection {
+  background: rgba(0, 100, 250, 0.2);
+}
+
+/* ========== 按钮点击缩放效果（Token 不支持） ========== */
+.ant-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}
+
+/* ========== 卡片 hover 效果增强（Token 不支持） ========== */
+.ant-card-hoverable:hover {
+  transform: translateY(-2px);
+  transition: all 0.2s ease;
+}
+
+/* ========== 输入框 focus 时背景变白（Token 部分支持，需补充） ========== */
+.ant-input:focus,
+.ant-input-affix-wrapper-focused,
+.ant-select-focused .ant-select-selector,
+.ant-picker-focused {
+  background-color: #fff !important;
+}
+
+/* ========== 浮层阴影增强（Token 不够精细） ========== */
+.ant-dropdown,
+.ant-select-dropdown,
+.ant-picker-dropdown .ant-picker-panel-container,
+.ant-tooltip-inner {
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
+}
+
+/* ========== Modal/Drawer 圆角（Token 设置可能不完整） ========== */
+.ant-modal-content {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.ant-drawer-content {
+  border-radius: 0;
+}
+
+.ant-drawer-left .ant-drawer-content,
+.ant-drawer-right .ant-drawer-content {
+  border-radius: 0;
+}
+
+.ant-drawer-top .ant-drawer-content {
+  border-radius: 0 0 12px 12px;
+}
+
+.ant-drawer-bottom .ant-drawer-content {
+  border-radius: 12px 12px 0 0;
+}
+
+/* ========== Steps 图标容器（Token 不支持背景形状） ========== */
+.ant-steps-item-process .ant-steps-item-icon {
+  background: rgba(0, 100, 250, 0.1);
+  border: none;
+}
+
+.ant-steps-item-wait .ant-steps-item-icon {
+  background: rgba(46, 50, 56, 0.05);
+  border: none;
+}
+
+/* ========== Timeline 圆点（Token 不支持去边框） ========== */
+.ant-timeline-item-head {
+  border-width: 2px;
+}
+
+/* ========== Notification/Message 进入动画增强 ========== */
+.ant-message-notice-wrapper,
+.ant-notification-notice-wrapper {
+  animation-timing-function: cubic-bezier(0.22, 0.57, 0.02, 1.2);
+}
+
+/* ========== 表格行 hover 过渡（Token 不支持） ========== */
+.ant-table-tbody > tr {
+  transition: background-color 0.2s ease;
+}
+
+/* ========== Tag 关闭按钮 hover（Token 不支持） ========== */
+.ant-tag .ant-tag-close-icon:hover {
+  color: rgba(28, 31, 35, 1);
+}
+
+/* ========== 禁用态统一透明度（Token 可能不一致） ========== */
+.ant-btn:disabled,
+.ant-input:disabled,
+.ant-select-disabled,
+.ant-checkbox-disabled,
+.ant-radio-disabled,
+.ant-switch-disabled {
+  opacity: 0.6;
+}
+
+/* ========== Focus 可见性环（Token 不支持） ========== */
+*:focus-visible {
+  outline: 2px solid rgba(0, 100, 250, 0.3);
+  outline-offset: 2px;
+}
+
+button:focus-visible,
+[role="button"]:focus-visible,
+.ant-btn:focus-visible {
+  outline-offset: 1px;
+}
+
+/* 输入类组件不需要 focus-visible 环（已有 border 高亮） */
+.ant-input:focus-visible,
+.ant-select-selector:focus-visible,
+.ant-picker:focus-visible {
+  outline: none;
+}

package/dist/antd/styles/variables.css

@@ -0,0 +1,259 @@
+/**
+ * Semi Design CSS 变量定义
+ * 基于 Semi Design 官方规范
+ */
+
+: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-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 Design 官方规范 ========== */
+  --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));
+  --semi-color-ai-background-bottom: linear-gradient(201.15deg, rgba(255, 255, 255, 0.04) 6.58%, rgba(255, 226, 138, 0.04) 32.88%, rgba(231, 45, 255, 0.04) 67.93%, rgba(0, 115, 255, 0.04) 94.23%);
+  --semi-color-ai-background-top: linear-gradient(201.15deg, rgba(83, 56, 255, 0.16) 6.58%, rgba(176, 48, 240, 0.096) 32.88%, rgba(231, 45, 255, 0.048) 59.17%, rgba(255, 255, 255, 0) 94.23%);
+}
+
+/* ========== 暗色模式 ========== */
+[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/chunk-FMQWBDDZ.js

@@ -0,0 +1,207 @@
+// src/antd/plugin.ts
+var SUPPORTED_COMPONENTS = [
+  "Button",
+  "Input",
+  "Select",
+  "Checkbox",
+  "Radio",
+  "Switch",
+  "Slider",
+  "Rate",
+  "DatePicker",
+  "TimePicker",
+  "Upload",
+  "Transfer",
+  "Tree",
+  "TreeSelect",
+  "Form",
+  "Table",
+  "Card",
+  "Tag",
+  "Tabs",
+  "Collapse",
+  "List",
+  "Avatar",
+  "Badge",
+  "Timeline",
+  "Modal",
+  "Drawer",
+  "Message",
+  "Notification",
+  "Tooltip",
+  "Popover",
+  "Popconfirm",
+  "Progress",
+  "Alert",
+  "Steps",
+  "Pagination",
+  "Menu",
+  "Dropdown",
+  "Breadcrumb",
+  "Anchor",
+  "BackTop",
+  "Spin",
+  "Skeleton",
+  "Empty",
+  "Result",
+  "Image",
+  "Carousel",
+  "Calendar",
+  "Descriptions",
+  "Statistic",
+  "Divider",
+  "Space",
+  "Cascader",
+  "Mentions",
+  "AutoComplete",
+  "InputNumber",
+  "Segmented",
+  "FloatButton",
+  "Tour",
+  "Watermark",
+  "Typography",
+  "Layout",
+  "Grid",
+  "Affix"
+];
+var componentClassMap = {
+  Button: "button",
+  Input: "input",
+  Select: "select",
+  Checkbox: "checkbox",
+  Radio: "radio",
+  Switch: "switch",
+  Slider: "slider",
+  Rate: "rate",
+  DatePicker: "datepicker",
+  TimePicker: "timepicker",
+  Upload: "upload",
+  Transfer: "transfer",
+  Tree: "tree",
+  TreeSelect: "treeselect",
+  Form: "form",
+  Table: "table",
+  Card: "card",
+  Tag: "tag",
+  Tabs: "tabs",
+  Collapse: "collapse",
+  List: "list",
+  Avatar: "avatar",
+  Badge: "badge",
+  Timeline: "timeline",
+  Modal: "modal",
+  Drawer: "drawer",
+  Message: "message",
+  Notification: "notification",
+  Tooltip: "tooltip",
+  Popover: "popover",
+  Popconfirm: "popconfirm",
+  Progress: "progress",
+  Alert: "alert",
+  Steps: "steps",
+  Pagination: "pagination",
+  Menu: "menu",
+  Dropdown: "dropdown",
+  Breadcrumb: "breadcrumb",
+  Anchor: "anchor",
+  BackTop: "backtop",
+  Spin: "spin",
+  Skeleton: "skeleton",
+  Empty: "empty",
+  Result: "result",
+  Image: "image",
+  Carousel: "carousel",
+  Calendar: "calendar",
+  Descriptions: "descriptions",
+  Statistic: "statistic",
+  Divider: "divider",
+  Space: "space",
+  Cascader: "cascader",
+  Mentions: "mentions",
+  AutoComplete: "autocomplete",
+  InputNumber: "inputnumber",
+  Segmented: "segmented",
+  FloatButton: "floatbutton",
+  Tour: "tour",
+  Watermark: "watermark",
+  Typography: "typography",
+  Layout: "layout",
+  Grid: "grid",
+  Affix: "affix"
+};
+function createSemiTheme(options = {}) {
+  return {
+    install(app) {
+      const { components, exclude, dark = false, target = "body" } = options;
+      const applyTheme = () => {
+        const targetEl = document.querySelector(target);
+        if (!targetEl) {
+          console.warn(`[semi-theme/antd] Target element "${target}" not found`);
+          return;
+        }
+        targetEl.classList.add("semi");
+        document.body.classList.add("semi");
+        if (dark) {
+          targetEl.classList.add("semi-dark");
+          targetEl.setAttribute("data-theme", "dark");
+        }
+        let enabledComponents;
+        if (components && components.length > 0) {
+          enabledComponents = components;
+        } else if (exclude && exclude.length > 0) {
+          enabledComponents = SUPPORTED_COMPONENTS.filter((c) => !exclude.includes(c));
+        } else {
+          enabledComponents = [...SUPPORTED_COMPONENTS];
+        }
+        if (enabledComponents.length === SUPPORTED_COMPONENTS.length) {
+          targetEl.setAttribute("data-semi", "all");
+        } else {
+          const componentClasses = enabledComponents.map((c) => componentClassMap[c]);
+          targetEl.setAttribute("data-semi", componentClasses.join(","));
+          enabledComponents.forEach((c) => {
+            targetEl.setAttribute(`data-semi-${componentClassMap[c]}`, "");
+          });
+        }
+      };
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") {
+          document.addEventListener("DOMContentLoaded", applyTheme);
+        } else {
+          applyTheme();
+        }
+      }
+      app.config.globalProperties.$semiTheme = {
+        toggle: (component, enabled) => {
+          const targetEl = document.querySelector(target);
+          if (!targetEl) return;
+          const attr = `data-semi-${componentClassMap[component]}`;
+          if (enabled) {
+            targetEl.setAttribute(attr, "");
+          } else {
+            targetEl.removeAttribute(attr);
+          }
+        },
+        setDark: (isDark) => {
+          const targetEl = document.querySelector(target);
+          if (!targetEl) return;
+          if (isDark) {
+            targetEl.classList.add("semi-dark");
+            targetEl.setAttribute("data-theme", "dark");
+          } else {
+            targetEl.classList.remove("semi-dark");
+            targetEl.removeAttribute("data-theme");
+          }
+        }
+      };
+    }
+  };
+}
+var SemiThemePlugin = createSemiTheme();
+var plugin_default = createSemiTheme;
+
+export {
+  SUPPORTED_COMPONENTS,
+  createSemiTheme,
+  SemiThemePlugin,
+  plugin_default
+};