@skyhook-io/k8s-ui 1.2.3 → 1.3.0

package/src/components/ui/MetricsChart.tsx

@@ -111,7 +111,7 @@ export function MetricsChart({
       {/* Chart with Y-axis */}
       <div className="flex">
         {/* Y-axis labels */}
-        <div className="flex flex-col justify-between text-[9px] text-theme-text-tertiary pr-1 w-12 text-right" style={{ height }}>
+        <div className="flex flex-col justify-between text-[9px] text-theme-text-tertiary pr-1 w-12 text-right font-mono" style={{ height }}>
           <span className="leading-none">{format(yAxisMax)}</span>
           <span className="leading-none">{format(yAxisMid)}</span>
           <span className="leading-none">0</span>
@@ -197,7 +197,7 @@ export function MetricsChart({
       )}
 
       {/* Current value */}
-      <div className="flex items-baseline gap-2 mt-1 ml-12">
+      <div className="flex items-baseline gap-2 mt-1 ml-12 font-mono">
         <span className={clsx(
           'text-sm font-medium',
           type === 'cpu' ? 'text-blue-400' : 'text-purple-400'

package/src/components/ui/drawer-components.tsx

@@ -3,6 +3,7 @@ import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLin
 import { clsx } from 'clsx'
 import { formatAge } from '../resources/resource-utils'
 import { Tooltip } from './Tooltip'
+import { getKindColorClass } from '../ui/Badge'
 
 // ============================================================================
 // UI COMPONENTS
@@ -10,7 +11,7 @@ import { Tooltip } from './Tooltip'
 
 export function KeyValueBadge({ k, v }: { k: string; v: string }) {
   return (
-    <span className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+    <span className="badge bg-theme-elevated text-theme-text-secondary">
       {k}={v}
     </span>
   )
@@ -164,10 +165,10 @@ export function ConditionsSection({ conditions }: { conditions?: any[] }) {
 // ============================================================================
 
 const ALERT_COLORS = {
-  error:   { bg: 'bg-red-500/10', border: 'border-red-500/30', title: 'text-red-700 dark:text-red-400', message: 'text-red-600/80 dark:text-red-400/80', list: 'text-red-600 dark:text-red-400', bullet: 'text-red-500/60 dark:text-red-400/60' },
-  warning: { bg: 'bg-yellow-500/10', border: 'border-yellow-500/30', title: 'text-yellow-700 dark:text-yellow-400', message: 'text-yellow-600/80 dark:text-yellow-400/80', list: 'text-yellow-600 dark:text-yellow-400', bullet: 'text-yellow-500/60 dark:text-yellow-400/60' },
-  info:    { bg: 'bg-blue-500/10', border: 'border-blue-500/30', title: 'text-blue-700 dark:text-blue-400', message: 'text-blue-600/80 dark:text-blue-400/80', list: 'text-blue-600 dark:text-blue-400', bullet: 'text-blue-500/60 dark:text-blue-400/60' },
-  success: { bg: 'bg-green-500/10', border: 'border-green-500/30', title: 'text-green-700 dark:text-green-400', message: 'text-green-600/80 dark:text-green-400/80', list: 'text-green-600 dark:text-green-400', bullet: 'text-green-500/60 dark:text-green-400/60' },
+  error:   { bg: 'bg-red-50 dark:bg-red-950/30', border: 'border-red-200 dark:border-red-800/30', title: 'text-red-700 dark:text-red-300', message: 'text-red-600/80 dark:text-red-300/70', list: 'text-red-600 dark:text-red-400', bullet: 'text-red-400/60 dark:text-red-400/50' },
+  warning: { bg: 'bg-amber-50 dark:bg-amber-950/30', border: 'border-amber-200 dark:border-amber-800/30', title: 'text-amber-700 dark:text-amber-300', message: 'text-amber-600/80 dark:text-amber-300/70', list: 'text-amber-600 dark:text-amber-400', bullet: 'text-amber-400/60 dark:text-amber-400/50' },
+  info:    { bg: 'bg-sky-50 dark:bg-sky-950/30', border: 'border-sky-200 dark:border-sky-800/30', title: 'text-sky-700 dark:text-sky-300', message: 'text-sky-600/80 dark:text-sky-300/70', list: 'text-sky-600 dark:text-sky-400', bullet: 'text-sky-400/60 dark:text-sky-400/50' },
+  success: { bg: 'bg-emerald-50 dark:bg-emerald-950/30', border: 'border-emerald-200 dark:border-emerald-800/30', title: 'text-emerald-700 dark:text-emerald-300', message: 'text-emerald-600/80 dark:text-emerald-300/70', list: 'text-emerald-600 dark:text-emerald-400', bullet: 'text-emerald-400/60 dark:text-emerald-400/50' },
 } as const
 
 const DEFAULT_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -313,7 +314,7 @@ export function PodTemplateSection({ template }: { template: any }) {
         <>
           <div className="text-xs text-theme-text-tertiary font-medium uppercase tracking-wide">Init Containers</div>
           {initContainers.map((c: any) => (
-            <div key={c.name} className="bg-theme-elevated/30 rounded p-2 text-sm border-l-2 border-yellow-500/40">
+            <div key={c.name} className="card-inner text-sm border-l-2 border-yellow-500/40">
               <div className="font-medium text-theme-text-primary">{c.name}</div>
               <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
               {(c.command || c.args) && (
@@ -327,7 +328,7 @@ export function PodTemplateSection({ template }: { template: any }) {
         </>
       )}
       {containers.map((c: any) => (
-        <div key={c.name} className="bg-theme-elevated/30 rounded p-2 text-sm">
+        <div key={c.name} className="card-inner text-sm">
           <div className="font-medium text-theme-text-primary">{c.name}</div>
           <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
           {c.ports && (
@@ -450,29 +451,9 @@ export function AppInfoSection({ data }: { data: any }) {
 // HELPERS
 // ============================================================================
 
+/** Get kind badge color — delegates to Badge.tsx's static color lookup */
 export function getKindColor(kind: string): string {
-  const k = kind.toLowerCase()
-  // Use darker text for light mode contrast, brighter for dark mode
-  if (k.includes('pod')) return 'bg-lime-500/20 text-lime-700 dark:text-lime-400 border-lime-500/30'
-  if (k.includes('deployment')) return 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 border-emerald-500/30'
-  if (k.includes('service')) return 'bg-blue-500/20 text-blue-700 dark:text-blue-400 border-blue-500/30'
-  if (k.includes('gateway')) return 'bg-violet-500/20 text-violet-700 dark:text-violet-400 border-violet-500/30'
-  if (k.includes('route')) return 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border-purple-500/30'
-  if (k.includes('ingress')) return 'bg-violet-500/20 text-violet-700 dark:text-violet-400 border-violet-500/30'
-  if (k.includes('configmap')) return 'bg-amber-500/20 text-amber-700 dark:text-amber-400 border-amber-500/30'
-  if (k.endsWith('report')) return 'bg-rose-500/20 text-rose-700 dark:text-rose-400 border-rose-500/30'
-  if (k.includes('secret')) return 'bg-red-500/20 text-red-700 dark:text-red-400 border-red-500/30'
-  if (k.includes('daemonset')) return 'bg-teal-500/20 text-teal-700 dark:text-teal-400 border-teal-500/30'
-  if (k.includes('statefulset')) return 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border-cyan-500/30'
-  if (k.includes('replicaset')) return 'bg-green-500/20 text-green-700 dark:text-green-400 border-green-500/30'
-  if (k.includes('hpa') || k.includes('horizontalpodautoscaler')) return 'bg-pink-500/20 text-pink-700 dark:text-pink-400 border-pink-500/30'
-  if (k.includes('cronjob')) return 'bg-orange-500/20 text-orange-700 dark:text-orange-400 border-orange-500/30'
-  if (k.includes('job')) return 'bg-orange-500/20 text-orange-700 dark:text-orange-400 border-orange-500/30'
-  if (k.includes('node')) return 'bg-gray-500/20 text-gray-700 dark:text-gray-400 border-gray-500/30'
-  if (k.includes('namespace')) return 'bg-blue-500/20 text-blue-700 dark:text-blue-400 border-blue-500/30'
-  if (k.includes('persistentvolume')) return 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border-purple-500/30'
-  // Default color for CRDs
-  return 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border-fuchsia-500/30'
+  return getKindColorClass(kind)
 }
 
 export function formatKindName(kind: string): string {
@@ -648,7 +629,7 @@ export function ResourceRefBadge({ resourceRef, onClick }: ResourceRefBadgeProps
       <button
         onClick={() => onClick(resourceRef)}
         className={clsx(
-          'px-2 py-0.5 text-xs rounded border transition-colors hover:brightness-125',
+          'badge hover:brightness-[0.92] dark:hover:brightness-125 transition-[filter]',
           kindClass
         )}
         title={`${resourceRef.kind}: ${resourceRef.namespace}/${resourceRef.name}`}
@@ -661,7 +642,7 @@ export function ResourceRefBadge({ resourceRef, onClick }: ResourceRefBadgeProps
 
   return (
     <span
-      className={clsx('px-2 py-0.5 text-xs rounded border', kindClass)}
+      className={clsx('badge', kindClass)}
       title={`${resourceRef.kind}: ${resourceRef.namespace}/${resourceRef.name}`}
     >
       <span className="opacity-60">{kindName}/</span>

package/src/components/workload/ResourceDetailDrawer.tsx

@@ -115,12 +115,12 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
   return (
     <div
       className={clsx(
-        'fixed right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-2xl z-40',
+        'fixed right-0 bg-theme-surface border-l border-theme-border flex flex-col shadow-drawer z-40',
         TRANSITION_DRAWER,
         isOpen
           ? 'translate-x-0 opacity-100'
           : 'translate-x-full opacity-0',
-        expanded && 'bg-theme-base !border-l-0',
+        expanded && '!border-l-0',
       )}
       style={{
         width: expanded ? `calc(100vw - ${leftOffset}px)` : drawerWidth,
@@ -136,9 +136,9 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
         <div
           onMouseDown={handleResizeStart}
           className={clsx(
-            'absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-10 hover:bg-blue-500/50 transition-colors',
+            'absolute left-0 top-0 bottom-0 w-2 cursor-ew-resize z-10 hover:bg-skyhook-500/50 transition-colors',
             'hidden sm:block',
-            isResizing && 'bg-blue-500/50'
+            isResizing && 'bg-skyhook-500/50'
           )}
         />
       )}

package/src/components/workload/WorkloadView.tsx

@@ -351,11 +351,11 @@ export function WorkloadView({
           {/* Top row: badges and controls */}
           <div className="flex items-center justify-between px-4 pt-3 pb-2">
             <div className="flex items-center gap-2 flex-wrap">
-              <span className={clsx('px-2 py-0.5 text-xs font-medium rounded border', getKindColor(apiKind))}>
+              <span className={clsx('badge', getKindColor(apiKind))}>
                 {formatKindName(apiKind)}
               </span>
               {status && (
-                <span className={clsx('px-2 py-0.5 text-xs font-medium rounded', status.color)}>
+                <span className={clsx('badge', status.color)}>
                   {status.text}
                 </span>
               )}
@@ -454,7 +454,7 @@ export function WorkloadView({
 
   // ── Expanded (full) mode ─────────────────────────────────────────────────
   return (
-    <div className="flex flex-col h-full w-full bg-theme-base">
+    <div className="flex flex-col h-full w-full bg-theme-surface">
       {/* Header */}
       <div className="shrink-0 border-b border-theme-border bg-theme-surface">
         <div className="px-6 py-3 flex items-start gap-4">
@@ -480,11 +480,11 @@ export function WorkloadView({
               </button>
             </div>
             <div className="flex items-center gap-3 text-sm text-theme-text-secondary">
-              <span className={clsx('px-2 py-0.5 text-xs font-medium rounded border', getKindColor(apiKind))}>
+              <span className={clsx('badge', getKindColor(apiKind))}>
                 {formatKindName(apiKind)}
               </span>
               {status && (
-                <span className={clsx('px-2 py-0.5 text-xs font-medium rounded', status.color)}>
+                <span className={clsx('badge', status.color)}>
                   {status.text}
                 </span>
               )}
@@ -539,7 +539,7 @@ export function WorkloadView({
               <Activity className="w-4 h-4" />
               Timeline
               {resourceEvents.length > 0 && (
-                <span className="ml-1 px-1.5 py-0.5 text-xs bg-theme-elevated rounded">{resourceEvents.length}</span>
+                <span className="ml-1 badge-sm bg-theme-elevated">{resourceEvents.length}</span>
               )}
             </TabButton>
             {allPods.length > 0 && renderLogsTab && (
@@ -692,7 +692,7 @@ function TabButton({ active, onClick, children }: { active: boolean; onClick: ()
       className={clsx(
         'flex items-center gap-1.5 px-3 py-2 text-sm font-medium border-b-2 transition-colors',
         active
-          ? 'text-theme-text-primary border-blue-500'
+          ? 'text-theme-text-primary border-skyhook-500'
           : 'text-theme-text-secondary border-transparent hover:text-theme-text-primary hover:border-theme-border-light'
       )}
     >
@@ -1016,15 +1016,15 @@ function EventsTab({
                       {new Date(evt.timestamp).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })}
                     </td>
                     <td className="px-4 py-3">
-                      <span className={clsx('text-xs px-1.5 py-0.5 rounded', getKindBadgeColor(evt.kind))}>
+                      <span className={clsx('badge-sm', getKindBadgeColor(evt.kind))}>
                         {evt.kind}
                       </span>
                     </td>
                     <td className="px-4 py-3">
                       {isWarning ? (
-                        <span className="text-xs px-2 py-0.5 rounded bg-amber-500/20 text-amber-500">Active</span>
+                        <span className="badge status-degraded">Active</span>
                       ) : evt.healthState ? (
-                        <span className={clsx('text-xs px-2 py-0.5 rounded', getHealthBadgeColor(evt.healthState))}>{evt.healthState}</span>
+                        <span className={clsx('badge', getHealthBadgeColor(evt.healthState))}>{evt.healthState}</span>
                       ) : null}
                     </td>
                   </tr>

package/src/theme/components.css

@@ -0,0 +1,195 @@
+/* ============================================
+   SHARED COMPONENT CLASSES (@skyhook-io/k8s-ui)
+   All in @layer components so Tailwind utilities can override them.
+   Import: @skyhook-io/k8s-ui/theme/components.css
+   Requires: @skyhook-io/k8s-ui/theme/variables.css imported first.
+   ============================================ */
+
+@layer components {
+
+  /* ── BRAND BUTTONS ── */
+
+  .btn-brand {
+    background-color: var(--color-brand);
+    color: white;
+    border-radius: 0.625rem;
+    transition: background-color 0.15s ease;
+  }
+  .btn-brand:hover {
+    background-color: var(--color-brand-light);
+  }
+  .btn-brand:disabled {
+    opacity: 0.5;
+  }
+
+  .btn-brand-muted {
+    background-color: light-dark(var(--color-brand-light), color-mix(in srgb, var(--color-brand) 60%, black));
+    color: white;
+    border-radius: 0.625rem;
+    transition: background-color 0.15s ease;
+  }
+  .btn-brand-muted:hover {
+    background-color: var(--color-brand);
+  }
+  .btn-brand-muted:disabled {
+    opacity: 0.5;
+  }
+
+  .btn-brand-toggle {
+    background-color: color-mix(in srgb, var(--color-brand) 50%, transparent);
+    color: var(--text-primary);
+    border-radius: 0.375rem;
+  }
+
+  /* ── SELECTION / HIGHLIGHT ── */
+
+  .selection {
+    background-color: var(--selection-bg);
+  }
+  .selection-strong {
+    background-color: var(--selection-bg-strong);
+  }
+  .selection-ring {
+    box-shadow: inset 0 0 0 1px var(--selection-border);
+  }
+  .selection-text {
+    color: var(--selection-text);
+  }
+
+  /* ── DIALOG / MODAL ── */
+
+  .dialog {
+    background-color: var(--bg-surface);
+    border: 0.5px solid var(--border-default);
+    border-radius: 0.875rem;
+    box-shadow: var(--shadow-lg);
+  }
+
+  /* ── BADGES ── */
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: 0.375rem;
+    border-width: 0.5px;
+    border-style: solid;
+    border-color: transparent;
+    line-height: 1.25rem;
+  }
+
+  .badge-sm {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.375rem;
+    font-size: 0.75rem;
+    border-radius: 0.375rem;
+    border-width: 0.5px;
+    border-style: solid;
+    border-color: transparent;
+    line-height: 1.25rem;
+  }
+
+  /* ── INNER CARDS ── */
+
+  .card-inner {
+    background: var(--bg-base);
+    border-radius: 0.375rem;
+    border: 1px solid var(--border-subtle);
+    padding: 0.5rem;
+  }
+
+  .card-inner-lg {
+    background: var(--bg-base);
+    border-radius: 0.625rem;
+    border: 1px solid var(--border-subtle);
+    padding: 0.75rem;
+  }
+
+  /* ── SUBTLE BORDERS ── */
+
+  .table-divide-subtle > * + * {
+    border-top-width: 0.5px;
+    border-top-style: solid;
+    border-top-color: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
+  }
+
+  .border-b-subtle {
+    border-bottom: 0.5px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
+  }
+
+  .border-r-subtle {
+    border-right: 0.5px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
+  }
+
+  .border-t-subtle {
+    border-top: 0.5px solid light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
+  }
+
+  /* ── STATUS BADGE COLORS ── */
+
+  /* Healthy/Success - emerald */
+  .status-healthy {
+    background-color: light-dark(#d1fae5, rgba(6, 78, 59, 0.5));
+    color: light-dark(#047857, #6ee7b7);
+    border-color: light-dark(#6ee7b7, rgba(6, 78, 59, 0.4));
+  }
+
+  /* Degraded/Warning - amber */
+  .status-degraded {
+    background-color: light-dark(#fef3c7, rgba(120, 53, 15, 0.5));
+    color: light-dark(#92400e, #fcd34d);
+    border-color: light-dark(#fcd34d, rgba(120, 53, 15, 0.4));
+  }
+
+  /* Unhealthy/Error - red */
+  .status-unhealthy {
+    background-color: light-dark(#fee2e2, rgba(127, 29, 29, 0.5));
+    color: light-dark(#b91c1c, #fca5a5);
+    border-color: light-dark(#fca5a5, rgba(127, 29, 29, 0.4));
+  }
+
+  /* Neutral/Info - sky */
+  .status-neutral {
+    background-color: light-dark(#e0f2fe, rgba(12, 74, 110, 0.5));
+    color: light-dark(#0369a1, #7dd3fc);
+    border-color: light-dark(#7dd3fc, rgba(12, 74, 110, 0.4));
+  }
+
+  /* Unknown/Muted - gray */
+  .status-unknown {
+    background-color: var(--bg-elevated);
+    color: var(--text-secondary);
+    border-color: var(--border-default);
+  }
+
+  /* Special status colors — no border-color (renders borderless within .badge) */
+  .status-violet {
+    background-color: light-dark(rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.2));
+    color: light-dark(#7c3aed, #a78bfa);
+    border-color: transparent;
+  }
+
+  .status-purple {
+    background-color: light-dark(rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.2));
+    color: light-dark(#9333ea, #c084fc);
+    border-color: transparent;
+  }
+
+  .status-orange {
+    background-color: light-dark(rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.2));
+    color: light-dark(#ea580c, #fb923c);
+    border-color: transparent;
+  }
+
+  .status-cyan {
+    background-color: light-dark(rgba(6, 182, 212, 0.15), rgba(6, 182, 212, 0.2));
+    color: light-dark(#0891b2, #22d3ee);
+    border-color: transparent;
+  }
+
+} /* end @layer components */

package/src/theme/tailwind-theme.css

@@ -31,21 +31,21 @@
   --color-accent-muted: var(--accent-muted);
   --color-accent-text: var(--accent-text);
 
-  /* Skyhook brand */
-  --color-skyhook: #2D7AFF;
-  --color-skyhook-50: #E6F0FF;
-  --color-skyhook-100: #CCE0FF;
-  --color-skyhook-200: #99C2FF;
-  --color-skyhook-300: #66A3FF;
-  --color-skyhook-400: #3385FF;
-  --color-skyhook-500: #2D7AFF;
-  --color-skyhook-600: #0052CC;
-  --color-skyhook-700: #003D99;
-  --color-skyhook-800: #002966;
-  --color-skyhook-900: #001433;
+  /* Skyhook brand (refined blue palette — more saturated) */
+  --color-skyhook: #5088CC;
+  --color-skyhook-50: #EBF2FA;
+  --color-skyhook-100: #D2E2F4;
+  --color-skyhook-200: #A8C7E8;
+  --color-skyhook-300: #7EACDC;
+  --color-skyhook-400: #6A9FE0;
+  --color-skyhook-500: #5088CC;
+  --color-skyhook-600: #4A7CC9;
+  --color-skyhook-700: #3B66A8;
+  --color-skyhook-800: #2D4E82;
+  --color-skyhook-900: #1F365C;
 
   /* K8s resource type colors */
-  --color-k8s-internet: #2D7AFF;
+  --color-k8s-internet: #5088CC;
   --color-k8s-ingress: #8b5cf6;
   --color-k8s-service: #3b82f6;
   --color-k8s-deployment: #10b981;

package/src/theme/variables.css

@@ -13,9 +13,10 @@
 :root {
   color-scheme: light dark;
 
-  /* ── Brand ── */
-  --color-brand: #2D7AFF;
-  --color-brand-light: light-dark(#1A5FCC, #5A9AFF);
+  /* ── Brand (refined blue — more life than slate, less generic than tech blue) ── */
+  --color-brand: light-dark(#4A7CC9, #6A9FE0);
+  --color-brand-light: light-dark(#3B66A8, #8BB5EA);
+  --brand-rgb: light-dark(74 124 201, 106 159 224);
 
   /* ── Semantic status (theme-independent) ── */
   --color-success: #22C55E;
@@ -29,40 +30,55 @@
   --color-error-dark: #DC2626;
   --color-info: #3B82F6;
 
-  /* ── Backgrounds ── */
-  --bg-base: light-dark(#f7f9fc, #0c1425);
-  --bg-surface: light-dark(#ffffff, #162033);
-  --bg-elevated: light-dark(#edf2f8, #1e2d45);
-  --bg-hover: light-dark(#e2e8f0, #2a3d58);
-  --bg-active: light-dark(#dbeafe, #1e3a5f);
-
-  /* ── Text ── */
-  --text-primary: light-dark(#0f172a, #f8fafc);
-  --text-secondary: light-dark(#475569, #cbd5e1);
-  --text-tertiary: light-dark(#64748b, #94a3b8);
-  --text-disabled: light-dark(#94a3b8, #64748b);
-
-  /* ── Borders ── */
-  --border-default: light-dark(#e2e8f0, #1e2d45);
-  --border-light: light-dark(#cbd5e1, #2a3d58);
-  --border-subtle: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.02));
+  /* ── Backgrounds ──
+     base     = page bg, header/toolbar chrome (barely-blue cool gray)
+     surface  = sidebars, content panels, cards (near-white)
+     elevated = inputs, count badges, dropdowns (very lightly blue-tinted) */
+  --bg-base: light-dark(#F0F3F9, #0B0F1E);
+  --bg-surface: light-dark(#F8FBFE, #14192A);
+  --bg-elevated: light-dark(#E6ECF5, #1E2338);
+  --bg-hover: light-dark(#DDE5F2, #282E48);
+  --bg-active: light-dark(#D3DCEC, #1C2840);
+
+  /* ── Text (cool neutral) ── */
+  --text-primary: light-dark(#1A1C20, #F5F6F8);
+  --text-secondary: light-dark(#555860, #D8DAE0);
+  --text-tertiary: light-dark(#7E828A, #B0B5C0);
+  --text-disabled: light-dark(#A0A4AC, #6A7080);
+
+  /* ── Borders (lightly blue-tinted in light mode) ── */
+  --border-default: light-dark(#D8E0EE, #222840);
+  --border-light: light-dark(#CDD6E8, #2C324A);
+  --border-subtle: light-dark(rgba(74, 100, 180, 0.07), rgba(255, 255, 255, 0.04));
   --border-focus: var(--color-brand);
 
   /* ── Accent ── */
   --accent: var(--color-brand);
   --accent-light: var(--color-brand-light);
-  --accent-muted: light-dark(rgba(45, 122, 255, 0.1), rgba(45, 122, 255, 0.2));
-  --accent-text: light-dark(#1d4ed8, #93c5fd);
+  --accent-muted: light-dark(rgba(74, 124, 201, 0.12), rgba(106, 159, 224, 0.18));
+  --accent-text: light-dark(#3B66A8, #8BB5EA);
+
+  /* ── Selection / highlight (used for selected rows, items, filters) ── */
+  --selection-bg: light-dark(rgba(74, 124, 201, 0.10), rgba(106, 159, 224, 0.15));
+  --selection-bg-strong: light-dark(rgba(74, 124, 201, 0.20), rgba(106, 159, 224, 0.25));
+  --selection-text: light-dark(#3B66A8, #8BB5EA);
+  --selection-border: light-dark(rgba(74, 124, 201, 0.30), rgba(106, 159, 224, 0.30));
+
+  /* ── Glow ── */
+  --glow-brand: light-dark(rgba(74, 124, 201, 0.2), rgba(106, 159, 224, 0.25));
+  --glow-brand-sm: 0 0 8px var(--glow-brand);
+  --glow-brand-md: 0 0 16px var(--glow-brand);
 
   /* ── Shadows (light defaults — can't use light-dark() for comma-separated values) ── */
   --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
   --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03);
   --shadow-lg: 0 12px 32px -6px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
+  --shadow-drawer: -12px 0 40px rgba(0,0,0,0.15), -4px 0 12px rgba(0,0,0,0.08);
 
   /* ── Topology ── */
-  --topology-node-border: light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.08));
+  --topology-node-border: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
   --topology-node-shadow: 0 2px 6px rgba(0,0,0,0.05), 0 6px 16px rgba(0,0,0,0.04);
-  --topology-bg-dots: light-dark(rgba(148, 163, 184, 0.25), #1e2d45);
+  --topology-bg-dots: light-dark(rgba(126, 130, 138, 0.2), #1E2338);
 
   /* Topology edge colors (theme-independent identity colors) */
   --edge-routes-to: #22c55e;
@@ -107,15 +123,16 @@
   --ansi-bright-white:   light-dark(#e5e5e5, #e5e5e5);
 
   /* ── Scrollbar ── */
-  --scrollbar-track: light-dark(#f1f5f9, #162033);
-  --scrollbar-thumb: light-dark(#cbd5e1, #2a3d58);
-  --scrollbar-thumb-hover: light-dark(#94a3b8, #3d5474);
+  --scrollbar-track: light-dark(#E6ECF5, #0F1322);
+  --scrollbar-thumb: light-dark(#CDD6E8, #2C324A);
+  --scrollbar-thumb-hover: light-dark(#AABACF, #484C55);
 }
 
 /* Dark overrides for comma-separated values that can't use light-dark() */
 .dark {
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
-  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.1);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.06);
+  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.06);
   --shadow-lg: 0 12px 32px -6px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.1);
+  --shadow-drawer: -16px 0 60px rgba(0,0,0,0.6), -6px 0 20px rgba(0,0,0,0.4);
   --topology-node-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 6px 16px rgba(0,0,0,0.15);
 }

package/src/types/core.ts

@@ -34,6 +34,8 @@ export interface Capabilities {
   nodeWrite: boolean      // Node write operations (cordon, uncordon, drain)
   mcpEnabled: boolean     // MCP server is running
   resources?: ResourcePermissions // Per-resource-type permissions
+  authEnabled?: boolean   // Auth is enabled on the backend
+  username?: string       // Authenticated user's username (when auth enabled)
 }
 
 // Core node kinds that have specific UI handling