@skyhook-io/k8s-ui 1.14.2 → 1.14.4

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

@@ -145,9 +145,9 @@ export function AWSManagedControlPlaneRenderer({ data }: Props) {
                   <td className="py-1 text-theme-text-secondary font-mono text-[10px]">{a.statusVersion !== '-' ? a.statusVersion : a.specVersion}</td>
                   <td className="py-1">
                     <span className={`badge badge-sm ${a.status === 'ACTIVE'
-                      ? 'status-healthy'
+                      ? 'status-green'
                       : a.status === 'DEGRADED'
-                      ? 'status-unhealthy'
+                      ? 'status-red'
                       : 'status-neutral'
                     }`}>{a.status}</span>
                   </td>

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

@@ -92,9 +92,9 @@ export function AlertRenderer({ data }: AlertRendererProps) {
             value={
               <span className={clsx(
                 'badge',
-                eventSeverity === 'error' ? 'bg-red-500/20 text-red-400' :
-                eventSeverity === 'warning' ? 'bg-yellow-500/20 text-yellow-400' :
-                'bg-blue-500/20 text-blue-400'
+                eventSeverity === 'error' ? 'status-red' :
+                eventSeverity === 'warning' ? 'status-amber' :
+                'status-blue'
               )}>
                 {eventSeverity}
               </span>

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

@@ -178,7 +178,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <button
                 onClick={() => onTerminate({ namespace, name })}
                 disabled={isTerminating}
-                className="flex items-center gap-1.5 px-2 py-1 rounded text-xs bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors disabled:opacity-50"
+                className="flex items-center gap-1.5 px-2 py-1 rounded text-xs status-red hover:opacity-80 transition-colors disabled:opacity-50"
                 title="Terminate sync"
               >
                 <XCircle className="w-3.5 h-3.5" />
@@ -237,7 +237,7 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
               <span
                 className={clsx(
                   'badge',
-                  syncPolicy.automated ? 'bg-green-500/20 text-green-400' : BADGE_INACTIVE
+                  syncPolicy.automated ? 'status-green' : BADGE_INACTIVE
                 )}
               >
                 {syncPolicy.automated ? 'Enabled' : 'Disabled'}
@@ -281,11 +281,11 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
                   className={clsx(
                     'badge',
                     operationState.phase === 'Succeeded'
-                      ? 'bg-green-500/20 text-green-400'
+                      ? 'status-green'
                       : operationState.phase === 'Running'
-                      ? 'bg-blue-500/20 text-blue-400'
+                      ? 'status-blue'
                       : operationState.phase === 'Failed' || operationState.phase === 'Error'
-                      ? 'bg-red-500/20 text-red-400'
+                      ? 'status-red'
                       : BADGE_INACTIVE
                   )}
                 >

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

@@ -287,7 +287,7 @@ export function CNPGClusterRenderer({ data, onNavigate, declared}: CNPGClusterRe
           )}
           {data.spec?.enableSuperuserAccess !== undefined && (
             <Property label="Superuser Access" value={
-              <span className={`badge-sm ${data.spec.enableSuperuserAccess ? 'bg-green-500/20 text-green-400' : 'bg-theme-hover text-theme-text-secondary'}`}>
+              <span className={`badge-sm ${data.spec.enableSuperuserAccess ? 'status-green' : 'bg-theme-hover text-theme-text-secondary'}`}>
                 {data.spec.enableSuperuserAccess ? 'Enabled' : 'Disabled'}
               </span>
             } />

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

@@ -120,13 +120,13 @@ export function CertificateRenderer({ data }: CertificateRendererProps) {
                 <span className={clsx(
                   'badge',
                   isReady
-                    ? 'bg-green-500/20 text-green-400'
-                    : 'bg-red-500/20 text-red-400'
+                    ? 'status-green'
+                    : 'status-red'
                 )}>
                   {isReady ? 'Ready' : 'Not Ready'}
                 </span>
                 {spec.isCA && (
-                  <span className="badge bg-purple-500/20 text-purple-400">
+                  <span className="badge status-purple">
                     CA Certificate
                   </span>
                 )}

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

@@ -54,8 +54,8 @@ export function CertificateRequestRenderer({ data }: CertificateRequestRendererP
               <span className={clsx(
                 'badge',
                 isReady
-                  ? 'bg-green-500/20 text-green-400'
-                  : 'bg-red-500/20 text-red-400'
+                  ? 'status-green'
+                  : 'status-red'
               )}>
                 {isReady ? 'Ready' : 'Not Ready'}
               </span>
@@ -67,10 +67,10 @@ export function CertificateRequestRenderer({ data }: CertificateRequestRendererP
               <span className={clsx(
                 'badge',
                 isApproved
-                  ? 'bg-green-500/20 text-green-400'
+                  ? 'status-green'
                   : isDenied
-                    ? 'bg-red-500/20 text-red-400'
-                    : 'bg-yellow-500/20 text-yellow-400'
+                    ? 'status-red'
+                    : 'status-amber'
               )}>
                 {isApproved ? 'Yes' : isDenied ? 'No' : 'Pending'}
               </span>

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

@@ -7,19 +7,19 @@ import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 function getChallengeStateBadge(state: string): { color: string; text: string } {
   switch (state?.toLowerCase()) {
     case 'valid':
-      return { text: 'Valid', color: 'bg-green-500/20 text-green-400' }
+      return { text: 'Valid', color: 'status-green' }
     case 'ready':
-      return { text: 'Ready', color: 'bg-blue-500/20 text-blue-400' }
+      return { text: 'Ready', color: 'status-blue' }
     case 'pending':
-      return { text: 'Pending', color: 'bg-yellow-500/20 text-yellow-400' }
+      return { text: 'Pending', color: 'status-amber' }
     case 'processing':
-      return { text: 'Processing', color: 'bg-yellow-500/20 text-yellow-400' }
+      return { text: 'Processing', color: 'status-amber' }
     case 'invalid':
-      return { text: 'Invalid', color: 'bg-red-500/20 text-red-400' }
+      return { text: 'Invalid', color: 'status-red' }
     case 'expired':
-      return { text: 'Expired', color: 'bg-red-500/20 text-red-400' }
+      return { text: 'Expired', color: 'status-red' }
     case 'errored':
-      return { text: 'Errored', color: 'bg-red-500/20 text-red-400' }
+      return { text: 'Errored', color: 'status-red' }
     default:
       return { text: state || 'Unknown', color: BADGE_INACTIVE }
   }
@@ -78,7 +78,7 @@ export function ChallengeRenderer({ data }: { data: any }) {
                   {challengeType}
                 </span>
                 {spec.wildcard && (
-                  <span className="badge bg-purple-500/20 text-purple-400">
+                  <span className="badge status-purple">
                     Wildcard
                   </span>
                 )}

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

@@ -144,7 +144,7 @@ function CiliumRuleCard({ rule }: { rule: any }) {
           <div className="text-xs text-theme-text-tertiary mb-1">From Entities</div>
           <div className="flex flex-wrap gap-1">
             {fromEntities.map((e, j) => (
-              <span key={j} className="badge bg-purple-500/20 text-purple-400 border-purple-500/30">{e}</span>
+              <span key={j} className="badge status-purple">{e}</span>
             ))}
           </div>
         </div>
@@ -215,7 +215,7 @@ function CiliumRuleCard({ rule }: { rule: any }) {
           <div className="text-xs text-theme-text-tertiary mb-1">To Entities</div>
           <div className="flex flex-wrap gap-1">
             {toEntities.map((e, j) => (
-              <span key={j} className="badge bg-purple-500/20 text-purple-400 border-purple-500/30">{e}</span>
+              <span key={j} className="badge status-purple">{e}</span>
             ))}
           </div>
         </div>
@@ -365,7 +365,7 @@ function L7Rules({ rules, ports }: { rules: any; ports?: any[] }) {
             {httpRules.map((r: any, i: number) => (
               <div key={i} className="flex flex-wrap items-center gap-1">
                 {r.method && (
-                  <span className="badge badge-sm bg-blue-500/20 text-blue-400 border-blue-500/30">
+                  <span className="badge badge-sm status-blue">
                     {r.method}
                   </span>
                 )}

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

@@ -81,8 +81,8 @@ function IssuerRendererBase({ data, kind }: { data: any; kind: string }) {
               <span className={clsx(
                 'badge',
                 isReady
-                  ? 'bg-green-500/20 text-green-400'
-                  : 'bg-red-500/20 text-red-400'
+                  ? 'status-green'
+                  : 'status-red'
               )}>
                 {isReady ? 'Ready' : 'Not Ready'}
               </span>

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

@@ -76,10 +76,10 @@ function AdminRuleCard({ rule, direction }: { rule: any; direction: 'from' | 'to
   const ports: any[] = rule.ports || []
 
   const actionColor = action === 'Deny'
-    ? 'bg-red-500/20 text-red-400 border-red-500/30'
+    ? 'status-red'
     : action === 'Pass'
-      ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
-      : 'bg-green-500/20 text-green-400 border-green-500/30'
+      ? 'status-amber'
+      : 'status-green'
 
   return (
     <div className="card-inner-lg">

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

@@ -131,9 +131,9 @@ export function GatewayRenderer({ data, onNavigate }: GatewayRendererProps) {
                       <span className={clsx(
                         'w-4 h-4 rounded-full flex items-center justify-center text-xs shrink-0',
                         isListenerAccepted
-                          ? 'bg-green-500/20 text-green-400'
+                          ? 'status-green'
                           : isListenerNotAccepted
-                            ? 'bg-red-500/20 text-red-400'
+                            ? 'status-red'
                             : BADGE_INACTIVE
                       )}>
                         {isListenerAccepted ? '\u2713' : isListenerNotAccepted ? '\u2717' : '?'}

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

@@ -364,7 +364,7 @@ function GenericConditionsSection({ conditions }: { conditions: any[] }) {
                   <span className="text-theme-text-primary font-medium">{cond.type}</span>
                   <span className={clsx(
                     'badge-sm',
-                    isTrue ? 'bg-theme-elevated text-theme-text-secondary' : 'bg-red-500/20 text-red-400'
+                    isTrue ? 'bg-theme-elevated text-theme-text-secondary' : 'status-red'
                   )}>
                     {cond.status}
                   </span>

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

@@ -24,7 +24,7 @@ export function IngressClassRenderer({ data }: IngressClassRendererProps) {
               <span className={clsx(
                 'badge',
                 isDefault
-                  ? 'bg-green-500/20 text-green-400'
+                  ? 'status-green'
                   : BADGE_INACTIVE
               )}>
                 {isDefault ? 'Yes' : 'No'}

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

@@ -9,9 +9,9 @@ import {
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 
 const modeColors: Record<string, string> = {
-  STRICT: 'bg-green-500/20 text-green-400',
-  PERMISSIVE: 'bg-yellow-500/20 text-yellow-400',
-  DISABLE: 'bg-red-500/20 text-red-400',
+  STRICT: 'status-green',
+  PERMISSIVE: 'status-amber',
+  DISABLE: 'status-red',
   UNSET: BADGE_INACTIVE,
 }
 

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

@@ -47,8 +47,8 @@ export function IstioServiceEntryRenderer({ data }: IstioServiceEntryRendererPro
             <span className={clsx(
               'badge',
               location === 'MESH_EXTERNAL'
-                ? 'bg-orange-500/20 text-orange-400'
-                : 'bg-blue-500/20 text-blue-400'
+                ? 'status-orange'
+                : 'status-blue'
             )}>
               {location}
             </span>

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

@@ -186,9 +186,9 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
                 <span
                   className={clsx(
                     'w-5 h-5 rounded-full flex items-center justify-center text-xs shrink-0',
-                    isComplete && 'bg-green-500/20 text-green-400',
-                    isCurrent && 'bg-blue-500/20 text-blue-400',
-                    isFailed && 'bg-red-500/20 text-red-400',
+                    isComplete && 'status-green',
+                    isCurrent && 'status-blue',
+                    isFailed && 'status-red',
                     isPending && !isCurrent && BADGE_INACTIVE
                   )}
                 >

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

@@ -193,10 +193,10 @@ export function ChannelRenderer({ data }: RendererProps) {
               <div key={i} className="text-sm text-theme-text-secondary">
                 {sub.subscriberURI || sub.replyURI || `Subscriber ${i + 1}`}
                 {sub.ready === 'True' && (
-                  <span className="ml-2 px-1.5 py-0.5 bg-green-500/20 text-green-400 rounded text-[10px]">ready</span>
+                  <span className="ml-2 px-1.5 py-0.5 status-green rounded text-[10px]">ready</span>
                 )}
                 {sub.ready === 'False' && (
-                  <span className="ml-2 px-1.5 py-0.5 bg-red-500/20 text-red-400 rounded text-[10px]">not ready</span>
+                  <span className="ml-2 px-1.5 py-0.5 status-red rounded text-[10px]">not ready</span>
                 )}
               </div>
             ))}

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

@@ -44,7 +44,7 @@ export function KnativeRevisionRenderer({ data }: KnativeRevisionRendererProps)
           {routingState && <Property label="Routing" value={
             <span className={clsx(
               'badge',
-              routingState === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-theme-hover text-theme-text-secondary'
+              routingState === 'active' ? 'status-green' : 'bg-theme-hover text-theme-text-secondary'
             )}>
               {routingState}
             </span>

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

@@ -27,18 +27,21 @@ interface PolicyReportRendererProps {
 }
 
 const resultColorMap: Record<string, string> = {
-  pass: 'bg-green-500/20 text-green-400',
-  fail: 'bg-red-500/20 text-red-400',
-  warn: 'bg-yellow-500/20 text-yellow-400',
-  error: 'bg-red-500/20 text-red-400',
-  skip: 'bg-blue-500/20 text-blue-400',
+  pass: 'status-green',
+  fail: 'status-red',
+  warn: 'status-amber',
+  error: 'status-red',
+  skip: 'status-blue',
 }
 
+// A severity gradient, not a set of categories: critical/high/medium are the
+// three tiers the theme defines for exactly this (see the alert tier in
+// DESIGN.md). low and info sit below the gradient and take a plain accent.
 const severityColorMap: Record<string, string> = {
-  critical: 'bg-red-500/20 text-red-400',
-  high: 'bg-orange-500/20 text-orange-400',
-  medium: 'bg-yellow-500/20 text-yellow-400',
-  low: 'bg-blue-500/20 text-blue-400',
+  critical: 'status-unhealthy',
+  high: 'status-alert',
+  medium: 'status-degraded',
+  low: 'status-blue',
   info: 'bg-theme-hover text-theme-text-tertiary',
 }
 
@@ -237,10 +240,10 @@ interface KyvernoPolicyRendererProps {
 }
 
 const ruleTypeColorMap: Record<string, string> = {
-  validate: 'bg-blue-500/20 text-blue-400',
-  mutate: 'bg-purple-500/20 text-purple-400',
-  generate: 'bg-green-500/20 text-green-400',
-  verifyImages: 'bg-orange-500/20 text-orange-400',
+  validate: 'status-blue',
+  mutate: 'status-purple',
+  generate: 'status-green',
+  verifyImages: 'status-orange',
 }
 
 export function KyvernoPolicyRenderer({ data, coverage, queued }: KyvernoPolicyRendererProps) {
@@ -273,10 +276,10 @@ export function KyvernoPolicyRenderer({ data, coverage, queued }: KyvernoPolicyR
             <span className={clsx(
               'badge',
               enforcement.blocks
-                ? 'bg-red-500/20 text-red-400'
+                ? 'status-red'
                 : enforcement.discrepancy
-                  ? 'bg-orange-500/20 text-orange-400'
-                  : 'bg-yellow-500/20 text-yellow-400',
+                  ? 'status-alert'
+                  : 'status-amber',
             )}>
               {enforcement.label}
             </span>
@@ -298,22 +301,22 @@ export function KyvernoPolicyRenderer({ data, coverage, queued }: KyvernoPolicyR
         {/* Rule count summary */}
         <div className="mt-3 flex flex-wrap gap-2">
           {ruleCountByType.validate > 0 && (
-            <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-blue-500/20 text-blue-400">
+            <span className="px-2 py-0.5 rounded text-[10px] font-medium status-blue">
               {ruleCountByType.validate} validate
             </span>
           )}
           {ruleCountByType.mutate > 0 && (
-            <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-purple-500/20 text-purple-400">
+            <span className="px-2 py-0.5 rounded text-[10px] font-medium status-purple">
               {ruleCountByType.mutate} mutate
             </span>
           )}
           {ruleCountByType.generate > 0 && (
-            <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-green-500/20 text-green-400">
+            <span className="px-2 py-0.5 rounded text-[10px] font-medium status-green">
               {ruleCountByType.generate} generate
             </span>
           )}
           {ruleCountByType.verifyImages > 0 && (
-            <span className="px-2 py-0.5 rounded text-[10px] font-medium bg-orange-500/20 text-orange-400">
+            <span className="px-2 py-0.5 rounded text-[10px] font-medium status-orange">
               {ruleCountByType.verifyImages} verifyImages
             </span>
           )}

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

@@ -43,8 +43,8 @@ export function NetworkPolicyRenderer({ data, staged = false }: NetworkPolicyRen
                   className={clsx(
                     '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'
+                      ? 'status-blue'
+                      : 'status-purple'
                   )}
                 >
                   {type}

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

@@ -301,9 +301,9 @@ export function NodeRenderer({ data, relationships, onViewPods, metrics, metrics
               <div key={`${taint.key}-${taint.effect}-${i}`} className="text-sm">
                 <span className={clsx(
                   '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'
+                  taint.effect === 'NoSchedule' ? 'status-amber' :
+                  taint.effect === 'NoExecute' ? 'status-red' :
+                  'status-blue'
                 )}>
                   {taint.key}{taint.value ? `=${taint.value}` : ''}:{taint.effect}
                 </span>

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

@@ -6,17 +6,17 @@ import { BADGE_INACTIVE } from '../../../utils/badge-colors'
 function getOrderStateBadge(state: string): { color: string; text: string } {
   switch (state?.toLowerCase()) {
     case 'valid':
-      return { text: 'Valid', color: 'bg-green-500/20 text-green-400' }
+      return { text: 'Valid', color: 'status-green' }
     case 'ready':
-      return { text: 'Ready', color: 'bg-blue-500/20 text-blue-400' }
+      return { text: 'Ready', color: 'status-blue' }
     case 'pending':
-      return { text: 'Pending', color: 'bg-yellow-500/20 text-yellow-400' }
+      return { text: 'Pending', color: 'status-amber' }
     case 'invalid':
-      return { text: 'Invalid', color: 'bg-red-500/20 text-red-400' }
+      return { text: 'Invalid', color: 'status-red' }
     case 'expired':
-      return { text: 'Expired', color: 'bg-red-500/20 text-red-400' }
+      return { text: 'Expired', color: 'status-red' }
     case 'errored':
-      return { text: 'Errored', color: 'bg-red-500/20 text-red-400' }
+      return { text: 'Errored', color: 'status-red' }
     default:
       return { text: state || 'Unknown', color: BADGE_INACTIVE }
   }

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

@@ -99,7 +99,7 @@ export function RoleRenderer({ data, rbacRoleData, rbacRoleLoading, rbacRoleErro
                     {rule.resources.map((resource: string) => (
                       <span
                         key={resource}
-                        className="badge bg-purple-500/20 text-purple-400"
+                        className="badge status-purple"
                       >
                         {resource}
                       </span>
@@ -133,7 +133,7 @@ export function RoleRenderer({ data, rbacRoleData, rbacRoleLoading, rbacRoleErro
                     {rule.resourceNames.map((name: string) => (
                       <span
                         key={name}
-                        className="badge bg-cyan-500/20 text-cyan-400"
+                        className="badge status-cyan"
                       >
                         {name}
                       </span>
@@ -150,7 +150,7 @@ export function RoleRenderer({ data, rbacRoleData, rbacRoleLoading, rbacRoleErro
                     {rule.nonResourceURLs.map((url: string) => (
                       <span
                         key={url}
-                        className="badge bg-orange-500/20 text-orange-400"
+                        className="badge status-orange"
                       >
                         {url}
                       </span>

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

@@ -609,8 +609,8 @@ export function RolloutRenderer({ data, onNavigate, capabilities, onAction, pend
                   <span
                     className={clsx(
                       'w-5 h-5 rounded-full flex items-center justify-center text-xs shrink-0',
-                      isCompleted && 'bg-green-500/20 text-green-400',
-                      isCurrent && 'bg-blue-500/20 text-blue-400',
+                      isCompleted && 'status-green',
+                      isCurrent && 'status-blue',
                       isPending && BADGE_INACTIVE
                     )}
                   >

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

@@ -58,10 +58,10 @@ export function SealedSecretRenderer({ data, onNavigate }: SealedSecretRendererP
               <span className={clsx(
                 'badge',
                 isSynced
-                  ? 'bg-green-500/20 text-green-400'
+                  ? 'status-green'
                   : isNotSynced
-                    ? 'bg-red-500/20 text-red-400'
-                    : 'bg-yellow-500/20 text-yellow-400'
+                    ? 'status-red'
+                    : 'status-amber'
               )}>
                 {isSynced ? 'Synced' : isNotSynced ? 'Not Synced' : 'Unknown'}
               </span>

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

@@ -12,14 +12,14 @@ import {
 // Provider-specific color for visual distinction
 function getProviderColor(providerKey: string): string {
   switch (providerKey) {
-    case 'aws': return 'bg-orange-500/15 text-orange-400 border-orange-500/30'
-    case 'azurekv': return 'bg-blue-500/15 text-blue-400 border-blue-500/30'
-    case 'gcpsm': return 'bg-blue-500/15 text-blue-400 border-blue-500/30'
-    case 'vault': return 'bg-purple-500/15 text-purple-400 border-purple-500/30'
-    case 'kubernetes': return 'bg-cyan-500/15 text-cyan-400 border-cyan-500/30'
-    case 'doppler': return 'bg-green-500/15 text-green-400 border-green-500/30'
-    case 'onepassword': return 'bg-blue-500/15 text-blue-400 border-blue-500/30'
-    case 'akeyless': return 'bg-indigo-500/15 text-indigo-400 border-indigo-500/30'
+    case 'aws': return 'status-orange'
+    case 'azurekv': return 'status-blue'
+    case 'gcpsm': return 'status-blue'
+    case 'vault': return 'status-purple'
+    case 'kubernetes': return 'status-cyan'
+    case 'doppler': return 'status-green'
+    case 'onepassword': return 'status-blue'
+    case 'akeyless': return 'status-purple'
     default: return 'bg-theme-elevated text-theme-text-secondary border-theme-border'
   }
 }

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

@@ -150,7 +150,7 @@ export function VPARenderer({ data, onNavigate }: VPARendererProps) {
                   {policy.mode && (
                     <span className={clsx(
                       'px-1.5 py-0.5 rounded text-[10px] font-medium',
-                      policy.mode === 'Off' ? 'bg-theme-hover text-theme-text-tertiary' : 'bg-blue-500/20 text-blue-400'
+                      policy.mode === 'Off' ? 'bg-theme-hover text-theme-text-tertiary' : 'status-blue'
                     )}>
                       {policy.mode}
                     </span>

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

@@ -151,7 +151,7 @@ export function VulnerabilityReportRenderer({ data }: VulnerabilityReportRendere
               <span className="flex items-center gap-1.5">
                 {osDisplay}
                 {os.eosl && (
-                  <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-500/20 text-amber-400">
+                  <span className="px-1.5 py-0.5 rounded text-[10px] font-medium status-amber">
                     End of Service Life
                   </span>
                 )}

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

@@ -8,17 +8,17 @@ interface WebhookConfigRendererProps {
 }
 
 function getOperationColor(op: string): string {
-  if (op === 'CREATE') return 'bg-green-500/20 text-green-400'
-  if (op === 'UPDATE') return 'bg-yellow-500/20 text-yellow-400'
-  if (op === 'DELETE') return 'bg-red-500/20 text-red-400'
-  if (op === '*') return 'bg-red-500/20 text-red-400'
-  if (op === 'CONNECT') return 'bg-blue-500/20 text-blue-400'
+  if (op === 'CREATE') return 'status-green'
+  if (op === 'UPDATE') return 'status-amber'
+  if (op === 'DELETE') return 'status-red'
+  if (op === '*') return 'status-red'
+  if (op === 'CONNECT') return 'status-blue'
   return 'bg-theme-elevated text-theme-text-secondary'
 }
 
 function getSideEffectsColor(se: string): string {
-  if (se === 'None' || se === 'NoneOnDryRun') return 'bg-green-500/20 text-green-400'
-  return 'bg-amber-500/20 text-amber-400'
+  if (se === 'None' || se === 'NoneOnDryRun') return 'status-green'
+  return 'status-amber'
 }
 
 export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendererProps) {
@@ -75,7 +75,7 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
 
                 {/* Policy badges */}
                 <div className="flex flex-wrap gap-1.5 mt-2">
-                  <span className={clsx('badge-sm', wh.failurePolicy === 'Fail' ? 'bg-red-500/20 text-red-400' : 'bg-theme-elevated text-theme-text-secondary')}>
+                  <span className={clsx('badge-sm', wh.failurePolicy === 'Fail' ? 'status-red' : 'bg-theme-elevated text-theme-text-secondary')}>
                     {wh.failurePolicy || 'Fail'}
                   </span>
                   {wh.sideEffects && (
@@ -108,7 +108,7 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
                         ))}
                         <span className="text-theme-text-tertiary">on</span>
                         {(rule.resources || []).map((r: string) => (
-                          <span key={r} className="px-1.5 py-0.5 rounded bg-purple-500/20 text-purple-400">{r}</span>
+                          <span key={r} className="px-1.5 py-0.5 rounded status-purple">{r}</span>
                         ))}
                         {(rule.apiGroups || []).map((g: string) => (
                           <span key={g} className="px-1.5 py-0.5 rounded bg-theme-elevated text-theme-text-secondary">{g === '' ? 'core' : g}</span>

package/src/components/resources/renderers/badge-no-handrolled.test.tsx

@@ -20,18 +20,12 @@ const CHIP_RE =
 // Renderer files that still contain hand-rolled chips, pending migration.
 // Ratchet: this list only shrinks. Do not add to it.
 const BASELINE = new Set<string>([
-  'AlertRenderer.tsx', 'ArgoApplicationRenderer.tsx', 'CertificateRenderer.tsx',
-  'CertificateRequestRenderer.tsx', 'ChallengeRenderer.tsx', 'CiliumNetworkPolicyRenderer.tsx',
-  'ClusterExternalSecretRenderer.tsx', 'ClusterIssuerRenderer.tsx', 'ClusterNetworkPolicyRenderer.tsx',
-  'cnpg-cells.tsx', 'CNPGClusterRenderer.tsx', 'GatewayRenderer.tsx',
-  'GenericRenderer.tsx', 'IngressClassRenderer.tsx', 'IstioPeerAuthenticationRenderer.tsx',
-  'IstioServiceEntryRenderer.tsx', 'KarpenterNodeClaimRenderer.tsx', 'knative-cells.tsx',
-  'KnativeEventingRenderer.tsx', 'KnativeRevisionRenderer.tsx', 'kyverno-cells.tsx',
-  'KyvernoPolicyReportRenderer.tsx', 'NetworkPolicyRenderer.tsx', 'NodeRenderer.tsx',
-  'OrderRenderer.tsx', 'PodRenderer.tsx', 'RoleRenderer.tsx', 'RolloutRenderer.tsx',
-  'SealedSecretRenderer.tsx', 'SecretRenderer.tsx', 'SecretStoreRenderer.tsx',
-  'VeleroBackupRenderer.tsx', 'VeleroRestoreRenderer.tsx', 'VeleroScheduleRenderer.tsx',
-  'VPARenderer.tsx', 'VulnerabilityReportRenderer.tsx', 'WebhookConfigRenderer.tsx',
+  'ClusterExternalSecretRenderer.tsx',
+  'PodRenderer.tsx',
+  'SecretRenderer.tsx',
+  'VeleroBackupRenderer.tsx',
+  'VeleroRestoreRenderer.tsx',
+  'VeleroScheduleRenderer.tsx',
 ])
 
 const dir = fileURLToPath(new URL('.', import.meta.url))