@zencemarketing/spin-scratch-sdk 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/spin-wheel-sdk.umd.js

@@ -1,5 +1,5 @@
 /**
- * SpinWheel SDK v0.1.0-alpha.1
+ * SpinWheel SDK v0.1.0-alpha.2
  * (c) 2026 – MIT License
  * A dynamic, configurable Spin & Win wheel and Scratch Card SDK for Vanilla JS & React.
  */
@@ -32,6 +32,51 @@
    */
   function buildCSS(config, hexToRGBA) {
     const t = config.theme || {};
+    const isHexColor = (value) => typeof value === 'string' && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value.trim());
+    const parseRgbLike = (value) => {
+      if (typeof value !== 'string') return null;
+      const m = value.trim().match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+)\s*)?\)$/i);
+      if (!m) return null;
+      const r = Math.min(255, Math.max(0, Number(m[1])));
+      const g = Math.min(255, Math.max(0, Number(m[2])));
+      const b = Math.min(255, Math.max(0, Number(m[3])));
+      if ([r, g, b].some((n) => Number.isNaN(n))) return null;
+      return { r, g, b };
+    };
+    const parseHex = (value) => {
+      if (!isHexColor(value)) return null;
+      const hex = value.trim().slice(1);
+      if (hex.length === 3) {
+        const r = parseInt(hex[0] + hex[0], 16);
+        const g = parseInt(hex[1] + hex[1], 16);
+        const b = parseInt(hex[2] + hex[2], 16);
+        return { r, g, b };
+      }
+      const r = parseInt(hex.slice(0, 2), 16);
+      const g = parseInt(hex.slice(2, 4), 16);
+      const b = parseInt(hex.slice(4, 6), 16);
+      return { r, g, b };
+    };
+    const toRGBA = (value, alpha) => {
+      const rgb = parseHex(value) || parseRgbLike(value);
+      if (!rgb) return `rgba(0,0,0,${alpha})`;
+      return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
+    };
+    const darkenColor = (value, amount = 0.22) => {
+      const rgb = parseHex(value) || parseRgbLike(value);
+      if (!rgb) return null;
+      const factor = 1 - Math.min(0.9, Math.max(0, amount));
+      const r = Math.round(rgb.r * factor);
+      const g = Math.round(rgb.g * factor);
+      const b = Math.round(rgb.b * factor);
+      return `rgb(${r},${g},${b})`;
+    };
+    const readableTextOn = (bg) => {
+      const rgb = parseHex(bg) || parseRgbLike(bg);
+      if (!rgb) return '#1a1a1f';
+      const luma = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
+      return luma < 0.55 ? '#ffffff' : '#1a1a1f';
+    };
     
     // Extract theme colors with fallbacks
     const gold = t.gold || '#e8c547';
@@ -41,11 +86,16 @@
     const textMuted = t.textMuted || '#9ca3af';
     
     // Configurable colors
-    const titleColor = config.titleColor || goldLight;
+    const hasCustomTitleColor = config.titleColor !== null && config.titleColor !== undefined;
+    const titleSpinColor = hasCustomTitleColor ? config.titleColor : goldLight;
+    const titleWinColor = hasCustomTitleColor ? config.titleColor : goldDark;
     const subtitleColor = config.subtitleColor || textMuted;
     const ringColor = config.ringColor || gold;
     const pointerColor = config.pointerColor || gold;
-    const buttonBaseColor = config.buttonColor || gold;
+    const hasCustomButtonColor = config.buttonColor !== null && config.buttonColor !== undefined;
+    const buttonBaseColor = hasCustomButtonColor ? config.buttonColor : gold;
+    const buttonTextColor = hasCustomButtonColor ? readableTextOn(buttonBaseColor) : '#1a1a1f';
+    const buttonEdgeColor = hasCustomButtonColor ? (darkenColor(buttonBaseColor) || 'rgba(0,0,0,0.25)') : goldDark;
     const redeemBtnTop = config.winCardRedeemButtonColorTop || '#15803d';
     const redeemBtnBottom = config.winCardRedeemButtonColorBottom || '#166534';
     const redeemBtnText = config.winCardRedeemButtonTextColor || '#ffffff';
@@ -59,7 +109,7 @@
     // Computed values
     hexToRGBA(gold, 0.4);
     const ringGlow = hexToRGBA(ringColor, 0.4);
-    const buttonGlow = hexToRGBA(buttonBaseColor, 0.4);
+    const buttonGlow = toRGBA(buttonBaseColor, 0.4);
     
     // Background styles
     const bgStyle = config.backgroundColor 
@@ -80,17 +130,25 @@
 
     // Button shadow and animation
     const buttonBoxShadow = buttonShadow
-      ? `box-shadow:0 4px 0 ${goldDark}, 0 6px 20px ${buttonGlow}, inset 0 1px 0 rgba(255,255,255,.3);`
-      : `box-shadow:0 4px 0 ${goldDark}, inset 0 1px 0 rgba(255,255,255,.3);`;
+      ? `box-shadow:0 4px 0 ${buttonEdgeColor}, 0 6px 20px ${buttonGlow}, inset 0 1px 0 rgba(255,255,255,.3);`
+      : `box-shadow:inset 0 1px 0 rgba(255,255,255,.25);`;
     
     const buttonHoverStyle = buttonAnimation
