From 9be9991af21ece97c7582738842041fb19b39acb Mon Sep 17 00:00:00 2001
From: Alper Gundogdu <mail@alpergundogdu.com>
Date: Mon, 11 May 2026 16:20:06 +0100
Subject: [PATCH] chore(theme): migrate inline var() to Tailwind utilities
 (close #4)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap remaining `text-[var(--paper)]` arbitrary-value classes and
`style={{ color: "var(--whisper)" }}` inline styles for the
auto-generated Tailwind v4 utilities (`text-paper`, `text-whisper`,
`bg-paper`, `bg-ink`, `border-current`, `pb-[2px]`).

`app/globals.css` already exposes the tokens via `@theme inline`, so
each utility resolves to the same CSS variable used today — no visual
change, just style consistency across `Frame.tsx`, `Chrome.tsx`,
`Hero.tsx`, `Comparison.tsx`, `Close.tsx`, and `FaqItem.tsx`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 components/site/Chrome.tsx     |  8 +++-----
 components/site/Close.tsx      |  2 +-
 components/site/Comparison.tsx |  7 +++----
 components/site/Hero.tsx       | 11 +++++------
 components/ui/FaqItem.tsx      |  2 +-
 components/ui/Frame.tsx        |  4 ++--
 6 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/components/site/Chrome.tsx b/components/site/Chrome.tsx
index 379621a..b9b02d5 100644
--- a/components/site/Chrome.tsx
+++ b/components/site/Chrome.tsx
@@ -118,7 +118,7 @@ export function Chrome() {
       data-scrolled={scrolled ? "true" : undefined}
       data-tone={onDark ? "ink" : "paper"}
       className={`chrome-nav fixed inset-x-0 top-0 z-50 py-5 ${
-        onDark ? "text-[var(--paper)]" : "text-[var(--ink)]"
+        onDark ? "text-paper" : "text-ink"
       }`}
       style={{ paddingInline: "var(--frame-gutter)" }}
     >
@@ -173,16 +173,14 @@ export function Chrome() {
         <div className="col-start-3 flex items-center gap-5 justify-self-end">
           <a
             href={links.docs}
-            className="meta flex items-center gap-2 no-underline"
-            style={{ borderBottom: "1px solid currentColor", paddingBottom: 2 }}
+            className="meta flex items-center gap-2 no-underline border-b border-current pb-[2px]"
           >
             <span>Docs</span>
             <span aria-hidden>→</span>
           </a>
           <Link
             href={links.blog}
-            className="meta flex items-center gap-2 no-underline"
-            style={{ borderBottom: "1px solid currentColor", paddingBottom: 2 }}
+            className="meta flex items-center gap-2 no-underline border-b border-current pb-[2px]"
           >
             <span>Blog</span>
             <span aria-hidden>→</span>
diff --git a/components/site/Close.tsx b/components/site/Close.tsx
index 11e4b38..efbdc82 100644
--- a/components/site/Close.tsx
+++ b/components/site/Close.tsx
@@ -44,7 +44,7 @@ export function Close() {
             }}
             className="max-w-[64ch] leading-[1.7]"
           >
-            <span style={{ color: "var(--whisper)" }}>deCDN</span>{" "}is a peer-to-peer delivery layer for large files — software releases, datasets, media libraries, ai models, anything meant to be pulled a million times and that shouldn&apos;t depend on one bucket. the code is open. the network is open. the price is posted.
+            <span className="text-whisper">deCDN</span>{" "}is a peer-to-peer delivery layer for large files — software releases, datasets, media libraries, ai models, anything meant to be pulled a million times and that shouldn&apos;t depend on one bucket. the code is open. the network is open. the price is posted.
           </p>
 
           <div
diff --git a/components/site/Comparison.tsx b/components/site/Comparison.tsx
index 408ec2d..0dc2b61 100644
--- a/components/site/Comparison.tsx
+++ b/components/site/Comparison.tsx
@@ -32,8 +32,8 @@ export function Comparison() {
         >
           the pattern repeats whenever something big ships: mirrors fork, cdns
           rate-limit, small teams burn tens of thousands hosting bytes they
-          don&apos;t own. <span style={{ color: "var(--whisper)" }}>deCDN</span>{" "}
-          inverts every axis — supply forms around demand, not allocated to it.
+          don&apos;t own. <span className="text-whisper">deCDN</span> inverts
+          every axis — supply forms around demand, not allocated to it.
         </p>
       </div>
 
@@ -77,8 +77,7 @@ export function Comparison() {
                 </span>
                 <span
                   aria-hidden
-                  className="absolute inset-x-0 top-1/2 h-[2px] -translate-y-1/2 @xl:h-[4px]"
-                  style={{ background: "var(--paper)" }}
+                  className="absolute inset-x-0 top-1/2 h-[2px] -translate-y-1/2 bg-paper @xl:h-[4px]"
                 />
               </div>
             </div>
diff --git a/components/site/Hero.tsx b/components/site/Hero.tsx
index a5f4230..83773cd 100644
--- a/components/site/Hero.tsx
+++ b/components/site/Hero.tsx
@@ -22,7 +22,7 @@ export function Hero() {
           <span className="rise rise-1">the delivery layer</span>
           <span className="rise rise-2 pl-[7vw]">
             anyone can serve
-            <span aria-hidden style={{ color: "var(--whisper)" }}>
+            <span aria-hidden className="text-whisper">
               .
             </span>
           </span>
@@ -40,11 +40,10 @@ export function Hero() {
               verifies every chunk with blake3, and pays per megabyte in usdc —
               whether the payload is a linux iso, a dataset, a game patch, a
               media library, or an ai model.{" "}
-              <span style={{ color: "var(--whisper)" }}>deCDN</span> is
-              demand-shaped, locality-optimised delivery for large files at
-              scale: supply forms around demand, cost collapses as regional
-              traffic concentrates. the code is open. the network is open. the
-              price is posted.
+              <span className="text-whisper">deCDN</span> is demand-shaped,
+              locality-optimised delivery for large files at scale: supply forms
+              around demand, cost collapses as regional traffic concentrates.
+              the code is open. the network is open. the price is posted.
             </p>
 
             <div className="rise rise-4 flex flex-col flex-wrap gap-x-8 gap-y-3 @md:flex-row @md:items-end">
diff --git a/components/ui/FaqItem.tsx b/components/ui/FaqItem.tsx
index 4380e2d..3322a8a 100644
--- a/components/ui/FaqItem.tsx
+++ b/components/ui/FaqItem.tsx
@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 function highlightBrand(s: string): ReactNode[] {
   return s.split(/(decdn)/gi).map((part, i) =>
     part.toLowerCase() === "decdn" ? (
-      <span key={i} style={{ color: "var(--whisper)" }}>
+      <span key={i} className="text-whisper">
         deCDN
       </span>
     ) : (
diff --git a/components/ui/Frame.tsx b/components/ui/Frame.tsx
index 2369cd0..5e67901 100644
--- a/components/ui/Frame.tsx
+++ b/components/ui/Frame.tsx
@@ -11,8 +11,8 @@ type FrameProps = {
 };
 
 const TONE_CLASS: Record<Tone, string> = {
-  ink: "bg-[var(--ink)] text-[var(--paper)]",
-  paper: "bg-[var(--paper)] text-[var(--ink)]",
+  ink: "bg-ink text-paper",
+  paper: "bg-paper text-ink",
 };
 
 export function Frame({ id, tone, className = "", children }: FrameProps) {