From f0a47f02f27ea15eada9e6e12ca394b804b1c001 Mon Sep 17 00:00:00 2001
From: Pedro Camara Junior <pcamarajr@gmail.com>
Date: Mon, 25 May 2026 12:28:05 +0200
Subject: [PATCH] fix(design-mode): scope svg[fill="none"] under overlay
 containers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The unscoped reset in design-mode/styles.module.scss leaked into host
page SVGs that rely on fill="none" with CSS-based fills (e.g. Tailwind
fill-current, Lucide icons). PR #136 fixed the same regression in
page-toolbar and annotation-popup but missed design-mode.

Scope the rule under `.overlay` and `.rearrangeOverlay` — the two
top-level wrappers that contain all design-mode SVGs — matching the
existing pattern.

Fixes #181
---
 .../components/design-mode/styles.module.scss    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/package/src/components/design-mode/styles.module.scss b/package/src/components/design-mode/styles.module.scss
index ceaf9057..146cd97e 100644
--- a/package/src/components/design-mode/styles.module.scss
+++ b/package/src/components/design-mode/styles.module.scss
@@ -2,9 +2,19 @@
 // Layout Mode Styles
 // =============================================================================
 
-// Protect stroke-based SVG icons from host page CSS overrides
-svg[fill="none"] {
-  fill: none !important;
+// Protect stroke-based SVG icons from host page CSS overrides.
+// Scoped to design-mode's own containers to avoid breaking host SVGs that use
+// fill="none" with CSS-based fills (e.g. Tailwind's fill-current).
+// See: https://github.com/benjitaylor/agentation/issues/181
+.overlay,
+.rearrangeOverlay {
+  svg[fill="none"] {
+    fill: none !important;
+  }
+
+  svg[fill="none"] :not([fill]) {
+    fill: none !important;
+  }
 }
 
 $blue: #3c82f7;