@salesforce/ui-theme-manager 11.46.0

package/dist/runtime/theme-preview-runtime.js

@@ -0,0 +1,466 @@
+/**
+ * Theme Preview Runtime (Bundled)
+ *
+ * Auto-generated by esbuild from the modular theme preview runtime.
+ * Do not edit this file directly - edit previewRuntime.ts.
+ */
+(function () {
+
+"use strict";
+(() => {
+  // src/runtime/fontFace.ts
+  var KNOWN_FONTS = {
+    "Salesforce Sans": "https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans.woff2"
+  };
+  function generateFontFaceRules(brand) {
+    const rules = [];
+    const processedFonts = /* @__PURE__ */ new Set();
+    const addFontFace = (font) => {
+      if (!font || typeof font !== "object") return;
+      if (!("name" in font)) return;
+      const fontObj = font;
+      const name = fontObj.name;
+      if (processedFonts.has(name)) return;
+      processedFonts.add(name);
+      const fontUrl = fontObj.url || fontObj.src || fontObj.fontUrl || fontObj.woff2;
+      if (fontUrl) {
+        rules.push(`    @font-face {
+      font-family: "${name}";
+      src: url("${fontUrl}") format("woff2");
+      font-display: swap;
+    }`);
+        return;
+      }
+      if (KNOWN_FONTS[name]) {
+        rules.push(`    @font-face {
+      font-family: "${name}";
+      src: url("${KNOWN_FONTS[name]}") format("woff2");
+      font-display: swap;
+    }`);
+      }
+    };
+    if (brand.baseFontFamily) {
+      addFontFace(brand.baseFontFamily);
+    }
+    const heading1 = brand.typography?.heading?.heading1;
+    if (heading1?.fontFamily) {
+      addFontFace(heading1.fontFamily);
+    }
+    return rules.length > 0 ? "\n" + rules.join("\n") + "\n" : "";
+  }
+
+  // src/protocol/brandResolver.ts
+  var BRAND_REF_PATTERN = /^\{!\$brand\.([^}]+)\}$/;
+  var MAX_RESOLVE_DEPTH = 10;
+  function isBrandRef(value) {
+    return typeof value === "string" && BRAND_REF_PATTERN.test(value);
+  }
+  function resolveRef(brand, ref, depth = 0) {
+    if (depth > MAX_RESOLVE_DEPTH) {
+      throw new Error(`Max resolution depth exceeded resolving: ${ref}`);
+    }
+    if (!isBrandRef(ref)) {
+      return ref;
+    }
+    const match = ref.match(BRAND_REF_PATTERN);
+    if (!match || !match[1]) {
+      return ref;
+    }
+    const path = match[1];
+    const parts = path.split(".");
+    let current = brand;
+    for (const part of parts) {
+      if (current == null || typeof current !== "object") {
+        throw new Error(`Invalid reference path: ${ref} (failed at ${part})`);
+      }
+      current = current[part];
+      if (current === void 0) {
+        throw new Error(`Reference not found: ${ref} (${part} is undefined)`);
+      }
+    }
+    if (isBrandRef(current)) {
+      return resolveRef(brand, current, depth + 1);
+    }
+    return current;
+  }
+  function resolveValue(brand, value) {
+    if (value == null) {
+      return value;
+    }
+    if (isBrandRef(value)) {
+      const resolved = resolveRef(brand, value);
+      return resolveValue(brand, resolved);
+    }
+    if (Array.isArray(value)) {
+      return value.map((item) => resolveValue(brand, item));
+    }
+    if (typeof value === "object") {
+      const result = {};
+      for (const [key, val] of Object.entries(value)) {
+        result[key] = resolveValue(brand, val);
+      }
+      return result;
+    }
+    return value;
+  }
+  function resolveBrandTokens(brand) {
+    return resolveValue(brand, brand);
+  }
+
+  // src/protocol/brandCss.ts
+  function formatDimension(dim) {
+    return `${dim.value}${dim.unit}`;
+  }
+  function buildFontStack(font) {
+    if (typeof font === "string" && font.startsWith("{!$brand")) {
+      return "system-ui, -apple-system, sans-serif";
+    }
+    if (typeof font === "string") {
+      const quoted = font.includes(" ") ? `"${font}"` : font;
+      return `${quoted}, sans-serif`;
+    }
+    if (typeof font === "object" && font && "name" in font) {
+      const fontObj = font;
+      const parts = [];
+      const quotedName = fontObj.name.includes(" ") ? `"${fontObj.name}"` : fontObj.name;
+      parts.push(quotedName);
+      if (fontObj.fallbacks && fontObj.fallbacks.length > 0) {
+        for (const fallback of fontObj.fallbacks) {
+          const quoted = fallback.includes(" ") ? `"${fallback}"` : fallback;
+          parts.push(quoted);
+        }
+      }
+      if (fontObj.category) {
+        parts.push(fontObj.category);
+      }
+      return parts.join(", ");
+    }
+    return "system-ui, -apple-system, sans-serif";
+  }
+  function brandToVariables(brand) {
+    const vars = {};
+    if (brand.colorScheme.primaryAccent) {
+      vars["--tm-color-primary"] = brand.colorScheme.primaryAccent;
+    }
+    if (brand.colorScheme.primaryAccentDerived) {
+      vars["--tm-color-secondary"] = brand.colorScheme.primaryAccentDerived;
+    }
+    if (brand.colorScheme.root) {
+      vars["--tm-color-background"] = brand.colorScheme.root;
+    }
+    if (brand.colorScheme.neutral) {
+      vars["--tm-color-surface"] = brand.colorScheme.neutral;
+      vars["--tm-color-text-secondary"] = brand.colorScheme.neutral;
+    }
+    if (brand.colorScheme.contrast) {
+      vars["--tm-color-text"] = brand.colorScheme.contrast;
+    }
+    if (brand.colorScheme.primaryAccentContrast) {
+      vars["--tm-color-accent"] = brand.colorScheme.primaryAccentContrast;
+    }
+    if (brand.baseFontFamily) {
+      const baseFont = brand.baseFontFamily;
+      vars["--tm-font-body"] = buildFontStack(baseFont);
+    }
+    const heading1 = brand.typography?.heading?.heading1;
+    if (heading1?.fontFamily) {
+      const headingFont = heading1.fontFamily;
+      vars["--tm-font-heading"] = buildFontStack(headingFont);
+    }
+    if (brand.baseFontSize) {
+      vars["--tm-font-size-base"] = formatDimension(brand.baseFontSize);
+    }
+    if (brand.fontWeight?.normal !== void 0) {
+      vars["--tm-body-weight"] = String(brand.fontWeight.normal);
+    }
+    if (brand.fontWeight?.bold !== void 0) {
+      vars["--tm-heading-weight"] = String(brand.fontWeight.bold);
+    }
+    const paragraph1 = brand.typography?.paragraph?.paragraph1;
+    if (paragraph1?.lineHeight !== void 0) {
+      vars["--tm-line-height"] = String(paragraph1.lineHeight);
+    }
+    if (brand.spacing?.medium?.top) {
+      vars["--tm-spacing-base"] = formatDimension(brand.spacing.medium.top);
+    }
+    if (brand.borderRadius?.round) {
+      const roundRadius = formatDimension(brand.borderRadius.round);
+      vars["--tm-border-radius"] = roundRadius;
+      vars["--tm-border-radius-small"] = roundRadius;
+      vars["--tm-border-radius-large"] = roundRadius;
+    }
+    const primaryButton = brand.buttonStyleGroup?.primary;
+    if (primaryButton) {
+      const colorGroup = primaryButton["lightning:buttonColorGroup"];
+      if (colorGroup?.backgroundColor) {
+        const bg = colorGroup.backgroundColor;
+        vars["--tm-button-primary-bg"] = typeof bg === "string" ? bg : "";
+      }
+      if (colorGroup?.textColor) {
+        const text = colorGroup.textColor;
+        vars["--tm-button-primary-text"] = typeof text === "string" ? text : "";
+      }
+      if (colorGroup?.borderColor) {
+        const border = colorGroup.borderColor;
+        vars["--tm-button-primary-border"] = typeof border === "string" ? border : "";
+      }
+      const borderRadius = primaryButton["lightning:borderRadius"];
+      if (borderRadius && typeof borderRadius === "object" && "unit" in borderRadius) {
+        vars["--tm-button-radius"] = formatDimension(borderRadius);
+      }
+      const borderWidth = primaryButton["lightning:borderWidth"];
+      if (borderWidth && typeof borderWidth === "object" && "unit" in borderWidth) {
+        vars["--tm-button-primary-border-width"] = formatDimension(borderWidth);
+      }
+      const padding = primaryButton["lightning:padding"];
+      if (padding?.left) {
+        vars["--tm-button-padding-x"] = formatDimension(padding.left);
+      }
+      if (padding?.top) {
+        vars["--tm-button-padding-y"] = formatDimension(padding.top);
+      }
+    }
+    const secondaryButton = brand.buttonStyleGroup?.secondary;
+    if (secondaryButton) {
+      const colorGroup = secondaryButton["lightning:buttonColorGroup"];
+      if (colorGroup?.backgroundColor) {
+        const bg = colorGroup.backgroundColor;
+        vars["--tm-button-secondary-bg"] = typeof bg === "string" ? bg : "";
+      }
+      if (colorGroup?.textColor) {
+        const text = colorGroup.textColor;
+        vars["--tm-button-secondary-text"] = typeof text === "string" ? text : "";
+      }
+      if (colorGroup?.borderColor) {
+        const border = colorGroup.borderColor;
+        vars["--tm-button-secondary-border"] = typeof border === "string" ? border : "";
+      }
+      const borderRadius = secondaryButton["lightning:borderRadius"];
+      if (borderRadius && typeof borderRadius === "object" && "unit" in borderRadius) {
+        vars["--tm-button-secondary-radius"] = formatDimension(borderRadius);
+      }
+      const borderWidth = secondaryButton["lightning:borderWidth"];
+      if (borderWidth && typeof borderWidth === "object" && "unit" in borderWidth) {
+        vars["--tm-button-secondary-border-width"] = formatDimension(borderWidth);
+      }
+      const padding = secondaryButton["lightning:padding"];
+      if (padding?.left) {
+        vars["--tm-button-secondary-padding-x"] = formatDimension(padding.left);
+      }
+      if (padding?.top) {
+        vars["--tm-button-secondary-padding-y"] = formatDimension(padding.top);
+      }
+    }
+    const tertiaryButton = brand.buttonStyleGroup?.tertiary;
+    if (tertiaryButton) {
+      const colorGroup = tertiaryButton["lightning:buttonColorGroup"];
+      if (colorGroup?.backgroundColor) {
+        const bg = colorGroup.backgroundColor;
+        vars["--tm-button-tertiary-bg"] = typeof bg === "string" ? bg : "";
+      }
+      if (colorGroup?.textColor) {
+        const text = colorGroup.textColor;
+        vars["--tm-button-tertiary-text"] = typeof text === "string" ? text : "";
+      }
+      if (colorGroup?.borderColor) {
+        const border = colorGroup.borderColor;
+        vars["--tm-button-tertiary-border"] = typeof border === "string" ? border : "";
+      }
+      const borderRadius = tertiaryButton["lightning:borderRadius"];
+      if (borderRadius && typeof borderRadius === "object" && "unit" in borderRadius) {
+        vars["--tm-button-tertiary-radius"] = formatDimension(borderRadius);
+      }
+      const borderWidth = tertiaryButton["lightning:borderWidth"];
+      if (borderWidth && typeof borderWidth === "object" && "unit" in borderWidth) {
+        vars["--tm-button-tertiary-border-width"] = formatDimension(borderWidth);
+      }
+      const padding = tertiaryButton["lightning:padding"];
+      if (padding?.left) {
+        vars["--tm-button-tertiary-padding-x"] = formatDimension(padding.left);
+      }
+      if (padding?.top) {
+        vars["--tm-button-tertiary-padding-y"] = formatDimension(padding.top);
+      }
+    }
+    for (let i = 1; i <= 6; i++) {
+      const heading = brand.typography?.heading?.[`heading${i}`];
+      if (heading && typeof heading === "object") {
+        if (heading.fontFamily) {
+          vars[`--tm-heading${i}-font`] = buildFontStack(heading.fontFamily);
+        }
+        if (heading.fontSize && typeof heading.fontSize === "object" && "unit" in heading.fontSize) {
+          vars[`--tm-heading${i}-size`] = formatDimension(heading.fontSize);
+        }
+        if (heading.fontWeight !== void 0) {
+          vars[`--tm-heading${i}-weight`] = String(heading.fontWeight);
+        }
+        if (heading.lineHeight !== void 0) {
+          vars[`--tm-heading${i}-line-height`] = String(heading.lineHeight);
+        }
+      }
+    }
+    const para1 = brand.typography?.paragraph?.paragraph1;
+    if (para1) {
+      if (para1.fontFamily) {
+        vars["--tm-paragraph1-font"] = buildFontStack(para1.fontFamily);
+      }
+      if (para1.fontSize && typeof para1.fontSize === "object" && "unit" in para1.fontSize) {
+        vars["--tm-paragraph1-size"] = formatDimension(para1.fontSize);
+      }
+      if (para1.fontWeight !== void 0) {
+        vars["--tm-paragraph1-weight"] = String(para1.fontWeight);
+      }
+      if (para1.lineHeight !== void 0) {
+        vars["--tm-paragraph1-line-height"] = String(para1.lineHeight);
+      }
+    }
+    const para2 = brand.typography?.paragraph?.paragraph2;
+    if (para2) {
+      if (para2.fontFamily) {
+        vars["--tm-paragraph2-font"] = buildFontStack(para2.fontFamily);
+      }
+      if (para2.fontSize && typeof para2.fontSize === "object" && "unit" in para2.fontSize) {
+        vars["--tm-paragraph2-size"] = formatDimension(para2.fontSize);
+      }
+      if (para2.fontWeight !== void 0) {
+        vars["--tm-paragraph2-weight"] = String(para2.fontWeight);
+      }
+      if (para2.lineHeight !== void 0) {
+        vars["--tm-paragraph2-line-height"] = String(para2.lineHeight);
+      }
+    }
+    if (brand.borderRadius?.square) {
+      vars["--tm-border-radius-square"] = formatDimension(brand.borderRadius.square);
+    }
+    if (brand.borderRadius?.round) {
+      vars["--tm-border-radius-round"] = formatDimension(brand.borderRadius.round);
+    }
+    if (brand.borderWeight?.medium) {
+      vars["--tm-border-weight-medium"] = formatDimension(brand.borderWeight.medium);
+    }
+    if (brand.borderWeight?.none) {
+      vars["--tm-border-weight-none"] = formatDimension(brand.borderWeight.none);
+    }
+    return vars;
+  }
+
+  // src/protocol/brandTypes.ts
+  function getBrandTitle(brand) {
+    return brand["sfdc_cms:title"] ?? "Untitled Brand";
+  }
+  function getBrandLogoUrl(brand) {
+    const url = brand.logo?.url;
+    return typeof url === "string" && url.length > 0 ? url : void 0;
+  }
+  function getBrandLogoAltText(brand) {
+    const alt = brand.logo?.altText;
+    return typeof alt === "string" && alt.length > 0 ? alt : getBrandTitle(brand);
+  }
+
+  // src/protocol/messageTypes.ts
+  var MSG_UPDATE_THEME = "update-theme";
+  var MSG_UPDATE_COMPONENT_OVERRIDE = "update-component-override";
+  var MSG_UPDATE_BRAND = "update-brand";
+
+  // src/runtime/previewRuntime.ts
+  function applyThemeVariables(variables) {
+    requestAnimationFrame(() => {
+      const root = document.documentElement;
+      for (const [key, value] of Object.entries(variables)) {
+        if (key.startsWith("--tm-") && value != null) {
+          root.style.setProperty(key, value);
+        }
+      }
+    });
+  }
+  function injectFontFaces(brand) {
+    const css = generateFontFaceRules(brand);
+    let styleEl = document.head.querySelector("#tm-font-faces");
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = "tm-font-faces";
+      document.head.appendChild(styleEl);
+    }
+    styleEl.textContent = css;
+  }
+  function applyBrandLogo(brand) {
+    const section = document.querySelector("[data-brand-hero-section]");
+    if (!section) return;
+    const hero = section.querySelector("[data-brand-hero]");
+    const logoUrl = getBrandLogoUrl(brand);
+    let logo = section.querySelector("[data-brand-logo]");
+    if (logoUrl) {
+      if (!logo) {
+        logo = document.createElement("img");
+        logo.className = "brand-logo";
+        logo.setAttribute("data-brand-logo", "");
+        section.appendChild(logo);
+      }
+      logo.src = logoUrl;
+      logo.alt = getBrandLogoAltText(brand);
+      logo.hidden = false;
+      if (hero) hero.hidden = true;
+    } else {
+      if (logo) logo.hidden = true;
+      if (hero) hero.hidden = false;
+    }
+  }
+  function applyComponentOverride(component, overrides) {
+    requestAnimationFrame(() => {
+      const elements = document.querySelectorAll(
+        `[data-component-override="${component}"]`
+      );
+      elements.forEach((el) => {
+        if (overrides.styles) {
+          for (const [prop, value] of Object.entries(overrides.styles)) {
+            el.style.setProperty(prop, value);
+          }
+        }
+        if (overrides.cssVariables) {
+          for (const [varName, value] of Object.entries(overrides.cssVariables)) {
+            el.style.setProperty(varName, value);
+          }
+        }
+      });
+    });
+  }
+  function handlePreviewMessage(event) {
+    const message = event.data;
+    if (!message || !message.type) return;
+    switch (message.type) {
+      case MSG_UPDATE_THEME: {
+        const msg = message;
+        if (msg.variables) {
+          applyThemeVariables(msg.variables);
+        }
+        break;
+      }
+      case MSG_UPDATE_BRAND: {
+        const msg = message;
+        const resolved = msg.brand ? resolveBrandTokens(msg.brand) : void 0;
+        if (resolved) {
+          injectFontFaces(resolved);
+          applyBrandLogo(resolved);
+        }
+        const variables = msg.variables ?? (resolved ? brandToVariables(resolved) : void 0);
+        if (variables) {
+          applyThemeVariables(variables);
+        }
+        break;
+      }
+      case MSG_UPDATE_COMPONENT_OVERRIDE: {
+        const msg = message;
+        if (msg.component && msg.overrides) {
+          applyComponentOverride(msg.component, msg.overrides);
+        }
+        break;
+      }
+    }
+  }
+  if (typeof window !== "undefined") {
+    window.addEventListener("message", handlePreviewMessage);
+  }
+})();
+
+})();
+

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@salesforce/ui-theme-manager",
+  "description": "Theme management system for Salesforce UI Bundles",
+  "version": "11.46.0",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "type": "module",
+  "exports": {
+    "./protocol": {
+      "import": {
+        "types": "./dist/protocol/index.d.ts",
+        "default": "./dist/protocol/index.js"
+      },
+      "require": {
+        "types": "./dist/protocol/index.d.cts",
+        "default": "./dist/protocol/index.cjs"
+      }
+    },
+    "./runtime/preview": {
+      "types": "./dist/runtime/previewContent.d.ts",
+      "import": "./dist/runtime/previewContent.js"
+    },
+    "./authoring/react": {
+      "types": "./dist/authoring/react/index.d.ts",
+      "import": "./dist/authoring/react/index.js"
+    },
+    "./authoring/react/styles.css": "./dist/authoring/react/styles.css",
+    "./authoring/web-component": {
+      "types": "./dist/authoring/web-component/index.d.ts",
+      "import": "./dist/authoring/web-component/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && node scripts/fix-dts-extensions.mjs && node src/runtime/bundle-preview-runtime.mjs && node src/authoring/react/bundle-authoring-react.mjs && node src/authoring/web-component/bundle-authoring-web-component.mjs",
+    "clean": "rm -rf dist",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "chroma-js": "^2.4.2"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/chroma-js": "^2.4.4",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "esbuild": "^0.24.0",
+    "happy-dom": "^17.6.1",
+    "jsdom": "^25.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "ts-morph": "^25.0.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}