@apollo-design/theme 0.0.0-stage → 0.1.9

package/dist/vue.mjs

@@ -0,0 +1,113 @@
+import { defineComponent, provide, watch, onMounted, onUnmounted, inject, ref, computed, getCurrentInstance } from 'vue';
+import { DEFAULT_CSS_VAR_PREFIX, applyCSSVar, createCSSVarScope } from './css-var.mjs';
+import { getDesignToken } from './get-design-token.mjs';
+import { mergeThemeConfig } from './merge-theme.mjs';
+
+const ThemeContextKey = Symbol("apollo-theme");
+function createContext(config, fallback = false) {
+  const cfg = ref(config);
+  const systemAppearance = ref("light");
+  const token = computed(() => getDesignToken(cfg.value, systemAppearance.value));
+  const sourceActive = computed(() => !fallback || Object.keys(cfg.value).length > 0);
+  if (!fallback && getCurrentInstance()) {
+    let stopMode;
+    onMounted(() => {
+      stopMode = watch(
+        () => cfg.value.mode,
+        (mode, _previous, cleanup) => {
+          if (mode !== "system" || typeof window.matchMedia !== "function") return;
+          const media = window.matchMedia("(prefers-color-scheme: dark)");
+          const update = () => {
+            systemAppearance.value = media.matches ? "dark" : "light";
+          };
+          update();
+          media.addEventListener("change", update);
+          cleanup(() => media.removeEventListener("change", update));
+        },
+        { immediate: true, flush: "sync" }
+      );
+    });
+    onUnmounted(() => stopMode?.());
+  }
+  return { config: cfg, token, sourceActive };
+}
+function createThemeContext(config) {
+  return createContext(config);
+}
+const appContexts = /* @__PURE__ */ new WeakMap();
+function getDefaultContext() {
+  const app = getCurrentInstance()?.appContext;
+  if (!app) return createContext({}, true);
+  let context = appContexts.get(app);
+  if (!context) {
+    context = createContext({}, true);
+    appContexts.set(app, context);
+  }
+  return context;
+}
+function useTheme() {
+  return inject(ThemeContextKey, getDefaultContext, true);
+}
+function useToken() {
+  return useTheme().token;
+}
+function injectTokenCssVar(el, token, prefix = DEFAULT_CSS_VAR_PREFIX) {
+  applyCSSVar(el, token, prefix);
+}
+function copyConfig(config) {
+  return {
+    ...config,
+    ...config.token ? { token: { ...config.token } } : {},
+    ...config.components ? {
+      components: Object.fromEntries(
+        Object.entries(config.components).map(([name, tokens]) => [name, { ...tokens }])
+      )
+    } : {},
+    ...Array.isArray(config.algorithm) ? { algorithm: [...config.algorithm] } : {}
+  };
+}
+const ThemeProvider = /* @__PURE__ */ defineComponent({
+  name: "AThemeProvider",
+  inheritAttrs: false,
+  props: {
+    theme: { type: Object, default: () => ({}) },
+    injectCssVar: { type: Boolean, default: false },
+    target: { type: Object, default: void 0 }
+  },
+  slots: Object,
+  setup(props, { slots }) {
+    const parent = useTheme();
+    const parentConfig = () => props.theme.inherit !== true || parent.sourceActive?.value === false ? void 0 : parent.config.value;
+    const ctx = createThemeContext(copyConfig(mergeThemeConfig(parentConfig(), props.theme) ?? {}));
+    provide(ThemeContextKey, ctx);
+    watch(
+      [() => props.theme, parentConfig],
+      ([next, inherited]) => {
+        ctx.config.value = copyConfig(mergeThemeConfig(inherited, next) ?? {});
+      },
+      { deep: true }
+    );
+    let stopInjection;
+    onMounted(() => {
+      stopInjection = watch(
+        [
+          () => props.injectCssVar,
+          () => props.target,
+          () => ctx.config.value.cssVarPrefix ?? DEFAULT_CSS_VAR_PREFIX,
+          ctx.token
+        ],
+        ([enabled, target, prefix, token], _previous, onCleanup) => {
+          if (!enabled) return;
+          const scope = createCSSVarScope(target ?? document.documentElement, prefix);
+          scope.apply(token);
+          onCleanup(() => scope.remove());
+        },
+        { immediate: true, flush: "post" }
+      );
+    });
+    onUnmounted(() => stopInjection?.());
+    return () => slots.default?.();
+  }
+});
+
+export { ThemeContextKey, ThemeProvider, createThemeContext, injectTokenCssVar, useTheme, useToken };

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "@apollo-design/theme",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.9",
+  "description": "Token Runtime：Seed → Map → Alias → Component 的完整派生链，以及 Token → CSS 变量的注入。",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./presets/default": {
+      "types": "./dist/presets/default.d.ts",
+      "import": "./dist/presets/default.mjs"
+    },
+    "./presets/mono": {
+      "types": "./dist/presets/mono.d.ts",
+      "import": "./dist/presets/mono.mjs"
+    },
+    "./presets/material3": {
+      "types": "./dist/presets/material3.d.ts",
+      "import": "./dist/presets/material3.mjs"
+    },
+    "./presets/default.css": "./dist/presets/default.css",
+    "./presets/mono.css": "./dist/presets/mono.css",
+    "./presets/material3.css": "./dist/presets/material3.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@apollo-design/utils": "0.1.9"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.42"
+  },
+  "devDependencies": {
+    "@apollo-design/test-utils": "0.1.9",
+    "@ant-design/colors": "^8.0.1",
+    "@ant-design/fast-color": "^3.0.1"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "test": "vitest run",
+    "lint": "vue-tsc --noEmit"
+  }
 }