@toolr/ui-design 0.1.2 → 0.1.4

package/README.md

@@ -14,19 +14,12 @@ Shared UI design system for toolr applications. Provides components, design toke
 @import "@toolr/ui-design/tokens";
 ```
 
-```ts
-// tailwind.config.ts
-import { toolrPreset } from '@toolr/ui-design/preset'
-export default { presets: [toolrPreset] }
-```
-
 ## Exports
 
 | Path | Content |
 |------|---------|
 | `@toolr/ui-design` | All components, hooks, types, utilities |
 | `@toolr/ui-design/tokens` | CSS design tokens (semantic + primitives + keyframes) |
-| `@toolr/ui-design/preset` | Tailwind preset (Inter font, extended breakpoints) |
 | `@toolr/ui-design/content` | Info panel primitives |
 | `@toolr/ui-design/diagrams` | Diagram utilities |
 

package/components/content/info-panel-primitives.tsx

@@ -114,7 +114,7 @@ export function Callout({ color, children }: { color: string; children: ReactNod
 export function CalloutCode({ color, children }: { color: string; children: ReactNode }) {
   const c = CALLOUT_COLORS[color] ?? CALLOUT_COLORS.blue
   return (
-    <code className={`block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-[13px] ${c.codeText}`}>
+    <code className={`block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-sm ${c.codeText}`}>
       {children}
     </code>
   )
@@ -204,7 +204,7 @@ export function TitledLI({ color, title, children }: { color: string; title: str
 
 export function CalloutDialog({ color, lines }: { color: string; lines: { speaker: string; text: string }[] }) {
   return (
-    <div className="bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-[13px]">
+    <div className="bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-sm">
       {lines.map((line, idx) => (
         <div key={idx}>
           <span className={`text-${color}-300 font-semibold mr-1`}>{line.speaker}:</span>
@@ -238,7 +238,7 @@ export function StatusBadge({ value, badgeColor, label, children, even }: {
     <DLRow
       term={
         <span className="flex items-center gap-1.5">
-          <span className={`inline-flex items-center justify-center w-5 h-5 rounded-full bg-${badgeColor}-500/20 text-${badgeColor}-400 text-[11px] font-bold shrink-0`}>{value}</span>
+          <span className={`inline-flex items-center justify-center w-5 h-5 rounded-full bg-${badgeColor}-500/20 text-${badgeColor}-400 text-xss font-bold shrink-0`}>{value}</span>
           <span className={`text-${badgeColor}-400 font-semibold`}>{label}</span>
         </span>
       }

package/components/lib/ai-tools.tsx

@@ -38,7 +38,7 @@ export function AiToolIcon({ tool, size, showName, className, style }: {
   return (
     <span style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
       {img}
-      <span className="text-[11px] text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
+      <span className="text-xss text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
     </span>
   )
 }

package/components/lib/form-colors.ts

@@ -1,6 +1,7 @@
 export type FormColor =
   | 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow'
   | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky'
+  | 'pink' | 'teal'
 
 interface FormColorConfig {
   /** Idle border class (e.g. 'border-blue-500/30') */
@@ -29,4 +30,6 @@ export const FORM_COLORS: Record<FormColor, FormColorConfig> = {
   violet: { border: 'border-violet-500/30', hover: 'hover:bg-violet-500/20 hover:border-violet-500/40', focus: 'focus:border-violet-500', selectedBg: 'bg-violet-600/20', accent: 'text-violet-400' },
   neutral: { border: 'border-neutral-500/30', hover: 'hover:bg-neutral-500/20 hover:border-neutral-500/40', focus: 'focus:border-neutral-500', selectedBg: 'bg-neutral-600/20', accent: 'text-neutral-400' },
   sky: { border: 'border-sky-500/30', hover: 'hover:bg-sky-500/20 hover:border-sky-500/40', focus: 'focus:border-sky-500', selectedBg: 'bg-sky-600/20', accent: 'text-sky-400' },
+  pink: { border: 'border-pink-500/30', hover: 'hover:bg-pink-500/20 hover:border-pink-500/40', focus: 'focus:border-pink-500', selectedBg: 'bg-pink-600/20', accent: 'text-pink-400' },
+  teal: { border: 'border-teal-500/30', hover: 'hover:bg-teal-500/20 hover:border-teal-500/40', focus: 'focus:border-teal-500', selectedBg: 'bg-teal-600/20', accent: 'text-teal-400' },
 }

package/components/lib/theme-engine.ts

@@ -109,6 +109,16 @@ export function isLightTheme(themeId: ThemeId): boolean {
   return LIGHT_THEMES.includes(themeId)
 }
 
+/**
+ * Apply a theme to the document by setting CSS custom properties on the root element.
+ *
+ * IMPORTANT — body background: Portal-based components (Select, Tooltip) render at
+ * document.body via createPortal. Their backgrounds use --popover which is semi-transparent
+ * (rgba(0,0,0,0.8)). If <body> has no background-color, the browser default (white) bleeds
+ * through, making dropdowns/tooltips appear gray instead of dark.
+ *
+ * Consuming apps MUST set: body { background-color: var(--background); }
+ */
 export function applyTheme(themeId: ThemeId, accentHue: number | null, dims: Record<SurfaceKey, number> = DEFAULT_DIMS, outline: number = DEFAULT_OUTLINE, root: HTMLElement = document.documentElement): void {
   const scale = generateScale(themeId, accentHue, BASE_THEMES[themeId].maxSat, dims, outline)
   const light = isLightTheme(themeId)

package/components/sections/captured-issues/captured-issues-panel.tsx

@@ -163,7 +163,7 @@ export function CapturedIssuesPanel({
               <Check className="w-5 h-5 text-green-400" />
             </div>
             <div>
-              <h3 className="text-neutral-300 font-medium">No Issues Captured</h3>
+              <h3 className="text-sm text-neutral-300 font-medium">No Issues Captured</h3>
               <p className="text-sm text-neutral-500">Everything is running smoothly.</p>
             </div>
           </div>

package/components/sections/golden-snapshots/file-diff-viewer.tsx

@@ -93,7 +93,7 @@ function DiffFileItem({ file, isSelected, onSelect, onReset, resettingFile, anyR
         {icon}
         <span className="truncate">{filename}</span>
         {statusLabel && (
-          <span className={`text-[10px] font-medium ml-auto flex-shrink-0 ${statusColor}`}>
+          <span className={`text-xss font-medium ml-auto flex-shrink-0 ${statusColor}`}>
             {statusLabel}
           </span>
         )}
@@ -171,7 +171,7 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }: DiffFileTr
     const chevronSize = isRoot ? 'w-4 h-4' : 'w-3 h-3'
 
     const countElement = isRoot ? (
-      <span className={`ml-auto px-1.5 py-0.5 rounded-full text-[10px] font-medium ${color.pillBg} ${color.text}`}>
+      <span className={`ml-auto px-1.5 py-0.5 rounded-full text-xss font-medium ${color.pillBg} ${color.text}`}>
         {fileCount}
       </span>
     ) : (

package/components/sections/golden-snapshots/snapshot-manager.tsx

@@ -54,7 +54,7 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
       <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700">
         <div className="flex items-center gap-3 mb-3">
           <Plus className="w-5 h-5 text-green-400" />
-          <h4 className="text-neutral-300 font-medium">Create Snapshot</h4>
+          <h4 className="text-sm text-neutral-300 font-medium">Create Snapshot</h4>
         </div>
         <p className="text-xs text-neutral-600 mb-3">
           Archives the current live state. If components differ from golden, their patch version is auto-bumped.
@@ -85,7 +85,7 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
         <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700">
           <div className="flex items-center gap-2">
             <Archive className="w-4 h-4 text-neutral-500" />
-            <h4 className="text-neutral-300 font-medium">Snapshots</h4>
+            <h4 className="text-sm text-neutral-300 font-medium">Snapshots</h4>
             <span className="text-xs text-neutral-500">({manifest?.snapshots.length ?? 0})</span>
           </div>
           <IconButton
@@ -114,7 +114,7 @@ export function SnapshotManager({ sync }: SnapshotManagerProps) {
                   <div className="flex items-center gap-2">
                     <span className="text-sm font-mono text-neutral-300">v{snap.version}</span>
                     {snap.version === manifest.activeVersion && (
-                      <span className="px-1.5 py-0.5 bg-green-500/20 text-green-400 text-[10px] rounded font-medium">
+                      <span className="px-1.5 py-0.5 bg-green-500/20 text-green-400 text-xss rounded font-medium">
                         active
                       </span>
                     )}

package/components/sections/golden-snapshots/status-overview.tsx

@@ -84,7 +84,7 @@ export function StatusOverview({
       <div className="bg-neutral-900 rounded-lg p-4 border border-amber-500/30">
         <div className="flex items-center gap-3 mb-3">
           <Archive className="w-5 h-5 text-amber-400" />
-          <h3 className="text-neutral-300 font-medium">Bundled Seed (App Distribution)</h3>
+          <h3 className="text-sm text-neutral-300 font-medium">Bundled Seed (App Distribution)</h3>
           {status?.seed.meta && renderVersionBadge(status.seed.meta, 'bg-amber-500/20 text-amber-400')}
         </div>
         <div className="grid grid-cols-2 gap-4 text-sm">
@@ -121,7 +121,7 @@ export function StatusOverview({
         <div className="bg-neutral-900 rounded-lg p-4 border border-blue-500/30">
           <div className="flex items-center gap-2 mb-3">
             <div className="w-3 h-3 rounded-full bg-blue-400" />
-            <h4 className="text-neutral-300 font-medium">Golden (Reference)</h4>
+            <h4 className="text-sm text-neutral-300 font-medium">Golden (Reference)</h4>
             {renderVersionBadge(status?.goldenMeta, 'bg-blue-500/20 text-blue-400')}
           </div>
           <div className="space-y-2 text-sm">
@@ -153,7 +153,7 @@ export function StatusOverview({
         <div className="bg-neutral-900 rounded-lg p-4 border border-green-500/30">
           <div className="flex items-center gap-2 mb-3">
             <div className="w-3 h-3 rounded-full bg-green-400" />
-            <h4 className="text-neutral-300 font-medium">Live (Working Copy)</h4>
+            <h4 className="text-sm text-neutral-300 font-medium">Live (Working Copy)</h4>
             {renderVersionBadge(status?.liveMeta, 'bg-green-500/20 text-green-400')}
             <div className="ml-auto relative" ref={resetMenuRef}>
               <IconButton
@@ -290,7 +290,7 @@ export function StatusOverview({
         <div className="bg-neutral-900 rounded-lg p-4 border border-neutral-700">
           <div className="flex items-center gap-2 mb-3">
             <Archive className="w-4 h-4 text-neutral-500" />
-            <h4 className="text-neutral-300 font-medium">Local Snapshots</h4>
+            <h4 className="text-sm text-neutral-300 font-medium">Local Snapshots</h4>
           </div>
           <div className="flex gap-6 text-sm">
             <div>

package/components/sections/golden-snapshots/version-manager.tsx

@@ -56,7 +56,7 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
       <div className="bg-neutral-900 rounded-lg p-4 border border-teal-500/30">
         <div className="flex items-center gap-3 mb-3">
           <Tag className="w-5 h-5 text-teal-400" />
-          <h4 className="text-neutral-300 font-medium">Golden Version</h4>
+          <h4 className="text-sm text-neutral-300 font-medium">Golden Version</h4>
           {status?.goldenMeta && (
             <span className="px-2 py-0.5 bg-teal-500/20 text-teal-400 text-xs rounded font-mono">
               {status.goldenMeta.version}
@@ -100,7 +100,7 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
       {/* Component Versions */}
       <div className="bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden">
         <div className="px-4 py-3 border-b border-neutral-700">
-          <h4 className="text-neutral-300 font-medium">Component Versions</h4>
+          <h4 className="text-sm text-neutral-300 font-medium">Component Versions</h4>
           <p className="text-xs text-neutral-600 mt-1">
             Update individual component versions. Click a component to edit.
           </p>
@@ -122,7 +122,7 @@ export function VersionManager({ sync, components, componentLabels }: VersionMan
                       <span className="text-xs font-mono text-neutral-500">v{currentVersion}</span>
                     )}
                     {mismatch && (
-                      <span className="text-[10px] text-yellow-400">
+                      <span className="text-xss text-yellow-400">
                         (live: v{liveVersion})
                       </span>
                     )}

package/components/sections/report-bug/screenshot-uploader.tsx

@@ -195,7 +195,7 @@ export function ScreenshotUploader({
                 alt={s.filename}
                 className="w-full h-full object-cover"
               />
-              <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2">
+              <div className="absolute inset-0 bg-[var(--background)]/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2">
                 <button
                   type="button"
                   onClick={(e) => {
@@ -209,7 +209,7 @@ export function ScreenshotUploader({
                 </button>
                 <span className="text-xs text-white truncate">{s.filename}</span>
               </div>
-              <div className="absolute bottom-1 right-1 px-1.5 py-0.5 bg-black/70 rounded text-xs text-neutral-400">
+              <div className="absolute bottom-1 right-1 px-1.5 py-0.5 bg-[var(--background)]/70 rounded text-xs text-neutral-400">
                 {formatFileSize(s.size)}
               </div>
             </div>

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

@@ -201,7 +201,7 @@ function SnapshotEntryRow({
       <span className="text-xs flex-1 truncate">
         {searchQuery ? highlightMatch(displayName, searchQuery) : displayName}
       </span>
-      <span className="text-[10px] text-neutral-500 shrink-0" title={formatFullDate(entry.savedAt)}>
+      <span className="text-xss text-neutral-500 shrink-0" title={formatFullDate(entry.savedAt)}>
         {formatRelativeTime(entry.savedAt)}
       </span>
       <IconButton

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

@@ -144,7 +144,7 @@ export function SnippetsEditor({
                 <p className="text-xs text-neutral-500 mb-1">
                   {searchQuery ? 'No matching snippets' : 'No snippets defined'}
                 </p>
-                <p className="text-[10px] text-neutral-600">
+                <p className="text-xss text-neutral-600">
                   {searchQuery ? 'Try a different search term' : 'Click + to add your first snippet'}
                 </p>
               </div>
@@ -228,11 +228,11 @@ function SnippetListItem({ snippet, selected, onSelect, onDelete }: SnippetListI
         <p className="text-xs font-mono font-medium text-neutral-300 truncate">
           {snippet.name}
         </p>
-        <p className="text-[10px] text-neutral-500 truncate mt-0.5">
+        <p className="text-xss text-neutral-500 truncate mt-0.5">
           {snippet.description}
         </p>
         {snippet.value && (
-          <p className="text-[10px] text-neutral-600 truncate mt-0.5 font-mono">
+          <p className="text-xss text-neutral-600 truncate mt-0.5 font-mono">
             {snippet.value.slice(0, 80)}{snippet.value.length > 80 ? '...' : ''}
           </p>
         )}
@@ -292,7 +292,7 @@ function SnippetForm({
             error={nameHasError}
             autoFocus={!isEditing}
           />
-          <p className="mt-1 text-[10px] text-neutral-600">
+          <p className="mt-1 text-xss text-neutral-600">
             Use in prompts as <span className="font-mono text-purple-400">{'{{' + (formData.name || 'NAME') + '}}'}</span>
           </p>
         </div>
@@ -319,7 +319,7 @@ function SnippetForm({
             onChange={(val) => setFormField('value', val)}
             minHeight={160}
           />
-          <p className="mt-1 text-[10px] text-neutral-600">
+          <p className="mt-1 text-xss text-neutral-600">
             Can be a single value, multi-line text, or an entire document
           </p>
         </div>

package/components/ui/action-dialog.tsx

@@ -194,7 +194,7 @@ export function ActionDialog({
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
+      <div className="absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm" onClick={onCancel} />
       <div
         className={cn(
           'relative bg-neutral-950 border border-neutral-700 rounded-xl shadow-2xl w-full max-w-[800px] mx-4 flex flex-col',

package/components/ui/badge.tsx

@@ -9,11 +9,11 @@
  * Features:
  * - Outline variant matching IconButton outline style (border + text, no fill)
  * - Accepts numbers (auto-caps at 99+) or short strings ("New")
- * - 13 color variants
+ * - 15 color variants
  * - 5 size variants (xss, xs, sm, md, lg)
  */
 
-export type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky'
+export type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
 
 export interface BadgeProps {
   value: number | string
@@ -37,13 +37,15 @@ const colorClasses: Record<BadgeColor, string> = {
   violet: 'border-violet-500/30 text-violet-400',
   neutral: 'border-neutral-500/30 text-neutral-400',
   sky: 'border-sky-500/30 text-sky-400',
+  pink: 'border-pink-500/30 text-pink-400',
+  teal: 'border-teal-500/30 text-teal-400',
 }
 
 const sizeClasses = {
-  xss: 'min-w-[14px] h-[14px] px-0.5 text-[9px]',
-  xs: 'min-w-[16px] h-[16px] px-1 text-[10px]',
-  sm: 'min-w-[18px] h-[18px] px-1 text-[10px]',
-  md: 'min-w-[20px] h-[20px] px-1.5 text-[11px]',
+  xss: 'min-w-[14px] h-[14px] px-0.5 text-xss',
+  xs: 'min-w-[16px] h-[16px] px-1 text-xss',
+  sm: 'min-w-[18px] h-[18px] px-1 text-xss',
+  md: 'min-w-[20px] h-[20px] px-1.5 text-xss',
   lg: 'min-w-[22px] h-[22px] px-1.5 text-xs',
 }
 

package/components/ui/breadcrumb.tsx

@@ -66,7 +66,7 @@ export interface BreadcrumbProps {
 }
 
 const sizeConfig = {
-  xss: { text: 'text-[10px]', icon: 'w-2.5 h-2.5', px: 'px-1', py: 'py-0.5', gap: 'gap-0.5', sep: 'w-2 h-2' },
+  xss: { text: 'text-xss', icon: 'w-2.5 h-2.5', px: 'px-1', py: 'py-0.5', gap: 'gap-0.5', sep: 'w-2 h-2' },
   xs: { text: 'text-xs', icon: 'w-3 h-3', px: 'px-1.5', py: 'py-0.5', gap: 'gap-1', sep: 'w-2.5 h-2.5' },
   sm: { text: 'text-sm', icon: 'w-3.5 h-3.5', px: 'px-2', py: 'py-1', gap: 'gap-1.5', sep: 'w-3 h-3' },
   md: { text: 'text-base', icon: 'w-4 h-4', px: 'px-2.5', py: 'py-1', gap: 'gap-1.5', sep: 'w-3.5 h-3.5' },

package/components/ui/confirm-badge.tsx

@@ -7,13 +7,13 @@
  *
  * Features:
  * - Outline variant matching IconButton outline style (border + text, no fill)
- * - 13 color variants
+ * - 15 color variants
  * - 5 size variants (xss, xs, sm, md, lg)
  */
 
 import { Check } from 'lucide-react'
 
-export type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky'
+export type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal'
 
 export interface ConfirmBadgeProps {
   color?: ConfirmBadgeColor
@@ -36,6 +36,8 @@ const colorClasses: Record<ConfirmBadgeColor, string> = {
   violet: 'border-violet-500/30 text-violet-400',
   neutral: 'border-neutral-500/30 text-neutral-400',
   sky: 'border-sky-500/30 text-sky-400',
+  pink: 'border-pink-500/30 text-pink-400',
+  teal: 'border-teal-500/30 text-teal-400',
 }
 
 const sizeClasses = {