diff --git a/examples/customer-segmentation-server/src/mcp-app.css b/examples/customer-segmentation-server/src/mcp-app.css index 313b158..6bb5df4 100644 --- a/examples/customer-segmentation-server/src/mcp-app.css +++ b/examples/customer-segmentation-server/src/mcp-app.css @@ -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; diff --git a/specification/draft/apps.mdx b/specification/draft/apps.mdx index 9d4ba91..44d3430 100644 --- a/specification/draft/apps.mdx +++ b/specification/draft/apps.mdx @@ -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 diff --git a/src/generated/schema.json b/src/generated/schema.json index a93fceb..b281147 100644 --- a/src/generated/schema.json +++ b/src/generated/schema.json @@ -288,7 +288,31 @@ }, { "type": "string", - "const": "--color-background-inverted" + "const": "--color-background-inverse" + }, + { + "type": "string", + "const": "--color-background-ghost" + }, + { + "type": "string", + "const": "--color-background-info" + }, + { + "type": "string", + "const": "--color-background-danger" + }, + { + "type": "string", + "const": "--color-background-success" + }, + { + "type": "string", + "const": "--color-background-warning" + }, + { + "type": "string", + "const": "--color-background-disabled" }, { "type": "string", @@ -304,23 +328,27 @@ }, { "type": "string", - "const": "--color-text-inverted" + "const": "--color-text-inverse" }, { "type": "string", - "const": "--color-icon-primary" + "const": "--color-text-info" }, { "type": "string", - "const": "--color-icon-secondary" + "const": "--color-text-danger" }, { "type": "string", - "const": "--color-icon-tertiary" + "const": "--color-text-success" }, { "type": "string", - "const": "--color-icon-inverted" + "const": "--color-text-warning" + }, + { + "type": "string", + "const": "--color-text-disabled" }, { "type": "string", @@ -332,83 +360,195 @@ }, { "type": "string", - "const": "--color-accent-info" + "const": "--color-border-tertiary" }, { "type": "string", - "const": "--color-accent-danger" + "const": "--color-border-inverse" }, { "type": "string", - "const": "--color-accent-success" + "const": "--color-border-ghost" }, { "type": "string", - "const": "--color-accent-warning" + "const": "--color-border-info" }, { "type": "string", - "const": "--font-family-sans" + "const": "--color-border-danger" }, { "type": "string", - "const": "--font-size-heading" + "const": "--color-border-success" }, { "type": "string", - "const": "--font-size-body" + "const": "--color-border-warning" }, { "type": "string", - "const": "--font-size-caption" + "const": "--color-border-disabled" }, { "type": "string", - "const": "--font-weight-regular" + "const": "--color-ring-primary" }, { "type": "string", - "const": "--font-weight-emphasized" + "const": "--color-ring-secondary" }, { "type": "string", - "const": "--font-leading-regular" + "const": "--color-ring-inverse" }, { "type": "string", - "const": "--font-leading-tight" + "const": "--color-ring-info" }, { "type": "string", - "const": "--font-style-heading" + "const": "--color-ring-danger" }, { "type": "string", - "const": "--font-style-body" + "const": "--color-ring-success" }, { "type": "string", - "const": "--font-style-body-emphasized" + "const": "--color-ring-warning" }, { "type": "string", - "const": "--font-style-caption" + "const": "--font-sans" }, { "type": "string", - "const": "--font-style-caption-emphasized" + "const": "--font-mono" }, { "type": "string", - "const": "--border-radius-small" + "const": "--font-weight-normal" }, { "type": "string", - "const": "--border-radius-medium" + "const": "--font-weight-medium" }, { "type": "string", - "const": "--border-radius-large" + "const": "--font-weight-semibold" + }, + { + "type": "string", + "const": "--font-weight-bold" + }, + { + "type": "string", + "const": "--font-text-xs-size" + }, + { + "type": "string", + "const": "--font-text-sm-size" + }, + { + "type": "string", + "const": "--font-text-md-size" + }, + { + "type": "string", + "const": "--font-text-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xs-size" + }, + { + "type": "string", + "const": "--font-heading-sm-size" + }, + { + "type": "string", + "const": "--font-heading-md-size" + }, + { + "type": "string", + "const": "--font-heading-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xl-size" + }, + { + "type": "string", + "const": "--font-heading-2xl-size" + }, + { + "type": "string", + "const": "--font-heading-3xl-size" + }, + { + "type": "string", + "const": "--font-text-xs-line-height" + }, + { + "type": "string", + "const": "--font-text-sm-line-height" + }, + { + "type": "string", + "const": "--font-text-md-line-height" + }, + { + "type": "string", + "const": "--font-text-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xs-line-height" + }, + { + "type": "string", + "const": "--font-heading-sm-line-height" + }, + { + "type": "string", + "const": "--font-heading-md-line-height" + }, + { + "type": "string", + "const": "--font-heading-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-2xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-3xl-line-height" + }, + { + "type": "string", + "const": "--border-radius-xs" + }, + { + "type": "string", + "const": "--border-radius-sm" + }, + { + "type": "string", + "const": "--border-radius-md" + }, + { + "type": "string", + "const": "--border-radius-lg" + }, + { + "type": "string", + "const": "--border-radius-xl" }, { "type": "string", @@ -417,6 +557,22 @@ { "type": "string", "const": "--border-width-regular" + }, + { + "type": "string", + "const": "--shadow-hairline" + }, + { + "type": "string", + "const": "--shadow-sm" + }, + { + "type": "string", + "const": "--shadow-md" + }, + { + "type": "string", + "const": "--shadow-lg" } ] }, @@ -743,7 +899,31 @@ }, { "type": "string", - "const": "--color-background-inverted" + "const": "--color-background-inverse" + }, + { + "type": "string", + "const": "--color-background-ghost" + }, + { + "type": "string", + "const": "--color-background-info" + }, + { + "type": "string", + "const": "--color-background-danger" + }, + { + "type": "string", + "const": "--color-background-success" + }, + { + "type": "string", + "const": "--color-background-warning" + }, + { + "type": "string", + "const": "--color-background-disabled" }, { "type": "string", @@ -759,23 +939,27 @@ }, { "type": "string", - "const": "--color-text-inverted" + "const": "--color-text-inverse" }, { "type": "string", - "const": "--color-icon-primary" + "const": "--color-text-info" }, { "type": "string", - "const": "--color-icon-secondary" + "const": "--color-text-danger" }, { "type": "string", - "const": "--color-icon-tertiary" + "const": "--color-text-success" }, { "type": "string", - "const": "--color-icon-inverted" + "const": "--color-text-warning" + }, + { + "type": "string", + "const": "--color-text-disabled" }, { "type": "string", @@ -787,83 +971,195 @@ }, { "type": "string", - "const": "--color-accent-info" + "const": "--color-border-tertiary" }, { "type": "string", - "const": "--color-accent-danger" + "const": "--color-border-inverse" }, { "type": "string", - "const": "--color-accent-success" + "const": "--color-border-ghost" }, { "type": "string", - "const": "--color-accent-warning" + "const": "--color-border-info" }, { "type": "string", - "const": "--font-family-sans" + "const": "--color-border-danger" }, { "type": "string", - "const": "--font-size-heading" + "const": "--color-border-success" }, { "type": "string", - "const": "--font-size-body" + "const": "--color-border-warning" }, { "type": "string", - "const": "--font-size-caption" + "const": "--color-border-disabled" }, { "type": "string", - "const": "--font-weight-regular" + "const": "--color-ring-primary" }, { "type": "string", - "const": "--font-weight-emphasized" + "const": "--color-ring-secondary" }, { "type": "string", - "const": "--font-leading-regular" + "const": "--color-ring-inverse" }, { "type": "string", - "const": "--font-leading-tight" + "const": "--color-ring-info" }, { "type": "string", - "const": "--font-style-heading" + "const": "--color-ring-danger" }, { "type": "string", - "const": "--font-style-body" + "const": "--color-ring-success" }, { "type": "string", - "const": "--font-style-body-emphasized" + "const": "--color-ring-warning" }, { "type": "string", - "const": "--font-style-caption" + "const": "--font-sans" }, { "type": "string", - "const": "--font-style-caption-emphasized" + "const": "--font-mono" }, { "type": "string", - "const": "--border-radius-small" + "const": "--font-weight-normal" }, { "type": "string", - "const": "--border-radius-medium" + "const": "--font-weight-medium" }, { "type": "string", - "const": "--border-radius-large" + "const": "--font-weight-semibold" + }, + { + "type": "string", + "const": "--font-weight-bold" + }, + { + "type": "string", + "const": "--font-text-xs-size" + }, + { + "type": "string", + "const": "--font-text-sm-size" + }, + { + "type": "string", + "const": "--font-text-md-size" + }, + { + "type": "string", + "const": "--font-text-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xs-size" + }, + { + "type": "string", + "const": "--font-heading-sm-size" + }, + { + "type": "string", + "const": "--font-heading-md-size" + }, + { + "type": "string", + "const": "--font-heading-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xl-size" + }, + { + "type": "string", + "const": "--font-heading-2xl-size" + }, + { + "type": "string", + "const": "--font-heading-3xl-size" + }, + { + "type": "string", + "const": "--font-text-xs-line-height" + }, + { + "type": "string", + "const": "--font-text-sm-line-height" + }, + { + "type": "string", + "const": "--font-text-md-line-height" + }, + { + "type": "string", + "const": "--font-text-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xs-line-height" + }, + { + "type": "string", + "const": "--font-heading-sm-line-height" + }, + { + "type": "string", + "const": "--font-heading-md-line-height" + }, + { + "type": "string", + "const": "--font-heading-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-2xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-3xl-line-height" + }, + { + "type": "string", + "const": "--border-radius-xs" + }, + { + "type": "string", + "const": "--border-radius-sm" + }, + { + "type": "string", + "const": "--border-radius-md" + }, + { + "type": "string", + "const": "--border-radius-lg" + }, + { + "type": "string", + "const": "--border-radius-xl" }, { "type": "string", @@ -872,6 +1168,22 @@ { "type": "string", "const": "--border-width-regular" + }, + { + "type": "string", + "const": "--shadow-hairline" + }, + { + "type": "string", + "const": "--shadow-sm" + }, + { + "type": "string", + "const": "--shadow-md" + }, + { + "type": "string", + "const": "--shadow-lg" } ] }, @@ -1031,7 +1343,31 @@ }, { "type": "string", - "const": "--color-background-inverted" + "const": "--color-background-inverse" + }, + { + "type": "string", + "const": "--color-background-ghost" + }, + { + "type": "string", + "const": "--color-background-info" + }, + { + "type": "string", + "const": "--color-background-danger" + }, + { + "type": "string", + "const": "--color-background-success" + }, + { + "type": "string", + "const": "--color-background-warning" + }, + { + "type": "string", + "const": "--color-background-disabled" }, { "type": "string", @@ -1047,23 +1383,27 @@ }, { "type": "string", - "const": "--color-text-inverted" + "const": "--color-text-inverse" }, { "type": "string", - "const": "--color-icon-primary" + "const": "--color-text-info" }, { "type": "string", - "const": "--color-icon-secondary" + "const": "--color-text-danger" }, { "type": "string", - "const": "--color-icon-tertiary" + "const": "--color-text-success" }, { "type": "string", - "const": "--color-icon-inverted" + "const": "--color-text-warning" + }, + { + "type": "string", + "const": "--color-text-disabled" }, { "type": "string", @@ -1075,83 +1415,195 @@ }, { "type": "string", - "const": "--color-accent-info" + "const": "--color-border-tertiary" }, { "type": "string", - "const": "--color-accent-danger" + "const": "--color-border-inverse" }, { "type": "string", - "const": "--color-accent-success" + "const": "--color-border-ghost" }, { "type": "string", - "const": "--color-accent-warning" + "const": "--color-border-info" }, { "type": "string", - "const": "--font-family-sans" + "const": "--color-border-danger" }, { "type": "string", - "const": "--font-size-heading" + "const": "--color-border-success" }, { "type": "string", - "const": "--font-size-body" + "const": "--color-border-warning" }, { "type": "string", - "const": "--font-size-caption" + "const": "--color-border-disabled" }, { "type": "string", - "const": "--font-weight-regular" + "const": "--color-ring-primary" }, { "type": "string", - "const": "--font-weight-emphasized" + "const": "--color-ring-secondary" }, { "type": "string", - "const": "--font-leading-regular" + "const": "--color-ring-inverse" }, { "type": "string", - "const": "--font-leading-tight" + "const": "--color-ring-info" }, { "type": "string", - "const": "--font-style-heading" + "const": "--color-ring-danger" }, { "type": "string", - "const": "--font-style-body" + "const": "--color-ring-success" }, { "type": "string", - "const": "--font-style-body-emphasized" + "const": "--color-ring-warning" }, { "type": "string", - "const": "--font-style-caption" + "const": "--font-sans" }, { "type": "string", - "const": "--font-style-caption-emphasized" + "const": "--font-mono" }, { "type": "string", - "const": "--border-radius-small" + "const": "--font-weight-normal" }, { "type": "string", - "const": "--border-radius-medium" + "const": "--font-weight-medium" }, { "type": "string", - "const": "--border-radius-large" + "const": "--font-weight-semibold" + }, + { + "type": "string", + "const": "--font-weight-bold" + }, + { + "type": "string", + "const": "--font-text-xs-size" + }, + { + "type": "string", + "const": "--font-text-sm-size" + }, + { + "type": "string", + "const": "--font-text-md-size" + }, + { + "type": "string", + "const": "--font-text-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xs-size" + }, + { + "type": "string", + "const": "--font-heading-sm-size" + }, + { + "type": "string", + "const": "--font-heading-md-size" + }, + { + "type": "string", + "const": "--font-heading-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xl-size" + }, + { + "type": "string", + "const": "--font-heading-2xl-size" + }, + { + "type": "string", + "const": "--font-heading-3xl-size" + }, + { + "type": "string", + "const": "--font-text-xs-line-height" + }, + { + "type": "string", + "const": "--font-text-sm-line-height" + }, + { + "type": "string", + "const": "--font-text-md-line-height" + }, + { + "type": "string", + "const": "--font-text-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xs-line-height" + }, + { + "type": "string", + "const": "--font-heading-sm-line-height" + }, + { + "type": "string", + "const": "--font-heading-md-line-height" + }, + { + "type": "string", + "const": "--font-heading-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-2xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-3xl-line-height" + }, + { + "type": "string", + "const": "--border-radius-xs" + }, + { + "type": "string", + "const": "--border-radius-sm" + }, + { + "type": "string", + "const": "--border-radius-md" + }, + { + "type": "string", + "const": "--border-radius-lg" + }, + { + "type": "string", + "const": "--border-radius-xl" }, { "type": "string", @@ -1160,6 +1612,22 @@ { "type": "string", "const": "--border-width-regular" + }, + { + "type": "string", + "const": "--shadow-hairline" + }, + { + "type": "string", + "const": "--shadow-sm" + }, + { + "type": "string", + "const": "--shadow-md" + }, + { + "type": "string", + "const": "--shadow-lg" } ] }, @@ -1549,7 +2017,31 @@ }, { "type": "string", - "const": "--color-background-inverted" + "const": "--color-background-inverse" + }, + { + "type": "string", + "const": "--color-background-ghost" + }, + { + "type": "string", + "const": "--color-background-info" + }, + { + "type": "string", + "const": "--color-background-danger" + }, + { + "type": "string", + "const": "--color-background-success" + }, + { + "type": "string", + "const": "--color-background-warning" + }, + { + "type": "string", + "const": "--color-background-disabled" }, { "type": "string", @@ -1565,23 +2057,27 @@ }, { "type": "string", - "const": "--color-text-inverted" + "const": "--color-text-inverse" }, { "type": "string", - "const": "--color-icon-primary" + "const": "--color-text-info" }, { "type": "string", - "const": "--color-icon-secondary" + "const": "--color-text-danger" }, { "type": "string", - "const": "--color-icon-tertiary" + "const": "--color-text-success" }, { "type": "string", - "const": "--color-icon-inverted" + "const": "--color-text-warning" + }, + { + "type": "string", + "const": "--color-text-disabled" }, { "type": "string", @@ -1593,83 +2089,195 @@ }, { "type": "string", - "const": "--color-accent-info" + "const": "--color-border-tertiary" }, { "type": "string", - "const": "--color-accent-danger" + "const": "--color-border-inverse" }, { "type": "string", - "const": "--color-accent-success" + "const": "--color-border-ghost" }, { "type": "string", - "const": "--color-accent-warning" + "const": "--color-border-info" }, { "type": "string", - "const": "--font-family-sans" + "const": "--color-border-danger" }, { "type": "string", - "const": "--font-size-heading" + "const": "--color-border-success" }, { "type": "string", - "const": "--font-size-body" + "const": "--color-border-warning" }, { "type": "string", - "const": "--font-size-caption" + "const": "--color-border-disabled" }, { "type": "string", - "const": "--font-weight-regular" + "const": "--color-ring-primary" }, { "type": "string", - "const": "--font-weight-emphasized" + "const": "--color-ring-secondary" }, { "type": "string", - "const": "--font-leading-regular" + "const": "--color-ring-inverse" }, { "type": "string", - "const": "--font-leading-tight" + "const": "--color-ring-info" }, { "type": "string", - "const": "--font-style-heading" + "const": "--color-ring-danger" }, { "type": "string", - "const": "--font-style-body" + "const": "--color-ring-success" }, { "type": "string", - "const": "--font-style-body-emphasized" + "const": "--color-ring-warning" }, { "type": "string", - "const": "--font-style-caption" + "const": "--font-sans" }, { "type": "string", - "const": "--font-style-caption-emphasized" + "const": "--font-mono" }, { "type": "string", - "const": "--border-radius-small" + "const": "--font-weight-normal" }, { "type": "string", - "const": "--border-radius-medium" + "const": "--font-weight-medium" }, { "type": "string", - "const": "--border-radius-large" + "const": "--font-weight-semibold" + }, + { + "type": "string", + "const": "--font-weight-bold" + }, + { + "type": "string", + "const": "--font-text-xs-size" + }, + { + "type": "string", + "const": "--font-text-sm-size" + }, + { + "type": "string", + "const": "--font-text-md-size" + }, + { + "type": "string", + "const": "--font-text-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xs-size" + }, + { + "type": "string", + "const": "--font-heading-sm-size" + }, + { + "type": "string", + "const": "--font-heading-md-size" + }, + { + "type": "string", + "const": "--font-heading-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xl-size" + }, + { + "type": "string", + "const": "--font-heading-2xl-size" + }, + { + "type": "string", + "const": "--font-heading-3xl-size" + }, + { + "type": "string", + "const": "--font-text-xs-line-height" + }, + { + "type": "string", + "const": "--font-text-sm-line-height" + }, + { + "type": "string", + "const": "--font-text-md-line-height" + }, + { + "type": "string", + "const": "--font-text-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xs-line-height" + }, + { + "type": "string", + "const": "--font-heading-sm-line-height" + }, + { + "type": "string", + "const": "--font-heading-md-line-height" + }, + { + "type": "string", + "const": "--font-heading-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-2xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-3xl-line-height" + }, + { + "type": "string", + "const": "--border-radius-xs" + }, + { + "type": "string", + "const": "--border-radius-sm" + }, + { + "type": "string", + "const": "--border-radius-md" + }, + { + "type": "string", + "const": "--border-radius-lg" + }, + { + "type": "string", + "const": "--border-radius-xl" }, { "type": "string", @@ -1678,6 +2286,22 @@ { "type": "string", "const": "--border-width-regular" + }, + { + "type": "string", + "const": "--shadow-hairline" + }, + { + "type": "string", + "const": "--shadow-sm" + }, + { + "type": "string", + "const": "--shadow-md" + }, + { + "type": "string", + "const": "--shadow-lg" } ] }, @@ -2412,7 +3036,31 @@ }, { "type": "string", - "const": "--color-background-inverted" + "const": "--color-background-inverse" + }, + { + "type": "string", + "const": "--color-background-ghost" + }, + { + "type": "string", + "const": "--color-background-info" + }, + { + "type": "string", + "const": "--color-background-danger" + }, + { + "type": "string", + "const": "--color-background-success" + }, + { + "type": "string", + "const": "--color-background-warning" + }, + { + "type": "string", + "const": "--color-background-disabled" }, { "type": "string", @@ -2428,23 +3076,27 @@ }, { "type": "string", - "const": "--color-text-inverted" + "const": "--color-text-inverse" }, { "type": "string", - "const": "--color-icon-primary" + "const": "--color-text-info" }, { "type": "string", - "const": "--color-icon-secondary" + "const": "--color-text-danger" }, { "type": "string", - "const": "--color-icon-tertiary" + "const": "--color-text-success" }, { "type": "string", - "const": "--color-icon-inverted" + "const": "--color-text-warning" + }, + { + "type": "string", + "const": "--color-text-disabled" }, { "type": "string", @@ -2456,83 +3108,195 @@ }, { "type": "string", - "const": "--color-accent-info" + "const": "--color-border-tertiary" }, { "type": "string", - "const": "--color-accent-danger" + "const": "--color-border-inverse" }, { "type": "string", - "const": "--color-accent-success" + "const": "--color-border-ghost" }, { "type": "string", - "const": "--color-accent-warning" + "const": "--color-border-info" }, { "type": "string", - "const": "--font-family-sans" + "const": "--color-border-danger" }, { "type": "string", - "const": "--font-size-heading" + "const": "--color-border-success" }, { "type": "string", - "const": "--font-size-body" + "const": "--color-border-warning" }, { "type": "string", - "const": "--font-size-caption" + "const": "--color-border-disabled" }, { "type": "string", - "const": "--font-weight-regular" + "const": "--color-ring-primary" }, { "type": "string", - "const": "--font-weight-emphasized" + "const": "--color-ring-secondary" }, { "type": "string", - "const": "--font-leading-regular" + "const": "--color-ring-inverse" }, { "type": "string", - "const": "--font-leading-tight" + "const": "--color-ring-info" }, { "type": "string", - "const": "--font-style-heading" + "const": "--color-ring-danger" }, { "type": "string", - "const": "--font-style-body" + "const": "--color-ring-success" }, { "type": "string", - "const": "--font-style-body-emphasized" + "const": "--color-ring-warning" }, { "type": "string", - "const": "--font-style-caption" + "const": "--font-sans" }, { "type": "string", - "const": "--font-style-caption-emphasized" + "const": "--font-mono" }, { "type": "string", - "const": "--border-radius-small" + "const": "--font-weight-normal" }, { "type": "string", - "const": "--border-radius-medium" + "const": "--font-weight-medium" }, { "type": "string", - "const": "--border-radius-large" + "const": "--font-weight-semibold" + }, + { + "type": "string", + "const": "--font-weight-bold" + }, + { + "type": "string", + "const": "--font-text-xs-size" + }, + { + "type": "string", + "const": "--font-text-sm-size" + }, + { + "type": "string", + "const": "--font-text-md-size" + }, + { + "type": "string", + "const": "--font-text-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xs-size" + }, + { + "type": "string", + "const": "--font-heading-sm-size" + }, + { + "type": "string", + "const": "--font-heading-md-size" + }, + { + "type": "string", + "const": "--font-heading-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xl-size" + }, + { + "type": "string", + "const": "--font-heading-2xl-size" + }, + { + "type": "string", + "const": "--font-heading-3xl-size" + }, + { + "type": "string", + "const": "--font-text-xs-line-height" + }, + { + "type": "string", + "const": "--font-text-sm-line-height" + }, + { + "type": "string", + "const": "--font-text-md-line-height" + }, + { + "type": "string", + "const": "--font-text-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xs-line-height" + }, + { + "type": "string", + "const": "--font-heading-sm-line-height" + }, + { + "type": "string", + "const": "--font-heading-md-line-height" + }, + { + "type": "string", + "const": "--font-heading-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-2xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-3xl-line-height" + }, + { + "type": "string", + "const": "--border-radius-xs" + }, + { + "type": "string", + "const": "--border-radius-sm" + }, + { + "type": "string", + "const": "--border-radius-md" + }, + { + "type": "string", + "const": "--border-radius-lg" + }, + { + "type": "string", + "const": "--border-radius-xl" }, { "type": "string", @@ -2541,6 +3305,22 @@ { "type": "string", "const": "--border-width-regular" + }, + { + "type": "string", + "const": "--shadow-hairline" + }, + { + "type": "string", + "const": "--shadow-sm" + }, + { + "type": "string", + "const": "--shadow-md" + }, + { + "type": "string", + "const": "--shadow-lg" } ] }, @@ -2565,7 +3345,31 @@ }, { "type": "string", - "const": "--color-background-inverted" + "const": "--color-background-inverse" + }, + { + "type": "string", + "const": "--color-background-ghost" + }, + { + "type": "string", + "const": "--color-background-info" + }, + { + "type": "string", + "const": "--color-background-danger" + }, + { + "type": "string", + "const": "--color-background-success" + }, + { + "type": "string", + "const": "--color-background-warning" + }, + { + "type": "string", + "const": "--color-background-disabled" }, { "type": "string", @@ -2581,23 +3385,27 @@ }, { "type": "string", - "const": "--color-text-inverted" + "const": "--color-text-inverse" }, { "type": "string", - "const": "--color-icon-primary" + "const": "--color-text-info" }, { "type": "string", - "const": "--color-icon-secondary" + "const": "--color-text-danger" }, { "type": "string", - "const": "--color-icon-tertiary" + "const": "--color-text-success" }, { "type": "string", - "const": "--color-icon-inverted" + "const": "--color-text-warning" + }, + { + "type": "string", + "const": "--color-text-disabled" }, { "type": "string", @@ -2609,83 +3417,195 @@ }, { "type": "string", - "const": "--color-accent-info" + "const": "--color-border-tertiary" }, { "type": "string", - "const": "--color-accent-danger" + "const": "--color-border-inverse" }, { "type": "string", - "const": "--color-accent-success" + "const": "--color-border-ghost" }, { "type": "string", - "const": "--color-accent-warning" + "const": "--color-border-info" }, { "type": "string", - "const": "--font-family-sans" + "const": "--color-border-danger" }, { "type": "string", - "const": "--font-size-heading" + "const": "--color-border-success" }, { "type": "string", - "const": "--font-size-body" + "const": "--color-border-warning" }, { "type": "string", - "const": "--font-size-caption" + "const": "--color-border-disabled" }, { "type": "string", - "const": "--font-weight-regular" + "const": "--color-ring-primary" }, { "type": "string", - "const": "--font-weight-emphasized" + "const": "--color-ring-secondary" }, { "type": "string", - "const": "--font-leading-regular" + "const": "--color-ring-inverse" }, { "type": "string", - "const": "--font-leading-tight" + "const": "--color-ring-info" }, { "type": "string", - "const": "--font-style-heading" + "const": "--color-ring-danger" }, { "type": "string", - "const": "--font-style-body" + "const": "--color-ring-success" }, { "type": "string", - "const": "--font-style-body-emphasized" + "const": "--color-ring-warning" }, { "type": "string", - "const": "--font-style-caption" + "const": "--font-sans" }, { "type": "string", - "const": "--font-style-caption-emphasized" + "const": "--font-mono" }, { "type": "string", - "const": "--border-radius-small" + "const": "--font-weight-normal" }, { "type": "string", - "const": "--border-radius-medium" + "const": "--font-weight-medium" }, { "type": "string", - "const": "--border-radius-large" + "const": "--font-weight-semibold" + }, + { + "type": "string", + "const": "--font-weight-bold" + }, + { + "type": "string", + "const": "--font-text-xs-size" + }, + { + "type": "string", + "const": "--font-text-sm-size" + }, + { + "type": "string", + "const": "--font-text-md-size" + }, + { + "type": "string", + "const": "--font-text-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xs-size" + }, + { + "type": "string", + "const": "--font-heading-sm-size" + }, + { + "type": "string", + "const": "--font-heading-md-size" + }, + { + "type": "string", + "const": "--font-heading-lg-size" + }, + { + "type": "string", + "const": "--font-heading-xl-size" + }, + { + "type": "string", + "const": "--font-heading-2xl-size" + }, + { + "type": "string", + "const": "--font-heading-3xl-size" + }, + { + "type": "string", + "const": "--font-text-xs-line-height" + }, + { + "type": "string", + "const": "--font-text-sm-line-height" + }, + { + "type": "string", + "const": "--font-text-md-line-height" + }, + { + "type": "string", + "const": "--font-text-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xs-line-height" + }, + { + "type": "string", + "const": "--font-heading-sm-line-height" + }, + { + "type": "string", + "const": "--font-heading-md-line-height" + }, + { + "type": "string", + "const": "--font-heading-lg-line-height" + }, + { + "type": "string", + "const": "--font-heading-xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-2xl-line-height" + }, + { + "type": "string", + "const": "--font-heading-3xl-line-height" + }, + { + "type": "string", + "const": "--border-radius-xs" + }, + { + "type": "string", + "const": "--border-radius-sm" + }, + { + "type": "string", + "const": "--border-radius-md" + }, + { + "type": "string", + "const": "--border-radius-lg" + }, + { + "type": "string", + "const": "--border-radius-xl" }, { "type": "string", @@ -2694,6 +3614,22 @@ { "type": "string", "const": "--border-width-regular" + }, + { + "type": "string", + "const": "--shadow-hairline" + }, + { + "type": "string", + "const": "--shadow-sm" + }, + { + "type": "string", + "const": "--shadow-md" + }, + { + "type": "string", + "const": "--shadow-lg" } ] }, diff --git a/src/generated/schema.ts b/src/generated/schema.ts index 6a571ec..8468228 100644 --- a/src/generated/schema.ts +++ b/src/generated/schema.ts @@ -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."); diff --git a/src/spec.types.ts b/src/spec.types.ts index 7d14291..2f1d253 100644 --- a/src/spec.types.ts +++ b/src/spec.types.ts @@ -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.