Merge pull request #174 from modelcontextprotocol/martinalong/mcp-apps/fix-style-variables

[MCP Apps] Add forgotten style variable

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

@@ -19,12 +19,19 @@
   --color-border-primary: light-dark(#e5e7eb, #374151);
   --color-border-secondary: light-dark(#d1d5db, #4b5563);
 
-  /* Accent colors */
+  /* Ring colors */
-  --color-accent-info: light-dark(#2563eb, #3b82f6);
+  --color-ring-info: light-dark(#2563eb, #3b82f6);
 
   /* Border radius */
   --border-radius-sm: 6px;
   --border-radius-md: 8px;
+  --border-radius-full: 9999px;
+
+  /* Border width */
+  --border-width-regular: 1px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
 
   /* App-specific colors (not from host) */
   --color-enterprise: light-dark(#1e40af, #3b82f6);
@@ -98,7 +105,7 @@ html, body {
 .select {
   padding: 4px 8px;
   font-size: 0.8125rem;
-  border: 1px solid var(--color-border-primary);
+  border: var(--border-width-regular) solid var(--color-border-primary);
   border-radius: var(--border-radius-sm);
   background: var(--color-background-secondary);
   color: var(--color-text-primary);
@@ -106,7 +113,7 @@ html, body {
 }
 
 .select:focus {
-  outline: 2px solid var(--color-accent-info);
+  outline: 2px solid var(--color-ring-info);
   outline-offset: 1px;
 }
 
@@ -117,7 +124,7 @@ html, body {
   background: var(--color-background-secondary);
   border-radius: var(--border-radius-md);
   padding: 8px;
-  border: 1px solid var(--color-border-primary);
+  border: var(--border-width-regular) solid var(--color-border-primary);
 }
 
 .chart-container {
@@ -147,15 +154,15 @@ html, body {
   font-size: 0.75rem;
   cursor: pointer;
   padding: 4px 10px;
-  border-radius: 16px;
+  border-radius: var(--border-radius-full);
-  border: 1px solid var(--color-border-primary);
+  border: var(--border-width-regular) solid var(--color-border-primary);
   background: var(--color-background-secondary);
   transition: all 0.15s ease;
 }
 
 .legend-item:hover {
   border-color: var(--color-text-secondary);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 .legend-item.hidden {
@@ -196,7 +203,7 @@ html, body {
   background: var(--color-background-secondary);
   border-radius: var(--border-radius-sm);
   padding: 0 12px;
-  border: 1px solid var(--color-border-primary);
+  border: var(--border-width-regular) solid var(--color-border-primary);
   font-size: 0.8125rem;
 }
 

specification/draft/apps.mdx

@@ -552,6 +552,7 @@ type McpUiStyleVariableKey =
   | "--color-text-success"
   | "--color-text-warning"
   | "--color-text-disabled"
+  | "--color-text-ghost"
   // Border colors
   | "--color-border-primary"
   | "--color-border-secondary"

src/generated/schema.json

@@ -350,6 +350,10 @@
                         "type": "string",
                         "const": "--color-text-disabled"
                       },
+                      {
+                        "type": "string",
+                        "const": "--color-text-ghost"
+                      },
                       {
                         "type": "string",
                         "const": "--color-border-primary"
@@ -972,6 +976,10 @@
                     "type": "string",
                     "const": "--color-text-disabled"
                   },
+                  {
+                    "type": "string",
+                    "const": "--color-text-ghost"
+                  },
                   {
                     "type": "string",
                     "const": "--color-border-primary"
@@ -1438,6 +1446,10 @@
                 "type": "string",
                 "const": "--color-text-disabled"
               },
+              {
+                "type": "string",
+                "const": "--color-text-ghost"
+              },
               {
                 "type": "string",
                 "const": "--color-border-primary"
@@ -2123,6 +2135,10 @@
                         "type": "string",
                         "const": "--color-text-disabled"
                       },
+                      {
+                        "type": "string",
+                        "const": "--color-text-ghost"
+                      },
                       {
                         "type": "string",
                         "const": "--color-border-primary"
@@ -3214,6 +3230,10 @@
           "type": "string",
           "const": "--color-text-disabled"
         },
+        {
+          "type": "string",
+          "const": "--color-text-ghost"
+        },
         {
           "type": "string",
           "const": "--color-border-primary"
@@ -3523,6 +3543,10 @@
             "type": "string",
             "const": "--color-text-disabled"
           },
+          {
+            "type": "string",
+            "const": "--color-text-ghost"
+          },
           {
             "type": "string",
             "const": "--color-border-primary"

src/generated/schema.ts

@@ -48,6 +48,7 @@ export const McpUiStyleVariableKeySchema = z
     z.literal("--color-text-success"),
     z.literal("--color-text-warning"),
     z.literal("--color-text-disabled"),
+    z.literal("--color-text-ghost"),
     z.literal("--color-border-primary"),
     z.literal("--color-border-secondary"),
     z.literal("--color-border-tertiary"),

src/spec.types.ts

@@ -61,6 +61,7 @@ export type McpUiStyleVariableKey =
   | "--color-text-success"
   | "--color-text-warning"
   | "--color-text-disabled"
+  | "--color-text-ghost"
   // Border colors
   | "--color-border-primary"
   | "--color-border-secondary"