create-swift-rust 0.7.1 → 0.8.0

package/templates/default/src/components/font-studio.tsx

@@ -129,26 +129,26 @@ export function FontStudio() {
   const activeImportName = customFont.trim() ? toImportName(customFont) : entry.importName;
 
   return (
-    <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] overflow-hidden shadow-sm">
-      <div className="flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-surface-2)] px-6 py-3">
+    <div className="rounded-2xl border border-border bg-surface overflow-hidden shadow-sm">
+      <div className="flex items-center justify-between border-b border-border bg-surface-2 px-6 py-3">
         <div className="flex items-center gap-2">
-          <span className="pulse-dot h-1.5 w-1.5 rounded-full bg-[var(--color-accent)]" />
-          <span className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-muted)]">
+          <span className="pulse-dot h-1.5 w-1.5 rounded-full bg-accent" />
+          <span className="text-xs font-medium uppercase tracking-wider text-fg-muted">
             Typography studio
           </span>
         </div>
-        <span className="font-mono text-xs text-[var(--color-fg-subtle)]">
+        <span className="font-mono text-xs text-fg-subtle">
           {entry.name} · {weight} · {italic ? "italic" : "roman"}
         </span>
       </div>
 
       <div className="grid gap-0 lg:grid-cols-[20rem_1fr]">
-        <div className="border-b border-[var(--color-border)] p-6 lg:border-b-0 lg:border-r">
+        <div className="border-b border-border p-6 lg:border-b-0 lg:border-r">
           <div className="space-y-5">
             <div>
               <label
                 htmlFor="studio-font"
-                className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+                className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-fg-subtle"
               >
                 Font
               </label>
@@ -159,7 +159,7 @@ export function FontStudio() {
                   setFontName(e.target.value);
                   setCustomFont("");
                 }}
