Converted CSS vars to theme variables

maurer2 · maurer2 · commit e3c19f110bd1 · 2026-04-15T22:49:35.000+02:00
diff --git a/packages/create/src/frameworks/react/project/base/src/components/Footer.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/components/Footer.tsx.ejs
@@ -2,7 +2,7 @@ export default function Footer() {
   const year = new Date().getFullYear()
 
   return (
-    <footer className="mt-20 border-t border-[var(--line)] px-4 pb-14 pt-10 text-[var(--sea-ink-soft)]">
+    <footer className="mt-20 border-t border-line px-4 pb-14 pt-10 text-sea-ink-soft">
       <div className="page-wrap flex flex-col items-center justify-between gap-4 text-center sm:flex-row sm:text-left">
         <p className="m-0 text-sm">&copy; {year} Your name here. All rights reserved.</p>
         <p className="island-kicker m-0">Built with TanStack Start</p>
@@ -12,7 +12,7 @@ export default function Footer() {
           href="https://x.com/tan_stack"
           target="_blank"
           rel="noreferrer"
-          className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
+          className="rounded-xl p-2 text-sea-ink-soft transition hover:bg-link-bg-hover hover:text-sea-ink"
         >
           <span className="sr-only">Follow TanStack on X</span>
           <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
@@ -26,7 +26,7 @@ export default function Footer() {
           href="https://github.com/TanStack"
           target="_blank"
           rel="noreferrer"
-          className="rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
+          className="rounded-xl p-2 text-sea-ink-soft transition hover:bg-link-bg-hover hover:text-sea-ink"
         >
           <span className="sr-only">Go to TanStack GitHub</span>
           <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32">
diff --git a/packages/create/src/frameworks/react/project/base/src/components/Header.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/components/Header.tsx.ejs
@@ -19,12 +19,12 @@ const userHeaders = integrations.filter((i) => i.type === 'header-user');
 
 export default function Header() {
   return (
-    <header className="sticky top-0 z-50 border-b border-[var(--line)] bg-[var(--header-bg)] px-4 backdrop-blur-lg">
+    <header className="sticky top-0 z-50 border-b border-line bg-header-bg px-4 backdrop-blur-lg">
       <nav className="page-wrap flex flex-wrap items-center gap-x-3 gap-y-2 py-3 sm:py-4">
         <h2 className="m-0 flex-shrink-0 text-base font-semibold tracking-tight">
           <Link
             to="/"
-            className="inline-flex items-center gap-2 rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm text-[var(--sea-ink)] no-underline shadow-[0_8px_24px_rgba(30,90,72,0.08)] sm:px-4 sm:py-2"
+            className="inline-flex items-center gap-2 rounded-full border border-chip-line bg-chip-bg px-3 py-1.5 text-sm text-sea-ink no-underline shadow-[0_8px_24px_rgba(30,90,72,0.08)] sm:px-4 sm:py-2"
           >
             <span className="h-2 w-2 rounded-full bg-[linear-gradient(90deg,#56c6be,#7ed3bf)]" />
             TanStack Start
@@ -36,7 +36,7 @@ export default function Header() {
             href="https://x.com/tan_stack"
             target="_blank"
             rel="noreferrer"
-            className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
+            className="hidden rounded-xl p-2 text-sea-ink-soft transition hover:bg-link-bg-hover hover:text-sea-ink sm:block"
           >
             <span className="sr-only">Follow TanStack on X</span>
             <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
@@ -50,7 +50,7 @@ export default function Header() {
             href="https://github.com/TanStack"
             target="_blank"
             rel="noreferrer"
-            className="hidden rounded-xl p-2 text-[var(--sea-ink-soft)] transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)] sm:block"
+            className="hidden rounded-xl p-2 text-sea-ink-soft transition hover:bg-link-bg-hover hover:text-sea-ink sm:block"
           >
             <span className="sr-only">Go to TanStack GitHub</span>
             <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24">
@@ -86,10 +86,10 @@ export default function Header() {
           </a>
           <% if (demoRoutes.length > 0) { %><details className="relative w-full sm:w-auto">
             <summary className="nav-link list-none cursor-pointer">Demos</summary>
-            <div className="mt-2 min-w-56 rounded-xl border border-[var(--line)] bg-[var(--header-bg)] p-2 shadow-lg sm:absolute sm:right-0">
+            <div className="mt-2 min-w-56 rounded-xl border border-line bg-header-bg p-2 shadow-lg sm:absolute sm:right-0">
               <% for (const route of demoRoutes) { %><a
                 href="<%= route.url %>"
-                className="block rounded-lg px-3 py-2 text-sm text-[var(--sea-ink-soft)] no-underline transition hover:bg-[var(--link-bg-hover)] hover:text-[var(--sea-ink)]"
+                className="block rounded-lg px-3 py-2 text-sm text-sea-ink-soft no-underline transition hover:bg-link-bg-hover hover:text-sea-ink"
               >
                 <%= route.name %>
               </a>
diff --git a/packages/create/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/components/ThemeToggle.tsx.ejs
@@ -73,7 +73,7 @@ export default function ThemeToggle() {
       onClick={toggleMode}
       aria-label={label}
       title={label}
-      className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm font-semibold text-[var(--sea-ink)] shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"
+      className="rounded-full border border-chip-line bg-chip-bg px-3 py-1.5 text-sm font-semibold text-sea-ink shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"
     >
       {mode === 'auto' ? 'Auto' : mode === 'dark' ? 'Dark' : 'Light'}
     </button>
diff --git a/packages/create/src/frameworks/react/project/base/src/routes/about.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/routes/about.tsx.ejs
@@ -9,10 +9,10 @@ function About() {
     <main className="page-wrap px-4 py-12">
       <section className="island-shell rounded-2xl p-6 sm:p-8">
         <p className="island-kicker mb-2">About</p>
-        <h1 className="display-title mb-3 text-4xl font-bold text-[var(--sea-ink)] sm:text-5xl">
+        <h1 className="display-title mb-3 text-4xl font-bold text-sea-ink sm:text-5xl">
           A small starter with room to grow.
         </h1>
-        <p className="m-0 max-w-3xl text-base leading-8 text-[var(--sea-ink-soft)]">
+        <p className="m-0 max-w-3xl text-base leading-8 text-sea-ink-soft">
           TanStack Start gives you type-safe routing, server functions, and modern SSR defaults.
           Use this as a clean foundation, then layer in your own routes, styling, and add-ons.
         </p>
diff --git a/packages/create/src/frameworks/react/project/base/src/routes/index.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/routes/index.tsx.ejs
@@ -9,25 +9,25 @@ function App() {
         <div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
         <div className="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
         <p className="island-kicker mb-3">TanStack Start Base Template</p>
-        <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
+        <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-sea-ink sm:text-6xl">
           Start simple, ship quickly.
         </h1>
-        <p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
+        <p className="mb-8 max-w-2xl text-base text-sea-ink-soft sm:text-lg">
           This base starter intentionally keeps things light: two routes, clean structure,
           and the essentials you need to build from scratch.
         </p>
         <div className="flex flex-wrap gap-3">
           <a
             href="/about"
-            className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
+            className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-lagoon-deep no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
           >
             About This Starter
           </a>
           <a
             href="https://tanstack.com/router"
             target="_blank"
             rel="noopener noreferrer"
-            className="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
+            className="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-sea-ink no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
           >
             Router Guide
           </a>
@@ -46,15 +46,15 @@ function App() {
               className="island-shell feature-card rise-in rounded-2xl p-5"
               style={{ animationDelay: `${index * 90 + 80}ms` }}
             >
-              <h2 className="mb-2 text-base font-semibold text-[var(--sea-ink)]">{title}</h2>
-              <p className="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
+              <h2 className="mb-2 text-base font-semibold text-sea-ink">{title}</h2>
+              <p className="m-0 text-sm text-sea-ink-soft">{desc}</p>
             </article>
           ))}
       </section>
 
       <section className="island-shell mt-8 rounded-2xl p-6">
         <p className="island-kicker mb-2">Quick Start</p>
-        <ul className="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
+        <ul className="m-0 list-disc space-y-2 pl-5 text-sm text-sea-ink-soft">
           <li>
             Edit <code>src/routes/index.tsx</code> to customize the home page.
           </li>
diff --git a/packages/create/src/frameworks/react/project/base/src/styles.css.ejs b/packages/create/src/frameworks/react/project/base/src/styles.css.ejs
@@ -4,73 +4,70 @@
 
 @theme {
   --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
-}
-
-:root {
-  --sea-ink: #173a40;
-  --sea-ink-soft: #416166;
-  --lagoon: #4fb8b2;
-  --lagoon-deep: #328f97;
-  --palm: #2f6a4a;
-  --sand: #e7f0e8;
-  --foam: #f3faf5;
-  --surface: rgba(255, 255, 255, 0.74);
-  --surface-strong: rgba(255, 255, 255, 0.9);
-  --line: rgba(23, 58, 64, 0.14);
-  --inset-glint: rgba(255, 255, 255, 0.82);
-  --kicker: rgba(47, 106, 74, 0.9);
-  --bg-base: #e7f3ec;
-  --header-bg: rgba(251, 255, 248, 0.84);
-  --chip-bg: rgba(255, 255, 255, 0.8);
-  --chip-line: rgba(47, 106, 74, 0.18);
-  --link-bg-hover: rgba(255, 255, 255, 0.9);
-  --hero-a: rgba(79, 184, 178, 0.36);
-  --hero-b: rgba(47, 106, 74, 0.2);
+  --color-sea-ink: #173a40;
+  --color-sea-ink-soft: #416166;
+  --color-lagoon: #4fb8b2;
+  --color-lagoon-deep: #328f97;
+  --color-palm: #2f6a4a;
+  --color-sand: #e7f0e8;
+  --color-foam: #f3faf5;
+  --color-surface: rgba(255, 255, 255, 0.74);
+  --color-surface-strong: rgba(255, 255, 255, 0.9);
+  --color-line: rgba(23, 58, 64, 0.14);
+  --color-inset-glint: rgba(255, 255, 255, 0.82);
+  --color-kicker: rgba(47, 106, 74, 0.9);
+  --color-bg-base: #e7f3ec;
+  --color-header-bg: rgba(251, 255, 248, 0.84);
+  --color-chip-bg: rgba(255, 255, 255, 0.8);
+  --color-chip-line: rgba(47, 106, 74, 0.18);
+  --color-link-bg-hover: rgba(255, 255, 255, 0.9);
+  --color-hero-a: rgba(79, 184, 178, 0.36);
+  --color-hero-b: rgba(47, 106, 74, 0.2);
 }
 
 :root[data-theme="dark"] {
-  --sea-ink: #d7ece8;
-  --sea-ink-soft: #afcdc8;
-  --lagoon: #60d7cf;
-  --lagoon-deep: #8de5db;
-  --palm: #6ec89a;
-  --sand: #0f1a1e;
-  --foam: #101d22;
-  --surface: rgba(16, 30, 34, 0.8);
-  --surface-strong: rgba(15, 27, 31, 0.92);
-  --line: rgba(141, 229, 219, 0.18);
-  --inset-glint: rgba(194, 247, 238, 0.14);
-  --kicker: #b8efe5;
-  --bg-base: #0a1418;
-  --header-bg: rgba(10, 20, 24, 0.8);
-  --chip-bg: rgba(13, 28, 32, 0.9);
-  --chip-line: rgba(141, 229, 219, 0.24);
-  --link-bg-hover: rgba(24, 44, 49, 0.8);
-  --hero-a: rgba(96, 215, 207, 0.18);
-  --hero-b: rgba(110, 200, 154, 0.12);
+  --color-sea-ink: #d7ece8;
+  --color-sea-ink-soft: #afcdc8;
+  --color-lagoon: #60d7cf;
+  --color-lagoon-deep: #8de5db;
+  --color-palm: #6ec89a;
+  --color-sand: #0f1a1e;
+  --color-foam: #101d22;
+  --color-surface: rgba(16, 30, 34, 0.8);
+  --color-surface-strong: rgba(15, 27, 31, 0.92);
+  --color-line: rgba(141, 229, 219, 0.18);
+  --color-inset-glint: rgba(194, 247, 238, 0.14);
+  --color-kicker: #b8efe5;
+  --color-bg-base: #0a1418;
+  --color-header-bg: rgba(10, 20, 24, 0.8);
+  --color-chip-bg: rgba(13, 28, 32, 0.9);
+  --color-chip-line: rgba(141, 229, 219, 0.24);
+  --color-link-bg-hover: rgba(24, 44, 49, 0.8);
+  --color-hero-a: rgba(96, 215, 207, 0.18);
+  --color-hero-b: rgba(110, 200, 154, 0.12);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --sea-ink: #d7ece8;
-    --sea-ink-soft: #afcdc8;
-    --lagoon: #60d7cf;
-    --lagoon-deep: #8de5db;
-    --palm: #6ec89a;
-    --sand: #0f1a1e;
-    --foam: #101d22;
-    --surface: rgba(16, 30, 34, 0.8);
-    --surface-strong: rgba(15, 27, 31, 0.92);
-    --line: rgba(141, 229, 219, 0.18);
-    --inset-glint: rgba(194, 247, 238, 0.14);
-    --kicker: #b8efe5;
-    --bg-base: #0a1418;
-    --header-bg: rgba(10, 20, 24, 0.8);
-    --chip-bg: rgba(13, 28, 32, 0.9);
-    --chip-line: rgba(141, 229, 219, 0.24);
-    --link-bg-hover: rgba(24, 44, 49, 0.8);
-    --hero-a: rgba(96, 215, 207, 0.18);
-    --hero-b: rgba(110, 200, 154, 0.12);
+    --color-sea-ink: #d7ece8;
+    --color-sea-ink-soft: #afcdc8;
+    --color-lagoon: #60d7cf;
+    --color-lagoon-deep: #8de5db;
+    --color-palm: #6ec89a;
+    --color-sand: #0f1a1e;
+    --color-foam: #101d22;
+    --color-surface: rgba(16, 30, 34, 0.8);
+    --color-surface-strong: rgba(15, 27, 31, 0.92);
+    --color-line: rgba(141, 229, 219, 0.18);
+    --color-inset-glint: rgba(194, 247, 238, 0.14);
+    --color-kicker: #b8efe5;
+    --color-bg-base: #0a1418;
+    --color-header-bg: rgba(10, 20, 24, 0.8);
+    --color-chip-bg: rgba(13, 28, 32, 0.9);
+    --color-chip-line: rgba(141, 229, 219, 0.24);
+    --color-link-bg-hover: rgba(24, 44, 49, 0.8);
+    --color-hero-a: rgba(96, 215, 207, 0.18);
+    --color-hero-b: rgba(110, 200, 154, 0.12);
   }
 }
 
@@ -86,14 +83,14 @@ body,
 
 body {
   margin: 0;
-  color: var(--sea-ink);
+  color: var(--color-sea-ink);
   font-family: var(--font-sans);
-  background-color: var(--bg-base);
+  background-color: var(--color-bg-base);
   background:
-    radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
-    radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
+    radial-gradient(1100px 620px at -8% -10%, var(--color-hero-a), transparent 58%),
+    radial-gradient(1050px 620px at 112% -12%, var(--color-hero-b), transparent 62%),
     radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),
-    linear-gradient(180deg, color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100%);
+    linear-gradient(180deg, color-mix(in oklab, var(--color-sand) 68%, white) 0%, var(--color-foam) 44%, var(--color-bg-base) 100%);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -127,7 +124,7 @@ body::after {
 }
 
 a {
-  color: var(--lagoon-deep);
+  color: var(--color-lagoon-deep);
   text-decoration-color: rgba(50, 143, 151, 0.4);
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
@@ -139,8 +136,8 @@ a:hover {
 
 code {
   font-size: 0.9em;
-  border: 1px solid var(--line);
-  background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
+  border: 1px solid var(--color-line);
+  background: color-mix(in oklab, var(--color-surface-strong) 82%, white 18%);
   border-radius: 7px;
   padding: 2px 7px;
 }
@@ -164,26 +161,26 @@ pre code {
 }
 
 .island-shell {
-  border: 1px solid var(--line);
-  background: linear-gradient(165deg, var(--surface-strong), var(--surface));
+  border: 1px solid var(--color-line);
+  background: linear-gradient(165deg, var(--color-surface-strong), var(--color-surface));
   box-shadow:
-    0 1px 0 var(--inset-glint) inset,
+    0 1px 0 var(--color-inset-glint) inset,
     0 22px 44px rgba(30, 90, 72, 0.1),
     0 6px 18px rgba(23, 58, 64, 0.08);
   backdrop-filter: blur(4px);
 }
 
 .feature-card {
-  background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface));
+  background: linear-gradient(165deg, color-mix(in oklab, var(--color-surface-strong) 93%, white 7%), var(--color-surface));
   box-shadow:
-    0 1px 0 var(--inset-glint) inset,
+    0 1px 0 var(--color-inset-glint) inset,
     0 18px 34px rgba(30, 90, 72, 0.1),
     0 4px 14px rgba(23, 58, 64, 0.06);
 }
 
 .feature-card:hover {
   transform: translateY(-2px);
-  border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
+  border-color: color-mix(in oklab, var(--color-lagoon-deep) 35%, var(--color-line));
 }
 
 button,
@@ -198,15 +195,15 @@ a {
   text-transform: uppercase;
   font-weight: 700;
   font-size: 0.69rem;
-  color: var(--kicker);
+  color: var(--color-kicker);
 }
 
 .nav-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   text-decoration: none;
-  color: var(--sea-ink-soft);
+  color: var(--color-sea-ink-soft);
 }
 
 .nav-link::after {
@@ -218,13 +215,13 @@ a {
   height: 2px;
   transform: scaleX(0);
   transform-origin: left;
-  background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
+  background: linear-gradient(90deg, var(--color-lagoon), #7ed3bf);
   transition: transform 170ms ease;
 }
 
 .nav-link:hover,
 .nav-link.is-active {
-  color: var(--sea-ink);
+  color: var(--color-sea-ink);
 }
 
 .nav-link:hover::after,
@@ -239,8 +236,8 @@ a {
 }
 
 .site-footer {
-  border-top: 1px solid var(--line);
-  background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
+  border-top: 1px solid var(--color-line);
+  background: color-mix(in oklab, var(--color-header-bg) 84%, transparent 16%);
 }
 
 .rise-in {

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ export default function ThemeToggle() {`
`73`	`73`	`onClick={toggleMode}`
`74`	`74`	`aria-label={label}`
`75`	`75`	`title={label}`
`76`		`- className="rounded-full border border-[var(--chip-line)] bg-[var(--chip-bg)] px-3 py-1.5 text-sm font-semibold text-[var(--sea-ink)] shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"`
	`76`	`+ className="rounded-full border border-chip-line bg-chip-bg px-3 py-1.5 text-sm font-semibold text-sea-ink shadow-[0_8px_22px_rgba(30,90,72,0.08)] transition hover:-translate-y-0.5"`
`77`	`77`	`>`
`78`	`78`	`{mode === 'auto' ? 'Auto' : mode === 'dark' ? 'Dark' : 'Light'}`
`79`	`79`	`</button>`