@toolr/ui-design 0.1.3 → 0.1.4

package/components/ui/selection-grid.tsx

@@ -6,7 +6,7 @@ import {
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import type { IconName } from './icon-button.tsx'
-import { ConfirmBadge, type ConfirmBadgeColor } from './confirm-badge.tsx'
+import type { ConfirmBadgeColor } from './confirm-badge.tsx'
 import { cn } from '../lib/cn.ts'
 import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
 
@@ -233,23 +233,17 @@ 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-black'
+          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]'
           : selected
             ? 'cursor-pointer'
-            : 'bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer',
+            : 'bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
       )}
       style={
         selected && !item.disabled
-          ? { borderColor: color, backgroundColor: `${color}15` }
+          ? { borderColor: color }
           : undefined
       }
     >
-      {selected && !item.disabled && (
-        <span className="absolute top-1 right-1">
-          <ConfirmBadge color={item.badgeColor || 'blue'} size="xs" />
-        </span>
-      )}
-
       {Icon && (
         <Icon
           className="w-7 h-7 mb-1"
@@ -278,23 +272,17 @@ 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-black'
+          ? 'opacity-30 cursor-not-allowed border-neutral-800 bg-[var(--background)]'
           : selected
             ? 'cursor-pointer'
-            : 'bg-neutral-800/50 border-neutral-700 hover:bg-neutral-800 hover:border-neutral-600 cursor-pointer',
+            : 'bg-neutral-800/50 border-neutral-700 hover:bg-[var(--surface-hover)] hover:border-neutral-600 cursor-pointer',
       )}
       style={
         selected && !item.disabled
-          ? { borderColor: color, backgroundColor: `${color}15` }
+          ? { borderColor: color }
           : undefined
       }
     >
