@toolr/ui-design 0.1.8 → 0.1.9

package/components/ui/scope-badge.tsx

@@ -1,11 +1,14 @@
 import { Home, Folder, Lock, Eye } from 'lucide-react'
 import { Label, type LabelColor } from './label.tsx'
+import { AccentColorProvider, useAccentColor } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export type ScopeType = 'user' | 'project' | 'local' | 'read-only'
 
 interface ScopeBadgeProps {
   scope: ScopeType
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  accentColor?: FormColor
 }
 
 const scopeConfig: Record<
@@ -48,20 +51,24 @@ const scopeConfig: Record<
   },
 }
 
-export function ScopeBadge({ scope, size = 'xs' }: ScopeBadgeProps) {
+export function ScopeBadge({ scope, size = 'xs', accentColor }: ScopeBadgeProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const config = scopeConfig[scope]
   const Icon = config.icon
 
   return (
-    <Label
-      text={config.label}
-      color={config.color}
-      IconComponent={Icon}
-      tooltip={{
-        title: config.title,
-        description: config.description,
-      }}
-      size={size}
-    />
+    <AccentColorProvider value={effectiveColor}>
+      <Label
+        text={config.label}
+        accentColor={config.color}
+        IconComponent={Icon}
+        tooltip={{
+          title: config.title,
+          description: config.description,
+        }}
+        size={size}
+      />
+    </AccentColorProvider>
   )
 }

package/components/ui/segmented-toggle.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import type { AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { Tooltip, type TooltipContent, type TooltipPosition } from './tooltip.tsx'
 
 export interface SegmentedToggleOption<T extends string> {
@@ -108,7 +109,7 @@ export function SegmentedToggle<T extends string>({
   options,
   value,
   onChange,
-  accentColor = 'blue',
+  accentColor: accentColorProp,
   variant = 'outline',
   size = 'sm',
   tooltipPosition = 'bottom',
@@ -116,10 +117,12 @@ export function SegmentedToggle<T extends string>({
   disabled = false,
   disabledTooltip,
 }: SegmentedToggleProps<T>) {
+  const contextAccent = useAccentColor()
+  const accentColor = accentColorProp ?? contextAccent ?? 'blue'
   const isOutline = variant === 'outline'
   const containerClasses = isOutline
     ? OUTLINE_CONTAINER[accentColor] || OUTLINE_CONTAINER.blue
-    : 'flex items-center bg-neutral-800/50 border border-neutral-700 rounded-md'
+    : 'flex items-center bg-neutral-960/50 border border-neutral-700 rounded-md'
 
   const toggle = (
     <div

package/components/ui/select.tsx

@@ -4,6 +4,7 @@ import { ChevronDown, Check } from 'lucide-react'
 import { useClickOutside } from '../hooks/use-click-outside.ts'
 import { useDropdownMaxHeight } from '../hooks/use-dropdown-max-height.ts'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export interface SelectOption<T extends string | number = string> {
   value: T
@@ -17,7 +18,7 @@ export interface SelectProps<T extends string | number = string> {
   onChange: (value: T) => void
   placeholder?: string
   variant?: 'filled' | 'outline'
-  color?: FormColor
+  accentColor?: FormColor
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   align?: 'left' | 'right'
   disabled?: boolean
@@ -25,7 +26,7 @@ export interface SelectProps<T extends string | number = string> {
 }
 
 const VARIANT_CLASSES = {
-  filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700', menuBg: 'bg-[var(--popover)]' },
+  filled: { bg: 'bg-neutral-960', hoverBg: 'hover:bg-neutral-700', menuBg: 'bg-[var(--popover)]' },
   outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-700', menuBg: 'bg-[var(--popover)]' },
 }
 
@@ -43,12 +44,14 @@ export function Select<T extends string | number = string>({
   onChange,
   placeholder = 'Select...',
   variant = 'outline',
-  color = 'blue',
+  accentColor,
   size = 'sm',
   align = 'left',
   disabled = false,
   className = '',
 }: SelectProps<T>) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const [isOpen, setIsOpen] = useState(false)
   const [highlightIdx, setHighlightIdx] = useState(-1)
   const ref = useRef<HTMLDivElement>(null)
@@ -114,8 +117,8 @@ export function Select<T extends string | number = string>({
         aria-haspopup="listbox"
         onClick={() => !disabled && (isOpen ? close() : open())}
         disabled={disabled}
-        className={`flex items-center gap-1.5 min-w-0 rounded-lg border ${v.bg} ${FORM_COLORS[color].border} text-neutral-200 focus:outline-none ${FORM_COLORS[color].focus} transition-colors ${
-          disabled ? 'opacity-50 cursor-not-allowed' : `cursor-pointer ${FORM_COLORS[color].hover}`
+        className={`flex items-center gap-1.5 min-w-0 rounded-lg border ${v.bg} ${FORM_COLORS[effectiveColor].border} text-neutral-200 focus:outline-none ${FORM_COLORS[effectiveColor].focus} transition-colors ${
+          disabled ? 'opacity-50 cursor-not-allowed' : `cursor-pointer ${FORM_COLORS[effectiveColor].hover}`
         } ${s}`}
       >
         {selectedOption?.icon}
@@ -128,7 +131,7 @@ export function Select<T extends string | number = string>({
         <div
           ref={menuRef}
           role="listbox"
-          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`}
+          className={`fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[effectiveColor].border} rounded-lg shadow-lg overflow-hidden`}
           style={{
             top: menuPos.top,
             left: align === 'right' ? undefined : menuPos.left,
@@ -148,11 +151,11 @@ export function Select<T extends string | number = string>({
                 onPointerEnter={() => setHighlightIdx(idx)}
                 className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors cursor-pointer ${
                   isHighlighted
-                    ? `${FORM_COLORS[color].selectedBg} text-neutral-200`
-                    : isSelected ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
+                    ? `${FORM_COLORS[effectiveColor].selectedBg} text-neutral-200`
+                    : isSelected ? `${FORM_COLORS[effectiveColor].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
                 }`}
               >
-                <Check className={`w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[color].accent : 'invisible'}`} />
+                <Check className={`w-3 h-3 shrink-0 ${isSelected ? FORM_COLORS[effectiveColor].accent : 'invisible'}`} />
                 {opt.icon}
                 <span className="truncate">{opt.label}</span>
               </button>

package/components/ui/selection-grid.tsx

@@ -1,17 +1,20 @@
 import { iconMap, type IconName } from './icon-button.tsx'
 import type { ConfirmBadgeColor } from './confirm-badge.tsx'
+import { AccentColorProvider, useAccentColor } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 import { cn } from '../lib/cn.ts'
-import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
+import { FORM_COLORS } from '../lib/form-colors.ts'
+import { CodingAgentIcon, CODING_AGENT_NAMES, type CodingAgentKey } from '../lib/coding-agents.tsx'
 
-/* ── Preset logos (shared AiToolIcon) ─────────────────────── */
+/* ── Preset logos (shared CodingAgentIcon) ────────────────── */
 
 type IconProps = { className?: string; style?: React.CSSProperties }
 
-function makeToolLogo(toolKey: AiToolKey): React.ComponentType<IconProps> {
-  function ToolLogo({ className, style }: IconProps) {
-    return <AiToolIcon tool={toolKey} className={className} style={style} />
+function makeAgentLogo(agentKey: CodingAgentKey): React.ComponentType<IconProps> {
+  function AgentLogo({ className, style }: IconProps) {
+    return <CodingAgentIcon agent={agentKey} className={className} style={style} />
   }
-  return ToolLogo
+  return AgentLogo
 }
 
 /* ── Preset types & data ──────────────────────────────────── */
@@ -24,12 +27,14 @@ export type CodingToolPresetConfig = CodingToolId | {
   disabled?: boolean
 }
 
+// Brand colors use Tailwind accent hex values (violet-400, orange-500, blue-400, cyan-400, neutral-400)
+// applied via inline style because the color is dynamic per-item
 const CODING_TOOL_PRESETS: Record<CodingToolId, { name: string; description: string; color: string; badgeColor: ConfirmBadgeColor; Logo: React.ComponentType<IconProps> }> = {
-  'claude-code': { name: AI_TOOL_NAMES.claude, description: 'Security & architecture focus', color: '#a78bfa', badgeColor: 'violet', Logo: makeToolLogo('claude') },
-  'github-copilot': { name: AI_TOOL_NAMES.copilot, description: 'Code quality & patterns', color: '#f97316', badgeColor: 'orange', Logo: makeToolLogo('copilot') },
-  'codex-cli': { name: AI_TOOL_NAMES.codex, description: 'Performance & optimization', color: '#60a5fa', badgeColor: 'blue', Logo: makeToolLogo('codex') },
-  'gemini-cli': { name: AI_TOOL_NAMES.gemini, description: 'Best practices & docs', color: '#22d3ee', badgeColor: 'cyan', Logo: makeToolLogo('gemini') },
-  'opencode': { name: AI_TOOL_NAMES.opencode, description: 'Provider-agnostic AI coding agent', color: '#a1a1aa', badgeColor: 'neutral', Logo: makeToolLogo('opencode') },
+  'claude-code': { name: CODING_AGENT_NAMES.claude, description: 'Security & architecture focus', color: '#a78bfa', badgeColor: 'violet', Logo: makeAgentLogo('claude') },
+  'github-copilot': { name: CODING_AGENT_NAMES.copilot, description: 'Code quality & patterns', color: '#f97316', badgeColor: 'orange', Logo: makeAgentLogo('copilot') },
+  'codex-cli': { name: CODING_AGENT_NAMES.codex, description: 'Performance & optimization', color: '#60a5fa', badgeColor: 'blue', Logo: makeAgentLogo('codex') },
+  'gemini-cli': { name: CODING_AGENT_NAMES.gemini, description: 'Best practices & docs', color: '#22d3ee', badgeColor: 'cyan', Logo: makeAgentLogo('gemini') },
+  'opencode': { name: CODING_AGENT_NAMES.opencode, description: 'Provider-agnostic AI coding agent', color: '#a1a1aa', badgeColor: 'neutral', Logo: makeAgentLogo('opencode') },
 }
 
 function resolvePresets(presets: CodingToolPresetConfig[]): SelectionCardItem[] {
@@ -85,16 +90,11 @@ export interface SelectionGridProps {
   /** Number of columns for grid layout (auto if not set) */
   columns?: number
   className?: string
+  accentColor?: FormColor
 }
 
 /* ── Helpers ───────────────────────────────────────────────── */
 
-const DEFAULT_COLOR = 'blue-400'
-
-function resolveColor(color?: string): string {
-  return color || DEFAULT_COLOR
-}
-
 function autoColumns(itemCount: number): number {
   return Math.min(itemCount, 5)
 }
@@ -110,7 +110,10 @@ export function SelectionGrid({
   layout = 'grid',
   columns,
   className,
+  accentColor,
 }: SelectionGridProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const items = itemsProp || (presets ? resolvePresets(presets) : [])
 
   function handleClick(item: SelectionCardItem) {
@@ -132,6 +135,7 @@ export function SelectionGrid({
 
   if (layout === 'list') {
     return (
+      <AccentColorProvider value={effectiveColor}>
       <div
         className={cn('grid gap-3', className)}
         style={{ gridTemplateColumns: `repeat(${columns || 1}, 1fr)` }}
@@ -145,10 +149,12 @@ export function SelectionGrid({
           />
         ))}
       </div>
+      </AccentColorProvider>
     )
   }
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div
       className={cn('grid gap-3', className)}
       style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}
@@ -162,6 +168,7 @@ export function SelectionGrid({
         />
       ))}
     </div>
+    </AccentColorProvider>
   )
 }
 
@@ -174,7 +181,8 @@ interface CardProps {
 }
 
 function GridCard({ item, selected, onClick }: CardProps) {
-  const color = resolveColor(item.color)
+  const accent = useAccentColor() ?? 'blue'
+  const accentStyles = FORM_COLORS[accent]
   const Icon = item.IconComponent || (item.icon ? iconMap[item.icon] : undefined)
 
   return (
@@ -187,21 +195,16 @@ function GridCard({ item, selected, onClick }: CardProps) {
       className={cn(
         'relative p-3 rounded-lg text-center transition-all border-2 flex flex-col items-center',
         item.disabled
-          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]'
+          ? 'opacity-30 cursor-not-allowed border-neutral-960 bg-[var(--background)]'
           : selected
-            ? 'cursor-pointer'
-            : 'bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
+            ? `cursor-pointer ${accentStyles.selectedBg} ${accentStyles.border}`
+            : 'bg-neutral-960/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
       )}
-      style={
-        selected && !item.disabled
-          ? { borderColor: color }
-          : undefined
-      }
     >
       {Icon && (
         <Icon
           className="w-7 h-7 mb-1"
-          style={{ color: item.disabled ? undefined : (item.color || '#9ca3af') }}
+          style={{ color: item.disabled ? undefined : item.color }}
         />
       )}
 
@@ -215,7 +218,8 @@ function GridCard({ item, selected, onClick }: CardProps) {
 }
 
 function ListCard({ item, selected, onClick }: CardProps) {
-  const color = resolveColor(item.color)
+  const accent = useAccentColor() ?? 'blue'
+  const accentStyles = FORM_COLORS[accent]
   const Icon = item.IconComponent || (item.icon ? iconMap[item.icon] : undefined)
 
   return (
@@ -228,21 +232,16 @@ function ListCard({ item, selected, onClick }: CardProps) {
       className={cn(
         'relative p-3 rounded-lg transition-all border-2 flex items-center gap-3 text-left',
         item.disabled
-          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]'
+          ? 'opacity-30 cursor-not-allowed border-neutral-960 bg-[var(--background)]'
           : selected
-            ? 'cursor-pointer'
-            : 'bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
+            ? `cursor-pointer ${accentStyles.selectedBg} ${accentStyles.border}`
+            : 'bg-neutral-960/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
       )}
-      style={
-        selected && !item.disabled
-          ? { borderColor: color }
-          : undefined
-      }
     >
       {Icon && (
         <Icon
           className="w-5 h-5 flex-shrink-0"
-          style={{ color: item.disabled ? undefined : (item.color || '#9ca3af') }}
+          style={{ color: item.disabled ? undefined : item.color }}
         />
       )}
 

package/components/ui/setting-row.tsx

@@ -27,7 +27,7 @@ interface SettingRowToggle extends SettingRowBase {
   type: 'toggle'
   checked: boolean
   onChange: (checked: boolean) => void
-  color?: ToggleColor
+  accentColor?: ToggleColor
   size?: ToggleSize
 }
 
@@ -65,7 +65,7 @@ export function SettingRow(props: SettingRowProps) {
           checked={props.checked}
           onChange={props.onChange}
           disabled={disabled}
-          color={props.color}
+          accentColor={props.accentColor}
           size={props.size}
           aria-label={label}
         />

package/components/ui/settings-card.tsx

@@ -1,4 +1,6 @@
 import { cn } from '../lib/cn.ts'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 export interface SettingsCardProps {
   children: React.ReactNode
@@ -6,12 +8,15 @@ export interface SettingsCardProps {
   title?: string
   description?: string
   testId?: string
+  accentColor?: FormColor
 }
 
-export function SettingsCard({ children, className, title, description, testId }: SettingsCardProps) {
+export function SettingsCard({ children, className, title, description, testId, accentColor }: SettingsCardProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   return (
     <div
-      className={cn('bg-neutral-900 border border-neutral-800 rounded-lg p-4 space-y-4', className)}
+      className={cn('bg-neutral-980 border border-neutral-960 rounded-lg p-4 space-y-4', className)}
       data-testid={testId}
     >
       {title && (
@@ -21,7 +26,9 @@ export function SettingsCard({ children, className, title, description, testId }
         </div>
       )}
       {!title && description && <p className="text-md text-neutral-500">{description}</p>}
-      {children}
+      <AccentColorProvider value={effectiveColor}>
+        {children}
+      </AccentColorProvider>
     </div>
   )
 }

package/components/ui/settings-info-box.tsx

@@ -1,5 +1,6 @@
 import { Info, AlertTriangle, CheckCircle, AlertCircle } from 'lucide-react'
-import { ACCENT_TEXT, type AccentColor } from '../lib/form-colors.ts'
+import { ACCENT_TEXT, type AccentColor, type FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { cn } from '../lib/cn.ts'
 
 export type SettingsInfoBoxColor = AccentColor
@@ -7,6 +8,7 @@ export type SettingsInfoBoxColor = AccentColor
 export interface SettingsInfoBoxProps {
   children: React.ReactNode
   color?: SettingsInfoBoxColor
+  accentColor?: FormColor
   className?: string
   testId?: string
 }
@@ -47,15 +49,17 @@ const borderColorMap: Record<SettingsInfoBoxColor, string> = {
   teal: 'border-l-teal-500',
 }
 
-export function SettingsInfoBox({ children, color = 'neutral', className, testId }: SettingsInfoBoxProps) {
-  const Icon = INFO_BOX_ICONS[color]
+export function SettingsInfoBox({ children, color, accentColor, className, testId }: SettingsInfoBoxProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = (color ?? accentColor ?? contextAccent ?? 'neutral') as SettingsInfoBoxColor
+  const Icon = INFO_BOX_ICONS[effectiveColor]
 
   return (
     <div
-      className={cn('flex items-start gap-3 border-l-2 pl-2.5', borderColorMap[color], className)}
+      className={cn('flex items-start gap-3 border-l-2 pl-2.5', borderColorMap[effectiveColor], className)}
       data-testid={testId}
     >
-      <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', ACCENT_TEXT[color])} />
+      <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', ACCENT_TEXT[effectiveColor])} />
       <div className="text-md text-neutral-500">{children}</div>
     </div>
   )

package/components/ui/settings-section-title.tsx

@@ -6,16 +6,28 @@
  * - Configuration panels - section dividers
  */
 
+import { ACCENT_TEXT, type AccentColor, type FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
+import { cn } from '../lib/cn.ts'
+
 export interface SettingsSectionTitleProps {
   children: React.ReactNode
   className?: string
   testId?: string
+  accentColor?: FormColor
 }
 
-export function SettingsSectionTitle({ children, className = '', testId }: SettingsSectionTitleProps) {
+export function SettingsSectionTitle({ children, className, testId, accentColor }: SettingsSectionTitleProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent
+
   return (
     <h3
-      className={`text-sm font-medium text-neutral-400 uppercase tracking-wider ${className}`}
+      className={cn(
+        'text-sm font-medium uppercase tracking-wider',
+        effectiveColor ? ACCENT_TEXT[effectiveColor as AccentColor] : 'text-neutral-400',
+        className,
+      )}
       data-testid={testId}
     >
       {children}

package/components/ui/snapshot-card.tsx

@@ -4,6 +4,8 @@ import { RefreshCw, Eye } from 'lucide-react'
 import { cn } from '../lib/cn.ts'
 import { Label, type LabelColor } from './label.tsx'
 import type { IconName } from './icon-button.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 type SnapshotStatus = 'synced' | 'pending' | 'conflict' | 'outdated'
 
@@ -16,6 +18,7 @@ export interface SnapshotCardProps {
   onSync?: () => void
   onView?: () => void
   className?: string
+  accentColor?: FormColor
 }
 
 const statusStripeColor: Record<SnapshotStatus, string> = {
@@ -41,9 +44,13 @@ export function SnapshotCard({
   onSync,
   onView,
   className,
+  accentColor: accentColorProp,
 }: SnapshotCardProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   return (
-    <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden', className)}>
+    <AccentColorProvider value={effectiveColor}>
+    <div className={cn('rounded-lg border border-neutral-700 bg-neutral-960 overflow-hidden', className)}>
       <div className={cn('h-1', statusStripeColor[status])} />
 
       <div className="p-4">
@@ -51,7 +58,7 @@ export function SnapshotCard({
           <h3 className="text-md font-medium text-neutral-200 truncate">{title}</h3>
           <Label
             text={statusLabelConfig[status].text}
-            color={statusLabelConfig[status].color}
+            accentColor={statusLabelConfig[status].color}
             icon={statusLabelConfig[status].icon}
             tooltip={{ description: statusLabelConfig[status].tooltip }}
             size="xs"
@@ -103,5 +110,6 @@ export function SnapshotCard({
         )}
       </div>
     </div>
+    </AccentColorProvider>
   )
 }

package/components/ui/snippets-panel.tsx

@@ -61,7 +61,7 @@ export function SnippetsPanel({
   )
 
   return (
-    <div className={cn('flex flex-col bg-neutral-800 rounded-lg overflow-hidden', className)}>
+    <div className={cn('flex flex-col bg-neutral-960 rounded-lg overflow-hidden', className)}>
       <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-700">
         <span className="text-xs font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
         <span className="text-xs text-neutral-500">{snippets.length} snippets</span>
@@ -107,7 +107,7 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
   const langColor = snippet.language ? LANGUAGE_COLORS[snippet.language.toLowerCase()] ?? '#6b7280' : '#6b7280'
 
   return (
-    <div className="rounded-md border border-neutral-700 bg-neutral-900 hover:border-neutral-600 transition-colors">
+    <div className="rounded-md border border-neutral-700 bg-neutral-980 hover:border-neutral-600 transition-colors">
       <div className="flex items-center justify-between gap-2 px-2.5 py-1.5">
         <div className="flex items-center gap-2 min-w-0">
           <span className="text-sm font-medium text-neutral-200 truncate">{snippet.label}</span>
@@ -126,6 +126,7 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
               icon="arrow-down-to-line"
               onClick={() => onInsert(snippet.id)}
               size="xss"
+              accentColor="neutral"
               tooltip={{ title: 'Insert snippet', description: 'Insert this snippet' }}
             />
           )}
@@ -134,6 +135,7 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
               icon="copy"
               onClick={() => onCopy(snippet.id)}
               size="xss"
+              accentColor="neutral"
               tooltip={{ title: 'Copy snippet', description: 'Copy to clipboard' }}
             />
           )}

package/components/ui/sort-dropdown.tsx

@@ -1,11 +1,13 @@
-import { useState, useRef, useEffect } from 'react'
+import { useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import { ArrowUp, ArrowDown, ChevronDown, Check } from 'lucide-react'
 import { useClickOutside } from '../hooks/use-click-outside.ts'
-import { useDropdownMaxHeight } from '../hooks/use-dropdown-max-height.ts'
+import { useDropdownPortal } from '../hooks/use-dropdown-portal.ts'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 const VARIANT_CLASSES = {
-  filled: { bg: 'bg-neutral-800', hoverBg: 'hover:bg-neutral-700' },
+  filled: { bg: 'bg-neutral-960', hoverBg: 'hover:bg-neutral-700' },
   outline: { bg: 'bg-transparent', hoverBg: 'hover:bg-neutral-700' },
 }
 
@@ -25,7 +27,7 @@ export interface SortDropdownProps {
   onToggleDirection: () => void
   fields: SortField[]
   variant?: 'filled' | 'outline'
-  color?: FormColor
+  accentColor?: FormColor
 }
 
 export function SortDropdown({
@@ -35,15 +37,16 @@ export function SortDropdown({
   onToggleDirection,
   fields,
   variant = 'outline',
-  color = 'blue',
+  accentColor,
 }: SortDropdownProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const [isOpen, setIsOpen] = useState(false)
   const [highlightIdx, setHighlightIdx] = useState(-1)
-  const ref = useRef<HTMLDivElement>(null)
-  const menuRef = useDropdownMaxHeight<HTMLDivElement>(isOpen)
+  const { triggerRef, menuRef, position } = useDropdownPortal(isOpen)
   const v = VARIANT_CLASSES[variant]
 
-  useClickOutside(ref, isOpen, () => setIsOpen(false))
+  useClickOutside([triggerRef, menuRef], isOpen, () => setIsOpen(false))
 
   useEffect(() => {
     if (isOpen) setHighlightIdx(fields.findIndex((f) => f.value === field))
@@ -70,18 +73,42 @@ export function SortDropdown({
   const current = fields.find((f) => f.value === field) ?? fields[0]
   const DirIcon = ascending ? ArrowUp : ArrowDown
 
+  const menu = isOpen && createPortal(
+    <div
+      ref={menuRef}
+      role="listbox"
+      style={{ position: 'fixed', top: position.top, left: position.left, minWidth: position.minWidth, zIndex: 9999 }}
+      className={`whitespace-nowrap bg-[var(--popover)] border ${FORM_COLORS[effectiveColor].border} rounded-lg shadow-lg overflow-hidden`}
+    >
+      {fields.map((f, idx) => (
+        <button
+          key={f.value}
+          onClick={() => { onFieldChange(f.value); setIsOpen(false) }}
+          onPointerEnter={() => setHighlightIdx(idx)}
+          className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors cursor-pointer ${
+            idx === highlightIdx ? `${FORM_COLORS[effectiveColor].selectedBg} text-neutral-200` : field === f.value ? `${FORM_COLORS[effectiveColor].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
+          }`}
+        >
+          <Check className={`w-3 h-3 shrink-0 ${field === f.value ? FORM_COLORS[effectiveColor].accent : 'invisible'}`} />
+          <span>{f.label}</span>
+        </button>
+      ))}
+    </div>,
+    document.body,
+  )
+
   return (
-    <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
+    <div className="relative flex items-center" ref={triggerRef} onKeyDown={handleKeyDown}>
       <button
         aria-expanded={isOpen}
         aria-haspopup="listbox"
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${FORM_COLORS[color].border} text-neutral-200 ${FORM_COLORS[color].hover}`}
+        className={`flex items-center gap-1.5 py-1 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${FORM_COLORS[effectiveColor].border} text-neutral-200 ${FORM_COLORS[effectiveColor].hover}`}
       >
         <button
           type="button"
           aria-label={ascending ? 'Sort descending' : 'Sort ascending'}
-          className={`${FORM_COLORS[color].accent} hover:brightness-125 transition-colors cursor-pointer`}
+          className={`${FORM_COLORS[effectiveColor].accent} hover:brightness-125 transition-colors cursor-pointer`}
           onClick={(e) => { e.stopPropagation(); onToggleDirection() }}
         >
           <DirIcon className="w-3 h-3" />
@@ -89,24 +116,7 @@ export function SortDropdown({
         <span className="whitespace-nowrap">{current.label}</span>
         <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
-
-      {isOpen && (
-        <div ref={menuRef} role="listbox" className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`}>
-          {fields.map((f, idx) => (
-            <button
-              key={f.value}
-              onClick={() => { onFieldChange(f.value); setIsOpen(false) }}
-              onPointerEnter={() => setHighlightIdx(idx)}
-              className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors cursor-pointer ${
-                idx === highlightIdx ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : field === f.value ? `${FORM_COLORS[color].selectedBg} text-neutral-200` : `text-neutral-400 ${v.hoverBg}`
-              }`}
-            >
-              <Check className={`w-3 h-3 shrink-0 ${field === f.value ? FORM_COLORS[color].accent : 'invisible'}`} />
-              <span>{f.label}</span>
-            </button>
-          ))}
-        </div>
-      )}
+      {menu}
     </div>
   )
 }