From efdc4bd88d9da80611da4be08a212928a220cc09 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 20 Nov 2025 13:10:11 +0000
Subject: [PATCH] test: Add new background patterns for light and dark themes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**TESTING** - These patterns can be easily reverted or modified

Light Theme (Woven Fabric Pattern):
- Subtle gray crosshatch pattern
- Multiple gradients creating woven texture
- Professional and clean appearance

Dark Theme (Diagonal Grid with Green Glow):
- 45° and -45° diagonal lines
- Green glow (rgba(0, 255, 128, 0.1))
- Cyberpunk/tech aesthetic
- 40px grid spacing

Implementation:
- Added --page-bg-pattern CSS variables to color-theme.css
- Applied patterns via body background-image in _reset.css
- OLD pattern commented out and preserved for easy restoration
- Patterns work with light, dark, and auto themes

Files changed:
- static/css/color-theme.css: Added pattern variables
- static/css/01-foundation/_reset.css: Applied patterns to body

To revert: Uncomment old pattern and remove --page-bg-pattern usage
---
 static/css/01-foundation/_reset.css | 10 ++++++++--
 static/css/color-theme.css          | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/static/css/01-foundation/_reset.css b/static/css/01-foundation/_reset.css
index 5e8f351..384aeb6 100644
--- a/static/css/01-foundation/_reset.css
+++ b/static/css/01-foundation/_reset.css
@@ -12,12 +12,18 @@
 /* Body base */
 body {
   background-color: var(--page-bg);
-  background-image:
+
+  /* OLD PATTERN - Keep for reference (can be restored anytime) */
+  /* background-image:
     linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
     linear-gradient(180deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
     linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
     linear-gradient(180deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
-  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
+  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; */
+
+  /* NEW TEST PATTERNS - Theme-specific (woven fabric for light, diagonal grid for dark) */
+  background-image: var(--page-bg-pattern);
+  background-size: 40px 40px; /* For dark theme diagonal grid */
   background-attachment: fixed;
   overflow-x: auto;
 }
diff --git a/static/css/color-theme.css b/static/css/color-theme.css
index 431b44b..1362ee0 100644
--- a/static/css/color-theme.css
+++ b/static/css/color-theme.css
@@ -18,6 +18,12 @@
   /* Page Background - Softer version of dark theme */
   --page-bg: #b8bbbe;
 
+  /* TEST: Woven Fabric Pattern - Light (TESTING - can be removed later) */
+  --page-bg-pattern: repeating-linear-gradient(0deg, rgba(75, 85, 99, 0.08), rgba(75, 85, 99, 0.08) 2px, transparent 2px, transparent 6px),
+                     repeating-linear-gradient(90deg, rgba(107, 114, 128, 0.06), rgba(107, 114, 128, 0.06) 2px, transparent 2px, transparent 6px),
+                     repeating-linear-gradient(0deg, rgba(55, 65, 81, 0.04), rgba(55, 65, 81, 0.04) 1px, transparent 1px, transparent 12px),
+                     repeating-linear-gradient(90deg, rgba(55, 65, 81, 0.04), rgba(55, 65, 81, 0.04) 1px, transparent 1px, transparent 12px);
+
   /* Paper/Card Backgrounds */
   --paper-bg: #ffffff;
   --paper-secondary-bg: #f5f5f5;
@@ -66,6 +72,10 @@
   /* Page Background - Original background */
   --page-bg: rgb(82, 86, 89);
 
+  /* TEST: Diagonal Grid with Green Glow (TESTING - can be removed later) */
+  --page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px),
+                     repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px);
+
   /* Paper/Card Backgrounds */
   --paper-bg: #1a1a1a;
   --paper-secondary-bg: #2a2a2a;
@@ -115,6 +125,10 @@
     /* Page Background - Original background */
     --page-bg: rgb(82, 86, 89);
 
+    /* TEST: Diagonal Grid with Green Glow (TESTING - can be removed later) */
+    --page-bg-pattern: repeating-linear-gradient(45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px),
+                       repeating-linear-gradient(-45deg, rgba(0, 255, 128, 0.1) 0, rgba(0, 255, 128, 0.1) 1px, transparent 1px, transparent 20px);
+
     /* Paper/Card Backgrounds */
     --paper-bg: #1a1a1a;
     --paper-secondary-bg: #2a2a2a;