create-fluxstack 1.18.0 → 1.19.0

package/app/client/src/lib/theme-clock.ts

@@ -0,0 +1,201 @@
+/**
+ * Theme Clock — Generates complete color palettes that shift with time
+ *
+ * Based on color theory (like Adobe Color Wheel):
+ * - Base hue rotates continuously through 360° over 24 hours
+ * - Palette is generated using color harmony rules (analogous, complementary, triadic)
+ * - Colors use OKLCH for perceptual uniformity (consistent brightness across hues)
+ *
+ * Periods & their base hues:
+ * - 00:00 → 270° (violet)     — deep night
+ * - 04:00 → 330° (magenta)    — pre-dawn
+ * - 06:00 → 30°  (orange)     — sunrise
+ * - 09:00 → 60°  (gold)       — morning
+ * - 12:00 → 150° (teal)       — midday
+ * - 15:00 → 210° (blue)       — afternoon
+ * - 18:00 → 330° (pink)       — sunset
+ * - 21:00 → 270° (purple)     — evening
+ */
+
+// ===== Color Math =====
+
+/** Normalize hue to 0-360 range */
+function normalizeHue(h: number): number {
+  return ((h % 360) + 360) % 360
+}
+
+/** Generate an OKLCH color string */
+function oklch(l: number, c: number, h: number, alpha?: number): string {
+  const hNorm = normalizeHue(h)
+  return alpha !== undefined
+    ? `oklch(${l}% ${c} ${hNorm} / ${alpha})`
+    : `oklch(${l}% ${c} ${hNorm})`
+}
+
+// ===== Palette Generation =====
+
+export interface ColorPalette {
+  /** Base hue (0-360) — rotates with time */
+  baseHue: number
+
+  /** Primary accent — most vibrant */
+  primary: string
+  /** Secondary — analogous offset (+40°) */
+  secondary: string
+  /** Tertiary — analogous offset (-30°) */
+  tertiary: string
+  /** Complement — opposite side of wheel (+180°) */
+  complement: string
+  /** Accent — triadic offset (+120°) */
+  accent: string
+
+  /** Muted versions for backgrounds */
+  primaryMuted: string
+  secondaryMuted: string
+
+  /** Glow/shadow colors with transparency */
+  primaryGlow: string
+  secondaryGlow: string
+
+  /** Background accent (very subtle) */
+  bgAccent: string
+  bgAccent2: string
+
+  /** Text on dark backgrounds */
+  textPrimary: string
+  textSecondary: string
+  textMuted: string
+
+  /** Border colors */
+  border: string
+  borderActive: string
+
+  /** Current time period */
+  period: 'night' | 'dawn' | 'morning' | 'midday' | 'afternoon' | 'sunset' | 'evening' | 'dusk'
+
+  /** CSS gradient for logo/titles */
+  gradientPrimary: string
+  /** CSS gradient for backgrounds */
+  gradientBg: string
+}
+
+/**
+ * Generate a complete color palette for the given time
+ */
+export function generatePalette(date = new Date()): ColorPalette {
+  const hours = date.getHours()
+  const minutes = date.getMinutes()
+  const totalMinutes = hours * 60 + minutes
+
+  // Base hue — full rotation over 24h, offset so midnight = 270° (purple)
+  const baseHue = normalizeHue((totalMinutes / 1440) * 360 + 270)
+
+  // Determine period
+  let period: ColorPalette['period']
+  if (hours >= 0 && hours < 4) period = 'night'
+  else if (hours >= 4 && hours < 6) period = 'dawn'
+  else if (hours >= 6 && hours < 10) period = 'morning'
+  else if (hours >= 10 && hours < 14) period = 'midday'
+  else if (hours >= 14 && hours < 17) period = 'afternoon'
+  else if (hours >= 17 && hours < 19) period = 'sunset'
+  else if (hours >= 19 && hours < 22) period = 'evening'
+  else period = 'dusk'
+
+  return buildPaletteFromHues(baseHue, period)
+}
+
+/**
+ * Build palette from individual hue values
+ * Used by all modes: auto, fixed, custom
+ */
+export function buildPaletteFromHues(
+  baseHue: number,
+  period: ColorPalette['period'] = 'midday',
+  hues?: { secondary?: number; tertiary?: number; complement?: number; accent?: number }
+): ColorPalette {
+  const h2 = normalizeHue(hues?.secondary ?? baseHue + 40)
+  const h3 = normalizeHue(hues?.tertiary ?? baseHue - 30)
+  const hComp = normalizeHue(hues?.complement ?? baseHue + 180)
+  const hAccent = normalizeHue(hues?.accent ?? baseHue + 120)
+
+  return {
+    baseHue,
+    period,
+
+    primary:     oklch(65, 0.25, baseHue),
+    secondary:   oklch(70, 0.20, h2),
+    tertiary:    oklch(60, 0.22, h3),
+    complement:  oklch(68, 0.18, hComp),
+    accent:      oklch(72, 0.20, hAccent),
+
+    primaryMuted:   oklch(65, 0.25, baseHue, 0.15),
+    secondaryMuted: oklch(70, 0.20, h2, 0.10),
+
+    primaryGlow:   oklch(65, 0.25, baseHue, 0.3),
+    secondaryGlow: oklch(70, 0.20, h2, 0.2),
+
+    bgAccent:  oklch(65, 0.25, baseHue, 0.08),
+    bgAccent2: oklch(70, 0.20, h2, 0.05),
+
+    textPrimary:   oklch(80, 0.15, baseHue),
+    textSecondary: oklch(75, 0.12, h2),
+    textMuted:     oklch(55, 0.05, baseHue),
+
+    border:       oklch(65, 0.25, baseHue, 0.12),
+    borderActive: oklch(65, 0.25, baseHue, 0.3),
+
+    gradientPrimary: `linear-gradient(to right, ${oklch(65, 0.25, baseHue)}, ${oklch(70, 0.20, h2)})`,
+    gradientBg:      `linear-gradient(135deg, ${oklch(65, 0.25, baseHue, 0.05)}, ${oklch(70, 0.20, hComp, 0.03)})`,
+  }
+}
+
+/**
+ * Generate palette for a specific hue (fixed mode)
+ */
+export function generatePaletteForHue(hue: number): ColorPalette {
+  // Create a fake date that produces this hue
+  const totalMinutes = ((hue - 270 + 360) % 360) / 360 * 1440
+  const fakeDate = new Date()
+  fakeDate.setHours(Math.floor(totalMinutes / 60), Math.floor(totalMinutes % 60))
+  return generatePalette(fakeDate)
+}
+
+/**
+ * Apply palette to CSS custom properties on :root
+ */
+export function applyPalette(palette: ColorPalette): void {
+  const root = document.documentElement
+  const set = (k: string, v: string) => root.style.setProperty(`--theme-${k}`, v)
+
+  set('hue', String(palette.baseHue))
+  set('primary', palette.primary)
+  set('secondary', palette.secondary)
+  set('tertiary', palette.tertiary)
+  set('complement', palette.complement)
+  set('accent', palette.accent)
+  set('primary-muted', palette.primaryMuted)
+  set('secondary-muted', palette.secondaryMuted)
+  set('primary-glow', palette.primaryGlow)
+  set('secondary-glow', palette.secondaryGlow)
+  set('bg-accent', palette.bgAccent)
+  set('bg-accent2', palette.bgAccent2)
+  set('text-primary', palette.textPrimary)
+  set('text-secondary', palette.textSecondary)
+  set('text-muted', palette.textMuted)
+  set('border', palette.border)
+  set('border-active', palette.borderActive)
+  set('gradient-primary', palette.gradientPrimary)
+  set('gradient-bg', palette.gradientBg)
+
+  root.setAttribute('data-theme-period', palette.period)
+}
+
+/**
+ * Start the palette clock — updates every 30 seconds for smooth transitions
+ */
+export function startPaletteClock(): () => void {
+  const update = () => applyPalette(generatePalette())
+  update()
+  const interval = setInterval(update, 30_000)
+  return () => clearInterval(interval)
+}

