fix(ui): restore dark tab and tool output styling

Use tokenized border contrast so dark mode borders stay subtle, keep instance tab status dots vivid in dark themes, and adjust tool-call code block header background via a dedicated token.
This commit is contained in:
Shantur Rathore
2026-02-03 19:02:47 +00:00
parent 0261154a5e
commit 02407e0f7a
4 changed files with 63 additions and 5 deletions

View File

@@ -104,6 +104,38 @@
--session-status-dot: color-mix(in oklab, var(--session-status-permission-fg) 55%, var(--surface-base));
}
/* Dark mode: keep dots vivid (avoid muddy mixes). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .tab-base .status-indicator.session-status.session-working {
--session-status-dot: var(--session-status-working-fg);
}
:root:not([data-theme]) .tab-base .status-indicator.session-status.session-compacting {
--session-status-dot: var(--session-status-compacting-fg);
}
:root:not([data-theme]) .tab-base .status-indicator.session-status.session-idle {
--session-status-dot: var(--session-status-idle-fg);
}
:root:not([data-theme]) .tab-base .status-indicator.session-status.session-permission {
--session-status-dot: var(--session-status-permission-fg);
}
}
[data-theme="dark"] .tab-base .status-indicator.session-status.session-working {
--session-status-dot: var(--session-status-working-fg);
}
[data-theme="dark"] .tab-base .status-indicator.session-status.session-compacting {
--session-status-dot: var(--session-status-compacting-fg);
}
[data-theme="dark"] .tab-base .status-indicator.session-status.session-idle {
--session-status-dot: var(--session-status-idle-fg);
}
[data-theme="dark"] .tab-base .status-indicator.session-status.session-permission {
--session-status-dot: var(--session-status-permission-fg);
}
.new-tab-button {
@apply inline-flex items-center justify-center w-8 h-8 rounded-md transition-colors;
background-color: var(--new-tab-bg);