create-vexcms 0.0.19 → 0.1.0-alpha.2

package/templates/marketing-site/src/vexcms/blocks/Roadmap/index.tsx

@@ -1,10 +1,9 @@
 "use client"
 
-import type { BlockComponentProps } from "@vexcms/ui"
+import type { BlockComponentProps } from "@vexcms/react"
 
 import { Check, Clock, Compass } from "lucide-react"
-
-import { cn } from "~/lib/utils"
+import { cn } from "@vexcms/react"
 
 export { roadmapBlock } from "./config"
 
@@ -12,37 +11,26 @@ const statusConfig = {
   shipped: {
     label: "Shipped",
     icon: Check,
-    badgeClass:
-      "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+    badgeClass: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
   },
   "coming-soon": {
     label: "Coming Soon",
     icon: Clock,
-    badgeClass:
-      "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+    badgeClass: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
   },
   planned: {
     label: "Planned",
     icon: Compass,
-    badgeClass:
-      "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
+    badgeClass: "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
   },
 } as const
 
-type RoadmapItem = {
-  feature: string
-  description?: string
-  status: "shipped" | "coming-soon" | "planned"
-}
-
+type RoadmapItem = { feature: string; description?: string; status: "shipped" | "coming-soon" | "planned" }
 type StatusKey = keyof typeof statusConfig
 
 const statusOrder: StatusKey[] = ["shipped", "coming-soon", "planned"]
 
