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

105
specification/draft/apps.mdx
View file

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

104
src/spec.types.ts
View file

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