Skip to content

Commit f16e59e

Browse files
CopilotCopilot
authored
Bring the workshop reader closer to the new gh-aw docs style (#4181)
1 parent 3e83cb0 commit f16e59e

4 files changed

Lines changed: 111 additions & 93 deletions

File tree

‎scripts/build-docs.test.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,20 @@ test("workshop typography uses the bundled Mona Sans and fluid reading scale", (
6464
assert.match(css, /\.markdown-body h3 \{[\s\S]*?font-weight: 600;/);
6565
});
6666

67+
test("reader uses the gh-aw-inspired reading surface in both color schemes", () => {
68+
const { html, css, alertsCss } = buildDocs();
69+
70+
assert.ok(html.includes('<meta name="theme-color" content="#fcfcfb"'));
71+
assert.ok(html.includes('<meta name="theme-color" content="#0c0a09"'));
72+
assert.match(css, /--workshop-page-bg: #fcfcfb;/);
73+
assert.match(css, /--workshop-page-bg: #0c0a09;/);
74+
assert.match(css, /--workshop-link-color: #5f489a;/);
75+
assert.match(css, /--workshop-link-color: #c3b5e4;/);
76+
assert.match(css, /\.markdown-body > details \{[^}]*max-width: 760px;/);
77+
assert.match(css, /\.workshop-navigation \{[^}]*border-top: 1px solid var\(--workshop-divider\);/);
78+
assert.match(alertsCss, /\.markdown-alert \{[^}]*border: 1px solid color-mix\(/);
79+
});
80+
6781
test("workshop navigation constrains long buttons on small screens", () => {
6882
const { css } = buildDocs();
6983

‎scripts/lib/alerts.css‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
/* Alert callout styles for GitHub GFM > [!NOTE] / [!TIP] / etc. */
22
.markdown-alert {
3-
padding: 0.5rem 1rem;
3+
padding: 1.25rem;
44
margin-bottom: 16px;
5-
border-left: 0.25em solid;
6-
border-radius: 6px;
5+
border: 1px solid color-mix(in srgb, var(--workshop-alert-color) 16%, var(--workshop-page-bg));
6+
border-radius: 12px;
7+
background-color: color-mix(in srgb, var(--workshop-alert-color) 5%, var(--workshop-page-bg));
8+
color: var(--workshop-text);
79
}
810
.markdown-alert > :first-child { margin-top: 0; }
911
.markdown-alert > :last-child { margin-bottom: 0; }
@@ -17,27 +19,35 @@
1719
}
1820
.markdown-alert-title svg { margin-right: 8px; }
1921
.markdown-alert-note {
20-
border-color: var(--borderColor-accent-emphasis, #0969da);
21-
background-color: var(--bgColor-accent-muted, #ddf4ff);
22+
--workshop-alert-color: #0969da;
2223
}
23-
.markdown-alert-note .markdown-alert-title { color: var(--fgColor-accent, #0969da); }
24+
.markdown-alert-note .markdown-alert-title { color: var(--workshop-alert-color); }
2425
.markdown-alert-tip {
25-
border-color: var(--borderColor-success-emphasis, #1a7f37);
26-
background-color: var(--bgColor-success-muted, #dafbe1);
26+
--workshop-alert-color: #1a7f37;
2727
}
28-
.markdown-alert-tip .markdown-alert-title { color: var(--fgColor-success, #1a7f37); }
28+
.markdown-alert-tip .markdown-alert-title { color: var(--workshop-alert-color); }
2929
.markdown-alert-important {
30-
border-color: var(--borderColor-done-emphasis, #8250df);
31-
background-color: var(--bgColor-done-muted, #fbefff);
30+
--workshop-alert-color: #5f489a;
3231
}
33-
.markdown-alert-important .markdown-alert-title { color: var(--fgColor-done, #8250df); }
32+
.markdown-alert-important .markdown-alert-title { color: var(--workshop-alert-color); }
3433
.markdown-alert-warning {
35-
border-color: var(--borderColor-attention-emphasis, #9a6700);
36-
background-color: var(--bgColor-attention-muted, #fff8c5);
34+
--workshop-alert-color: #9a6700;
3735
}
38-
.markdown-alert-warning .markdown-alert-title { color: var(--fgColor-attention, #9a6700); }
36+
.markdown-alert-warning .markdown-alert-title { color: var(--workshop-alert-color); }
3937
.markdown-alert-caution {
40-
border-color: var(--borderColor-danger-emphasis, #d1242f);
41-
background-color: var(--bgColor-danger-muted, #ffebe9);
38+
--workshop-alert-color: #cf222e;
4239
}
43-
.markdown-alert-caution .markdown-alert-title { color: var(--fgColor-danger, #d1242f); }
40+
.markdown-alert-caution .markdown-alert-title { color: var(--workshop-alert-color); }
41+
42+
@media (prefers-color-scheme: dark) {
43+
html[data-color-mode="auto"] .markdown-alert-note { --workshop-alert-color: #75cfff; }
44+
html[data-color-mode="auto"] .markdown-alert-tip { --workshop-alert-color: #7dd54d; }
45+
html[data-color-mode="auto"] .markdown-alert-important { --workshop-alert-color: #c3b5e4; }
46+
html[data-color-mode="auto"] .markdown-alert-warning { --workshop-alert-color: #eaa734; }
47+
html[data-color-mode="auto"] .markdown-alert-caution { --workshop-alert-color: #ff554d; }
48+
}
49+
html[data-color-mode="dark"] .markdown-alert-note { --workshop-alert-color: #75cfff; }
50+
html[data-color-mode="dark"] .markdown-alert-tip { --workshop-alert-color: #7dd54d; }
51+
html[data-color-mode="dark"] .markdown-alert-important { --workshop-alert-color: #c3b5e4; }
52+
html[data-color-mode="dark"] .markdown-alert-warning { --workshop-alert-color: #eaa734; }
53+
html[data-color-mode="dark"] .markdown-alert-caution { --workshop-alert-color: #ff554d; }

‎scripts/lib/docs.css‎

Lines changed: 67 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
/* Improve link discoverability in rendered workshop docs */
22
:root {
33
--workshop-sticky-header-offset: 72px;
4-
--workshop-link-color: var(--fgColor-accent, #0969da);
5-
--workshop-link-visited-color: var(--fgColor-done, #8250df);
6-
--workshop-link-hover-color: var(--fgColor-accent, #0550ae);
4+
--workshop-page-bg: #fcfcfb;
5+
--workshop-surface: #ffffff;
6+
--workshop-surface-muted: #f5f5f4;
7+
--workshop-text: #1c1917;
8+
--workshop-text-muted: #57534e;
9+
--workshop-divider: #e7e5e4;
10+
--workshop-link-color: #5f489a;
11+
--workshop-link-visited-color: #4b397a;
12+
--workshop-link-hover-color: #4b397a;
713
--workshop-type-body: clamp(1rem, 0.955rem + 0.227vw, 1.125rem);
814
--workshop-type-title: clamp(2.25rem, 1.977rem + 1.364vw, 3rem);
915
--workshop-type-section: clamp(1.75rem, 1.477rem + 1.364vw, 2.5rem);
@@ -12,16 +18,28 @@
1218

1319
@media (prefers-color-scheme: dark) {
1420
html[data-color-mode="auto"] {
15-
--workshop-link-color: var(--fgColor-accent, #58a6ff);
16-
--workshop-link-visited-color: var(--fgColor-done, #bc8cff);
17-
--workshop-link-hover-color: var(--fgColor-accent, #79c0ff);
21+
--workshop-page-bg: #0c0a09;
22+
--workshop-surface: #231f1c;
23+
--workshop-surface-muted: #1c1917;
24+
--workshop-text: #fcfcfb;
25+
--workshop-text-muted: #d6d3d1;
26+
--workshop-divider: #44403c;
27+
--workshop-link-color: #c3b5e4;
28+
--workshop-link-visited-color: #e0d8f1;
29+
--workshop-link-hover-color: #e0d8f1;
1830
}
1931
}
2032

2133
html[data-color-mode="dark"] {
22-
--workshop-link-color: var(--fgColor-accent, #58a6ff);
23-
--workshop-link-visited-color: var(--fgColor-done, #bc8cff);
24-
--workshop-link-hover-color: var(--fgColor-accent, #79c0ff);
34+
--workshop-page-bg: #0c0a09;
35+
--workshop-surface: #231f1c;
36+
--workshop-surface-muted: #1c1917;
37+
--workshop-text: #fcfcfb;
38+
--workshop-text-muted: #d6d3d1;
39+
--workshop-divider: #44403c;
40+
--workshop-link-color: #c3b5e4;
41+
--workshop-link-visited-color: #e0d8f1;
42+
--workshop-link-hover-color: #e0d8f1;
2543
}
2644

2745
body,
@@ -30,6 +48,10 @@ body,
3048
font-optical-sizing: auto;
3149
font-variant-ligatures: none;
3250
}
51+
body {
52+
background-color: var(--workshop-page-bg);
53+
color: var(--workshop-text);
54+
}
3355

3456
html {
3557
scroll-padding-top: var(--workshop-sticky-header-offset);
@@ -45,9 +67,9 @@ html {
4567
justify-content: space-between;
4668
min-height: 56px;
4769
padding: 0 16px;
48-
color: var(--fgColor-default, #1f2328);
49-
background-color: var(--bgColor-default, #ffffff);
50-
border-bottom: 1px solid var(--borderColor-muted, #d0d7de);
70+
color: var(--workshop-text);
71+
background-color: var(--workshop-page-bg);
72+
border-bottom: 1px solid var(--workshop-divider);
5173
}
5274
.site-title {
5375
margin: 0;
@@ -198,10 +220,10 @@ html[data-color-mode="dark"] .menu-toggle-progress {
198220
max-height: none;
199221
margin: 0;
200222
padding: 0;
201-
color: var(--fgColor-default, #1f2328);
202-
background-color: var(--bgColor-default, #ffffff);
223+
color: var(--workshop-text);
224+
background-color: var(--workshop-page-bg);
203225
border: 0;
204-
border-right: 1px solid var(--borderColor-muted, #d0d7de);
226+
border-right: 1px solid var(--workshop-divider);
205227
}
206228
.workshop-menu::backdrop {
207229
background: rgba(0, 0, 0, 0.48);
@@ -267,13 +289,15 @@ html[data-color-mode="dark"] .menu-toggle-progress {
267289
background-color: var(--bgColor-muted, #f6f8fa);
268290
}
269291
.workshop-menu-group a[aria-current="page"] {
270-
color: var(--workshop-link-color);
292+
color: var(--workshop-text);
271293
font-weight: 600;
272-
background-color: var(--bgColor-accent-muted, #ddf4ff);
294+
background-color: var(--workshop-surface-muted);
273295
}
274296

275297
.markdown-body > details {
276298
scroll-margin-top: var(--workshop-sticky-header-offset);
299+
max-width: 760px;
300+
margin-inline: auto;
277301
}
278302
.markdown-body details > summary {
279303
display: inline-flex;
@@ -302,6 +326,10 @@ html[data-color-mode="dark"] .menu-toggle-progress {
302326
margin-inline: auto;
303327
padding-inline: 20px !important;
304328
}
329+
.markdown-body {
330+
color: var(--workshop-text);
331+
background-color: transparent;
332+
}
305333

306334
.markdown-body p,
307335
.markdown-body li {
@@ -316,13 +344,24 @@ html[data-color-mode="dark"] .menu-toggle-progress {
316344
font-size: var(--workshop-type-section);
317345
font-weight: 400;
318346
line-height: 1.2;
347+
border-bottom: 0;
319348
}
320349
.markdown-body h3 {
321350
max-width: 24ch;
322351
font-size: var(--workshop-type-subheading);
323352
font-weight: 600;
324353
line-height: 1.3;
325354
}
355+
356+
.markdown-body > details > .workshop-page-title {
357+
margin-bottom: 24px;
358+
}
359+
.markdown-body h2:not(.workshop-page-title) {
360+
margin-top: 48px;
361+
}
362+
.markdown-body h3 {
363+
margin-top: 32px;
364+
}
326365
.markdown-body h4,
327366
.markdown-body h5,
328367
.markdown-body h6 {
@@ -551,8 +590,8 @@ body > footer a {
551590
align-items: flex-start;
552591
gap: 16px;
553592
margin-top: 32px;
554-
padding-top: 16px;
555-
border-top: 1px solid var(--borderColor-muted, #d0d7de);
593+
padding-top: 24px;
594+
border-top: 1px solid var(--workshop-divider);
556595
}
557596
.workshop-navigation-previous {
558597
flex: 0 0 auto;
@@ -586,69 +625,24 @@ body > footer a {
586625
text-decoration: none;
587626
}
588627
.workshop-nav-btn-primary {
589-
color: #ffffff;
590-
background-color: var(--bgColor-accent-emphasis, #0969da);
628+
color: var(--workshop-link-color);
629+
background-color: transparent;
591630
border: 1px solid transparent;
592631
}
593632
.workshop-nav-btn-primary:hover,
594633
.workshop-nav-btn-primary:focus-visible {
595-
color: #ffffff;
596-
background-color: var(--bgColor-accent-emphasis, #0550ae);
597-
filter: brightness(0.9);
634+
color: var(--workshop-link-hover-color);
635+
background-color: var(--workshop-surface-muted);
598636
}
599637
.workshop-nav-btn-secondary {
600-
color: var(--fgColor-default, #1f2328);
601-
background-color: var(--bgColor-muted, #f6f8fa);
602-
border: 1px solid var(--borderColor-default, #d0d7de);
638+
color: var(--workshop-text-muted);
639+
background-color: transparent;
640+
border: 1px solid transparent;
603641
}
604642
.workshop-nav-btn-secondary:hover,
605643
.workshop-nav-btn-secondary:focus-visible {
606-
color: var(--fgColor-default, #1f2328);
607-
background-color: var(--bgColor-subtle, #eaeef2);
608-
}
609-
610-
@media (prefers-color-scheme: dark) {
611-
html[data-color-mode="auto"] .workshop-nav-btn-primary {
612-
background-color: var(--bgColor-accent-emphasis, #1f6feb);
613-
color: #ffffff;
614-
}
615-
html[data-color-mode="auto"] .workshop-nav-btn-primary:hover,
616-
html[data-color-mode="auto"] .workshop-nav-btn-primary:focus-visible {
617-
background-color: var(--bgColor-accent-emphasis, #1f6feb);
618-
color: #ffffff;
619-
filter: brightness(0.9);
620-
}
621-
html[data-color-mode="auto"] .workshop-nav-btn-secondary {
622-
color: var(--fgColor-default, #e6edf3);
623-
background-color: var(--bgColor-muted, #161b22);
624-
border-color: var(--borderColor-default, #30363d);
625-
}
626-
html[data-color-mode="auto"] .workshop-nav-btn-secondary:hover,
627-
html[data-color-mode="auto"] .workshop-nav-btn-secondary:focus-visible {
628-
color: var(--fgColor-default, #e6edf3);
629-
background-color: var(--bgColor-subtle, #1c2128);
630-
}
631-
}
632-
633-
html[data-color-mode="dark"] .workshop-nav-btn-primary {
634-
background-color: var(--bgColor-accent-emphasis, #1f6feb);
635-
color: #ffffff;
636-
}
637-
html[data-color-mode="dark"] .workshop-nav-btn-primary:hover,
638-
html[data-color-mode="dark"] .workshop-nav-btn-primary:focus-visible {
639-
background-color: var(--bgColor-accent-emphasis, #1f6feb);
640-
color: #ffffff;
641-
filter: brightness(0.9);
642-
}
643-
html[data-color-mode="dark"] .workshop-nav-btn-secondary {
644-
color: var(--fgColor-default, #e6edf3);
645-
background-color: var(--bgColor-muted, #161b22);
646-
border-color: var(--borderColor-default, #30363d);
647-
}
648-
html[data-color-mode="dark"] .workshop-nav-btn-secondary:hover,
649-
html[data-color-mode="dark"] .workshop-nav-btn-secondary:focus-visible {
650-
color: var(--fgColor-default, #e6edf3);
651-
background-color: var(--bgColor-subtle, #1c2128);
644+
color: var(--workshop-text);
645+
background-color: var(--workshop-surface-muted);
652646
}
653647

654648
@media (max-width: 799px) {

‎scripts/lib/page-template.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ function generatePage(htmlContent, workshopMenu) {
1414
<meta charset="UTF-8">
1515
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1616
<meta name="color-scheme" content="light dark">
17-
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
18-
<meta name="theme-color" content="#0d1117" media="(prefers-color-scheme: dark)">
17+
<meta name="theme-color" content="#fcfcfb" media="(prefers-color-scheme: light)">
18+
<meta name="theme-color" content="#0c0a09" media="(prefers-color-scheme: dark)">
1919
<title>${SITE_TITLE}</title>
2020
<meta name="description" content="${SITE_DESCRIPTION}">
2121
<!-- Open Graph -->

0 commit comments

Comments
 (0)