-export default function RoadmapBlock({
-  block,
-  blockStyles,
-}: BlockComponentProps) {
+export default function RoadmapBlock({ block }: BlockComponentProps) {
   const { heading, subheading, items } = block as unknown as {
     heading: string
     subheading?: string
@@ -53,45 +41,31 @@ export default function RoadmapBlock({
     .map((status) => ({
       status,
       config: statusConfig[status],
-      items: (items ?? []).filter(
-        (item) => item.status === status && item.status in statusConfig
-      ),
+      items: (items ?? []).filter((item) => item.status === status && item.status in statusConfig),
     }))
     .filter((group) => group.items.length > 0)
 
   return (
-    <section className={cn("py-16 md:py-32", blockStyles)}>
+    <section className={cn("py-16 md:py-32")}>
       <div className="mx-auto max-w-5xl px-6">
         <div className="text-center">
-          <h2 className="text-4xl font-semibold text-balance lg:text-5xl">
-            {heading}
-          </h2>
-          {subheading && (
-            <p className="text-muted-foreground mt-4 text-balance">
-              {subheading}
-            </p>
-          )}
+          <h2 className="text-4xl font-semibold text-balance lg:text-5xl">{heading}</h2>
+          {subheading && <p className="text-muted-foreground mt-4 text-balance">{subheading}</p>}
         </div>
 
         {grouped.map((group, groupIndex) => {
           const StatusIcon = group.config.icon
-
           return (
             <div key={group.status} className={groupIndex === 0 ? "mt-16" : "mt-12"}>
               <div className="flex items-center gap-2">
                 <StatusIcon className="size-5" />
                 <h3 className="text-lg font-semibold">{group.config.label}</h3>
               </div>
-
               <div className="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
                 {group.items.map((item, itemIndex) => {
                   const BadgeIcon = group.config.icon
-
                   return (
-                    <div
-                      key={itemIndex}
-                      className="bg-card rounded-xl border p-5"
-                    >
+                    <div key={itemIndex} className="bg-card rounded-xl border p-5">
                       <div className="flex items-center justify-between gap-4">
                         <span className="font-medium">{item.feature}</span>
                         <span
@@ -104,11 +78,7 @@ export default function RoadmapBlock({
                           {group.config.label}
                         </span>
                       </div>
-                      {item.description && (
-                        <p className="text-muted-foreground mt-2 text-sm">
-                          {item.description}
-                        </p>
-                      )}
+                      {item.description && <p className="text-muted-foreground mt-2 text-sm">{item.description}</p>}
                     </div>
                   )
                 })}

package/templates/marketing-site/src/vexcms/blocks/config.ts

@@ -1,40 +1,25 @@
-// Block configs only — no React/motion dependencies
-// Safe to import from collections and server-side code
+// Block configs only — no React/motion dependencies. Safe to import from
+// collections, vex.config.ts, and convex/seed.ts.
 import { heroBlock } from "./Hero/config"
 import { featuresBlock } from "./Features/config"
+import { howItWorksBlock } from "./HowItWorks/config"
+import { roadmapBlock } from "./Roadmap/config"
 import { ctaBlock } from "./CTA/config"
 import { faqBlock } from "./FAQ/config"
 import { headerBlock } from "./Header/config"
 import { footerBlock } from "./Footer/config"
-import { howItWorksBlock } from "./HowItWorks/config"
-import { roadmapBlock } from "./Roadmap/config"
 
-/** Page content block definitions */
-export const pageBlocks = [
-  heroBlock,
-  featuresBlock,
-  howItWorksBlock,
-  roadmapBlock,
-  ctaBlock,
-  faqBlock,
-]
-
-/** Header block definitions */
+export const pageBlocks = [heroBlock, featuresBlock, howItWorksBlock, roadmapBlock, ctaBlock, faqBlock]
 export const headerBlocks = [headerBlock]
-
-/** Footer block definitions */
 export const footerBlocks = [footerBlock]
 
-/** All block definitions combined */
-export const allBlocks = [...pageBlocks, ...headerBlocks, ...footerBlocks]
-
 export {
   heroBlock,
   featuresBlock,
+  howItWorksBlock,
+  roadmapBlock,
   ctaBlock,
   faqBlock,
   headerBlock,
   footerBlock,
-  howItWorksBlock,
-  roadmapBlock,
 }

package/templates/marketing-site/src/vexcms/blocks/constants.ts

@@ -1,9 +1,8 @@
-// Block slugs
 export const BLOCK_SLUG_HERO = "hero" as const
 export const BLOCK_SLUG_FEATURES = "features" as const
+export const BLOCK_SLUG_HOW_IT_WORKS = "how_it_works" as const
+export const BLOCK_SLUG_ROADMAP = "roadmap" as const
 export const BLOCK_SLUG_CTA = "cta" as const
 export const BLOCK_SLUG_FAQ = "faq" as const
 export const BLOCK_SLUG_HEADER = "header" as const
 export const BLOCK_SLUG_FOOTER = "footer" as const
-export const BLOCK_SLUG_HOW_IT_WORKS = "how_it_works" as const
-export const BLOCK_SLUG_ROADMAP = "roadmap" as const

package/templates/marketing-site/src/vexcms/blocks/index.ts

@@ -1,4 +1,4 @@
-import type { BlockComponentProps } from "@vexcms/ui"
+import type { BlockComponentProps } from "@vexcms/react"
 import type { ComponentType } from "react"
 
 import {
@@ -20,11 +20,13 @@ import HeroBlock from "./Hero"
 import HowItWorksBlock from "./HowItWorks"
 import RoadmapBlock from "./Roadmap"
 
-/** Block component map for use with RenderBlocks */
-export const blockComponents: Record<
-  string,
-  ComponentType<BlockComponentProps>
-> = {
+/**
+ * Block component map for `RenderBlocks` (Contract 1). Loosely typed as
+ * `Record<string, …>` rather than a `TBlock`-keyed `BlockComponents<…>` —
+ * the real per-slug `PageBlock` union only exists after `vex generate` runs
+ * against this config, so this file can't reference it.
+ */
+export const blockComponents: Record<string, ComponentType<BlockComponentProps>> = {
   [BLOCK_SLUG_CTA]: CTABlock,
   [BLOCK_SLUG_FAQ]: FAQBlock,
   [BLOCK_SLUG_FEATURES]: FeaturesBlock,
@@ -35,5 +37,4 @@ export const blockComponents: Record<
   [BLOCK_SLUG_ROADMAP]: RoadmapBlock,
 }
 
-// Re-export configs for convenience in client code
-export { allBlocks, footerBlocks, headerBlocks, pageBlocks } from "./config"
+export { footerBlocks, headerBlocks, pageBlocks } from "./config"

package/templates/marketing-site/src/vexcms/collections/footers.ts

@@ -6,13 +6,13 @@ import { footerBlocks } from "~/vexcms/blocks/config"
 export const footers = defineCollection({
   slug: TABLE_SLUG_FOOTERS,
   admin: {
-    group: "Site Builder",
     useAsTitle: "name",
   },
   fields: {
     name: text({
       label: "Name",
       required: true,
+      index: "by_name",
     }),
     content: blocks({
       blocks: footerBlocks,

package/templates/marketing-site/src/vexcms/collections/headers.ts

@@ -6,13 +6,13 @@ import { headerBlocks } from "~/vexcms/blocks/config"
 export const headers = defineCollection({
   slug: TABLE_SLUG_HEADERS,
   admin: {
-    group: "Site Builder",
     useAsTitle: "name",
   },
   fields: {
     name: text({
       label: "Name",
       required: true,
+      index: "by_name",
     }),
     content: blocks({
       blocks: headerBlocks,

package/templates/marketing-site/src/vexcms/collections/index.ts

@@ -1,6 +1,7 @@
 export * from "./footers"
 export * from "./headers"
-export * from "./media"
+export * from "./images"
 export * from "./pages"
+export * from "./themeColors"
 export * from "./themes"
 export * from "./users"

package/templates/marketing-site/src/vexcms/collections/pages.ts

@@ -1,16 +1,12 @@
-import { blocks, defineCollection, imageUrl, text } from "@vexcms/core"
+import { blocks, defineCollection, text, upload } from "@vexcms/core"
 
-import { TABLE_SLUG_PAGES } from "~/db/constants"
+import { TABLE_SLUG_IMAGES, TABLE_SLUG_PAGES } from "~/db/constants"
 import { pageBlocks } from "~/vexcms/blocks/config"
 
 export const pages = defineCollection({
   slug: TABLE_SLUG_PAGES,
   admin: {
-    defaultColumns: ["title", "slug", "vex_status", "_id"],
-    group: "Site Builder",
-    livePreview: {
-      url: (doc) => `/preview/${doc.slug ?? doc._id}`,
-    },
+    table: { defaultColumns: ["title", "slug", "_id"] },
     useAsTitle: "title",
   },
   fields: {
@@ -19,48 +15,43 @@ export const pages = defineCollection({
       required: true,
     }),
     slug: text({
-      admin: {
-        description: "URL-friendly page path",
-      },
+      description: "URL-friendly page path",
       index: "by_slug",
       label: "Slug",
       required: true,
     }),
-    content: blocks({
+    blocks: blocks({
       blocks: pageBlocks,
+      interfaceName: "PageBlock",
       label: "Content",
       labels: {
         singular: "Block",
         plural: "Blocks",
       },
+      min: 1,
     }),
     metaTitle: text({
       label: "Meta Title",
+      description: "Custom <title> tag. Falls back to page title if empty.",
       admin: {
-        description: "Custom <title> tag. Falls back to page title if empty.",
         position: "sidebar",
       },
     }),
     metaDescription: text({
       label: "Meta Description",
+      description: "Custom meta description for search results.",
       admin: {
-        description: "Custom meta description for search results.",
         position: "sidebar",
       },
     }),
-    ogImage: imageUrl({
+    ogImage: upload({
+      to: TABLE_SLUG_IMAGES,
       label: "OG Image",
-      admin: {
-        description: "Custom Open Graph image URL for social sharing.",
-        position: "sidebar",
-      },
+      admin: { position: "sidebar" },
     }),
   },
   labels: {
     plural: "Pages",
     singular: "Page",
   },
-  versions: {
-    drafts: true,
-  },
 })

package/templates/marketing-site/src/vexcms/collections/themeColors.ts

@@ -0,0 +1,118 @@
+import {
+  color,
+  THEME_COLOR_TOKENS,
+  type ColorField,
+  type ThemeColorTokenKey,
+} from "@vexcms/core";
+
+/**
+ * Stark × Ember — this site's house palette, lifted verbatim from
+ * `globals.css`. A freshly created theme starts from these values, so "new
+ * theme" means "fork the current look", not "32 empty pickers".
+ */
+const EMBER: Record<"dark" | "light", Record<ThemeColorTokenKey, string>> = {
+  light: {
+    background: "oklch(96.1% 0 0)",
+    foreground: "oklch(13.7% 0 0)",
+    card: "oklch(100% 0 0)",
+    cardForeground: "oklch(13.7% 0 0)",
+    popover: "oklch(100% 0 0)",
+    popoverForeground: "oklch(13.7% 0 0)",
+    primary: "oklch(60.5% 0.175 42)",
+    primaryForeground: "oklch(100% 0 0)",
+    secondary: "oklch(98% 0 0)",
+    secondaryForeground: "oklch(13.7% 0 0)",
+    muted: "oklch(98% 0 0)",
+    mutedForeground: "oklch(50.5% 0 0)",
+    accent: "oklch(96% 0.025 42)",
+    accentForeground: "oklch(52% 0.180 40)",
+    destructive: "oklch(57.7% 0.198 27)",
+    destructiveForeground: "oklch(98% 0 0)",
+    border: "oklch(85% 0 0)",
+    input: "oklch(54.6% 0 0)",
+    ring: "oklch(60.5% 0.175 42)",
+    chart1: "oklch(60.5% 0.175 42)",
+    chart2: "oklch(45% 0 0)",
+    chart3: "oklch(72% 0.100 60)",
+    chart4: "oklch(60% 0.040 30)",
+    chart5: "oklch(78% 0 0)",
+    sidebar: "oklch(98% 0 0)",
+    sidebarForeground: "oklch(13.7% 0 0)",
+    sidebarPrimary: "oklch(60.5% 0.175 42)",
+    sidebarPrimaryForeground: "oklch(100% 0 0)",
+    sidebarAccent: "oklch(96.1% 0 0)",
+    sidebarAccentForeground: "oklch(13.7% 0 0)",
+    sidebarBorder: "oklch(85% 0 0)",
+    sidebarRing: "oklch(60.5% 0.175 42)",
+  },
+  dark: {
+    background: "oklch(13.7% 0 0)",
+    foreground: "oklch(95% 0 0)",
+    card: "oklch(17.4% 0 0)",
+    cardForeground: "oklch(95% 0 0)",
+    popover: "oklch(17.4% 0 0)",
+    popoverForeground: "oklch(95% 0 0)",
+    primary: "oklch(72% 0.175 50)",
+    primaryForeground: "oklch(13.7% 0 0)",
+    secondary: "oklch(20% 0 0)",
+    secondaryForeground: "oklch(95% 0 0)",
+    muted: "oklch(20% 0 0)",
+    mutedForeground: "oklch(70% 0 0)",
+    accent: "oklch(72% 0.175 50 / 0.12)",
+    accentForeground: "oklch(72% 0.175 50)",
+    destructive: "oklch(63% 0.210 27)",
+    destructiveForeground: "oklch(95% 0 0)",
+    border: "oklch(25% 0 0)",
+    input: "oklch(40% 0 0)",
+    ring: "oklch(72% 0.175 50)",
+    chart1: "oklch(72% 0.175 50)",
+    chart2: "oklch(78% 0 0)",
+    chart3: "oklch(78% 0.120 65)",
+    chart4: "oklch(60% 0.060 30)",
+    chart5: "oklch(45% 0 0)",
+    sidebar: "oklch(7% 0 0)",
+    sidebarForeground: "oklch(95% 0 0)",
+    sidebarPrimary: "oklch(72% 0.175 50)",
+    sidebarPrimaryForeground: "oklch(13.7% 0 0)",
+    sidebarAccent: "oklch(20% 0 0)",
+    sidebarAccentForeground: "oklch(95% 0 0)",
+    sidebarBorder: "oklch(25% 0 0)",
+    sidebarRing: "oklch(72% 0.175 50)",
+  },
+};
+
+/**
+ * Derives a human label from a token key: `"cardForeground"` → `"Card
+ * Foreground"`, `"chart1"` → `"Chart 1"`.
+ *
+ * @param props - Input props.
+ * @param props.key - The camelCase token key.
+ * @returns The admin form label.
+ */
+function tokenLabel(props: { key: string }): string {
+  const spaced = props.key.replace(/([A-Z])/g, " $1").replace(/(\d+)/g, " $1");
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
+/**
+ * The shadcn design-token set as `color()` fields for one colour scheme.
+ *
+ * One field per `THEME_COLOR_TOKENS` entry, keyed camelCase, pinned to
+ * `format: "oklch"` — the notation `globals.css` declares its tokens in, so
+ * stored values interpolate into custom properties with no conversion.
+ * Defaults come from the Stark × Ember palette for the given mode.
+ *
+ * @param mode - Which scheme's defaults to apply.
+ * @returns One resolved `color()` field per shadcn token.
+ */
+export function themeColors(mode: "dark" | "light"): Record<ThemeColorTokenKey, ColorField> {
+  const fields = {} as Record<ThemeColorTokenKey, ColorField>;
+  for (const key of Object.keys(THEME_COLOR_TOKENS) as ThemeColorTokenKey[]) {
+    fields[key] = color({
+      format: "oklch",
+      label: tokenLabel({ key }),
+      defaultValue: EMBER[mode][key],
+    });
+  }
+  return fields;
+}

package/templates/marketing-site/src/vexcms/collections/themes.ts

@@ -1,130 +1,48 @@
-import { color, defineCollection, tabs, text, ui } from "@vexcms/core"
+import { defineCollection, group, text } from "@vexcms/core";
 
-import ThemeImportField from "~/components/admin/ThemeImportField"
-import { TABLE_SLUG_THEMES } from "~/db/constants"
+import { TABLE_SLUG_THEMES } from "~/db/constants";
 
-/**
- * Helper to create a set of shadcn/Tailwind color fields for a theme mode.
- */
-function themeColorFields() {
-  return {
-    background: color({ label: "Background", defaultValue: "#ffffff" }),
-    foreground: color({ label: "Foreground", defaultValue: "#0a0a0a" }),
-    card: color({ label: "Card", defaultValue: "#ffffff" }),
-    cardForeground: color({ label: "Card Foreground", defaultValue: "#0a0a0a" }),
-    popover: color({ label: "Popover", defaultValue: "#ffffff" }),
-    popoverForeground: color({ label: "Popover Foreground", defaultValue: "#0a0a0a" }),
-    primary: color({ label: "Primary", defaultValue: "#171717" }),
-    primaryForeground: color({ label: "Primary Foreground", defaultValue: "#fafafa" }),
-    secondary: color({ label: "Secondary", defaultValue: "#f5f5f5" }),
-    secondaryForeground: color({ label: "Secondary Foreground", defaultValue: "#171717" }),
-    muted: color({ label: "Muted", defaultValue: "#f5f5f5" }),
-    mutedForeground: color({ label: "Muted Foreground", defaultValue: "#737373" }),
-    accent: color({ label: "Accent", defaultValue: "#f5f5f5" }),
-    accentForeground: color({ label: "Accent Foreground", defaultValue: "#171717" }),
-    destructive: color({ label: "Destructive", defaultValue: "#ef4444" }),
-    destructiveForeground: color({ label: "Destructive Foreground", defaultValue: "#fafafa" }),
-    border: color({ label: "Border", defaultValue: "#e5e5e5" }),
-    input: color({ label: "Input", defaultValue: "#e5e5e5" }),
-    ring: color({ label: "Ring", defaultValue: "#0a0a0a" }),
-    chart1: color({ label: "Chart 1", defaultValue: "#e76e50" }),
-    chart2: color({ label: "Chart 2", defaultValue: "#2a9d90" }),
-    chart3: color({ label: "Chart 3", defaultValue: "#264653" }),
-    chart4: color({ label: "Chart 4", defaultValue: "#e8c468" }),
-    chart5: color({ label: "Chart 5", defaultValue: "#f4a261" }),
-    sidebar: color({ label: "Sidebar", defaultValue: "#fafafa" }),
-    sidebarForeground: color({ label: "Sidebar Foreground", defaultValue: "#0a0a0a" }),
-    sidebarPrimary: color({ label: "Sidebar Primary", defaultValue: "#171717" }),
-    sidebarPrimaryForeground: color({ label: "Sidebar Primary FG", defaultValue: "#fafafa" }),
-    sidebarAccent: color({ label: "Sidebar Accent", defaultValue: "#f5f5f5" }),
-    sidebarAccentForeground: color({ label: "Sidebar Accent FG", defaultValue: "#171717" }),
-    sidebarBorder: color({ label: "Sidebar Border", defaultValue: "#e5e5e5" }),
-    sidebarRing: color({ label: "Sidebar Ring", defaultValue: "#0a0a0a" }),
-  } as const
-}
+import { themeColors } from "./themeColors";
 
 export const themes = defineCollection({
   slug: TABLE_SLUG_THEMES,
+  interfaceName: "Theme",
+  labels: {
+    singular: "Theme",
+    plural: "Themes",
+  },
   admin: {
-    defaultColumns: ["name", "_id", "fontFamily"],
-    group: "Site Builder",
     useAsTitle: "name",
-    livePreview: {
-      url: "/preview/home",
-    },
-  },
-  versions: {
-    drafts: true,
+    icon: "Palette",
   },
   fields: {
     name: text({
       label: "Theme Name",
       required: true,
+      index: "by_name",
+      description:
+        "Internal identifier for this theme. Used for idempotent lookups and admin display.",
     }),
-    importTheme: ui({
-      admin: {
-        components: {
-          Field: ThemeImportField,
-        },
-      },
-    }),
-    colors: tabs({
-      label: "Theme Colors",
-      tabs: [
-        {
-          label: "Light",
-          slug: "light",
-          fields: themeColorFields(),
-        },
-        {
-          label: "Dark",
-          slug: "dark",
-          fields: {
-            ...themeColorFields(),
-            // Override dark mode defaults
-            background: color({ label: "Background", defaultValue: "#0a0a0a" }),
-            foreground: color({ label: "Foreground", defaultValue: "#fafafa" }),
-            card: color({ label: "Card", defaultValue: "#0a0a0a" }),
-            cardForeground: color({ label: "Card Foreground", defaultValue: "#fafafa" }),
-            popover: color({ label: "Popover", defaultValue: "#0a0a0a" }),
-            popoverForeground: color({ label: "Popover Foreground", defaultValue: "#fafafa" }),
-            primary: color({ label: "Primary", defaultValue: "#fafafa" }),
-            primaryForeground: color({ label: "Primary Foreground", defaultValue: "#171717" }),
-            secondary: color({ label: "Secondary", defaultValue: "#262626" }),
-            secondaryForeground: color({ label: "Secondary Foreground", defaultValue: "#fafafa" }),
-            muted: color({ label: "Muted", defaultValue: "#262626" }),
-            mutedForeground: color({ label: "Muted Foreground", defaultValue: "#a3a3a3" }),
-            accent: color({ label: "Accent", defaultValue: "#262626" }),
-            accentForeground: color({ label: "Accent Foreground", defaultValue: "#fafafa" }),
-            border: color({ label: "Border", defaultValue: "#262626" }),
-            input: color({ label: "Input", defaultValue: "#262626" }),
-            ring: color({ label: "Ring", defaultValue: "#d4d4d4" }),
-            sidebar: color({ label: "Sidebar", defaultValue: "#171717" }),
-            sidebarForeground: color({ label: "Sidebar Foreground", defaultValue: "#fafafa" }),
-            sidebarPrimary: color({ label: "Sidebar Primary", defaultValue: "#fafafa" }),
-            sidebarPrimaryForeground: color({
-              label: "Sidebar Primary FG",
-              defaultValue: "#171717",
-            }),
-            sidebarAccent: color({ label: "Sidebar Accent", defaultValue: "#262626" }),
-            sidebarAccentForeground: color({ label: "Sidebar Accent FG", defaultValue: "#fafafa" }),
-            sidebarBorder: color({ label: "Sidebar Border", defaultValue: "#262626" }),
-            sidebarRing: color({ label: "Sidebar Ring", defaultValue: "#d4d4d4" }),
-          },
-        },
-      ],
+    fontFamily: text({
+      label: "Font Family",
+      defaultValue: "Geist, Inter, system-ui, sans-serif",
+      description:
+        "CSS font-family stack applied to --font-sans. The first available font wins, so a stack naming an unloaded font degrades rather than breaking.",
     }),
     radius: text({
       label: "Border Radius",
-      defaultValue: "0.625rem",
+      defaultValue: "4px",
+      description: "Applied to the --radius custom property. Any CSS length.",
     }),
-    fontFamily: text({
-      label: "Font Family",
-      defaultValue: "Inter, sans-serif",
+    light: group({
+      label: "Light Mode",
+      description: "Tokens emitted under :root.",
+      fields: themeColors("light"),
+    }),
+    dark: group({
+      label: "Dark Mode",
+      description: "Tokens emitted under .dark.",
+      fields: themeColors("dark"),
     }),
   },
-  labels: {
-    plural: "Themes",
-    singular: "Theme",
-  },
-})
+});

package/templates/marketing-site/src/vexcms/globals/index.ts

@@ -1 +1 @@
-export { siteSettings } from "./siteSettings"
+export * from "./siteSettings"