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

refactor(theme): distinct warm charcoal layers - header darker, sidebar/main/card all different

Browse source
This commit is contained in:
zenchantlive 2026-02-26 15:33:08 -08:00
parent fc328adf31
commit b31e8ddade
6 changed files with 32 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/app/globals.css
View file

@ -4,17 +4,20 @@
:root { :root {
/* ========== VISUAL-TRUTH UI TOKEN CONTRACT (bb-vt.1.1) ========== */ /* ========== VISUAL-TRUTH UI TOKEN CONTRACT (bb-vt.1.1) ========== */
/* Lightened aurora palette */ /* Warm charcoal aurora palette - DISTINCT LAYERS */
--ui-bg-app: #0d1219; --ui-bg-app: #181716; /* Darkest - page background */
--ui-bg-shell: #131b26; --ui-bg-header: #131211; /* Header - darker than sidebar */
--ui-bg-panel: #1a2330; --ui-bg-shell: #1f1e1d; /* Sidebar - distinct from main */
--ui-bg-card: #222d3d; --ui-bg-panel: #282725; /* Panels/cards within sidebar */
--ui-bg-main: #242322; /* Main content area - distinct */
--ui-bg-card: #302e2c; /* Cards - lightest layer */
--ui-bg-elevated: #3a3836; /* Elevated/selected elements */
--ui-border-soft: rgba(153, 171, 190, 0.2); --ui-border-soft: rgba(180, 175, 165, 0.2);
--ui-border-strong: rgba(153, 171, 190, 0.34); --ui-border-strong: rgba(180, 175, 165, 0.35);
--ui-text-primary: #e8edf5; --ui-text-primary: #f0eeea;
--ui-text-muted: #8f9caf; --ui-text-muted: #a8a49a;
--ui-accent-ready: #35d98f; --ui-accent-ready: #35d98f;
--ui-accent-blocked: #ff4c72; --ui-accent-blocked: #ff4c72;

8
src/components/shared/left-panel.tsx
View file

@ -190,9 +190,9 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
]; ];
return ( return (
<aside className="flex h-full min-h-0 overflow-hidden flex-col bg-[var(--ui-bg-shell)] shadow-[inset_-1px_0_0_rgba(0,0,0,0.55),24px_0_40px_-34px_rgba(0,0,0,0.98)]" data-testid="left-panel"> <aside className="flex h-full min-h-0 overflow-hidden flex-col bg-[var(--ui-bg-shell)] border-r border-[var(--ui-border-strong)]" data-testid="left-panel">
<div className="px-4 py-3 shadow-[0_14px_24px_-20px_rgba(0,0,0,0.92)]"> <div className="px-4 py-3">
<div className="mb-3 flex items-center gap-1 rounded-xl bg-[#101c2b] p-1 shadow-[0_12px_24px_-18px_rgba(0,0,0,0.88)]"> <div className="mb-3 flex items-center gap-1 rounded-xl bg-[var(--ui-bg-panel)] p-1 border border-[var(--ui-border-strong)]">
{views.map((item) => { {views.map((item) => {
const active = view === item.id; const active = view === item.id;
return ( return (
@ -213,7 +213,7 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
})} })}
</div> </div>
<div className="space-y-2 rounded-xl bg-[var(--ui-bg-panel)] p-2.5 border border-[var(--ui-border-soft)]"> <div className="space-y-2 rounded-xl bg-[var(--ui-bg-card)] p-2.5 border border-[var(--ui-border-soft)]">
<div className="grid grid-cols-1 gap-2"> <div className="grid grid-cols-1 gap-2">
<input <input
value={filters.query} value={filters.query}

4
src/components/shared/right-panel.tsx
View file

@ -20,9 +20,9 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
if (isDesktop) { if (isDesktop) {
return ( return (
<div <div
className="ui-shell-panel flex overflow-hidden h-full" className="flex overflow-hidden h-full bg-[var(--ui-bg-panel)] border-l border-[var(--ui-border-strong)]"
style={{ style={{
boxShadow: isOpen ? '-12px 0 24px -16px rgba(0,0,0,0.5)' : 'none', boxShadow: isOpen ? '-8px 0 20px -12px rgba(0,0,0,0.4)' : 'none',
}} }}
data-testid="right-panel-desktop" data-testid="right-panel-desktop"
> >

2
src/components/shared/top-bar.tsx
View file

@ -55,7 +55,7 @@ export function TopBar({
const { isDesktop } = useResponsive(); const { isDesktop } = useResponsive();
return ( return (
<header className="ui-shell-topbar flex h-[var(--topbar-height)] items-center justify-between border-b border-[var(--ui-border-soft)]" data-testid="top-bar"> <header className="flex h-[var(--topbar-height)] items-center justify-between border-b border-[var(--ui-border-strong)] bg-[var(--ui-bg-header)]" data-testid="top-bar">
<div className="flex min-w-0 items-center"> <div className="flex min-w-0 items-center">
<button <button
type="button" type="button"

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

@ -182,7 +182,7 @@ export function UnifiedShell({
<ResizeHandle direction="left" onResize={handleLeftResize} /> <ResizeHandle direction="left" onResize={handleLeftResize} />
{/* MIDDLE CONTENT: flex-1 */} {/* MIDDLE CONTENT: flex-1 */}
<div className="flex-1 relative overflow-hidden bg-[var(--ui-bg-shell)]" data-testid="middle-content"> <div className="flex-1 relative overflow-hidden bg-[var(--ui-bg-main)]" data-testid="middle-content">
{renderMiddleContent()} {renderMiddleContent()}
</div> </div>

28
src/components/social/social-card.tsx
View file

@ -34,9 +34,8 @@ function handleCardKeyDown(event: KeyboardEvent<HTMLDivElement>, onClick?: Mouse
function statusVisual(status: SocialCardData['status']) { function statusVisual(status: SocialCardData['status']) {
if (status === 'blocked') { if (status === 'blocked') {
return { return {
border: 'rgba(255, 76, 114, 0.5)', border: '#ff4c72',
cardBg: 'rgba(255, 76, 114, 0.08)', badgeBg: 'rgba(255, 76, 114, 0.25)',
badgeBg: 'rgba(255, 76, 114, 0.2)',
badgeText: '#ffd5df', badgeText: '#ffd5df',
chipText: 'Blocked', chipText: 'Blocked',
}; };
@ -44,9 +43,8 @@ function statusVisual(status: SocialCardData['status']) {
if (status === 'in_progress') { if (status === 'in_progress') {
return { return {
border: 'rgba(255, 178, 74, 0.5)', border: '#ffb24a',
cardBg: 'rgba(255, 178, 74, 0.08)', badgeBg: 'rgba(255, 178, 74, 0.25)',
badgeBg: 'rgba(255, 178, 74, 0.2)',
badgeText: '#ffe5c7', badgeText: '#ffe5c7',
chipText: 'Active', chipText: 'Active',
}; };
@ -54,9 +52,8 @@ function statusVisual(status: SocialCardData['status']) {
if (status === 'ready') { if (status === 'ready') {
return { return {
border: 'rgba(53, 217, 143, 0.5)', border: '#35d98f',
cardBg: 'rgba(53, 217, 143, 0.08)', badgeBg: 'rgba(53, 217, 143, 0.25)',
badgeBg: 'rgba(53, 217, 143, 0.2)',
badgeText: '#d6ffe7', badgeText: '#d6ffe7',
chipText: 'Ready', chipText: 'Ready',
}; };
@ -64,8 +61,7 @@ function statusVisual(status: SocialCardData['status']) {
return { return {
border: 'var(--ui-border-strong)', border: 'var(--ui-border-strong)',
cardBg: 'var(--ui-bg-card)', badgeBg: 'rgba(168, 164, 154, 0.15)',
badgeBg: 'rgba(143, 156, 175, 0.15)',
badgeText: 'var(--ui-text-muted)', badgeText: 'var(--ui-text-muted)',
chipText: 'Closed', chipText: 'Closed',
}; };
@ -131,15 +127,15 @@ export function SocialCard({
tabIndex={0} tabIndex={0}
aria-label={`Open ${data.title}`} aria-label={`Open ${data.title}`}
className={cn( className={cn(
'group relative flex min-h-[290px] cursor-pointer flex-col rounded-[14px] border px-3.5 py-3 text-left transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]', 'group relative flex min-h-[290px] cursor-pointer flex-col rounded-[14px] border px-3.5 py-3 text-left transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]',
className, className,
)} )}
style={{ style={{
background: status.cardBg, background: 'var(--ui-bg-card)',
borderColor: selected ? status.border : 'var(--ui-border-soft)', borderColor: selected ? status.border : 'var(--ui-border-strong)',
boxShadow: selected boxShadow: selected
? `0 0 0 1px ${status.border}, 0 20px 40px -20px rgba(0,0,0,0.6)` ? `0 0 0 2px ${status.border}, 0 20px 40px -20px rgba(0,0,0,0.6)`
: '0 8px 24px -16px rgba(0,0,0,0.5)', : '0 4px 12px -6px rgba(0,0,0,0.4)',
}} }}
> >
<div className="mb-2 flex items-center justify-between gap-2"> <div className="mb-2 flex items-center justify-between gap-2">