@w3payments/common 1.2.1 → 1.3.0

package/dist/index.mjs

@@ -1,3 +1,42 @@
+const defaultTheme = {
+  primary: "#2563eb",
+  background: "#ffffff",
+  text: "#000000",
+  textSecondary: "#6b7280",
+  danger: "#dc2626",
+  success: "#16a34a",
+  warning: "#ca8a04",
+  border: "#e5e7eb",
+  fontFamily: "Inter, system-ui, sans-serif",
+  fontSizeBase: "14px",
+  fontSizeSmall: "12px",
+  fontSizeLarge: "32px",
+  fontWeightNormal: "400",
+  spacingUnit: "4px",
+  borderRadius: "8px",
+  buttonRadius: "6px"
+};
+const BUILT_IN_THEMES = {
+  default: defaultTheme,
+  night: {
+    ...defaultTheme,
+    primary: "#0085FF",
+    background: "#14171D",
+    text: "#C9CED8",
+    textSecondary: "#8C99AD",
+    danger: "#F23154",
+    border: "#2B3039"
+  }
+};
+const getThemeVariables = (themeName = "default", appearance) => {
+  const baseTheme = BUILT_IN_THEMES[themeName] || BUILT_IN_THEMES.default;
+  const finalVariables = { ...baseTheme, ...appearance?.variables };
+  const cssVars = {};
+  Object.entries(finalVariables).forEach(([key, value]) => {
+    cssVars[`--w3-${key}`] = value;
+  });
+  return cssVars;
+};
 class PaymentMethodService {
   static instance;
   paymentMethods = /* @__PURE__ */ new Map();
@@ -468,78 +507,6 @@ function truncateToCurrencyDecimals(value, currency) {
   const truncatedDecimal = parts[1].substring(0, currency.decimals);
   return truncatedDecimal.length > 0 ? `${parts[0]}.${truncatedDecimal}` : parts[0];
 }
-function camelToKebab(str) {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-function getDefaultVariables() {
-  return {
-    colorPrimary: "#6366f1",
-    colorPrimaryHover: "#4f46e5",
-    colorPrimaryLight: "#e0e7ff",
-    colorBackground: "#ffffff",
-    colorText: "#1f2937",
-    colorTextMuted: "#6b7280",
-    colorBorder: "#e5e7eb",
-    colorBorderLight: "#f3f4f6",
-    colorDanger: "#ef4444",
-    colorSuccess: "#10b981",
-    fontFamily: "system-ui, -apple-system, sans-serif",
-    fontSize: "1rem",
-    borderRadius: "0.5rem",
-    spacing: "1rem"
-  };
-}
-function getThemePreset(themeName) {
-  const defaults = getDefaultVariables();
-  switch (themeName) {
-    case "dark":
-      return {
-        ...defaults,
-        colorPrimary: "#6366f1",
-        colorPrimaryHover: "#7c3aed",
-        colorPrimaryLight: "#1e1b4b",
-        colorBackground: "#111827",
-        colorText: "#f9fafb",
-        colorTextMuted: "#9ca3af",
-        colorBorder: "#374151",
-        colorBorderLight: "#4b5563"
-      };
-    case "light":
-    default:
-      return defaults;
-  }
-}
-function applyTheme(themeInput, container) {
-  const theme = typeof themeInput === "string" ? { theme: themeInput } : themeInput;
-  const baseVariables = getThemePreset(theme.theme ?? "light");
-  const finalVariables = { ...baseVariables, ...theme.variables };
-  Object.entries(finalVariables).forEach(([key, value]) => {
-    if (value !== void 0) {
-      const cssVar = `--${camelToKebab(key)}`;
-      container.style.setProperty(cssVar, value);
-    }
-  });
-  if (theme.theme) {
-    container.setAttribute("data-theme", theme.theme);
-  }
-  if (theme.rules) {
-    applyComponentRules(theme.rules);
-  }
-}
-function applyComponentRules(rules) {
-  const styleId = "w3-theme-rules";
-  let styleElement = document.getElementById(styleId);
-  if (!styleElement) {
-    styleElement = document.createElement("style");
-    styleElement.id = styleId;
-    document.head.appendChild(styleElement);
-  }
-  const css = Object.entries(rules).map(([selector, styles]) => {
-    const cssProperties = Object.entries(styles).map(([prop, value]) => `${camelToKebab(prop)}: ${value};`).join(" ");
-    return `.w3-widget ${selector} { ${cssProperties} }`;
-  }).join("\n");
-  styleElement.textContent = css;
-}
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -2878,7 +2845,6 @@ export {
   CURRENCIES,
   NETWORKS,
   PaymentMethodService,
-  applyTheme,
   copyToClipboard,
   currencyService,
   formatCurrencyDisplay,
@@ -2892,6 +2858,7 @@ export {
   getCurrencyIcon,
   getExchangeIcon,
   getFiatIcon,
+  getThemeVariables,
   networkService,
   paymentMethodService,
   truncateToCurrencyDecimals,