From 17b0959f1059f0cf6e9eca3765580db811e56329 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Fri, 27 Mar 2026 07:09:06 -0700
Subject: [PATCH 1/2] fix: make demo gallery readable in dark mode on mobile

Give the drawer an opaque background and increase card/chip contrast
in dark mode so text is legible over the animated background.

Closes #73
---
 apps/app/src/app/globals.css                      | 15 +++++++++++++++
 .../components/demo-gallery/category-filter.tsx   |  2 +-
 .../app/src/components/demo-gallery/demo-card.tsx |  2 +-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/app/globals.css b/apps/app/src/app/globals.css
index caa5763..54422d2 100644
--- a/apps/app/src/app/globals.css
+++ b/apps/app/src/app/globals.css
@@ -637,6 +637,21 @@ body, html {
   }
 }
 
+/* === Demo Gallery Dark Mode Readability Fix === */
+:root.dark .demo-gallery-drawer {
+  background: #1a1a2e !important;
+}
+
+:root.dark .demo-gallery-drawer .demo-gallery-card {
+  background: rgba(255, 255, 255, 0.08) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+:root.dark .demo-gallery-drawer .demo-gallery-chip {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 /* === Flash Animation === */
 .content-flash {
   animation: content-flash 700ms ease-out;
diff --git a/apps/app/src/components/demo-gallery/category-filter.tsx b/apps/app/src/components/demo-gallery/category-filter.tsx
index 3d09f09..4929aee 100644
--- a/apps/app/src/components/demo-gallery/category-filter.tsx
+++ b/apps/app/src/components/demo-gallery/category-filter.tsx
@@ -19,7 +19,7 @@ export function CategoryFilter({ selected, onSelect }: CategoryFilterProps) {
           <button
             key={cat ?? "all"}
             onClick={() => onSelect(cat)}
-            className="shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer"
+            className="demo-gallery-chip shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer"
             style={{
               background: isActive
                 ? "linear-gradient(135deg, var(--color-lilac-dark, #6366f1), var(--color-mint-dark, #10b981))"
diff --git a/apps/app/src/components/demo-gallery/demo-card.tsx b/apps/app/src/components/demo-gallery/demo-card.tsx
index 327a650..52116bf 100644
--- a/apps/app/src/components/demo-gallery/demo-card.tsx
+++ b/apps/app/src/components/demo-gallery/demo-card.tsx
@@ -24,7 +24,7 @@ export function DemoCard({ demo, onTry }: DemoCardProps) {
   return (
     <button
       onClick={() => onTry(demo)}
-      className="rounded-xl overflow-hidden flex flex-col text-left transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 cursor-pointer w-full"
+      className="demo-gallery-card rounded-xl overflow-hidden flex flex-col text-left transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 cursor-pointer w-full"
       style={{
         border: "1px solid var(--color-border-glass, rgba(0,0,0,0.1))",
         background: "var(--surface-primary, #fff)",

From e172dad8e0d34a41c265e5d9844e9b037a7a8bc4 Mon Sep 17 00:00:00 2001
From: jerelvelarde <Jereljohnvelarde@gmail.com>
Date: Fri, 27 Mar 2026 07:19:50 -0700
Subject: [PATCH 2/2] fix: add !important to chip overrides and use design
 token for drawer bg
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Chip dark mode CSS was ineffective because inline styles on the button
have higher specificity — add !important to match the card approach.
Replace hardcoded #1a1a2e with var(--color-surface) to stay DRY.
---
 apps/app/src/app/globals.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/app/src/app/globals.css b/apps/app/src/app/globals.css
index 54422d2..9041296 100644
--- a/apps/app/src/app/globals.css
+++ b/apps/app/src/app/globals.css
@@ -639,7 +639,7 @@ body, html {
 
 /* === Demo Gallery Dark Mode Readability Fix === */
 :root.dark .demo-gallery-drawer {
-  background: #1a1a2e !important;
+  background: var(--color-surface) !important;
 }
 
 :root.dark .demo-gallery-drawer .demo-gallery-card {
@@ -648,8 +648,8 @@ body, html {
 }
 
 :root.dark .demo-gallery-drawer .demo-gallery-chip {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.08) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
 }
 
 /* === Flash Animation === */