@deck-ui/routines 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deck-ui/routines",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/routine-card.tsx

@@ -10,7 +10,7 @@ export interface RoutineCardProps {
 
 const STATUS_DOT: Record<string, string> = {
   active: "bg-green-500",
-  paused: "bg-[#9b9b9b]",
+  paused: "bg-muted-foreground",
   needs_setup: "bg-yellow-500",
   error: "bg-red-500",
 }
@@ -38,25 +38,25 @@ export function RoutineCard({ routine, onClick }: RoutineCardProps) {
     <button
       onClick={onClick}
       className={cn(
-        "w-full text-left rounded-2xl border border-black/[0.08] p-5",
-        "bg-white hover:border-black/[0.15] transition-all duration-150",
+        "w-full text-left rounded-2xl border border-border p-5",
+        "bg-white hover:border-border/80 transition-all duration-150",
         "hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)]",
         "flex flex-col gap-3",
       )}
     >
       {/* Top: name + status */}
       <div className="flex items-start gap-2.5">
-        <h3 className="text-[15px] font-medium text-[#0d0d0d] leading-snug flex-1 min-w-0">
+        <h3 className="text-[15px] font-medium text-foreground leading-snug flex-1 min-w-0">
           {displayName}
         </h3>
         <div className="flex items-center gap-1.5 shrink-0 mt-0.5">
           <div
             className={cn(
               "size-1.5 rounded-full",
-              STATUS_DOT[routine.status] ?? "bg-[#9b9b9b]",
+              STATUS_DOT[routine.status] ?? "bg-muted-foreground",
             )}
           />
-          <span className="text-xs text-[#9b9b9b]">
+          <span className="text-xs text-muted-foreground">
             {STATUS_LABEL[routine.status] ?? routine.status}
           </span>
         </div>
@@ -64,13 +64,13 @@ export function RoutineCard({ routine, onClick }: RoutineCardProps) {
 
       {/* Description */}
       {routine.description && (
-        <p className="text-sm text-[#5d5d5d] leading-relaxed line-clamp-2">
+        <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2">
           {routine.description}
         </p>
       )}
 
       {/* Footer: trigger + last run + run count */}
-      <div className="flex items-center gap-3 text-xs text-[#9b9b9b] pt-1">
+      <div className="flex items-center gap-3 text-xs text-muted-foreground pt-1">
         <span className="flex items-center gap-1">
           <Clock className="size-3" />
           {triggerLabel}

package/src/routine-detail-actions.tsx

@@ -35,17 +35,17 @@ export function RoutineDetailActions({
 
   const pillBtn = cn(
     "h-9 px-4 text-sm font-medium rounded-full transition-colors",
-    "border border-black/[0.1]",
+    "border border-border",
   )
 
   return (
-    <div className="flex items-center gap-2 pt-4 border-t border-black/[0.06]">
+    <div className="flex items-center gap-2 pt-4 border-t border-border">
       <button
         onClick={onSave}
         disabled={saving}
         className={cn(
           "h-9 px-4 text-sm font-medium rounded-full",
-          "bg-[#0d0d0d] text-white hover:bg-[#0d0d0d]/90 transition-colors",
+          "bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
           "disabled:opacity-50",
         )}
       >
@@ -55,13 +55,13 @@ export function RoutineDetailActions({
         </span>
       </button>
 
-      <button onClick={onRunNow} className={cn(pillBtn, "text-[#0d0d0d] hover:bg-[#f5f5f5]")}>
+      <button onClick={onRunNow} className={cn(pillBtn, "text-foreground hover:bg-secondary")}>
         <span className="flex items-center gap-1.5">
           <RefreshCw className="size-3.5" /> Run Now
         </span>
       </button>
 
-      <button onClick={onToggle} className={cn(pillBtn, "text-[#0d0d0d] hover:bg-[#f5f5f5]")}>
+      <button onClick={onToggle} className={cn(pillBtn, "text-foreground hover:bg-secondary")}>
         <span className="flex items-center gap-1.5">
           {isActive ? (
             <><Pause className="size-3.5" /> Pause</>
@@ -84,7 +84,7 @@ export function RoutineDetailActions({
           </button>
           <button
             onClick={() => setConfirmDelete(false)}
-            className={cn(pillBtn, "text-[#0d0d0d] hover:bg-[#f5f5f5]")}
+            className={cn(pillBtn, "text-foreground hover:bg-secondary")}
           >
             Cancel
           </button>
@@ -92,7 +92,7 @@ export function RoutineDetailActions({
       ) : (
         <button
           onClick={handleDelete}
-          className={cn(pillBtn, "text-[#9b9b9b] hover:text-red-600 hover:border-red-200")}
+          className={cn(pillBtn, "text-muted-foreground hover:text-red-600 hover:border-red-200")}
         >
           <span className="flex items-center gap-1.5">
             <Trash2 className="size-3.5" /> Delete

package/src/routine-detail-page.tsx

@@ -68,7 +68,7 @@ export function RoutineDetailPage({
   if (!routine || !form) {
     return (
       <div className="flex-1 flex items-center justify-center">
-        <p className="text-sm text-[#9b9b9b]">Routine not found</p>
+        <p className="text-sm text-muted-foreground">Routine not found</p>
       </div>
     )
   }
@@ -76,15 +76,15 @@ export function RoutineDetailPage({
   return (
     <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
       {/* Header */}
-      <div className="shrink-0 px-6 py-3 border-b border-black/[0.06]">
+      <div className="shrink-0 px-6 py-3 border-b border-border">
         <div className="max-w-2xl mx-auto flex items-center gap-3">
           <button
             onClick={onBack}
-            className="size-8 flex items-center justify-center rounded-lg text-[#9b9b9b] hover:text-[#0d0d0d] hover:bg-black/[0.05] transition-colors"
+            className="size-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
           >
             <ArrowLeft className="size-4" />
           </button>
-          <h1 className="text-sm font-medium text-[#0d0d0d] truncate flex-1">
+          <h1 className="text-sm font-medium text-foreground truncate flex-1">
             {form.name || "Untitled"}
           </h1>
         </div>

package/src/routine-edit-form.tsx

@@ -22,12 +22,12 @@ const TRIGGER_OPTIONS: { value: TriggerType; label: string }[] = [
 ]
 
 const inputClass = cn(
-  "w-full px-3 py-2 rounded-xl border border-black/[0.08] bg-white",
-  "text-sm text-[#0d0d0d] placeholder:text-[#b4b4b4]",
-  "focus:outline-none focus:border-black/20 transition-colors",
+  "w-full px-3 py-2 rounded-xl border border-border bg-white",
+  "text-sm text-foreground placeholder:text-muted-foreground/60",
+  "focus:outline-none focus:border-border/80 transition-colors",
 )
 
-const labelClass = "text-xs font-medium text-[#8e8e8e] mb-1.5 block"
+const labelClass = "text-xs font-medium text-muted-foreground mb-1.5 block"
 
 export function RoutineEditForm({
   form,
@@ -121,8 +121,8 @@ export function RoutineEditForm({
               className={cn(
                 "h-9 px-4 rounded-full text-sm font-medium transition-colors",
                 form.approvalMode === mode
-                  ? "bg-[#0d0d0d] text-white"
-                  : "border border-black/[0.1] text-[#5d5d5d] hover:bg-[#f5f5f5]",
+                  ? "bg-primary text-primary-foreground"
+                  : "border border-border text-muted-foreground hover:bg-secondary",
               )}
             >
               {mode === "manual" ? "Manual Review" : "Auto-approve"}

package/src/routine-run-history.tsx

@@ -15,10 +15,10 @@ export function RunHistory({ runs, onSelectRun }: RunHistoryProps) {
   if (runs.length === 0) {
     return (
       <div>
-        <p className="text-xs font-medium text-[#9b9b9b] uppercase tracking-wide mb-2">
+        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
           Runs
         </p>
-        <p className="text-sm text-[#9b9b9b]">No runs yet.</p>
+        <p className="text-sm text-muted-foreground">No runs yet.</p>
       </div>
     )
   }
@@ -30,7 +30,7 @@ export function RunHistory({ runs, onSelectRun }: RunHistoryProps) {
 
   return (
     <div>
-      <p className="text-xs font-medium text-[#9b9b9b] uppercase tracking-wide mb-2">
+      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">
         Run History
       </p>
       <div className="space-y-1">
@@ -66,20 +66,20 @@ function RunRow({ run, onClick }: { run: RoutineRun; onClick: () => void }) {
       case "failed":
         return <AlertCircle className="size-3.5 text-red-500" />
       default:
-        return <Clock className="size-3.5 text-[#9b9b9b]" />
+        return <Clock className="size-3.5 text-muted-foreground" />
     }
   })()
 
   return (
     <button
       onClick={onClick}
-      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left hover:bg-black/[0.03] transition-colors"
+      className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left hover:bg-accent/30 transition-colors"
     >
       {icon}
-      <span className="text-sm text-[#0d0d0d] truncate flex-1">
+      <span className="text-sm text-foreground truncate flex-1">
         {run.output_title || `${dateStr} ${timeStr}`}
       </span>
-      <span className="text-xs text-[#9b9b9b] shrink-0">
+      <span className="text-xs text-muted-foreground shrink-0">
         {dateStr} {timeStr}
       </span>
     </button>

package/src/routine-run-page.tsx

@@ -52,19 +52,19 @@ export function RoutineRunPage({
   return (
     <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
       {/* Header */}
-      <div className="shrink-0 px-6 py-3 border-b border-black/[0.06]">
+      <div className="shrink-0 px-6 py-3 border-b border-border">
         <div className="max-w-3xl mx-auto flex items-center gap-3">
           <button
             onClick={onBack}
-            className="size-7 flex items-center justify-center rounded-md text-[#8e8e8e] hover:text-[#0d0d0d] hover:bg-black/[0.04] transition-colors"
+            className="size-7 flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
           >
             <ArrowLeft className="size-4" strokeWidth={1.75} />
           </button>
           <div className="min-w-0 flex-1">
-            <p className="text-sm font-medium text-[#0d0d0d] truncate">
+            <p className="text-sm font-medium text-foreground truncate">
               {displayName}
             </p>
-            <p className="text-[11px] text-[#8e8e8e]">
+            <p className="text-[11px] text-muted-foreground">
               {runDate}
               <span className="mx-1">&middot;</span>
               <span className={cn(isRunning && "text-blue-500")}>
@@ -87,7 +87,7 @@ export function RoutineRunPage({
         })
       ) : (
         <div className="flex-1 flex items-center justify-center">
-          <p className="text-sm text-[#9b9b9b]">Run not found</p>
+          <p className="text-sm text-muted-foreground">Run not found</p>
         </div>
       )}
     </div>

package/src/routines-grid.tsx

@@ -38,7 +38,7 @@ export function RoutinesGrid({
   if (loading && routines.length === 0) {
     return (
       <div className="flex-1 flex items-center justify-center">
-        <p className="text-sm text-[#9b9b9b] animate-pulse">
+        <p className="text-sm text-muted-foreground animate-pulse">
           Loading routines...
         </p>
       </div>
@@ -52,7 +52,7 @@ export function RoutinesGrid({
           <h1 className="text-2xl font-semibold text-foreground tracking-tight">
             Automate recurring work
           </h1>
-          <p className="text-sm text-[#5d5d5d]">
+          <p className="text-sm text-muted-foreground">
             Routines run on a schedule so Houston can work for you
             automatically — daily reports, weekly research, and more.
           </p>