advance-semi-theme 1.0.0

package/dist/chunk-NGAVTDQ2.js

@@ -0,0 +1,200 @@
+// src/element/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",
+  "Avatar",
+  "Badge",
+  "Timeline",
+  "Dialog",
+  // Element Plus 用 Dialog 而不是 Modal
+  "Drawer",
+  "Message",
+  "Notification",
+  "Tooltip",
+  "Popover",
+  "Popconfirm",
+  "Progress",
+  "Alert",
+  "Steps",
+  "Pagination",
+  "Menu",
+  "Dropdown",
+  "Breadcrumb",
+  "Backtop",
+  "Loading",
+  // Element Plus 用 Loading 而不是 Spin
+  "Skeleton",
+  "Empty",
+  "Result",
+  "Image",
+  "Carousel",
+  "Calendar",
+  "Descriptions",
+  "Statistic",
+  "Divider",
+  "Space",
+  "Cascader",
+  "Autocomplete",
+  "InputNumber",
+  "Segmented",
+  "ColorPicker",
+  "Watermark",
+  "Text",
+  "Link"
+];
+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",
+  Avatar: "avatar",
+  Badge: "badge",
+  Timeline: "timeline",
+  Dialog: "dialog",
+  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",
+  Backtop: "backtop",
+  Loading: "loading",
+  Skeleton: "skeleton",
+  Empty: "empty",
+  Result: "result",
+  Image: "image",
+  Carousel: "carousel",
+  Calendar: "calendar",
+  Descriptions: "descriptions",
+  Statistic: "statistic",
+  Divider: "divider",
+  Space: "space",
+  Cascader: "cascader",
+  Autocomplete: "autocomplete",
+  InputNumber: "inputnumber",
+  Segmented: "segmented",
+  ColorPicker: "colorpicker",
+  Watermark: "watermark",
+  Text: "text",
+  Link: "link"
+};
+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/element] 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");
+          document.documentElement.classList.add("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");
+            document.documentElement.classList.add("dark");
+          } else {
+            targetEl.classList.remove("semi-dark");
+            targetEl.removeAttribute("data-theme");
+            document.documentElement.classList.remove("dark");
+          }
+        }
+      };
+    }
+  };
+}
+var SemiThemePlugin = createSemiTheme();
+var plugin_default = createSemiTheme;
+
+export {
+  SUPPORTED_COMPONENTS,
+  createSemiTheme,
+  SemiThemePlugin,
+  plugin_default
+};

package/dist/chunk-QQOB6AOA.js

