|
setNewId(e.target.value)}
placeholder="claude-haiku-3-5"
data-testid="pricing-new-id"
- className="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+ className="w-full bg-panel border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
/>
|
@@ -127,7 +127,7 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
onChange={(e) => setNewInput(e.target.value)}
placeholder="0.80"
data-testid="pricing-new-input"
- className="w-28 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+ className="w-28 bg-panel border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
/>
|
@@ -138,7 +138,7 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
onChange={(e) => setNewOutput(e.target.value)}
placeholder="4.00"
data-testid="pricing-new-output"
- className="w-28 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+ className="w-28 bg-panel border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
/>
|
@@ -147,7 +147,7 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
onClick={addRow}
disabled={!newId.trim()}
data-testid="pricing-add"
- className="text-xs text-blue-400 hover:text-blue-300 disabled:opacity-40 disabled:cursor-not-allowed"
+ className="text-xs text-coral hover:text-coral-2 disabled:opacity-40 disabled:cursor-not-allowed"
>
+ Add row
diff --git a/frontend/src/components/agents-settings/PerAgentOverrideTable.tsx b/frontend/src/components/agents-settings/PerAgentOverrideTable.tsx
index b1adb27..ada8c28 100644
--- a/frontend/src/components/agents-settings/PerAgentOverrideTable.tsx
+++ b/frontend/src/components/agents-settings/PerAgentOverrideTable.tsx
@@ -32,11 +32,11 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
return (
-
+
| Agent |
Model |
Turn limit |
@@ -51,9 +51,9 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
- |
+ |
{agentId}
|
@@ -69,7 +69,7 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
)
}
data-testid={`agent-${agentId}-model`}
- className="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+ className="w-full bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
/>
|
@@ -86,7 +86,7 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
)
}
data-testid={`agent-${agentId}-turn_limit`}
- className="w-20 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+ className="w-20 bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
/>
|
@@ -103,7 +103,7 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
)
}
data-testid={`agent-${agentId}-budget_usd`}
- className="w-24 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+ className="w-24 bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
/>
|
@@ -117,7 +117,7 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
)
}
data-testid={`agent-${agentId}-budget_scope`}
- className="bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+ className="bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base outline-none focus:border-border-hi"
>
diff --git a/frontend/src/components/canvas/ArchFlowCanvas.test.tsx b/frontend/src/components/canvas/ArchFlowCanvas.test.tsx
new file mode 100644
index 0000000..3f44e08
--- /dev/null
+++ b/frontend/src/components/canvas/ArchFlowCanvas.test.tsx
@@ -0,0 +1,145 @@
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const h = vi.hoisted(() => ({
+ reactFlowProps: null as null | Record,
+ backgroundProps: null as null | Record,
+ miniMapProps: null as null | Record,
+ commentComposeType: null as null | string,
+ dependenciesFocusId: null as null | string,
+ allObjects: [] as Array<{ id: string; name: string; type: string }>,
+}))
+
+vi.mock('@xyflow/react', () => ({
+ ReactFlow: ({ children, ...props }: { children?: React.ReactNode }) => {
+ h.reactFlowProps = props as Record
+ return {children}
+ },
+ Background: (props: Record) => {
+ h.backgroundProps = props
+ return
+ },
+ Controls: () => ,
+ MiniMap: (props: Record) => {
+ h.miniMapProps = props
+ return
+ },
+ ConnectionMode: { Loose: 'Loose' },
+ MarkerType: { ArrowClosed: 'ArrowClosed' },
+ useReactFlow: () => ({
+ setNodes: vi.fn(),
+ setEdges: vi.fn(),
+ getNodes: () => [],
+ getEdges: () => [],
+ screenToFlowPosition: ({ x, y }: { x: number; y: number }) => ({ x, y }),
+ fitView: vi.fn(),
+ }),
+}))
+
+vi.mock('../../hooks/use-api', () => ({
+ useConnections: () => ({ data: [] }),
+ useCreateComment: () => ({ mutate: vi.fn() }),
+ useCreateConnection: () => ({ mutate: vi.fn() }),
+ useDeleteConnection: () => ({ mutate: vi.fn() }),
+ useDiagramObjects: () => ({ data: [] }),
+ useFlows: () => ({ data: [] }),
+ useObjects: () => ({ data: h.allObjects }),
+ useRemoveObjectFromDiagram: () => ({ mutate: vi.fn() }),
+ useSaveDiagramPosition: () => ({ mutate: vi.fn() }),
+ useUpdateObject: () => ({ mutate: vi.fn() }),
+}))
+
+vi.mock('../../hooks/use-diagrams', () => ({
+ useDiagram: () => ({ data: null }),
+}))
+
+vi.mock('../../hooks/use-realtime', () => ({
+ useDiagramSocket: () => ({
+ cursors: {},
+ selections: {},
+ presence: [],
+ sendCursor: vi.fn(),
+ sendSelection: vi.fn(),
+ }),
+}))
+
+vi.mock('../../hooks/use-undo', () => ({
+ useUndoController: vi.fn(),
+ useUndoMutation: () => ({ mutate: vi.fn() }),
+ useRedoMutation: () => ({ mutate: vi.fn() }),
+}))
+
+vi.mock('../../lib/canvas-events', () => ({
+ useFocusObjectListener: vi.fn(),
+ useFocusConnectionListener: vi.fn(),
+}))
+
+vi.mock('../../stores/canvas-store', () => ({
+ useCanvasStore: () => ({
+ selectNode: vi.fn(),
+ selectEdge: vi.fn(),
+ dependenciesFocusId: h.dependenciesFocusId,
+ setDependenciesFocus: vi.fn(),
+ activeFilter: 'status',
+ activeFilterValue: null,
+ playingFlowId: null,
+ playingStepIdx: 0,
+ activeBranch: 'main',
+ commentComposeType: h.commentComposeType,
+ setCommentComposeType: vi.fn(),
+ setRemoteNodeEditors: vi.fn(),
+ setPresenceUsers: vi.fn(),
+ }),
+}))
+
+vi.mock('./CanvasComments', () => ({
+ CanvasComments: () => null,
+}))
+
+vi.mock('./CursorsOverlay', () => ({
+ CursorsOverlay: () => null,
+ RemoteSelectionsOverlay: () => null,
+}))
+
+vi.mock('./UndoToolbarButtons', () => ({
+ UndoToolbarButtons: () => null,
+}))
+
+import { ArchFlowCanvas } from './ArchFlowCanvas'
+
+describe('ArchFlowCanvas theming', () => {
+ beforeEach(() => {
+ h.reactFlowProps = null
+ h.backgroundProps = null
+ h.miniMapProps = null
+ h.commentComposeType = null
+ h.dependenciesFocusId = null
+ h.allObjects = []
+ })
+
+ it('uses semantic theme variables for the canvas, grid, and minimap mask', () => {
+ render()
+
+ expect(h.reactFlowProps?.style).toMatchObject({ background: 'var(--color-bg)' })
+ expect(h.backgroundProps).toMatchObject({ color: 'var(--canvas-grid)' })
+ expect(h.miniMapProps).toMatchObject({ maskColor: 'var(--minimap-mask)' })
+ })
+
+ it('uses semantic theme variables for floating canvas notices', () => {
+ h.commentComposeType = 'risk'
+ h.dependenciesFocusId = 'obj-1'
+ h.allObjects = [{ id: 'obj-1', name: 'Checkout', type: 'system' }]
+
+ render()
+
+ const composeNotice = screen.getByText('Click on the canvas to place a risk pin').closest('div')
+ const dependencyNotice = screen.getByText(/Dependencies of/).closest('div')
+
+ expect(composeNotice?.getAttribute('style')).toContain('background: var(--color-panel)')
+ expect(composeNotice?.getAttribute('style')).toContain('border: 1px solid var(--color-accent-blue)')
+ expect(composeNotice?.getAttribute('style')).toContain('color: var(--color-text-base)')
+ expect(dependencyNotice?.getAttribute('style')).toContain('background: var(--color-panel)')
+ expect(dependencyNotice?.getAttribute('style')).toContain('border: 1px solid var(--color-accent-blue)')
+ expect(dependencyNotice?.getAttribute('style')).toContain('color: var(--color-text-base)')
+ })
+})
diff --git a/frontend/src/components/canvas/ArchFlowCanvas.tsx b/frontend/src/components/canvas/ArchFlowCanvas.tsx
index 5aaf96d..9b10608 100644
--- a/frontend/src/components/canvas/ArchFlowCanvas.tsx
+++ b/frontend/src/components/canvas/ArchFlowCanvas.tsx
@@ -755,15 +755,15 @@ function CanvasInner({ diagramId }: ArchFlowCanvasProps) {
transform: 'translateX(-50%)',
zIndex: 25,
padding: '6px 12px',
- background: '#171717',
- border: '1px solid #3b82f6',
+ background: 'var(--color-panel)',
+ border: '1px solid var(--color-accent-blue)',
borderRadius: 8,
fontSize: 12,
- color: '#e5e5e5',
+ color: 'var(--color-text-base)',
display: 'flex',
alignItems: 'center',
gap: 10,
- boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+ boxShadow: 'var(--shadow-popup)',
}}
>
Click on the canvas to place a {commentComposeType} pin
@@ -771,8 +771,8 @@ function CanvasInner({ diagramId }: ArchFlowCanvasProps) {
onClick={() => setCommentComposeType(null)}
style={{
background: 'transparent',
- border: '1px solid #404040',
- color: '#a3a3a3',
+ border: '1px solid var(--color-border-base)',
+ color: 'var(--color-text-2)',
borderRadius: 4,
padding: '2px 8px',
cursor: 'pointer',
@@ -796,25 +796,25 @@ function CanvasInner({ diagramId }: ArchFlowCanvasProps) {
alignItems: 'center',
gap: 12,
padding: '8px 14px',
- background: '#171717',
- border: '1px solid #3b82f6',
+ background: 'var(--color-panel)',
+ border: '1px solid var(--color-accent-blue)',
borderRadius: 8,
- color: '#e5e5e5',
+ color: 'var(--color-text-base)',
fontSize: 12,
- boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+ boxShadow: 'var(--shadow-popup)',
}}
>
- 🔗
+ 🔗
Dependencies of{' '}
- {focusObject.name}
+ {focusObject.name}
| |