Make it styles.variables instead of styles

Author: martinalong

examples/customer-segmentation-server/src/mcp-app.ts

@@ -453,11 +453,11 @@ app.onhostcontextchanged = (params) => {
   if (params.theme) {
     applyDocumentTheme(params.theme);
   }
-  if (params.styles) {
-    applyHostStyles(params.styles);
+  if (params.styles?.variables) {
+    applyHostStyles(params.styles.variables);
   }
   // Recreate chart to pick up new colors
-  if (state.chart && (params.theme || params.styles)) {
+  if (state.chart && (params.theme || params.styles?.variables)) {
     state.chart.destroy();
     state.chart = initChart();
   }
@@ -469,8 +469,8 @@ app.connect(new PostMessageTransport(window.parent)).then(() => {
   if (ctx?.theme) {
     applyDocumentTheme(ctx.theme);
   }
-  if (ctx?.styles) {
-    applyHostStyles(ctx.styles);
+  if (ctx?.styles?.variables) {
+    applyHostStyles(ctx.styles.variables);
   }
 });
 

specification/draft/apps.mdx

@@ -401,8 +401,11 @@ interface HostContext {
   };
   /** Current color theme preference */
   theme?: "light" | "dark";
-  /** CSS variables for theming. See Theming section for standardized variable names. */
-  styles?: Record<McpUiStyleVariableKey, string | undefined>;
+  /** Style configuration for theming. See Theming section for standardized variable names. */
+  styles?: {
+    /** CSS variables for theming */
+    variables?: Record<McpUiStyleVariableKey, string | undefined>;
+  };
   /** How the UI is currently displayed */
   displayMode?: "inline" | "fullscreen" | "pip";
   /** Display modes the host supports */
@@ -451,10 +454,12 @@ Example:
     "hostContext": {
       "theme": "dark",
       "styles": {
-        "--color-background-primary": "light-dark(#ffffff, #171717)",
-        "--color-text-primary": "light-dark(#171717, #fafafa)",
-        "--font-family-sans": "system-ui, sans-serif",
-        ...
+        "variables": {
+          "--color-background-primary": "light-dark(#ffffff, #171717)",
+          "--color-text-primary": "light-dark(#171717, #fafafa)",
+          "--font-family-sans": "system-ui, sans-serif",
+          ...
+        }
       },
       "displayMode": "inline",
       "viewport": { "width": 400, "height": 300 }
@@ -465,7 +470,7 @@ Example:
 
 ### Theming
 
-Hosts can optionally pass CSS custom properties via `HostContext.styles` for visual cohesion with the host environment.
+Hosts can optionally pass CSS custom properties via `HostContext.styles.variables` for visual cohesion with the host environment.
 
 #### Current Standardized Variables