From 6e04e4f902305df52f98e149583fb0ec1c5be9ae Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Thu, 5 Mar 2026 16:33:51 -0500
Subject: [PATCH 1/2] Fix CSS layer scoping and priority for host app
 compatibility

---
 packages/ui/scripts/scope-css.mjs |  8 ++++----
 packages/ui/src/styles/base.css   | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/ui/scripts/scope-css.mjs b/packages/ui/scripts/scope-css.mjs
index 9f1fae74..6cc5afc6 100644
--- a/packages/ui/scripts/scope-css.mjs
+++ b/packages/ui/scripts/scope-css.mjs
@@ -4,7 +4,7 @@
  * library from polluting the consuming app's global CSS namespace.
  *
  * Tailwind v4 generates:
- * 1. @layer theme { :root, :host { --relay-* } }
+ * 1. @layer relay-theme { :root, :host { --relay-* } }
  *    → Scope :root,:host to .relay-kit-reset
  * 2. @property --tw-* { ... }
  *    → Cannot be scoped (global by CSS spec). Low risk since
@@ -22,10 +22,10 @@ const cssPath = resolve(__dirname, '../dist/styles.css')
 let css = readFileSync(cssPath, 'utf-8')
 
 // 1. Scope the theme layer's `:root, :host` block.
-// Pattern: `@layer theme { :root, :host { ... } }`
+// Pattern: `@layer relay-theme { :root, :host { ... } }`
 // We scope each selector to `.relay-kit-reset`.
 css = css.replace(
-  /(@layer\s+theme\s*\{)\s*(:root\s*,\s*:host)\s*\{/,
+  /(@layer\s+relay-theme\s*\{)\s*(:root\s*,\s*:host)\s*\{/,
   '$1\n  .relay-kit-reset {'
 )
 
@@ -33,7 +33,7 @@ css = css.replace(
 // Pattern: `*, ::before, ::after, ::backdrop { --tw-*: ...; }`
 // This is inside @layer properties { @supports(...) { ... } }
 css = css.replace(
-  /(\*\s*,\s*::before\s*,\s*::after\s*,\s*::backdrop)\s*\{([^}]*--tw-[^}]*)\}/g,
+  /(\*\s*,\s*:?:before\s*,\s*:?:after\s*,\s*::backdrop)\s*\{([^}]*--tw-[^}]*)\}/g,
   (match, selector, body) => {
     const declarations = body.split(';').map((d) => d.trim()).filter(Boolean)
     const allTwVars = declarations.every((d) => d.startsWith('--tw-'))
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index bf36799b..1774ff1a 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -1,6 +1,6 @@
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme) prefix(relay);
-@import "tailwindcss/utilities.css" layer(utilities) prefix(relay);
+@layer reset, base, tokens, recipes, utilities, theme, components, relay-theme, relay-base, relay-components, relay-utilities;
+@import "tailwindcss/theme.css" layer(relay-theme) prefix(relay);
+@import "tailwindcss/utilities.css" layer(relay-utilities) prefix(relay);
 
 @custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
 
@@ -144,10 +144,10 @@
 
 /* ===================================================================
    CSS Reset (scoped to .relay-kit-reset)
-   Wrapped in @layer base so it appears BEFORE @tailwind utilities
+   Wrapped in @layer relay-base so it appears BEFORE @tailwind utilities
    in the output. This ensures utility classes always win over the reset.
    =================================================================== */
-@layer base {
+@layer relay-base {
 
 .relay-kit-reset {
   --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,

From a7b4541268bcef1b145eb8454649cbaaadce99dc Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Thu, 5 Mar 2026 16:34:05 -0500
Subject: [PATCH 2/2] feat: changeset

---
 .changeset/yellow-meals-sink.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/yellow-meals-sink.md

diff --git a/.changeset/yellow-meals-sink.md b/.changeset/yellow-meals-sink.md
new file mode 100644
index 00000000..5ef4ecfd
--- /dev/null
+++ b/.changeset/yellow-meals-sink.md
@@ -0,0 +1,5 @@
+---
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Fix CSS layer scoping and priority for host app compatibility