refactor: update Alpine.js loading mechanism and adjust CSS variable values

Author: dermatz

src/view/frontend/templates/inspector.phtml

@@ -8,7 +8,8 @@ declare(strict_types=1);
  * Initializes the Alpine.js inspector component.
  * The floating button and info badge are created dynamically via JavaScript.
  *
- * Note: Loads Alpine.js from CDN if not already available (for non-Hyvä themes like Luma)
+ * Note: Loads bundled Alpine.js locally as fallback if not already available
+ *       (e.g. for non-Hyvä themes like Luma). No external CDN is used.
  *
  * @var \OpenForgeProject\MageForge\Block\Inspector $block
  */
@@ -20,7 +21,10 @@ declare(strict_types=1);
 <!-- Alpine.js Bootstrap (load local fallback only if not already present) -->
 <?php
 
-$alpineJsUrl = $escaper->escapeUrl($block->getAlpineJsUrl());
+$alpineJsUrl = json_encode(
+    $block->getAlpineJsUrl(),
+    JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
+);
 $alpineBootstrap = <<<JS
     (function() {
         'use strict';
@@ -35,7 +39,7 @@ $alpineBootstrap = <<<JS
             console.log('[MageForge Inspector] Loading bundled Alpine.js');
 
             var alpineScript = document.createElement('script');
-            alpineScript.src = '{$alpineJsUrl}';
+            alpineScript.src = {$alpineJsUrl};
             alpineScript.onload = function() {
                 console.log('[MageForge Inspector] Alpine.js loaded successfully');
             };

src/view/frontend/web/css/inspector.css

@@ -60,7 +60,7 @@
   --mageforge-color-slate-950-rgb: 15, 23, 42;
   --mageforge-color-slate-50-rgb: 248, 250, 252;
   --mageforge-color-orange-rgb: 251, 146, 60;
-  --mageforge-color-purple-rgb: 168, 85, 247;
+  --mageforge-color-purple-rgb: 167, 139, 250;
   --mageforge-color-fuchsia-rgb: 217, 70, 239;
   --mageforge-color-teal-rgb: 20, 184, 166;
 

src/view/frontend/web/css/toolbar/_variables.css

@@ -50,7 +50,7 @@
   --mageforge-color-red-rgb: 239, 68, 68;
   --mageforge-color-red-light-rgb: 252, 165, 165;
   --mageforge-color-yellow-rgb: 251, 191, 36;
-  --mageforge-color-amber-rgb: 245, 158, 11;
+  --mageforge-color-amber-rgb: 237, 176, 77;
   --mageforge-color-slate-400-rgb: 148, 163, 184;
   --mageforge-color-slate-500-rgb: 100, 116, 139;
   --mageforge-color-slate-900-rgb: 30, 41, 59;