@@ -0,0 +1,213 @@
+// src/core/colors.ts
+var semiColors = {
+  // Brand Colors - Blue
+  blue: {
+    0: "#EAF5FF",
+    1: "#CBE7FE",
+    2: "#98CDFD",
+    3: "#65B2FC",
+    4: "#3295FB",
+    5: "#0064FA",
+    6: "#0062D6",
+    7: "#004FB3",
+    8: "#003D8F",
+    9: "#002C6B"
+  },
+  // Secondary - Light Blue
+  lightBlue: {
+    0: "#E9F7FD",
+    1: "#C9ECFC",
+    2: "#95D8F8",
+    3: "#62C3F5",
+    4: "#30ACF1",
+    5: "#0095EE",
+    6: "#007BCA",
+    7: "#0063A7",
+    8: "#004B83",
+    9: "#00355F"
+  },
+  // Success - Green
+  green: {
+    0: "#ECF7EC",
+    1: "#D0F0D1",
+    2: "#A4E0A7",
+    3: "#7DD182",
+    4: "#5AC262",
+    5: "#3BB346",
+    6: "#30953B",
+    7: "#25772F",
+    8: "#1B5924",
+    9: "#113C18"
+  },
+  // Danger - Red
+  red: {
+    0: "#FEF2ED",
+    1: "#FEDDD2",
+    2: "#FDB7A5",
+    3: "#FB9078",
+    4: "#FA664C",
+    5: "#F93920",
+    6: "#D52515",
+    7: "#B2140C",
+    8: "#8E0805",
+    9: "#6A0103"
+  },
+  // Warning - Orange
+  orange: {
+    0: "#FFF8EA",
+    1: "#FEEECC",
+    2: "#FED998",
+    3: "#FDC165",
+    4: "#FDA633",
+    5: "#FC8800",
+    6: "#D26700",
+    7: "#A84A00",
+    8: "#7E3100",
+    9: "#541D00"
+  },
+  // Yellow
+  yellow: {
+    0: "#FFFDEA",
+    1: "#FEFBCB",
+    2: "#FDF398",
+    3: "#FCE865",
+    4: "#FBDA32",
+    5: "#FAC800",
+    6: "#D0AA00",
+    7: "#A78B00",
+    8: "#7D6A00",
+    9: "#534800"
+  },
+  // Tertiary - Grey
+  grey: {
+    0: "#F9F9F9",
+    1: "#E6E8EA",
+    2: "#C6CACD",
+    3: "#A7ABB0",
+    4: "#888D92",
+    5: "#6B7075",
+    6: "#555B61",
+    7: "#41464C",
+    8: "#2E3238",
+    9: "#1C1F23"
+  },
+  // AI Colors - Purple
+  aiPurple: {
+    0: "#F8EDFF",
+    1: "#F2DAFF",
+    2: "#E3B5FF",
+    3: "#D191FF",
+    4: "#BD6CFF",
+    5: "#A647FF",
+    6: "#8636DB",
+    7: "#6928B8",
+    8: "#4E1C94",
+    9: "#361270"
+  },
+  // Cyan
+  cyan: {
+    5: "#0095EE",
+    6: "#007BCA",
+    7: "#0063A7"
+  },
+  // Teal
+  teal: {
+    5: "#02A783",
+    6: "#018B6D",
+    7: "#006F56"
+  },
+  // Pink
+  pink: {
+    5: "#F5319D",
+    6: "#CF2682",
+    7: "#A91D69"
+  },
+  // Indigo
+  indigo: {
+    5: "#4F46E5",
+    6: "#4037C2",
+    7: "#322B9E"
+  }
+};
+var semiColorsRGB = {
+  blue: {
+    0: "234, 245, 255",
+    5: "0, 100, 250",
+    6: "0, 98, 214",
+    7: "0, 79, 179"
+  },
+  green: {
+    0: "236, 247, 236",
+    5: "59, 179, 70",
+    6: "48, 149, 59",
+    7: "38, 119, 48"
+  },
+  red: {
+    0: "254, 242, 237",
+    5: "249, 57, 32",
+    6: "213, 37, 21",
+    7: "178, 24, 13"
+  },
+  orange: {
+    0: "255, 248, 234",
+    5: "252, 136, 0",
+    6: "210, 103, 0",
+    7: "168, 72, 0"
+  },
+  grey: {
+    0: "249, 249, 249",
+    8: "46, 50, 56",
+    9: "28, 31, 35"
+  },
+  white: "255, 255, 255",
+  black: "0, 0, 0"
+};
+
+// src/core/index.ts
+function createBasePlugin(options = {}) {
+  const { components, exclude, dark = false, target = "body" } = options;
+  return {
+    setupDom() {
+      const targetElement = document.querySelector(target) || document.body;
+      targetElement.classList.add("semi");
+      if (dark) {
+        targetElement.setAttribute("data-theme", "dark");
+      }
+      if (components && components.length > 0) {
+        targetElement.setAttribute("data-semi", components.join(","));
+        components.forEach((comp) => {
+          targetElement.setAttribute(`data-semi-${comp.toLowerCase()}`, "");
+        });
+      } else if (exclude && exclude.length > 0) {
+        targetElement.setAttribute("data-semi", "all");
+        targetElement.setAttribute("data-semi-exclude", exclude.join(","));
+      } else {
+        targetElement.setAttribute("data-semi", "all");
+      }
+      return targetElement;
+    },
+    setDark(isDark) {
+      const targetElement = document.querySelector(target) || document.body;
+      if (isDark) {
+        targetElement.setAttribute("data-theme", "dark");
+      } else {
+        targetElement.removeAttribute("data-theme");
+      }
+    },
+    toggle(component, enabled) {
+      const targetElement = document.querySelector(target) || document.body;
+      const attr = `data-semi-${component.toLowerCase()}`;
+      if (enabled) {
+        targetElement.setAttribute(attr, "");
+      } else {
+        targetElement.removeAttribute(attr);
+      }
+    }
+  };
+}
+
+export {
+  semiColors,
+  semiColorsRGB,
+  createBasePlugin
+};

