diff --git a/packages/ui/src/components/code-block-inline.tsx b/packages/ui/src/components/code-block-inline.tsx index 92b3f935..dc26c153 100644 --- a/packages/ui/src/components/code-block-inline.tsx +++ b/packages/ui/src/components/code-block-inline.tsx @@ -55,7 +55,7 @@ export function CodeBlockInline(props: CodeBlockInlineProps) { const highlighted = highlighter.codeToHtml(props.code, { lang: props.language as CodeToHtmlOptions["lang"], - theme: isDark() ? "github-dark" : "github-light", + theme: isDark() ? "github-dark" : "github-light-high-contrast", }) setHtml(highlighted) } catch { diff --git a/packages/ui/src/components/folder-selection-view.tsx b/packages/ui/src/components/folder-selection-view.tsx index fef0c1f3..a77e3547 100644 --- a/packages/ui/src/components/folder-selection-view.tsx +++ b/packages/ui/src/components/folder-selection-view.tsx @@ -5,6 +5,7 @@ import { useConfig } from "../stores/preferences" import AdvancedSettingsModal from "./advanced-settings-modal" import DirectoryBrowserDialog from "./directory-browser-dialog" import Kbd from "./kbd" +import { ThemeModeToggle } from "./theme-mode-toggle" import { openNativeFolderDialog, supportsNativeDialogs } from "../lib/native/native-functions" import VersionPill from "./version-pill" import { DiscordSymbolIcon, GitHubMarkIcon } from "./brand-icons" @@ -313,8 +314,9 @@ const FolderSelectionView: Component = (props) => { - -
+
+ + -
- + +
{t("folderSelection.logoAlt")} diff --git a/packages/ui/src/components/instance-tabs.tsx b/packages/ui/src/components/instance-tabs.tsx index 2a244cbf..c525de60 100644 --- a/packages/ui/src/components/instance-tabs.tsx +++ b/packages/ui/src/components/instance-tabs.tsx @@ -5,6 +5,7 @@ import KeyboardHint from "./keyboard-hint" import { Plus, MonitorUp } from "lucide-solid" import { keyboardRegistry } from "../lib/keyboard-registry" import { useI18n } from "../lib/i18n" +import { ThemeModeToggle } from "./theme-mode-toggle" interface InstanceTabsProps { instances: Map @@ -52,6 +53,7 @@ const InstanceTabs: Component = (props) => { />
+
-
+
= (props) => { return (
-
- +
+ {t("instanceShell.rightPanel.title")}
@@ -1331,13 +1331,13 @@ const InstanceShell2: Component = (props) => {
- + {t("instanceShell.metrics.usedLabel")} {formattedUsedTokens()}
- + {t("instanceShell.metrics.availableLabel")} {formattedAvailableTokens()} @@ -1361,13 +1361,13 @@ const InstanceShell2: Component = (props) => {
- + {t("instanceShell.metrics.usedLabel")} {formattedUsedTokens()}
- + {t("instanceShell.metrics.availableLabel")} {formattedAvailableTokens()} diff --git a/packages/ui/src/components/message-list-header.tsx b/packages/ui/src/components/message-list-header.tsx index 78a1d7b4..dab3d361 100644 --- a/packages/ui/src/components/message-list-header.tsx +++ b/packages/ui/src/components/message-list-header.tsx @@ -3,7 +3,7 @@ import Kbd from "./kbd" import { useI18n } from "../lib/i18n" const METRIC_CHIP_CLASS = "inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary" -const METRIC_LABEL_CLASS = "uppercase text-[10px] tracking-wide text-primary/70" +const METRIC_LABEL_CLASS = "uppercase text-[10px] tracking-wide text-muted" interface MessageListHeaderProps { usedTokens: number diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx index 50e7759f..1256d353 100644 --- a/packages/ui/src/components/message-part.tsx +++ b/packages/ui/src/components/message-part.tsx @@ -103,15 +103,15 @@ interface MessagePartProps {
- {plainTextContent()}} - > - {plainTextContent()}} + > + diff --git a/packages/ui/src/components/session/context-usage-panel.tsx b/packages/ui/src/components/session/context-usage-panel.tsx index 004709a9..d0fb64b4 100644 --- a/packages/ui/src/components/session/context-usage-panel.tsx +++ b/packages/ui/src/components/session/context-usage-panel.tsx @@ -9,8 +9,8 @@ interface ContextUsagePanelProps { } const chipClass = "inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary" -const chipLabelClass = "uppercase text-[10px] tracking-wide text-primary/70" -const headingClass = "text-xs font-semibold text-primary/70 uppercase tracking-wide" +const chipLabelClass = "uppercase text-[10px] tracking-wide text-muted" +const headingClass = "text-xs font-semibold text-muted uppercase tracking-wide" const ContextUsagePanel: Component = (props) => { const { t } = useI18n() @@ -49,7 +49,7 @@ const ContextUsagePanel: Component = (props) => { return (
-
+
{t("contextUsagePanel.headings.tokens")}
{t("contextUsagePanel.labels.input")} @@ -65,7 +65,7 @@ const ContextUsagePanel: Component = (props) => {
-
+
{t("contextUsagePanel.headings.context")}
{t("contextUsagePanel.labels.used")} diff --git a/packages/ui/src/components/theme-mode-toggle.tsx b/packages/ui/src/components/theme-mode-toggle.tsx new file mode 100644 index 00000000..f5246fff --- /dev/null +++ b/packages/ui/src/components/theme-mode-toggle.tsx @@ -0,0 +1,39 @@ +import { createMemo, type Component } from "solid-js" +import { Laptop, Moon, Sun } from "lucide-solid" +import { useI18n } from "../lib/i18n" +import { useTheme } from "../lib/theme" + +interface ThemeModeToggleProps { + class?: string +} + +export const ThemeModeToggle: Component = (props) => { + const { t } = useI18n() + const { themeMode, cycleThemeMode } = useTheme() + + const modeLabel = () => { + const mode = themeMode() + if (mode === "system") return t("theme.mode.system") + if (mode === "light") return t("theme.mode.light") + return t("theme.mode.dark") + } + + const icon = createMemo(() => { + const mode = themeMode() + if (mode === "system") return + if (mode === "light") return + return + }) + + return ( + + ) +} diff --git a/packages/ui/src/lib/i18n/messages/en/app.ts b/packages/ui/src/lib/i18n/messages/en/app.ts index 3a9345d3..ec1600e6 100644 --- a/packages/ui/src/lib/i18n/messages/en/app.ts +++ b/packages/ui/src/lib/i18n/messages/en/app.ts @@ -29,4 +29,10 @@ export const appMessages = { "releases.uiUpdated.title": "UI updated", "releases.uiUpdated.message": "UI is now updated to {version}.", + + "theme.mode.system": "System", + "theme.mode.light": "Light", + "theme.mode.dark": "Dark", + "theme.toggle.title": "Theme: {mode}", + "theme.toggle.ariaLabel": "Theme: {mode}", } as const diff --git a/packages/ui/src/lib/markdown.ts b/packages/ui/src/lib/markdown.ts index 87cdd10e..a8287d15 100644 --- a/packages/ui/src/lib/markdown.ts +++ b/packages/ui/src/lib/markdown.ts @@ -91,7 +91,7 @@ async function getOrCreateHighlighter() { // Create highlighter with no preloaded languages highlighterPromise = createHighlighter({ - themes: ["github-light", "github-dark"], + themes: ["github-light", "github-light-high-contrast", "github-dark"], langs: [], }) @@ -242,9 +242,9 @@ async function runLanguageLoadQueue() { } function setupRenderer(isDark: boolean) { - if (!highlighter || rendererSetup) return - currentTheme = isDark ? "dark" : "light" + if (!highlighter) return + if (rendererSetup) return marked.setOptions({ breaks: true, @@ -296,10 +296,10 @@ function setupRenderer(isDark: boolean) { // Use highlighting if language is loaded, otherwise fall back to plain code if (loadedLanguages.has(langKey)) { try { - const html = highlighter!.codeToHtml(decodedCode, { - lang: langKey, - theme: currentTheme === "dark" ? "github-dark" : "github-light", - }) + const html = highlighter!.codeToHtml(decodedCode, { + lang: langKey, + theme: currentTheme === "dark" ? "github-dark" : "github-light-high-contrast", + }) return `
${header}${html}
` } catch { // Fall through to plain code if highlighting fails diff --git a/packages/ui/src/lib/theme.tsx b/packages/ui/src/lib/theme.tsx index 7bff6d33..654bb772 100644 --- a/packages/ui/src/lib/theme.tsx +++ b/packages/ui/src/lib/theme.tsx @@ -3,22 +3,24 @@ import { createTheme, ThemeProvider as MuiThemeProvider } from "@suid/material/s import CssBaseline from "@suid/material/CssBaseline" import { useConfig } from "../stores/preferences" +export type ThemeMode = "system" | "light" | "dark" + interface ThemeContextValue { isDark: () => boolean - toggleTheme: () => void - setTheme: (dark: boolean) => void + themeMode: () => ThemeMode + setThemeMode: (mode: ThemeMode) => void + cycleThemeMode: () => void } const ThemeContext = createContext() -function applyTheme(dark: boolean) { +function applyThemeMode(mode: ThemeMode) { if (typeof document === "undefined") return - if (dark) { - document.documentElement.setAttribute("data-theme", "dark") + if (mode === "system") { + document.documentElement.removeAttribute("data-theme") return } - - document.documentElement.removeAttribute("data-theme") + document.documentElement.setAttribute("data-theme", mode) } interface ResolvedPaletteColors { @@ -76,24 +78,45 @@ const resolvePaletteColors = (dark: boolean): ResolvedPaletteColors => { export function ThemeProvider(props: { children: JSX.Element }) { const mediaQuery = typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)") : null - const { themePreference, setThemePreference } = useConfig() + const { themePreference } = useConfig() const [isDark, setIsDarkSignal] = createSignal(true) + const [themeMode, setThemeModeSignal] = createSignal(themePreference()) + const [hasUserOverride, setHasUserOverride] = createSignal(false) + const [themeRevision, setThemeRevision] = createSignal(0) const resolveDarkTheme = () => { - themePreference() - return true + const mode = themeMode() + if (mode === "dark") return true + if (mode === "light") return false + return mediaQuery?.matches ?? false } const applyResolvedTheme = () => { + const mode = themeMode() const dark = resolveDarkTheme() + if (mode === "system") { + applyThemeMode("system") + } else { + applyThemeMode(mode) + } setIsDarkSignal(dark) - applyTheme(dark) + if (typeof window !== "undefined") { + requestAnimationFrame(() => setThemeRevision((v) => v + 1)) + } else { + setThemeRevision((v) => v + 1) + } } createEffect(() => { applyResolvedTheme() }) + createEffect(() => { + const preference = themePreference() + if (hasUserOverride()) return + setThemeModeSignal(preference) + }) + onMount(() => { if (!mediaQuery) return const handleSystemThemeChange = () => { @@ -107,15 +130,21 @@ export function ThemeProvider(props: { children: JSX.Element }) { } }) - const setTheme = (_dark: boolean) => { - setThemePreference("dark") + const setThemeMode = (mode: ThemeMode) => { + setHasUserOverride(true) + setThemeModeSignal(mode) + // Persistence is intentionally implemented later. + // When we wire it up, this should call `setThemePreference(mode)`. } - const toggleTheme = () => { - setTheme(true) + const cycleThemeMode = () => { + const current = themeMode() + const next: ThemeMode = current === "system" ? "light" : current === "light" ? "dark" : "system" + setThemeMode(next) } const muiTheme = createMemo(() => { + themeRevision() const paletteColors = resolvePaletteColors(isDark()) return createTheme({ palette: { @@ -144,21 +173,32 @@ export function ThemeProvider(props: { children: JSX.Element }) { borderRadius: 8, }, components: { + MuiIconButton: { + styleOverrides: { + root: { + color: "inherit", + "&.Mui-disabled": { + color: "var(--text-muted)", + opacity: 0.55, + }, + }, + }, + }, MuiDrawer: { styleOverrides: { paper: { - backgroundColor: paletteColors.backgroundPaper, - color: paletteColors.textPrimary, + backgroundColor: "var(--surface-secondary)", + color: "var(--text-primary)", }, }, }, MuiAppBar: { styleOverrides: { root: { - backgroundColor: paletteColors.backgroundPaper, - color: paletteColors.textPrimary, + backgroundColor: "var(--surface-secondary)", + color: "var(--text-primary)", boxShadow: "none", - borderBottom: `1px solid ${paletteColors.divider}`, + borderBottom: "1px solid var(--border-base)", zIndex: 10, }, }, @@ -175,7 +215,7 @@ export function ThemeProvider(props: { children: JSX.Element }) { }) return ( - + {props.children} diff --git a/packages/ui/src/renderer/loading/loading.css b/packages/ui/src/renderer/loading/loading.css index 532e1543..c26c8ea7 100644 --- a/packages/ui/src/renderer/loading/loading.css +++ b/packages/ui/src/renderer/loading/loading.css @@ -1,12 +1,12 @@ :root { - color-scheme: dark; + color-scheme: light dark; } body { margin: 0; min-height: 100vh; - background-color: var(--surface-base, #0f141f); - color: var(--text-primary, #cfd4dc); + background-color: var(--surface-base, #ffffff); + color: var(--text-primary, #1a1a1a); font-family: var(--font-family-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); display: flex; align-items: center; @@ -34,7 +34,7 @@ button { .loading-logo { width: 180px; height: auto; - filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.45)); + filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.18)); } .loading-heading { @@ -47,13 +47,13 @@ button { font-size: 2.8rem; font-weight: 600; margin: 0; - color: var(--text-primary, #f4f6fb); + color: var(--text-primary, #1a1a1a); } .loading-status { margin: 0; font-size: 1rem; - color: var(--text-muted, #aeb3c4); + color: var(--text-muted, #666666); } .loading-card { @@ -62,9 +62,9 @@ button { max-width: 420px; padding: 22px; border-radius: 18px; - background: rgba(13, 16, 24, 0.85); - border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55); + background: var(--surface-secondary, #f5f5f5); + border: 1px solid var(--border-base, #e0e0e0); + box-shadow: var(--panel-shadow-strong, 0 25px 60px rgba(0, 0, 0, 0.16)); } .loading-row { @@ -79,28 +79,74 @@ button { width: 20px; height: 20px; border-radius: 50%; - border: 2px solid rgba(255, 255, 255, 0.18); - border-top-color: #6ce3ff; + border: 2px solid color-mix(in srgb, var(--text-primary, #1a1a1a) 14%, transparent); + border-top-color: var(--accent-primary, #0066ff); animation: spin 0.9s linear infinite; } .phrase-controls { margin-top: 12px; font-size: 0.9rem; - color: var(--text-muted, #8f96a9); + color: var(--text-muted, #666666); } .phrase-controls button { - color: #8fb5ff; + color: var(--accent-primary, #0066ff); cursor: pointer; } .loading-error { margin-top: 12px; - color: #ff9ea9; + color: var(--status-error, #dc2626); font-size: 0.95rem; } +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + color-scheme: dark; + } + + :root:not([data-theme="light"]) body { + background-color: var(--surface-base, #0f141f); + color: var(--text-primary, #cfd4dc); + } + + :root:not([data-theme="light"]) .loading-logo { + filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.45)); + } + + :root:not([data-theme="light"]) .loading-title { + color: var(--text-primary, #f4f6fb); + } + + :root:not([data-theme="light"]) .loading-status { + color: var(--text-muted, #aeb3c4); + } + + :root:not([data-theme="light"]) .loading-card { + background: rgba(13, 16, 24, 0.85); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55); + } + + :root:not([data-theme="light"]) .spinner { + border: 2px solid rgba(255, 255, 255, 0.18); + border-top-color: var(--accent-primary, #6ce3ff); + } + + :root:not([data-theme="light"]) .phrase-controls { + color: var(--text-muted, #8f96a9); + } + + :root:not([data-theme="light"]) .loading-error { + color: var(--status-error, #ff9ea9); + } +} + +:root[data-theme="dark"] { + color-scheme: dark; +} + @keyframes spin { from { transform: rotate(0deg); diff --git a/packages/ui/src/styles/components/permission-notification.css b/packages/ui/src/styles/components/permission-notification.css index ccffd2c5..0d990083 100644 --- a/packages/ui/src/styles/components/permission-notification.css +++ b/packages/ui/src/styles/components/permission-notification.css @@ -35,7 +35,7 @@ .permission-center-modal-backdrop { position: fixed; inset: 0; - background: color-mix(in srgb, var(--text-inverted) 55%, transparent); + background: var(--overlay-scrim); backdrop-filter: blur(4px); display: flex; align-items: center; @@ -52,7 +52,7 @@ border-radius: var(--radius-xl); border: 1px solid var(--border-base); background: var(--surface-base); - box-shadow: var(--panel-shadow, 0 12px 32px rgba(0, 0, 0, 0.25)); + box-shadow: var(--panel-shadow-strong); overflow: hidden; } @@ -234,4 +234,4 @@ max-height: none; border-radius: 0; } -} \ No newline at end of file +} diff --git a/packages/ui/src/styles/messaging/message-section.css b/packages/ui/src/styles/messaging/message-section.css index 7cb94733..1579fc3c 100644 --- a/packages/ui/src/styles/messaging/message-section.css +++ b/packages/ui/src/styles/messaging/message-section.css @@ -244,7 +244,7 @@ border-radius: 9999px; border: 1px solid var(--list-item-highlight-border); background-color: var(--list-item-highlight-bg-solid); - box-shadow: var(--panel-shadow, 0 4px 16px rgba(0, 0, 0, 0.2)); + box-shadow: var(--panel-shadow); overflow: hidden; } diff --git a/packages/ui/src/styles/messaging/message-timeline.css b/packages/ui/src/styles/messaging/message-timeline.css index 4d8fda6a..9fe5bc65 100644 --- a/packages/ui/src/styles/messaging/message-timeline.css +++ b/packages/ui/src/styles/messaging/message-timeline.css @@ -69,7 +69,7 @@ overflow-y: auto; border-radius: 8px; background-color: var(--surface-base); - box-shadow: var(--panel-shadow, 0 6px 24px rgba(0, 0, 0, 0.2)); + box-shadow: var(--panel-shadow); } .message-timeline::-webkit-scrollbar { @@ -104,10 +104,10 @@ .message-timeline-segment-active { border-color: transparent; - background-color: #0f5b44; - color: #fff; + background-color: var(--timeline-segment-active-bg); + color: var(--timeline-segment-active-text); font-weight: 700; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); + box-shadow: var(--timeline-segment-active-ring); } .message-timeline-segment:hover, @@ -121,10 +121,10 @@ .message-timeline-segment-active, .message-timeline-segment-active:hover, .message-timeline-segment-active:focus-visible { - background-color: #0f5b44; - color: #fff; + background-color: var(--timeline-segment-active-bg); + color: var(--timeline-segment-active-text); transform: none; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); + box-shadow: var(--timeline-segment-active-ring); } .message-timeline-segment:focus-visible { @@ -167,7 +167,7 @@ border-color: var(--session-status-permission-fg) !important; color: var(--session-status-permission-fg) !important; transform: none; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); + box-shadow: var(--timeline-segment-active-ring); } .message-timeline-compaction-auto { @@ -181,11 +181,11 @@ } .message-timeline-segment-active { - background-color: #0f5b44 !important; + background-color: var(--timeline-segment-active-bg) !important; border-color: transparent !important; - color: #fff !important; + color: var(--timeline-segment-active-text) !important; font-weight: 700; - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); + box-shadow: var(--timeline-segment-active-ring); } .message-timeline-label { @@ -221,7 +221,7 @@ border-radius: 8px; border: 1px solid var(--border-base); background-color: var(--surface-base); - box-shadow: var(--panel-shadow, 0 12px 32px rgba(0, 0, 0, 0.25)); + box-shadow: var(--panel-shadow-strong); padding: 0.75rem; } diff --git a/packages/ui/src/styles/messaging/prompt-input.css b/packages/ui/src/styles/messaging/prompt-input.css index b0c87e5c..b5507031 100644 --- a/packages/ui/src/styles/messaging/prompt-input.css +++ b/packages/ui/src/styles/messaging/prompt-input.css @@ -97,7 +97,7 @@ .prompt-history-button { @apply w-7 h-7 flex items-center justify-center rounded-md; color: var(--text-muted); - background-color: rgba(15, 23, 42, 0.04); + background-color: var(--control-ghost-bg); transition: background-color 0.15s ease, color 0.15s ease; padding: 0; flex-shrink: 0; @@ -143,7 +143,7 @@ .prompt-input.shell-mode { border-color: var(--status-success); - box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.4); + box-shadow: inset 0 0 0 1px var(--status-success-ring); } .prompt-input:focus { @@ -152,7 +152,7 @@ .prompt-input.shell-mode:focus { border-color: var(--status-success); - box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.4); + box-shadow: inset 0 0 0 1px var(--status-success-ring); } .prompt-input:disabled { @@ -165,17 +165,17 @@ .stop-button { @apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0; - background-color: rgba(239, 68, 68, 0.85); - color: var(--text-inverted); + background-color: var(--button-danger-bg); + color: var(--button-danger-text); } .stop-button:hover:not(:disabled) { - background-color: rgba(239, 68, 68, 0.9); + background-color: var(--button-danger-hover-bg); @apply opacity-95 scale-105; } .stop-button:active:not(:disabled) { - background-color: rgba(239, 68, 68, 1); + background-color: var(--button-danger-active-bg); @apply scale-95; } @@ -260,7 +260,7 @@ background-color: var(--surface-base); border: 1px solid var(--border-base); border-radius: 10px; - box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25); + box-shadow: var(--popover-shadow); z-index: 20; } diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css index c0affd09..f39f470a 100644 --- a/packages/ui/src/styles/messaging/tool-call.css +++ b/packages/ui/src/styles/messaging/tool-call.css @@ -11,7 +11,7 @@ .tool-call-header-label { @apply flex items-center justify-between gap-2 font-semibold text-sm; - color: var(--message-tool-border); + color: var(--text-primary); margin-bottom: 1px; } @@ -22,7 +22,7 @@ .tool-call-header-button { background-color: transparent; border: 1px solid var(--border-base); - color: var(--message-tool-border); + color: var(--text-secondary); padding: 0.15rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; @@ -162,7 +162,7 @@ .tool-call-preview-label { @apply text-xs font-semibold uppercase tracking-wide; - color: var(--text-muted); + color: var(--text-secondary); letter-spacing: 0.5px; } @@ -170,7 +170,7 @@ font-family: var(--font-family-mono); font-size: var(--font-size-xs); line-height: var(--line-height-tight); - color: var(--text-muted); + color: var(--text-secondary); white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; @@ -231,7 +231,7 @@ .tool-call-diff-toolbar-label { font-size: 11px; - color: var(--text-muted); + color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; } @@ -244,7 +244,7 @@ @apply border text-xs font-semibold px-3 py-1 rounded transition-all duration-150; border-color: var(--border-base); background-color: transparent; - color: var(--text-muted); + color: var(--text-secondary); } .tool-call-diff-mode-button:hover { @@ -388,7 +388,7 @@ .tool-call-diff-viewer .diff-line-old-num, .tool-call-diff-viewer .diff-line-new-num, .tool-call-diff-viewer .diff-line-num { - color: var(--text-muted); + color: var(--text-secondary); font-size: var(--font-size-xs); } @@ -450,7 +450,7 @@ font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); margin-bottom: 4px; - color: var(--text-muted); + color: var(--text-secondary); } .tool-call-diagnostics { @@ -472,7 +472,7 @@ @apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left; font-family: var(--font-family-mono); font-size: 13px; - color: var(--message-tool-border); + color: var(--text-primary); background-color: var(--surface-code); } @@ -496,7 +496,7 @@ @apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left; font-family: var(--font-family-mono); font-size: 13px; - color: var(--message-tool-border); + color: var(--text-primary); background-color: var(--surface-code); } @@ -535,7 +535,7 @@ .tool-call-diagnostics-caret { font-size: 12px; - color: var(--text-muted); + color: var(--text-secondary); } .tool-call-diagnostics { @@ -615,7 +615,8 @@ .tool-call-section pre { margin: 0; padding: 8px; - background-color: var(--surface-base); + background-color: var(--surface-code); + border: 1px solid var(--border-base); border-radius: 0px; overflow-x: auto; max-height: var(--tool-call-max-height-compact, calc(25 * 1.4em)); @@ -649,7 +650,7 @@ .tool-call-pending-message { @apply flex items-center gap-2 p-3 text-xs italic; - color: var(--text-muted); + color: var(--text-secondary); } .tool-call-emoji { @@ -659,7 +660,7 @@ .tool-call-action-button { @apply border text-xs font-semibold px-3 py-1 rounded transition-colors h-8 flex items-center; border-color: var(--border-base); - color: var(--text-muted); + color: var(--text-secondary); background-color: transparent; } @@ -679,7 +680,7 @@ } .tool-call-content { - background-color: var(--surface-secondary); + background-color: var(--surface-code); border: 1px solid var(--border-base); border-radius: 0; padding: 8px 12px; @@ -688,6 +689,7 @@ line-height: var(--line-height-tight); overflow-x: auto; margin: 0; + color: var(--text-primary); } .tool-call-content code { diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css index 95c5d768..4f8763df 100644 --- a/packages/ui/src/styles/tokens.css +++ b/packages/ui/src/styles/tokens.css @@ -1,9 +1,10 @@ :root { + color-scheme: light; /* Surface tokens */ --surface-base: #ffffff; --surface-secondary: #f5f5f5; - --surface-muted: #f8f9fa; - --surface-code: #f8f8f8; + --surface-muted: #f8fafc; + --surface-code: #f1f5f9; --surface-hover: #e0e0e0; /* Border tokens */ @@ -12,9 +13,9 @@ --border-muted: #e0e0e0; /* Text tokens */ - --text-primary: #1a1a1a; - --text-secondary: #666666; - --text-muted: #666666; + --text-primary: #111827; + --text-secondary: #334155; + --text-muted: #475569; --text-inverted: #ffffff; /* Accent tokens */ @@ -27,13 +28,13 @@ --status-warning: #ff9800; /* Message-specific tokens */ - --message-user-bg: var(--surface-secondary); + --message-user-bg: color-mix(in oklab, var(--surface-secondary) 88%, var(--message-user-border)); --message-user-border: #2196f3; --message-assistant-bg: var(--message-tool-bg); --message-assistant-border: #f59e0b; - --message-tool-bg: #f8f9fa; - --message-tool-border: #6c757d; + --message-tool-bg: #eef2f7; + --message-tool-border: #64748b; /* Session list selection tints */ --session-user-active-bg: color-mix(in oklab, var(--surface-secondary) 85%, var(--message-user-border)); @@ -71,11 +72,14 @@ --folder-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); --folder-card-radius: 16px; --dropdown-highlight-bg: rgba(0, 102, 255, 0.1); - --dropdown-highlight-text: var(--text-inverted); + --dropdown-highlight-text: var(--text-primary); --selection-highlight-bg: rgba(0, 102, 255, 0.12); --selection-highlight-strong-bg: rgba(0, 102, 255, 0.18); --overlay-scrim: rgba(0, 0, 0, 0.5); --scroll-elevation-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); + --panel-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); + --panel-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.18); + --popover-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); --message-error-bg: rgba(244, 67, 54, 0.1); --message-error-bg-strong: rgba(244, 67, 54, 0.15); --danger-soft-bg: rgba(239, 68, 68, 0.1); @@ -86,6 +90,18 @@ --log-level-default: var(--text-primary); --focus-ring-color: var(--accent-primary); --focus-ring-offset: var(--surface-base); + --control-ghost-bg: color-mix(in oklab, var(--text-primary) 6%, transparent); + --status-success-ring: color-mix(in oklab, var(--status-success) 45%, transparent); + --border-critical: var(--status-error); + + --timeline-segment-active-bg: #0f5b44; + --timeline-segment-active-text: #ffffff; + --timeline-segment-active-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.22); + + --button-danger-bg: color-mix(in oklab, var(--status-error) 85%, var(--surface-base)); + --button-danger-hover-bg: color-mix(in oklab, var(--status-error) 90%, var(--surface-base)); + --button-danger-active-bg: color-mix(in oklab, var(--status-error) 95%, var(--surface-base)); + --button-danger-text: #ffffff; --kbd-bg: var(--surface-secondary); --kbd-border: var(--border-base); --kbd-text: var(--text-primary); @@ -151,7 +167,8 @@ } @media (prefers-color-scheme: dark) { - :root { + :root:not([data-theme]) { + color-scheme: dark; /* Surface tokens */ --surface-base: #1a1a1a; --surface-secondary: #2a2a2a; @@ -225,6 +242,14 @@ --kbd-bg: var(--surface-secondary); --kbd-border: var(--border-base); --kbd-text: var(--text-primary); + --panel-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); + --panel-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.45); + --popover-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); + --border-critical: var(--status-error); + --timeline-segment-active-bg: #0f5b44; + --timeline-segment-active-text: #ffffff; + --timeline-segment-active-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.35); + --button-danger-text: #ffffff; --button-primary-bg: #3f3f46; --button-primary-hover-bg: #52525b; --button-primary-text: #f5f6f8; @@ -306,6 +331,7 @@ } [data-theme="dark"] { + color-scheme: dark; /* Surface tokens */ --surface-base: #1a1a1a; --surface-secondary: #2a2a2a; @@ -379,6 +405,14 @@ --selection-highlight-strong-bg: rgba(0, 128, 255, 0.28); --overlay-scrim: rgba(0, 0, 0, 0.6); --scroll-elevation-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); + --panel-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); + --panel-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.45); + --popover-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); + --border-critical: var(--status-error); + --timeline-segment-active-bg: #0f5b44; + --timeline-segment-active-text: #ffffff; + --timeline-segment-active-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.35); + --button-danger-text: #ffffff; --message-error-bg: rgba(244, 67, 54, 0.12); --message-error-bg-strong: rgba(244, 67, 54, 0.2); --danger-soft-bg: rgba(244, 67, 54, 0.16);