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

fix(theme): increase contrast in aurora theme surface layers

Browse source 
- Make surface layers more distinct (0f0e0d → 1a1816 → 252320 → 302e2a → 3c3934)
- Increase border visibility (18%, 35%, 55% opacity)
- Ensure header, sidebar, main content are visually distinct
This commit is contained in:
zenchantlive 2026-02-26 16:27:14 -08:00
parent a47f21e769
commit 756a1dec2b
3 changed files with 19 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/graph/assignment-panel.tsx
View file

@ -508,15 +508,15 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
)}
</div>
<div className="bg-[#111f2b] rounded-xl border border-[var(--ui-border-soft)] flex flex-col overflow-hidden">
<div className="bg-[var(--surface-tertiary)] rounded-xl border border-[var(--border-subtle)] flex flex-col overflow-hidden">
<button
onClick={() => setPreAssignedCollapsed(!preAssignedCollapsed)}
className="w-full px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] flex items-center gap-2 hover:bg-[var(--surface-hover)] transition-colors"
>
{preAssignedCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--ui-text-muted)]" /> : <ChevronDown className="w-4 h-4 text-[var(--ui-text-muted)]" />}
{preAssignedCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--text-tertiary)]" /> : <ChevronDown className="w-4 h-4 text-[var(--text-tertiary)]" />}
<Clock className="w-4 h-4 text-amber-400" />
<h3 className="font-semibold text-sm text-[var(--text-primary)]">Pre-assigned</h3>
<span className="ml-auto text-xs text-[var(--ui-text-muted)]">{preAssignedTasks.length}</span>
<span className="ml-auto text-xs text-[var(--text-tertiary)]">{preAssignedTasks.length}</span>
</button>
{!preAssignedCollapsed && (
<div className="max-h-40 overflow-y-auto p-3 space-y-2 custom-scrollbar">
@ -542,7 +542,7 @@ export function AssignmentPanel({ selectedIssue, projectRoot, issues, epicId }:
onClick={() => setSquadRosterCollapsed(!squadRosterCollapsed)}
className="w-full px-4 py-3 border-b border-[var(--border-subtle)] bg-[var(--surface-tertiary)] flex items-center gap-2 hover:bg-[var(--surface-hover)] transition-colors"
>
{squadRosterCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--ui-text-muted)]" /> : <ChevronDown className="w-4 h-4 text-[var(--ui-text-muted)]" />}
{squadRosterCollapsed ? <ChevronRight className="w-4 h-4 text-[var(--text-tertiary)]" /> : <ChevronDown className="w-4 h-4 text-[var(--text-tertiary)]" />}
<Users className="w-4 h-4 text-emerald-500" />
<h3 className="font-semibold text-sm text-[var(--text-primary)]">Squad Roster</h3>
<span className="ml-auto text-xs text-[var(--text-tertiary)]">{activeRoster.length} active</span>

4
src/components/shared/unified-shell.tsx
View file

@ -201,8 +201,8 @@ export function UnifiedShell({
{/* THREAD DRAWER: Popup overlay when a task is selected */}
{isChatOpen ? (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div className="h-[85vh] w-full max-w-lg overflow-hidden rounded-xl border border-[var(--ui-border-soft)] bg-[var(--ui-bg-card)] shadow-2xl">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-[var(--alpha-black-medium)] p-4">
<div className="h-[85vh] w-full max-w-lg overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-quaternary)] shadow-2xl">
<ThreadDrawer
isOpen={true}
onClose={handleCloseDrawer}

26
src/styles/themes/aurora.css
View file

@ -8,26 +8,26 @@
[data-theme="aurora"] {
/* ==========================================================================
1. SURFACE LAYERS - Warm Charcoal Scale (DISTINCT)
1. SURFACE LAYERS - Warm Charcoal Scale (MORE DISTINCT)
========================================================================== */
--surface-backdrop: #161514; /* Darkest - page background */
--surface-elevated: #0f0e0d; /* Header - darker for contrast */
--surface-primary: #1e1d1b; /* Sidebar */
--surface-secondary: #252422; /* Main content - lighter than sidebar */
--surface-tertiary: #2d2b29; /* Panels */
--surface-quaternary: #353331; /* Cards - lightest surface */
--surface-overlay: #0a0909; /* Modals */
--surface-input: #1a1917; /* Form fields */
--surface-backdrop: #0f0e0d; /* Page background - very dark */
--surface-elevated: #1a1816; /* Header - lighter than backdrop */
--surface-primary: #252320; /* Sidebar - lighter still */
--surface-secondary: #302e2a; /* Main content - distinct from sidebar */
--surface-tertiary: #3c3934; /* Panels - clearly lighter */
--surface-quaternary: #48453f; /* Cards - lightest surface */
--surface-overlay: #0a0908; /* Modals - darkest */
--surface-input: #1f1d1a; /* Form fields */
--surface-hover: rgba(240, 238, 234, 0.06);
--surface-active: rgba(53, 201, 255, 0.12);
--surface-tooltip: #1e1d1b;
/* ==========================================================================
2. BORDERS - Warm Grey (more visible)
2. BORDERS - More Visible
========================================================================== */
--border-subtle: rgba(180, 175, 165, 0.15);
--border-default: rgba(180, 175, 165, 0.28);
--border-strong: rgba(180, 175, 165, 0.45);
--border-subtle: rgba(200, 195, 185, 0.18);
--border-default: rgba(200, 195, 185, 0.35);
--border-strong: rgba(200, 195, 185, 0.55);
--border-accent: rgba(53, 201, 255, 0.55);
/* ==========================================================================