modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finalized variable set

Browse source
This commit is contained in:
martinalong 2025-12-14 12:31:58 -08:00
commit aa79cb7c5e
No known key found for this signature in database
5 changed files with 1317 additions and 261 deletions
Download patch file Download diff file Expand all files Collapse all files

14
examples/customer-segmentation-server/src/mcp-app.css
View file

@ -20,8 +20,8 @@
--color-accent-info: light-dark(#2563eb, #3b82f6); --color-accent-info: light-dark(#2563eb, #3b82f6);
/* Border radius */ /* Border radius */
--border-radius-small: 4px; --border-radius-sm: 6px;
--border-radius-medium: 8px; --border-radius-md: 8px;
/* App-specific colors (not from host) */ /* App-specific colors (not from host) */
--color-enterprise: light-dark(#1e40af, #3b82f6); --color-enterprise: light-dark(#1e40af, #3b82f6);
@ -38,7 +38,7 @@ html, body {
} }
.main { .main {
border-radius: var(--border-radius-medium); border-radius: var(--border-radius-md);
background: var(--color-background-primary); background: var(--color-background-primary);
width: 100%; width: 100%;
height: 600px; height: 600px;
@ -95,7 +95,7 @@ html, body {
padding: 4px 8px; padding: 4px 8px;
font-size: 0.8125rem; font-size: 0.8125rem;
border: 1px solid var(--color-border-primary); border: 1px solid var(--color-border-primary);
border-radius: var(--border-radius-small); border-radius: var(--border-radius-sm);
background: var(--color-background-secondary); background: var(--color-background-secondary);
color: var(--color-text-primary); color: var(--color-text-primary);
cursor: pointer; cursor: pointer;
@ -111,7 +111,7 @@ html, body {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
background: var(--color-background-secondary); background: var(--color-background-secondary);
border-radius: var(--border-radius-medium); border-radius: var(--border-radius-md);
padding: 8px; padding: 8px;
border: 1px solid var(--color-border-primary); border: 1px solid var(--color-border-primary);
} }
@ -190,7 +190,7 @@ html, body {
gap: 16px; gap: 16px;
height: 100%; height: 100%;
background: var(--color-background-secondary); background: var(--color-background-secondary);
border-radius: var(--border-radius-small); border-radius: var(--border-radius-sm);
padding: 0 12px; padding: 0 12px;
border: 1px solid var(--color-border-primary); border: 1px solid var(--color-border-primary);
font-size: 0.8125rem; font-size: 0.8125rem;
@ -206,7 +206,7 @@ html, body {
.detail-segment { .detail-segment {
padding: 2px 8px; padding: 2px 8px;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-sm);
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 500;
color: white; color: white;

105
specification/draft/apps.mdx
View file

@ -484,50 +484,91 @@ type McpUiStyleVariableKey =
| "--color-background-primary" | "--color-background-primary"
| "--color-background-secondary" | "--color-background-secondary"
| "--color-background-tertiary" | "--color-background-tertiary"
| "--color-background-inverted" | "--color-background-inverse"
| "--color-background-ghost"
| "--color-background-info"
| "--color-background-danger"
| "--color-background-success"
| "--color-background-warning"
| "--color-background-disabled"
// Text colors // Text colors
| "--color-text-primary" | "--color-text-primary"
| "--color-text-secondary" | "--color-text-secondary"
| "--color-text-tertiary" | "--color-text-tertiary"
| "--color-text-inverted" | "--color-text-inverse"
// Icon colors | "--color-text-info"
| "--color-icon-primary" | "--color-text-danger"
| "--color-icon-secondary" | "--color-text-success"
| "--color-icon-tertiary" | "--color-text-warning"
| "--color-icon-inverted" | "--color-text-disabled"
// Border colors // Border colors
| "--color-border-primary" | "--color-border-primary"
| "--color-border-secondary" | "--color-border-secondary"
// Accent colors | "--color-border-tertiary"
| "--color-accent-info" | "--color-border-inverse"
| "--color-accent-danger" | "--color-border-ghost"
| "--color-accent-success" | "--color-border-info"
| "--color-accent-warning" | "--color-border-danger"
| "--color-border-success"
| "--color-border-warning"
| "--color-border-disabled"
// Ring colors
| "--color-ring-primary"
| "--color-ring-secondary"
| "--color-ring-inverse"
| "--color-ring-info"
| "--color-ring-danger"
| "--color-ring-success"
| "--color-ring-warning"
// Typography - Family // Typography - Family
| "--font-family-sans" | "--font-sans"
// Typography - Size | "--font-mono"
| "--font-size-heading"
| "--font-size-body"
| "--font-size-caption"
// Typography - Weight // Typography - Weight
| "--font-weight-regular" | "--font-weight-normal"
| "--font-weight-emphasized" | "--font-weight-medium"
// Typography - Line height | "--font-weight-semibold"
| "--font-leading-regular" | "--font-weight-bold"
| "--font-leading-tight" // Typography - Text Size
// Typography - Composite styles | "--font-text-xs-size"
| "--font-style-heading" | "--font-text-sm-size"
| "--font-style-body" | "--font-text-md-size"
| "--font-style-body-emphasized" | "--font-text-lg-size"
| "--font-style-caption" // Typography - Heading Size
| "--font-style-caption-emphasized" | "--font-heading-xs-size"
| "--font-heading-sm-size"
| "--font-heading-md-size"
| "--font-heading-lg-size"
| "--font-heading-xl-size"
| "--font-heading-2xl-size"
| "--font-heading-3xl-size"
// Typography - Text Line Height
| "--font-text-xs-line-height"
| "--font-text-sm-line-height"
| "--font-text-md-line-height"
| "--font-text-lg-line-height"
// Typography - Heading Line Height
| "--font-heading-xs-line-height"
| "--font-heading-sm-line-height"
| "--font-heading-md-line-height"
| "--font-heading-lg-line-height"
| "--font-heading-xl-line-height"
| "--font-heading-2xl-line-height"
| "--font-heading-3xl-line-height"
// Border radius // Border radius
| "--border-radius-small" | "--border-radius-xs"
| "--border-radius-medium" | "--border-radius-sm"
| "--border-radius-large" | "--border-radius-md"
| "--border-radius-lg"
| "--border-radius-xl"
| "--border-radius-full" | "--border-radius-full"
// Border width // Border width
| "--border-width-regular"; | "--border-width-regular"
// Shadows
| "--shadow-hairline"
| "--shadow-sm"
| "--shadow-md"
| "--shadow-lg";
```
#### Host Behavior #### Host Behavior

1248
src/generated/schema.json
View file

File diff suppressed because it is too large Load diff

91
src/generated/schema.ts
View file

@ -32,39 +32,78 @@ export const McpUiStyleVariableKeySchema = z
z.literal("--color-background-primary"), z.literal("--color-background-primary"),
z.literal("--color-background-secondary"), z.literal("--color-background-secondary"),
z.literal("--color-background-tertiary"), z.literal("--color-background-tertiary"),
z.literal("--color-background-inverted"), z.literal("--color-background-inverse"),
z.literal("--color-background-ghost"),
z.literal("--color-background-info"),
z.literal("--color-background-danger"),
z.literal("--color-background-success"),
z.literal("--color-background-warning"),
z.literal("--color-background-disabled"),
z.literal("--color-text-primary"), z.literal("--color-text-primary"),
z.literal("--color-text-secondary"), z.literal("--color-text-secondary"),
z.literal("--color-text-tertiary"), z.literal("--color-text-tertiary"),
z.literal("--color-text-inverted"), z.literal("--color-text-inverse"),
z.literal("--color-icon-primary"), z.literal("--color-text-info"),
z.literal("--color-icon-secondary"), z.literal("--color-text-danger"),
z.literal("--color-icon-tertiary"), z.literal("--color-text-success"),
z.literal("--color-icon-inverted"), z.literal("--color-text-warning"),
z.literal("--color-text-disabled"),
z.literal("--color-border-primary"), z.literal("--color-border-primary"),
z.literal("--color-border-secondary"), z.literal("--color-border-secondary"),
z.literal("--color-accent-info"), z.literal("--color-border-tertiary"),
z.literal("--color-accent-danger"), z.literal("--color-border-inverse"),
z.literal("--color-accent-success"), z.literal("--color-border-ghost"),
z.literal("--color-accent-warning"), z.literal("--color-border-info"),
z.literal("--font-family-sans"), z.literal("--color-border-danger"),
z.literal("--font-size-heading"), z.literal("--color-border-success"),
z.literal("--font-size-body"), z.literal("--color-border-warning"),
z.literal("--font-size-caption"), z.literal("--color-border-disabled"),
z.literal("--font-weight-regular"), z.literal("--color-ring-primary"),
z.literal("--font-weight-emphasized"), z.literal("--color-ring-secondary"),
z.literal("--font-leading-regular"), z.literal("--color-ring-inverse"),
z.literal("--font-leading-tight"), z.literal("--color-ring-info"),
z.literal("--font-style-heading"), z.literal("--color-ring-danger"),
z.literal("--font-style-body"), z.literal("--color-ring-success"),
z.literal("--font-style-body-emphasized"), z.literal("--color-ring-warning"),
z.literal("--font-style-caption"), z.literal("--font-sans"),
z.literal("--font-style-caption-emphasized"), z.literal("--font-mono"),
z.literal("--border-radius-small"), z.literal("--font-weight-normal"),
z.literal("--border-radius-medium"), z.literal("--font-weight-medium"),
z.literal("--border-radius-large"), z.literal("--font-weight-semibold"),
z.literal("--font-weight-bold"),
z.literal("--font-text-xs-size"),
z.literal("--font-text-sm-size"),
z.literal("--font-text-md-size"),
z.literal("--font-text-lg-size"),
z.literal("--font-heading-xs-size"),
z.literal("--font-heading-sm-size"),
z.literal("--font-heading-md-size"),
z.literal("--font-heading-lg-size"),
z.literal("--font-heading-xl-size"),
z.literal("--font-heading-2xl-size"),
z.literal("--font-heading-3xl-size"),
z.literal("--font-text-xs-line-height"),
z.literal("--font-text-sm-line-height"),
z.literal("--font-text-md-line-height"),
z.literal("--font-text-lg-line-height"),
z.literal("--font-heading-xs-line-height"),
z.literal("--font-heading-sm-line-height"),
z.literal("--font-heading-md-line-height"),
z.literal("--font-heading-lg-line-height"),
z.literal("--font-heading-xl-line-height"),
z.literal("--font-heading-2xl-line-height"),
z.literal("--font-heading-3xl-line-height"),
z.literal("--border-radius-xs"),
z.literal("--border-radius-sm"),
z.literal("--border-radius-md"),
z.literal("--border-radius-lg"),
z.literal("--border-radius-xl"),
z.literal("--border-radius-full"), z.literal("--border-radius-full"),
z.literal("--border-width-regular"), z.literal("--border-width-regular"),
z.literal("--shadow-hairline"),
z.literal("--shadow-sm"),
z.literal("--shadow-md"),
z.literal("--shadow-lg"),
]) ])
.describe("CSS variable keys available to MCP apps for theming."); .describe("CSS variable keys available to MCP apps for theming.");

104
src/spec.types.ts
View file

@ -44,50 +44,90 @@ export type McpUiStyleVariableKey =
| "--color-background-primary" | "--color-background-primary"
| "--color-background-secondary" | "--color-background-secondary"
| "--color-background-tertiary" | "--color-background-tertiary"
| "--color-background-inverted" | "--color-background-inverse"
| "--color-background-ghost"
| "--color-background-info"
| "--color-background-danger"
| "--color-background-success"
| "--color-background-warning"
| "--color-background-disabled"
// Text colors // Text colors
| "--color-text-primary" | "--color-text-primary"
| "--color-text-secondary" | "--color-text-secondary"
| "--color-text-tertiary" | "--color-text-tertiary"
| "--color-text-inverted" | "--color-text-inverse"
// Icon colors | "--color-text-info"
| "--color-icon-primary" | "--color-text-danger"
| "--color-icon-secondary" | "--color-text-success"
| "--color-icon-tertiary" | "--color-text-warning"
| "--color-icon-inverted" | "--color-text-disabled"
// Border colors // Border colors
| "--color-border-primary" | "--color-border-primary"
| "--color-border-secondary" | "--color-border-secondary"
// Accent colors | "--color-border-tertiary"
| "--color-accent-info" | "--color-border-inverse"
| "--color-accent-danger" | "--color-border-ghost"
| "--color-accent-success" | "--color-border-info"
| "--color-accent-warning" | "--color-border-danger"
| "--color-border-success"
| "--color-border-warning"
| "--color-border-disabled"
// Ring colors
| "--color-ring-primary"
| "--color-ring-secondary"
| "--color-ring-inverse"
| "--color-ring-info"
| "--color-ring-danger"
| "--color-ring-success"
| "--color-ring-warning"
// Typography - Family // Typography - Family
| "--font-family-sans" | "--font-sans"
// Typography - Size | "--font-mono"
| "--font-size-heading"
| "--font-size-body"
| "--font-size-caption"
// Typography - Weight // Typography - Weight
| "--font-weight-regular" | "--font-weight-normal"
| "--font-weight-emphasized" | "--font-weight-medium"
// Typography - Line height | "--font-weight-semibold"
| "--font-leading-regular" | "--font-weight-bold"
| "--font-leading-tight" // Typography - Text Size
// Typography - Composite styles | "--font-text-xs-size"
| "--font-style-heading" | "--font-text-sm-size"
| "--font-style-body" | "--font-text-md-size"
| "--font-style-body-emphasized" | "--font-text-lg-size"
| "--font-style-caption" // Typography - Heading Size
| "--font-style-caption-emphasized" | "--font-heading-xs-size"
| "--font-heading-sm-size"
| "--font-heading-md-size"
| "--font-heading-lg-size"
| "--font-heading-xl-size"
| "--font-heading-2xl-size"
| "--font-heading-3xl-size"
// Typography - Text Line Height
| "--font-text-xs-line-height"
| "--font-text-sm-line-height"
| "--font-text-md-line-height"
| "--font-text-lg-line-height"
// Typography - Heading Line Height
| "--font-heading-xs-line-height"
| "--font-heading-sm-line-height"
| "--font-heading-md-line-height"
| "--font-heading-lg-line-height"
| "--font-heading-xl-line-height"
| "--font-heading-2xl-line-height"
| "--font-heading-3xl-line-height"
// Border radius // Border radius
| "--border-radius-small" | "--border-radius-xs"
| "--border-radius-medium" | "--border-radius-sm"
| "--border-radius-large" | "--border-radius-md"
| "--border-radius-lg"
| "--border-radius-xl"
| "--border-radius-full" | "--border-radius-full"
// Border width // Border width
| "--border-width-regular"; | "--border-width-regular"
// Shadows
| "--shadow-hairline"
| "--shadow-sm"
| "--shadow-md"
| "--shadow-lg";
/** /**
* @description Style variables for theming MCP apps. * @description Style variables for theming MCP apps.