Improve css handling

hamburger.mjs

@@ -18,9 +18,9 @@ export class HamburgerMorphing {
      * @param {string} containerSelector - CSS selector for the container element
      * @param {Object} options - Configuration options
      * @param {number} [options.size=100] - Size of the SVG in pixels
-     * @param {string} [options.foreground="#000000"] - Foreground/stroke color for the lines
+     * @param {string} [options.foreground="#000000"] - Foreground/stroke color for the lines (supports CSS variables)
-     * @param {string} [options.background="#ffffff"] - Background color for cutout effects
+     * @param {string} [options.background="#ffffff"] - Background color for cutout effects (supports CSS variables)
-     * @param {string} [options.hover="#ff0000"] - Hover color for interactive effects
+     * @param {string} [options.hover="#ff0000"] - Hover color for interactive effects (supports CSS variables)
      */
     constructor(containerSelector, options = {}) {
         this.container = document.querySelector(containerSelector);
@@ -30,9 +30,9 @@ export class HamburgerMorphing {
 
         this.options = {
             size: options.size || 100,
-            foreground: options.foreground || DEFAULT_FOREGROUND,
+            foreground: this.resolveCssVariable(options.foreground || DEFAULT_FOREGROUND),
-            background: options.background || DEFAULT_BACKGROUND,
+            background: this.resolveCssVariable(options.background || DEFAULT_BACKGROUND),
-            hover: options.hover || DEFAULT_HOVER
+            hover: this.resolveCssVariable(options.hover || DEFAULT_HOVER)
         };
 
         this.draw = null;
@@ -54,6 +54,31 @@ export class HamburgerMorphing {
         this.container.addEventListener('mouseleave', () => this.onHover(false));
     }
 
+    /**
+     * Resolves CSS variables to their computed color values
+     * @param {string} color - Color value (can be CSS variable like 'var(--primary-color)' or hex like '#000000')
+     * @returns {string} Resolved color value
+     */
+    resolveCssVariable(color) {
+        // Check if the color is a CSS variable
+        if (color && color.trim().startsWith('var(')) {
+            // Extract the variable name from var(--variable-name)
+            const match = color.match(/var\(\s*(--[^,\s)]+)/);
+            if (match) {
+                const variableName = match[1];
+                // Get the computed style from the document root
+                const computedValue = getComputedStyle(document.documentElement)
+                    .getPropertyValue(variableName)
+                    .trim();
+                
+                // Return the computed value if found, otherwise return the original
+                return computedValue || color;
+            }
+        }
+        // Return the color as-is if it's not a CSS variable
+        return color;
+    }
+
     /**
      * Initializes the SVG drawing and creates the initial hamburger lines
      */