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

Use more of the style variables in customer-segmentation-server

Browse source
This commit is contained in:
martinalong 2025-12-16 22:39:40 -08:00
commit d797ed11f8
No known key found for this signature in database
1 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,12 +16,19 @@
--color-border-primary: light-dark(#e5e7eb, #374151); --color-border-primary: light-dark(#e5e7eb, #374151);
--color-border-secondary: light-dark(#d1d5db, #4b5563); --color-border-secondary: light-dark(#d1d5db, #4b5563);
/* Accent colors */ /* Ring colors */
--color-accent-info: light-dark(#2563eb, #3b82f6); --color-ring-info: light-dark(#2563eb, #3b82f6);
/* Border radius */ /* Border radius */
--border-radius-sm: 6px; --border-radius-sm: 6px;
--border-radius-md: 8px; --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) */ /* App-specific colors (not from host) */
--color-enterprise: light-dark(#1e40af, #3b82f6); --color-enterprise: light-dark(#1e40af, #3b82f6);
@ -94,7 +101,7 @@ html, body {
.select { .select {
padding: 4px 8px; padding: 4px 8px;
font-size: 0.8125rem; 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); 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);
@ -102,7 +109,7 @@ html, body {
} }
.select:focus { .select:focus {
outline: 2px solid var(--color-accent-info); outline: 2px solid var(--color-ring-info);
outline-offset: 1px; outline-offset: 1px;
} }
@ -113,7 +120,7 @@ html, body {
background: var(--color-background-secondary); background: var(--color-background-secondary);
border-radius: var(--border-radius-md); border-radius: var(--border-radius-md);
padding: 8px; padding: 8px;
border: 1px solid var(--color-border-primary); border: var(--border-width-regular) solid var(--color-border-primary);
} }
.chart-container { .chart-container {
@ -143,15 +150,15 @@ html, body {
font-size: 0.75rem; font-size: 0.75rem;
cursor: pointer; cursor: pointer;
padding: 4px 10px; padding: 4px 10px;
border-radius: 16px; border-radius: var(--border-radius-full);
border: 1px solid var(--color-border-primary); border: var(--border-width-regular) solid var(--color-border-primary);
background: var(--color-background-secondary); background: var(--color-background-secondary);
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.legend-item:hover { .legend-item:hover {
border-color: var(--color-text-secondary); 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 { .legend-item.hidden {
@ -192,7 +199,7 @@ html, body {
background: var(--color-background-secondary); background: var(--color-background-secondary);
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
padding: 0 12px; padding: 0 12px;
border: 1px solid var(--color-border-primary); border: var(--border-width-regular) solid var(--color-border-primary);
font-size: 0.8125rem; font-size: 0.8125rem;
} }