feat(css): make theme tokens + dark variant Shadow-DOM friendly

src/app/globals.css

@@ -1,7 +1,16 @@
 @import "tailwindcss";
 @import "./styles/markdown.css";
 
-@custom-variant dark (&:is(.dark *));
+/*
+ * `dark:` Tailwind variant. The default `&:is(.dark *)` matches an element
+ * inside a `.dark` ancestor in the same DOM tree. That breaks for consumers
+ * that mount Studio inside an open Shadow Root (e.g. to keep Tailwind's
+ * preflight from leaking into a host app), because descendant combinators
+ * can't cross the shadow boundary - the `.dark` class lives on the shadow
+ * host, which is outside the shadow tree. Add `:host(.dark) *` so the
+ * variant also matches when `.dark` is on the host element.
+ */
+@custom-variant dark (&:where(.dark *, :host(.dark) *));
 @custom-variant interactive (&:where(.interactive, .interactive *));
 @custom-variant toggle (&:where(.toggle, .toggle *));
 @custom-variant square (&:where(.square, .square *));
@@ -225,7 +234,10 @@
     overscroll-behavior-x: none;
   }
 
-  :root {
+  /* `:host` is added so the same tokens reach consumers that mount Studio
+     inside a Shadow Root; `:root` matches Document.documentElement only. */
+  :root,
+  :host {
     --color-table-grid: #eee;
     --color-table-change: #f6e58d;
 
@@ -244,7 +256,8 @@
 }
 
 @layer base {
-  :root {
+  :root,
+  :host {
     --background: #fff;
     --foreground: #444;
 
@@ -283,7 +296,8 @@
     --scroll-bar-hover: #ccc;
   }
 
-  .dark {
+  .dark,
+  :host(.dark) {
     --background: #0a0a0a;
     --foreground: #aaa;
 
@@ -361,7 +375,8 @@
 
 /* FROM ORBIT DESIGN SYSTEM */
 
-.dark {
+.dark,
+:host(.dark) {
   /* Component colors */
 
   /* Base colors */
@@ -527,7 +542,8 @@
   outline: none !important;
 }
 
-.dark .cm-table-name {
+.dark .cm-table-name,
+:host(.dark) .cm-table-name {
   color: #fd79a8;
 }
 

src/components/editor/prompt-plugin.css

@@ -6,15 +6,17 @@
   background: #f5f5f5;
 }
 
-.dark .prompt-line-selected {
+.dark .prompt-line-selected,
+:host(.dark) .prompt-line-selected {
   background: #222;
 }
 
 .cm-deletedChunk {
   background-color: #fab1a0 !important;
 }
 
-.dark .cm-deletedChunk {
+.dark .cm-deletedChunk,
+:host(.dark) .cm-deletedChunk {
   background-color: #b54b4b !important;
 }
 
@@ -26,7 +28,8 @@
   background-color: #55efc4 !important;
 }
 
-.dark .cm-changedLine {
+.dark .cm-changedLine,
+:host(.dark) .cm-changedLine {
   background-color: #2f6542 !important;
 }
 

src/components/gui/table-cell/styles.module.css

@@ -8,7 +8,8 @@
   border: 1px solid #e00;
 }
 
-:global(.dark) .change {
+:global(.dark) .change,
+:global(:host(.dark)) .change {
   @apply bg-yellow-500;
 }