-                className="h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm text-[var(--color-fg)] focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-soft)]"
+                className="h-10 w-full rounded-md border border-border bg-surface px-3 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent-soft"
               >
                 {STUDIO_FONTS.map((f) => (
                   <option key={f.name} value={f.name}>
@@ -172,7 +172,7 @@ export function FontStudio() {
             <div>
               <label
                 htmlFor="studio-weight"
-                className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+                className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-fg-subtle"
               >
                 Weight
               </label>
@@ -182,7 +182,7 @@ export function FontStudio() {
                 onChange={(e: ChangeEvent<HTMLSelectElement>) =>
                   setWeight(Number(e.target.value))
                 }
-                className="h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm text-[var(--color-fg)] focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-soft)]"
+                className="h-10 w-full rounded-md border border-border bg-surface px-3 text-sm text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent-soft"
               >
                 {WEIGHTS.map((w) => (
                   <option key={w.value} value={w.value}>
@@ -193,7 +193,7 @@ export function FontStudio() {
             </div>
 
             <div>
-              <span className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]">
+              <span className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-fg-subtle">
                 Style
               </span>
               <div className="flex gap-2">
@@ -202,8 +202,8 @@ export function FontStudio() {
                   onClick={() => setItalic(false)}
                   className={`flex-1 h-10 rounded-md text-sm font-medium transition-colors ${
                     !italic
-                      ? "bg-[var(--color-fg)] text-[var(--color-bg)]"
-                      : "border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+                      ? "bg-fg text-bg"
+                      : "border border-border bg-surface text-fg-muted hover:text-fg"
                   }`}
                 >
                   Regular
@@ -213,8 +213,8 @@ export function FontStudio() {
                   onClick={() => setItalic(true)}
                   className={`flex-1 h-10 rounded-md text-sm font-medium transition-colors ${
                     italic
-                      ? "bg-[var(--color-fg)] text-[var(--color-bg)]"
-                      : "border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+                      ? "bg-fg text-bg"
+                      : "border border-border bg-surface text-fg-muted hover:text-fg"
                   }`}
                 >
                   Italic
@@ -226,11 +226,11 @@ export function FontStudio() {
               <div className="mb-1.5 flex items-baseline justify-between">
                 <label
                   htmlFor="studio-size"
-                  className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+                  className="text-xs font-medium uppercase tracking-wider text-fg-subtle"
                 >
                   Size
                 </label>
-                <span className="font-mono text-xs text-[var(--color-fg-muted)]">{size}px</span>
+                <span className="font-mono text-xs text-fg-muted">{size}px</span>
               </div>
               <input
                 id="studio-size"
@@ -241,7 +241,7 @@ export function FontStudio() {
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setSize(Number(e.target.value))
                 }
-                className="w-full accent-[var(--color-accent)]"
+                className="w-full accent-accent"
               />
             </div>
 
@@ -249,11 +249,11 @@ export function FontStudio() {
               <div className="mb-1.5 flex items-baseline justify-between">
                 <label
                   htmlFor="studio-tracking"
-                  className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+                  className="text-xs font-medium uppercase tracking-wider text-fg-subtle"
                 >
                   Tracking
                 </label>
-                <span className="font-mono text-xs text-[var(--color-fg-muted)]">
+                <span className="font-mono text-xs text-fg-muted">
                   {tracking >= 0 ? "+" : ""}
                   {tracking}
                 </span>
@@ -267,7 +267,7 @@ export function FontStudio() {
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setTracking(Number(e.target.value))
                 }
-                className="w-full accent-[var(--color-accent)]"
+                className="w-full accent-accent"
               />
             </div>
 
@@ -275,11 +275,11 @@ export function FontStudio() {
               <div className="mb-1.5 flex items-baseline justify-between">
                 <label
                   htmlFor="studio-leading"
-                  className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+                  className="text-xs font-medium uppercase tracking-wider text-fg-subtle"
                 >
                   Line height
                 </label>
-                <span className="font-mono text-xs text-[var(--color-fg-muted)]">
+                <span className="font-mono text-xs text-fg-muted">
                   {leading.toFixed(2)}
                 </span>
               </div>
@@ -293,14 +293,14 @@ export function FontStudio() {
                 onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setLeading(Number(e.target.value))
                 }
-                className="w-full accent-[var(--color-accent)]"
+                className="w-full accent-accent"
               />
             </div>
 
             <div>
               <label
                 htmlFor="studio-custom"
-                className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]"
+                className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-fg-subtle"
               >
                 Any of 2,071 Google fonts
               </label>
@@ -310,7 +310,7 @@ export function FontStudio() {
                 value={customFont}
                 onChange={(e: ChangeEvent<HTMLInputElement>) => setCustomFont(e.target.value)}
                 placeholder="e.g. Fraunces, IBM Plex Sans KR, Anton"
-                className="h-10 w-full rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-sm text-[var(--color-fg)] placeholder:text-[var(--color-fg-subtle)] focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-soft)]"
+                className="h-10 w-full rounded-md border border-border bg-surface px-3 text-sm text-fg placeholder:text-fg-subtle focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent-soft"
               />
             </div>
           </div>
@@ -333,8 +333,8 @@ export function FontStudio() {
             {sample}
           </div>
 
-          <div className="flex flex-wrap items-center gap-2 border-t border-[var(--color-border)] bg-[var(--color-surface-2)] px-6 py-3">
-            <span className="text-xs font-medium uppercase tracking-wider text-[var(--color-fg-subtle)]">
+          <div className="flex flex-wrap items-center gap-2 border-t border-border bg-surface-2 px-6 py-3">
+            <span className="text-xs font-medium uppercase tracking-wider text-fg-subtle">
               Sample
             </span>
             <div className="flex flex-wrap gap-1.5">
@@ -345,8 +345,8 @@ export function FontStudio() {
                   onClick={() => setSample(s)}
                   className={`rounded-full px-2.5 py-1 text-xs transition-colors ${
                     sample === s
-                      ? "bg-[var(--color-fg)] text-[var(--color-bg)]"
-                      : "border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+                      ? "bg-fg text-bg"
+                      : "border border-border bg-surface text-fg-muted hover:text-fg"
                   }`}
                 >
                   {s.length > 24 ? `${s.slice(0, 22)}…` : s}
@@ -357,21 +357,21 @@ export function FontStudio() {
               type="text"
               value={sample}
               onChange={(e: ChangeEvent<HTMLInputElement>) => setSample(e.target.value)}
-              className="ml-auto h-8 min-w-0 max-w-xs flex-1 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 text-xs text-[var(--color-fg)] focus:border-[var(--color-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-soft)]"
+              className="ml-auto h-8 min-w-0 max-w-xs flex-1 rounded-md border border-border bg-surface px-3 text-xs text-fg focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent-soft"
               placeholder="Type to preview…"
             />
           </div>
         </div>
       </div>
 
-      <div className="border-t border-[var(--color-border)] bg-[var(--color-bg)] px-6 py-4 font-mono text-xs">
-        <span className="text-[var(--color-accent)]">import</span>
+      <div className="border-t border-border bg-bg px-6 py-4 font-mono text-xs">
+        <span className="text-accent">import</span>
         {" { "}
-        <span className="text-[var(--color-fg)]">{activeImportName}</span>
+        <span className="text-fg">{activeImportName}</span>
         {" } "}
-        <span className="text-[var(--color-accent)]">from</span>
-        <span className="text-[var(--color-success)]">{" "}&quot;swift-rust/font/google&quot;</span>
-        <span className="text-[var(--color-fg-muted)]">;</span>
+        <span className="text-accent">from</span>
+        <span className="text-success">{" "}&quot;swift-rust/font/google&quot;</span>
+        <span className="text-fg-muted">;</span>
       </div>
     </div>
   );

package/templates/default/src/components/footer.tsx

@@ -34,19 +34,19 @@ const COLUMNS: Array<{ title: string; links: Array<{ href: string; label: string
 export function Footer() {
   const year = new Date().getFullYear();
   return (
-    <footer className="mt-32 border-t border-[var(--color-border)] bg-[var(--color-surface)]">
+    <footer className="mt-32 border-t border-border bg-surface">
       <div className="container-page py-16">
         <div className="grid gap-12 md:grid-cols-[1.5fr_2fr]">
           <div>
             <Logo />
-            <p className="mt-4 max-w-xs text-[0.875rem] leading-relaxed text-[var(--color-fg-muted)]">
+            <p className="mt-4 max-w-xs text-[0.875rem] leading-relaxed text-fg-muted">
               A full-stack React framework powered with Rust + Bun. TSX-first, single binary, four rendering modes.
             </p>
           </div>
           <div className="grid grid-cols-2 gap-8 sm:grid-cols-3">
             {COLUMNS.map((col) => (
               <div key={col.title}>
-                <h3 className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+                <h3 className="text-[0.75rem] font-semibold uppercase tracking-wider text-fg-subtle">
                   {col.title}
                 </h3>
                 <ul className="mt-4 space-y-2.5">
@@ -54,7 +54,7 @@ export function Footer() {
                     <li key={link.href}>
                       <Link
                         href={link.href}
-                        className="text-[0.875rem] text-[var(--color-fg-muted)] transition-colors hover:text-[var(--color-fg)]"
+                        className="text-[0.875rem] text-fg-muted transition-colors hover:text-fg"
                       >
                         {link.label}
                       </Link>
@@ -65,7 +65,7 @@ export function Footer() {
             ))}
           </div>
         </div>
-        <div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-[var(--color-border)] pt-8 text-[0.8125rem] text-[var(--color-fg-subtle)] sm:flex-row sm:items-center">
+        <div className="mt-12 flex flex-col items-start justify-between gap-4 border-t border-border pt-8 text-[0.8125rem] text-fg-subtle sm:flex-row sm:items-center">
           <p>© {year} swift-rust. Built with Rust + Bun.</p>
           <p className="font-mono">v{siteConfig.version} · MIT</p>
         </div>

package/templates/default/src/components/logo.tsx

@@ -18,8 +18,8 @@ export function Logo({ className = "" }: { className?: string }) {
         loader={({ src }) => src}
         className="h-6 w-6"
       />
-      <span className="text-[0.95rem] font-semibold tracking-tight text-[var(--color-fg)]">
-        swift<span className="text-[var(--color-accent)]">·</span>rust
+      <span className="text-[0.95rem] font-semibold tracking-tight text-fg">
+        swift<span className="text-accent">·</span>rust
       </span>
     </span>
   );

package/templates/default/src/components/nav.tsx

@@ -20,10 +20,15 @@ const GitHubIcon = () => (
 
 export function Nav() {
   return (
-    <header className="sticky top-0 z-40 border-b border-[var(--color-border)] bg-[var(--color-bg)]/80 backdrop-blur-md">
+    <header className="sticky top-0 z-40 border-b border-border bg-bg/80 backdrop-blur-md">
       {/* CSS-only mobile menu toggle: no client JS required (these pages are
           static SSR). The peer checkbox drives the panel below. */}
-      <input type="checkbox" id="site-menu" className="peer sr-only" aria-label="Toggle menu" />
+      <input
+        type="checkbox"
+        id="site-menu"
+        className="peer sr-only"
+        aria-label="Toggle menu"
+      />
 
       <div className="container-page flex h-14 items-center justify-between gap-8">
         <Link href="/" aria-label="Home">
@@ -35,7 +40,7 @@ export function Nav() {
             <Link
               key={item.href}
               href={item.href}
-              className="rounded-md px-3 py-1.5 text-[0.875rem] text-[var(--color-fg-muted)] transition-colors hover:bg-[var(--color-surface-2)] hover:text-[var(--color-fg)]"
+              className="rounded-md px-3 py-1.5 text-[0.875rem] text-fg-muted transition-colors hover:bg-surface-2 hover:text-fg"
             >
               {item.label}
             </Link>
@@ -52,7 +57,10 @@ export function Nav() {
             <GitHubIcon />
             GitHub
           </a>
-          <Link href={siteConfig.docsUrl} className="btn btn-accent btn-sm hidden sm:inline-flex">
+          <Link
+            href={siteConfig.docsUrl}
+            className="btn btn-accent btn-sm hidden sm:inline-flex"
+          >
             Get started
           </Link>
 
@@ -60,9 +68,16 @@ export function Nav() {
           <label
             htmlFor="site-menu"
             aria-label="Toggle navigation menu"
-            className="inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-[var(--color-border)] text-[var(--color-fg)] md:hidden"
+            className="inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border text-fg md:hidden"
           >
-            <svg viewBox="0 0 24 24" className="h-5 w-5 peer-checked:hidden" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+            <svg
+              viewBox="0 0 24 24"
+              className="h-5 w-5 peer-checked:hidden"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              aria-hidden
+            >
               <path d="M4 7h16M4 12h16M4 17h16" strokeLinecap="round" />
             </svg>
           </label>
@@ -70,18 +85,18 @@ export function Nav() {
       </div>
 
       {/* Mobile dropdown panel — shown only when the checkbox is checked. */}
-      <nav className="hidden border-t border-[var(--color-border)] bg-[var(--color-bg)] px-4 py-3 peer-checked:block md:!hidden">
+      <nav className="hidden border-t border-border bg-bg px-4 py-3 peer-checked:block md:hidden!">
         <div className="flex flex-col gap-1">
           {NAV.map((item) => (
             <Link
               key={item.href}
               href={item.href}
-              className="rounded-md px-3 py-2 text-[0.95rem] text-[var(--color-fg-muted)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-fg)]"
+              className="rounded-md px-3 py-2 text-[0.95rem] text-fg-muted hover:bg-surface-2 hover:text-fg"
             >
               {item.label}
             </Link>
           ))}
-          <div className="mt-2 flex gap-2 border-t border-[var(--color-border)] pt-3">
+          <div className="mt-2 flex gap-2 border-t border-border pt-3">
             <a
               href={siteConfig.githubUrl}
               target="_blank"
@@ -91,7 +106,10 @@ export function Nav() {
               <GitHubIcon />
               GitHub
             </a>
-            <Link href={siteConfig.docsUrl} className="btn btn-accent btn-sm flex-1 justify-center">
+            <Link
+              href={siteConfig.docsUrl}
+              className="btn btn-accent btn-sm flex-1 justify-center"
+            >
               Get started
             </Link>
           </div>

package/templates/default/src/components/sidebar.tsx

@@ -21,14 +21,14 @@ const ITEMS = [
 
 export function Sidebar({ pathname = "" }: { pathname?: string }) {
   return (
-    <aside className="sticky top-14 hidden h-[calc(100vh-3.5rem)] w-60 shrink-0 self-start flex-col border-r border-[var(--color-border)] bg-[var(--color-surface)] lg:flex">
-      <div className="flex h-14 items-center border-b border-[var(--color-border)] px-5">
+    <aside className="sticky top-14 hidden h-[calc(100vh-3.5rem)] w-60 shrink-0 self-start flex-col border-r border-border bg-surface lg:flex">
+      <div className="flex h-14 items-center border-b border-border px-5">
         <Logo />
       </div>
       <nav className="flex-1 space-y-8 overflow-y-auto p-5">
         {ITEMS.map((group) => (
           <div key={group.section}>
-            <h3 className="mb-2 px-2 text-[0.7rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+            <h3 className="mb-2 px-2 text-[0.7rem] font-semibold uppercase tracking-wider text-fg-subtle">
               {group.section}
             </h3>
             <ul className="space-y-0.5">
@@ -44,8 +44,8 @@ export function Sidebar({ pathname = "" }: { pathname?: string }) {
                       href={link.href}
                       className={`flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[0.875rem] transition-colors ${
                         active
-                          ? "bg-[var(--color-accent-soft)] font-medium text-[var(--color-accent)]"
-                          : "text-[var(--color-fg-muted)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-fg)]"
+                          ? "bg-accent-soft font-medium text-accent"
+                          : "text-fg-muted hover:bg-surface-2 hover:text-fg"
                       }`}
                     >
                       <Icon className="h-4 w-4" />
@@ -58,11 +58,11 @@ export function Sidebar({ pathname = "" }: { pathname?: string }) {
           </div>
         ))}
       </nav>
-      <div className="border-t border-[var(--color-border)] p-4">
-        <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-2)] p-3">
-          <p className="text-[0.75rem] font-medium text-[var(--color-fg)]">Pro tip</p>
-          <p className="mt-1 text-[0.75rem] leading-relaxed text-[var(--color-fg-muted)]">
-            Press <kbd className="rounded border border-[var(--color-border)] bg-[var(--color-surface)] px-1 font-mono text-[0.6875rem]">⌘K</kbd> for quick search.
+      <div className="border-t border-border p-4">
+        <div className="rounded-lg border border-border bg-surface-2 p-3">
+          <p className="text-[0.75rem] font-medium text-fg">Pro tip</p>
+          <p className="mt-1 text-[0.75rem] leading-relaxed text-fg-muted">
+            Press <kbd className="rounded border border-border bg-surface px-1 font-mono text-[0.6875rem]">⌘K</kbd> for quick search.
           </p>
         </div>
       </div>