From d7f30f98fd106e273a4af02f38ddfaffc04d6893 Mon Sep 17 00:00:00 2001 From: abccodes Date: Tue, 23 Jun 2026 03:03:47 -0700 Subject: [PATCH] [aidan] ui/workflows: three-tone surface depth so the window lifts off the canvas in both themes --- .../app/pages/Workflows/app/CalendarView.tsx | 2 +- .../app/pages/Workflows/app/DetailView.tsx | 4 +-- .../src/app/pages/Workflows/app/HomeView.tsx | 2 +- .../pages/Workflows/app/WorkflowsAppCard.tsx | 2 +- .../Workflows/app/WorkflowsAppContent.tsx | 2 +- frontend/src/app/pages/Workflows/app/uiKit.ts | 26 ++++++++++++------- 6 files changed, 23 insertions(+), 15 deletions(-) diff --git a/frontend/src/app/pages/Workflows/app/CalendarView.tsx b/frontend/src/app/pages/Workflows/app/CalendarView.tsx index 2de5ce34..c54b0585 100644 --- a/frontend/src/app/pages/Workflows/app/CalendarView.tsx +++ b/frontend/src/app/pages/Workflows/app/CalendarView.tsx @@ -99,7 +99,7 @@ const CalendarView: React.FC<{ nav: AppNav }> = ({ nav }) => { const selectFromPop = (id: string) => { setDayPop(null); nav.selectWorkflow(id); }; return ( -
+
diff --git a/frontend/src/app/pages/Workflows/app/DetailView.tsx b/frontend/src/app/pages/Workflows/app/DetailView.tsx index 76e538e9..bd812517 100644 --- a/frontend/src/app/pages/Workflows/app/DetailView.tsx +++ b/frontend/src/app/pages/Workflows/app/DetailView.tsx @@ -39,7 +39,7 @@ const DetailView: React.FC<{ workflowId: string; nav: AppNav }> = ({ workflowId if (workflow) dispatch(setWorkflowsRunContext(runContextChip(workflow, r))); }, [detailRuns, workflowId, dispatch, workflow]); - if (!workflow) return
; + if (!workflow) return
; const running = isRunning(workflow, active); const enabled = isScheduleActive(workflow.schedule); @@ -59,7 +59,7 @@ const DetailView: React.FC<{ workflowId: string; nav: AppNav }> = ({ workflowId return ( <> -
+
patch(workflow, { color: hex })} size={14} /> diff --git a/frontend/src/app/pages/Workflows/app/HomeView.tsx b/frontend/src/app/pages/Workflows/app/HomeView.tsx index 5c2c4401..f006309c 100644 --- a/frontend/src/app/pages/Workflows/app/HomeView.tsx +++ b/frontend/src/app/pages/Workflows/app/HomeView.tsx @@ -87,7 +87,7 @@ const HomeView: React.FC<{ nav: AppNav }> = ({ nav }) => { const reRunAll = () => { if (missed.length) dispatch(runMissedRuns(missed.map((m) => m.id))); }; return ( -
+
{todayLabel}
diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx index 5a745123..4b727cd7 100644 --- a/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx +++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppCard.tsx @@ -201,7 +201,7 @@ const WorkflowsAppCard: React.FC = ({ contain: 'layout style', willChange: 'transform', left: dx, top: dy, width: dw, height: dh, - background: WC.paper, + background: WC.page, border, borderRadius: WC.radius.lg, boxShadow: (isDragging || isResizing) ? WC.shadow.lg : WC.shadow.md, diff --git a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx index 9e0fca6c..466fa786 100644 --- a/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx +++ b/frontend/src/app/pages/Workflows/app/WorkflowsAppContent.tsx @@ -58,7 +58,7 @@ const WorkflowsAppContent: React.FC = () => { }), [mode, selectedId, calView, refDate, dashboardId, dispatch]); return ( -
+
{mode === 'home' && } {mode === 'calendar' && } diff --git a/frontend/src/app/pages/Workflows/app/uiKit.ts b/frontend/src/app/pages/Workflows/app/uiKit.ts index 09a029a5..d79c42c2 100644 --- a/frontend/src/app/pages/Workflows/app/uiKit.ts +++ b/frontend/src/app/pages/Workflows/app/uiKit.ts @@ -10,6 +10,7 @@ import type { ClaudeTokens } from '@/shared/styles/claudeTokens'; export interface WCPalette { accent: string; paper: string; + page: string; panel: string; rail: string; inset: string; @@ -43,7 +44,7 @@ export interface WCPalette { // The identity half of the palette: accent, text, status, hairlines. The neutral // surfaces + structural primitives are blended in from claudeTokens by useWC(), // so the window is the same material as every other card. -type WCColors = Omit; +type WCColors = Omit; export const WC_LIGHT: WCColors = { accent: '#C25A36', @@ -97,15 +98,22 @@ export function useWC(): WCPalette { const base = mode === 'dark' ? WC_DARK : WC_LIGHT; return { ...base, - // Surfaces straight from the app tokens, so the window is the same material - // as every other card in both themes (the warmth lives in accent + text). - // Title bar + sidebar stay on bg.surface (not a darker fill) so the whole - // window reads as one card like the chat card; borders separate the regions. - paper: c.bg.surface, - panel: c.bg.surface, - rail: c.bg.surface, + // Three-tone depth from the app tokens (matches the Claude design): the + // content area sits on `page`, cards/title bar pop on `surface` above it, + // and the sidebar/right rail recede on `secondary`. surface > page in BOTH + // themes, so cards always pop (no light/dark inversion). + // Light's palette inverts (elevated is lighter than surface in light, darker + // in dark), so the mid content tone must flip per mode: in light it steps UP + // to bg.elevated so the window stands apart from the bg.page canvas behind it + // and cards still pop on bg.surface above; in dark bg.page is already darker + // than the cards, so it stays. Rows mirror it (surface in light, elevated in + // dark) so they always sit above the content. + paper: c.bg.surface, // cards, title bar, popovers + page: mode === 'dark' ? c.bg.secondary : c.bg.elevated, // content area: one step above the canvas in both modes + panel: c.bg.surface, // title bar + rail: mode === 'dark' ? c.bg.page : c.bg.secondary, // sidebar / right rail: the recessed darkest column inset: c.bg.page, - raised: c.bg.elevated, + raised: mode === 'dark' ? c.bg.elevated : c.bg.surface, // extra-raised rows / dropdowns shadow: c.shadow, radius: c.radius, border: c.border,