c3d91a13adUpdate `mcp-app.css`, `mcp-app.module.css`, and Svelte/Vue component styles across all `basic-server-*` examples (and `integration-server`) to use CSS variables instead of hardcoded values: - Remove component-local color variables (`--color-primary`, etc.) - Add derived spacing variables to `global.css` based on `--spacing-unit` - Replace hardcoded spacing with `--spacing-xs/sm/md/lg` variables - Add app-defined accent color variables (`--color-accent`, `--color-text-on-accent`) to `global.css` for brand customization - Use app accent colors for button styling - Update button hover to use `color-mix()` for theme-adaptive lightening - Change focus-visible to use `--color-ring-primary` outline This makes the templates more instructive for users and AI coding agents building new MCP Apps by showing how to consume host-provided variables semantically, define app-specific accent colors, and create adaptive styling that integrates with host themes. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
79 lines
1.5 KiB
CSS
79 lines
1.5 KiB
CSS
.main {
|
||
width: 100%;
|
||
max-width: 425px;
|
||
box-sizing: border-box;
|
||
|
||
> * {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
> * + * {
|
||
margin-top: var(--spacing-lg);
|
||
}
|
||
}
|
||
|
||
.action {
|
||
> * {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
> * + * {
|
||
margin-top: var(--spacing-sm);
|
||
}
|
||
|
||
/* Server time row: flex layout for consistent mask width in E2E tests */
|
||
> p {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: var(--spacing-xs);
|
||
}
|
||
|
||
/* Consistent font for form inputs (inherits from global.css) */
|
||
textarea,
|
||
input {
|
||
display: block;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
}
|
||
|
||
button {
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border: none;
|
||
border-radius: var(--border-radius-md);
|
||
color: var(--color-text-on-accent);
|
||
font-weight: var(--font-weight-bold);
|
||
background-color: var(--color-accent);
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
|
||
}
|
||
|
||
&:focus-visible {
|
||
outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
|
||
outline-offset: var(--border-width-regular);
|
||
}
|
||
}
|
||
}
|
||
|
||
.notice {
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
color: var(--color-text-info);
|
||
text-align: center;
|
||
font-style: italic;
|
||
background-color: var(--color-background-info);
|
||
|
||
&::before {
|
||
content: "ℹ️ ";
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
/* Server time fills remaining width for consistent E2E screenshot masking */
|
||
.serverTime {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|