create-swift-rust 0.7.0 → 0.8.0

package/templates/default/src/app/fonts/page.tsx

@@ -327,11 +327,11 @@ function ZimulaLadder() {
     <div className="space-y-2.5">
       {ZIMULA_WEIGHTS.map((w) => (
         <div key={`${w.weight}-${w.style}`} className="flex items-baseline gap-4">
-          <span className="w-20 shrink-0 font-mono text-xs text-[var(--color-fg-subtle)]">
+          <span className="w-20 shrink-0 font-mono text-xs text-fg-subtle">
             {w.weight} {w.label}
           </span>
           <span
-            className="truncate text-[var(--color-fg)]"
+            className="truncate text-fg"
             style={{
               fontFamily: ZIMULA_FAMILY(w.style),
               fontWeight: w.weight,
@@ -367,12 +367,12 @@ export default function FontsPage() {
           <span className="pulse-dot h-1.5 w-1.5 rounded-full bg-current" />
           Typography
         </div>
-        <h1 className="text-balance text-5xl font-semibold tracking-tight text-[var(--color-fg)] sm:text-6xl">
+        <h1 className="text-balance text-5xl font-semibold tracking-tight text-fg sm:text-6xl">
           Every font, every weight,
           <br />
           live in your browser.
         </h1>
-        <p className="mx-auto mt-6 max-w-2xl text-pretty text-lg leading-relaxed text-[var(--color-fg-muted)]">
+        <p className="mx-auto mt-6 max-w-2xl text-pretty text-lg leading-relaxed text-fg-muted">
           2,071 Google fonts and 8 local font families, all available as on-demand imports. Pick a
           font, see it in action, and copy the import statement into your project.
         </p>
@@ -385,10 +385,10 @@ export default function FontsPage() {
           ].map((s) => (
             <div
               key={s.l}
-              className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-4"
+              className="rounded-lg border border-border bg-surface p-4"
             >
-              <dt className="font-mono text-2xl font-semibold text-[var(--color-fg)]">{s.v}</dt>
-              <dd className="mt-1 text-xs uppercase tracking-wider text-[var(--color-fg-subtle)]">
+              <dt className="font-mono text-2xl font-semibold text-fg">{s.v}</dt>
+              <dd className="mt-1 text-xs uppercase tracking-wider text-fg-subtle">
                 {s.l}
               </dd>
             </div>
@@ -398,10 +398,10 @@ export default function FontsPage() {
 
       <section className="mt-20">
         <div className="mb-6 flex items-baseline justify-between">
-          <h2 className="text-2xl font-semibold tracking-tight text-[var(--color-fg)]">
+          <h2 className="text-2xl font-semibold tracking-tight text-fg">
             Live preview
           </h2>
-          <span className="text-sm text-[var(--color-fg-muted)]">
+          <span className="text-sm text-fg-muted">
             Type a name to load any of the 2,071 Google fonts.
           </span>
         </div>
@@ -410,20 +410,20 @@ export default function FontsPage() {
 
       <section className="mt-24">
         <div className="mb-2 flex items-baseline justify-between">
-          <h2 className="text-2xl font-semibold tracking-tight text-[var(--color-fg)]">
+          <h2 className="text-2xl font-semibold tracking-tight text-fg">
             Featured Google fonts
           </h2>
-          <span className="text-sm text-[var(--color-fg-muted)]">
+          <span className="text-sm text-fg-muted">
             25 of 2,071 — every one ships the same way.
           </span>
         </div>
-        <p className="mb-8 max-w-2xl text-[var(--color-fg-muted)]">
+        <p className="mb-8 max-w-2xl text-fg-muted">
           These are the fonts most teams reach for. Use the search above to preview any of the
           remaining 2,046.
         </p>
         {FEATURED_GROUPS.map((group) => (
           <div key={group.name} className="mb-10">
-            <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+            <h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-fg-subtle">
               {group.name}
             </h3>
             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
@@ -432,16 +432,16 @@ export default function FontsPage() {
                 return (
                   <div
                     key={f.name}
-                    className="group flex flex-col gap-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-5 transition-colors hover:border-[var(--color-border-strong)]"
+                    className="group flex flex-col gap-2 rounded-lg border border-border bg-surface p-5 transition-colors hover:border-border-strong"
                     style={font.style}
                   >
                     <div className="flex items-baseline justify-between gap-2">
-                      <h4 className="text-sm font-medium text-[var(--color-fg)]">{f.name}</h4>
-                      <span className="text-xs text-[var(--color-fg-subtle)]">{f.blurb}</span>
+                      <h4 className="text-sm font-medium text-fg">{f.name}</h4>
+                      <span className="text-xs text-fg-subtle">{f.blurb}</span>
                     </div>
-                    <div className="truncate text-2xl text-[var(--color-fg)]">Beautiful type</div>
+                    <div className="truncate text-2xl text-fg">Beautiful type</div>
                     <code
-                      className="mt-auto truncate font-mono text-[11px] text-[var(--color-fg-muted)]"
+                      className="mt-auto truncate font-mono text-[11px] text-fg-muted"
                       style={{ fontFamily: "ui-monospace, monospace" }}
                     >
                       import {"{ "}
@@ -458,14 +458,14 @@ export default function FontsPage() {
 
       <section className="mt-24">
         <div className="mb-2 flex items-baseline justify-between">
-          <h2 className="text-2xl font-semibold tracking-tight text-[var(--color-fg)]">
+          <h2 className="text-2xl font-semibold tracking-tight text-fg">
             Local fonts
           </h2>
-          <span className="text-sm text-[var(--color-fg-muted)]">
+          <span className="text-sm text-fg-muted">
             8 families bundled in the framework.
           </span>
         </div>
-        <p className="mb-8 max-w-2xl text-[var(--color-fg-muted)]">
+        <p className="mb-8 max-w-2xl text-fg-muted">
           Bundled in <code className="font-mono text-xs">packages/font/src/local/</code> and served
           from <code className="font-mono text-xs">/_swift-rust/fonts/</code>. Use them when you
           need exact control over weights or want to avoid a network round-trip.
@@ -478,22 +478,22 @@ export default function FontsPage() {
             return (
               <div
                 key={f.name}
-                className="flex flex-col gap-2 rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-6"
+                className="flex flex-col gap-2 rounded-lg border border-border bg-surface p-6"
                 style={font.style}
               >
                 <div className="flex items-baseline justify-between gap-2">
-                  <h4 className="text-sm font-medium text-[var(--color-fg)]">{f.name}</h4>
+                  <h4 className="text-sm font-medium text-fg">{f.name}</h4>
                   <span
-                    className="font-mono text-[11px] text-[var(--color-fg-subtle)]"
+                    className="font-mono text-[11px] text-fg-subtle"
                     style={{ fontFamily: "ui-monospace, monospace" }}
                   >
                     {f.weights}
                   </span>
                 </div>
-                <div className="text-3xl text-[var(--color-fg)]">Aa Bb Cc 123</div>
-                <p className="text-xs text-[var(--color-fg-muted)]">{f.blurb}</p>
+                <div className="text-3xl text-fg">Aa Bb Cc 123</div>
+                <p className="text-xs text-fg-muted">{f.blurb}</p>
                 <code
-                  className="mt-auto truncate font-mono text-[11px] text-[var(--color-fg-muted)]"
+                  className="mt-auto truncate font-mono text-[11px] text-fg-muted"
                   style={{ fontFamily: "ui-monospace, monospace" }}
                 >
                   import {"{ "}
@@ -505,28 +505,28 @@ export default function FontsPage() {
           })}
         </div>
 
-        <div className="rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] p-6">
+        <div className="rounded-lg border border-border bg-surface p-6">
           <div className="mb-4 flex items-baseline justify-between gap-2">
             <div>
-              <h4 className="text-sm font-medium text-[var(--color-fg)]">Zimula</h4>
-              <p className="mt-0.5 text-xs text-[var(--color-fg-muted)]">
+              <h4 className="text-sm font-medium text-fg">Zimula</h4>
+              <p className="mt-0.5 text-xs text-fg-muted">
                 Full weight ladder 100–900 in three styles (normal, ink-trap, ink-spot)
               </p>
             </div>
-            <span className="font-mono text-[11px] text-[var(--color-fg-subtle)]">27 weights</span>
+            <span className="font-mono text-[11px] text-fg-subtle">27 weights</span>
           </div>
           <ZimulaLadder />
-          <code className="mt-6 block truncate font-mono text-[11px] text-[var(--color-fg-muted)]">
+          <code className="mt-6 block truncate font-mono text-[11px] text-fg-muted">
             import {"{ "}Zimula{" }"} from &quot;swift-rust/font&quot;
           </code>
         </div>
       </section>
 
       <section className="mt-24">
-        <h2 className="mb-2 text-2xl font-semibold tracking-tight text-[var(--color-fg)]">
+        <h2 className="mb-2 text-2xl font-semibold tracking-tight text-fg">
           How to use
         </h2>
-        <p className="mb-8 max-w-2xl text-[var(--color-fg-muted)]">
+        <p className="mb-8 max-w-2xl text-fg-muted">
           Three patterns cover almost every case. Drop them into your{" "}
           <code className="font-mono text-xs">app/layout.tsx</code> and you&apos;re shipping.
         </p>
@@ -597,12 +597,12 @@ function CodeBlock({
   code: string;
 }) {
   return (
-    <div className="overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)]">
-      <div className="flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-surface-2)] px-4 py-2.5">
-        <span className="font-mono text-xs text-[var(--color-fg-muted)]">{filename}</span>
-        <span className="text-xs text-[var(--color-fg-subtle)]">{caption}</span>
+    <div className="overflow-hidden rounded-lg border border-border bg-surface">
+      <div className="flex items-center justify-between border-b border-border bg-surface-2 px-4 py-2.5">
+        <span className="font-mono text-xs text-fg-muted">{filename}</span>
+        <span className="text-xs text-fg-subtle">{caption}</span>
       </div>
-      <pre className="overflow-x-auto bg-[var(--color-bg)] p-5 font-mono text-xs leading-relaxed text-[var(--color-fg)]">
+      <pre className="overflow-x-auto bg-bg p-5 font-mono text-xs leading-relaxed text-fg">
         <code>{code}</code>
       </pre>
     </div>

package/templates/default/src/app/images/page.tsx

@@ -5,33 +5,71 @@ import { BLUR } from "@/lib/blur";
 export const metadata: Metadata = { title: "Images" };
 
 const IMAGES = [
-  { src: "/samples/axelborg-towers-modern-architecture.jpg", alt: "Modern architecture towers", w: 3456, h: 2635, label: "4:3" },
-  { src: "/samples/full-shot-woman-taking-selfie.jpg", alt: "Woman taking a selfie", w: 5327, h: 7990, label: "2:3" },
-  { src: "/samples/metaverse-concept-collage-design.jpg", alt: "Metaverse concept collage", w: 6000, h: 4000, label: "3:2" },
-  { src: "/samples/happy-black-parents-with-kids-making-video-call-smart-phone-home.jpg", alt: "Family on a video call at home", w: 6000, h: 4000, label: "3:2" },
-  { src: "/samples/brown-high-skyscrapers.jpg", alt: "Tall brown skyscrapers", w: 4000, h: 5000, label: "4:5" },
-  { src: "/samples/close-up-portrait-gorgeous-young-woman.jpg", alt: "Close-up portrait of a young woman", w: 8494, h: 5663, label: "3:2" },
+  {
+    src: "/samples/axelborg-towers-modern-architecture.jpg",
+    alt: "Modern architecture towers",
+    w: 3456,
+    h: 2635,
+    label: "4:3",
+  },
+  {
+    src: "/samples/full-shot-woman-taking-selfie.jpg",
+    alt: "Woman taking a selfie",
+    w: 5327,
+    h: 7990,
+    label: "2:3",
+  },
+  {
+    src: "/samples/metaverse-concept-collage-design.jpg",
+    alt: "Metaverse concept collage",
+    w: 6000,
+    h: 4000,
+    label: "3:2",
+  },
+  {
+    src: "/samples/happy-black-parents-with-kids-making-video-call-smart-phone-home.jpg",
+    alt: "Family on a video call at home",
+    w: 6000,
+    h: 4000,
+    label: "3:2",
+  },
+  {
+    src: "/samples/brown-high-skyscrapers.jpg",
+    alt: "Tall brown skyscrapers",
+    w: 4000,
+    h: 5000,
+    label: "4:5",
+  },
+  {
+    src: "/samples/close-up-portrait-gorgeous-young-woman.jpg",
+    alt: "Close-up portrait of a young woman",
+    w: 8494,
+    h: 5663,
+    label: "3:2",
+  },
 ];
 
 export default function ImagesPage() {
   return (
     <div className="container-page py-16 sm:py-20">
-      <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+      <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-fg-subtle">
         Showcase
       </p>
-      <h1 className="mt-2 text-4xl font-semibold tracking-tight sm:text-5xl">Images</h1>
-      <p className="mt-4 max-w-2xl text-[var(--color-fg-muted)]">
-        The Image component handles sizing, format negotiation, and lazy loading. These are local
-        sample photos — replace with your own.
+      <h1 className="mt-2 text-4xl font-semibold tracking-tight sm:text-5xl">
+        Images
+      </h1>
+      <p className="mt-4 max-w-2xl text-fg-muted">
+        The Image component handles sizing, format negotiation, and lazy
+        loading. These are local sample photos — replace with your own.
       </p>
 
       <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
         {IMAGES.map((img) => (
           <figure
             key={img.src}
-            className="group overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)]"
+            className="group overflow-hidden rounded-2xl border border-border bg-surface"
           >
-            <div className="relative aspect-[4/3] overflow-hidden bg-[var(--color-surface-2)]">
+            <div className="relative aspect-4/3 overflow-hidden bg-surface-2">
               <Image
                 src={img.src}
                 alt={img.alt}
@@ -42,8 +80,8 @@ export default function ImagesPage() {
                 className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
               />
             </div>
-            <figcaption className="flex items-center justify-between border-t border-[var(--color-border)] px-4 py-3 text-[0.8125rem]">
-              <span className="font-mono text-[var(--color-fg-muted)]">
+            <figcaption className="flex items-center justify-between border-t border-border px-4 py-3 text-[0.8125rem]">
+              <span className="font-mono text-fg-muted">
                 {img.src.split("/").pop()}
               </span>
               <span className="badge">{img.label}</span>

package/templates/default/src/app/layout.tsx

@@ -34,7 +34,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         ["--font-mono" as string]: "'Geist Mono', ui-monospace, monospace",
       }}
     >
-      <body className="min-h-screen bg-[var(--color-bg)] font-sans text-[var(--color-fg)] antialiased">
+      <body className="min-h-screen bg-bg font-sans text-fg antialiased">
         <Nav />
         <main className="min-h-[calc(100vh-3.5rem)]">{children}</main>
         <Footer />

package/templates/default/src/app/loading.tsx

@@ -2,11 +2,11 @@ export default function GlobalLoading() {
   return (
     <div className="container-page py-20">
       <div className="mx-auto max-w-md space-y-4">
-        <div className="h-3 w-24 animate-pulse rounded bg-[var(--color-surface-2)]" />
-        <div className="h-9 w-72 animate-pulse rounded bg-[var(--color-surface-2)]" />
-        <div className="h-4 w-96 animate-pulse rounded bg-[var(--color-surface-2)]" />
-        <div className="h-4 w-80 animate-pulse rounded bg-[var(--color-surface-2)]" />
-        <div className="mt-8 h-40 w-full animate-pulse rounded-2xl bg-[var(--color-surface-2)]" />
+        <div className="h-3 w-24 animate-pulse rounded bg-surface-2" />
+        <div className="h-9 w-72 animate-pulse rounded bg-surface-2" />
+        <div className="h-4 w-96 animate-pulse rounded bg-surface-2" />
+        <div className="h-4 w-80 animate-pulse rounded bg-surface-2" />
+        <div className="mt-8 h-40 w-full animate-pulse rounded-2xl bg-surface-2" />
       </div>
     </div>
   );

package/templates/default/src/app/not-found.tsx

@@ -4,11 +4,11 @@ export default function GlobalNotFound() {
   return (
     <div className="container-page py-24 sm:py-32">
       <div className="mx-auto max-w-xl text-center">
-        <p className="font-mono text-[0.875rem] font-medium text-[var(--color-accent)]">404</p>
+        <p className="font-mono text-[0.875rem] font-medium text-accent">404</p>
         <h1 className="mt-3 text-balance text-5xl font-semibold tracking-tight sm:text-6xl">
           Page not found.
         </h1>
-        <p className="mt-5 text-pretty text-lg leading-relaxed text-[var(--color-fg-muted)]">
+        <p className="mt-5 text-pretty text-lg leading-relaxed text-fg-muted">
           The page you were looking for has moved, was renamed, or never existed.
         </p>
         <div className="mt-8 flex justify-center gap-2">