create-fluxstack 1.18.0 → 1.19.0

package/app/client/src/components/ThemePicker.tsx

@@ -0,0 +1,307 @@
+/**
+ * ThemePicker — floating panel with interactive color wheel
+ */
+import { useState, useCallback, useRef } from 'react'
+import { buildPaletteFromHues, applyPalette, type ColorPalette } from '../lib/theme-clock'
+import { ColorWheel, generateHuesFromMode, type HarmonyMode } from './ColorWheel'
+import { createPortal } from 'react-dom'
+
+interface ThemePickerProps {
+  palette: ColorPalette
+  onOverride: (palette: ColorPalette | null) => void
+}
+
+const harmonyModes: { mode: HarmonyMode; label: string; icon: string }[] = [
+  { mode: 'analogous', label: 'Análogo', icon: '◐' },
+  { mode: 'complementary', label: 'Complementar', icon: '◑' },
+  { mode: 'triadic', label: 'Triádico', icon: '△' },
+  { mode: 'split-complementary', label: 'Split', icon: '⋔' },
+  { mode: 'square', label: 'Quadrado', icon: '◻' },
+  { mode: 'custom', label: 'Custom', icon: '✦' },
+]
+
+function getHueName(hue: number): string {
+  const h = ((hue % 360) + 360) % 360
+  if (h < 15 || h >= 345) return 'red'
+  if (h < 45) return 'orange'
+  if (h < 75) return 'yellow'
+  if (h < 105) return 'lime'
+  if (h < 135) return 'green'
+  if (h < 165) return 'teal'
+  if (h < 195) return 'cyan'
+  if (h < 225) return 'blue'
+  if (h < 255) return 'indigo'
+  if (h < 285) return 'purple'
+  if (h < 315) return 'pink'
+  return 'magenta'
+}
+
+function huesToPalette(hues: number[]): ColorPalette {
+  return buildPaletteFromHues(hues[0], 'midday', {
+    secondary: hues[1],
+    tertiary: hues[2],
+    complement: hues[3],
+    accent: hues[4],
+  })
+}
+
+function ConfigModal({ config, palette, onClose }: { config: string; palette: ColorPalette; onClose: () => void }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(config)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+      <div
+        className="relative w-full max-w-lg rounded-2xl p-6 shadow-2xl"
+        style={{ backgroundColor: `oklch(12% 0.015 ${palette.baseHue})`, border: `1px solid ${palette.border}` }}
+        onClick={e => e.stopPropagation()}
+      >
+        <h2 className="text-lg font-bold text-white mb-1">🎨 Fixar Tema</h2>
+        <p className="text-sm text-gray-400 mb-4">
+          Cole este código em <code className="text-theme text-xs px-1.5 py-0.5 rounded bg-white/5">app/client/src/config/theme.config.ts</code>
+        </p>
+
+        <pre
+          className="text-sm font-mono p-4 rounded-xl overflow-x-auto mb-4 leading-relaxed"
+          style={{ backgroundColor: 'rgba(0,0,0,0.4)', border: `1px solid ${palette.border}` }}
+        >
+          <code className="text-gray-300">{config}</code>
+        </pre>
+
+        <div className="flex items-center gap-2 text-xs text-gray-500 mb-4 p-3 rounded-xl" style={{ backgroundColor: palette.bgAccent }}>
+          <span>💡</span>
+          <span>Após colar, o Vite hot reload aplica o tema automaticamente. Para esconder o picker em produção, mantenha <code className="text-theme">showPicker: false</code>.</span>
+        </div>
+
+        <div className="flex gap-2">
+          <button
+            onClick={handleCopy}
+            className="flex-1 py-2.5 rounded-xl text-sm font-medium transition-all"
+            style={copied
+              ? { backgroundColor: 'oklch(70% 0.2 150)', color: 'white' }
+              : { backgroundColor: palette.primary, color: 'white' }
+            }
+          >
+            {copied ? '✓ Copiado!' : '📋 Copiar Código'}
+          </button>
+          <button
+            onClick={onClose}
+            className="px-4 py-2.5 rounded-xl text-sm font-medium btn-theme-ghost"
+          >
+            Fechar
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+export function ThemePicker({ palette, onOverride }: ThemePickerProps) {
+  const [open, setOpen] = useState(false)
+  const [harmonyMode, setHarmonyMode] = useState<HarmonyMode>('analogous')
+  const [hues, setHues] = useState<number[]>(() => generateHuesFromMode(palette.baseHue, 'analogous'))
+  const [isManual, setIsManual] = useState(false)
+  const [showConfigModal, setShowConfigModal] = useState(false)
+  const configRef = useRef('')
+
+  const handleHueChange = useCallback((index: number, hue: number) => {
+    setIsManual(true)
+    setHues(prev => {
+      const next = [...prev]
+      next[index] = hue
+      return next
+    })
+    // Build palette from current hues with the new one
+    const updated = [...hues]
+    updated[index] = hue
+    // Pad to 5 hues
+    while (updated.length < 5) updated.push(updated[0])
+    const p = huesToPalette(updated)
+    applyPalette(p)
+    onOverride(p)
+  }, [hues, onOverride])
+
+  const handleModeChange = useCallback((mode: HarmonyMode) => {
+    setHarmonyMode(mode)
+    const baseHue = hues[0] ?? palette.baseHue
+    const newHues = generateHuesFromMode(baseHue, mode)
+    // Pad to 5 for custom
+    while (newHues.length < 5) newHues.push(baseHue)
+    setHues(newHues)
+    if (isManual) {
+      const p = huesToPalette(newHues)
+      applyPalette(p)
+      onOverride(p)
+    }
+  }, [hues, palette.baseHue, isManual, onOverride])
+
+  const handleAuto = useCallback(() => {
+    setIsManual(false)
+    onOverride(null)
+  }, [onOverride])
+
+  const showConfig = useCallback(() => {
+    const h = hues.map(h => Math.round(h))
+    // Calculate relative offset from primary, normalized to -180..+180
+    const offset = (target: number) => {
+      let d = ((target - h[0]) % 360 + 540) % 360 - 180
+      return d >= 0 ? `+${d}°` : `${d}°`
+    }
+
+    configRef.current = harmonyMode === 'custom'
+      ? `export const themeConfig: ThemeConfig = {
+  mode: 'custom',
+  palette: {
+    primary:    ${h[0]},  // ${getHueName(h[0])} (base)
+    secondary:  ${h[1]},  // ${getHueName(h[1])} (${offset(h[1])} from primary)
+    tertiary:   ${h[2]},  // ${getHueName(h[2])} (${offset(h[2])} from primary)
+    complement: ${h[3]},  // ${getHueName(h[3])} (${offset(h[3])} from primary)
+    accent:     ${h[4]},  // ${getHueName(h[4])} (${offset(h[4])} from primary)
+  },
+  showPicker: false,
+}`
+      : `export const themeConfig: ThemeConfig = {
+  mode: 'fixed',
+  hue: ${h[0]},  // ${getHueName(h[0])}
+  showPicker: false,
+}`
+    setShowConfigModal(true)
+  }, [hues, harmonyMode])
+
+  const swatchLabels = ['Primary', 'Secondary', 'Tertiary', 'Complement', 'Accent']
+  const displayHues = [...hues]
+  while (displayHues.length < 5) displayHues.push(displayHues[0] ?? 0)
+  const displayPalette = isManual ? huesToPalette(displayHues) : palette
+
+  if (!open) {
+    return (
+      <button
+        onClick={() => setOpen(true)}
+        className="fixed bottom-4 right-4 z-50 w-12 h-12 rounded-full shadow-lg flex items-center justify-center text-white text-lg transition-all hover:scale-110 border border-white/10"
+        style={{ background: palette.gradientPrimary }}
+        title="Theme Picker"
+      >
+        🎨
+      </button>
+    )
+  }
+
+  return (
+    <div
+      className="fixed bottom-4 right-4 z-50 rounded-2xl shadow-2xl overflow-hidden"
+      style={{
+        backgroundColor: `oklch(10% 0.015 ${displayPalette.baseHue})`,
+        border: `1px solid ${displayPalette.border}`,
+        width: '320px',
+      }}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2.5"
+        style={{ borderBottom: `1px solid ${displayPalette.border}` }}
+      >
+        <div className="flex items-center gap-2">
+          <span>🎨</span>
+          <span className="text-white text-sm font-semibold">Color Wheel</span>
+          {isManual && (
+            <span className="text-[10px] px-1.5 py-0.5 rounded-full"
+              style={{ backgroundColor: displayPalette.primaryMuted, color: displayPalette.textPrimary }}
+            >
+              {harmonyMode === 'custom' ? 'custom' : Math.round(hues[0]) + '°'}
+            </span>
+          )}
+        </div>
+        <button onClick={() => setOpen(false)}
+          className="text-gray-500 hover:text-white transition-colors text-lg leading-none w-6 h-6 flex items-center justify-center rounded-full hover:bg-white/10"
+        >×</button>
+      </div>
+
+      {/* Color Wheel */}
+      <div className="flex justify-center py-3">
+        <ColorWheel
+          hues={displayHues}
+          mode={harmonyMode}
+          size={210}
+          onChange={handleHueChange}
+        />
+      </div>
+
+      {/* Harmony Mode Selector */}
+      <div className="px-3 pb-2">
+        <div className="flex gap-0.5">
+          {harmonyModes.map(({ mode, label, icon }) => (
+            <button
+              key={mode}
+              onClick={() => handleModeChange(mode)}
+              className={`flex-1 py-1.5 rounded-lg text-xs transition-all ${
+                harmonyMode === mode ? 'font-medium' : 'text-gray-500 hover:text-white'
+              }`}
+              style={harmonyMode === mode ? {
+                backgroundColor: displayPalette.primaryMuted,
+                color: displayPalette.textPrimary,
+              } : undefined}
+              title={label}
+            >
+              {icon}
+            </button>
+          ))}
+        </div>
+        <div className="text-center text-[10px] text-gray-500 mt-0.5">
+          {harmonyModes.find(m => m.mode === harmonyMode)?.label}
+          {harmonyMode === 'custom' && ' — dot = move one · ring = rotate all'}
+        </div>
+      </div>
+
+      {/* Swatches with hue labels */}
+      <div className="px-3 pb-2">
+        <div className="flex gap-1">
+          {displayHues.slice(0, 5).map((h, i) => (
+            <div key={i} className="flex-1 flex flex-col items-center gap-0.5">
+              <div className="w-full h-6 rounded-lg" style={{ backgroundColor: `oklch(65% 0.25 ${h})` }} title={swatchLabels[i]} />
+              <span className="text-[8px] text-gray-600">{Math.round(h)}°</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Gradient preview */}
+      <div className="px-3 pb-2">
+        <div className="h-4 rounded-lg" style={{ background: displayPalette.gradientPrimary }} />
+      </div>
+
+      {/* Actions — always visible */}
+      <div className="px-3 pb-3 flex gap-2">
+        <button
+          onClick={showConfig}
+          className="flex-1 py-1.5 rounded-xl text-xs transition-all hover:opacity-80"
+          style={{ backgroundColor: displayPalette.primaryMuted, color: displayPalette.textPrimary }}
+        >
+          📋 Fixar Tema
+        </button>
+        {isManual && (
+          <button
+            onClick={handleAuto}
+            className="px-3 py-1.5 rounded-xl text-xs transition-all hover:opacity-80 border"
+            style={{ borderColor: displayPalette.border, color: displayPalette.textSecondary }}
+          >
+            ↻
+          </button>
+        )}
+      </div>
+
+      {showConfigModal && (
+        <ConfigModal
+          config={configRef.current}
+          palette={displayPalette}
+          onClose={() => setShowConfigModal(false)}
+        />
+      )}
+    </div>
+  )
+}

package/app/client/src/config/theme.config.ts

@@ -0,0 +1,127 @@
+/**
+ * Theme Configuration
+ *
+ * Control how the app's color palette behaves.
+ *
+ * === Modes ===
+ *
+ *   'auto'   → colors shift with the time of day
+ *   'fixed'  → fixed base hue with default harmony offsets
+ *   'custom' → full control over every color position
+ *
+ * === Examples ===
+ *
+ *   // Auto mode (default)
+ *   export const themeConfig = { mode: 'auto' }
+ *
+ *   // Fixed purple
+ *   export const themeConfig = { mode: 'fixed', hue: 270 }
+ *
+ *   // Custom palette — you define every color offset
+ *   export const themeConfig = {
+ *     mode: 'custom',
+ *     palette: {
+ *       primary:    270,  // purple
+ *       secondary:  310,  // pink (270 + 40)
+ *       tertiary:   240,  // indigo (270 - 30)
+ *       complement:  90,  // yellow (270 + 180)
+ *       accent:      30,  // orange (270 + 120)
+ *     }
+ *   }
+ *
+ *   // Custom with offsets from base — easier to tweak
+ *   export const themeConfig = {
+ *     mode: 'custom',
+ *     hue: 270,
+ *     offsets: {
+ *       secondary:  +50,  // default is +40
+ *       tertiary:   -45,  // default is -30
+ *       complement: +160, // default is +180
+ *       accent:     +100, // default is +120
+ *     }
+ *   }
+ *
+ * === Hue Reference ===
+ *   0°   = Red        180° = Cyan
+ *   30°  = Orange     210° = Blue
+ *   60°  = Yellow     270° = Purple
+ *   120° = Green      330° = Magenta
+ */
+
+export type ThemeMode = 'auto' | 'fixed' | 'custom'
+
+export interface HarmonyOffsets {
+  /** Offset from base hue for secondary color (default: +40) */
+  secondary?: number
+  /** Offset from base hue for tertiary color (default: -30) */
+  tertiary?: number
+  /** Offset from base hue for complement color (default: +180) */
+  complement?: number
+  /** Offset from base hue for accent color (default: +120) */
+  accent?: number
+}
+
+export interface CustomPalette {
+  /** Absolute hue for primary (0-360) */
+  primary: number
+  /** Absolute hue for secondary (0-360) */
+  secondary: number
+  /** Absolute hue for tertiary (0-360) */
+  tertiary: number
+  /** Absolute hue for complement (0-360) */
+  complement: number
+  /** Absolute hue for accent (0-360) */
+  accent: number
+}
+
+export interface ThemeConfig {
+  /** 'auto' = shifts with time, 'fixed' = one hue, 'custom' = full control */
+  mode: ThemeMode
+  /** Base hue (0-360) — used in 'fixed' and 'custom' with offsets */
+  hue?: number
+  /** Custom harmony offsets from base hue — used in 'custom' mode */
+  offsets?: HarmonyOffsets
+  /** Absolute hue positions — used in 'custom' mode (overrides offsets) */
+  palette?: CustomPalette
+  /** Show the floating theme picker (default: true in dev) */
+  showPicker?: boolean
+}
+
+// ===== Default harmony offsets =====
+export const DEFAULT_OFFSETS: Required<HarmonyOffsets> = {
+  secondary: 40,
+  tertiary: -30,
+  complement: 180,
+  accent: 120,
+}
+
+export const themeConfig: ThemeConfig = {
+  mode: 'fixed',
+  hue: 270,  // purple
+
+  // ── Auto mode — colors shift with the time of day ─────
+  // mode: 'auto',
+
+  // ── Custom mode with offsets from base hue ────────────
+  // mode: 'custom',
+  // hue: 270,
+  // offsets: {
+  //   secondary:  +40,
+  //   tertiary:   -30,
+  //   complement: +180,
+  //   accent:     +120,
+  // },
+
+  // ── Custom mode with absolute hue positions ───────────
+  // mode: 'custom',
+  // palette: {
+  //   primary:    270,  // purple
+  //   secondary:  310,  // pink
+  //   tertiary:   240,  // indigo
+  //   complement:  90,  // yellow
+  //   accent:      30,  // orange
+  // },
+
+  // Show color wheel picker (🎨) — visible in dev only
+  showPicker: import.meta.env.DEV,
+}

package/app/client/src/hooks/useThemeClock.ts

@@ -0,0 +1,66 @@
+/**
+ * React hook for the palette system — respects theme.config.ts
+ *
+ * Modes:
+ * - 'auto'   → palette shifts with time (updates every 30s)
+ * - 'fixed'  → palette stays on configured hue with default offsets
+ * - 'custom' → palette uses custom offsets or absolute hue positions
+ */
+import { useState, useEffect } from 'react'
+import { generatePalette, buildPaletteFromHues, applyPalette, type ColorPalette } from '../lib/theme-clock'
+import { themeConfig, DEFAULT_OFFSETS } from '../config/theme.config'
+
+function getConfiguredPalette(): ColorPalette {
+  const { mode, hue, offsets, palette } = themeConfig
+
+  if (mode === 'custom') {
+    // Absolute palette — each hue is defined explicitly
+    if (palette) {
+      return buildPaletteFromHues(palette.primary, 'midday', {
+        secondary: palette.secondary,
+        tertiary: palette.tertiary,
+        complement: palette.complement,
+        accent: palette.accent,
+      })
+    }
+
+    // Offsets from base hue
+    if (hue !== undefined) {
+      const o = { ...DEFAULT_OFFSETS, ...offsets }
+      return buildPaletteFromHues(hue, 'midday', {
+        secondary: hue + o.secondary,
+        tertiary: hue + o.tertiary,
+        complement: hue + o.complement,
+        accent: hue + o.accent,
+      })
+    }
+  }
+
+  if (mode === 'fixed' && hue !== undefined) {
+    return buildPaletteFromHues(hue, 'midday')
+  }
+
+  // Auto mode
+  return generatePalette()
+}
+
+export function useThemeClock(): ColorPalette {
+  const [palette, setPalette] = useState<ColorPalette>(getConfiguredPalette)
+
+  useEffect(() => {
+    const initial = getConfiguredPalette()
+    setPalette(initial)
+    applyPalette(initial)
+
+    if (themeConfig.mode === 'auto') {
+      const interval = setInterval(() => {
+        const p = generatePalette()
+        setPalette(p)
+        applyPalette(p)
+      }, 30_000)
+      return () => clearInterval(interval)
+    }
+  }, [])
+
+  return palette
+}

package/app/client/src/index.css

@@ -1,5 +1,198 @@
 @import "tailwindcss";
 
+/* ===== Theme Clock CSS Variables ===== */
+/* Default values (overridden at runtime by theme-clock.ts) */
+:root {
+  --theme-hue: 270;
+  --theme-primary: oklch(65% 0.25 270);
+  --theme-secondary: oklch(70% 0.20 310);
+  --theme-tertiary: oklch(60% 0.22 240);
+  --theme-complement: oklch(68% 0.18 90);
+  --theme-accent: oklch(72% 0.20 30);
+  --theme-primary-muted: oklch(65% 0.25 270 / 0.15);
+  --theme-secondary-muted: oklch(70% 0.20 310 / 0.10);
+  --theme-primary-glow: oklch(65% 0.25 270 / 0.3);
+  --theme-secondary-glow: oklch(70% 0.20 310 / 0.2);
+  --theme-bg-accent: oklch(65% 0.25 270 / 0.08);
+  --theme-bg-accent2: oklch(70% 0.20 310 / 0.05);
+  --theme-text-primary: oklch(80% 0.15 270);
+  --theme-text-secondary: oklch(75% 0.12 310);
+  --theme-text-muted: oklch(55% 0.05 270);
+  --theme-border: oklch(65% 0.25 270 / 0.12);
+  --theme-border-active: oklch(65% 0.25 270 / 0.3);
+}
+
+/* ===== Theme utility classes ===== */
+/* Use these instead of fixed purple-500 etc. for dynamic theming */
+.text-theme           { color: var(--theme-primary); }
+.text-theme-secondary { color: var(--theme-secondary); }
+.text-theme-muted     { color: var(--theme-text-muted); }
+.bg-theme             { background-color: var(--theme-primary); }
+.bg-theme-muted       { background-color: var(--theme-primary-muted); }
+.bg-theme-accent      { background-color: var(--theme-bg-accent); }
+.border-theme         { border-color: var(--theme-border); }
+.border-theme-active  { border-color: var(--theme-border-active); }
+.shadow-theme         { box-shadow: 0 4px 14px var(--theme-primary-glow); }
+.glow-theme           { filter: drop-shadow(0 0 12px var(--theme-primary-glow)); }
+
+.bg-theme-gradient {
+  background-image: var(--theme-gradient-primary,
+    linear-gradient(to right, var(--theme-primary), var(--theme-secondary)));
+}
+
+/* Hover variants */
+.hover\:bg-theme-muted:hover { background-color: var(--theme-primary-muted); }
+.hover\:border-theme:hover   { border-color: var(--theme-border-active); }
+.hover\:text-theme:hover     { color: var(--theme-primary); }
+.hover\:bg-theme:hover       { background-color: var(--theme-primary); }
+.hover\:shadow-theme:hover   { box-shadow: 0 8px 24px var(--theme-primary-glow); }
+
+/* ===== Themed component classes ===== */
+
+/* Primary button — filled with theme color */
+.btn-theme {
+  background-color: var(--theme-primary);
+  color: white;
+  border-radius: 0.75rem;
+  padding: 0.5rem 1.25rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.15s;
+  box-shadow: 0 4px 14px var(--theme-primary-glow);
+}
+.btn-theme:hover {
+  filter: brightness(1.1);
+  box-shadow: 0 8px 24px var(--theme-primary-glow);
+}
+.btn-theme:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Outline button — border with theme color */
+.btn-theme-outline {
+  background-color: var(--theme-primary-muted);
+  color: var(--theme-text-primary);
+  border: 1px solid var(--theme-border-active);
+  border-radius: 0.75rem;
+  padding: 0.5rem 1.25rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.15s;
+}
+.btn-theme-outline:hover {
+  background-color: var(--theme-primary);
+  color: white;
+}
+
+/* Ghost button — subtle theme tint */
+.btn-theme-ghost {
+  background-color: transparent;
+  color: var(--theme-text-primary);
+  border-radius: 0.75rem;
+  padding: 0.5rem 1.25rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  transition: all 0.15s;
+}
+.btn-theme-ghost:hover {
+  background-color: var(--theme-primary-muted);
+}
+
+/* Themed input */
+.input-theme {
+  background-color: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--theme-border);
+  border-radius: 0.75rem;
+  padding: 0.625rem 1rem;
+  color: white;
+  font-size: 0.875rem;
+  transition: border-color 0.15s;
+  outline: none;
+}
+.input-theme:focus {
+  border-color: var(--theme-primary);
+  box-shadow: 0 0 0 2px var(--theme-primary-glow);
+}
+.input-theme::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+/* Themed card */
+.card-theme {
+  background-color: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--theme-border);
+  border-radius: 0.75rem;
+  transition: all 0.2s;
+}
+.card-theme:hover {
+  background-color: rgba(255, 255, 255, 0.04);
+  border-color: var(--theme-border-active);
+}
+
+/* Themed badge/tag */
+.badge-theme {
+  background-color: var(--theme-primary-muted);
+  color: var(--theme-text-primary);
+  border-radius: 9999px;
+  padding: 0.125rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Complement/accent colored buttons */
+.btn-complement {
+  background-color: color-mix(in oklch, var(--theme-complement) 20%, transparent);
+  color: var(--theme-complement);
+  border: 1px solid color-mix(in oklch, var(--theme-complement) 30%, transparent);
+  border-radius: 0.75rem;
+  transition: all 0.15s;
+}
+.btn-complement:hover {
+  background-color: color-mix(in oklch, var(--theme-complement) 30%, transparent);
+}
+
+.btn-accent {
+  background-color: color-mix(in oklch, var(--theme-accent) 20%, transparent);
+  color: var(--theme-accent);
+  border: 1px solid color-mix(in oklch, var(--theme-accent) 30%, transparent);
+  border-radius: 0.75rem;
+  transition: all 0.15s;
+}
+.btn-accent:hover {
+  background-color: color-mix(in oklch, var(--theme-accent) 30%, transparent);
+}
+
+.btn-secondary {
+  background-color: color-mix(in oklch, var(--theme-secondary) 20%, transparent);
+  color: var(--theme-secondary);
+  border: 1px solid color-mix(in oklch, var(--theme-secondary) 30%, transparent);
+  border-radius: 0.75rem;
+  transition: all 0.15s;
+}
+.btn-secondary:hover {
+  background-color: color-mix(in oklch, var(--theme-secondary) 30%, transparent);
+}
+
+.btn-tertiary {
+  background-color: color-mix(in oklch, var(--theme-tertiary) 20%, transparent);
+  color: var(--theme-tertiary);
+  border: 1px solid color-mix(in oklch, var(--theme-tertiary) 30%, transparent);
+  border-radius: 0.75rem;
+  transition: all 0.15s;
+}
+.btn-tertiary:hover {
+  background-color: color-mix(in oklch, var(--theme-tertiary) 30%, transparent);
+}
+
+/* Themed scrollbar */
+::-webkit-scrollbar-thumb {
+  background: var(--theme-border) !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-border-active) !important;
+}
+
 /* Base styles */
 * {
   box-sizing: border-box;