Skip to content

Commit d7ff999

Browse files
jonathanhefnerjonathanhefner
authored
Merge pull request modelcontextprotocol#404 from jonathanhefner/basic-server-css-variables
Improve example CSS files to better demonstrate host style integration
2 parents d37a789 + c3d91a1 commit d7ff999

File tree

21 files changed

+560
-252
lines changed

21 files changed

+560
-252
lines changed

‎examples/basic-server-preact/src/global.css‎

Lines changed: 62 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,92 @@
11
:root {
22
color-scheme: light dark;
3+
4+
/*
5+
* Fallbacks for host style variables used by this app.
6+
* The host may provide these (and many more) via the host context.
7+
*/
8+
--color-text-primary: light-dark(#1f2937, #f3f4f6);
9+
--color-text-inverse: light-dark(#f3f4f6, #1f2937);
10+
--color-text-info: light-dark(#1d4ed8, #60a5fa);
11+
--color-background-primary: light-dark(#ffffff, #1a1a1a);
12+
--color-background-inverse: light-dark(#1a1a1a, #ffffff);
13+
--color-background-info: light-dark(#eff6ff, #1e3a5f);
14+
--color-ring-primary: light-dark(#3b82f6, #60a5fa);
15+
--border-radius-md: 6px;
16+
--border-width-regular: 1px;
17+
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
18+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
19+
--font-weight-normal: 400;
20+
--font-weight-bold: 700;
21+
--font-text-md-size: 1rem;
22+
--font-text-md-line-height: 1.5;
23+
--font-heading-3xl-size: 2.25rem;
24+
--font-heading-3xl-line-height: 1.1;
25+
--font-heading-2xl-size: 1.875rem;
26+
--font-heading-2xl-line-height: 1.2;
27+
--font-heading-xl-size: 1.5rem;
28+
--font-heading-xl-line-height: 1.25;
29+
--font-heading-lg-size: 1.25rem;
30+
--font-heading-lg-line-height: 1.3;
31+
--font-heading-md-size: 1rem;
32+
--font-heading-md-line-height: 1.4;
33+
--font-heading-sm-size: 0.875rem;
34+
--font-heading-sm-line-height: 1.4;
35+
36+
/* Spacing derived from host typography */
37+
--spacing-unit: var(--font-text-md-size);
38+
--spacing-xs: calc(var(--spacing-unit) * 0.25);
39+
--spacing-sm: calc(var(--spacing-unit) * 0.5);
40+
--spacing-md: var(--spacing-unit);
41+
--spacing-lg: calc(var(--spacing-unit) * 1.5);
42+
43+
/* App accent color (customize for your brand) */
44+
--color-accent: #2563eb;
45+
--color-text-on-accent: #ffffff;
346
}
447

548
* {
649
box-sizing: border-box;
750
}
851

952
html, body {
10-
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
11-
font-size: var(--font-text-md-size, 1rem);
12-
font-weight: var(--font-weight-normal, 400);
13-
line-height: var(--font-text-md-line-height, 1.5);
14-
color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
53+
font-family: var(--font-sans);
54+
font-size: var(--font-text-md-size);
55+
font-weight: var(--font-weight-normal);
56+
line-height: var(--font-text-md-line-height);
57+
color: var(--color-text-primary);
1558
}
1659

1760
h1 {
18-
font-size: var(--font-heading-3xl-size, 2.25rem);
19-
line-height: var(--font-heading-3xl-line-height, 1.1);
61+
font-size: var(--font-heading-3xl-size);
62+
line-height: var(--font-heading-3xl-line-height);
2063
}
2164
h2 {
22-
font-size: var(--font-heading-2xl-size, 1.875rem);
23-
line-height: var(--font-heading-2xl-line-height, 1.2);
65+
font-size: var(--font-heading-2xl-size);
66+
line-height: var(--font-heading-2xl-line-height);
2467
}
2568
h3 {
26-
font-size: var(--font-heading-xl-size, 1.5rem);
27-
line-height: var(--font-heading-xl-line-height, 1.25);
69+
font-size: var(--font-heading-xl-size);
70+
line-height: var(--font-heading-xl-line-height);
2871
}
2972
h4 {
30-
font-size: var(--font-heading-lg-size, 1.25rem);
31-
line-height: var(--font-heading-lg-line-height, 1.3);
73+
font-size: var(--font-heading-lg-size);
74+
line-height: var(--font-heading-lg-line-height);
3275
}
3376
h5 {
34-
font-size: var(--font-heading-md-size, 1rem);
35-
line-height: var(--font-heading-md-line-height, 1.4);
77+
font-size: var(--font-heading-md-size);
78+
line-height: var(--font-heading-md-line-height);
3679
}
3780
h6 {
38-
font-size: var(--font-heading-sm-size, 0.875rem);
39-
line-height: var(--font-heading-sm-line-height, 1.4);
81+
font-size: var(--font-heading-sm-size);
82+
line-height: var(--font-heading-sm-line-height);
4083
}
4184

4285
code, pre, kbd {
43-
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
86+
font-family: var(--font-mono);
4487
font-size: 1em;
4588
}
4689

4790
b, strong {
48-
font-weight: var(--font-weight-bold, 700);
91+
font-weight: var(--font-weight-bold);
4992
}

‎examples/basic-server-preact/src/mcp-app.module.css‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
.main {
2-
--color-primary: #2563eb;
3-
--color-primary-hover: #1d4ed8;
4-
--color-notice-bg: #eff6ff;
5-
62
width: 100%;
73
max-width: 425px;
84
box-sizing: border-box;
@@ -13,7 +9,7 @@
139
}
1410

1511
> * + * {
16-
margin-top: 1.5rem;
12+
margin-top: var(--spacing-lg);
1713
}
1814
}
1915

@@ -25,45 +21,50 @@
2521
}
2622

2723
> * + * {
28-
margin-top: 0.5rem;
24+
margin-top: var(--spacing-sm);
2925
}
3026

3127
/* Server time row: flex layout for consistent mask width in E2E tests */
3228
> p {
3329
display: flex;
3430
align-items: baseline;
35-
gap: 0.25em;
31+
gap: var(--spacing-xs);
3632
}
3733

3834
/* Consistent font for form inputs (inherits from global.css) */
3935
textarea,
4036
input {
37+
display: block;
4138
font-family: inherit;
4239
font-size: inherit;
4340
}
4441

4542
button {
46-
padding: 0.5rem 1rem;
43+
padding: var(--spacing-sm) var(--spacing-md);
4744
border: none;
48-
border-radius: 6px;
49-
color: white;
50-
font-weight: bold;
51-
background-color: var(--color-primary);
45+
border-radius: var(--border-radius-md);
46+
color: var(--color-text-on-accent);
47+
font-weight: var(--font-weight-bold);
48+
background-color: var(--color-accent);
5249
cursor: pointer;
5350

54-
&:hover,
51+
&:hover {
52+
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
53+
}
54+
5555
&:focus-visible {
56-
background-color: var(--color-primary-hover);
56+
outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
57+
outline-offset: var(--border-width-regular);
5758
}
5859
}
5960
}
6061

6162
.notice {
62-
padding: 0.5rem 0.75rem;
63-
color: var(--color-primary);
63+
padding: var(--spacing-sm) var(--spacing-md);
64+
color: var(--color-text-info);
6465
text-align: center;
6566
font-style: italic;
66-
background-color: var(--color-notice-bg);
67+
background-color: var(--color-background-info);
6768

6869
&::before {
6970
content: "ℹ️ ";

‎examples/basic-server-react/src/global.css‎

Lines changed: 62 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,92 @@
11
:root {
22
color-scheme: light dark;
3+
4+
/*
5+
* Fallbacks for host style variables used by this app.
6+
* The host may provide these (and many more) via the host context.
7+
*/
8+
--color-text-primary: light-dark(#1f2937, #f3f4f6);
9+
--color-text-inverse: light-dark(#f3f4f6, #1f2937);
10+
--color-text-info: light-dark(#1d4ed8, #60a5fa);
11+
--color-background-primary: light-dark(#ffffff, #1a1a1a);
12+
--color-background-inverse: light-dark(#1a1a1a, #ffffff);
13+
--color-background-info: light-dark(#eff6ff, #1e3a5f);
14+
--color-ring-primary: light-dark(#3b82f6, #60a5fa);
15+
--border-radius-md: 6px;
16+
--border-width-regular: 1px;
17+
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
18+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
19+
--font-weight-normal: 400;
20+
--font-weight-bold: 700;
21+
--font-text-md-size: 1rem;
22+
--font-text-md-line-height: 1.5;
23+
--font-heading-3xl-size: 2.25rem;
24+
--font-heading-3xl-line-height: 1.1;
25+
--font-heading-2xl-size: 1.875rem;
26+
--font-heading-2xl-line-height: 1.2;
27+
--font-heading-xl-size: 1.5rem;
28+
--font-heading-xl-line-height: 1.25;
29+
--font-heading-lg-size: 1.25rem;
30+
--font-heading-lg-line-height: 1.3;
31+
--font-heading-md-size: 1rem;
32+
--font-heading-md-line-height: 1.4;
33+
--font-heading-sm-size: 0.875rem;
34+
--font-heading-sm-line-height: 1.4;
35+
36+
/* Spacing derived from host typography */
37+
--spacing-unit: var(--font-text-md-size);
38+
--spacing-xs: calc(var(--spacing-unit) * 0.25);
39+
--spacing-sm: calc(var(--spacing-unit) * 0.5);
40+
--spacing-md: var(--spacing-unit);
41+
--spacing-lg: calc(var(--spacing-unit) * 1.5);
42+
43+
/* App accent color (customize for your brand) */
44+
--color-accent: #2563eb;
45+
--color-text-on-accent: #ffffff;
346
}
447

548
* {
649
box-sizing: border-box;
750
}
851

952
html, body {
10-
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
11-
font-size: var(--font-text-md-size, 1rem);
12-
font-weight: var(--font-weight-normal, 400);
13-
line-height: var(--font-text-md-line-height, 1.5);
14-
color: var(--color-text-primary, light-dark(#1f2937, #f3f4f6));
53+
font-family: var(--font-sans);
54+
font-size: var(--font-text-md-size);
55+
font-weight: var(--font-weight-normal);
56+
line-height: var(--font-text-md-line-height);
57+
color: var(--color-text-primary);
1558
}
1659

1760
h1 {
18-
font-size: var(--font-heading-3xl-size, 2.25rem);
19-
line-height: var(--font-heading-3xl-line-height, 1.1);
61+
font-size: var(--font-heading-3xl-size);
62+
line-height: var(--font-heading-3xl-line-height);
2063
}
2164
h2 {
22-
font-size: var(--font-heading-2xl-size, 1.875rem);
23-
line-height: var(--font-heading-2xl-line-height, 1.2);
65+
font-size: var(--font-heading-2xl-size);
66+
line-height: var(--font-heading-2xl-line-height);
2467
}
2568
h3 {
26-
font-size: var(--font-heading-xl-size, 1.5rem);
27-
line-height: var(--font-heading-xl-line-height, 1.25);
69+
font-size: var(--font-heading-xl-size);
70+
line-height: var(--font-heading-xl-line-height);
2871
}
2972
h4 {
30-
font-size: var(--font-heading-lg-size, 1.25rem);
31-
line-height: var(--font-heading-lg-line-height, 1.3);
73+
font-size: var(--font-heading-lg-size);
74+
line-height: var(--font-heading-lg-line-height);
3275
}
3376
h5 {
34-
font-size: var(--font-heading-md-size, 1rem);
35-
line-height: var(--font-heading-md-line-height, 1.4);
77+
font-size: var(--font-heading-md-size);
78+
line-height: var(--font-heading-md-line-height);
3679
}
3780
h6 {
38-
font-size: var(--font-heading-sm-size, 0.875rem);
39-
line-height: var(--font-heading-sm-line-height, 1.4);
81+
font-size: var(--font-heading-sm-size);
82+
line-height: var(--font-heading-sm-line-height);
4083
}
4184

4285
code, pre, kbd {
43-
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
86+
font-family: var(--font-mono);
4487
font-size: 1em;
4588
}
4689

4790
b, strong {
48-
font-weight: var(--font-weight-bold, 700);
91+
font-weight: var(--font-weight-bold);
4992
}

‎examples/basic-server-react/src/mcp-app.module.css‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
.main {
2-
--color-primary: #2563eb;
3-
--color-primary-hover: #1d4ed8;
4-
--color-notice-bg: #eff6ff;
5-
62
width: 100%;
73
max-width: 425px;
84
box-sizing: border-box;
@@ -13,7 +9,7 @@
139
}
1410

1511
> * + * {
16-
margin-top: 1.5rem;
12+
margin-top: var(--spacing-lg);
1713
}
1814
}
1915

@@ -25,45 +21,50 @@
2521
}
2622

2723
> * + * {
28-
margin-top: 0.5rem;
24+
margin-top: var(--spacing-sm);
2925
}
3026

3127
/* Server time row: flex layout for consistent mask width in E2E tests */
3228
> p {
3329
display: flex;
3430
align-items: baseline;
35-
gap: 0.25em;
31+
gap: var(--spacing-xs);
3632
}
3733

3834
/* Consistent font for form inputs (inherits from global.css) */
3935
textarea,
4036
input {
37+
display: block;
4138
font-family: inherit;
4239
font-size: inherit;
4340
}
4441

4542
button {
46-
padding: 0.5rem 1rem;
43+
padding: var(--spacing-sm) var(--spacing-md);
4744
border: none;
48-
border-radius: 6px;
49-
color: white;
50-
font-weight: bold;
51-
background-color: var(--color-primary);
45+
border-radius: var(--border-radius-md);
46+
color: var(--color-text-on-accent);
47+
font-weight: var(--font-weight-bold);
48+
background-color: var(--color-accent);
5249
cursor: pointer;
5350

54-
&:hover,
51+
&:hover {
52+
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
53+
}
54+
5555
&:focus-visible {
56-
background-color: var(--color-primary-hover);
56+
outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
57+
outline-offset: var(--border-width-regular);
5758
}
5859
}
5960
}
6061

6162
.notice {
62-
padding: 0.5rem 0.75rem;
63-
color: var(--color-primary);
63+
padding: var(--spacing-sm) var(--spacing-md);
64+
color: var(--color-text-info);
6465
text-align: center;
6566
font-style: italic;
66-
background-color: var(--color-notice-bg);
67+
background-color: var(--color-background-info);
6768

6869
&::before {
6970
content: "ℹ️ ";

0 commit comments

Comments
 (0)