Merge pull request #123 from Molecule-AI/fix/settings-dark-theme-a11y
fix(canvas): dark theme a11y — settings buttons, input fields, ReactFlow colorMode, zinc-400 contrast, aria-labels
This commit is contained in:
Hongming Wang
GitHub
commit
a754870ee8
@ -145,19 +145,19 @@ export function CommunicationOverlay() {
|
||||
<span className="text-zinc-300 font-medium truncate">
|
||||
{c.sourceName}
|
||||
</span>
|
||||
<span className="text-zinc-600">→</span>
|
||||
<span className="text-zinc-400">→</span>
|
||||
<span className="text-zinc-300 truncate">{c.targetName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<span className={statusColor}>{statusIcon}</span>
|
||||
<span className="text-zinc-600">{age}</span>
|
||||
<span className="text-zinc-400">{age}</span>
|
||||
</div>
|
||||
</div>
|
||||
{c.summary && (
|
||||
<div className="text-zinc-500 truncate mt-0.5 pl-4">{c.summary}</div>
|
||||
)}
|
||||
{c.durationMs && (
|
||||
<div className="text-zinc-600 pl-4">{c.durationMs}ms</div>
|
||||
<div className="text-zinc-400 pl-4">{c.durationMs}ms</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -162,7 +162,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
|
||||
{/* Content */}
|
||||
<div className="flex-1 pb-3 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-[9px] text-zinc-600 font-mono">
|
||||
<span className="text-[9px] text-zinc-400 font-mono">
|
||||
{time}
|
||||
</span>
|
||||
<span
|
||||
@ -183,7 +183,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
|
||||
: entry.activity_type.toUpperCase()}
|
||||
</span>
|
||||
{entry.duration_ms != null && entry.duration_ms > 0 && (
|
||||
<span className="text-[9px] text-zinc-600">
|
||||
<span className="text-[9px] text-zinc-400">
|
||||
{entry.duration_ms > 1000
|
||||
? `${Math.round(entry.duration_ms / 1000)}s`
|
||||
: `${entry.duration_ms}ms`}
|
||||
@ -199,7 +199,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
|
||||
<span className="text-cyan-400 font-medium">
|
||||
{sourceName || wsName}
|
||||
</span>
|
||||
<span className="text-zinc-600"> → </span>
|
||||
<span className="text-zinc-400"> → </span>
|
||||
<span className="text-blue-400 font-medium">
|
||||
{targetName}
|
||||
</span>
|
||||
@ -211,7 +211,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
|
||||
</span>
|
||||
{sourceName && (
|
||||
<>
|
||||
<span className="text-zinc-600">
|
||||
<span className="text-zinc-400">
|
||||
{" "}← {" "}
|
||||
</span>
|
||||
<span className="text-cyan-400 font-medium">
|
||||
@ -248,7 +248,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
|
||||
<div className="text-[10px] text-zinc-300 whitespace-pre-wrap break-words leading-relaxed">
|
||||
{requestText.slice(0, 2000)}
|
||||
{requestText.length > 2000 && (
|
||||
<span className="text-zinc-600"> ...({requestText.length} chars)</span>
|
||||
<span className="text-zinc-400"> ...({requestText.length} chars)</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -259,7 +259,7 @@ export function ConversationTraceModal({ open, workspaceId, onClose }: Props) {
|
||||
<div className="text-[10px] text-zinc-300 whitespace-pre-wrap break-words leading-relaxed">
|
||||
{responseText.slice(0, 2000)}
|
||||
{responseText.length > 2000 && (
|
||||
<span className="text-zinc-600"> ...({responseText.length} chars)</span>
|
||||
<span className="text-zinc-400"> ...({responseText.length} chars)</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -112,9 +112,9 @@ export function SearchDialog() {
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
placeholder="Search workspaces..."
|
||||
className="flex-1 bg-transparent text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none"
|
||||
className="flex-1 bg-transparent text-sm text-zinc-100 placeholder-zinc-400 focus:outline-none"
|
||||
/>
|
||||
<kbd className="text-[9px] text-zinc-600 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">ESC</kbd>
|
||||
<kbd className="text-[9px] text-zinc-400 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">ESC</kbd>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
@ -125,7 +125,7 @@ export function SearchDialog() {
|
||||
className="max-h-[300px] overflow-y-auto py-1"
|
||||
>
|
||||
{filtered.length === 0 ? (
|
||||
<div role="status" aria-live="polite" className="px-4 py-6 text-center text-xs text-zinc-600">
|
||||
<div role="status" aria-live="polite" className="px-4 py-6 text-center text-xs text-zinc-400">
|
||||
{query ? "No workspaces match" : "No workspaces yet"}
|
||||
</div>
|
||||
) : (
|
||||
@ -156,7 +156,7 @@ export function SearchDialog() {
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className="text-[9px] font-mono text-zinc-600"
|
||||
className="text-[9px] font-mono text-zinc-400"
|
||||
aria-label={`Tier ${node.data.tier}`}
|
||||
>
|
||||
T{node.data.tier}
|
||||
@ -168,10 +168,10 @@ export function SearchDialog() {
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-4 py-2 border-t border-zinc-800/40 flex items-center justify-between">
|
||||
<span className="text-[9px] text-zinc-600">{filtered.length} workspace{filtered.length !== 1 ? "s" : ""}</span>
|
||||
<span className="text-[9px] text-zinc-400">{filtered.length} workspace{filtered.length !== 1 ? "s" : ""}</span>
|
||||
<div className="flex gap-2">
|
||||
<kbd className="text-[9px] text-zinc-600 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↑↓ navigate</kbd>
|
||||
<kbd className="text-[9px] text-zinc-600 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↵ select</kbd>
|
||||
<kbd className="text-[9px] text-zinc-400 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↑↓ navigate</kbd>
|
||||
<kbd className="text-[9px] text-zinc-400 bg-zinc-800/60 px-1.5 py-0.5 rounded border border-zinc-700/40">↵ select</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -319,7 +319,7 @@ export function TemplatePalette() {
|
||||
: "bg-zinc-900/90 border border-zinc-700/50 text-zinc-400 hover:text-zinc-200 hover:border-zinc-600"
|
||||
}`}
|
||||
title="Template Palette"
|
||||
aria-label="Template Palette"
|
||||
aria-label={open ? "Close template palette" : "Open template palette"}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<rect x="1" y="1" width="6" height="6" rx="1" stroke="currentColor" strokeWidth="1.5" />
|
||||
|
||||
@ -324,7 +324,7 @@
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
background: #18181b;
|
||||
color: #f4f4f5;
|
||||
color: #d4d4d8;
|
||||
}
|
||||
|
||||
.add-key-form__select:focus,
|
||||
@ -399,7 +399,7 @@
|
||||
font-size: 14px;
|
||||
font-family: monospace;
|
||||
background: #18181b;
|
||||
color: #f4f4f5;
|
||||
color: #d4d4d8;
|
||||
}
|
||||
|
||||
.key-value-field input:focus {
|
||||
@ -683,7 +683,7 @@
|
||||
}
|
||||
|
||||
.settings-button:hover { background: #27272a; color: #f4f4f5; }
|
||||
.settings-button--active { color: #3b82f6; background: #1e3a5f; }
|
||||
.settings-button--active { color: #3b82f6; background: #1e3a8a; }
|
||||
.settings-button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
|
||||
|
||||
.settings-button__tooltip {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user