feat(ui): put Eval on the Redrob brand tokens

apps/web/src/app/layout.tsx

@@ -7,6 +7,18 @@ import { ThemeProvider } from '@/components/ThemeProvider';
 import { LOCALE_SCRIPT } from '@/lib/i18n/locale';
 import { THEME_SCRIPT } from '@/lib/theme';
 
+/**
+ * Pretendard, from the same CDN and at the same pin as every other Redrob product, so the
+ * type cannot shift under one of them without a commit saying so. This is the one place the
+ * version is named; `--font-sans` in `globals.css` names the family it registers.
+ *
+ * The variable dynamic subset, specifically. It carries the whole weight axis the design
+ * uses and splits the face into slices the browser fetches only when a page actually renders
+ * glyphs from them, where the full file is mostly Hangul that an English screen never draws.
+ */
+const PRETENDARD_CSS =
+  'https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css';
+
 export const metadata: Metadata = {
   title: 'redrob-eval',
   description:
@@ -29,10 +41,11 @@ export default function RootLayout({
             that, because effects run after paint. */}
         <InlineScript html={THEME_SCRIPT} />
         <InlineScript html={LOCALE_SCRIPT} />
-        <link
-          rel="stylesheet"
-          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
-        />
+        {/* Opening the connection early matters more than usual here: the stylesheet and the
+            font slices it names are two round trips to a third party before any text is in
+            its real face. */}
+        <link rel="preconnect" href="https://cdn.jsdelivr.net" crossOrigin="anonymous" />
+        <link rel="stylesheet" href={PRETENDARD_CSS} crossOrigin="anonymous" />
       </head>
       <body className="antialiased">
         <ThemeProvider>

apps/web/src/components/DeployTerminal.tsx

@@ -68,20 +68,22 @@ export const DeployTerminal = forwardRef<
 
       // xterm paints to a canvas, so it cannot read `var()` the way the rest of the UI
       // does; the values are resolved once here instead. The surface behind it uses the
-      // same two tokens, so reading them is what keeps the canvas and its frame from
+      // same tokens, so reading them is what keeps the canvas and its frame from
       // drifting apart. A terminal stays dark in both themes -- that is what a terminal
-      // looks like -- so there is nothing to re-resolve when the theme changes.
+      // looks like -- so there is nothing to re-resolve when the theme changes. The
+      // fallbacks are the brand values the tokens hold (Redrob Black and Blue 4), so a
+      // browser that somehow returns nothing still paints the brand rather than a guess.
       const styles = getComputedStyle(document.documentElement);
       const token = (name: string, fallback: string) =>
         styles.getPropertyValue(name).trim() || fallback;
 
       const term = new Terminal({
         convertEol: true,
-        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+        fontFamily: token('--font-mono', 'ui-monospace, monospace'),
         fontSize: 13,
         theme: {
-          background: token('--terminal-bg', '#0b0f14'),
-          cursor: token('--terminal-cursor', '#6f8bff'),
+          background: token('--terminal-bg', '#0a0b0c'),
+          cursor: token('--terminal-cursor', '#8aafff'),
         },
         cursorBlink: true,
         scrollback: 20000,

apps/web/src/components/EvolutionParetoChart.tsx

@@ -288,7 +288,7 @@ export function EvolutionParetoChart({
               <Scatter
                 name="Infeasible"
                 data={infeasible}
-                fill="var(--chart-axis)"
+                fill="var(--series-neutral)"
                 isAnimationActive={false}
               >
                 {infeasible.map((entry) => (

apps/web/src/components/EvolutionProgressChart.tsx

@@ -207,15 +207,15 @@ export function EvolutionProgressChart({
               type="number"
               domain={[1, Math.max(rows.length, 1)]}
               allowDecimals={false}
-              tick={{ fill: 'var(--chart-axis)', fontSize: 11 }}
+              tick={{ fill: 'var(--chart-tick)', fontSize: 11 }}
               axisLine={{ stroke: 'var(--line)' }}
               tickLine={false}
             />
             <YAxis
               type="number"
               domain={yDomain}
               width={36}
-              tick={{ fill: 'var(--chart-axis)', fontSize: 11 }}
+              tick={{ fill: 'var(--chart-tick)', fontSize: 11 }}
               axisLine={false}
               tickLine={false}
               tickFormatter={(v: number) => `${Math.round(v)}%`}

scripts/check-theme-contrast.mts

@@ -11,7 +11,7 @@ import { readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { MINIMUM, PAIRS, ratioFor, readBlocks } from './theme-contrast.mts';
+import { CONSOLE_FLOOR, MINIMUM, PAIRS, floorFor, ratioFor, readBlocks } from './theme-contrast.mts';
 
 const here = dirname(fileURLToPath(import.meta.url));
 const css = readFileSync(join(here, '..', 'apps', 'web', 'src', 'app', 'globals.css'), 'utf8');
@@ -24,7 +24,7 @@ const TOLERANCE = 0.02;
 const rows = PAIRS.map(([fg, bg, kind, backdrop]) => {
   const lightRatio = ratioFor(fg, bg, light, backdrop);
   const darkRatio = ratioFor(fg, bg, dark, backdrop);
-  const floor = Math.min(MINIMUM[kind], lightRatio);
+  const floor = floorFor(fg, bg, kind, lightRatio);
   return { fg, bg, kind, lightRatio, darkRatio, floor, ok: darkRatio >= floor - TOLERANCE };
 });
 
@@ -46,6 +46,16 @@ if (belowWcag.length) {
   );
 }
 
+const fromConsole = rows.filter((r) => CONSOLE_FLOOR[`${r.fg} on ${r.bg}`] !== undefined);
+if (fromConsole.length) {
+  console.log(
+    "\nFloor is Console's value, not this file's (see CONSOLE_FLOOR):\n" +
+      fromConsole
+        .map((r) => `  ${r.fg} on ${r.bg} (${CONSOLE_FLOOR[`${r.fg} on ${r.bg}`]}:1)`)
+        .join('\n'),
+  );
+}
+
 const shortfalls = rows.filter((r) => !r.ok);
 console.log(
   shortfalls.length === 0