salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/styles/messaging/message-base.css
View File

@@ -175,7 +175,7 @@
.message-reasoning {
@apply my-2 border rounded;
--reasoning-border-color: color-mix(in oklab, var(--border-base) 62%, var(--text-primary));
--reasoning-border-color: var(--border-strong, var(--border-base));
border-color: var(--reasoning-border-color);
background-color: var(--surface-secondary);
color: inherit;
@@ -287,7 +287,7 @@
}
.message-reasoning-card {
--reasoning-border-color: color-mix(in oklab, var(--border-base) 62%, var(--text-primary));
--reasoning-border-color: var(--border-strong, var(--border-base));
background-color: var(--message-assistant-bg);
border-left: 4px solid var(--message-assistant-border);
margin-top: 0;

14
packages/ui/src/styles/messaging/tool-call.css
View File

@@ -66,8 +66,8 @@
.tool-call {
@apply border overflow-hidden;
/* Tool-call output borders need more contrast in light mode. */
--tool-call-border-color: color-mix(in oklab, var(--border-base) 62%, var(--text-primary));
/* Tokenized so dark mode doesn't get overly bright borders. */
--tool-call-border-color: var(--border-strong, var(--border-base));
border-color: var(--tool-call-border-color);
color: inherit;
--tool-call-line-unit: 1.4em;
@@ -419,7 +419,7 @@
position: sticky;
top: 0;
z-index: auto;
background-color: color-mix(in oklab, var(--surface-secondary) 70%, var(--text-primary));
background-color: var(--code-block-header-bg, var(--surface-secondary));
border-bottom: 1px solid var(--tool-call-border-color);
box-shadow: none;
}
@@ -447,6 +447,14 @@
overflow-y: visible;
}
/* Shiki injects inline background colors; force token surfaces. */
.tool-call-markdown pre.shiki,
.tool-call-markdown pre.shiki code,
.tool-call-markdown .shiki {
background: transparent !important;
background-color: transparent !important;
}
.tool-call-markdown::-webkit-scrollbar {
width: 8px;
}

32
packages/ui/src/styles/panels/tabs.css
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);

18
packages/ui/src/styles/tokens.css
View File

@@ -11,6 +11,7 @@
--border-base: #e0e0e0;
--border-secondary: #e0e0e0;
--border-muted: #e0e0e0;
--border-strong: color-mix(in oklab, var(--border-base) 62%, var(--text-primary));
/* Text tokens */
--text-primary: #111827;
@@ -81,6 +82,7 @@
--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);
--code-block-header-bg: color-mix(in oklab, var(--surface-secondary) 78%, var(--text-primary));
--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);
@@ -182,6 +184,7 @@
--border-base: #3a3a3a;
--border-secondary: #3a3a3a;
--border-muted: #3a3a3a;
--border-strong: var(--border-base);
/* Text tokens */
--text-primary: #cfd4dc;
@@ -248,6 +251,7 @@
--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);
--code-block-header-bg: var(--surface-secondary);
--border-critical: var(--status-error);
--timeline-segment-active-bg: #0f5b44;
--timeline-segment-active-text: #ffffff;
@@ -346,6 +350,7 @@
--border-base: #3a3a3a;
--border-secondary: #3a3a3a;
--border-muted: #3a3a3a;
--border-strong: var(--border-base);
/* Text tokens */
--text-primary: #cfd4dc;
@@ -412,6 +417,7 @@
--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);
--code-block-header-bg: var(--surface-secondary);
--border-critical: var(--status-error);
--timeline-segment-active-bg: #0f5b44;
--timeline-segment-active-text: #ffffff;
@@ -430,6 +436,18 @@
--kbd-bg: var(--surface-secondary);
--kbd-border: var(--border-base);
--kbd-text: var(--text-primary);
--button-primary-bg: #3f3f46;
--button-primary-hover-bg: #52525b;
--button-primary-text: #f5f6f8;
--tab-active-bg: #3f3f46;
--tab-active-hover-bg: #52525b;
--tab-active-text: #f5f6f8;
--tab-inactive-bg: #2a2a31;
--tab-inactive-hover-bg: #3f3f46;
--tab-inactive-text: #d4d4d8;
--new-tab-bg: #3f3f46;
--new-tab-hover-bg: #52525b;
--new-tab-text: #f5f6f8;
/* Layout & spacing tokens */
--space-2xs: 2px;