@tanstack/create 0.67.0 → 0.68.1

package/src/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx

@@ -44,36 +44,25 @@ function ConvexTodos() {
   const totalCount = todos?.length || 0
 
   return (
-    <div
-      className="min-h-screen flex items-center justify-center p-4"
-      style={{
-        background:
-          'linear-gradient(135deg, #667a56 0%, #8fbc8f 25%, #90ee90 50%, #98fb98 75%, #f0fff0 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl">
-        {/* Header Card */}
-        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl border border-green-200/50 p-8 mb-6">
+    <main className="demo-page">
+      <div className="mx-auto w-full max-w-2xl space-y-6">
+        <section className="demo-panel">
           <div className="text-center">
-            <h1 className="text-4xl font-bold text-green-800 mb-2">
-              Convex Todos
-            </h1>
-            <p className="text-green-600 text-lg">Powered by real-time sync</p>
+            <p className="island-kicker mb-2">Convex</p>
+            <h1 className="demo-title">Todos</h1>
+            <p className="demo-muted mt-2">Powered by real-time sync</p>
             {totalCount > 0 && (
               <div className="mt-4 flex justify-center space-x-6 text-sm">
-                <span className="text-green-700 font-medium">
-                  {completedCount} completed
-                </span>
-                <span className="text-gray-600">
+                <span className="font-medium">{completedCount} completed</span>
+                <span className="demo-muted">
                   {totalCount - completedCount} remaining
                 </span>
               </div>
             )}
           </div>
-        </div>
+        </section>
 
-        {/* Add Todo Card */}
-        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 p-6 mb-6">
+        <section className="demo-card">
           <div className="flex gap-3">
             <input
               type="text"
@@ -85,42 +74,39 @@ function ConvexTodos() {
                 }
               }}
               placeholder="What needs to be done?"
-              className="flex-1 px-4 py-3 rounded-xl border-2 border-green-200 focus:border-green-400 focus:outline-none text-gray-800 placeholder-gray-500 bg-white/80 transition-colors"
+              className="demo-input min-w-0 flex-1"
             />
             <button
               onClick={handleAddTodo}
               disabled={!newTodo.trim()}
-              className="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
+              className="demo-button"
             >
               <Plus size={20} />
               Add
             </button>
           </div>
-        </div>
+        </section>
 
-        {/* Todos List */}
-        <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 overflow-hidden">
+        <section className="demo-card overflow-hidden p-0">
           {!todos ? (
             <div className="p-8 text-center">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500 mx-auto mb-4"></div>
-              <p className="text-green-600">Loading todos...</p>
+              <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-[var(--lagoon-deep)]"></div>
+              <p className="demo-muted">Loading todos...</p>
             </div>
           ) : todos.length === 0 ? (
             <div className="p-12 text-center">
-              <Circle size={48} className="text-green-300 mx-auto mb-4" />
-              <h3 className="text-xl font-semibold text-green-800 mb-2">
-                No todos yet
-              </h3>
-              <p className="text-green-600">
+              <Circle size={48} className="demo-muted mx-auto mb-4" />
+              <h3 className="demo-section-title mb-2">No todos yet</h3>
+              <p className="demo-muted">
                 Add your first todo above to get started!
               </p>
             </div>
           ) : (
-            <div className="divide-y divide-green-100">
+            <div className="divide-y divide-[var(--line)]">
               {todos.map((todo, index) => (
                 <div
                   key={todo._id}
-                  className={`p-4 flex items-center gap-4 hover:bg-green-50/50 transition-colors ${
+                  className={`p-4 flex items-center gap-4 transition-colors hover:bg-[var(--link-bg-hover)] ${
                     todo.completed ? 'opacity-75' : ''
                   }`}
                   style={{
@@ -131,8 +117,8 @@ function ConvexTodos() {
                     onClick={() => handleToggleTodo(todo._id)}
                     className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${
                       todo.completed
-                        ? 'bg-green-500 border-green-500 text-white'
-                        : 'border-green-300 hover:border-green-400 text-transparent hover:text-green-400'
+                        ? 'border-[var(--lagoon-deep)] bg-[var(--lagoon)] text-[var(--sea-ink)]'
+                        : 'border-[var(--line)] text-transparent hover:border-[var(--lagoon-deep)] hover:text-[var(--lagoon-deep)]'
                     }`}
                   >
                     <Check size={14} />
@@ -141,8 +127,8 @@ function ConvexTodos() {
                   <span
                     className={`flex-1 text-lg transition-all duration-200 ${
                       todo.completed
-                        ? 'line-through text-gray-500'
-                        : 'text-gray-800'
+                        ? 'line-through demo-muted'
+                        : 'text-[var(--sea-ink)]'
                     }`}
                   >
                     {todo.text}
@@ -150,7 +136,7 @@ function ConvexTodos() {
 
                   <button
                     onClick={() => handleRemoveTodo(todo._id)}
-                    className="flex-shrink-0 p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                    className="demo-button demo-button-danger flex-shrink-0 p-2"
                   >
                     <Trash2 size={18} />
                   </button>
@@ -158,15 +144,14 @@ function ConvexTodos() {
               ))}
             </div>
           )}
-        </div>
+        </section>
 
-        {/* Footer */}
         <div className="text-center mt-6">
-          <p className="text-green-700/80 text-sm">
-            Built with Convex • Real-time updates • Always in sync
+          <p className="demo-muted text-sm">
+            Built with Convex, real-time updates, and synced state.
           </p>
         </div>
       </div>
-    </div>
+    </main>
   )
 }

package/src/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx

@@ -27,16 +27,16 @@ export default function ChatArea() {
 
   return (
     <>
-      <div className="px-4 py-6 space-y-4">
+      <div className="flex-1 space-y-4 overflow-auto px-4 py-6">
         <Messages messages={messages} user={user} />
       </div>
 
-      <div className="bg-white border-t border-gray-200 px-4 py-4">
+      <div className="border-t border-[var(--line)] bg-[var(--chip-bg)] px-4 py-4">
         <div className="flex items-center space-x-3">
           <select
             value={user}
             onChange={(e) => setUser(e.target.value)}
-            className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="demo-select demo-input-fit text-sm"
           >
             <option value="Alice">Alice</option>
             <option value="Bob">Bob</option>
@@ -49,14 +49,14 @@ export default function ChatArea() {
               onChange={(e) => setMessage(e.target.value)}
               onKeyDown={handleKeyPress}
               placeholder="Type a message..."
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              className="demo-input"
             />
           </div>
 
           <button
             onClick={postMessage}
             disabled={message.trim() === ''}
-            className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            className="demo-button"
           >
             Send
           </button>

package/src/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx

@@ -2,14 +2,10 @@ import type { Message } from '#/db-collections'
 
 export const getAvatarColor = (username: string) => {
   const colors = [
-    'bg-blue-500',
-    'bg-green-500',
-    'bg-purple-500',
-    'bg-pink-500',
-    'bg-indigo-500',
-    'bg-red-500',
-    'bg-yellow-500',
-    'bg-teal-500',
+    'bg-[var(--lagoon-deep)]',
+    'bg-[var(--palm)]',
+    'bg-[var(--sea-ink-soft)]',
+    'bg-[var(--lagoon)]',
   ]
   const index = username
     .split('')
@@ -49,12 +45,12 @@ export default function Messages({
             <div
               className={`px-4 py-2 rounded-2xl ${
                 msg.user === user
-                  ? 'bg-blue-500 text-white rounded-br-md'
-                  : 'bg-white text-gray-800 border border-gray-200 rounded-bl-md'
+                  ? 'bg-[var(--lagoon-deep)] text-white rounded-br-md'
+                  : 'border border-[var(--line)] bg-[var(--chip-bg)] text-[var(--sea-ink)] rounded-bl-md'
               }`}
             >
               {msg.user !== user && (
-                <p className="text-xs text-gray-500 mb-1 font-medium">
+                <p className="demo-muted mb-1 text-xs font-medium">
                   {msg.user}
                 </p>
               )}

package/src/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx

@@ -8,8 +8,10 @@ export const Route = createFileRoute('/demo/db-chat')({
 
 function App() {
   return (
-    <div className="flex flex-col h-screen bg-gray-50">
-      <ChatArea />
-    </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel flex h-[70vh] w-full max-w-3xl flex-col overflow-hidden p-0">
+        <ChatArea />
+      </section>
+    </main>
   )
 }

package/src/frameworks/react/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx.ejs

@@ -47,141 +47,91 @@ function DemoDrizzle() {
   }
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen p-4 text-white"
-      style={{
-        background:
-          'linear-gradient(135deg, #0c1a2b 0%, #1a2332 50%, #16202e 100%)',
-      }}
-    >
-      <div
-        className="w-full max-w-2xl p-8 rounded-xl shadow-2xl border border-white/10"
-        style={{
-          background:
-            'linear-gradient(135deg, rgba(22, 32, 46, 0.95) 0%, rgba(12, 26, 43, 0.95) 100%)',
-          backdropFilter: 'blur(10px)',
-        }}
-      >
-        <div
-          className="flex items-center justify-center gap-4 mb-8 p-4 rounded-lg"
-          style={{
-            background:
-              'linear-gradient(90deg, rgba(93, 103, 227, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%)',
-            border: '1px solid rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <div className="relative group">
-            <div className="absolute -inset-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-500 rounded-lg blur-lg opacity-60 group-hover:opacity-100 transition duration-500"></div>
-            <div className="relative bg-gradient-to-br from-indigo-600 to-purple-600 p-3 rounded-lg">
-              <img
-                src="/drizzle.svg"
-                alt="Drizzle Logo"
-                className="w-8 h-8 transform group-hover:scale-110 transition-transform duration-300"
-              />
-            </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <header className="mb-8 flex items-center gap-4">
+          <span className="demo-card flex h-14 w-14 items-center justify-center p-3">
+            <img src="/drizzle.svg" alt="Drizzle Logo" className="h-8 w-8" />
+          </span>
+          <div>
+            <p className="island-kicker mb-2">Database</p>
+            <h1 className="demo-title">Drizzle Demo</h1>
           </div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-300 via-purple-300 to-indigo-300 text-transparent bg-clip-text">
-            Drizzle Database Demo
-          </h1>
-        </div>
+        </header>
 
-        <h2 className="text-2xl font-bold mb-4 text-indigo-200">Todos</h2>
+        <h2 className="demo-section-title mb-4">Todos</h2>
 
         <ul className="space-y-3 mb-6">
           {todos.map((todo) => (
             <li
               key={todo.id}
-              className="rounded-lg p-4 shadow-md border transition-all hover:scale-[1.02] cursor-pointer group"
-              style={{
-                background:
-                  'linear-gradient(135deg, rgba(93, 103, 227, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%)',
-                borderColor: 'rgba(93, 103, 227, 0.3)',
-              }}
+              className="demo-list-item"
             >
               <div className="flex items-center justify-between">
-                <span className="text-lg font-medium text-white group-hover:text-indigo-200 transition-colors">
-                  {todo.title}
-                </span>
-                <span className="text-xs text-indigo-300/70">#{todo.id}</span>
+                <span className="font-medium">{todo.title}</span>
+                <span className="demo-muted text-xs">#{todo.id}</span>
               </div>
             </li>
           ))}
           {todos.length === 0 && (
-            <li className="text-center py-8 text-indigo-300/70">
+            <li className="demo-list-item text-center demo-muted">
               No todos yet. Create one below!
             </li>
           )}
         </ul>
 
-        <form onSubmit={handleSubmit} className="flex gap-2">
+        <form onSubmit={handleSubmit} className="flex flex-col gap-2 sm:flex-row">
           <input
             type="text"
             name="title"
             placeholder="Add a new todo..."
-            className="flex-1 px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-all text-white placeholder-indigo-300/50"
-            style={{
-              background: 'rgba(93, 103, 227, 0.1)',
-              borderColor: 'rgba(93, 103, 227, 0.3)',
-              focusRing: 'rgba(93, 103, 227, 0.5)',
-            }}
+            className="demo-input min-w-0 flex-1"
           />
           <button
             type="submit"
-            className="px-6 py-3 font-semibold rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 active:scale-95 whitespace-nowrap"
-            style={{
-              background: 'linear-gradient(135deg, #5d67e3 0%, #8b5cf6 100%)',
-              color: 'white',
-            }}
+            className="demo-button whitespace-nowrap"
           >
             Add Todo
           </button>
         </form>
 
-        <div
-          className="mt-8 p-6 rounded-lg border"
-          style={{
-            background: 'rgba(93, 103, 227, 0.05)',
-            borderColor: 'rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <h3 className="text-lg font-semibold mb-2 text-indigo-200">
+        <div className="demo-card mt-8">
+          <h3 className="demo-section-title mb-2">
             Powered by Drizzle ORM
           </h3>
-          <p className="text-sm text-indigo-300/80 mb-4">
+          <p className="demo-muted mb-4 text-sm">
             Next-generation ORM for Node.js & TypeScript with PostgreSQL
           </p>
           <div className="space-y-2 text-sm">
-            <p className="text-indigo-200 font-medium">Setup Instructions:</p>
-            <ol className="list-decimal list-inside space-y-2 text-indigo-300/80">
+            <p className="font-medium">Setup Instructions:</p>
+            <ol className="demo-muted list-inside list-decimal space-y-2">
               <li>
                 Configure your{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
-                  DATABASE_URL
-                </code>{' '}
+                <code>DATABASE_URL</code>{' '}
                 in .env.local
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('drizzle-kit', ['generate']) %>
                 </code>
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('drizzle-kit', ['migrate']) %>
                 </code>
               </li>
               <li>
                 Optional:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('drizzle-kit', ['studio']) %>
                 </code>
               </li>
             </ol>
           </div>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }

package/src/frameworks/react/add-ons/form/assets/src/components/demo.FormComponents.tsx.ejs

@@ -33,7 +33,7 @@ function ErrorMessages({
       {errors.map((error) => (
         <div
           key={typeof error === 'string' ? error : error.message}
-          className="text-red-500 mt-1 font-bold"
+          className="mt-1 text-sm font-semibold text-red-600"
         >
           {typeof error === 'string' ? error : error.message}
         </div>
@@ -54,7 +54,7 @@ export function TextField({
 
   return (
     <div>
-      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+      <Label htmlFor={label} className="mb-2 text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </Label>
       <Input
@@ -80,7 +80,7 @@ export function TextArea({
 
   return (
     <div>
-      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+      <Label htmlFor={label} className="mb-2 text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </Label>
       <ShadcnTextarea
@@ -143,7 +143,7 @@ export function Slider({ label }: { label: string }) {
 
   return (
     <div>
-      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+      <Label htmlFor={label} className="mb-2 text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </Label>
       <ShadcnSlider
@@ -186,7 +186,7 @@ export function SubscribeButton({ label }: { label: string }) {
         <button
           type="submit"
           disabled={isSubmitting}
-          className="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
+          className="demo-button"
         >
           {label}
         </button>
@@ -205,7 +205,7 @@ function ErrorMessages({
       {errors.map((error) => (
         <div
           key={typeof error === 'string' ? error : error.message}
-          className="text-red-500 mt-1 font-bold"
+          className="mt-1 text-sm font-semibold text-red-600"
         >
           {typeof error === 'string' ? error : error.message}
         </div>
@@ -226,14 +226,14 @@ export function TextField({
 
   return (
     <div>
-      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+      <label htmlFor={label} className="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {label}
         <input
           value={field.state.value}
           placeholder={placeholder}
           onBlur={field.handleBlur}
           onChange={(e) => field.handleChange(e.target.value)}
-          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          className="demo-input mt-2"
         />
       </label>
       {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
@@ -253,14 +253,14 @@ export function TextArea({
 
   return (
     <div>
-      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+      <label htmlFor={label} className="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {label}
         <textarea
           value={field.state.value}
           onBlur={field.handleBlur}
           rows={rows}
           onChange={(e) => field.handleChange(e.target.value)}
-          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          className="demo-textarea mt-2"
         />
       </label>
       {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
@@ -281,7 +281,7 @@ export function Select({
 
   return (
     <div>
-      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+      <label htmlFor={label} className="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </label>
       <select
@@ -289,7 +289,7 @@ export function Select({
         value={field.state.value}
         onBlur={field.handleBlur}
         onChange={(e) => field.handleChange(e.target.value)}
-        className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        className="demo-select"
       >
         {values.map((value) => (
           <option key={value.value} value={value.value}>

package/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs

@@ -45,14 +45,15 @@ function AddressForm() {
   })
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <div className="mb-6">
+          <p className="island-kicker mb-2">TanStack Form</p>
+          <h1 className="demo-title">Address Form</h1>
+          <p className="demo-muted mt-2">
+            Nested fields, field-level validation, and a select input.
+          </p>
+        </div>
         <form
           onSubmit={(e) => {
             e.preventDefault()
@@ -198,8 +199,8 @@ function AddressForm() {
             </form.AppForm>
           </div>
         </form>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 

package/src/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs

@@ -33,14 +33,15 @@ function SimpleForm() {
   })
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 5% 40%, #add8e6 0%, #0000ff 70%, #00008b 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <div className="mb-6">
+          <p className="island-kicker mb-2">TanStack Form</p>
+          <h1 className="demo-title">Simple Form</h1>
+          <p className="demo-muted mt-2">
+            A small validated form using the generated field helpers.
+          </p>
+        </div>
         <form
           onSubmit={(e) => {
             e.preventDefault()
@@ -63,8 +64,8 @@ function SimpleForm() {
             </form.AppForm>
           </div>
         </form>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 

package/src/frameworks/react/add-ons/mcp/assets/src/routes/demo/mcp-todos.tsx

@@ -32,22 +32,14 @@ function ORPCTodos() {
   }, [todo])
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-teal-200 to-emerald-900 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(70% 70% at 20% 20%, #07A798 0%, #045C4B 60%, #01251F 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <h1 className="text-2xl mb-4">MCP Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">MCP</p>
+        <h1 className="demo-title mb-6">Todos</h1>
         <ul className="mb-4 space-y-2">
           {todos?.map((t) => (
-            <li
-              key={t.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{t.title}</span>
+            <li key={t.id} className="demo-list-item">
+              <span className="text-base font-medium">{t.title}</span>
             </li>
           ))}
         </ul>
@@ -62,17 +54,17 @@ function ORPCTodos() {
               }
             }}
             placeholder="Enter a new todo..."
-            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+            className="demo-input"
           />
           <button
             disabled={todo.trim().length === 0}
             onClick={submitTodo}
-            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+            className="demo-button"
           >
             Add todo
           </button>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }