@skyhook-io/k8s-ui 1.2.4 → 1.3.0

package/src/components/resources/renderers/KnativeEventingRenderer.tsx

@@ -28,7 +28,7 @@ export function BrokerRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={Radio} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -91,7 +91,7 @@ export function TriggerRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={Filter} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -122,7 +122,7 @@ export function TriggerRenderer({ data, onNavigate }: RendererProps) {
         <Section title={`Filter (${filterEntries.length} attributes)`} defaultExpanded>
           <div className="flex flex-wrap gap-1">
             {filterEntries.map(([key, val]) => (
-              <span key={key} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+              <span key={key} className="badge bg-theme-elevated text-theme-text-secondary">
                 {key}={String(val)}
               </span>
             ))}
@@ -176,7 +176,7 @@ export function ChannelRenderer({ data }: RendererProps) {
       <Section title="Overview" icon={Inbox} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -241,7 +241,7 @@ export function SubscriptionRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={ArrowRightLeft} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />

package/src/components/resources/renderers/KnativeFlowRenderer.tsx

@@ -48,7 +48,7 @@ export function SequenceRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={ListOrdered} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -65,7 +65,7 @@ export function SequenceRenderer({ data, onNavigate }: RendererProps) {
         <Section title={`Steps (${steps.length})`} defaultExpanded>
           <div className="space-y-2">
             {steps.map((step: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 flex items-center gap-2">
+              <div key={i} className="card-inner flex items-center gap-2">
                 <span className="text-xs font-medium text-theme-text-tertiary w-6 shrink-0">#{i + 1}</span>
                 <RefDisplay ref={step} ns={ns} onNavigate={onNavigate} />
               </div>
@@ -97,7 +97,7 @@ export function ParallelRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={GitFork} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -114,7 +114,7 @@ export function ParallelRenderer({ data, onNavigate }: RendererProps) {
         <Section title={`Branches (${branches.length})`} defaultExpanded>
           <div className="space-y-3">
             {branches.map((branch: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+              <div key={i} className="card-inner-lg">
                 <div className="text-sm font-medium text-theme-text-primary mb-2">Branch {i + 1}</div>
                 <PropertyList>
                   {branch.filter && (

package/src/components/resources/renderers/KnativeNetworkingRenderer.tsx

@@ -27,7 +27,7 @@ export function KnativeIngressRenderer({ data }: RendererProps) {
       <Section title="Overview" icon={Network} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -40,10 +40,10 @@ export function KnativeIngressRenderer({ data }: RendererProps) {
         <Section title={`Rules (${rules.length})`} defaultExpanded>
           <div className="space-y-3">
             {rules.map((rule: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+              <div key={i} className="card-inner-lg">
                 <div className="flex flex-wrap gap-1 mb-2">
                   {(rule.hosts || []).map((host: string, hi: number) => (
-                    <span key={hi} className="px-1.5 py-0.5 bg-blue-500/10 text-blue-400 rounded text-xs">
+                    <span key={hi} className="badge-sm bg-blue-500/10 text-blue-400">
                       {host}
                     </span>
                   ))}
@@ -104,7 +104,7 @@ export function KnativeCertificateRenderer({ data }: RendererProps) {
       <Section title="Overview" icon={ShieldCheck} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -117,7 +117,7 @@ export function KnativeCertificateRenderer({ data }: RendererProps) {
         <Section title={`DNS Names (${dnsNames.length})`} defaultExpanded>
           <div className="flex flex-wrap gap-1">
             {dnsNames.map((name: string, i: number) => (
-              <span key={i} className="px-1.5 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+              <span key={i} className="badge-sm bg-theme-elevated text-theme-text-secondary">
                 {name}
               </span>
             ))}
@@ -152,13 +152,13 @@ export function ServerlessServiceRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={Server} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
           <Property label="Mode" value={mode ? (
             <span className={clsx(
-              'px-2 py-0.5 rounded text-xs font-medium',
+              'badge',
               mode === 'Proxy' ? 'bg-yellow-500/20 text-yellow-400' : 'bg-green-500/20 text-green-400'
             )}>
               {mode}
@@ -204,7 +204,7 @@ export function DomainMappingRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={Globe} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />

package/src/components/resources/renderers/KnativeRevisionRenderer.tsx

@@ -32,7 +32,7 @@ export function KnativeRevisionRenderer({ data }: KnativeRevisionRendererProps)
       <Section title="Overview" icon={Settings} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -42,7 +42,7 @@ export function KnativeRevisionRenderer({ data }: KnativeRevisionRendererProps)
           } />}
           {routingState && <Property label="Routing" value={
             <span className={clsx(
-              'px-2 py-0.5 rounded text-xs font-medium',
+              'badge',
               routingState === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-theme-hover text-theme-text-secondary'
             )}>
               {routingState}
@@ -61,7 +61,7 @@ export function KnativeRevisionRenderer({ data }: KnativeRevisionRendererProps)
         <Section title={`Containers (${containers.length})`} icon={Container} defaultExpanded>
           <div className="space-y-2">
             {containers.map((c: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+              <div key={i} className="card-inner text-sm">
                 <div className="font-medium text-theme-text-primary">{c.name || 'container'}</div>
                 <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
                 {c.ports && c.ports.length > 0 && (

package/src/components/resources/renderers/KnativeRouteRenderer.tsx

@@ -21,7 +21,7 @@ export function KnativeRouteRenderer({ data, onNavigate }: KnativeRouteRendererP
       <Section title="Overview" icon={Route} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />

package/src/components/resources/renderers/KnativeServiceRenderer.tsx

@@ -34,7 +34,7 @@ export function KnativeServiceRenderer({ data, onNavigate }: KnativeServiceRende
       <Section title="Overview" icon={Globe} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -118,7 +118,7 @@ export function KnativeServiceRenderer({ data, onNavigate }: KnativeServiceRende
         <Section title="Template" icon={Container} defaultExpanded>
           <div className="space-y-2">
             {containers.map((c: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+              <div key={i} className="card-inner text-sm">
                 <div className="font-medium text-theme-text-primary">{c.name || 'container'}</div>
                 <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
                 {c.ports && c.ports.length > 0 && (

package/src/components/resources/renderers/KnativeSourceRenderer.tsx

@@ -50,7 +50,7 @@ export function PingSourceRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={Clock} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -86,7 +86,7 @@ export function ApiServerSourceRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={Server} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -100,7 +100,7 @@ export function ApiServerSourceRenderer({ data, onNavigate }: RendererProps) {
         <Section title={`Watched Resources (${resources.length})`} defaultExpanded>
           <div className="space-y-1.5">
             {resources.map((r: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+              <div key={i} className="card-inner text-sm">
                 <span className="text-theme-text-primary">{r.apiVersion}/{r.kind}</span>
                 {r.selector && (
                   <div className="text-xs text-theme-text-tertiary mt-0.5">
@@ -136,7 +136,7 @@ export function ContainerSourceRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={Container} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />
@@ -148,7 +148,7 @@ export function ContainerSourceRenderer({ data, onNavigate }: RendererProps) {
         <Section title={`Containers (${containers.length})`} defaultExpanded>
           <div className="space-y-2">
             {containers.map((c: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+              <div key={i} className="card-inner text-sm">
                 <div className="font-medium text-theme-text-primary">{c.name || 'container'}</div>
                 <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
                 {c.args && c.args.length > 0 && (
@@ -184,7 +184,7 @@ export function SinkBindingRenderer({ data, onNavigate }: RendererProps) {
       <Section title="Overview" icon={Link2} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+            <span className={clsx('badge', status.color)}>
               {status.text}
             </span>
           } />

package/src/components/resources/renderers/KustomizationRenderer.tsx

@@ -101,7 +101,7 @@ export function KustomizationRenderer({ data }: KustomizationRendererProps) {
             {spec.healthChecks.map((check: any, idx: number) => (
               <div
                 key={idx}
-                className="text-sm px-2 py-1 bg-theme-elevated/30 rounded"
+                className="text-sm card-inner"
               >
                 <span className="text-theme-text-tertiary">{check.kind}/</span>
                 <span className="text-theme-text-primary">{check.name}</span>

package/src/components/resources/renderers/KyvernoPolicyReportRenderer.tsx

@@ -76,7 +76,7 @@ function ResultRow({ result }: { result: any }) {
       </div>
       {expanded && message && (
         <div className="px-2 pb-2 pl-7">
-          <div className="text-xs text-theme-text-secondary break-all bg-theme-elevated/30 rounded p-2">
+          <div className="text-xs text-theme-text-secondary break-all card-inner">
             {message}
           </div>
           {result.category && (
@@ -253,7 +253,7 @@ export function KyvernoPolicyRenderer({ data }: KyvernoPolicyRendererProps) {
         <PropertyList>
           <Property label="Failure Action" value={
             <span className={clsx(
-              'px-2 py-0.5 rounded text-xs font-medium',
+              'badge',
               isEnforce ? 'bg-red-500/20 text-red-400' : 'bg-yellow-500/20 text-yellow-400',
             )}>
               {action}
@@ -301,7 +301,7 @@ export function KyvernoPolicyRenderer({ data }: KyvernoPolicyRendererProps) {
         <Section title={`Rules (${ruleCount})`} icon={FileWarning} defaultExpanded>
           <div className="space-y-2">
             {rules.map((rule, i) => (
-              <div key={i} className="bg-theme-elevated/30 rounded-lg p-3">
+              <div key={i} className="card-inner-lg">
                 <div className="flex items-center gap-2 mb-1">
                   <span className="text-sm font-medium text-theme-text-primary">{rule.name}</span>
                   <span className={clsx('px-1.5 py-0.5 rounded text-[10px] font-medium', ruleTypeColorMap[rule.type] || 'bg-theme-hover text-theme-text-tertiary')}>
@@ -325,7 +325,7 @@ export function KyvernoPolicyRenderer({ data }: KyvernoPolicyRendererProps) {
             {autogenRules.map((name: string) => (
               <span
                 key={name}
-                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+                className="badge bg-theme-elevated text-theme-text-secondary"
               >
                 {name}
               </span>

package/src/components/resources/renderers/NetworkPolicyRenderer.tsx

@@ -34,7 +34,7 @@ export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
               {Object.entries(matchLabels).map(([k, v]) => (
                 <span
                   key={k}
-                  className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+                  className="badge bg-theme-elevated text-theme-text-secondary"
                 >
                   {k}={String(v)}
                 </span>
@@ -50,7 +50,7 @@ export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
                 <span
                   key={type}
                   className={clsx(
-                    'px-2 py-0.5 rounded text-xs border',
+                    'badge',
                     type === 'Ingress'
                       ? 'bg-blue-500/20 text-blue-400 border-blue-500/30'
                       : 'bg-purple-500/20 text-purple-400 border-purple-500/30'
@@ -106,7 +106,7 @@ function IngressEgressRuleCard({
   const ports: any[] = rule.ports || []
 
   return (
-    <div className="bg-theme-elevated/30 rounded p-3">
+    <div className="card-inner-lg">
       {peers.length > 0 && (
         <div className="mb-2">
           <div className="text-xs text-theme-text-tertiary mb-1 capitalize">{direction}</div>
@@ -125,7 +125,7 @@ function IngressEgressRuleCard({
             {ports.map((port: any, j: number) => (
               <span
                 key={j}
-                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+                className="badge bg-theme-elevated text-theme-text-secondary"
               >
                 {port.protocol || 'TCP'}/{port.port}
               </span>
@@ -153,7 +153,7 @@ function PeerEntry({ peer }: { peer: any }) {
             {Object.entries(labels).map(([k, v]) => (
               <span
                 key={k}
-                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+                className="badge bg-theme-elevated text-theme-text-secondary"
               >
                 {k}={String(v)}
               </span>
@@ -177,7 +177,7 @@ function PeerEntry({ peer }: { peer: any }) {
             {Object.entries(labels).map(([k, v]) => (
               <span
                 key={k}
-                className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary"
+                className="badge bg-theme-elevated text-theme-text-secondary"
               >
                 {k}={String(v)}
               </span>

package/src/components/resources/renderers/NodeRenderer.tsx

@@ -163,7 +163,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
           {metricsHistory?.dataPoints && metricsHistory.dataPoints.length > 0 ? (
             <div className="space-y-4">
               {/* CPU Usage with Chart */}
-              <div className="bg-theme-elevated/30 rounded-lg p-3">
+              <div className="card-inner-lg">
                 <div className="text-xs text-theme-text-tertiary mb-1 flex items-center justify-between">
                   <span>CPU</span>
                   <span className="text-theme-text-quaternary">
@@ -179,7 +179,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
               </div>
 
               {/* Memory Usage with Chart */}
-              <div className="bg-theme-elevated/30 rounded-lg p-3">
+              <div className="card-inner-lg">
                 <div className="text-xs text-theme-text-tertiary mb-1 flex items-center justify-between">
                   <span>Memory</span>
                   <span className="text-theme-text-quaternary">
@@ -197,7 +197,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
           ) : metrics?.usage ? (
             /* Fallback to simple display if no history yet */
             <div className="space-y-3">
-              <div className="bg-theme-elevated/30 rounded-lg p-3">
+              <div className="card-inner-lg">
                 <div className="flex items-center justify-between mb-2">
                   <span className="text-sm font-medium text-theme-text-primary">CPU</span>
                 </div>
@@ -208,7 +208,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
                   </span>
                 </div>
               </div>
-              <div className="bg-theme-elevated/30 rounded-lg p-3">
+              <div className="card-inner-lg">
                 <div className="flex items-center justify-between mb-2">
                   <span className="text-sm font-medium text-theme-text-primary">Memory</span>
                 </div>
@@ -262,7 +262,7 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
             {taints.map((taint: any, i: number) => (
               <div key={`${taint.key}-${taint.effect}-${i}`} className="text-sm">
                 <span className={clsx(
-                  'px-2 py-0.5 rounded text-xs',
+                  'badge',
                   taint.effect === 'NoSchedule' ? 'bg-yellow-500/20 text-yellow-400' :
                   taint.effect === 'NoExecute' ? 'bg-red-500/20 text-red-400' :
                   'bg-blue-500/20 text-blue-400'

package/src/components/resources/renderers/OrderRenderer.tsx

@@ -55,7 +55,7 @@ export function OrderRenderer({ data }: { data: any }) {
           <Property
             label="State"
             value={
-              <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', getOrderStateBadge(state).color)}>
+              <span className={clsx('badge', getOrderStateBadge(state).color)}>
                 {getOrderStateBadge(state).text}
               </span>
             }
@@ -69,7 +69,7 @@ export function OrderRenderer({ data }: { data: any }) {
         <Section title="Domains" icon={Globe}>
           <div className="flex flex-wrap gap-1.5">
             {dnsNames.map((name: string) => (
-              <span key={name} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary font-medium">
+              <span key={name} className="badge bg-theme-elevated text-theme-text-secondary">
                 {name}
               </span>
             ))}
@@ -93,7 +93,7 @@ export function OrderRenderer({ data }: { data: any }) {
         <Section title={`Authorizations (${authorizations.length})`} icon={ShoppingCart}>
           <div className="space-y-1">
             {authorizations.map((auth: any, i: number) => (
-              <div key={i} className="text-xs text-theme-text-secondary bg-theme-elevated/30 rounded p-2">
+              <div key={i} className="text-xs text-theme-text-secondary card-inner">
                 {auth.url || `Authorization ${i + 1}`}
               </div>
             ))}

package/src/components/resources/renderers/PersistentVolumeRenderer.tsx

@@ -120,7 +120,7 @@ export function PersistentVolumeRenderer({ data, onNavigate }: PersistentVolumeR
               <div key={termIdx} className="space-y-1">
                 {term.matchExpressions?.map((expr: any, exprIdx: number) => (
                   <div key={exprIdx} className="flex flex-wrap gap-1">
-                    <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">
                       {expr.key} {expr.operator} {expr.values?.join(', ')}
                     </span>
                   </div>

package/src/components/resources/renderers/PodDisruptionBudgetRenderer.tsx

@@ -86,7 +86,7 @@ export function PodDisruptionBudgetRenderer({ data }: PodDisruptionBudgetRendere
           <Property label="Expected Pods" value={expectedPods} />
         </PropertyList>
         {currentHealthy !== undefined && expectedPods !== undefined && expectedPods > 0 && (
-          <div className="mt-3 bg-theme-elevated/30 rounded p-2 text-sm">
+          <div className="mt-3 card-inner text-sm">
             <div className="flex items-center justify-between">
               <span className="text-theme-text-secondary">Health</span>
               <span className={clsx(

package/src/components/resources/renderers/PodMonitorRenderer.tsx

@@ -28,19 +28,19 @@ export function PodMonitorRenderer({ data }: PodMonitorRendererProps) {
         <Section title={`Pod Metrics Endpoints (${endpoints.length})`} defaultExpanded>
           <div className="space-y-2">
             {endpoints.map((ep, i) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+              <div key={i} className="card-inner text-sm">
                 <div className="flex items-center gap-2 flex-wrap">
                   {ep.port && (
                     <span className="text-theme-text-primary font-medium">{ep.port}</span>
                   )}
                   <span className="text-theme-text-secondary">{ep.path}</span>
                   {ep.interval && (
-                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                    <span className="badge-sm bg-theme-hover text-theme-text-secondary">
                       every {ep.interval}
                     </span>
                   )}
                   {ep.scheme && ep.scheme !== 'http' && (
-                    <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                    <span className="badge-sm bg-theme-hover text-theme-text-secondary">
                       {ep.scheme}
                     </span>
                   )}

package/src/components/resources/renderers/PodRenderer.tsx

@@ -3,7 +3,7 @@ import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, Circle
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { formatResources, formatDuration } from '../resource-utils'
-import { getResourceStatusColor } from '../../../utils/badge-colors'
+import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
 import type { ResolvedEnvFrom } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
 import { MetricsChart } from '../../ui/MetricsChart'
@@ -479,7 +479,7 @@ export function PodRenderer({
                           </button>
                         </Tooltip>
                       )}
-                      <span className={clsx('px-2 py-0.5 text-xs rounded', statusColor)}>
+                      <span className={clsx('badge', statusColor)}>
                         {statusLabel}
                       </span>
                     </div>
@@ -554,7 +554,7 @@ export function PodRenderer({
             const currentTerminated = status?.state?.terminated
 
             return (
-              <div key={container.name} className="bg-theme-elevated/30 rounded-lg p-3">
+              <div key={container.name} className="card-inner-lg">
                 <div className="flex items-center justify-between mb-2">
                   <span className="text-sm font-medium text-theme-text-primary">{container.name}</span>
                   <div className="flex items-center gap-2">
@@ -589,16 +589,16 @@ export function PodRenderer({
                       </Tooltip>
                     )}
                     <span className={clsx(
-                      'px-2 py-0.5 text-xs rounded',
-                      isReady ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
+                      'badge',
+                      isReady ? SEVERITY_BADGE_BORDERED.success : SEVERITY_BADGE_BORDERED.error
                     )}>
                       {isReady ? 'Ready' : 'Not Ready'}
                     </span>
                     <span className={clsx(
-                      'px-2 py-0.5 text-xs rounded',
-                      stateKey === 'running' ? 'bg-green-500/20 text-green-400' :
-                      stateKey === 'waiting' ? 'bg-yellow-500/20 text-yellow-400' :
-                      'bg-red-500/20 text-red-400'
+                      'badge',
+                      stateKey === 'running' ? SEVERITY_BADGE_BORDERED.success :
+                      stateKey === 'waiting' ? SEVERITY_BADGE_BORDERED.warning :
+                      SEVERITY_BADGE_BORDERED.error
                     )}>
                       {stateKey}
                     </span>
@@ -731,7 +731,7 @@ export function PodRenderer({
               const dataPoints = 'dataPoints' in historyContainer ? historyContainer.dataPoints : []
 
               return (
-                <div key={historyContainer.name} className="bg-theme-elevated/30 rounded-lg p-3">
+                <div key={historyContainer.name} className="card-inner-lg">
                   <div className="flex items-center justify-between mb-3">
                     <span className="text-sm font-medium text-theme-text-primary">{historyContainer.name}</span>
                   </div>

package/src/components/resources/renderers/PrometheusRuleRenderer.tsx

@@ -32,12 +32,12 @@ export function PrometheusRuleRenderer({ data }: PrometheusRuleRendererProps) {
         <Section title={`Rule Groups (${groups.length})`} defaultExpanded>
           <div className="space-y-2">
             {groups.map((group, i) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-2 text-sm">
+              <div key={i} className="card-inner text-sm">
                 <div className="flex items-center justify-between">
                   <span className="text-theme-text-primary font-medium">{group.name}</span>
                   <div className="flex items-center gap-2">
                     {group.interval && (
-                      <span className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                      <span className="badge-sm bg-theme-hover text-theme-text-secondary">
                         {group.interval}
                       </span>
                     )}

package/src/components/resources/renderers/RoleBindingRenderer.tsx

@@ -58,7 +58,7 @@ export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererPro
             label="Kind"
             value={
               roleRef.kind ? (
-                <span className={clsx('px-2 py-0.5 rounded text-xs', getRoleRefKindBadgeClass(roleRef.kind))}>
+                <span className={clsx('badge', getRoleRefKindBadgeClass(roleRef.kind))}>
                   {roleRef.kind}
                 </span>
               ) : undefined
@@ -74,9 +74,9 @@ export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererPro
       <Section title={`Subjects (${subjects.length})`} icon={Users} defaultExpanded>
         <div className="space-y-2">
           {subjects.map((subject: any, i: number) => (
-            <div key={`${subject.kind}-${subject.name}-${i}`} className="bg-theme-elevated/30 rounded p-2 text-sm">
+            <div key={`${subject.kind}-${subject.name}-${i}`} className="card-inner text-sm">
               <div className="flex items-center gap-2">
-                <span className={clsx('px-2 py-0.5 rounded text-xs', getSubjectKindBadgeClass(subject.kind))}>
+                <span className={clsx('badge', getSubjectKindBadgeClass(subject.kind))}>
                   {subject.kind}
                 </span>
                 {subject.kind === 'ServiceAccount' ? (