package/dist/core/index.d.ts

@@ -0,0 +1,179 @@
+/**
+ * Semi Design Color Palette
+ * 共享颜色定义，供 antd 和 element 主题使用
+ */
+declare const semiColors: {
+    blue: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    lightBlue: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    green: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    red: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    orange: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    yellow: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    grey: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    aiPurple: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+    };
+    cyan: {
+        5: string;
+        6: string;
+        7: string;
+    };
+    teal: {
+        5: string;
+        6: string;
+        7: string;
+    };
+    pink: {
+        5: string;
+        6: string;
+        7: string;
+    };
+    indigo: {
+        5: string;
+        6: string;
+        7: string;
+    };
+};
+declare const semiColorsRGB: {
+    blue: {
+        0: string;
+        5: string;
+        6: string;
+        7: string;
+    };
+    green: {
+        0: string;
+        5: string;
+        6: string;
+        7: string;
+    };
+    red: {
+        0: string;
+        5: string;
+        6: string;
+        7: string;
+    };
+    orange: {
+        0: string;
+        5: string;
+        6: string;
+        7: string;
+    };
+    grey: {
+        0: string;
+        8: string;
+        9: string;
+    };
+    white: string;
+    black: string;
+};
+
+/**
+ * Semi Theme Core
+ * 共享核心模块，供 antd 和 element 主题使用
+ */
+
+type SupportedComponent = 'Button' | 'Input' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'DatePicker' | 'TimePicker' | 'Upload' | 'Form' | 'Rate' | 'Slider' | 'Table' | 'Tag' | 'Badge' | 'Avatar' | 'Card' | 'Collapse' | 'Descriptions' | 'Empty' | 'List' | 'Statistic' | 'Tree' | 'TreeSelect' | 'Menu' | 'Tabs' | 'Breadcrumb' | 'Dropdown' | 'Pagination' | 'Steps' | 'Modal' | 'Dialog' | 'Drawer' | 'Message' | 'Notification' | 'Popconfirm' | 'Popover' | 'Tooltip' | 'Progress' | 'Result' | 'Skeleton' | 'Spin' | 'Loading' | 'Alert' | 'Calendar' | 'Carousel' | 'Image' | 'Timeline' | 'Transfer' | 'Divider' | 'Space' | 'Typography' | 'Anchor' | 'BackTop' | 'Backtop' | 'Watermark' | 'Text' | 'Link' | 'ColorPicker' | 'Autocomplete' | 'InputNumber' | 'Segmented' | 'CheckTag' | 'AutoComplete' | 'Mentions' | 'FloatButton' | 'Tour' | 'Layout' | 'Grid' | 'Affix' | 'Cascader';
+interface SemiThemeOptions {
+    /** 指定要应用主题的组件列表 */
+    components?: SupportedComponent[];
+    /** 排除不应用主题的组件列表 */
+    exclude?: SupportedComponent[];
+    /** 是否启用深色模式 */
+    dark?: boolean;
+    /** 挂载目标选择器，默认为 'body' */
+    target?: string;
+}
+declare function createBasePlugin(options?: SemiThemeOptions): {
+    setupDom(): Element;
+    setDark(isDark: boolean): void;
+    toggle(component: SupportedComponent, enabled: boolean): void;
+};
+
+export { type SemiThemeOptions, type SupportedComponent, createBasePlugin, semiColors, semiColorsRGB };

package/dist/core/index.js

@@ -0,0 +1,10 @@
+import {
+  createBasePlugin,
+  semiColors,
+  semiColorsRGB
+} from "../chunk-QQOB6AOA.js";
+export {
+  createBasePlugin,
+  semiColors,
+  semiColorsRGB
+};