diff --git a/examples/customer-segmentation-server/src/mcp-app.css b/examples/customer-segmentation-server/src/mcp-app.css index aacaef4..bfb5e17 100644 --- a/examples/customer-segmentation-server/src/mcp-app.css +++ b/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 */ - --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); @@ -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: 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 { @@ -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; } diff --git a/specification/draft/apps.mdx b/specification/draft/apps.mdx index f7f20f9..6e33f81 100644 --- a/specification/draft/apps.mdx +++ b/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" diff --git a/src/generated/schema.json b/src/generated/schema.json index 020c30e..e835986 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" @@ -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" diff --git a/src/generated/schema.ts b/src/generated/schema.ts index dfd9232..7ac05ce 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 cc5db56..f97a0a6 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"