package/app/client/src/live/AuthDemo.tsx

@@ -83,7 +83,7 @@ function AdminSection() {
     return (
       <div className="bg-white/5 border border-white/10 rounded-xl p-6">
         <div className="flex items-center gap-2 text-gray-400">
-          <div className="w-4 h-4 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+          <div className="w-4 h-4 border-2 border-theme border-t-transparent rounded-full animate-spin" />
           Montando painel admin...
         </div>
       </div>
@@ -117,7 +117,7 @@ function AdminSection() {
         <div>
           <h3 className="text-lg font-semibold text-white">Painel Admin</h3>
           <p className="text-gray-400 text-xs">
-            Requer: <code className="text-purple-300">auth.required + roles: [&apos;admin&apos;]</code>
+            Requer: <code className="text-theme">auth.required + roles: [&apos;admin&apos;]</code>
           </p>
         </div>
         <div className="text-xs text-right">
@@ -162,11 +162,11 @@ function AdminSection() {
           onChange={e => setNewUserName(e.target.value)}
           onKeyDown={e => e.key === 'Enter' && handleAddUser()}
           placeholder="Nome do usuário..."
-          className="flex-1 px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
+          className="flex-1 px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[var(--theme-primary-glow)]"
         />
         <button
           onClick={handleAddUser}
-          className="px-4 py-2 rounded-lg bg-purple-500/20 border border-purple-500/30 text-purple-200 text-sm hover:bg-purple-500/30"
+          className="px-4 py-2 rounded-lg bg-theme-muted border border-theme-active text-theme text-sm hover:bg-theme-muted"
         >
           Adicionar
         </button>
@@ -242,7 +242,7 @@ function AuthControls() {
           onChange={e => setToken(e.target.value)}
           onKeyDown={e => e.key === 'Enter' && handleLogin()}
           placeholder="Token (JWT, API key, etc.)"
-          className="flex-1 px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50"
+          className="flex-1 px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[var(--theme-primary-glow)]"
         />
         <div className="flex gap-2">
           <button
@@ -268,7 +268,7 @@ function AuthControls() {
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs">
           <button
             onClick={() => { setToken('admin-token'); }}
-            className="px-2 py-1 rounded bg-purple-500/20 text-purple-300 hover:bg-purple-500/30"
+            className="px-2 py-1 rounded bg-theme-muted text-theme hover:bg-theme-muted"
           >
             admin-token
           </button>
@@ -321,9 +321,9 @@ export function AuthDemo() {
 
       <div className="bg-white/5 border border-white/10 rounded-xl p-4 sm:p-6 text-xs text-gray-500 space-y-2 overflow-x-auto">
         <h4 className="text-sm font-semibold text-gray-300 mb-3">Como funciona</h4>
-        <p><strong className="text-purple-300">Server:</strong> <code>static auth = &#123; required: true, roles: [&apos;admin&apos;] &#125;</code></p>
-        <p><strong className="text-purple-300">Server:</strong> <code>static actionAuth = &#123; deleteUser: &#123; permissions: [&apos;users.delete&apos;] &#125; &#125;</code></p>
-        <p><strong className="text-purple-300">Server:</strong> <code>this.$auth.hasRole(&apos;admin&apos;)</code> dentro das actions</p>
+        <p><strong className="text-theme">Server:</strong> <code>static auth = &#123; required: true, roles: [&apos;admin&apos;] &#125;</code></p>
+        <p><strong className="text-theme">Server:</strong> <code>static actionAuth = &#123; deleteUser: &#123; permissions: [&apos;users.delete&apos;] &#125; &#125;</code></p>
+        <p><strong className="text-theme">Server:</strong> <code>this.$auth.hasRole(&apos;admin&apos;)</code> dentro das actions</p>
         <p><strong className="text-blue-300">Client:</strong> <code>component.$authenticated</code> no proxy</p>
         <p><strong className="text-blue-300">Client:</strong> <code>useLiveComponents().authenticate(&#123; token &#125;)</code> para login</p>
         <p><strong className="text-blue-300">Client:</strong> <code>&lt;LiveComponentsProvider auth=&#123;&#123; token &#125;&#125;&gt;</code> para auth na conexão</p>

package/app/client/src/live/CounterDemo.tsx

@@ -75,7 +75,7 @@ export function CounterDemo() {
         </div>
 
         <div className="text-center mb-6 sm:mb-8 flex-1 flex flex-col justify-center">
-          <div className="text-6xl sm:text-8xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+          <div className="text-6xl sm:text-8xl font-bold bg-theme-gradient bg-clip-text text-transparent">
             {counter.$state.count}
           </div>
 
@@ -90,7 +90,7 @@ export function CounterDemo() {
           <button
             onClick={handleDecrement}
             disabled={counter.$loading}
-            className="w-14 h-14 flex items-center justify-center text-3xl bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 text-red-300 rounded-xl transition-all disabled:opacity-50"
+            className="w-14 h-14 flex items-center justify-center text-3xl btn-complement disabled:opacity-50"
           >
             −
           </button>
@@ -98,7 +98,7 @@ export function CounterDemo() {
           <button
             onClick={handleReset}
             disabled={counter.$loading}
-            className="px-6 h-14 flex items-center justify-center text-sm bg-gray-500/20 hover:bg-gray-500/30 border border-gray-500/30 text-gray-300 rounded-xl transition-all disabled:opacity-50"
+            className="px-6 h-14 flex items-center justify-center text-sm btn-theme-outline disabled:opacity-50"
           >
             Reset
           </button>
@@ -106,7 +106,7 @@ export function CounterDemo() {
           <button
             onClick={handleIncrement}
             disabled={counter.$loading}
-            className="w-14 h-14 flex items-center justify-center text-3xl bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/30 text-emerald-300 rounded-xl transition-all disabled:opacity-50"
+            className="w-14 h-14 flex items-center justify-center text-3xl btn-accent disabled:opacity-50"
           >
             +
           </button>
@@ -114,13 +114,13 @@ export function CounterDemo() {
 
         {counter.$loading && (
           <div className="flex justify-center mt-4">
-            <div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+            <div className="w-5 h-5 border-2 border-theme border-t-transparent rounded-full animate-spin" />
           </div>
         )}
 
         <div className="mt-8 pt-6 border-t border-white/10">
           <p className="text-gray-500 text-xs text-center">
-            ✨ Usando <code className="text-purple-400">Room Events</code>
+            ✨ Usando <code className="text-theme">Room Events</code>
           </p>
         </div>
       </div>
@@ -157,7 +157,7 @@ export function CounterDemo() {
           <button
             onClick={handleDecrement}
             disabled={localCounter.$loading}
-            className="w-14 h-14 flex items-center justify-center text-3xl bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 text-red-300 rounded-xl transition-all disabled:opacity-50"
+            className="w-14 h-14 flex items-center justify-center text-3xl btn-complement disabled:opacity-50"
           >
             −
           </button>
@@ -165,7 +165,7 @@ export function CounterDemo() {
           <button
             onClick={handleReset}
             disabled={localCounter.$loading}
-            className="px-6 h-14 flex items-center justify-center text-sm bg-gray-500/20 hover:bg-gray-500/30 border border-gray-500/30 text-gray-300 rounded-xl transition-all disabled:opacity-50"
+            className="px-6 h-14 flex items-center justify-center text-sm btn-theme-outline disabled:opacity-50"
           >
             Reset
           </button>
@@ -173,7 +173,7 @@ export function CounterDemo() {
           <button
             onClick={handleIncrement}
             disabled={localCounter.$loading}
-            className="w-14 h-14 flex items-center justify-center text-3xl bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/30 text-emerald-300 rounded-xl transition-all disabled:opacity-50"
+            className="w-14 h-14 flex items-center justify-center text-3xl btn-accent disabled:opacity-50"
           >
             +
           </button>
@@ -181,7 +181,7 @@ export function CounterDemo() {
 
         {localCounter.$loading && (
           <div className="flex justify-center mt-4">
-            <div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+            <div className="w-5 h-5 border-2 border-theme border-t-transparent rounded-full animate-spin" />
           </div>
         )}
       </div>

package/app/client/src/live/FormDemo.tsx

@@ -18,7 +18,7 @@ export function FormDemo() {
         </p>
         <button
           onClick={() => form.reset()}
-          className="mt-4 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-all"
+          className="mt-4 btn-theme"
         >
           Novo Formulário
         </button>
@@ -41,12 +41,12 @@ export function FormDemo() {
         {/* Nome - sync on blur */}
         <div>
           <label className="block text-gray-300 text-sm mb-1">
-            Nome <span className="text-purple-400 text-xs">(sync: blur)</span>
+            Nome <span className="text-theme text-xs">(sync: blur)</span>
           </label>
           <input
             {...form.$field('name', { syncOn: 'blur' })}
             placeholder="Seu nome"
-            className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none"
+            className="w-full input-theme"
           />
         </div>
 
@@ -59,7 +59,7 @@ export function FormDemo() {
             {...form.$field('email', { syncOn: 'change', debounce: 500 })}
             type="email"
             placeholder="seu@email.com"
-            className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none"
+            className="w-full input-theme"
           />
         </div>
 
@@ -72,7 +72,7 @@ export function FormDemo() {
             {...form.$field('message', { syncOn: 'blur' })}
             rows={3}
             placeholder="Sua mensagem..."
-            className="w-full px-4 py-3 bg-white/5 border border-white/20 rounded-lg text-white placeholder-gray-500 focus:border-purple-500 focus:outline-none resize-none"
+            className="w-full input-theme resize-none"
           />
         </div>
 
@@ -88,13 +88,13 @@ export function FormDemo() {
               }
             }}
             disabled={!form.$connected || form.$loading}
-            className="flex-1 px-4 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-medium hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50"
+            className="flex-1 px-4 py-3 bg-theme-gradient text-white rounded-lg font-medium hover:shadow-theme transition-all disabled:opacity-50"
           >
             {form.$loading ? 'Enviando...' : 'Enviar'}
           </button>
           <button
             onClick={() => form.reset()}
-            className="px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-500 transition-all"
+            className="px-4 py-3 btn-theme-ghost"
           >
             Limpar
           </button>
@@ -103,7 +103,7 @@ export function FormDemo() {
 
       {/* Legenda */}
       <div className="mt-4 p-3 bg-white/5 rounded-lg text-xs text-gray-400 space-y-1">
-        <p><span className="text-purple-400">blur:</span> Sincroniza ao sair do campo</p>
+        <p><span className="text-theme">blur:</span> Sincroniza ao sair do campo</p>
         <p><span className="text-blue-400">500ms:</span> Sincroniza 500ms após parar de digitar</p>
       </div>
 

package/app/client/src/live/PingPongDemo.tsx

@@ -95,7 +95,7 @@ export function PingPongDemo() {
       <div className="text-center">
         <h2 className="text-2xl font-bold text-white mb-2">Ping Pong Binary</h2>
         <p className="text-sm text-gray-400">
-          Mensagens binárias via <code className="text-cyan-400">msgpack</code> — round-trip latency demo
+          Mensagens binárias via <code className="text-theme-secondary">msgpack</code> — round-trip latency demo
         </p>
       </div>
 
@@ -108,26 +108,26 @@ export function PingPongDemo() {
         <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10">
           <span className="text-sm text-gray-400">{onlineCount} online</span>
         </div>
-        <div className="px-3 py-1 rounded-full bg-cyan-500/10 border border-cyan-500/20">
-          <span className="text-xs text-cyan-300">{username}</span>
+        <div className="px-3 py-1 rounded-full bg-theme-accent border border-theme">
+          <span className="text-xs text-theme">{username}</span>
         </div>
       </div>
 
       {/* Stats */}
       <div className="grid grid-cols-3 gap-4 w-full">
-        <div className="bg-gray-800/50 border border-white/10 rounded-xl p-4 text-center">
+        <div className="card-theme p-4 text-center">
           <div className="text-2xl font-bold text-white tabular-nums">
             {avgRtt != null ? `${avgRtt}ms` : '--'}
           </div>
           <div className="text-xs text-gray-500 mt-1">AVG RTT</div>
         </div>
-        <div className="bg-gray-800/50 border border-white/10 rounded-xl p-4 text-center">
+        <div className="card-theme p-4 text-center">
           <div className="text-2xl font-bold text-emerald-400 tabular-nums">
             {minRtt != null ? `${minRtt}ms` : '--'}
           </div>
           <div className="text-xs text-gray-500 mt-1">MIN RTT</div>
         </div>
-        <div className="bg-gray-800/50 border border-white/10 rounded-xl p-4 text-center">
+        <div className="card-theme p-4 text-center">
           <div className="text-2xl font-bold text-red-400 tabular-nums">
             {maxRtt != null ? `${maxRtt}ms` : '--'}
           </div>
@@ -140,7 +140,7 @@ export function PingPongDemo() {
         <button
           onClick={sendPing}
           disabled={!live.$connected || live.$loading}
-          className="px-8 h-14 rounded-2xl bg-cyan-500/20 border border-cyan-500/30 text-cyan-300 text-lg font-bold hover:bg-cyan-500/30 active:scale-95 disabled:opacity-50 transition-all"
+          className="px-8 h-14 rounded-2xl bg-theme-muted border border-theme-active text-theme text-lg font-bold hover:bg-theme-muted active:scale-95 disabled:opacity-50 transition-all"
         >
           Ping!
         </button>
@@ -168,7 +168,7 @@ export function PingPongDemo() {
         <div className="px-4 py-2 bg-white/5 border-b border-white/10 flex items-center justify-between">
           <span className="text-xs text-gray-400 font-medium">Ping Log</span>
           <span className="text-xs text-gray-600">
-            wire format: <code className="text-cyan-400">msgpack</code> (binary)
+            wire format: <code className="text-theme-secondary">msgpack</code> (binary)
           </span>
         </div>
         <div className="max-h-60 overflow-y-auto">
@@ -194,8 +194,8 @@ export function PingPongDemo() {
 
       {/* Info */}
       <div className="text-center text-xs text-gray-600 space-y-1">
-        <p>Powered by <code className="text-purple-400">LiveRoom</code> + <code className="text-cyan-400">msgpack codec</code></p>
-        <p>Wire format: binary frames <code className="text-cyan-400">0x02</code> (event) / <code className="text-cyan-400">0x03</code> (state)</p>
+        <p>Powered by <code className="text-theme">LiveRoom</code> + <code className="text-theme-secondary">msgpack codec</code></p>
+        <p>Wire format: binary frames <code className="text-theme-secondary">0x02</code> (event) / <code className="text-theme-secondary">0x03</code> (state)</p>
       </div>
     </div>
   )

package/app/client/src/live/RoomChatDemo.tsx

@@ -174,7 +174,7 @@ export function RoomChatDemo() {
             <p className="text-xs text-gray-500">SALAS</p>
             <button
               onClick={() => dispatch({ type: 'OPEN_CREATE_MODAL' })}
-              className="text-xs text-purple-400 hover:text-purple-300"
+              className="text-xs text-theme hover:text-theme"
             >+ Criar</button>
           </div>
           {allRooms.map(room => {
@@ -187,7 +187,7 @@ export function RoomChatDemo() {
                 onClick={() => handleJoinRoom(room.id, room.name, room.isPrivate && !isJoined ? true : undefined)}
                 className={`
                   flex items-center justify-between px-3 py-2 rounded-lg cursor-pointer mb-1 transition-all group
-                  ${isActive ? 'bg-purple-500/20 text-purple-300' : isJoined ? 'bg-white/5 text-gray-300 hover:bg-white/10' : 'text-gray-500 hover:bg-white/5'}
+                  ${isActive ? 'bg-theme-muted text-theme' : isJoined ? 'bg-white/5 text-gray-300 hover:bg-white/10' : 'text-gray-500 hover:bg-white/5'}
                 `}
               >
                 <span className="flex items-center gap-2 min-w-0">
@@ -249,7 +249,7 @@ export function RoomChatDemo() {
               ) : (
                 activeMessages.map(msg => (
                   <div key={msg.id} className={`flex flex-col ${msg.user === chat.$state.username ? 'items-end' : 'items-start'}`}>
-                    <div className={`max-w-[85%] sm:max-w-[80%] rounded-2xl px-3 sm:px-4 py-2 ${msg.user === chat.$state.username ? 'bg-purple-500/30 text-purple-100' : 'bg-white/10 text-gray-200'}`}>
+                    <div className={`max-w-[85%] sm:max-w-[80%] rounded-2xl px-3 sm:px-4 py-2 ${msg.user === chat.$state.username ? 'bg-theme-muted text-white' : 'bg-white/10 text-gray-200'}`}>
                       <p className="text-xs text-gray-400 mb-1">{msg.user}</p>
                       <p className="text-sm sm:text-base">{msg.text}</p>
                     </div>
@@ -267,12 +267,12 @@ export function RoomChatDemo() {
                   onChange={(e) => dispatch({ type: 'SET_TEXT', text: e.target.value })}
                   onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage() } }}
                   placeholder="Digite uma mensagem..."
-                  className="flex-1 px-3 sm:px-4 py-2 rounded-xl bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 text-sm sm:text-base"
+                  className="flex-1 px-3 sm:px-4 py-2 rounded-xl bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[var(--theme-primary-glow)] text-sm sm:text-base"
                 />
                 <button
                   onClick={handleSendMessage}
                   disabled={!ui.text.trim()}
-                  className="px-4 sm:px-6 py-2 rounded-xl bg-purple-500/30 text-purple-200 hover:bg-purple-500/40 disabled:opacity-50 text-sm sm:text-base"
+                  className="px-4 sm:px-6 py-2 rounded-xl bg-theme-muted text-theme hover:bg-theme-muted disabled:opacity-50 text-sm sm:text-base"
                 >Enviar</button>
               </div>
             </div>
@@ -306,7 +306,7 @@ export function RoomChatDemo() {
                   value={ui.createModal.name}
                   onChange={e => dispatch({ type: 'UPDATE_CREATE_FORM', name: e.target.value })}
                   placeholder="Minha Sala"
-                  className="w-full px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 text-sm"
+                  className="w-full px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[var(--theme-primary-glow)] text-sm"
                   autoFocus
                   onKeyDown={e => { if (e.key === 'Enter') handleCreateRoom() }}
                 />
@@ -318,7 +318,7 @@ export function RoomChatDemo() {
                   value={ui.createModal.password}
                   onChange={e => dispatch({ type: 'UPDATE_CREATE_FORM', password: e.target.value })}
                   placeholder="Deixe vazio para sala publica"
-                  className="w-full px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 text-sm"
+                  className="w-full px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[var(--theme-primary-glow)] text-sm"
                   onKeyDown={e => { if (e.key === 'Enter') handleCreateRoom() }}
                 />
               </div>
@@ -330,7 +330,7 @@ export function RoomChatDemo() {
                 <button
                   onClick={handleCreateRoom}
                   disabled={!ui.createModal.name.trim()}
-                  className="flex-1 px-4 py-2 rounded-lg bg-purple-500/30 text-purple-200 hover:bg-purple-500/40 disabled:opacity-50 text-sm"
+                  className="flex-1 px-4 py-2 rounded-lg bg-theme-muted text-theme hover:bg-theme-muted disabled:opacity-50 text-sm"
                 >Criar</button>
               </div>
             </div>
@@ -351,7 +351,7 @@ export function RoomChatDemo() {
               value={ui.passwordPrompt.input}
               onChange={e => dispatch({ type: 'SET_PASSWORD_INPUT', input: e.target.value })}
               placeholder="Digite a senha..."
-              className="w-full px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 text-sm mb-3"
+              className="w-full px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[var(--theme-primary-glow)] text-sm mb-3"
               autoFocus
               onKeyDown={e => { if (e.key === 'Enter') handlePasswordSubmit() }}
             />
@@ -363,7 +363,7 @@ export function RoomChatDemo() {
               <button
                 onClick={handlePasswordSubmit}
                 disabled={!ui.passwordPrompt.input}
-                className="flex-1 px-4 py-2 rounded-lg bg-purple-500/30 text-purple-200 hover:bg-purple-500/40 disabled:opacity-50 text-sm"
+                className="flex-1 px-4 py-2 rounded-lg bg-theme-muted text-theme hover:bg-theme-muted disabled:opacity-50 text-sm"
               >Entrar</button>
             </div>
           </div>

package/app/client/src/live/SharedCounterDemo.tsx

@@ -69,14 +69,14 @@ export function SharedCounterDemo() {
         <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10">
           <span className="text-sm text-gray-400">{onlineCount} online</span>
         </div>
-        <div className="px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20">
-          <span className="text-xs text-purple-300">{username}</span>
+        <div className="px-3 py-1 rounded-full bg-theme-accent border border-theme">
+          <span className="text-xs text-theme">{username}</span>
         </div>
       </div>
 
       {/* Counter Display */}
       <div className="relative">
-        <div className="absolute inset-0 bg-purple-500/20 rounded-full blur-3xl" />
+        <div className="absolute inset-0 bg-theme-muted rounded-full blur-3xl" />
         <div className="relative bg-gray-800/50 border border-white/10 rounded-3xl px-16 py-10 flex flex-col items-center">
           <span className={`text-7xl font-black tabular-nums transition-colors ${
             count > 0 ? 'text-emerald-400' : count < 0 ? 'text-red-400' : 'text-white'
@@ -128,8 +128,8 @@ export function SharedCounterDemo() {
 
       {/* Info */}
       <div className="text-center text-xs text-gray-600 space-y-1">
-        <p>Powered by <code className="text-purple-400">LiveRoom</code> + <code className="text-purple-400">CounterRoom</code></p>
-        <p>Estado via component state + eventos via <code className="text-cyan-400">$room().on()</code></p>
+        <p>Powered by <code className="text-theme">LiveRoom</code> + <code className="text-theme">CounterRoom</code></p>
+        <p>Estado via component state + eventos via <code className="text-theme-secondary">$room().on()</code></p>
       </div>
 
       {/* CSS animation */}

package/app/client/src/pages/ApiTestPage.tsx

@@ -18,7 +18,7 @@ export function ApiTestPage({
     <div className="container mx-auto px-3 sm:px-4 py-6 sm:py-8 max-w-4xl">
       <div className="flex items-center gap-3 sm:gap-4 mb-6 sm:mb-8">
         <BackButton />
-        <h1 className="text-2xl sm:text-3xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+        <h1 className="text-2xl sm:text-3xl font-bold bg-theme-gradient bg-clip-text text-transparent">
           Eden Treaty API Test
         </h1>
       </div>
@@ -46,7 +46,7 @@ export function ApiTestPage({
           subtitle="Create User"
           onClick={onCreateUser}
           disabled={isLoading}
-          className="bg-purple-500/20 border-purple-500/30 text-purple-300 hover:bg-purple-500/30"
+          className="bg-theme-muted border-theme text-theme hover:bg-theme-accent"
         />
       </div>
 
@@ -70,9 +70,9 @@ export function ApiTestPage({
       <div className="mt-6 sm:mt-8 bg-white/5 border border-white/10 rounded-xl p-4 sm:p-6">
         <h3 className="text-lg font-semibold text-white mb-3">How it works</h3>
         <div className="text-gray-400 text-sm space-y-2">
-          <p>OK <code className="text-purple-400">api.health.get()</code> - Full type inference from server</p>
-          <p>OK <code className="text-purple-400">api.users.post({'{ name, email }'})</code> - Request body is typed</p>
-          <p>OK <code className="text-purple-400">{'{ data, error }'}</code> - Response is typed automatically</p>
+          <p>OK <code className="text-theme">api.health.get()</code> - Full type inference from server</p>
+          <p>OK <code className="text-theme">api.users.post({'{ name, email }'})</code> - Request body is typed</p>
+          <p>OK <code className="text-theme">{'{ data, error }'}</code> - Response is typed automatically</p>
         </div>
       </div>
     </div>