Set bg of pattern libary to standard gray

Author: paulsmith

www/script.js

@@ -130,6 +130,24 @@ class MacPatternShowcase {
     return patterns;
   }
 
+  createBackgroundPattern(pattern) {
+    const canvasSize = 8;
+    const canvas = document.createElement("canvas");
+    canvas.width = canvasSize;
+    canvas.height = canvasSize;
+    const ctx = canvas.getContext("2d");
+
+    for (let y = 0; y < 8; y++) {
+      for (let x = 0; x < 8; x++) {
+        const bit = pattern.binaryPattern[y][x];
+        ctx.fillStyle = bit ? '#000000' : '#ffffff';
+        ctx.fillRect(x, y, 1, 1);
+      }
+    }
+
+    return canvas.toDataURL();
+  }
+
   createPageBackgroundPattern(pattern) {
     // Create a "fat bits" background pattern - scale 8x8 for chunky pixelation
     const scale = 4;
@@ -235,6 +253,9 @@ class MacPatternShowcase {
 
       this.patternsGrid.appendChild(patternElement);
     });
+
+    const standardGray = this.createBackgroundPattern(this.patterns[3]);
+    this.patternsGrid.style.backgroundImage = `url(${standardGray})`;
   }
 
   setupEventListeners() {

www/style.css

@@ -24,8 +24,8 @@
   );
   --surface-secondary: light-dark(#f8f8f8, #2a2a2a);
   --border-primary: light-dark(#ddd, #555);
-  --border-hover: light-dark(#999, #ccc);
-  --border-active: light-dark(#999, #ccc);
+  --border-hover: light-dark(#666, #999);
+  --border-active: light-dark(#666, #999);
   --button-primary: light-dark(#666666, #4a9fff);
   --button-primary-hover: light-dark(#555555, #2b7fe8);
   --button-secondary: light-dark(#f8f9fa, #3a3a3a);