viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(graph): make DAG background themable and improve contrast

Browse source 
- Replace hardcoded blue radial gradient with theme variable
- Update graph-view to use new token system
- Ensure status colors (red/green/amber) remain consistent across all themes
- DAG background now changes with theme while maintaining card visibility
This commit is contained in:
zenchantlive 2026-02-26 16:34:13 -08:00
parent 756a1dec2b
commit f2cd6fa11c
2 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/graph/graph-view.tsx
View file

@ -22,8 +22,8 @@ export function GraphView({
hideClosed = false, hideClosed = false,
}: GraphViewProps) { }: GraphViewProps) {
return ( return (
<div className="flex h-full flex-col bg-[var(--ui-bg-app)]"> <div className="flex h-full flex-col bg-[var(--surface-secondary)]">
<div className="flex items-center justify-between border-b border-[var(--ui-border-soft)] bg-[var(--ui-bg-shell)] px-4 py-2.5"> <div className="flex items-center justify-between border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] px-4 py-2.5">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--ui-text-muted)]"> <p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--ui-text-muted)]">
Graph View Graph View
@ -32,7 +32,7 @@ export function GraphView({
<button <button
type="button" type="button"
onClick={() => onGraphTabChange('flow')} onClick={() => onGraphTabChange('flow')}
className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg-shell)] ${ className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-tertiary)] ${
graphTab === 'flow' graphTab === 'flow'
? 'bg-sky-400/10 text-sky-200 shadow-[0_2px_8px_rgba(56,189,248,0.1)]' ? 'bg-sky-400/10 text-sky-200 shadow-[0_2px_8px_rgba(56,189,248,0.1)]'
: 'text-text-muted/60 hover:text-text-body hover:bg-white/[0.04]' : 'text-text-muted/60 hover:text-text-body hover:bg-white/[0.04]'
@ -43,7 +43,7 @@ export function GraphView({
<button <button
type="button" type="button"
onClick={() => onGraphTabChange('overview')} onClick={() => onGraphTabChange('overview')}
className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg-shell)] ${ className={`rounded-lg px-3 py-1.5 text-xs font-bold uppercase tracking-wider transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-info)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-tertiary)] ${
graphTab === 'overview' graphTab === 'overview'
? 'bg-sky-400/10 text-sky-200 shadow-[0_2px_8px_rgba(56,189,248,0.1)]' ? 'bg-sky-400/10 text-sky-200 shadow-[0_2px_8px_rgba(56,189,248,0.1)]'
: 'text-text-muted/60 hover:text-text-body hover:bg-white/[0.04]' : 'text-text-muted/60 hover:text-text-body hover:bg-white/[0.04]'

8
src/components/graph/smart-dag.tsx
View file

@ -153,16 +153,16 @@ export function SmartDag({
); );
return ( return (
<div className="w-full h-full flex flex-col animate-in fade-in duration-500 relative bg-[radial-gradient(ellipse_at_top,#142336_0%,#090d14_100%)]"> <div className="w-full h-full flex flex-col animate-in fade-in duration-500 relative bg-[var(--surface-secondary)]">
<div className="flex items-center justify-between gap-4 border-b border-white/5 px-4 py-3 bg-white/[0.02]"> <div className="flex items-center justify-between gap-4 border-b border-[var(--border-subtle)] px-4 py-3 bg-[var(--surface-tertiary)]">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <button
type="button" type="button"
onClick={() => setShowFilters(current => !current)} onClick={() => setShowFilters(current => !current)}
className={`flex items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-bold transition-all ${ className={`flex items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-bold transition-all ${
showFilters showFilters
? 'border-sky-400/30 bg-sky-400/10 text-sky-300' ? 'border-[var(--accent-info)]/30 bg-[var(--accent-info)]/10 text-[var(--accent-info)]'
: 'border-white/10 bg-white/5 text-text-muted hover:bg-white/10' : 'border-[var(--border-subtle)] bg-[var(--surface-quaternary)] text-[var(--text-tertiary)] hover:bg-[var(--surface-hover)]'
}`} }`}
> >
<Filter className="w-3.5 h-3.5" /> <Filter className="w-3.5 h-3.5" />