From 9888c6a20bac7c788da2a98152f6901b03ea25ca Mon Sep 17 00:00:00 2001 From: martinalong Date: Tue, 16 Dec 2025 22:20:45 -0800 Subject: [PATCH 1/2] Add forgotten style variable --- specification/draft/apps.mdx | 1 + src/generated/schema.json | 24 ++++++++++++++++++++++++ src/generated/schema.ts | 1 + src/spec.types.ts | 1 + 4 files changed, 27 insertions(+) diff --git a/specification/draft/apps.mdx b/specification/draft/apps.mdx index d8c663f..0a6eae2 100644 --- a/specification/draft/apps.mdx +++ b/specification/draft/apps.mdx @@ -544,6 +544,7 @@ type McpUiStyleVariableKey = | "--color-text-success" | "--color-text-warning" | "--color-text-disabled" + | "--color-text-ghost" // Border colors | "--color-border-primary" | "--color-border-secondary" diff --git a/src/generated/schema.json b/src/generated/schema.json index 5af29fe..5d45348 100644 --- a/src/generated/schema.json +++ b/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" @@ -961,6 +965,10 @@ "type": "string", "const": "--color-text-disabled" }, + { + "type": "string", + "const": "--color-text-ghost" + }, { "type": "string", "const": "--color-border-primary" @@ -1405,6 +1413,10 @@ "type": "string", "const": "--color-text-disabled" }, + { + "type": "string", + "const": "--color-text-ghost" + }, { "type": "string", "const": "--color-border-primary" @@ -2079,6 +2091,10 @@ "type": "string", "const": "--color-text-disabled" }, + { + "type": "string", + "const": "--color-text-ghost" + }, { "type": "string", "const": "--color-border-primary" @@ -3159,6 +3175,10 @@ "type": "string", "const": "--color-text-disabled" }, + { + "type": "string", + "const": "--color-text-ghost" + }, { "type": "string", "const": "--color-border-primary" @@ -3468,6 +3488,10 @@ "type": "string", "const": "--color-text-disabled" }, + { + "type": "string", + "const": "--color-text-ghost" + }, { "type": "string", "const": "--color-border-primary" diff --git a/src/generated/schema.ts b/src/generated/schema.ts index f522502..a389b6d 100644 --- a/src/generated/schema.ts +++ b/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"), diff --git a/src/spec.types.ts b/src/spec.types.ts index d1ed449..0a04b87 100644 --- a/src/spec.types.ts +++ b/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" From d797ed11f8901f39c0673fe46f547ee307422da5 Mon Sep 17 00:00:00 2001 From: martinalong Date: Tue, 16 Dec 2025 22:39:40 -0800 Subject: [PATCH 2/2] Use more of the style variables in customer-segmentation-server --- .../src/mcp-app.css | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/examples/customer-segmentation-server/src/mcp-app.css b/examples/customer-segmentation-server/src/mcp-app.css index 6bb5df4..4e25883 100644 --- a/examples/customer-segmentation-server/src/mcp-app.css +++ b/examples/customer-segmentation-server/src/mcp-app.css @@ -16,12 +16,19 @@ --color-border-primary: light-dark(#e5e7eb, #374151); --color-border-secondary: light-dark(#d1d5db, #4b5563); - /* Accent colors */ - --color-accent-info: light-dark(#2563eb, #3b82f6); + /* Ring colors */ + --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); @@ -94,7 +101,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); @@ -102,7 +109,7 @@ html, body { } .select:focus { - outline: 2px solid var(--color-accent-info); + outline: 2px solid var(--color-ring-info); outline-offset: 1px; } @@ -113,7 +120,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 { @@ -143,15 +150,15 @@ html, body { font-size: 0.75rem; cursor: pointer; padding: 4px 10px; - border-radius: 16px; - border: 1px solid var(--color-border-primary); + border-radius: var(--border-radius-full); + 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 { @@ -192,7 +199,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; }