fix(studio): keep the palette reset out of the exported theme.css

Author: miguel-heygen

packages/studio/src/styles/palette-reset.css

@@ -0,0 +1,6 @@
+/* Studio's own app clears Tailwind's stock palette so only Studio tokens are
+ * reachable from markup. Kept out of theme.css so a host importing the tokens
+ * keeps its own colours. Must be imported before theme.css. */
+@theme static {
+  --color-*: initial;
+}

packages/studio/src/styles/studio.css

@@ -1,4 +1,5 @@
 @import "tailwindcss" source(none);
+@import "./palette-reset.css";
 @import "./theme.css";
 
 /* Explicit sources: Studio's own TypeScript and its shell HTML. Automatic

packages/studio/src/styles/theme.css

@@ -3,11 +3,6 @@
  * tokens in `:root` so plain CSS and canvas code can still read them. */
 
 @theme static {
-  /* Clear Tailwind's stock palette so a colour that is not a Studio token
-   * cannot be reached from markup. The entries Studio still uses are
-   * re-declared below as deprecated aliases. */
-  --color-*: initial;
-
   /* ---------------------------------------------------------------- colour */
 
   /* Background levels, darkest (app shell) to lightest (inset panel body). */

packages/studio/src/styles/theme.test.ts

@@ -27,14 +27,17 @@ function loadStylesheet(id: string, base: string) {
   return { path: file, base: path.dirname(file), content: readFileSync(file, "utf8") };
 }
 
-async function build(entry: string, candidates: string[]): Promise<string> {
-  const compiled = await compile(readFileSync(path.join(STYLES_DIR, entry), "utf8"), {
+async function buildSource(source: string, candidates: string[]): Promise<string> {
+  const compiled = await compile(source, {
     base: STYLES_DIR,
     loadStylesheet,
   });
   return compiled.build(candidates);
 }
 
+const build = (entry: string, candidates: string[]) =>
+  buildSource(readFileSync(path.join(STYLES_DIR, entry), "utf8"), candidates);
+
 function rootVariables(css: string): Map<string, string> {
   const block = css.match(/:root, :host \{([\s\S]*?)\n {2}\}/);
   const vars = new Map<string, string>();
@@ -74,7 +77,7 @@ describe("studio theme", () => {
   });
 
   it("drops every Tailwind default color Studio does not use", async () => {
-    // `--color-*: initial` clears the stock palette. The entries Studio's
+    // `palette-reset.css` clears the stock palette. The entries Studio's
     // markup still references are re-declared as deprecated aliases (U12
     // removes them); anything outside that set must no longer resolve.
     const css = await build("studio.css", ["bg-neutral-750", "text-teal-500", "bg-neutral-800"]);
@@ -84,6 +87,16 @@ describe("studio theme", () => {
     expect(css).toContain(".bg-neutral-800 {");
   });
 
+  it("leaves a host's stock Tailwind colors alone when only theme.css is imported", async () => {
+    const css = await buildSource('@import "tailwindcss";\n@import "./theme.css";', [
+      "bg-teal-500",
+      "text-accent",
+    ]);
+
+    expect(css).toContain(".bg-teal-500 {");
+    expect(css).toContain(".text-accent {");
+  });
+
   it("keeps selection, playhead and accent as three distinct colors", () => {
     const accent = declaredValue("--color-accent");
     const selection = declaredValue("--color-selection");