roadmap-kit 1.0.1 → 1.0.3

package/dashboard/src/components/SharedResources.jsx

@@ -17,9 +17,9 @@ export default function SharedResources({ resources = {} }) {
   if (total === 0) {
     return (
       <div className="card-dark rounded-2xl p-12 text-center">
-        <Package className="w-12 h-12 mx-auto mb-4 text-gray-600" />
-        <h3 className="text-lg font-semibold text-gray-400 mb-2">Sin recursos compartidos</h3>
-        <p className="text-gray-500 text-sm">Agrega componentes en roadmap.json</p>
+        <Package className="w-12 h-12 mx-auto mb-4 text-theme-muted" />
+        <h3 className="text-lg font-semibold text-theme-secondary mb-2">Sin recursos compartidos</h3>
+        <p className="text-theme-muted text-sm">Agrega componentes en roadmap.json</p>
       </div>
     );
   }
@@ -118,7 +118,7 @@ function StatCard({ icon: Icon, label, value, gradient }) {
     <div className="card-dark rounded-2xl p-5 hover:scale-[1.02] transition-all">
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
+          <p className="text-xs text-theme-muted uppercase tracking-wider mb-1">{label}</p>
           <p className={`text-3xl font-bold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>{value}</p>
         </div>
         <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${gradient} flex items-center justify-center opacity-80`}>
@@ -146,9 +146,9 @@ function Section({ title, icon: Icon, color, isOpen, onToggle, children }) {
           <Icon className={`w-5 h-5 ${colors[color]}`} />
           <h3 className={`text-lg font-semibold ${colors[color]}`}>{title}</h3>
         </div>
-        <ChevronDown className={`w-5 h-5 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+        <ChevronDown className={`w-5 h-5 text-theme-muted transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
-      {isOpen && <div className="px-6 pb-6 pt-2 border-t border-white/5">{children}</div>}
+      {isOpen && <div className="px-6 pb-6 pt-2 border-t border-theme">{children}</div>}
     </div>
   );
 }
@@ -169,16 +169,16 @@ function ResourceItem({ path, description, usage, exports, warning, color, copyI
         <FileCode className={`w-4 h-4 flex-shrink-0 ${colors[color].split(' ')[0]}`} />
         <div className="flex-1 min-w-0">
           <code className={`text-sm ${colors[color].split(' ')[0]}`}>{path}</code>
-          <p className="text-xs text-gray-500 truncate mt-0.5">{description}</p>
+          <p className="text-xs text-theme-muted truncate mt-0.5">{description}</p>
         </div>
-        <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`} />
+        <ChevronDown className={`w-4 h-4 text-theme-muted transition-transform ${open ? 'rotate-180' : ''}`} />
       </button>
 
       {open && (
-        <div className="px-4 pb-4 pt-2 border-t border-white/5 space-y-3 animate-fade-in">
+        <div className="px-4 pb-4 pt-2 border-t border-theme space-y-3 animate-fade-in">
           {exports?.length > 0 && (
             <div>
-              <span className="text-[10px] text-gray-500 uppercase tracking-wider">Exports:</span>
+              <span className="text-[10px] text-theme-muted uppercase tracking-wider">Exports:</span>
               <div className="flex flex-wrap gap-1.5 mt-1.5">
                 {exports.map((e, i) => (
                   <span key={i} className="px-2 py-1 text-xs bg-white/5 text-blue-400 rounded border border-blue-500/20">{e}</span>
@@ -189,12 +189,12 @@ function ResourceItem({ path, description, usage, exports, warning, color, copyI
           {usage && (
             <div>
               <div className="flex items-center justify-between mb-1.5">
-                <span className="text-[10px] text-gray-500 uppercase tracking-wider">Uso:</span>
+                <span className="text-[10px] text-theme-muted uppercase tracking-wider">Uso:</span>
                 <button onClick={() => onCopy(usage, copyId)} className="text-xs text-blue-400 hover:text-blue-300 flex items-center gap-1">
                   {copiedItem === copyId ? <><Check className="w-3 h-3" /> Copiado</> : <><Copy className="w-3 h-3" /> Copiar</>}
                 </button>
               </div>
-              <div className="bg-white/5 rounded-lg p-3 border border-white/5">
+              <div className="bg-white/5 rounded-lg p-3 border border-theme">
                 <code className="text-sm text-blue-400">{usage}</code>
               </div>
             </div>
@@ -220,16 +220,16 @@ function TableCard({ table, copyId, copiedItem, onCopy }) {
           <code className="text-base font-semibold text-emerald-400">{table.name}</code>
         </div>
         <button onClick={() => onCopy(table.name, copyId)} className="p-1.5 hover:bg-white/5 rounded-lg transition-colors">
-          {copiedItem === copyId ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5 text-gray-500" />}
+          {copiedItem === copyId ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5 text-theme-muted" />}
         </button>
       </div>
-      <p className="text-sm text-gray-400 mb-3">{table.description}</p>
+      <p className="text-sm text-theme-secondary mb-3">{table.description}</p>
       {table.fields?.length > 0 && (
         <div>
-          <span className="text-[10px] text-gray-500 uppercase tracking-wider">Campos:</span>
+          <span className="text-[10px] text-theme-muted uppercase tracking-wider">Campos:</span>
           <div className="flex flex-wrap gap-1 mt-1.5">
             {table.fields.map((f, i) => (
-              <span key={i} className="text-xs bg-white/5 px-2 py-1 rounded text-gray-300 border border-emerald-500/10">{f}</span>
+              <span key={i} className="text-xs bg-white/5 px-2 py-1 rounded text-theme-secondary border border-emerald-500/10">{f}</span>
             ))}
           </div>
         </div>

package/dashboard/src/components/TechnicalDebt.jsx

@@ -28,11 +28,11 @@ export default function TechnicalDebt({ roadmap = {} }) {
   if (allDebts.length === 0) {
     return (
       <div className="card-dark rounded-2xl p-12 text-center">
-        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-emerald-500/10 flex items-center justify-center">
-          <TrendingDown className="w-8 h-8 text-emerald-400" />
+        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-matrix/10 flex items-center justify-center">
+          <TrendingDown className="w-8 h-8 text-matrix" />
         </div>
-        <h3 className="text-lg font-semibold text-emerald-400 mb-2">Sin deuda tecnica</h3>
-        <p className="text-gray-500 text-sm">No hay deuda tecnica registrada</p>
+        <h3 className="text-lg font-semibold text-matrix mb-2">Sin deuda técnica</h3>
+        <p className="text-theme-secondary text-sm">No hay deuda técnica registrada</p>
       </div>
     );
   }
@@ -49,7 +49,7 @@ export default function TechnicalDebt({ roadmap = {} }) {
 
       {/* Distribution Bar */}
       <div className="card-dark rounded-2xl p-6">
-        <h3 className="text-sm text-gray-500 uppercase tracking-wider mb-4">Distribucion</h3>
+        <h3 className="text-sm text-theme-secondary uppercase tracking-wider mb-4">Distribución</h3>
         <div className="flex h-4 rounded-full overflow-hidden bg-white/5">
           {grouped.high.length > 0 && (
             <div
@@ -92,7 +92,7 @@ function StatCard({ label, value, gradient, icon: Icon }) {
     <div className="card-dark rounded-2xl p-5 hover:scale-[1.02] transition-all">
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">{label}</p>
+          <p className="text-xs text-theme-muted uppercase tracking-wider mb-1">{label}</p>
           <p className={`text-3xl font-bold bg-gradient-to-r ${gradient} bg-clip-text text-transparent`}>{value}</p>
         </div>
         <Icon className={`w-8 h-8 opacity-50 bg-gradient-to-r ${gradient} bg-clip-text`} style={{ color: 'currentColor' }} />
@@ -105,6 +105,7 @@ function DebtSection({ severity, debts }) {
   const config = {
     high: {
       title: 'Severidad Alta',
+      label: 'Alta',
       textColor: 'text-rose-400',
       bgColor: 'bg-rose-500/5',
       borderColor: 'border-rose-500/20',
@@ -112,6 +113,7 @@ function DebtSection({ severity, debts }) {
     },
     medium: {
       title: 'Severidad Media',
+      label: 'Media',
       textColor: 'text-amber-400',
       bgColor: 'bg-amber-500/5',
       borderColor: 'border-amber-500/20',
@@ -119,6 +121,7 @@ function DebtSection({ severity, debts }) {
     },
     low: {
       title: 'Severidad Baja',
+      label: 'Baja',
       textColor: 'text-cyan-400',
       bgColor: 'bg-cyan-500/5',
       borderColor: 'border-cyan-500/20',
@@ -149,17 +152,17 @@ function DebtSection({ severity, debts }) {
                 <AlertTriangle className={`w-5 h-5 ${cfg.textColor}`} />
               </div>
               <div className="flex-1 min-w-0">
-                <p className="text-white font-medium mb-2">{debt.description}</p>
+                <p className="text-theme-primary font-medium mb-2">{debt.description}</p>
                 <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
-                  <span className="text-gray-500">Feature: <span className="text-blue-400">{debt.featureName}</span></span>
-                  <span className="text-gray-500">Tarea: <span className="text-cyan-400">{debt.taskName}</span></span>
-                  <span className="flex items-center gap-1 text-gray-500">
+                  <span className="text-theme-muted">Característica: <span className="text-cyber">{debt.featureName}</span></span>
+                  <span className="text-theme-muted">Tarea: <span className="text-cyber">{debt.taskName}</span></span>
+                  <span className="flex items-center gap-1 text-theme-muted">
                     <Clock className="w-3.5 h-3.5" /> {debt.estimated_effort}
                   </span>
                 </div>
               </div>
               <span className={`flex-shrink-0 px-2.5 py-1 text-[10px] font-bold text-white rounded-full uppercase tracking-wider ${cfg.badgeBg}`}>
-                {severity}
+                {cfg.label}
               </span>
             </div>
           </div>