-      ? `.sw-spin-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 ${goldDark},0 8px 28px ${buttonGlow},inset 0 1px 0 rgba(255,255,255,.3)}`
+      ? (buttonShadow
+        ? `.sw-spin-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 0 ${buttonEdgeColor},0 8px 28px ${buttonGlow},inset 0 1px 0 rgba(255,255,255,.3)}`
+        : `.sw-spin-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05)}`)
       : `.sw-spin-btn:hover:not(:disabled){filter:brightness(1.05)}`;
     
     const buttonActiveStyle = buttonAnimation
-      ? `.sw-spin-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 ${goldDark},0 4px 15px ${buttonGlow},inset 0 1px 0 rgba(255,255,255,.2)}`
+      ? (buttonShadow
+        ? `.sw-spin-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 ${buttonEdgeColor},0 4px 15px ${buttonGlow},inset 0 1px 0 rgba(255,255,255,.2)}`
+        : `.sw-spin-btn:active:not(:disabled){transform:translateY(1px);filter:brightness(0.98)}`)
       : `.sw-spin-btn:active:not(:disabled){transform:translateY(1px)}`;
 
+    const buttonBackground = hasCustomButtonColor
+      ? `background:${buttonBaseColor};`
+      : `background:linear-gradient(180deg,${goldLight},${goldDark});`;
+
     return `
 /* === SpinWheel SDK v2.1 === */
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Outfit:wght@300;500;600;700&display=swap');
@@ -111,10 +169,10 @@
   font-size:clamp(2rem,6vw,3.5rem); font-weight:800; letter-spacing:.02em;
 }
 .sw-title .sw-spin-text {
-  color:${titleColor};
-  text-shadow:0 0 30px ${hexToRGBA(titleColor, 0.4)}, 0 0 60px ${hexToRGBA(titleColor, 0.2)};
+  color:${titleSpinColor};
+  text-shadow:0 0 30px ${toRGBA(titleSpinColor, 0.4)}, 0 0 60px ${toRGBA(titleSpinColor, 0.2)};
 }
-.sw-title .sw-win-text { color:${goldDark}; }
+.sw-title .sw-win-text { color:${titleWinColor}; }
 .sw-subtitle { margin-top:.5rem; color:${subtitleColor}; font-size:1rem; font-weight:300; }
 
 /* ── wheel ── */
@@ -196,7 +254,7 @@ ${ringAnimation ? `
 .sw-spin-btn {
   font-family:'Outfit',sans-serif; font-size:1.25rem; font-weight:700;
   letter-spacing:.15em; padding:1rem 3rem; border:none; border-radius:12px;
-  background:linear-gradient(180deg,${goldLight},${goldDark}); color:#1a1a1f;
+  ${buttonBackground} color:${buttonTextColor};
   cursor:pointer;
   ${buttonBoxShadow}
   transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
@@ -1457,7 +1515,7 @@ ${buttonActiveStyle}
     static Instance = SpinWheelInstance;
 
     /** Current SDK version – kept in sync with package.json via build banner */
-    static VERSION = '0.1.0-alpha.1';
+    static VERSION = '0.1.0-alpha.2';
     
     /** Export defaults for reference */
     static DEFAULTS = DEFAULTS$1;
@@ -1721,7 +1779,10 @@ ${buttonActiveStyle}
     
     // Background configs
     const cardBg = config.cardBackground || `linear-gradient(180deg, #faf8fc 0%, #f0ebf5 100%)`;
-    const scratchZoneBg = config.scratchZoneBackground || `linear-gradient(145deg, ${purpleDark} 0%, ${purpleMid} 50%, #5a3a7a 100%)`;
+    const hasCustomScratchZoneBg = config.scratchZoneBackground !== null && config.scratchZoneBackground !== undefined;
+    const scratchZoneBg = hasCustomScratchZoneBg
+      ? config.scratchZoneBackground
+      : `linear-gradient(145deg, ${purpleDark} 0%, ${purpleMid} 50%, #5a3a7a 100%)`;
     const modalBtnBg = config.modalButtonColor || `linear-gradient(145deg, ${purpleMid} 0%, ${purpleDark} 100%)`;
     
     // Computed values
@@ -1841,9 +1902,7 @@ ${buttonActiveStyle}
   align-items:center;
   justify-content:center;
   padding:20px;
-  background:
-    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08) 0%, transparent 45%),
-    linear-gradient(145deg, ${purpleDark} 0%, ${purpleMid} 100%);
+  background:${hasCustomScratchZoneBg ? scratchZoneBg : `radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08) 0%, transparent 45%), linear-gradient(145deg, ${purpleDark} 0%, ${purpleMid} 100%)`};
 }
 
 .sc-prize-content::before {
@@ -3462,7 +3521,7 @@ ${buttonActiveStyle}
     Instance: ScratchCardInstance,
     
     /** Current SDK version */
-    VERSION: '0.1.0-alpha.1',
+    VERSION: '0.1.0-alpha.2',
     
     /** Export defaults for reference */
     DEFAULTS: DEFAULTS,