@toolr/ui-design 0.1.8 → 0.1.9

package/components/sections/snapshot-browser/snapshot-browser-panel.tsx

@@ -28,6 +28,8 @@ import { Trash2, HelpCircle } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
 import { Select } from '../../ui/select.tsx'
 import { IconButton } from '../../ui/icon-button.tsx'
+import { useAccentColor, AccentColorProvider } from '../../lib/accent-context.ts'
+import type { FormColor } from '../../lib/form-colors.ts'
 import { SnapshotTree } from './snapshot-tree.tsx'
 import { useSnapshotBrowser } from './use-snapshot-browser.ts'
 import type { SnapshotScope, SnapshotBrowserApi } from './types.ts'
@@ -43,6 +45,7 @@ export interface SnapshotBrowserPanelProps {
   snapshotLimit: number
   onSnapshotLimitChange: (limit: number) => void
   onClearAll?: () => void
+  accentColor?: FormColor
   className?: string
 }
 
@@ -52,8 +55,11 @@ export function SnapshotBrowserPanel({
   snapshotLimit,
   onSnapshotLimitChange,
   onClearAll,
+  accentColor,
   className,
 }: SnapshotBrowserPanelProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const {
     searchQuery,
     setSearchQuery,
@@ -69,9 +75,10 @@ export function SnapshotBrowserPanel({
   } = useSnapshotBrowser({ scopes, api })
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div className={cn('space-y-6', className)}>
       {/* Snapshot Limit */}
-      <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-4">
+      <div className="bg-neutral-980 border border-neutral-700 rounded-lg p-4">
         <div className="flex items-center justify-between">
           <div>
             <label className="text-neutral-300">Snapshot Limit</label>
@@ -88,7 +95,7 @@ export function SnapshotBrowserPanel({
       </div>
 
       {/* Snapshot Browser */}
-      <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-4">
+      <div className="bg-neutral-980 border border-neutral-700 rounded-lg p-4">
         <div className="flex items-center justify-between mb-3">
           <div>
             <label className="text-neutral-300">Browse Snapshots</label>
@@ -103,7 +110,7 @@ export function SnapshotBrowserPanel({
             onClick={() => onClearAll?.()}
             disabled={totalSnapshotCount === 0 || !onClearAll}
             size="sm"
-            color="red"
+            accentColor="red"
             tooltip={{
               title: 'Clear all snapshots',
               description: 'Delete all saved snapshots',
@@ -126,7 +133,7 @@ export function SnapshotBrowserPanel({
       </div>
 
       {/* Help */}
-      <div className="bg-neutral-900/50 border border-neutral-700 rounded-lg p-4">
+      <div className="bg-neutral-980/50 border border-neutral-700 rounded-lg p-4">
         <div className="flex items-start gap-3">
           <HelpCircle className="w-4 h-4 text-neutral-500 mt-0.5 shrink-0" />
           <div className="text-md text-neutral-500 space-y-2">
@@ -143,5 +150,6 @@ export function SnapshotBrowserPanel({
         </div>
       </div>
     </div>
+    </AccentColorProvider>
   )
 }

package/components/sections/snapshot-browser/snapshot-tree.tsx

@@ -211,7 +211,7 @@ function SnapshotEntryRow({
           onDelete(scopeId, categoryId, itemId, entry.id)
         }}
         size="sm"
-        color="red"
+        accentColor="red"
         className={cn('transition-opacity', isDeleting ? 'opacity-50' : 'opacity-0 group-hover:opacity-100')}
         disabled={isDeleting}
         tooltip={{ title: 'Delete', description: 'Delete this snapshot' }}
@@ -322,6 +322,7 @@ export function SnapshotTree({
 
   if (totalCount === 0) {
     return (
+      // py-8: empty state needs extra vertical breathing room beyond the p-6 scale max
       <div className={cn('text-md text-neutral-500 py-8 text-center', className)}>
         No snapshots saved yet.
         <br />
@@ -352,7 +353,7 @@ export function SnapshotTree({
             <IconButton
               icon={<X className="w-3.5 h-3.5" />}
               onClick={() => onSearchChange('')}
-              color="neutral"
+              accentColor="neutral"
               size="xss"
               className="absolute right-2 top-1/2 -translate-y-1/2"
               tooltip={{ title: 'Clear', description: 'Clear search' }}
@@ -365,7 +366,7 @@ export function SnapshotTree({
             icon={allExpanded ? <ChevronsDownUp className="w-3.5 h-3.5" /> : <ChevronsUpDown className="w-3.5 h-3.5" />}
             onClick={allExpanded ? onCollapseAll : onExpandAll}
             size="sm"
-            color="neutral"
+            accentColor="neutral"
             tooltip={{
               title: allExpanded ? 'Collapse All' : 'Expand All',
               description: allExpanded ? 'Collapse all sections' : 'Expand all sections',
@@ -375,7 +376,7 @@ export function SnapshotTree({
       </div>
 
       {/* Tree */}
-      <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-2 min-h-[200px] max-h-[60vh] overflow-y-auto">
+      <div className="bg-neutral-980 border border-neutral-700 rounded-lg p-2 min-h-[200px] max-h-[60vh] overflow-y-auto">
         {filteredScopes.length === 0 && searchQuery ? (
           <p className="text-sm text-neutral-500 text-center py-4">
             No snapshots match &ldquo;{searchQuery}&rdquo;

package/components/sections/snapshot-browser/types.ts

@@ -49,7 +49,7 @@ export interface SnapshotCategory {
   items: SnapshotItem[]
 }
 
-/** A top-level scope containing categories (e.g. "Settings", "Extensions") */
+/** A top-level scope containing categories (e.g. "Settings", "Capabilities") */
 export interface SnapshotScope {
   id: string
   name: string

package/components/sections/snippets-editor/snippets-editor.tsx

@@ -3,7 +3,7 @@
  *
  * Part of: Sections > Snippets Editor
  *
- * Replicates the configr "Settings > Extensions > [type] > Snippets" page
+ * Replicates the configr "Settings > Capabilities > [type] > Snippets" page
  * as a reusable, self-contained component. Left column shows the snippet
  * list with search; right column shows the editor form.
  *
@@ -25,10 +25,12 @@
 import { useResizableSidebar } from '../../hooks/use-resizable-sidebar.ts'
 import { Plus, X, Braces, Trash2, RotateCcw, Save } from 'lucide-react'
 import { ACCENT_TEXT, type AccentColor } from '../../lib/form-colors.ts'
+import type { FormColor } from '../../lib/form-colors.ts'
 import { cn } from '../../lib/cn.ts'
 import { Input } from '../../ui/input.tsx'
 import { ResizableTextarea } from '../../ui/resizable-textarea.tsx'
 import { IconButton } from '../../ui/icon-button.tsx'
+import { useAccentColor, AccentColorProvider } from '../../lib/accent-context.ts'
 import { useSnippetsEditor } from './use-snippets-editor.ts'
 import type { SnippetData, SnippetsEditorApi } from './types.ts'
 
@@ -40,7 +42,7 @@ export interface SnippetsEditorProps {
   /** Section description, e.g. "Define snippets to reuse in skills prompts..." */
   description?: string
   className?: string
-  accentColor?: string
+  accentColor?: FormColor
 }
 
 const ACCENT_DIVIDER_HOVER: Record<string, string> = {
@@ -90,8 +92,10 @@ export function SnippetsEditor({
   title = 'Snippets',
   description = 'Define reusable snippets for prompts using {{SNIPPET_NAME}} syntax.',
   className,
-  accentColor = 'blue',
+  accentColor: accentColorProp,
 }: SnippetsEditorProps) {
+  const contextAccent = useAccentColor()
+  const accentColor = accentColorProp ?? contextAccent ?? 'blue'
   const {
     selectedName,
     selectSnippet,
@@ -119,7 +123,8 @@ export function SnippetsEditor({
   )
 
   return (
-    <div className={cn('flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden', className)}>
+    <AccentColorProvider value={accentColor}>
+    <div className={cn('flex flex-col bg-neutral-980 border border-neutral-700 rounded-lg overflow-hidden', className)}>
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700 bg-purple-500/5">
         <div className="flex items-center gap-2">
@@ -151,7 +156,7 @@ export function SnippetsEditor({
               icon={<Plus className="w-3.5 h-3.5" />}
               onClick={startAdd}
               size="xs"
-              color="blue"
+              accentColor="cyan"
               tooltip={{ title: 'Add Snippet', description: 'Create a new snippet' }}
               disabled={isAdding}
             />
@@ -160,6 +165,7 @@ export function SnippetsEditor({
           {/* Snippet list */}
           <div className="flex-1 overflow-y-auto">
             {filteredSnippets.length === 0 && !isAdding && (
+              // py-10: empty state needs extra vertical breathing room beyond the p-6 scale max
               <div className="text-center py-10 px-4">
                 <Braces className="w-8 h-8 mx-auto text-purple-400/40 mb-3" />
                 <p className="text-sm text-neutral-500 mb-1">
@@ -222,6 +228,7 @@ export function SnippetsEditor({
         </div>
       </div>
     </div>
+    </AccentColorProvider>
   )
 }
 
@@ -243,8 +250,8 @@ function SnippetListItem({ snippet, selected, onSelect, onDelete, accentColor }:
       className={cn(
         'group flex items-start gap-2 px-3 py-2.5 cursor-pointer transition-colors border-l-2',
         selected
-          ? `bg-neutral-850 ${ACCENT_BORDER[accentColor] ?? ACCENT_BORDER.blue}`
-          : 'border-l-transparent hover:bg-neutral-850/50',
+          ? `bg-neutral-970 ${ACCENT_BORDER[accentColor] ?? ACCENT_BORDER.blue}`
+          : 'border-l-transparent hover:bg-neutral-970/50',
       )}
       onClick={onSelect}
     >
@@ -366,7 +373,7 @@ function SnippetForm({
               icon={<Trash2 className="w-3.5 h-3.5" />}
               onClick={onDelete}
               size="sm"
-              color="red"
+              accentColor="red"
               disabled={isSaving}
               tooltip={{ title: 'Delete', description: 'Remove this snippet' }}
             />
@@ -387,7 +394,7 @@ function SnippetForm({
             icon={<RotateCcw className="w-3.5 h-3.5" />}
             onClick={onReset}
             size="sm"
-            color="neutral"
+            accentColor="orange"
             disabled={isSaving}
             tooltip={{ title: 'Reset', description: 'Revert to saved values' }}
           />

package/components/settings/SettingsHeader.tsx

@@ -49,7 +49,7 @@ export function SettingsHeader({
 
   return (
     <div
-      className={`bg-neutral-950 border border-neutral-700 border-l-2 ${styles.border} rounded-lg p-4 flex items-center gap-4`}
+      className={`bg-neutral-990 border border-neutral-700 border-l-2 ${styles.border} rounded-lg p-4 flex items-center gap-4`}
     >
       <div className={`flex-shrink-0 w-8 h-8 rounded-lg ${styles.iconBg} flex items-center justify-center`}>
         {icon ?? <Info className={`w-4 h-4 ${styles.iconColor}`} />}
@@ -62,7 +62,7 @@ export function SettingsHeader({
             icon={<RotateCcw className="w-4 h-4" />}
             onClick={onReset}
             size="sm"
-            color="orange"
+            accentColor="orange"
             tooltip={
               resetTooltip ?? {
                 title: 'Reset to Defaults',

package/components/settings/SettingsPanel.tsx

@@ -1,20 +1,28 @@
 import type { ReactNode } from 'react'
 import { SettingsTreeNav } from './SettingsTreeNav.tsx'
 import type { SettingsTreeNode } from './settings-tree-utils.ts'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 export interface SettingsPanelProps {
   tree: SettingsTreeNode[]
   selectedPath: string
   onSelectPath: (path: string) => void
   children: ReactNode
+  accentColor?: FormColor
 }
 
-export function SettingsPanel({ tree, selectedPath, onSelectPath, children }: SettingsPanelProps) {
+export function SettingsPanel({ tree, selectedPath, onSelectPath, children, accentColor }: SettingsPanelProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
+
   return (
     <div className="flex-1 flex overflow-hidden">
-      <SettingsTreeNav tree={tree} selectedPath={selectedPath} onSelectPath={onSelectPath} />
+      <SettingsTreeNav tree={tree} selectedPath={selectedPath} onSelectPath={onSelectPath} accentColor={effectiveColor} />
       <div className="flex-1 overflow-y-auto">
-        {children}
+        <AccentColorProvider value={effectiveColor}>
+          {children}
+        </AccentColorProvider>
       </div>
     </div>
   )

package/components/settings/SettingsTreeNav.tsx

@@ -9,12 +9,16 @@ import {
   getParentPaths,
   filterTree,
 } from './settings-tree-utils.ts'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export interface SettingsTreeNavProps {
   tree: SettingsTreeNode[]
   selectedPath: string
   onSelectPath: (path: string) => void
-  accentColor?: string
+  accentColor?: FormColor
+  className?: string
+  searchPlaceholder?: string
 }
 
 const ACCENT_SELECTED: Record<string, string> = {
@@ -90,7 +94,7 @@ function TreeNode({
         className={`
           w-full flex items-center gap-2 px-2 py-1.5 text-md rounded-md transition-colors cursor-pointer
           ${isSelected ? ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue : isInSelectedPath ? 'text-neutral-300' : 'text-neutral-400'}
-          ${!isSelected && 'hover:bg-neutral-800 hover:text-neutral-200'}
+          ${!isSelected && 'hover:bg-neutral-960 hover:text-neutral-200'}
         `}
         style={{ paddingLeft: `${depth * 12 + 8}px` }}
       >
@@ -135,7 +139,9 @@ function TreeNode({
   )
 }
 
-export function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor = 'blue' }: SettingsTreeNavProps) {
+export function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor, className, searchPlaceholder }: SettingsTreeNavProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => {
     const expanded = new Set<string>()
     if (selectedPath) {
@@ -203,12 +209,12 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor
   }
 
   return (
-    <nav className="w-56 flex-shrink-0 bg-neutral-900 border-r border-neutral-800 flex flex-col overflow-hidden">
-      <div className="p-2 border-b border-neutral-800">
+    <nav className={className ?? "w-56 flex-shrink-0 bg-neutral-980 border-r border-neutral-960 flex flex-col overflow-hidden"}>
+      <div className="p-2 border-b border-neutral-960">
         <div className="flex items-center gap-1">
           <Input
             type="search"
-            placeholder="Search..."
+            placeholder={searchPlaceholder ?? "Search..."}
             value={searchQuery}
             onChange={setSearchQuery}
             size="sm"
@@ -220,7 +226,7 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor
               icon={<ChevronsUpDown className="w-3.5 h-3.5" />}
               onClick={handleExpandAll}
               size="sm"
-              color="neutral"
+              accentColor="neutral"
               tooltipPosition="left"
               tooltip={{
                 title: 'Expand All',
@@ -233,7 +239,7 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor
               icon={<ChevronsDownUp className="w-3.5 h-3.5" />}
               onClick={handleCollapseAll}
               size="sm"
-              color="neutral"
+              accentColor="neutral"
               tooltipPosition="left"
               tooltip={{
                 title: 'Collapse All',
@@ -261,7 +267,7 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor
               onToggleExpand={handleToggleExpand}
               depth={0}
               searchQuery={searchQuery}
-              accentColor={accentColor}
+              accentColor={effectiveColor}
             />
           ))
         )}

package/components/ui/action-dialog.tsx

@@ -21,6 +21,8 @@ import { SelectionGrid, type SelectionCardItem, type CodingToolPresetConfig } fr
 import { ExecutionDetailsPanel } from './execution-details-panel.tsx'
 import type { DetailRow } from './detail-section.tsx'
 import { cn } from '../lib/cn.ts'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 export interface ActionDialogProps {
   /** Dialog title */
@@ -49,11 +51,11 @@ export interface ActionDialogProps {
   statusText?: string
 
   // ── Selection section (optional) ─────────────────────────────────────────
-  /** Label above the selection grid (e.g. "AI Tool:") */
+  /** Label above the selection grid (e.g. "Coding Agent:") */
   selectionLabel?: string
   /** Custom selection items - renders SelectionGrid when provided */
   items?: SelectionCardItem[]
-  /** Built-in AI tool presets. Ignored when `items` is provided. */
+  /** Built-in coding agent presets. Ignored when `items` is provided. */
   presets?: CodingToolPresetConfig[]
   /** Currently selected item IDs */
   selectedIds?: string[]
@@ -95,6 +97,8 @@ export interface ActionDialogProps {
   children?: React.ReactNode
   /** Additional className */
   className?: string
+  /** Accent color for themed sub-components */
+  accentColor?: FormColor
 }
 
 export function ActionDialog({
@@ -130,7 +134,10 @@ export function ActionDialog({
   executionWarning,
   children,
   className,
+  accentColor: accentColorProp,
 }: ActionDialogProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   const dialogRef = useRef<HTMLDivElement>(null)
   const titleId = useId()
 
@@ -141,18 +148,8 @@ export function ActionDialog({
   const hasScenarios = scenarios && scenarios.length > 0 && selectedScenarioIds && onSelectScenarios
   const hasExecutionDetails = executionDetails.length > 0 || onAllowDirectEditsChange || executionWarning
 
-  const allScenariosSelected = hasScenarios && selectedScenarioIds!.length === scenarios!.filter(s => !s.disabled).length
-
-  function handleSelectAllScenarios() {
-    if (!scenarios || !onSelectScenarios) return
-    if (allScenariosSelected) {
-      onSelectScenarios([])
-    } else {
-      onSelectScenarios(scenarios.filter(s => !s.disabled).map(s => s.id))
-    }
-  }
-
   return createPortal(
+    <AccentColorProvider value={effectiveColor}>
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-[var(--dialog-backdrop)]" onClick={onCancel} aria-hidden="true" />
       <div
@@ -161,13 +158,13 @@ export function ActionDialog({
         aria-modal="true"
         aria-labelledby={titleId}
         className={cn(
-          'relative bg-neutral-950 border border-neutral-700 rounded-xl shadow-lg w-full max-w-[800px] mx-4 flex flex-col',
+          'relative bg-neutral-990 border border-neutral-700 rounded-lg shadow-lg w-full max-w-[800px] mx-4 flex flex-col',
           'max-h-[80vh]',
           className,
         )}
       >
         {/* Header */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b border-neutral-700 flex-shrink-0">
+        <div className="flex items-center gap-3 px-4 py-3 flex-shrink-0">
           {Icon && (
             <Icon
               className="w-4 h-4 flex-shrink-0"
@@ -187,7 +184,7 @@ export function ActionDialog({
             <IconButton
               icon="settings"
               size="sm"
-              color="neutral"
+              accentColor="neutral"
               onClick={onSettings}
               tooltip={{ description: 'Open settings' }}
             />
@@ -200,7 +197,7 @@ export function ActionDialog({
           {hasSelection && (
             <div>
               {selectionLabel && (
-                <div className="text-sm text-neutral-500 mb-2">{selectionLabel}</div>
+                <div className="font-medium text-neutral-400 text-md mb-2">{selectionLabel}</div>
               )}
               <SelectionGrid
                 items={items}
@@ -217,16 +214,7 @@ export function ActionDialog({
           {/* Built-in SelectionGrid for scenarios */}
           {hasScenarios && (
             <div>
-              <div className="flex items-center justify-between mb-2">
-                <span className="text-sm text-neutral-500">{scenarioLabel}</span>
-                <button
-                  type="button"
-                  onClick={handleSelectAllScenarios}
-                  className="text-sm text-blue-400 hover:text-blue-300 transition-colors cursor-pointer"
-                >
-                  {allScenariosSelected ? 'Deselect All' : 'Select All'}
-                </button>
-              </div>
+              <div className="font-medium text-neutral-400 text-md mb-2">{scenarioLabel}</div>
               <SelectionGrid
                 items={scenarios}
                 selectedIds={selectedScenarioIds}
@@ -260,14 +248,20 @@ export function ActionDialog({
             onCancel={onCancel}
             cancelTooltip="Close this dialog"
             onConfirm={onSubmit}
-            confirmTooltip={submitLabel}
+            confirmTooltip={
+              hasScenarios && selectedScenarioIds!.length === 0
+                ? 'Select at least one scenario to run'
+                : submitLabel
+            }
             confirmIcon={submitIcon}
             confirmColor={submitColor as 'blue'}
-            confirmDisabled={submitDisabled}
+            confirmDisabled={submitDisabled || (hasScenarios && selectedScenarioIds!.length === 0)}
+            border={false}
           />
         </div>
       </div>
-    </div>,
+    </div>
+    </AccentColorProvider>,
     document.body,
   )
 }

package/components/ui/ai-action-button.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { IconButton, type IconButtonProps, type IconName } from './icon-button.tsx'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export type AiActionStatus = 'idle' | 'running' | 'completed'
 export type AiCompletionResult = 'success' | 'partial' | 'error'
@@ -32,16 +33,16 @@ export interface AiActionButtonProps {
   disabledReason?: string
 
   /** Color in default state */
-  color?: IconButtonProps['color']
+  accentColor?: IconButtonProps['accentColor']
   /** Color when completed successfully (defaults to 'green') */
-  completedColor?: IconButtonProps['color']
+  completedColor?: IconButtonProps['accentColor']
 
   size?: IconButtonProps['size']
   className?: string
   testId?: string
 }
 
-const COMPLETION_COLORS: Record<AiCompletionResult, IconButtonProps['color']> = {
+const COMPLETION_COLORS: Record<AiCompletionResult, IconButtonProps['accentColor']> = {
   success: 'green',
   partial: 'amber',
   error: 'red',
@@ -65,12 +66,14 @@ export function AiActionButton({
   onClick,
   disabled: forceDisabled = false,
   disabledReason,
-  color = 'neutral',
+  accentColor,
   completedColor = 'green',
   size = 'sm',
   className,
   testId,
 }: AiActionButtonProps) {
+  const contextAccent = useAccentColor()
+  const effectiveAccent = accentColor ?? contextAccent ?? 'purple'
   const isRunning = status === 'running'
   const isCompleted = status === 'completed'
 
@@ -90,8 +93,8 @@ export function AiActionButton({
         ? completedColor
         : COMPLETION_COLORS[completionResult]
     }
-    return color
-  }, [isCompleted, completionResult, completedColor, color])
+    return effectiveAccent
+  }, [isCompleted, completionResult, completedColor, effectiveAccent])
 
   const resolvedTooltip = useMemo(() => {
     if (forceDisabled && disabledReason) {
@@ -122,7 +125,7 @@ export function AiActionButton({
   return (
     <IconButton
       icon={resolvedIcon}
-      color={resolvedColor}
+      accentColor={resolvedColor}
       size={size}
       disabled={isDisabled}
       onClick={isDisabled ? () => {} : onClick}

package/components/ui/ai-execution-action-buttons.tsx

@@ -1,4 +1,6 @@
 import { IconButton, type IconName } from './icon-button.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export type ExecutionStatus = 'running' | 'success' | 'partial' | 'error'
 
@@ -17,6 +19,8 @@ export interface AiExecutionActionButtonsProps {
   status?: ExecutionStatus
   /** Prefix for test IDs (e.g., 'scan-modal' results in 'scan-modal-minimize-btn') */
   testIdPrefix?: string
+  /** Accent color for themed sub-components */
+  accentColor?: FormColor
 }
 
 export function AiExecutionActionButtons({
@@ -27,8 +31,12 @@ export function AiExecutionActionButtons({
   onClose,
   status = 'success',
   testIdPrefix,
+  accentColor,
 }: AiExecutionActionButtonsProps) {
-  const getDoneButtonConfig = (): { icon: IconName; color: 'neutral' | 'blue' | 'red' | 'amber'; tooltip: { title?: string; description: string } } => {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
+
+  const getDoneButtonConfig = (): { icon: IconName; color: FormColor; tooltip: { title?: string; description: string } } => {
     if (!allDone) {
       return {
         icon: 'check-circle',
@@ -52,7 +60,7 @@ export function AiExecutionActionButtons({
       default:
         return {
           icon: 'check-circle',
-          color: 'blue',
+          color: effectiveColor,
           tooltip: { description: 'All scans completed successfully' },
         }
     }
@@ -69,7 +77,7 @@ export function AiExecutionActionButtons({
             icon="minus"
             onClick={onMinimize}
             size="sm"
-            color="neutral"
+            accentColor="neutral"
             tooltip={{ description: 'Hide modal. Process will continue in background.' }}
             tooltipPosition="top"
             testId={testIdPrefix ? `${testIdPrefix}-minimize-btn` : undefined}
@@ -81,7 +89,7 @@ export function AiExecutionActionButtons({
               icon="stop-circle"
               onClick={onCancel}
               size="sm"
-              color="red"
+              accentColor="red"
               tooltip={{ description: 'Stop and kill the running process' }}
               tooltipPosition="top"
               testId={testIdPrefix ? `${testIdPrefix}-cancel-btn` : undefined}
@@ -96,7 +104,7 @@ export function AiExecutionActionButtons({
         onClick={onClose}
         disabled={isRunning && !allDone}
         size="sm"
-        color={doneConfig.color}
+        accentColor={doneConfig.color}
         tooltip={doneConfig.tooltip}
         tooltipPosition="top"
         testId={testIdPrefix ? `${testIdPrefix}-close-btn` : undefined}

package/components/ui/badge.tsx

@@ -15,13 +15,14 @@
 
 import { memo } from 'react'
 import { FORM_COLORS, type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { cn } from '../lib/cn.ts'
 
 export type BadgeColor = AccentColor
 
 export interface BadgeProps {
   value: number | string
-  color?: BadgeColor
+  accentColor?: BadgeColor
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   className?: string
   testId?: string
@@ -37,11 +38,13 @@ const sizeClasses = {
 
 export const Badge = memo(function Badge({
   value,
-  color = 'neutral',
+  accentColor,
   size = 'sm',
   className,
   testId,
 }: BadgeProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'neutral'
   const display = typeof value === 'number' && value > 99 ? '99+' : value
 
   return (
@@ -49,8 +52,8 @@ export const Badge = memo(function Badge({
       data-testid={testId}
       className={cn(
         'inline-flex items-center justify-center border rounded-full font-medium leading-none tabular-nums',
-        FORM_COLORS[color].border,
-        FORM_COLORS[color].accent,
+        FORM_COLORS[effectiveColor].border,
+        FORM_COLORS[effectiveColor].accent,
         sizeClasses[size],
         className,
       )}