-      {selected && !item.disabled && (
-        <span className="absolute top-1 right-1">
-          <ConfirmBadge color={item.badgeColor || 'blue'} size="xs" />
-        </span>
-      )}
-
       {Icon && (
         <Icon
           className="w-5 h-5 flex-shrink-0"

package/components/ui/snapshot-card.tsx

@@ -59,7 +59,7 @@ export function SnapshotCard({
         </div>
 
         {timestamp && (
-          <p className="mt-1 text-[10px] text-neutral-500">{timestamp}</p>
+          <p className="mt-1 text-xss text-neutral-500">{timestamp}</p>
         )}
 
         {description && (
@@ -70,7 +70,7 @@ export function SnapshotCard({
           <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-2">
             {stats.map((stat) => (
               <div key={stat.label}>
-                <p className="text-[10px] text-neutral-500">{stat.label}</p>
+                <p className="text-xss text-neutral-500">{stat.label}</p>
                 <p className="text-xs font-medium text-neutral-200">{stat.value}</p>
               </div>
             ))}

package/components/ui/snippets-panel.tsx

@@ -63,12 +63,12 @@ export function SnippetsPanel({
   return (
     <div className={cn('flex flex-col bg-neutral-800 rounded-lg overflow-hidden', className)}>
       <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-700">
-        <span className="text-[11px] font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
-        <span className="text-[10px] text-neutral-500">{snippets.length} snippets</span>
+        <span className="text-xss font-semibold uppercase tracking-wider text-neutral-500">Snippets</span>
+        <span className="text-xss text-neutral-500">{snippets.length} snippets</span>
       </div>
       {showSearch && (
         <div className="px-2 py-2 border-b border-neutral-700">
-          <div className="flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs">
+          <div className="flex items-center gap-1.5 px-2 py-1 bg-[var(--background)] border border-neutral-700 rounded text-xs">
             <Search className="w-3 h-3 text-neutral-500 shrink-0" />
             <input
               type="text"
@@ -90,7 +90,7 @@ export function SnippetsPanel({
           />
         ))}
         {filteredSnippets.length === 0 && (
-          <p className="text-[11px] text-neutral-500 text-center py-4">No snippets found</p>
+          <p className="text-xss text-neutral-500 text-center py-4">No snippets found</p>
         )}
       </div>
     </div>
@@ -113,7 +113,7 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
           <span className="text-xs font-medium text-neutral-200 truncate">{snippet.label}</span>
           {snippet.language && (
             <span
-              className="px-1.5 py-0.5 text-[9px] font-medium rounded shrink-0"
+              className="px-1.5 py-0.5 text-xss font-medium rounded shrink-0"
               style={{ color: langColor, backgroundColor: `${langColor}20` }}
             >
               {snippet.language}
@@ -140,17 +140,17 @@ function SnippetCard({ snippet, onInsert, onCopy }: SnippetCardProps) {
         </div>
       </div>
       {snippet.description && (
-        <p className="px-2.5 pb-1.5 text-[11px] text-neutral-400 leading-relaxed">{snippet.description}</p>
+        <p className="px-2.5 pb-1.5 text-xss text-neutral-400 leading-relaxed">{snippet.description}</p>
       )}
-      <div className="mx-2.5 mb-2 rounded bg-black border border-neutral-700 overflow-hidden">
-        <pre className="p-2 text-[11px] text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
+      <div className="mx-2.5 mb-2 rounded bg-[var(--background)] border border-neutral-700 overflow-hidden">
+        <pre className="p-2 text-xss text-neutral-400 leading-relaxed overflow-x-auto max-h-24">
           <code>{snippet.code}</code>
         </pre>
       </div>
       {snippet.tags && snippet.tags.length > 0 && (
         <div className="flex flex-wrap gap-1 px-2.5 pb-2">
           {snippet.tags.map((tag) => (
-            <span key={tag} className="px-1.5 py-0.5 text-[9px] rounded bg-neutral-700 text-neutral-500">
+            <span key={tag} className="px-1.5 py-0.5 text-xss rounded bg-neutral-700 text-neutral-500">
               {tag}
             </span>
           ))}

package/components/ui/tab-bar.tsx

@@ -54,7 +54,7 @@ export interface TabBarProps {
 }
 
 const sizeConfig = {
-  xss: { text: 'text-[10px]', icon: 'w-2.5 h-2.5', px: 'px-1.5', py: 'py-1', close: 'w-2.5 h-2.5', badgeSize: 'xss' as const, gap: 'gap-1' },
+  xss: { text: 'text-xss', icon: 'w-2.5 h-2.5', px: 'px-1.5', py: 'py-1', close: 'w-2.5 h-2.5', badgeSize: 'xss' as const, gap: 'gap-1' },
   xs: { text: 'text-xs', 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-sm', 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' },

package/dist/content.js

@@ -65,7 +65,7 @@ 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-[13px] ${c.codeText}`, children });
+  return /* @__PURE__ */ jsx("code", { className: `block bg-neutral-800/80 px-2 py-1 rounded mt-1.5 text-sm ${c.codeText}`, children });
 }
 function CalloutDim({ children }) {
   return /* @__PURE__ */ jsx("p", { className: "text-neutral-500 mt-1.5", 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-[13px]", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx("div", { className: "bg-neutral-800/80 rounded px-2 py-1 mt-1.5 flex flex-col gap-0.5 text-sm", children: lines.map((line, idx) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsxs("span", { className: `text-${color}-300 font-semibold mr-1`, children: [
       line.speaker,
       ":"
@@ -131,7 +131,7 @@ function StatusBadge({ value, badgeColor, label, children, even }) {
     DLRow,
     {
       term: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("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`, children: value }),
+        /* @__PURE__ */ jsx("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`, children: value }),
         /* @__PURE__ */ jsx("span", { className: `text-${badgeColor}-400 font-semibold`, children: label })
       ] }),
       even,

package/dist/index.d.ts

@@ -31,6 +31,16 @@ declare const DEFAULT_DIMS: Record<SurfaceKey, number>;
 declare const DEFAULT_OUTLINE = 30;
 declare function generateScale(theme: ThemeId, hue: number | null, maxSat: number, dims?: Record<SurfaceKey, number>, outline?: number): Record<ScaleKey, string>;
 declare function isLightTheme(themeId: ThemeId): boolean;
+/**
+ * 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); }
+ */
 declare function applyTheme(themeId: ThemeId, accentHue: number | null, dims?: Record<SurfaceKey, number>, outline?: number, root?: HTMLElement): void;
 
 type ToolrAppId = 'toolr' | 'configr' | 'reviewr' | 'vibr' | 'learnr' | 'planr' | 'seedr';