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

package/dist/spin-wheel-sdk.d.ts

@@ -1,5 +1,5 @@
 /**
- * SpinWheel SDK v0.1.0-alpha.1
+ * SpinWheel SDK v0.1.0-alpha.2
  * TypeScript declarations
  */
 

package/dist/spin-wheel-sdk.esm.mjs

@@ -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.
  */
@@ -26,6 +26,63 @@
  */
 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';
@@ -35,11 +92,16 @@ function buildCSS(config, hexToRGBA) {
   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';
@@ -53,7 +115,7 @@ function buildCSS(config, hexToRGBA) {
   // 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 ? `background-color:${config.backgroundColor};` : '';
@@ -64,9 +126,10 @@ function buildCSS(config, hexToRGBA) {
   const ringAnimationCSS = ringAnimation ? `animation:sw-ring-pulse 3s ease-in-out infinite;` : '';
 
   // 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);`;
-  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)}` : `.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)}` : `.sw-spin-btn:active:not(:disabled){transform:translateY(1px)}`;
+  const buttonBoxShadow = buttonShadow ? `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 ? 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 ? 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');
@@ -87,10 +150,10 @@ function buildCSS(config, hexToRGBA) {
   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 ── */
@@ -172,7 +235,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;
@@ -1424,7 +1487,7 @@ class SpinWheel {
   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;
@@ -1659,7 +1722,8 @@ function buildScratchCSS(config, hexToRGBA) {
 
   // 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
@@ -1769,9 +1833,7 @@ function buildScratchCSS(config, hexToRGBA) {
   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 {
@@ -3396,7 +3458,7 @@ const ScratchCard = {
   /** The underlying class – useful for `instanceof` checks or subclassing. */
   Instance: ScratchCardInstance,
   /** Current SDK version */
-  VERSION: '0.1.0-alpha.1',
+  VERSION: '0.1.0-alpha.2',
   /** Export defaults for reference */
   DEFAULTS: DEFAULTS
 };