From 353ee143f628830eaa0f7c2581e8dc9c9b319b5a Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Sat, 29 Aug 2026 19:42:55 +0200
Subject: [PATCH] fix(css): leave tailwind theme vars on :root so obsidian's
 accent wins inside the panel

---
 scripts/scope-css.mjs   | 13 +++++--------
 tests/scope-css.test.ts |  4 ++--
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/scripts/scope-css.mjs b/scripts/scope-css.mjs
index fb2fcf7..0d4a77a 100644
--- a/scripts/scope-css.mjs
+++ b/scripts/scope-css.mjs
@@ -12,8 +12,9 @@ import { transform } from "lightningcss";
  * order, while still reaching the view root itself and the portal layer,
  * both of which carry `.beaver-root`.
  *
- * Theme variables move from `:root, :host` onto `.beaver-root` for the same
- * reason: a later `:root{--spacing:…}` from someone else must not resize us.
+ * Tailwind's own theme variables stay on `:root, :host`: moved onto the view
+ * root they would sit above Obsidian's `body` values, and `--color-accent`
+ * is a name both sides use — the accent would turn into the hover grey.
  */
 
 const ROOT = "beaver-root";
@@ -52,12 +53,8 @@ function mentions(selector, name) {
 }
 
 function scopeSelector(selector) {
-  if (isPseudo(selector, "root")) {
-    return [{ name: ROOT, type: "class" }];
-  }
-  // `:root, :host` is one rule; the root alone carries it, so :host goes.
-  if (isPseudo(selector, "host")) {
-    return [];
+  if (isPseudo(selector, "root") || isPseudo(selector, "host")) {
+    return selector;
   }
   if (mentions(selector, ROOT)) {
     return selector;
diff --git a/tests/scope-css.test.ts b/tests/scope-css.test.ts
index ced7083..0084b1e 100644
--- a/tests/scope-css.test.ts
+++ b/tests/scope-css.test.ts
@@ -42,9 +42,9 @@ describe("scoping the built stylesheet", () => {
     expect(out).not.toContain("*)*");
   });
 
-  it("moves theme variables from :root onto the view root", () => {
+  it("leaves tailwind's theme variables on :root, under obsidian's body values", () => {
     expect(one(":root,:host{--spacing:.25rem}")).toBe(
-      ".beaver-root { --spacing: .25rem; }"
+      ":root, :host { --spacing: .25rem; }"
     );
   });