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

Merge pull request #404 from jonathanhefner/basic-server-css-variables

Browse source 
Improve example CSS files to better demonstrate host style integration
This commit is contained in:
Jonathan Hefner 2026-01-30 13:52:17 -06:00 • committed by GitHub
commit d7ff999d40
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 560 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

81
examples/basic-server-preact/src/global.css
View file

@ -1,5 +1,48 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
/*
* Fallbacks for host style variables used by this app.
* The host may provide these (and many more) via the host context.
*/
--color-text-primary: light-dark(#1f2937, #f3f4f6);
--color-text-inverse: light-dark(#f3f4f6, #1f2937);
--color-text-info: light-dark(#1d4ed8, #60a5fa);
--color-background-primary: light-dark(#ffffff, #1a1a1a);
--color-background-inverse: light-dark(#1a1a1a, #ffffff);
--color-background-info: light-dark(#eff6ff, #1e3a5f);
--color-ring-primary: light-dark(#3b82f6, #60a5fa);
--border-radius-md: 6px;
--border-width-regular: 1px;
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-weight-normal: 400;
--font-weight-bold: 700;
--font-text-md-size: 1rem;
--font-text-md-line-height: 1.5;
--font-heading-3xl-size: 2.25rem;
--font-heading-3xl-line-height: 1.1;
--font-heading-2xl-size: 1.875rem;
--font-heading-2xl-line-height: 1.2;
--font-heading-xl-size: 1.5rem;
--font-heading-xl-line-height: 1.25;
--font-heading-lg-size: 1.25rem;
--font-heading-lg-line-height: 1.3;
--font-heading-md-size: 1rem;
--font-heading-md-line-height: 1.4;
--font-heading-sm-size: 0.875rem;
--font-heading-sm-line-height: 1.4;
/* Spacing derived from host typography */
--spacing-unit: var(--font-text-md-size);
--spacing-xs: calc(var(--spacing-unit) * 0.25);
--spacing-sm: calc(var(--spacing-unit) * 0.5);
--spacing-md: var(--spacing-unit);
--spacing-lg: calc(var(--spacing-unit) * 1.5);
/* App accent color (customize for your brand) */
--color-accent: #2563eb;
--color-text-on-accent: #ffffff;
} }
* { * {
@ -7,43 +50,43 @@
} }
html, body { html, body {
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-family: var(--font-sans);
font-size: var(--font-text-md-size, 1rem); font-size: var(--font-text-md-size);
font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal);
line-height: var(--font-text-md-line-height, 1.5); line-height: var(--font-text-md-line-height);
color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6)); color: var(--color-text-primary);
} }
h1 { h1 {
font-size: var(--font-heading-3xl-size, 2.25rem); font-size: var(--font-heading-3xl-size);
line-height: var(--font-heading-3xl-line-height, 1.1); line-height: var(--font-heading-3xl-line-height);
} }
h2 { h2 {
font-size: var(--font-heading-2xl-size, 1.875rem); font-size: var(--font-heading-2xl-size);
line-height: var(--font-heading-2xl-line-height, 1.2); line-height: var(--font-heading-2xl-line-height);
} }
h3 { h3 {
font-size: var(--font-heading-xl-size, 1.5rem); font-size: var(--font-heading-xl-size);
line-height: var(--font-heading-xl-line-height, 1.25); line-height: var(--font-heading-xl-line-height);
} }
h4 { h4 {
font-size: var(--font-heading-lg-size, 1.25rem); font-size: var(--font-heading-lg-size);
line-height: var(--font-heading-lg-line-height, 1.3); line-height: var(--font-heading-lg-line-height);
} }
h5 { h5 {
font-size: var(--font-heading-md-size, 1rem); font-size: var(--font-heading-md-size);
line-height: var(--font-heading-md-line-height, 1.4); line-height: var(--font-heading-md-line-height);
} }
h6 { h6 {
font-size: var(--font-heading-sm-size, 0.875rem); font-size: var(--font-heading-sm-size);
line-height: var(--font-heading-sm-line-height, 1.4); line-height: var(--font-heading-sm-line-height);
} }
code, pre, kbd { code, pre, kbd {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-family: var(--font-mono);
font-size: 1em; font-size: 1em;
} }
b, strong { b, strong {
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold);
} }

35
examples/basic-server-preact/src/mcp-app.module.css
View file

@ -1,8 +1,4 @@
.main { .main {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-notice-bg: #eff6ff;
width: 100%; width: 100%;
max-width: 425px; max-width: 425px;
box-sizing: border-box; box-sizing: border-box;
@ -13,7 +9,7 @@
} }
> * + * { > * + * {
margin-top: 1.5rem; margin-top: var(--spacing-lg);
} }
} }
@ -25,45 +21,50 @@
} }
> * + * { > * + * {
margin-top: 0.5rem; margin-top: var(--spacing-sm);
} }
/* Server time row: flex layout for consistent mask width in E2E tests */ /* Server time row: flex layout for consistent mask width in E2E tests */
> p { > p {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 0.25em; gap: var(--spacing-xs);
} }
/* Consistent font for form inputs (inherits from global.css) */ /* Consistent font for form inputs (inherits from global.css) */
textarea, textarea,
input { input {
display: block;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
button { button {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-md);
border: none; border: none;
border-radius: 6px; border-radius: var(--border-radius-md);
color: white; color: var(--color-text-on-accent);
font-weight: bold; font-weight: var(--font-weight-bold);
background-color: var(--color-primary); background-color: var(--color-accent);
cursor: pointer; cursor: pointer;
&:hover, &:hover {
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
}
&:focus-visible { &:focus-visible {
background-color: var(--color-primary-hover); outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
outline-offset: var(--border-width-regular);
} }
} }
} }
.notice { .notice {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-primary); color: var(--color-text-info);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
background-color: var(--color-notice-bg); background-color: var(--color-background-info);
&::before { &::before {
content: "ℹ️ "; content: "ℹ️ ";

81
examples/basic-server-react/src/global.css
View file

@ -1,5 +1,48 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
/*
* Fallbacks for host style variables used by this app.
* The host may provide these (and many more) via the host context.
*/
--color-text-primary: light-dark(#1f2937, #f3f4f6);
--color-text-inverse: light-dark(#f3f4f6, #1f2937);
--color-text-info: light-dark(#1d4ed8, #60a5fa);
--color-background-primary: light-dark(#ffffff, #1a1a1a);
--color-background-inverse: light-dark(#1a1a1a, #ffffff);
--color-background-info: light-dark(#eff6ff, #1e3a5f);
--color-ring-primary: light-dark(#3b82f6, #60a5fa);
--border-radius-md: 6px;
--border-width-regular: 1px;
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-weight-normal: 400;
--font-weight-bold: 700;
--font-text-md-size: 1rem;
--font-text-md-line-height: 1.5;
--font-heading-3xl-size: 2.25rem;
--font-heading-3xl-line-height: 1.1;
--font-heading-2xl-size: 1.875rem;
--font-heading-2xl-line-height: 1.2;
--font-heading-xl-size: 1.5rem;
--font-heading-xl-line-height: 1.25;
--font-heading-lg-size: 1.25rem;
--font-heading-lg-line-height: 1.3;
--font-heading-md-size: 1rem;
--font-heading-md-line-height: 1.4;
--font-heading-sm-size: 0.875rem;
--font-heading-sm-line-height: 1.4;
/* Spacing derived from host typography */
--spacing-unit: var(--font-text-md-size);
--spacing-xs: calc(var(--spacing-unit) * 0.25);
--spacing-sm: calc(var(--spacing-unit) * 0.5);
--spacing-md: var(--spacing-unit);
--spacing-lg: calc(var(--spacing-unit) * 1.5);
/* App accent color (customize for your brand) */
--color-accent: #2563eb;
--color-text-on-accent: #ffffff;
} }
* { * {
@ -7,43 +50,43 @@
} }
html, body { html, body {
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-family: var(--font-sans);
font-size: var(--font-text-md-size, 1rem); font-size: var(--font-text-md-size);
font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal);
line-height: var(--font-text-md-line-height, 1.5); line-height: var(--font-text-md-line-height);
color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6)); color: var(--color-text-primary);
} }
h1 { h1 {
font-size: var(--font-heading-3xl-size, 2.25rem); font-size: var(--font-heading-3xl-size);
line-height: var(--font-heading-3xl-line-height, 1.1); line-height: var(--font-heading-3xl-line-height);
} }
h2 { h2 {
font-size: var(--font-heading-2xl-size, 1.875rem); font-size: var(--font-heading-2xl-size);
line-height: var(--font-heading-2xl-line-height, 1.2); line-height: var(--font-heading-2xl-line-height);
} }
h3 { h3 {
font-size: var(--font-heading-xl-size, 1.5rem); font-size: var(--font-heading-xl-size);
line-height: var(--font-heading-xl-line-height, 1.25); line-height: var(--font-heading-xl-line-height);
} }
h4 { h4 {
font-size: var(--font-heading-lg-size, 1.25rem); font-size: var(--font-heading-lg-size);
line-height: var(--font-heading-lg-line-height, 1.3); line-height: var(--font-heading-lg-line-height);
} }
h5 { h5 {
font-size: var(--font-heading-md-size, 1rem); font-size: var(--font-heading-md-size);
line-height: var(--font-heading-md-line-height, 1.4); line-height: var(--font-heading-md-line-height);
} }
h6 { h6 {
font-size: var(--font-heading-sm-size, 0.875rem); font-size: var(--font-heading-sm-size);
line-height: var(--font-heading-sm-line-height, 1.4); line-height: var(--font-heading-sm-line-height);
} }
code, pre, kbd { code, pre, kbd {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-family: var(--font-mono);
font-size: 1em; font-size: 1em;
} }
b, strong { b, strong {
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold);
} }

35
examples/basic-server-react/src/mcp-app.module.css
View file

@ -1,8 +1,4 @@
.main { .main {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-notice-bg: #eff6ff;
width: 100%; width: 100%;
max-width: 425px; max-width: 425px;
box-sizing: border-box; box-sizing: border-box;
@ -13,7 +9,7 @@
} }
> * + * { > * + * {
margin-top: 1.5rem; margin-top: var(--spacing-lg);
} }
} }
@ -25,45 +21,50 @@
} }
> * + * { > * + * {
margin-top: 0.5rem; margin-top: var(--spacing-sm);
} }
/* Server time row: flex layout for consistent mask width in E2E tests */ /* Server time row: flex layout for consistent mask width in E2E tests */
> p { > p {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 0.25em; gap: var(--spacing-xs);
} }
/* Consistent font for form inputs (inherits from global.css) */ /* Consistent font for form inputs (inherits from global.css) */
textarea, textarea,
input { input {
display: block;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
button { button {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-md);
border: none; border: none;
border-radius: 6px; border-radius: var(--border-radius-md);
color: white; color: var(--color-text-on-accent);
font-weight: bold; font-weight: var(--font-weight-bold);
background-color: var(--color-primary); background-color: var(--color-accent);
cursor: pointer; cursor: pointer;
&:hover, &:hover {
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
}
&:focus-visible { &:focus-visible {
background-color: var(--color-primary-hover); outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
outline-offset: var(--border-width-regular);
} }
} }
} }
.notice { .notice {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-primary); color: var(--color-text-info);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
background-color: var(--color-notice-bg); background-color: var(--color-background-info);
&::before { &::before {
content: "ℹ️ "; content: "ℹ️ ";

81
examples/basic-server-solid/src/global.css
View file

@ -1,5 +1,48 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
/*
* Fallbacks for host style variables used by this app.
* The host may provide these (and many more) via the host context.
*/
--color-text-primary: light-dark(#1f2937, #f3f4f6);
--color-text-inverse: light-dark(#f3f4f6, #1f2937);
--color-text-info: light-dark(#1d4ed8, #60a5fa);
--color-background-primary: light-dark(#ffffff, #1a1a1a);
--color-background-inverse: light-dark(#1a1a1a, #ffffff);
--color-background-info: light-dark(#eff6ff, #1e3a5f);
--color-ring-primary: light-dark(#3b82f6, #60a5fa);
--border-radius-md: 6px;
--border-width-regular: 1px;
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-weight-normal: 400;
--font-weight-bold: 700;
--font-text-md-size: 1rem;
--font-text-md-line-height: 1.5;
--font-heading-3xl-size: 2.25rem;
--font-heading-3xl-line-height: 1.1;
--font-heading-2xl-size: 1.875rem;
--font-heading-2xl-line-height: 1.2;
--font-heading-xl-size: 1.5rem;
--font-heading-xl-line-height: 1.25;
--font-heading-lg-size: 1.25rem;
--font-heading-lg-line-height: 1.3;
--font-heading-md-size: 1rem;
--font-heading-md-line-height: 1.4;
--font-heading-sm-size: 0.875rem;
--font-heading-sm-line-height: 1.4;
/* Spacing derived from host typography */
--spacing-unit: var(--font-text-md-size);
--spacing-xs: calc(var(--spacing-unit) * 0.25);
--spacing-sm: calc(var(--spacing-unit) * 0.5);
--spacing-md: var(--spacing-unit);
--spacing-lg: calc(var(--spacing-unit) * 1.5);
/* App accent color (customize for your brand) */
--color-accent: #2563eb;
--color-text-on-accent: #ffffff;
} }
* { * {
@ -7,43 +50,43 @@
} }
html, body { html, body {
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-family: var(--font-sans);
font-size: var(--font-text-md-size, 1rem); font-size: var(--font-text-md-size);
font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal);
line-height: var(--font-text-md-line-height, 1.5); line-height: var(--font-text-md-line-height);
color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6)); color: var(--color-text-primary);
} }
h1 { h1 {
font-size: var(--font-heading-3xl-size, 2.25rem); font-size: var(--font-heading-3xl-size);
line-height: var(--font-heading-3xl-line-height, 1.1); line-height: var(--font-heading-3xl-line-height);
} }
h2 { h2 {
font-size: var(--font-heading-2xl-size, 1.875rem); font-size: var(--font-heading-2xl-size);
line-height: var(--font-heading-2xl-line-height, 1.2); line-height: var(--font-heading-2xl-line-height);
} }
h3 { h3 {
font-size: var(--font-heading-xl-size, 1.5rem); font-size: var(--font-heading-xl-size);
line-height: var(--font-heading-xl-line-height, 1.25); line-height: var(--font-heading-xl-line-height);
} }
h4 { h4 {
font-size: var(--font-heading-lg-size, 1.25rem); font-size: var(--font-heading-lg-size);
line-height: var(--font-heading-lg-line-height, 1.3); line-height: var(--font-heading-lg-line-height);
} }
h5 { h5 {
font-size: var(--font-heading-md-size, 1rem); font-size: var(--font-heading-md-size);
line-height: var(--font-heading-md-line-height, 1.4); line-height: var(--font-heading-md-line-height);
} }
h6 { h6 {
font-size: var(--font-heading-sm-size, 0.875rem); font-size: var(--font-heading-sm-size);
line-height: var(--font-heading-sm-line-height, 1.4); line-height: var(--font-heading-sm-line-height);
} }
code, pre, kbd { code, pre, kbd {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-family: var(--font-mono);
font-size: 1em; font-size: 1em;
} }
b, strong { b, strong {
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold);
} }

35
examples/basic-server-solid/src/mcp-app.module.css
View file

@ -1,8 +1,4 @@
.main { .main {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-notice-bg: #eff6ff;
width: 100%; width: 100%;
max-width: 425px; max-width: 425px;
box-sizing: border-box; box-sizing: border-box;
@ -13,7 +9,7 @@
} }
> * + * { > * + * {
margin-top: 1.5rem; margin-top: var(--spacing-lg);
} }
} }
@ -25,45 +21,50 @@
} }
> * + * { > * + * {
margin-top: 0.5rem; margin-top: var(--spacing-sm);
} }
/* Server time row: flex layout for consistent mask width in E2E tests */ /* Server time row: flex layout for consistent mask width in E2E tests */
> p { > p {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 0.25em; gap: var(--spacing-xs);
} }
/* Consistent font for form inputs (inherits from global.css) */ /* Consistent font for form inputs (inherits from global.css) */
textarea, textarea,
input { input {
display: block;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
button { button {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-md);
border: none; border: none;
border-radius: 6px; border-radius: var(--border-radius-md);
color: white; color: var(--color-text-on-accent);
font-weight: bold; font-weight: var(--font-weight-bold);
background-color: var(--color-primary); background-color: var(--color-accent);
cursor: pointer; cursor: pointer;
&:hover, &:hover {
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
}
&:focus-visible { &:focus-visible {
background-color: var(--color-primary-hover); outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
outline-offset: var(--border-width-regular);
} }
} }
} }
.notice { .notice {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-primary); color: var(--color-text-info);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
background-color: var(--color-notice-bg); background-color: var(--color-background-info);
&::before { &::before {
content: "ℹ️ "; content: "ℹ️ ";

35
examples/basic-server-svelte/src/App.svelte
View file

@ -133,10 +133,6 @@ async function handleOpenLink() {
<style> <style>
.main { .main {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-notice-bg: #eff6ff;
width: 100%; width: 100%;
max-width: 425px; max-width: 425px;
box-sizing: border-box; box-sizing: border-box;
@ -147,7 +143,7 @@ async function handleOpenLink() {
} }
> * + * { > * + * {
margin-top: 1.5rem; margin-top: var(--spacing-lg);
} }
} }
@ -159,44 +155,49 @@ async function handleOpenLink() {
} }
> * + * { > * + * {
margin-top: 0.5rem; margin-top: var(--spacing-sm);
} }
/* Server time row: flex layout for consistent mask width in E2E tests */ /* Server time row: flex layout for consistent mask width in E2E tests */
> p { > p {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 0.25em; gap: var(--spacing-xs);
} }
textarea, textarea,
input { input {
display: block;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
button { button {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-md);
border: none; border: none;
border-radius: 6px; border-radius: var(--border-radius-md);
color: white; color: var(--color-text-on-accent);
font-weight: bold; font-weight: var(--font-weight-bold);
background-color: var(--color-primary); background-color: var(--color-accent);
cursor: pointer; cursor: pointer;
&:hover, &:hover {
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
}
&:focus-visible { &:focus-visible {
background-color: var(--color-primary-hover); outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
outline-offset: var(--border-width-regular);
} }
} }
} }
.notice { .notice {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-primary); color: var(--color-text-info);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
background-color: var(--color-notice-bg); background-color: var(--color-background-info);
&::before { &::before {
content: "ℹ️ "; content: "ℹ️ ";

81
examples/basic-server-svelte/src/global.css
View file

@ -1,5 +1,48 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
/*
* Fallbacks for host style variables used by this app.
* The host may provide these (and many more) via the host context.
*/
--color-text-primary: light-dark(#1f2937, #f3f4f6);
--color-text-inverse: light-dark(#f3f4f6, #1f2937);
--color-text-info: light-dark(#1d4ed8, #60a5fa);
--color-background-primary: light-dark(#ffffff, #1a1a1a);
--color-background-inverse: light-dark(#1a1a1a, #ffffff);
--color-background-info: light-dark(#eff6ff, #1e3a5f);
--color-ring-primary: light-dark(#3b82f6, #60a5fa);
--border-radius-md: 6px;
--border-width-regular: 1px;
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-weight-normal: 400;
--font-weight-bold: 700;
--font-text-md-size: 1rem;
--font-text-md-line-height: 1.5;
--font-heading-3xl-size: 2.25rem;
--font-heading-3xl-line-height: 1.1;
--font-heading-2xl-size: 1.875rem;
--font-heading-2xl-line-height: 1.2;
--font-heading-xl-size: 1.5rem;
--font-heading-xl-line-height: 1.25;
--font-heading-lg-size: 1.25rem;
--font-heading-lg-line-height: 1.3;
--font-heading-md-size: 1rem;
--font-heading-md-line-height: 1.4;
--font-heading-sm-size: 0.875rem;
--font-heading-sm-line-height: 1.4;
/* Spacing derived from host typography */
--spacing-unit: var(--font-text-md-size);
--spacing-xs: calc(var(--spacing-unit) * 0.25);
--spacing-sm: calc(var(--spacing-unit) * 0.5);
--spacing-md: var(--spacing-unit);
--spacing-lg: calc(var(--spacing-unit) * 1.5);
/* App accent color (customize for your brand) */
--color-accent: #2563eb;
--color-text-on-accent: #ffffff;
} }
* { * {
@ -7,43 +50,43 @@
} }
html, body { html, body {
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-family: var(--font-sans);
font-size: var(--font-text-md-size, 1rem); font-size: var(--font-text-md-size);
font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal);
line-height: var(--font-text-md-line-height, 1.5); line-height: var(--font-text-md-line-height);
color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6)); color: var(--color-text-primary);
} }
h1 { h1 {
font-size: var(--font-heading-3xl-size, 2.25rem); font-size: var(--font-heading-3xl-size);
line-height: var(--font-heading-3xl-line-height, 1.1); line-height: var(--font-heading-3xl-line-height);
} }
h2 { h2 {
font-size: var(--font-heading-2xl-size, 1.875rem); font-size: var(--font-heading-2xl-size);
line-height: var(--font-heading-2xl-line-height, 1.2); line-height: var(--font-heading-2xl-line-height);
} }
h3 { h3 {
font-size: var(--font-heading-xl-size, 1.5rem); font-size: var(--font-heading-xl-size);
line-height: var(--font-heading-xl-line-height, 1.25); line-height: var(--font-heading-xl-line-height);
} }
h4 { h4 {
font-size: var(--font-heading-lg-size, 1.25rem); font-size: var(--font-heading-lg-size);
line-height: var(--font-heading-lg-line-height, 1.3); line-height: var(--font-heading-lg-line-height);
} }
h5 { h5 {
font-size: var(--font-heading-md-size, 1rem); font-size: var(--font-heading-md-size);
line-height: var(--font-heading-md-line-height, 1.4); line-height: var(--font-heading-md-line-height);
} }
h6 { h6 {
font-size: var(--font-heading-sm-size, 0.875rem); font-size: var(--font-heading-sm-size);
line-height: var(--font-heading-sm-line-height, 1.4); line-height: var(--font-heading-sm-line-height);
} }
code, pre, kbd { code, pre, kbd {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-family: var(--font-mono);
font-size: 1em; font-size: 1em;
} }
b, strong { b, strong {
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold);
} }

81
examples/basic-server-vanillajs/src/global.css
View file

@ -1,5 +1,48 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
/*
* Fallbacks for host style variables used by this app.
* The host may provide these (and many more) via the host context.
*/
--color-text-primary: light-dark(#1f2937, #f3f4f6);
--color-text-inverse: light-dark(#f3f4f6, #1f2937);
--color-text-info: light-dark(#1d4ed8, #60a5fa);
--color-background-primary: light-dark(#ffffff, #1a1a1a);
--color-background-inverse: light-dark(#1a1a1a, #ffffff);
--color-background-info: light-dark(#eff6ff, #1e3a5f);
--color-ring-primary: light-dark(#3b82f6, #60a5fa);
--border-radius-md: 6px;
--border-width-regular: 1px;
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-weight-normal: 400;
--font-weight-bold: 700;
--font-text-md-size: 1rem;
--font-text-md-line-height: 1.5;
--font-heading-3xl-size: 2.25rem;
--font-heading-3xl-line-height: 1.1;
--font-heading-2xl-size: 1.875rem;
--font-heading-2xl-line-height: 1.2;
--font-heading-xl-size: 1.5rem;
--font-heading-xl-line-height: 1.25;
--font-heading-lg-size: 1.25rem;
--font-heading-lg-line-height: 1.3;
--font-heading-md-size: 1rem;
--font-heading-md-line-height: 1.4;
--font-heading-sm-size: 0.875rem;
--font-heading-sm-line-height: 1.4;
/* Spacing derived from host typography */
--spacing-unit: var(--font-text-md-size);
--spacing-xs: calc(var(--spacing-unit) * 0.25);
--spacing-sm: calc(var(--spacing-unit) * 0.5);
--spacing-md: var(--spacing-unit);
--spacing-lg: calc(var(--spacing-unit) * 1.5);
/* App accent color (customize for your brand) */
--color-accent: #2563eb;
--color-text-on-accent: #ffffff;
} }
* { * {
@ -7,43 +50,43 @@
} }
html, body { html, body {
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-family: var(--font-sans);
font-size: var(--font-text-md-size, 1rem); font-size: var(--font-text-md-size);
font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal);
line-height: var(--font-text-md-line-height, 1.5); line-height: var(--font-text-md-line-height);
color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6)); color: var(--color-text-primary);
} }
h1 { h1 {
font-size: var(--font-heading-3xl-size, 2.25rem); font-size: var(--font-heading-3xl-size);
line-height: var(--font-heading-3xl-line-height, 1.1); line-height: var(--font-heading-3xl-line-height);
} }
h2 { h2 {
font-size: var(--font-heading-2xl-size, 1.875rem); font-size: var(--font-heading-2xl-size);
line-height: var(--font-heading-2xl-line-height, 1.2); line-height: var(--font-heading-2xl-line-height);
} }
h3 { h3 {
font-size: var(--font-heading-xl-size, 1.5rem); font-size: var(--font-heading-xl-size);
line-height: var(--font-heading-xl-line-height, 1.25); line-height: var(--font-heading-xl-line-height);
} }
h4 { h4 {
font-size: var(--font-heading-lg-size, 1.25rem); font-size: var(--font-heading-lg-size);
line-height: var(--font-heading-lg-line-height, 1.3); line-height: var(--font-heading-lg-line-height);
} }
h5 { h5 {
font-size: var(--font-heading-md-size, 1rem); font-size: var(--font-heading-md-size);
line-height: var(--font-heading-md-line-height, 1.4); line-height: var(--font-heading-md-line-height);
} }
h6 { h6 {
font-size: var(--font-heading-sm-size, 0.875rem); font-size: var(--font-heading-sm-size);
line-height: var(--font-heading-sm-line-height, 1.4); line-height: var(--font-heading-sm-line-height);
} }
code, pre, kbd { code, pre, kbd {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-family: var(--font-mono);
font-size: 1em; font-size: 1em;
} }
b, strong { b, strong {
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold);
} }

35
examples/basic-server-vanillajs/src/mcp-app.css
View file

@ -1,8 +1,4 @@
.main { .main {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-notice-bg: #eff6ff;
width: 100%; width: 100%;
max-width: 425px; max-width: 425px;
box-sizing: border-box; box-sizing: border-box;
@ -13,7 +9,7 @@
} }
> * + * { > * + * {
margin-top: 1.5rem; margin-top: var(--spacing-lg);
} }
} }
@ -25,45 +21,50 @@
} }
> * + * { > * + * {
margin-top: 0.5rem; margin-top: var(--spacing-sm);
} }
/* Server time row: flex layout for consistent mask width in E2E tests */ /* Server time row: flex layout for consistent mask width in E2E tests */
> p { > p {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 0.25em; gap: var(--spacing-xs);
} }
/* Consistent font for form inputs (inherits from global.css) */ /* Consistent font for form inputs (inherits from global.css) */
textarea, textarea,
input { input {
display: block;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
button { button {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-md);
border: none; border: none;
border-radius: 6px; border-radius: var(--border-radius-md);
color: white; color: var(--color-text-on-accent);
font-weight: bold; font-weight: var(--font-weight-bold);
background-color: var(--color-primary); background-color: var(--color-accent);
cursor: pointer; cursor: pointer;
&:hover, &:hover {
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
}
&:focus-visible { &:focus-visible {
background-color: var(--color-primary-hover); outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
outline-offset: var(--border-width-regular);
} }
} }
} }
.notice { .notice {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-primary); color: var(--color-text-info);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
background-color: var(--color-notice-bg); background-color: var(--color-background-info);
&::before { &::before {
content: "ℹ️ "; content: "ℹ️ ";

35
examples/basic-server-vue/src/App.vue
View file

@ -141,10 +141,6 @@ async function handleOpenLink() {
<style scoped> <style scoped>
.main { .main {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-notice-bg: #eff6ff;
width: 100%; width: 100%;
max-width: 425px; max-width: 425px;
box-sizing: border-box; box-sizing: border-box;
@ -155,7 +151,7 @@ async function handleOpenLink() {
} }
> * + * { > * + * {
margin-top: 1.5rem; margin-top: var(--spacing-lg);
} }
} }
@ -167,44 +163,49 @@ async function handleOpenLink() {
} }
> * + * { > * + * {
margin-top: 0.5rem; margin-top: var(--spacing-sm);
} }
/* Server time row: flex layout for consistent mask width in E2E tests */ /* Server time row: flex layout for consistent mask width in E2E tests */
> p { > p {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 0.25em; gap: var(--spacing-xs);
} }
textarea, textarea,
input { input {
display: block;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
button { button {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-md);
border: none; border: none;
border-radius: 6px; border-radius: var(--border-radius-md);
color: white; color: var(--color-text-on-accent);
font-weight: bold; font-weight: var(--font-weight-bold);
background-color: var(--color-primary); background-color: var(--color-accent);
cursor: pointer; cursor: pointer;
&:hover, &:hover {
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
}
&:focus-visible { &:focus-visible {
background-color: var(--color-primary-hover); outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
outline-offset: var(--border-width-regular);
} }
} }
} }
.notice { .notice {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-primary); color: var(--color-text-info);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
background-color: var(--color-notice-bg); background-color: var(--color-background-info);
&::before { &::before {
content: "ℹ️ "; content: "ℹ️ ";

81
examples/basic-server-vue/src/global.css
View file

@ -1,5 +1,48 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
/*
* Fallbacks for host style variables used by this app.
* The host may provide these (and many more) via the host context.
*/
--color-text-primary: light-dark(#1f2937, #f3f4f6);
--color-text-inverse: light-dark(#f3f4f6, #1f2937);
--color-text-info: light-dark(#1d4ed8, #60a5fa);
--color-background-primary: light-dark(#ffffff, #1a1a1a);
--color-background-inverse: light-dark(#1a1a1a, #ffffff);
--color-background-info: light-dark(#eff6ff, #1e3a5f);
--color-ring-primary: light-dark(#3b82f6, #60a5fa);
--border-radius-md: 6px;
--border-width-regular: 1px;
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-weight-normal: 400;
--font-weight-bold: 700;
--font-text-md-size: 1rem;
--font-text-md-line-height: 1.5;
--font-heading-3xl-size: 2.25rem;
--font-heading-3xl-line-height: 1.1;
--font-heading-2xl-size: 1.875rem;
--font-heading-2xl-line-height: 1.2;
--font-heading-xl-size: 1.5rem;
--font-heading-xl-line-height: 1.25;
--font-heading-lg-size: 1.25rem;
--font-heading-lg-line-height: 1.3;
--font-heading-md-size: 1rem;
--font-heading-md-line-height: 1.4;
--font-heading-sm-size: 0.875rem;
--font-heading-sm-line-height: 1.4;
/* Spacing derived from host typography */
--spacing-unit: var(--font-text-md-size);
--spacing-xs: calc(var(--spacing-unit) * 0.25);
--spacing-sm: calc(var(--spacing-unit) * 0.5);
--spacing-md: var(--spacing-unit);
--spacing-lg: calc(var(--spacing-unit) * 1.5);
/* App accent color (customize for your brand) */
--color-accent: #2563eb;
--color-text-on-accent: #ffffff;
} }
* { * {
@ -7,43 +50,43 @@
} }
html, body { html, body {
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-family: var(--font-sans);
font-size: var(--font-text-md-size, 1rem); font-size: var(--font-text-md-size);
font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal);
line-height: var(--font-text-md-line-height, 1.5); line-height: var(--font-text-md-line-height);
color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6)); color: var(--color-text-primary);
} }
h1 { h1 {
font-size: var(--font-heading-3xl-size, 2.25rem); font-size: var(--font-heading-3xl-size);
line-height: var(--font-heading-3xl-line-height, 1.1); line-height: var(--font-heading-3xl-line-height);
} }
h2 { h2 {
font-size: var(--font-heading-2xl-size, 1.875rem); font-size: var(--font-heading-2xl-size);
line-height: var(--font-heading-2xl-line-height, 1.2); line-height: var(--font-heading-2xl-line-height);
} }
h3 { h3 {
font-size: var(--font-heading-xl-size, 1.5rem); font-size: var(--font-heading-xl-size);
line-height: var(--font-heading-xl-line-height, 1.25); line-height: var(--font-heading-xl-line-height);
} }
h4 { h4 {
font-size: var(--font-heading-lg-size, 1.25rem); font-size: var(--font-heading-lg-size);
line-height: var(--font-heading-lg-line-height, 1.3); line-height: var(--font-heading-lg-line-height);
} }
h5 { h5 {
font-size: var(--font-heading-md-size, 1rem); font-size: var(--font-heading-md-size);
line-height: var(--font-heading-md-line-height, 1.4); line-height: var(--font-heading-md-line-height);
} }
h6 { h6 {
font-size: var(--font-heading-sm-size, 0.875rem); font-size: var(--font-heading-sm-size);
line-height: var(--font-heading-sm-line-height, 1.4); line-height: var(--font-heading-sm-line-height);
} }
code, pre, kbd { code, pre, kbd {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-family: var(--font-mono);
font-size: 1em; font-size: 1em;
} }
b, strong { b, strong {
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold);
} }

81
examples/integration-server/src/global.css
View file

@ -1,5 +1,48 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
/*
* Fallbacks for host style variables used by this app.
* The host may provide these (and many more) via the host context.
*/
--color-text-primary: light-dark(#1f2937, #f3f4f6);
--color-text-inverse: light-dark(#f3f4f6, #1f2937);
--color-text-info: light-dark(#1d4ed8, #60a5fa);
--color-background-primary: light-dark(#ffffff, #1a1a1a);
--color-background-inverse: light-dark(#1a1a1a, #ffffff);
--color-background-info: light-dark(#eff6ff, #1e3a5f);
--color-ring-primary: light-dark(#3b82f6, #60a5fa);
--border-radius-md: 6px;
--border-width-regular: 1px;
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-weight-normal: 400;
--font-weight-bold: 700;
--font-text-md-size: 1rem;
--font-text-md-line-height: 1.5;
--font-heading-3xl-size: 2.25rem;
--font-heading-3xl-line-height: 1.1;
--font-heading-2xl-size: 1.875rem;
--font-heading-2xl-line-height: 1.2;
--font-heading-xl-size: 1.5rem;
--font-heading-xl-line-height: 1.25;
--font-heading-lg-size: 1.25rem;
--font-heading-lg-line-height: 1.3;
--font-heading-md-size: 1rem;
--font-heading-md-line-height: 1.4;
--font-heading-sm-size: 0.875rem;
--font-heading-sm-line-height: 1.4;
/* Spacing derived from host typography */
--spacing-unit: var(--font-text-md-size);
--spacing-xs: calc(var(--spacing-unit) * 0.25);
--spacing-sm: calc(var(--spacing-unit) * 0.5);
--spacing-md: var(--spacing-unit);
--spacing-lg: calc(var(--spacing-unit) * 1.5);
/* App accent color (customize for your brand) */
--color-accent: #2563eb;
--color-text-on-accent: #ffffff;
} }
* { * {
@ -7,43 +50,43 @@
} }
html, body { html, body {
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'); font-family: var(--font-sans);
font-size: var(--font-text-md-size, 1rem); font-size: var(--font-text-md-size);
font-weight: var(--font-weight-normal, 400); font-weight: var(--font-weight-normal);
line-height: var(--font-text-md-line-height, 1.5); line-height: var(--font-text-md-line-height);
color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6)); color: var(--color-text-primary);
} }
h1 { h1 {
font-size: var(--font-heading-3xl-size, 2.25rem); font-size: var(--font-heading-3xl-size);
line-height: var(--font-heading-3xl-line-height, 1.1); line-height: var(--font-heading-3xl-line-height);
} }
h2 { h2 {
font-size: var(--font-heading-2xl-size, 1.875rem); font-size: var(--font-heading-2xl-size);
line-height: var(--font-heading-2xl-line-height, 1.2); line-height: var(--font-heading-2xl-line-height);
} }
h3 { h3 {
font-size: var(--font-heading-xl-size, 1.5rem); font-size: var(--font-heading-xl-size);
line-height: var(--font-heading-xl-line-height, 1.25); line-height: var(--font-heading-xl-line-height);
} }
h4 { h4 {
font-size: var(--font-heading-lg-size, 1.25rem); font-size: var(--font-heading-lg-size);
line-height: var(--font-heading-lg-line-height, 1.3); line-height: var(--font-heading-lg-line-height);
} }
h5 { h5 {
font-size: var(--font-heading-md-size, 1rem); font-size: var(--font-heading-md-size);
line-height: var(--font-heading-md-line-height, 1.4); line-height: var(--font-heading-md-line-height);
} }
h6 { h6 {
font-size: var(--font-heading-sm-size, 0.875rem); font-size: var(--font-heading-sm-size);
line-height: var(--font-heading-sm-line-height, 1.4); line-height: var(--font-heading-sm-line-height);
} }
code, pre, kbd { code, pre, kbd {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-family: var(--font-mono);
font-size: 1em; font-size: 1em;
} }
b, strong { b, strong {
font-weight: var(--font-weight-bold, 700); font-weight: var(--font-weight-bold);
} }

35
examples/integration-server/src/mcp-app.module.css
View file

@ -1,8 +1,4 @@
.main { .main {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-notice-bg: #eff6ff;
width: 100%; width: 100%;
max-width: 425px; max-width: 425px;
box-sizing: border-box; box-sizing: border-box;
@ -13,7 +9,7 @@
} }
> * + * { > * + * {
margin-top: 1.5rem; margin-top: var(--spacing-lg);
} }
} }
@ -25,45 +21,50 @@
} }
> * + * { > * + * {
margin-top: 0.5rem; margin-top: var(--spacing-sm);
} }
/* Server time row: flex layout for consistent mask width in E2E tests */ /* Server time row: flex layout for consistent mask width in E2E tests */
> p { > p {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 0.25em; gap: var(--spacing-xs);
} }
/* Consistent font for form inputs (inherits from global.css) */ /* Consistent font for form inputs (inherits from global.css) */
textarea, textarea,
input { input {
display: block;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
button { button {
padding: 0.5rem 1rem; padding: var(--spacing-sm) var(--spacing-md);
border: none; border: none;
border-radius: 6px; border-radius: var(--border-radius-md);
color: white; color: var(--color-text-on-accent);
font-weight: bold; font-weight: var(--font-weight-bold);
background-color: var(--color-primary); background-color: var(--color-accent);
cursor: pointer; cursor: pointer;
&:hover, &:hover {
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
}
&:focus-visible { &:focus-visible {
background-color: var(--color-primary-hover); outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
outline-offset: var(--border-width-regular);
} }
} }
} }
.notice { .notice {
padding: 0.5rem 0.75rem; padding: var(--spacing-sm) var(--spacing-md);
color: var(--color-primary); color: var(--color-text-info);
text-align: center; text-align: center;
font-style: italic; font-style: italic;
background-color: var(--color-notice-bg); background-color: var(--color-background-info);
&::before { &::before {
content: "ℹ️ "; content: "ℹ️ ";

BIN
tests/e2e/servers.spec.ts-snapshots/basic-preact.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Before After
Before After

BIN
tests/e2e/servers.spec.ts-snapshots/basic-react.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Before After
Before After

BIN
tests/e2e/servers.spec.ts-snapshots/basic-solid.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Before After
Before After

BIN
tests/e2e/servers.spec.ts-snapshots/basic-svelte.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Before After
Before After

BIN
tests/e2e/servers.spec.ts-snapshots/basic-vanillajs.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Before After
Before After

BIN
tests/e2e/servers.spec.ts-snapshots/basic-vue.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Before After
Before After

Some files were not shown because too many files have changed in this diff Show more