diff --git a/ui/suite/js/theme-manager.js b/ui/suite/js/theme-manager.js index f12db48..de46828 100644 --- a/ui/suite/js/theme-manager.js +++ b/ui/suite/js/theme-manager.js @@ -4,7 +4,8 @@ const ThemeManager = (() => { let subscribers = []; const themes = [ - { id: "default", name: "🎨 Default", file: null }, + { id: "default", name: "🎨 Default", file: "light.css" }, + { id: "light", name: "☀️ Light", file: "light.css" }, { id: "orange", name: "🍊 Orange", file: "orange.css" }, { id: "cyberpunk", name: "🌃 Cyberpunk", file: "cyberpunk.css" }, { id: "retrowave", name: "🌴 Retrowave", file: "retrowave.css" }, @@ -17,16 +18,24 @@ const ThemeManager = (() => { { id: "jazzage", name: "🎺 Jazz", file: "jazzage.css" }, { id: "mellowgold", name: "🌻 Mellow", file: "mellowgold.css" }, { id: "midcenturymod", name: "🏠 Mid Century", file: "midcenturymod.css" }, - { id: "polaroidmemories", name: "📷 Polaroid", file: "polaroidmemories.css" }, - { id: "saturdaycartoons", name: "📺 Cartoons", file: "saturdaycartoons.css" }, + { + id: "polaroidmemories", + name: "📷 Polaroid", + file: "polaroidmemories.css", + }, + { + id: "saturdaycartoons", + name: "📺 Cartoons", + file: "saturdaycartoons.css", + }, { id: "seasidepostcard", name: "🏖️ Seaside", file: "seasidepostcard.css" }, { id: "typewriter", name: "⌨️ Typewriter", file: "typewriter.css" }, { id: "xeroxui", name: "📠 Xerox", file: "xeroxui.css" }, - { id: "xtreegold", name: "📁 XTree", file: "xtreegold.css" } + { id: "xtreegold", name: "📁 XTree", file: "xtreegold.css" }, ]; function loadTheme(id) { - const theme = themes.find(t => t.id === id); + const theme = themes.find((t) => t.id === id); if (!theme) { console.warn("Theme not found:", id); return; @@ -51,7 +60,7 @@ const ThemeManager = (() => { currentThemeId = id; localStorage.setItem("gb-theme", id); updateDropdown(); - subscribers.forEach(cb => cb({ themeId: id, themeName: theme.name })); + subscribers.forEach((cb) => cb({ themeId: id, themeName: theme.name })); }; link.onerror = () => console.error("✗ Failed:", theme.name); document.head.appendChild(link); @@ -66,7 +75,7 @@ const ThemeManager = (() => { const select = document.createElement("select"); select.id = "themeDropdown"; select.className = "theme-dropdown"; - themes.forEach(t => { + themes.forEach((t) => { const opt = document.createElement("option"); opt.value = t.id; opt.textContent = t.name; @@ -79,25 +88,27 @@ const ThemeManager = (() => { function init() { let saved = localStorage.getItem("gb-theme") || "default"; - if (!themes.find(t => t.id === saved)) saved = "default"; + if (!themes.find((t) => t.id === saved)) saved = "default"; currentThemeId = saved; loadTheme(saved); - + const container = document.getElementById("themeSelectorContainer"); if (container) container.appendChild(createDropdown()); - + console.log("✓ Theme Manager initialized"); } function setThemeFromServer(data) { if (data.logo_url) { - document.querySelectorAll(".logo-icon, .assistant-avatar").forEach(el => { - el.style.backgroundImage = `url("${data.logo_url}")`; - }); + document + .querySelectorAll(".logo-icon, .assistant-avatar") + .forEach((el) => { + el.style.backgroundImage = `url("${data.logo_url}")`; + }); } if (data.title) document.title = data.title; if (data.logo_text) { - document.querySelectorAll(".logo-text").forEach(el => { + document.querySelectorAll(".logo-text").forEach((el) => { el.textContent = data.logo_text; }); } @@ -111,7 +122,14 @@ const ThemeManager = (() => { subscribers.push(cb); } - return { init, loadTheme, setThemeFromServer, applyCustomizations, subscribe, getAvailableThemes: () => themes }; + return { + init, + loadTheme, + setThemeFromServer, + applyCustomizations, + subscribe, + getAvailableThemes: () => themes, + }; })(); window.ThemeManager = ThemeManager; diff --git a/ui/suite/public/themes/light.css b/ui/suite/public/themes/light.css new file mode 100644 index 0000000..5e628f6 --- /dev/null +++ b/ui/suite/public/themes/light.css @@ -0,0 +1,91 @@ +:root { + /* Light Theme - Clean white background */ + --background: 0 0% 100%; /* Pure white */ + --foreground: 222 47% 11%; /* Dark blue-gray text */ + --card: 0 0% 98%; /* Slightly off-white */ + --card-foreground: 222 47% 11%; + --popover: 0 0% 100%; + --popover-foreground: 222 47% 11%; + --primary: 217 91% 60%; /* Blue */ + --primary-foreground: 0 0% 100%; + --secondary: 214 32% 91%; /* Light gray */ + --secondary-foreground: 222 47% 11%; + --muted: 214 32% 91%; + --muted-foreground: 215 16% 47%; + --accent: 214 32% 91%; + --accent-foreground: 222 47% 11%; + --destructive: 0 84% 60%; + --destructive-foreground: 0 0% 98%; + --border: 214 32% 91%; + --input: 0 0% 100%; + --ring: 217 91% 60%; + --radius: 0.5rem; + --chart-1: 217 91% 60%; + --chart-2: 142 76% 36%; + --chart-3: 47 96% 53%; + --chart-4: 280 83% 57%; + --chart-5: 27 87% 67%; + + /* ============================================ */ + /* SENTIENT BRIDGE VARIABLES */ + /* For Sheet, Docs, Slides theme support */ + /* ============================================ */ + + /* Backgrounds */ + --sentient-bg-primary: #ffffff; + --sentient-bg-secondary: #fafafa; + --sentient-bg-tertiary: #f5f5f5; + --sentient-bg-hover: rgba(59, 130, 246, 0.08); + --sentient-bg-active: rgba(59, 130, 246, 0.15); + + /* Text */ + --sentient-text-primary: #1e293b; + --sentient-text-secondary: #64748b; + --sentient-text-tertiary: #94a3b8; + --sentient-text-muted: #cbd5e1; + + /* Accent Colors */ + --sentient-accent: #3b82f6; + --sentient-accent-hover: #2563eb; + --sentient-accent-light: rgba(59, 130, 246, 0.1); + --sentient-accent-dark: #1d4ed8; + + /* Borders */ + --sentient-border: #e2e8f0; + --sentient-border-light: #f1f5f9; + --sentient-border-accent: rgba(59, 130, 246, 0.3); + + /* Surfaces */ + --sentient-surface: #fafafa; + --sentient-surface-hover: #f1f5f9; + --sentient-surface-active: #e2e8f0; + --sentient-surface-elevated: #ffffff; + + /* Inputs */ + --sentient-input-bg: #ffffff; + --sentient-input-border: #e2e8f0; + --sentient-input-focus: #3b82f6; + + /* Status Colors */ + --sentient-success: #22c55e; + --sentient-success-bg: rgba(34, 197, 94, 0.15); + --sentient-warning: #f59e0b; + --sentient-warning-bg: rgba(245, 158, 11, 0.15); + --sentient-error: #ef4444; + --sentient-error-bg: rgba(239, 68, 68, 0.15); + + /* Typography */ + --sentient-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + + /* Shadows */ + --sentient-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --sentient-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --sentient-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + + /* Border Radius */ + --sentient-radius: 0.5rem; + --sentient-radius-sm: 0.25rem; + --sentient-radius-md: 0.5rem; + --sentient-radius-lg: 0.75rem; + --sentient-radius-xl: 1rem; +}