@toolr/ui-design 0.1.8 → 0.1.10

package/components/ui/modal.tsx

@@ -5,6 +5,8 @@ import { useModalBehavior } from '../hooks/use-modal-behavior.ts'
 import { IconButton, type ActionItem } from './icon-button.tsx'
 import { FormActions } from './form-actions.tsx'
 import type { ReactNode } from 'react'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 export type ModalKind = 'info' | 'warning' | 'error' | 'orange' | 'success'
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl'
@@ -57,9 +59,9 @@ function Modal({ isOpen, onClose, title, children, kind = 'info', size = 'md', h
         aria-modal="true"
         aria-labelledby={titleId}
         data-testid={testId}
-        className={`relative bg-neutral-900 border border-neutral-700 rounded-xl shadow-lg ${SIZE_CLASSES[size]} w-full mx-4 overflow-hidden`}
+        className={`relative bg-neutral-980 border border-neutral-700 rounded-lg shadow-lg ${SIZE_CLASSES[size]} w-full mx-4 overflow-hidden`}
       >
-        <div className="flex items-center gap-3 px-5 py-4 border-b border-neutral-800">
+        <div className="flex items-center gap-3 px-4 py-4 border-b border-neutral-960">
           {KIND_ICON[kind]}
           <h3 id={titleId} className="text-lg font-semibold text-white flex-1 min-w-0 truncate">{title}</h3>
           {headerActions?.map((a, i) => <IconButton key={i} {...a} />)}
@@ -68,13 +70,13 @@ function Modal({ isOpen, onClose, title, children, kind = 'info', size = 'md', h
               icon="x"
               onClick={onClose}
               size="sm"
-              color="neutral"
+              accentColor="neutral"
               tooltip={{ description: 'Close this modal' }}
               testId="modal-close"
             />
           )}
         </div>
-        <div className="px-5 py-4">{children}</div>
+        <div className="px-4 py-4">{children}</div>
       </div>
     </div>,
     document.body,
@@ -93,6 +95,7 @@ export interface ConfirmModalProps {
   confirmColor?: 'red' | 'blue' | 'orange' | 'yellow'
   isLoading?: boolean
   confirmDisabled?: boolean
+  accentColor?: FormColor
 }
 
 export function ConfirmModal({
@@ -107,7 +110,10 @@ export function ConfirmModal({
   confirmColor = 'blue',
   isLoading = false,
   confirmDisabled = false,
+  accentColor: accentColorProp,
 }: ConfirmModalProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   const [isConfirming, setIsConfirming] = useState(false)
 
   const isDisabled = isLoading || isConfirming || confirmDisabled
@@ -126,6 +132,7 @@ export function ConfirmModal({
   }
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <Modal isOpen={isOpen} onClose={onClose} title={title} kind={kind} hideCloseButton>
       <div className="text-neutral-300 mb-6">
         {message}
@@ -154,6 +161,7 @@ export function ConfirmModal({
         confirmStatus={isInProgress ? 'loading' : undefined}
       />
     </Modal>
+    </AccentColorProvider>
   )
 }
 
@@ -163,6 +171,7 @@ export interface AlertModalProps {
   title: string
   message: string
   kind?: ModalKind
+  accentColor?: FormColor
 }
 
 export function AlertModal({
@@ -171,8 +180,12 @@ export function AlertModal({
   title,
   message,
   kind = 'info',
+  accentColor: accentColorProp,
 }: AlertModalProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   return (
+    <AccentColorProvider value={effectiveColor}>
     <Modal isOpen={isOpen} onClose={onClose} title={title} kind={kind} hideCloseButton>
       <div className="text-neutral-300 mb-6">{message}</div>
       <FormActions
@@ -182,5 +195,6 @@ export function AlertModal({
         confirmTooltip="Dismiss this alert"
       />
     </Modal>
+    </AccentColorProvider>
   )
 }

package/components/ui/nav-card.tsx

@@ -3,6 +3,7 @@
 import { iconMap, type IconName } from './icon-button.tsx'
 import { Label, type LabelColor } from './label.tsx'
 import { cn } from '../lib/cn.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface NavCardProps {
   title: string
@@ -11,11 +12,12 @@ export interface NavCardProps {
   /** Custom icon component. Takes precedence over icon name. */
   IconComponent?: React.ComponentType<{ className?: string }>
   iconColor?: string
-  label?: { text: string; color: LabelColor; tooltip: { description: string } }
+  label?: { text: string; color: LabelColor; icon?: IconName; tooltip: { description: string } }
   stats?: string
   onClick?: () => void
   disabled?: boolean
   className?: string
+  accentColor?: FormColor
 }
 
 export function NavCard({
@@ -29,6 +31,7 @@ export function NavCard({
   onClick,
   disabled = false,
   className,
+  accentColor: _accentColor,
 }: NavCardProps) {
   const Icon = IconComponent ?? (icon ? iconMap[icon] : undefined)
 
@@ -38,7 +41,7 @@ export function NavCard({
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
       className={cn(
-        'relative w-full text-left rounded-lg border border-neutral-700 bg-neutral-800 p-4 transition-all duration-200 cursor-pointer',
+        'relative w-full text-left rounded-lg border border-neutral-700 bg-neutral-960 p-4 transition-all duration-200 cursor-pointer',
         !disabled && 'hover:-translate-y-0.5 hover:border-neutral-600 hover:bg-neutral-700',
         disabled && 'opacity-50 cursor-not-allowed',
         className,
@@ -46,7 +49,7 @@ export function NavCard({
     >
       {label && (
         <span className="absolute top-3 right-3">
-          <Label text={label.text} color={label.color} size="xs" tooltip={label.tooltip} />
+          <Label text={label.text} accentColor={label.color} icon={label.icon} size="xs" tooltip={label.tooltip} />
         </span>
       )}
 

package/components/ui/navigation-bar.tsx

@@ -6,6 +6,7 @@ import type { LucideIcon } from 'lucide-react'
 import { iconMap, type IconName } from './icon-button.tsx'
 import type { BreadcrumbSegment } from './breadcrumb.tsx'
 import { ACCENT_NAV, type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { cn } from '../lib/cn.ts'
 import { useClickOutside } from '../hooks/use-click-outside.ts'
 
@@ -17,10 +18,14 @@ export interface NavigationBarProps {
   onForward?: () => void
   showHistory?: boolean
   historyEntries?: BreadcrumbSegment[][]
+  currentHistoryIndex?: number
   onHistorySelect?: (index: number) => void
   leadingAction?: { icon: IconName; onClick?: () => void }
   separator?: 'chevron' | 'slash' | 'dot'
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  /** 'bar' (default): all-in-one bordered box. 'header': nav controls left-aligned, breadcrumb absolutely centered. */
+  layout?: 'bar' | 'header'
+  accentColor?: AccentColor
   className?: string
 }
 
@@ -33,12 +38,32 @@ const sizeConfig = {
 }
 
 
-function NavButton({ icon: Icon, onClick, disabled, size, active }: {
+// Accent color classes for NavButton — same pattern as IconButton's colorClasses
+const navColorClasses: Record<AccentColor, { text: string; border: string; hover: string; active: string }> = {
+  green: { text: 'text-green-400', border: 'border-green-500/30', hover: 'hover:bg-green-500/20 hover:border-green-500/40 hover:text-green-300', active: 'bg-green-500/20 text-green-300 border-green-500/40' },
+  red: { text: 'text-red-400', border: 'border-red-500/30', hover: 'hover:bg-red-500/20 hover:border-red-500/40 hover:text-red-300', active: 'bg-red-500/20 text-red-300 border-red-500/40' },
+  blue: { text: 'text-blue-400', border: 'border-blue-500/30', hover: 'hover:bg-blue-500/20 hover:border-blue-500/40 hover:text-blue-300', active: 'bg-blue-500/20 text-blue-300 border-blue-500/40' },
+  orange: { text: 'text-orange-400', border: 'border-orange-500/30', hover: 'hover:bg-orange-500/20 hover:border-orange-500/40 hover:text-orange-300', active: 'bg-orange-500/20 text-orange-300 border-orange-500/40' },
+  cyan: { text: 'text-cyan-400', border: 'border-cyan-500/30', hover: 'hover:bg-cyan-500/20 hover:border-cyan-500/40 hover:text-cyan-300', active: 'bg-cyan-500/20 text-cyan-300 border-cyan-500/40' },
+  yellow: { text: 'text-yellow-400', border: 'border-yellow-500/30', hover: 'hover:bg-yellow-500/20 hover:border-yellow-500/40 hover:text-yellow-300', active: 'bg-yellow-500/20 text-yellow-300 border-yellow-500/40' },
+  purple: { text: 'text-purple-400', border: 'border-purple-500/30', hover: 'hover:bg-purple-500/20 hover:border-purple-500/40 hover:text-purple-300', active: 'bg-purple-500/20 text-purple-300 border-purple-500/40' },
+  indigo: { text: 'text-indigo-400', border: 'border-indigo-500/30', hover: 'hover:bg-indigo-500/20 hover:border-indigo-500/40 hover:text-indigo-300', active: 'bg-indigo-500/20 text-indigo-300 border-indigo-500/40' },
+  emerald: { text: 'text-emerald-400', border: 'border-emerald-500/30', hover: 'hover:bg-emerald-500/20 hover:border-emerald-500/40 hover:text-emerald-300', active: 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40' },
+  amber: { text: 'text-amber-400', border: 'border-amber-500/30', hover: 'hover:bg-amber-500/20 hover:border-amber-500/40 hover:text-amber-300', active: 'bg-amber-500/20 text-amber-300 border-amber-500/40' },
+  violet: { text: 'text-violet-400', border: 'border-violet-500/30', hover: 'hover:bg-violet-500/20 hover:border-violet-500/40 hover:text-violet-300', active: 'bg-violet-500/20 text-violet-300 border-violet-500/40' },
+  neutral: { text: 'text-neutral-400', border: 'border-neutral-500/30', hover: 'hover:bg-neutral-500/20 hover:border-neutral-500/40 hover:text-neutral-300', active: 'bg-neutral-500/20 text-neutral-300 border-neutral-500/40' },
+  sky: { text: 'text-sky-400', border: 'border-sky-500/30', hover: 'hover:bg-sky-500/20 hover:border-sky-500/40 hover:text-sky-300', active: 'bg-sky-500/20 text-sky-300 border-sky-500/40' },
+  pink: { text: 'text-pink-400', border: 'border-pink-500/30', hover: 'hover:bg-pink-500/20 hover:border-pink-500/40 hover:text-pink-300', active: 'bg-pink-500/20 text-pink-300 border-pink-500/40' },
+  teal: { text: 'text-teal-400', border: 'border-teal-500/30', hover: 'hover:bg-teal-500/20 hover:border-teal-500/40 hover:text-teal-300', active: 'bg-teal-500/20 text-teal-300 border-teal-500/40' },
+}
+
+function NavButton({ icon: Icon, onClick, disabled, size, active, colorStyle }: {
   icon: LucideIcon
   onClick?: () => void
   disabled?: boolean
   size: keyof typeof sizeConfig
   active?: boolean
+  colorStyle: typeof navColorClasses[AccentColor]
 }) {
   const s = sizeConfig[size]
   return (
@@ -52,8 +77,8 @@ function NavButton({ icon: Icon, onClick, disabled, size, active }: {
         disabled
           ? 'text-neutral-600 cursor-not-allowed'
           : active
-            ? 'text-white bg-neutral-700/50 border border-neutral-600 cursor-pointer'
-            : 'text-neutral-400 border border-neutral-700/50 hover:text-white hover:bg-neutral-700/50 cursor-pointer',
+            ? cn('border cursor-pointer', colorStyle.active)
+            : cn('border cursor-pointer', colorStyle.text, colorStyle.border, colorStyle.hover),
       )}
     >
       <Icon className={s.navIcon} />
@@ -91,12 +116,19 @@ export function NavigationBar({
   onForward,
   showHistory = false,
   historyEntries,
+  currentHistoryIndex,
   onHistorySelect,
   leadingAction,
   separator = 'chevron',
   size = 'sm',
+  layout = 'bar',
+  accentColor,
   className,
 }: NavigationBarProps) {
+  const contextAccentColor = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccentColor ?? 'neutral'
+  const colorStyle = navColorClasses[effectiveColor]
+
   const s = sizeConfig[size]
   const hasNav = !!(onBack || onForward)
   const LeadIcon = leadingAction ? iconMap[leadingAction.icon] : null
@@ -108,12 +140,134 @@ export function NavigationBar({
 
   const hasHistoryEntries = historyEntries && historyEntries.length > 0
 
+  const renderSegments = () => segments.map((segment, index) => {
+    const isLast = index === segments.length - 1
+    const isClickable = !isLast && !!segment.onClick
+    const colors = segment.color && ACCENT_NAV[segment.color as AccentColor] ? ACCENT_NAV[segment.color as AccentColor] : null
+
+    return (
+      <div key={segment.id} className="flex items-center gap-1 min-w-0">
+        {index > 0 && <SegmentSeparator type={separator} size={size} />}
+        {isClickable ? (
+          <button
+            type="button"
+            onClick={segment.onClick}
+            className={cn(
+              'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0',
+              s.text,
+              'font-medium hover:text-white',
+              colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
+            )}
+          >
+            {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
+            <span className="truncate max-w-[200px]">{segment.label}</span>
+          </button>
+        ) : (
+          <div
+            className={cn(
+              'flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0',
+              s.text,
+              isLast
+                ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']
+                : ['font-medium', colors ? colors.text : 'text-neutral-300'],
+            )}
+          >
+            {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
+            <span className="truncate max-w-[200px]">{segment.label}</span>
+          </div>
+        )}
+      </div>
+    )
+  })
+
+  const renderHistoryDropdown = () => {
+    if (!historyOpen || !hasHistoryEntries || !historyEntries) return null
+    const entries = layout === 'header' ? [...historyEntries].reverse() : historyEntries
+    return (
+      <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-black/80 backdrop-blur-sm border border-neutral-700 rounded-lg shadow-lg z-50">
+        <div className="px-3 py-1.5 border-b border-neutral-700/50">
+          <p className="text-sm font-medium text-neutral-500">History{layout === 'header' && ` (${historyEntries.length})`}</p>
+        </div>
+        <div className="max-h-[300px] overflow-y-auto py-1">
+          {entries.map((entry, entryIdx) => {
+            const actualIdx = layout === 'header' ? historyEntries.length - 1 - entryIdx : entryIdx
+            const isCurrent = currentHistoryIndex !== undefined && actualIdx === currentHistoryIndex
+            return (
+              <button
+                key={actualIdx}
+                type="button"
+                onClick={() => {
+                  onHistorySelect?.(actualIdx)
+                  setHistoryOpen(false)
+                }}
+                className={cn(
+                  'w-full px-3 py-1.5 flex items-center gap-1 text-left transition-colors cursor-pointer',
+                  isCurrent ? 'bg-green-500/10' : 'hover:bg-neutral-800',
+                )}
+              >
+                {entry.map((seg, segIdx) => (
+                  <span key={seg.id} className="flex items-center gap-1 min-w-0">
+                    {segIdx > 0 && <ChevronRight className="w-2.5 h-2.5 text-neutral-600 flex-shrink-0" />}
+                    {seg.icon && <SegmentIcon icon={seg.icon} color={seg.color} size="xs" />}
+                    <span className={cn(
+                      'text-sm truncate',
+                      seg.color && ACCENT_NAV[seg.color as AccentColor] ? ACCENT_NAV[seg.color as AccentColor].text : 'text-neutral-300',
+                    )}>
+                      {seg.label}
+                    </span>
+                  </span>
+                ))}
+                {isCurrent && <span className="ml-auto pl-4 text-xs text-green-400 flex-shrink-0">Current</span>}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
+  if (layout === 'header') {
+    return (
+      <nav className={cn('relative flex items-center h-full', className)}>
+        {/* Left: nav controls */}
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {hasNav && (
+            <>
+              <NavButton icon={ChevronLeft} onClick={onBack} disabled={!canGoBack} size={size} colorStyle={colorStyle} />
+              <NavButton icon={ChevronRight} onClick={onForward} disabled={!canGoForward} size={size} colorStyle={colorStyle} />
+            </>
+          )}
+          {showHistory && (
+            <div className="relative" ref={historyRef}>
+              <NavButton
+                icon={History}
+                onClick={() => setHistoryOpen(o => !o)}
+                disabled={!hasHistoryEntries}
+                size={size}
+                active={historyOpen}
+                colorStyle={colorStyle}
+              />
+              {renderHistoryDropdown()}
+            </div>
+          )}
+        </div>
+
+        {/* Center: breadcrumb absolutely centered */}
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <div className={cn('pointer-events-auto flex items-center gap-1', s.px, s.py, 'bg-neutral-960/50 rounded-lg')}>
+            {renderSegments()}
+          </div>
+        </div>
+      </nav>
+    )
+  }
+
   return (
     <nav className={cn('flex items-center', className)}>
-      <div className={cn('flex items-center gap-1', s.px, s.py, 'bg-neutral-800/50 border border-neutral-700/50 rounded-lg')}>
+      <div className={cn('flex items-center gap-1', s.px, s.py, 'bg-neutral-960/50 border rounded-lg', colorStyle.border)}>
         {leadingAction && LeadIcon && (
           <>
-            <NavButton icon={LeadIcon} onClick={leadingAction.onClick} size={size} />
+            <NavButton icon={LeadIcon} onClick={leadingAction.onClick} size={size} colorStyle={colorStyle} />
             <Divider size={size} />
           </>
         )}
@@ -121,8 +275,8 @@ export function NavigationBar({
         {hasNav && (
           <>
             <div className="flex items-center gap-0.5">
-              <NavButton icon={ChevronLeft} onClick={onBack} disabled={!canGoBack} size={size} />
-              <NavButton icon={ChevronRight} onClick={onForward} disabled={!canGoForward} size={size} />
+              <NavButton icon={ChevronLeft} onClick={onBack} disabled={!canGoBack} size={size} colorStyle={colorStyle} />
+              <NavButton icon={ChevronRight} onClick={onForward} disabled={!canGoForward} size={size} colorStyle={colorStyle} />
             </div>
             <Divider size={size} />
           </>
@@ -137,87 +291,15 @@ export function NavigationBar({
                 disabled={!hasHistoryEntries}
                 size={size}
                 active={historyOpen}
+                colorStyle={colorStyle}
               />
-              {historyOpen && hasHistoryEntries && (
-                <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-lg z-50">
-                  <div className="px-3 py-1.5 border-b border-neutral-700/50">
-                    <p className="text-sm font-medium text-neutral-500">History</p>
-                  </div>
-                  <div className="max-h-[300px] overflow-y-auto py-1">
-                    {historyEntries.map((entry, i) => (
-                      <button
-                        key={i}
-                        type="button"
-                        onClick={() => {
-                          onHistorySelect?.(i)
-                          setHistoryOpen(false)
-                        }}
-                        className="w-full px-3 py-1.5 flex items-center gap-1 text-left hover:bg-neutral-800 transition-colors cursor-pointer"
-                      >
-                        {entry.map((seg, segIdx) => (
-                          <span key={seg.id} className="flex items-center gap-1 min-w-0">
-                            {segIdx > 0 && <ChevronRight className="w-2.5 h-2.5 text-neutral-600 flex-shrink-0" />}
-                            {seg.icon && <SegmentIcon icon={seg.icon} color={seg.color} size="xs" />}
-                            <span className={cn(
-                              'text-sm truncate',
-                              seg.color && ACCENT_NAV[seg.color as AccentColor] ? ACCENT_NAV[seg.color as AccentColor].text : 'text-neutral-300',
-                            )}>
-                              {seg.label}
-                            </span>
-                          </span>
-                        ))}
-                      </button>
-                    ))}
-                  </div>
-                  <div className="px-3 py-1.5 border-t border-neutral-700/50">
-                    <p className="text-sm text-neutral-600">Click to navigate</p>
-                  </div>
-                </div>
-              )}
+              {renderHistoryDropdown()}
             </div>
             <Divider size={size} />
           </>
         )}
 
-        {segments.map((segment, index) => {
-          const isLast = index === segments.length - 1
-          const isClickable = !isLast && !!segment.onClick
-          const colors = segment.color && ACCENT_NAV[segment.color as AccentColor] ? ACCENT_NAV[segment.color as AccentColor] : null
-
-          return (
-            <div key={segment.id} className="flex items-center gap-1 min-w-0">
-              {index > 0 && <SegmentSeparator type={separator} size={size} />}
-              {isClickable ? (
-                <button
-                  type="button"
-                  onClick={segment.onClick}
-                  className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0',
-                    s.text,
-                    'font-medium hover:text-white',
-                    colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
-                  )}
-                >
-                  {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
-                  <span className="truncate max-w-[200px]">{segment.label}</span>
-                </button>
-              ) : (
-                <div
-                  className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0',
-                    s.text,
-                    isLast
-                      ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']
-                      : ['font-medium', colors ? colors.text : 'text-neutral-300'],
-                  )}
-                >
-                  {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
-                  <span className="truncate max-w-[200px]">{segment.label}</span>
-                </div>
-              )}
-            </div>
-          )
-        })}
+        {renderSegments()}
       </div>
     </nav>
   )

package/components/ui/number-input.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useCallback, type KeyboardEvent } from 'react'
 import { ChevronUp, ChevronDown } from 'lucide-react'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export interface NumberInputProps {
   value: number
@@ -9,7 +10,7 @@ export interface NumberInputProps {
   max?: number
   step?: number
   variant?: 'filled' | 'outline'
-  color?: FormColor
+  accentColor?: FormColor
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   disabled?: boolean
   className?: string
@@ -26,7 +27,7 @@ const SIZE_CONFIG = {
 }
 
 const VARIANT_CLASSES = {
-  filled: 'bg-neutral-800',
+  filled: 'bg-neutral-960',
   outline: 'bg-transparent',
 }
 
@@ -37,7 +38,7 @@ export function NumberInput({
   max,
   step = 1,
   variant = 'outline',
-  color = 'blue',
+  accentColor,
   size = 'sm',
   disabled = false,
   className = '',
@@ -78,8 +79,11 @@ export function NumberInput({
     setFocused(false)
   }
 
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
+
   const sc = SIZE_CONFIG[size]
-  const fc = FORM_COLORS[color]
+  const fc = FORM_COLORS[effectiveColor]
 
   return (
     <div