fix(docs): make landing panels theme-aware + tighten the headline

The code, instrument, install, HUD, and tile panels were fixed dark in
both color modes, so in light mode they clashed with the page. Make
every panel follow the theme:

- Panel surfaces, text, hairlines, inset, and the focal highlight derive
  from the --color-* theme tokens (light surfaces in light mode, dark in
  dark).
- Syntax highlighting moves from inline colors to `.rio-tok--*` classes
  with a light palette by default and a dark override under
  `:root[data-theme="dark"]`, so code stays readable in both modes.

Also shorten the hero headline to "Know when an element meets the
viewport." (H1 + the OG card) so it wraps tighter.

Verified light and dark via computed styles + screenshots: light mode
now shows light panels with dark, high-contrast syntax; dark mode is
unchanged. biome clean, fallow exits 0, typecheck 0 errors, build OK.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: thebuilder

apps/docs/pages/_home/Landing.tsx

@@ -68,9 +68,7 @@ function Hero() {
     <header className="rio-section rio-hero" ref={ref}>
       <div className="rio-hero__grid">
         <div className="rio-hero__copy">
-          <h1 className="rio-h1">
-            Know the moment an element meets the viewport.
-          </h1>
+          <h1 className="rio-h1">Know when an element meets the viewport.</h1>
           <p className="rio-lead">
             A tiny, fully-typed React adapter for the Intersection Observer API.
             Reveal on scroll, lazy-load, track impressions, and build infinite

apps/docs/pages/_home/home.css

@@ -1,7 +1,9 @@
 /* ============================================================== */
 /* Landing page — React Intersection Observer                     */
-/* Page chrome follows Blume's theme; code + instrument panels are */
-/* a deliberate dark instrument surface in both color modes.       */
+/* Everything follows Blume's theme: chrome, panels, code, and     */
+/* instrument all adapt to light and dark. Tokens derive from the  */
+/* --color-* theme vars; the few that can't (code syntax, focal    */
+/* highlight) get an explicit dark override below.                 */
 /* ============================================================== */
 
 .rio-home {
@@ -12,18 +14,51 @@
   --rio-line-2: color-mix(in srgb, var(--color-foreground) 22%, transparent);
   --rio-surface: color-mix(in srgb, var(--color-foreground) 3.5%, transparent);
   --rio-surface-2: color-mix(in srgb, var(--color-foreground) 7%, transparent);
-  --rio-panel: #0d0d15;
-  --rio-panel-2: #14141f;
-  --rio-panel-fg: #ece9f8;
-  --rio-panel-muted: #a6a3be;
-  --rio-panel-line: color-mix(in srgb, #a78bfa 24%, transparent);
+
+  /* Panels: light surface in light mode, dark in dark, derived from theme. */
+  --rio-panel: color-mix(
+    in srgb,
+    var(--color-foreground) 4%,
+    var(--color-background)
+  );
+  --rio-panel-2: color-mix(
+    in srgb,
+    var(--color-foreground) 8%,
+    var(--color-background)
+  );
+  --rio-panel-inset: color-mix(
+    in srgb,
+    var(--color-foreground) 7%,
+    var(--color-background)
+  );
+  --rio-panel-fg: var(--color-foreground);
+  --rio-panel-muted: var(--color-muted-foreground);
+  --rio-panel-line: color-mix(in srgb, var(--rio-accent) 30%, transparent);
+  --rio-panel-hair: color-mix(in srgb, var(--color-foreground) 9%, transparent);
+
   --rio-violet: #a78bfa;
   --rio-emerald: #34d399;
   /* Dedicated button violet: darker/more saturated than the theme accent so
      white label text stays high-contrast in both light and dark modes. */
   --rio-btn: oklch(0.56 0.18 290);
   --rio-btn-hover: oklch(0.62 0.17 290);
-  --rio-focal: linear-gradient(135deg, #241f47 0%, #16294a 100%);
+
+  /* Focal highlight (target chip, logged tiles) and its text. */
+  --rio-focal: linear-gradient(
+    135deg,
+    color-mix(in srgb, #8b5cf6 16%, var(--color-background)),
+    color-mix(in srgb, #22d3ee 13%, var(--color-background))
+  );
+  --rio-focal-fg: var(--color-foreground);
+
+  /* Code syntax palette (light-mode values; dark overridden below). */
+  --rio-code-fg: #37324a;
+  --rio-code-k: #7c3aed;
+  --rio-code-f: #7c3aed;
+  --rio-code-s: #0f7a4d;
+  --rio-code-c: #86829a;
+  --rio-code-p: #0b6bb3;
+
   --rio-mono: var(
     --blume-font-mono,
     ui-monospace,
@@ -38,6 +73,18 @@
   overflow-x: clip;
 }
 
+:root[data-theme="dark"] .rio-home {
+  --rio-panel-line: color-mix(in srgb, #a78bfa 24%, transparent);
+  --rio-focal: linear-gradient(135deg, #241f47 0%, #16294a 100%);
+  --rio-focal-fg: #f4f2ff;
+  --rio-code-fg: #d7d4e6;
+  --rio-code-k: #c4b5fd;
+  --rio-code-f: #a78bfa;
+  --rio-code-s: #8ee7a6;
+  --rio-code-c: #948fb0;
+  --rio-code-p: #7cc7ff;
+}
+
 .rio-home ::selection {
   background: color-mix(in srgb, var(--rio-accent) 32%, transparent);
   color: var(--rio-fg);
@@ -282,7 +329,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 0.7rem 0.7rem 0.7rem 0.9rem;
-  border-top: 1px solid color-mix(in srgb, #ffffff 6%, transparent);
+  border-top: 1px solid var(--rio-panel-hair);
 }
 
 .rio-install__cmd {
@@ -313,7 +360,7 @@
   height: 2.1rem;
   flex: none;
   border-radius: 8px;
-  border: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
+  border: 1px solid var(--rio-panel-hair);
   background: var(--rio-panel-2);
   color: var(--rio-panel-muted);
   cursor: pointer;
@@ -428,10 +475,8 @@
   position: relative;
   height: 8.5rem;
   border-radius: 12px;
-  border: 1px solid color-mix(in srgb, #ffffff 8%, transparent);
-  background:
-    linear-gradient(color-mix(in srgb, #ffffff 3%, transparent), transparent),
-    #0a0a11;
+  border: 1px solid var(--rio-panel-hair);
+  background: var(--rio-panel-inset);
   overflow: hidden;
   margin-bottom: 1rem;
 }
@@ -476,7 +521,7 @@
   top: -1.5rem;
   font-family: var(--rio-mono);
   font-size: 0.62rem;
-  color: color-mix(in srgb, var(--rio-violet) 80%, white);
+  color: color-mix(in srgb, var(--rio-accent) 72%, var(--rio-panel-fg));
 }
 
 .rio-instrument__target {
@@ -493,7 +538,7 @@
   font-size: 0.78rem;
   border: 1px solid color-mix(in srgb, var(--rio-violet) 45%, transparent);
   background: var(--rio-focal);
-  color: #f4f2ff;
+  color: var(--rio-focal-fg);
   transition:
     box-shadow 0.3s ease,
     border-color 0.3s ease;
@@ -519,7 +564,7 @@
   gap: 0.5rem;
   font-family: var(--rio-mono);
   font-size: 0.76rem;
-  border-bottom: 1px solid color-mix(in srgb, #ffffff 6%, transparent);
+  border-bottom: 1px solid var(--rio-panel-hair);
   padding-bottom: 0.3rem;
 }
 
@@ -541,14 +586,14 @@
   color: var(--rio-emerald);
 }
 .rio-readout dd[data-tone="off"] {
-  color: color-mix(in srgb, var(--rio-panel-muted) 85%, white);
+  color: var(--rio-panel-muted);
 }
 
 .rio-instrument__bar,
 .rio-hud__bar {
   height: 5px;
   border-radius: 999px;
-  background: color-mix(in srgb, #ffffff 8%, transparent);
+  background: var(--rio-panel-hair);
   overflow: hidden;
 }
 
@@ -774,7 +819,7 @@
   font-size: 0.72rem;
   color: var(--rio-panel-muted);
   padding: 0.55rem 0.9rem;
-  border-bottom: 1px solid color-mix(in srgb, #ffffff 6%, transparent);
+  border-bottom: 1px solid var(--rio-panel-hair);
   background: var(--rio-panel-2);
 }
 
@@ -785,7 +830,7 @@
   font-family: var(--rio-mono);
   font-size: 0.82rem;
   line-height: 1.65;
-  color: #d7d4e6;
+  color: var(--rio-code-fg);
   tab-size: 2;
 }
 
@@ -798,10 +843,30 @@
   height: 8px;
 }
 .rio-code__pre::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, #ffffff 14%, transparent);
+  background: color-mix(in srgb, var(--color-foreground) 22%, transparent);
   border-radius: 999px;
 }
 
+/* Syntax token colors — theme-aware (values set on .rio-home + dark override). */
+.rio-tok--t {
+  color: var(--rio-code-fg);
+}
+.rio-tok--k {
+  color: var(--rio-code-k);
+}
+.rio-tok--f {
+  color: var(--rio-code-f);
+}
+.rio-tok--s {
+  color: var(--rio-code-s);
+}
+.rio-tok--c {
+  color: var(--rio-code-c);
+}
+.rio-tok--p {
+  color: var(--rio-code-p);
+}
+
 /* ------------------------------------------------------------- */
 /* Impression strip                                               */
 /* ------------------------------------------------------------- */
@@ -839,7 +904,7 @@
 .rio-tile[data-logged="true"] {
   border-color: color-mix(in srgb, var(--rio-emerald) 50%, transparent);
   background: var(--rio-focal);
-  color: #f2f1ff;
+  color: var(--rio-focal-fg);
 }
 
 .rio-tile__id {
@@ -872,7 +937,7 @@
 }
 
 .rio-tile[data-logged="true"] .rio-tile__index {
-  color: color-mix(in srgb, #ffffff 45%, transparent);
+  color: color-mix(in srgb, var(--rio-focal-fg) 55%, transparent);
 }
 
 .rio-impr__panel {

apps/docs/pages/_home/primitives.tsx

@@ -318,20 +318,15 @@ export function Icon({
 }
 
 /* ------------------------------------------------------------------ */
-/* Code rendering — minimal, deliberate token colors on the dark panel */
+/* Code rendering — token kinds map to theme-aware colors in home.css   */
+/* (`.rio-tok--*`), so syntax stays readable in light and dark.         */
 /* ------------------------------------------------------------------ */
 
-const CODE_COLOR = {
-  t: "#d7d4e6", // plain text
-  k: "#c4b5fd", // keyword
-  f: "#a78bfa", // function / hook
-  s: "#8ee7a6", // string
-  c: "#948fb0", // comment
-  p: "#7cc7ff", // property / jsx attr
-} as const;
+// t: plain · k: keyword · f: function/hook · s: string · c: comment · p: prop
+type TokenKind = "t" | "k" | "f" | "s" | "c" | "p";
 
 /** A single token: [kind, value]. */
-export type Tk = [kind: keyof typeof CODE_COLOR, value: string];
+export type Tk = [kind: TokenKind, value: string];
 
 /** One line of code is a list of tokens. Convenience token builders: */
 export const c = {
@@ -365,9 +360,9 @@ export function Code({
               {line.length === 0 ? "​" : null}
               {line.map((token, j) => (
                 <span
+                  className={`rio-tok rio-tok--${token[0]}`}
                   // biome-ignore lint/suspicious/noArrayIndexKey: static tokens
                   key={j}
-                  style={{ color: CODE_COLOR[token[0]] }}
                 >
                   {token[1]}
                 </span>

apps/docs/public/og-home.png

@@ -158,7 +158,7 @@ async function main() {
     style: { display: "flex", flexDirection: "column", maxWidth: 560 },
     children: [
       brand,
-      text("Know the moment an element meets the viewport.", {
+      text("Know when an element meets the viewport.", {
         color: FG,
         fontFamily: f.display,
         fontSize: 58,