Sharpen dark mode typography

Author: Doppp

apps/dev-preview/src/styles.css

@@ -1,8 +1,8 @@
 :root {
   color-scheme: light;
   font-family:
-    "Avenir Next", Avenir, "Segoe UI", ui-sans-serif, system-ui, -apple-system,
-    BlinkMacSystemFont, sans-serif;
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, ui-sans-serif,
+    system-ui, sans-serif;
   font-size: 17px;
   font-synthesis: none;
   --canvas: #f7f3ea;
@@ -83,8 +83,9 @@ body {
   margin: 0;
   background: var(--canvas);
   color: var(--ink);
+  -webkit-font-smoothing: antialiased;
   line-height: 1.65;
-  text-rendering: optimizeLegibility;
+  text-rendering: auto;
 }
 
 button,
@@ -142,7 +143,7 @@ button {
 .brand {
   color: var(--ink);
   font-size: 1.05rem;
-  font-weight: 750;
+  font-weight: 700;
   letter-spacing: -0.025em;
   text-decoration: none;
 }
@@ -261,7 +262,7 @@ h3 {
   margin: 0.85rem 0 0;
   font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
   font-size: 1rem;
-  font-weight: 650;
+  font-weight: 600;
   line-height: 1.35;
 }
 
@@ -315,14 +316,14 @@ h3 {
   gap: 0.1rem;
   min-width: 0;
   font-size: 0.83rem;
-  font-weight: 650;
+  font-weight: 600;
   line-height: 1.35;
 }
 
 .lesson-link-copy small {
   color: var(--muted);
   font-size: 0.68rem;
-  font-weight: 550;
+  font-weight: 500;
 }
 
 .locked-lesson {
@@ -362,7 +363,7 @@ h3 {
   background: var(--surface);
   color: var(--ink);
   cursor: pointer;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .guided-tools button:hover,
@@ -479,7 +480,7 @@ h3 {
   border-radius: var(--radius-sm);
   background: var(--primary);
   color: var(--on-primary);
-  font-weight: 750;
+  font-weight: 700;
   text-decoration: none;
 }
 
@@ -502,7 +503,7 @@ h3 {
   margin: 0 0 0.25rem;
   color: var(--primary);
   font-size: 0.78rem;
-  font-weight: 750;
+  font-weight: 700;
 }
 
 .track-title,
@@ -559,7 +560,7 @@ h3 {
   margin: 0;
   color: var(--primary);
   font-size: 0.78rem;
-  font-weight: 750;
+  font-weight: 700;
 }
 
 .course-card h3 {
@@ -604,7 +605,7 @@ h3 {
   padding: 0.45rem 0;
   color: var(--muted);
   font-size: 0.84rem;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .lesson {
@@ -632,7 +633,7 @@ h3 {
 .eyebrow {
   color: var(--primary);
   font-size: 0.79rem;
-  font-weight: 750;
+  font-weight: 700;
   letter-spacing: 0.015em;
 }
 
@@ -758,7 +759,7 @@ pre {
   color: var(--muted);
   font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
   font-size: 0.72rem;
-  font-weight: 750;
+  font-weight: 700;
 }
 
 .checkpoint-current .checkpoint-marker,
@@ -883,7 +884,7 @@ pre code {
   background: var(--surface);
   color: var(--ink);
   cursor: pointer;
-  font-weight: 650;
+  font-weight: 600;
 }
 
 .lesson-pagination button:hover:not(:disabled) {
@@ -982,7 +983,7 @@ pre code {
   .compact-course-contents > summary small {
     color: var(--muted);
     font-size: 0.75rem;
-    font-weight: 550;
+    font-weight: 500;
   }
 
   .contents-chevron {

tests/browser/course.spec.ts

@@ -88,6 +88,24 @@ test("follows the system theme, syncs explorables, and persists an override", as
     sage: "#25372f",
     primary: "#b4d9c3",
   });
+  const typography = await page.evaluate(() => {
+    const body = getComputedStyle(document.body);
+    const action = document.querySelector<HTMLElement>(".library-primary-action");
+    if (!action) throw new Error("Expected the primary course action");
+    const primaryAction = getComputedStyle(action);
+    return {
+      fontFamily: body.fontFamily,
+      fontSmoothing: body.getPropertyValue("-webkit-font-smoothing"),
+      textRendering: body.textRendering,
+      primaryActionWeight: primaryAction.fontWeight,
+    };
+  });
+  expect(typography.fontFamily).not.toContain("Avenir");
+  expect(typography).toMatchObject({
+    fontSmoothing: "antialiased",
+    textRendering: "auto",
+    primaryActionWeight: "700",
+  });
   expect((await new AxeBuilder({ page }).analyze()).violations).toEqual([]);
 
   await page.getByRole("button", { name: "Dark mode" }).click();