feat(studio): move every design value into one theme file

packages/studio/package-subpaths.json

@@ -13,6 +13,12 @@
       "types": "./dist/styles/tailwind-preset.d.ts",
       "environments": ["bun", "node"]
     },
+    "./theme.css": {
+      "source": "./src/styles/theme.css",
+      "runtime": "./src/styles/theme.css",
+      "types": null,
+      "environments": ["browser", "bun", "node"]
+    },
     "./package.json": {
       "source": "./package.json",
       "runtime": "./package.json",

packages/studio/package.json

@@ -26,6 +26,7 @@
       "import": "./src/styles/tailwind-preset.ts",
       "types": "./src/styles/tailwind-preset.ts"
     },
+    "./theme.css": "./src/styles/theme.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -39,6 +40,7 @@
         "import": "./dist/styles/tailwind-preset.js",
         "types": "./dist/styles/tailwind-preset.d.ts"
       },
+      "./theme.css": "./src/styles/theme.css",
       "./package.json": "./package.json"
     },
     "main": "./dist/index.js",

packages/studio/src/main.tsx

@@ -1,7 +1,9 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { IconContext } from "@phosphor-icons/react";
 import { StudioApp } from "./App";
 import { StudioErrorBoundary } from "./components/StudioErrorBoundary";
+import { readIconTokens } from "./styles/iconTokens";
 import { trackStudioEvent } from "./utils/studioTelemetry";
 import "./styles/studio.css";
 
@@ -93,8 +95,12 @@ window.addEventListener("unhandledrejection", (event) => {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <StudioErrorBoundary>
-      <StudioApp />
-    </StudioErrorBoundary>
+    {/* One icon size and weight for the whole app, taken from the theme file.
+        Icons that pass their own size or weight still win. */}
+    <IconContext.Provider value={readIconTokens()}>
+      <StudioErrorBoundary>
+        <StudioApp />
+      </StudioErrorBoundary>
+    </IconContext.Provider>
   </StrictMode>,
 );

packages/studio/src/styles/iconTokens.ts

@@ -0,0 +1,27 @@
+import type { IconWeight } from "@phosphor-icons/react";
+
+const WEIGHTS = ["thin", "light", "regular", "bold", "fill", "duotone"] as const;
+
+function asWeight(value: string): IconWeight | null {
+  return (WEIGHTS as readonly string[]).includes(value) ? (value as IconWeight) : null;
+}
+
+/**
+ * Studio's Phosphor defaults, read off `theme.css` so the icon size and weight
+ * have one owner instead of a CSS variable and a JavaScript constant that drift
+ * apart. Both are SVG attributes, not styles, so `var()` cannot be handed to
+ * Phosphor directly and the values are resolved once at the app root.
+ *
+ * A missing or unrecognized value means the stylesheet has not loaded (or the
+ * token was renamed); Phosphor's own defaults are used rather than a second
+ * copy of the token values.
+ */
+export function readIconTokens(root: Element = document.documentElement): {
+  size: string;
+  weight: IconWeight;
+} {
+  const styles = getComputedStyle(root);
+  const size = styles.getPropertyValue("--icon-size").trim();
+  const weight = asWeight(styles.getPropertyValue("--icon-weight").trim());
+  return { size: size || "1em", weight: weight ?? "regular" };
+}

packages/studio/src/styles/studio.css

@@ -1,4 +1,5 @@
 @import "tailwindcss" source(none);
+@import "./theme.css";
 
 /*
  * Explicit sources: Studio's own TypeScript and its shell HTML. Automatic
@@ -8,33 +9,6 @@
 @source "../**/*.{ts,tsx}";
 @source "../../index.html";
 
-@theme {
-  --color-studio-bg: #0a0a0a;
-  --color-studio-surface: #141414;
-  --color-studio-border: #262626;
-  --color-studio-text: #e5e5e5;
-  --color-studio-muted: #737373;
-  --color-studio-accent: #3ce6ac;
-
-  --color-panel-bg: #0c0c0e;
-  --color-panel-bg-inset: #121214;
-  --color-panel-input: #161618;
-  --color-panel-surface: #18181b;
-  --color-panel-hover: #27272a;
-  --color-panel-border: #1e1e1e;
-  --color-panel-border-input: #27272a;
-  --color-panel-hairline: #1a1a1c;
-  --color-panel-text-0: #fafafa;
-  --color-panel-text-1: #e4e4e7;
-  --color-panel-text-2: #a1a1aa;
-  --color-panel-text-3: #71717a;
-  --color-panel-text-4: #52525b;
-  --color-panel-text-5: #3f3f46;
-  --color-panel-accent: #3ce6ac;
-  --color-panel-danger: #ef4444;
-  --color-panel-media: #00e3ff;
-  --color-panel-container: #f5a623;
-}
 
 /*
  * Studio is a dark-only UI — pin the user-agent color scheme to dark so that
@@ -48,9 +22,9 @@
 body {
   margin: 0;
   padding: 0;
-  background: #0a0a0a;
-  color: #e5e5e5;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--color-bg-0);
+  color: var(--color-text-body);
+  font-family: var(--font-sans);
   overflow: hidden;
 }
 
@@ -324,7 +298,7 @@ body {
   left: 12px;
   overflow: hidden;
   color: rgba(255, 255, 255, 0.34);
-  font-family: "SF Mono", "Fira Code", monospace;
+  font-family: var(--font-mono);
   font-size: 9px;
   font-variant-numeric: tabular-nums;
   line-height: 1;
@@ -362,7 +336,7 @@ body {
 }
 
 .cm-editor .cm-scroller {
-  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
+  font-family: var(--font-mono);
 }
 
 .cm-editor.cm-focused {
@@ -419,12 +393,7 @@ body {
 }
 
 .hf-loader-title {
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
+  font-family: var(--font-sans);
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0;
@@ -440,12 +409,7 @@ body {
   min-height: 2.5rem;
   overflow: hidden;
   color: var(--hf-text-secondary, rgba(244, 244, 245, 0.68));
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
+  font-family: var(--font-sans);
   font-size: 0.82rem;
   line-height: 1.6;
 }
@@ -457,7 +421,7 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--hf-text-tertiary, rgba(244, 244, 245, 0.46));
-  font-family: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+  font-family: var(--font-mono);
   font-size: 0.75rem;
   letter-spacing: 0;
   font-variant-numeric: tabular-nums;

packages/studio/src/styles/tailwind-preset.shared.js

@@ -1,3 +1,13 @@
+/**
+ * @deprecated Studio's tokens now live in `src/styles/theme.css`, published as
+ * `@hyperframes/studio/theme.css`. This preset is kept one more major so a
+ * Tailwind v3 consumer of `@hyperframes/studio/tailwind-preset` keeps building;
+ * it carries only the old `studio.*` and `panel.*` colour names and no new
+ * token ever lands here.
+ *
+ * The values below are byte-identical to the ones the theme file holds, and
+ * `theme.css` is the source of truth: `theme.test.ts` fails if the two drift.
+ */
 const studioPreset = {
   theme: {
     extend: {