@toolr/ui-design 0.1.7 → 0.1.9

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,40 +73,50 @@ 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}`}
       >
-        <span
-          className={`${FORM_COLORS[color].accent} hover:brightness-125 transition-colors`}
+        <button
+          type="button"
+          aria-label={ascending ? 'Sort descending' : 'Sort ascending'}
+          className={`${FORM_COLORS[effectiveColor].accent} hover:brightness-125 transition-colors cursor-pointer`}
           onClick={(e) => { e.stopPropagation(); onToggleDirection() }}
-          role="button"
         >
           <DirIcon className="w-3 h-3" />
-        </span>
+        </button>
         <span className="whitespace-nowrap">{current.label}</span>
         <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
-
-      {isOpen && (
-        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-xl 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>
   )
 }

package/components/ui/status-card.tsx

@@ -2,6 +2,8 @@
 
 import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral'
 
@@ -18,6 +20,7 @@ export interface StatusCardProps {
   items: StatusItem[]
   action?: { label: string; onClick: () => void }
   className?: string
+  accentColor?: FormColor
 }
 
 const statusDotColor: Record<StatusType, string> = {
@@ -43,11 +46,15 @@ export function StatusCard({
   items,
   action,
   className,
+  accentColor: accentColorProp,
 }: StatusCardProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   const Icon = icon ? iconMap[icon] : undefined
 
   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="flex items-center gap-2.5 px-4 py-3 border-b border-neutral-700">
         {Icon && (
           <Icon className="w-4 h-4 shrink-0" style={{ color: iconColor }} />
@@ -81,5 +88,6 @@ export function StatusCard({
         </div>
       )}
     </div>
+    </AccentColorProvider>
   )
 }

package/components/ui/tab-bar.tsx

@@ -6,6 +6,7 @@ import { iconMap, type IconName } from './icon-button.tsx'
 import { Badge, type BadgeColor } from './badge.tsx'
 import { cn } from '../lib/cn.ts'
 import { Tooltip } from './tooltip.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface Tab {
   id: string
@@ -25,6 +26,7 @@ export interface TabBarProps {
   variant?: 'underline' | 'pill' | 'card'
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   className?: string
+  accentColor?: FormColor
 }
 
 const sizeConfig = {
@@ -32,7 +34,7 @@ const sizeConfig = {
   xs: { text: 'text-sm', icon: 'w-3 h-3', px: 'px-2', py: 'py-1', close: 'w-3 h-3', badgeSize: 'xs' as const, gap: 'gap-1' },
   sm: { text: 'text-md', icon: 'w-3.5 h-3.5', px: 'px-3', py: 'py-1.5', close: 'w-3 h-3', badgeSize: 'sm' as const, gap: 'gap-1.5' },
   md: { text: 'text-base', icon: 'w-4 h-4', px: 'px-4', py: 'py-2', close: 'w-3.5 h-3.5', badgeSize: 'md' as const, gap: 'gap-2' },
-  lg: { text: 'text-lg', icon: 'w-5 h-5', px: 'px-5', py: 'py-2.5', close: 'w-4 h-4', badgeSize: 'lg' as const, gap: 'gap-2' },
+  lg: { text: 'text-lg', icon: 'w-5 h-5', px: 'px-4', py: 'py-2.5', close: 'w-4 h-4', badgeSize: 'lg' as const, gap: 'gap-2' },
 }
 
 const colorMap: Record<string, { active: string; icon: string; indicator: string }> = {
@@ -85,14 +87,15 @@ function TabIcon({ icon, size, color }: { icon: IconName; size: 'xss' | 'xs' | '
 
 function TabBadge({ badge, size, badgeColor }: { badge: number | string; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; badgeColor?: BadgeColor }) {
   const s = sizeConfig[size]
-  return <Badge value={badge} color={badgeColor} size={s.badgeSize} className="flex-shrink-0" />
+  return <Badge value={badge} accentColor={badgeColor} size={s.badgeSize} className="flex-shrink-0" />
 }
 
-function CloseButton({ size, onClick }: { size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; onClick: () => void }) {
+function CloseButton({ size, onClick, tabLabel }: { size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; onClick: () => void; tabLabel: string }) {
   const s = sizeConfig[size]
   return (
     <button
       type="button"
+      aria-label={`Close ${tabLabel}`}
       onClick={(e) => {
         e.stopPropagation()
         onClick()
@@ -116,13 +119,15 @@ function CompactTab({
       ? cn('bg-neutral-700 font-medium', c.active)
       : 'text-neutral-500 hover:text-neutral-400 hover:bg-neutral-700/50',
     card: isActive
-      ? cn('bg-neutral-800 border-neutral-700', c.active)
-      : 'bg-transparent border-transparent text-neutral-500 hover:text-neutral-400 hover:bg-neutral-900',
+      ? cn('bg-neutral-960 border-neutral-700', c.active)
+      : 'bg-transparent border-transparent text-neutral-500 hover:text-neutral-400 hover:bg-neutral-980',
   }[variant]
 
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'relative flex items-center justify-center transition-colors cursor-pointer',
@@ -136,7 +141,7 @@ function CompactTab({
         {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
         {tab.badge !== undefined && (
           <span className="absolute -top-1.5 -right-2.5">
-            <Badge value={tab.badge} color={tab.badgeColor} size="xss" />
+            <Badge value={tab.badge} accentColor={tab.badgeColor} size="xss" />
           </span>
         )}
       </span>
@@ -144,7 +149,7 @@ function CompactTab({
         <span className={cn('absolute bottom-0 left-0 right-0 h-0.5 rounded-full', c.indicator)} />
       )}
       {isActive && variant === 'card' && (
-        <span className="absolute -bottom-px left-0 right-0 h-px bg-neutral-800" />
+        <span className="absolute -bottom-px left-0 right-0 h-px bg-neutral-960" />
       )}
     </button>
   )
@@ -160,6 +165,8 @@ function UnderlineTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'group relative flex items-center whitespace-nowrap transition-colors cursor-pointer',
@@ -171,7 +178,7 @@ function UnderlineTab({
       {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
       <span>{tab.label}</span>
       {tab.badge !== undefined && <TabBadge badge={tab.badge} size={size} badgeColor={tab.badgeColor} />}
-      {showClose && <CloseButton size={size} onClick={onClose!} />}
+      {showClose && <CloseButton size={size} onClick={onClose!} tabLabel={tab.label} />}
       {isActive && (
         <span className={cn('absolute bottom-0 left-0 right-0 h-0.5 rounded-full', c.indicator)} />
       )}
@@ -189,6 +196,8 @@ function PillTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'group flex items-center whitespace-nowrap rounded-md transition-colors cursor-pointer',
@@ -202,7 +211,7 @@ function PillTab({
       {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
       <span>{tab.label}</span>
       {tab.badge !== undefined && <TabBadge badge={tab.badge} size={size} badgeColor={tab.badgeColor} />}
-      {showClose && <CloseButton size={size} onClick={onClose!} />}
+      {showClose && <CloseButton size={size} onClick={onClose!} tabLabel={tab.label} />}
     </button>
   )
 }
@@ -217,22 +226,24 @@ function CardTab({
   return (
     <button
       type="button"
+      role="tab"
+      aria-selected={isActive}
       onClick={onSelect}
       className={cn(
         'group relative flex items-center whitespace-nowrap transition-colors cursor-pointer rounded-t-lg border border-b-0',
         s.text, s.px, s.py, s.gap,
         isActive && 'is-active',
         isActive
-          ? cn('bg-neutral-800 border-neutral-700', c.active)
-          : 'bg-transparent border-transparent text-neutral-500 hover:text-neutral-400 hover:bg-neutral-900',
+          ? cn('bg-neutral-960 border-neutral-700', c.active)
+          : 'bg-transparent border-transparent text-neutral-500 hover:text-neutral-400 hover:bg-neutral-980',
       )}
     >
       {tab.icon && <TabIcon icon={tab.icon} size={size} color={isActive ? tab.color : undefined} />}
       <span>{tab.label}</span>
       {tab.badge !== undefined && <TabBadge badge={tab.badge} size={size} badgeColor={tab.badgeColor} />}
-      {showClose && <CloseButton size={size} onClick={onClose!} />}
+      {showClose && <CloseButton size={size} onClick={onClose!} tabLabel={tab.label} />}
       {isActive && (
-        <span className="absolute -bottom-px left-0 right-0 h-px bg-neutral-800" />
+        <span className="absolute -bottom-px left-0 right-0 h-px bg-neutral-960" />
       )}
     </button>
   )
@@ -252,6 +263,7 @@ export function TabBar({
   variant = 'underline',
   size = 'sm',
   className,
+  accentColor: _accentColor,
 }: TabBarProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const [compact, setCompact] = useState(false)
@@ -277,6 +289,7 @@ export function TabBar({
   return (
     <div
       ref={containerRef}
+      role="tablist"
       className={cn(
         'flex items-end',
         variant === 'underline' && 'border-b border-neutral-700',

package/components/ui/toggle.tsx

@@ -8,10 +8,13 @@
  */
 
 import { type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
+import { cn } from '../lib/cn.ts'
 
 export type ToggleColor = AccentColor
 
-// Border colors per accent
+// Border colors per accent — rgba values required for inline style with precise opacity control.
+// Base RGB values map to Tailwind accent-500 palette shades.
 const BORDER_COLORS: Record<ToggleColor, { idle: string; active: string }> = {
   blue: { idle: 'rgba(59,130,246,0.3)', active: 'rgba(59,130,246,0.4)' },
   green: { idle: 'rgba(34,197,94,0.3)', active: 'rgba(34,197,94,0.4)' },
@@ -30,7 +33,9 @@ const BORDER_COLORS: Record<ToggleColor, { idle: string; active: string }> = {
   teal: { idle: 'rgba(20,184,166,0.3)', active: 'rgba(20,184,166,0.4)' },
 }
 
-// Knob colors: checked = accent color, unchecked = gray
+// Knob colors: checked = accent color, unchecked = gray.
+// Hex values required — applied via inline style for the toggle knob element.
+// Values map to Tailwind accent-400 palette shades.
 const KNOB_COLORS: Record<ToggleColor, { on: string; off: string }> = {
   blue: { on: '#60a5fa', off: 'rgba(96,165,250,0.35)' },
   green: { on: '#4ade80', off: 'rgba(74,222,128,0.35)' },
@@ -83,7 +88,9 @@ export interface ToggleProps {
   disabled?: boolean
   size?: ToggleSize
   className?: string
-  color?: ToggleColor
+  accentColor?: ToggleColor
+  /** Accessible label — required for screen readers */
+  'aria-label'?: string
   /** Test ID for E2E testing */
   testId?: string
 }
@@ -93,33 +100,40 @@ export function Toggle({
   onChange,
   disabled = false,
   size = 'sm',
-  className = '',
-  color = 'blue',
+  className,
+  accentColor,
+  'aria-label': ariaLabel,
   testId,
 }: ToggleProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const s = TOGGLE_SIZES[size]
-  const bc = BORDER_COLORS[color]
-  const kc = KNOB_COLORS[color]
+  const bc = BORDER_COLORS[effectiveColor]
+  const kc = KNOB_COLORS[effectiveColor]
   return (
     <button
       type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={ariaLabel}
       onClick={() => !disabled && onChange(!checked)}
       disabled={disabled}
       data-testid={testId}
       style={{ boxShadow: `inset 0 0 0 1px ${checked ? bc.active : bc.idle}` }}
-      className={`
-        relative ${s.track} rounded-full transition-all flex-shrink-0
-        cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
-        ${checked ? TOGGLE_CHECKED_TRACK[color] : TOGGLE_UNCHECKED_TRACK[color]}
-        ${className}
-      `}
+      className={cn(
+        'relative rounded-full transition-all flex-shrink-0 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
+        s.track,
+        checked ? TOGGLE_CHECKED_TRACK[effectiveColor] : TOGGLE_UNCHECKED_TRACK[effectiveColor],
+        className,
+      )}
     >
       <span
         style={{ backgroundColor: checked ? kc.on : kc.off }}
-        className={`
-          block absolute top-0.5 left-0.5 ${s.knob} rounded-full transition-transform
-          ${checked ? s.translate : 'translate-x-0'}
-        `}
+        className={cn(
+          'block absolute top-0.5 left-0.5 rounded-full transition-transform',
+          s.knob,
+          checked ? s.translate : 'translate-x-0',
+        )}
       />
     </button>
   )

package/components/ui/tooltip.tsx

@@ -2,6 +2,8 @@ import { useState, useRef, useLayoutEffect, useEffect, useCallback } from 'react
 import type { ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { useClickOutside } from '../hooks/use-click-outside.ts'
+import { AccentColorProvider, useAccentColor } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface TooltipContent {
   title?: string
@@ -32,6 +34,7 @@ interface TooltipProps {
   trigger?: 'hover' | 'click'
   /** Additional classes for the wrapper element (e.g., 'h-full' for flex containers) */
   wrapperClassName?: string
+  accentColor?: FormColor
 }
 
 const TOOLTIP_GAP = 8
@@ -176,7 +179,10 @@ export function Tooltip({
   trigger = 'hover',
   interactive = false,
   wrapperClassName = '',
+  accentColor,
 }: TooltipProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const [isVisible, setIsVisible] = useState(false)
   const [coords, setCoords] = useState({ top: 0, left: 0 })
   const [actualPosition, setActualPosition] = useState<ResolvedPosition>(position === 'auto' ? 'top' : position)
@@ -209,19 +215,18 @@ export function Tooltip({
     if (!triggerRef.current) return
     const triggerRect = triggerRef.current.getBoundingClientRect()
     const tooltipEl = tooltipRef.current
+    const tooltipRect = tooltipEl?.getBoundingClientRect()
 
     let resolvedPosition: ResolvedPosition = position === 'auto' ? 'top' : position
 
-    if (position === 'auto' && tooltipEl) {
-      const tooltipRect = tooltipEl.getBoundingClientRect()
+    if (position === 'auto' && tooltipRect) {
       resolvedPosition = resolveAutoPosition(triggerRect, tooltipRect)
       setActualPosition(resolvedPosition)
     }
 
     let newCoords = calculateBasePosition(triggerRect, resolvedPosition, align)
 
-    if (tooltipEl) {
-      const tooltipRect = tooltipEl.getBoundingClientRect()
+    if (tooltipRect) {
       newCoords = adjustForTooltipSize(newCoords, tooltipRect, resolvedPosition, align)
       newCoords = clampToViewport(newCoords, tooltipRect)
     }
@@ -248,7 +253,8 @@ export function Tooltip({
   const tooltipContent = (
     <div
       ref={tooltipRef}
-      className={`fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
+      role="tooltip"
+      className={`fixed px-3 py-1.5 bg-[var(--popover)] border border-neutral-600 rounded-lg shadow-lg z-[9999] ${interactive || trigger === 'click' ? '' : 'pointer-events-none'} ${multiline ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
       style={{
         top: coords.top,
         left: coords.left,
@@ -276,7 +282,9 @@ export function Tooltip({
         onClick={trigger === 'click' ? () => setIsVisible((v) => !v) : undefined}
         className={wrapperClassName || 'inline-flex'}
       >
-        {children}
+        <AccentColorProvider value={effectiveColor}>
+          {children}
+        </AccentColorProvider>
       </div>
       {isVisible && createPortal(tooltipContent, document.body)}
     </>

package/dist/content.js

@@ -13,8 +13,8 @@ function DL({ children }) {
 function DLRow({ term, children, even }) {
   const bg = even ? "bg-white/[0.015]" : "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} font-semibold text-md whitespace-nowrap`, children: term }),
