Finalized variable set

Author: martinalong

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;

specification/draft/apps.mdx

@@ -481,50 +481,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