Skip to content

Commit 6905aa8

Browse files
jonathanhefnerclaude
jonathanhefner
and
claude
authored
Improve global.css as scaffolding template (#403)
Update `global.css` in all `basic-server-*` examples (and `integration-server` for consistency) to better serve as templates for AI coding agents scaffolding new MCP Apps. Changes: - Use CSS custom properties (`--font-sans`, `--color-text-primary`, etc.) with sensible fallbacks, enabling host design system integration - Add `color-scheme: light dark` and `light-dark()` fallbacks for theme support - Include comprehensive typography: h1-h6, body text, `code`/`pre`/`kbd`, `b`/`strong` - Move `#server-time` styles from global CSS to component stylesheets (classes instead of IDs for better CSS practices) Updates E2E test selectors in `DYNAMIC_MASKS` to match the new class-based selectors. Co-authored-by: Claude Opus 4.5 <[email protected]>
1 parent 90b5ac5 commit 6905aa8

File tree

26 files changed

+315
-56
lines changed

26 files changed

+315
-56
lines changed

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

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,49 @@
1+
:root {
2+
color-scheme: light dark;
3+
}
4+
15
* {
26
box-sizing: border-box;
37
}
48

59
html, body {
6-
font-family: system-ui, -apple-system, sans-serif;
7-
font-size: 1rem;
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));
15+
}
16+
17+
h1 {
18+
font-size: var(--font-heading-3xl-size, 2.25rem);
19+
line-height: var(--font-heading-3xl-line-height, 1.1);
20+
}
21+
h2 {
22+
font-size: var(--font-heading-2xl-size, 1.875rem);
23+
line-height: var(--font-heading-2xl-line-height, 1.2);
24+
}
25+
h3 {
26+
font-size: var(--font-heading-xl-size, 1.5rem);
27+
line-height: var(--font-heading-xl-line-height, 1.25);
28+
}
29+
h4 {
30+
font-size: var(--font-heading-lg-size, 1.25rem);
31+
line-height: var(--font-heading-lg-line-height, 1.3);
32+
}
33+
h5 {
34+
font-size: var(--font-heading-md-size, 1rem);
35+
line-height: var(--font-heading-md-line-height, 1.4);
36+
}
37+
h6 {
38+
font-size: var(--font-heading-sm-size, 0.875rem);
39+
line-height: var(--font-heading-sm-line-height, 1.4);
840
}
941

10-
code {
42+
code, pre, kbd {
43+
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
1144
font-size: 1em;
1245
}
1346

14-
/* Server time fills remaining width for consistent E2E screenshot masking */
15-
#server-time {
16-
flex: 1;
17-
min-width: 0;
47+
b, strong {
48+
font-weight: var(--font-weight-bold, 700);
1849
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,9 @@
7070
font-style: normal;
7171
}
7272
}
73+
74+
/* Server time fills remaining width for consistent E2E screenshot masking */
75+
.serverTime {
76+
flex: 1;
77+
min-width: 0;
78+
}

‎examples/basic-server-preact/src/mcp-app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ function GetTimeAppInner({ app, toolResult, hostContext }: GetTimeAppInnerProps)
144144

145145
<div className={styles.action}>
146146
<p>
147-
<strong>Server Time:</strong> <code id="server-time">{serverTime}</code>
147+
<strong>Server Time:</strong> <code className={styles.serverTime}>{serverTime}</code>
148148
</p>
149149
<button onClick={handleGetTime}>Get Server Time</button>
150150
</div>

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

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,49 @@
1+
:root {
2+
color-scheme: light dark;
3+
}
4+
15
* {
26
box-sizing: border-box;
37
}
48

59
html, body {
6-
font-family: system-ui, -apple-system, sans-serif;
7-
font-size: 1rem;
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));
15+
}
16+
17+
h1 {
18+
font-size: var(--font-heading-3xl-size, 2.25rem);
19+
line-height: var(--font-heading-3xl-line-height, 1.1);
20+
}
21+
h2 {
22+
font-size: var(--font-heading-2xl-size, 1.875rem);
23+
line-height: var(--font-heading-2xl-line-height, 1.2);
24+
}
25+
h3 {
26+
font-size: var(--font-heading-xl-size, 1.5rem);
27+
line-height: var(--font-heading-xl-line-height, 1.25);
28+
}
29+
h4 {
30+
font-size: var(--font-heading-lg-size, 1.25rem);
31+
line-height: var(--font-heading-lg-line-height, 1.3);
32+
}
33+
h5 {
34+
font-size: var(--font-heading-md-size, 1rem);
35+
line-height: var(--font-heading-md-line-height, 1.4);
36+
}
37+
h6 {
38+
font-size: var(--font-heading-sm-size, 0.875rem);
39+
line-height: var(--font-heading-sm-line-height, 1.4);
840
}
941