-    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-md text-neutral-400`, children })
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-960/60 ${bg} font-semibold text-md whitespace-nowrap`, children: term }),
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-960/60 ${bg} text-md text-neutral-400`, children })
   ] });
 }
 function UL({ children }) {
@@ -65,17 +65,17 @@ function Callout({ color, children }) {
 }
 function CalloutCode({ color, children }) {
   const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue;
-  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-md ${c.codeText}`, children });
+  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-960/80 px-2 py-1 rounded mt-1.5 text-md ${c.codeText}`, children });
 }
 function CalloutDim({ children }) {
   return /* @__PURE__ */ jsx("p", { className: "text-neutral-500 mt-1.5", children });
 }
 function CodeBlock({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-900/60 rounded-md p-3 font-mono text-sm text-neutral-400 mb-5 whitespace-pre overflow-x-auto leading-normal", children });
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-980/60 rounded-md p-3 font-mono text-sm text-neutral-400 mb-5 whitespace-pre overflow-x-auto leading-normal", children });
 }
 function CK({ color, children }) {
   const textColor = color ? `text-${color}-400` : "";
-  return /* @__PURE__ */ jsx("code", { className: `bg-neutral-800/80 px-1.5 py-px rounded text-[0.9em] ${textColor}`, children });
+  return /* @__PURE__ */ jsx("code", { className: `bg-neutral-960/80 px-1.5 py-px rounded text-[0.9em] ${textColor}`, children });
 }
 function ExternalLink({ href, children }) {
   return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noopener noreferrer", className: "underline cursor-pointer", children });
@@ -91,7 +91,7 @@ function LocationItem({
 }) {
   const bg = even ? "bg-white/[0.015]" : "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: `py-2 border-b border-neutral-800/60 ${bg} flex items-center gap-1.5`, children: [
+    /* @__PURE__ */ jsxs("div", { className: `py-2 border-b border-neutral-960/60 ${bg} flex items-center gap-1.5`, children: [
       /* @__PURE__ */ jsx(
         "span",
         {
@@ -100,7 +100,7 @@ function LocationItem({
       ),
       /* @__PURE__ */ jsx("span", { className: `text-${color}-400 text-md font-semibold`, children: label })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-800/60 ${bg} text-md text-neutral-400`, children })
+    /* @__PURE__ */ jsx("div", { className: `py-2 border-b border-neutral-960/60 ${bg} text-md text-neutral-400`, children })
   ] });
 }
 function TitledLI({ color, title, children }) {
@@ -115,7 +115,7 @@ function TitledLI({ color, title, children }) {
   ] });
 }
 function CalloutDialog({ color, lines }) {
-  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-md", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-960/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-md", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("span", { className: `text-${color}-300 font-semibold mr-1`, children: [
       line.speaker,
       ":"

package/dist/diagrams.d.ts

@@ -66,7 +66,6 @@ declare const stroke: {
     readonly thin: 1;
     readonly hairline: 0.5;
 };
-/** Semantic text colors. */
 declare const color: {
     readonly textBright: "#e5e7eb";
     readonly textMedium: "#9ca3af";