From 981cc4063356a79c2ab0d1a5f769a671cf329e2a Mon Sep 17 00:00:00 2001
From: doxa-maps-88655c70
 <88627970+doxa-maps-88655c70@users.noreply.github.com>
Date: Sun, 20 Sep 2026 06:15:37 +0000
Subject: [PATCH] Shared layout and legend tools on the DX palette; keep
 dark-surface ink ramps

---
 library/components/legends/LegendTools.vue     | 4 ++--
 library/layouts/VerticalTabsLayout.vue         | 8 ++++----
 plugin-designs/doxa-maps-spa/doxa-maps-spa.vue | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/library/components/legends/LegendTools.vue b/library/components/legends/LegendTools.vue
index 14751bce8..b2146aa06 100644
--- a/library/components/legends/LegendTools.vue
+++ b/library/components/legends/LegendTools.vue
@@ -51,7 +51,7 @@ useShadowStyles(`
 .lt-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;background:transparent;border:none;cursor:pointer;font-size:12px;font-weight:600;color:#374151;border-radius:9999px 0 0 9999px;transition:background 0.15s;}
 .lt-btn:last-child{border-radius:0 9999px 9999px 0;}
 .lt-btn:hover{background:rgba(59,130,246,0.08);}
-.lt-btn.active{background:rgba(59,130,246,0.12);color:#2563eb;}
+.lt-btn.active{background:var(--dx-accent-weak, rgba(146,177,149,0.18));color:var(--dx-text, #3b463d);}
 .lt-btn-icon{font-size:13px;line-height:1;}
 .lt-btn-text{font-size:12px;line-height:1;}
 .lt-side-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 10px;background:transparent;border:none;border-left:1px solid #e5e7eb;cursor:pointer;color:#6b7280;border-radius:0 9999px 9999px 0;transition:background 0.15s;}
@@ -64,7 +64,7 @@ useShadowStyles(`
 .lt-popup{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.10);z-index:1100;min-width:160px;padding:4px 0;}
 .lt-popup-row{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:12px;color:#374151;cursor:pointer;transition:background 0.12s;}
 .lt-popup-row:hover{background:rgba(59,130,246,0.08);}
-.lt-popup-row.active{background:rgba(59,130,246,0.12);color:#2563eb;font-weight:600;}
+.lt-popup-row.active{background:var(--dx-accent-weak, rgba(146,177,149,0.18));color:var(--dx-text, #3b463d);font-weight:600;}
 .lt-popup-icon{font-size:13px;}
 .lt-overlay{position:fixed;inset:0;z-index:1099;background:transparent;}
 
diff --git a/library/layouts/VerticalTabsLayout.vue b/library/layouts/VerticalTabsLayout.vue
index 8a91291cf..6f4fedfba 100644
--- a/library/layouts/VerticalTabsLayout.vue
+++ b/library/layouts/VerticalTabsLayout.vue
@@ -321,9 +321,9 @@ const VTL_SHADOW_CSS = `
 .vtl-content { flex:1 1 auto; position:relative; min-height:0; contain:layout paint; }
 .vtl-host { position:absolute; inset:0; }
 .vtl-host-slot { position:absolute; inset:0; }
-.vtl-host-hint { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#94a3b8; font-size:13px; padding:20px; }
+.vtl-host-hint { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--dx-muted, #6d766e); font-size:13px; padding:20px; }
 .vtl-host-hint.err { color:#f87171; }
-.vtl-host-hint small { color:#64748b; }
+.vtl-host-hint small { color:var(--dx-muted, #6d766e); }
 .vtl.rail-collapsed .vtl-nav { transform:translateX(-196px); }
 .vtl.rail-collapsed .vtl-main { left:60px; }
 .vtl.rail-collapsed .vtl-collapse { padding-left:196px; justify-content:flex-start; }
@@ -660,9 +660,9 @@ export default defineComponent({
 .vtl-content { flex:1 1 auto; position:relative; min-height:0; contain:layout paint; }
 .vtl-host { position:absolute; inset:0; }
 .vtl-host-slot { position:absolute; inset:0; }
-.vtl-host-hint { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#94a3b8; font-size:13px; padding:20px; }
+.vtl-host-hint { position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:var(--dx-muted, #6d766e); font-size:13px; padding:20px; }
 .vtl-host-hint.err { color:#f87171; }
-.vtl-host-hint small { color:#64748b; }
+.vtl-host-hint small { color:var(--dx-muted, #6d766e); }
 .vtl.rail-collapsed .vtl-nav { transform:translateX(-196px); }
 .vtl.rail-collapsed .vtl-main { left:60px; }
 .vtl.rail-collapsed .vtl-collapse { padding-left:196px; justify-content:flex-start; }
diff --git a/plugin-designs/doxa-maps-spa/doxa-maps-spa.vue b/plugin-designs/doxa-maps-spa/doxa-maps-spa.vue
index 8a2d0d5df..393a7c4a8 100644
--- a/plugin-designs/doxa-maps-spa/doxa-maps-spa.vue
+++ b/plugin-designs/doxa-maps-spa/doxa-maps-spa.vue
@@ -678,7 +678,7 @@ export default defineComponent({
   color: #6d766e; font-size: 13px; padding: 20px;
 }
 .dms-hint.err { color: #f87171; }
-.dms-hint small { color: #64748b; }
+.dms-hint small { color: var(--dx-muted, #6d766e); }
 
 /* #brand logo mark (left of the shell title). */
 .dms-logo { display: inline-flex; align-items: center; }