feat: release design system engine, studio and component contracts

packages/styles/src/theme.ts

@@ -11,6 +11,12 @@
  * emitted as the native CSS property instead of a custom property.
  */
 
+import {
+  adaptLegacyTheme,
+  compileDesignSystem,
+  type DesignSystemInput,
+} from "@wrnexus/design-system";
+
 export type ThemeSemanticColor =
   "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "error";
 export type ThemeToken =
@@ -169,6 +175,8 @@ export function resolveBrowserCookieOptions(
 }
 
 export interface ThemeConfig {
+  /** Opt-in typed design tokens. Explicit themes below retain final precedence. */
+  designSystem?: DesignSystemInput;
   /** Built-in palette name, or a complete custom semantic color palette. */
   palette?: ThemePaletteName | CustomThemePalette;
   /** Runtime accent/palette switcher configuration. */
@@ -180,6 +188,8 @@ export interface ThemeConfig {
 }
 
 export interface ResolvedTheme {
+  /** Compiled opt-in recipes, emitted after local component styles by SSR. */
+  recipeCss?: string;
   default: string;
   names: string[];
   themes: Record<string, ThemeTokens>;
@@ -569,6 +579,14 @@ export function resolveThemeConfig(
   config?: ThemeConfig,
   cookies?: BrowserCookiesConfig,
 ): ResolvedTheme {
+  let recipeCss: string | undefined;
+  if (config?.designSystem) {
+    const { system, ...options } = config.designSystem;
+    recipeCss = compileDesignSystem(system, options).recipeCss || undefined;
+    config = adaptLegacyTheme(system, config, options);
+    // Preserve the imported brand until an accent is explicitly configured/selected.
+    config = { ...config, accent: { default: false, ...config.accent } };
+  }
   const palette = resolvePalette(config?.palette);
   const themes: Record<string, ThemeTokens> = {};
   const names = new Set<string>([
@@ -595,6 +613,7 @@ export function resolveThemeConfig(
 
   return {
     default: preferred ?? fallback,
+    ...(recipeCss ? { recipeCss } : {}),
     names: list,
     themes,
     defaultAccent,