10-
code {
42+
code, pre, kbd {
43+
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
1144
font-size: 1em;
1245
}
1346

14-
/* Server time fills remaining width for consistent E2E screenshot masking */
15-
#server-time {
16-
flex: 1;
17-
min-width: 0;
47+
b, strong {
48+
font-weight: var(--font-weight-bold, 700);
1849
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,9 @@
7070
font-style: normal;
7171
}
7272
}
73+
74+
/* Server time fills remaining width for consistent E2E screenshot masking */
75+
.serverTime {
76+
flex: 1;
77+
min-width: 0;
78+
}

‎examples/basic-server-react/src/mcp-app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ function GetTimeAppInner({ app, toolResult, hostContext }: GetTimeAppInnerProps)
131131

132132
<div className={styles.action}>
133133
<p>
134-
<strong>Server Time:</strong> <code id="server-time">{serverTime}</code>
134+
<strong>Server Time:</strong> <code className={styles.serverTime}>{serverTime}</code>
135135
</p>
136136
<button onClick={handleGetTime}>Get Server Time</button>
137137
</div>

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

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,49 @@
1+
:root {
2+
color-scheme: light dark;
3+
}
4+
15
* {
26
box-sizing: border-box;
37
}
48

59
html, body {
6-
font-family: system-ui, -apple-system, sans-serif;
7-
font-size: 1rem;
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));
15+
}
16+
17+
h1 {
18+
font-size: var(--font-heading-3xl-size, 2.25rem);
19+
line-height: var(--font-heading-3xl-line-height, 1.1);
20+
}
21+
h2 {
22+
font-size: var(--font-heading-2xl-size, 1.875rem);
23+
line-height: var(--font-heading-2xl-line-height, 1.2);
24+
}
25+
h3 {
26+
font-size: var(--font-heading-xl-size, 1.5rem);
27+
line-height: var(--font-heading-xl-line-height, 1.25);
28+
}
29+
h4 {
30+
font-size: var(--font-heading-lg-size, 1.25rem);
31+
line-height: var(--font-heading-lg-line-height, 1.3);
32+
}
33+
h5 {
34+
font-size: var(--font-heading-md-size, 1rem);
35+
line-height: var(--font-heading-md-line-height, 1.4);
36+
}
37+
h6 {
38+
font-size: var(--font-heading-sm-size, 0.875rem);
39+
line-height: var(--font-heading-sm-line-height, 1.4);
840
}
941

10-
code {
42+
code, pre, kbd {
43+
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
1144
font-size: 1em;
1245
}
1346

14-
/* Server time fills remaining width for consistent E2E screenshot masking */
15-
#server-time {
16-
flex: 1;
17-
min-width: 0;
47+
b, strong {
48+
font-weight: var(--font-weight-bold, 700);
1849
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,9 @@
7070
font-style: normal;
7171
}
7272
}
73+
74+
/* Server time fills remaining width for consistent E2E screenshot masking */
75+
.serverTime {
76+
flex: 1;
77+
min-width: 0;
78+
}

‎examples/basic-server-solid/src/mcp-app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ function GetTimeAppInner(props: GetTimeAppInnerProps) {
149149

150150
<div class={styles.action}>
151151
<p>
152-
<strong>Server Time:</strong> <code id="server-time">{serverTime()}</code>
152+
<strong>Server Time:</strong> <code class={styles.serverTime}>{serverTime()}</code>
153153
</p>
154154
<button onClick={handleGetTime}>Get Server Time</button>
155155
</div>

‎examples/basic-server-svelte/src/App.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ async function handleOpenLink() {
111111
<p class="notice">Watch activity in the DevTools console!</p>
112112

113113
<div class="action">
114-
<p><strong>Server Time:</strong> <code id="server-time">{serverTime}</code></p>
114+
<p><strong>Server Time:</strong> <code class="server-time">{serverTime}</code></p>
115115
<button onclick={handleGetTime}>Get Server Time</button>
116116
</div>
117117

@@ -205,7 +205,7 @@ async function handleOpenLink() {
205205
}
206206
207207
/* Server time fills remaining width for consistent E2E screenshot masking */
208-
:global(#server-time) {
208+
.server-time {
209209
flex: 1;
210210
min-width: 0;
211211
}

0 commit comments

Comments
 (0)