From a63f06712f33d4dbef44d72bd4c5472126be3d38 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 11 Mar 2026 17:38:51 -0400
Subject: [PATCH] =?UTF-8?q?Fix=20ShareDialog=20transparent=20background=20?=
 =?UTF-8?q?=E2=80=94=20replace=20undefined=20CSS=20vars?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--color-surface → --color-bg-card
--color-muted   → --color-text-muted
--color-hover   → --color-bg-secondary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ShareDialog.vue | 26 ++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/ShareDialog.vue b/frontend/src/components/ShareDialog.vue
index 7aff2f0..b266f03 100644
--- a/frontend/src/components/ShareDialog.vue
+++ b/frontend/src/components/ShareDialog.vue
@@ -206,7 +206,7 @@ onMounted(async () => {
 }
 
 .share-dialog {
-  background: var(--color-surface);
+  background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   width: 480px;
@@ -234,7 +234,7 @@ onMounted(async () => {
 .btn-close {
   background: none;
   border: none;
-  color: var(--color-muted);
+  color: var(--color-text-muted);
   cursor: pointer;
   font-size: 1.1rem;
   padding: 0.25rem;
@@ -262,7 +262,7 @@ onMounted(async () => {
   padding: 0.3rem 0.8rem;
   font-size: 0.82rem;
   cursor: pointer;
-  color: var(--color-muted);
+  color: var(--color-text-muted);
   transition: all 0.15s;
 }
 .share-tab.active {
@@ -288,7 +288,7 @@ onMounted(async () => {
   padding: 0.45rem 0.7rem;
   border: 1px solid var(--color-border);
   border-radius: 6px;
-  background: var(--color-surface);
+  background: var(--color-bg-card);
   color: var(--color-text);
   font-size: 0.9rem;
   outline: none;
@@ -301,7 +301,7 @@ onMounted(async () => {
   top: 100%;
   left: 0;
   right: 0;
-  background: var(--color-surface);
+  background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: 6px;
   margin-top: 2px;
@@ -321,16 +321,16 @@ onMounted(async () => {
   cursor: pointer;
   transition: background 0.1s;
 }
-.user-result-item:hover { background: var(--color-hover); }
+.user-result-item:hover { background: var(--color-bg-secondary); }
 
 .user-result-name { font-weight: 600; font-size: 0.88rem; }
-.user-result-email { color: var(--color-muted); font-size: 0.8rem; }
+.user-result-email { color: var(--color-text-muted); font-size: 0.8rem; }
 
 .perm-select {
   padding: 0.45rem 0.5rem;
   border: 1px solid var(--color-border);
   border-radius: 6px;
-  background: var(--color-surface);
+  background: var(--color-bg-card);
   color: var(--color-text);
   font-size: 0.85rem;
   cursor: pointer;
@@ -359,7 +359,7 @@ onMounted(async () => {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
-  color: var(--color-muted);
+  color: var(--color-text-muted);
   margin: 0 0 0.5rem;
 }
 
@@ -378,7 +378,7 @@ onMounted(async () => {
   gap: 0.5rem;
   padding: 0.5rem 0.75rem;
   border-radius: 8px;
-  background: var(--color-hover);
+  background: var(--color-bg-secondary);
 }
 
 .share-target-icon { font-size: 1rem; flex-shrink: 0; }
@@ -388,7 +388,7 @@ onMounted(async () => {
   padding: 0.25rem 0.4rem;
   border: 1px solid var(--color-border);
   border-radius: 4px;
-  background: var(--color-surface);
+  background: var(--color-bg-card);
   color: var(--color-text);
   font-size: 0.8rem;
   cursor: pointer;
@@ -397,7 +397,7 @@ onMounted(async () => {
 .btn-remove-share {
   background: none;
   border: none;
-  color: var(--color-muted);
+  color: var(--color-text-muted);
   cursor: pointer;
   font-size: 0.9rem;
   padding: 0.15rem 0.3rem;
@@ -408,7 +408,7 @@ onMounted(async () => {
 .btn-remove-share:hover { color: var(--color-danger, #ef4444); }
 
 .shares-empty {
-  color: var(--color-muted);
+  color: var(--color-text-muted);
   font-size: 0.85rem;
   font-style: italic;
   text-align: center;