@skyhook-io/k8s-ui 1.2.3 → 1.3.0

package/src/components/resources/renderers/certmanager-cells.tsx

@@ -28,7 +28,7 @@ export function CertificateCell({ resource, column }: { resource: any; column: s
     case 'status': {
       const status = getCertificateStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -69,7 +69,7 @@ export function CertificateRequestCell({ resource, column }: { resource: any; co
     case 'status': {
       const status = getCertificateRequestStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -88,7 +88,7 @@ export function ClusterIssuerCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getClusterIssuerStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -105,7 +105,7 @@ export function IssuerCell({ resource, column }: { resource: any; column: string
     case 'status': {
       const status = getIssuerStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center 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 OrderCell({ resource, column }: { resource: any; column: string
     case 'state': {
       const state = getOrderState(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', state.color)}>
+        <span className={clsx('badge', state.color)}>
           {state.text}
         </span>
       )
@@ -147,7 +147,7 @@ export function ChallengeCell({ resource, column }: { resource: any; column: str
     case 'state': {
       const state = getChallengeState(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', state.color)}>
+        <span className={clsx('badge', state.color)}>
           {state.text}
         </span>
       )

package/src/components/resources/renderers/cnpg-cells.tsx

@@ -28,7 +28,7 @@ export function CNPGClusterCell({ resource, column }: { resource: any; column: s
     case 'status': {
       const status = getCNPGClusterStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center 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 CNPGBackupCell({ resource, column }: { resource: any; column: st
     case 'status': {
       const status = getCNPGBackupStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -92,7 +92,7 @@ export function CNPGScheduledBackupCell({ resource, column }: { resource: any; c
     case 'status': {
       const status = getCNPGScheduledBackupStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -127,7 +127,7 @@ export function CNPGPoolerCell({ resource, column }: { resource: any; column: st
     case 'status': {
       const status = getCNPGPoolerStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -140,7 +140,7 @@ export function CNPGPoolerCell({ resource, column }: { resource: any; column: st
       const type = getCNPGPoolerType(resource)
       return (
         <span className={clsx(
-          'inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium',
+          'badge-sm',
           type === 'rw' ? 'bg-blue-500/20 text-blue-400' : 'bg-purple-500/20 text-purple-400'
         )}>
           {type}

package/src/components/resources/renderers/eso-cells.tsx

@@ -20,7 +20,7 @@ export function ExternalSecretCell({ resource, column }: { resource: any; column
     case 'status': {
       const status = getExternalSecretStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -55,7 +55,7 @@ export function ClusterExternalSecretCell({ resource, column }: { resource: any;
     case 'status': {
       const status = getClusterExternalSecretStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -81,7 +81,7 @@ export function SecretStoreCell({ resource, column }: { resource: any; column: s
     case 'status': {
       const status = getSecretStoreStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center 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 ClusterSecretStoreCell({ resource, column }: { resource: any; co
     case 'status': {
       const status = getClusterSecretStoreStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center 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/flux-cells.tsx

@@ -45,7 +45,7 @@ export function GitRepositoryCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getGitRepositoryStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -78,7 +78,7 @@ export function OCIRepositoryCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getOCIRepositoryStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -111,7 +111,7 @@ export function HelmRepositoryCell({ resource, column }: { resource: any; column
     case 'status': {
       const status = getHelmRepositoryStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -138,7 +138,7 @@ export function KustomizationCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getKustomizationStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -197,7 +197,7 @@ export function FluxHelmReleaseCell({ resource, column }: { resource: any; colum
     case 'status': {
       const status = getFluxHelmReleaseStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -242,7 +242,7 @@ export function FluxAlertCell({ resource, column }: { resource: any; column: str
     case 'status': {
       const status = getFluxAlertStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center 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/istio-cells.tsx

@@ -43,7 +43,7 @@ export function VirtualServiceCell({ resource, column }: { resource: any; column
     case 'status': {
       const status = getVirtualServiceStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -70,7 +70,7 @@ export function DestinationRuleCell({ resource, column }: { resource: any; colum
     case 'status': {
       const status = getDestinationRuleStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -97,7 +97,7 @@ export function IstioGatewayCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getIstioGatewayStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -120,7 +120,7 @@ export function ServiceEntryCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getServiceEntryStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -133,7 +133,7 @@ export function ServiceEntryCell({ resource, column }: { resource: any; column:
       const location = getServiceEntryLocation(resource)
       return (
         <span className={clsx(
-          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+          'badge',
           location === 'MESH_EXTERNAL' ? 'bg-orange-500/20 text-orange-400' : 'bg-blue-500/20 text-blue-400'
         )}>
           {location === 'MESH_EXTERNAL' ? 'External' : 'Internal'}
@@ -154,7 +154,7 @@ export function PeerAuthenticationCell({ resource, column }: { resource: any; co
     case 'status': {
       const status = getPeerAuthenticationStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -163,7 +163,7 @@ export function PeerAuthenticationCell({ resource, column }: { resource: any; co
       const mode = getPeerAuthenticationMode(resource)
       return (
         <span className={clsx(
-          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+          'badge',
           modeColors[mode] || 'bg-gray-500/20 text-gray-400'
         )}>
           {mode}
@@ -184,7 +184,7 @@ export function AuthorizationPolicyCell({ resource, column }: { resource: any; c
     case 'status': {
       const status = getAuthorizationPolicyStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -193,7 +193,7 @@ export function AuthorizationPolicyCell({ resource, column }: { resource: any; c
       const action = getAuthorizationPolicyAction(resource)
       return (
         <span className={clsx(
-          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+          'badge',
           actionColors[action] || 'bg-gray-500/20 text-gray-400'
         )}>
           {action}

package/src/components/resources/renderers/karpenter-cells.tsx

@@ -22,7 +22,7 @@ export function NodePoolCell({ resource, column }: { resource: any; column: stri
     case 'status': {
       const status = getNodePoolStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -53,7 +53,7 @@ export function NodeClaimCell({ resource, column }: { resource: any; column: str
     case 'status': {
       const status = getNodeClaimStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -80,7 +80,7 @@ export function EC2NodeClassCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getEC2NodeClassStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center 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/keda-cells.tsx

@@ -20,7 +20,7 @@ export function ScaledObjectCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getScaledObjectStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -47,7 +47,7 @@ export function ScaledJobCell({ resource, column }: { resource: any; column: str
     case 'status': {
       const status = getScaledJobStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center 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/knative-cells.tsx

@@ -32,7 +32,7 @@ import {
 function StatusCell({ resource, getStatus }: { resource: any; getStatus: (r: any) => { text: string; color: string } }) {
   const status = getStatus(resource)
   return (
-    <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+    <span className={clsx('badge', status.color)}>
       {status.text}
     </span>
   )
@@ -383,7 +383,7 @@ export function ServerlessServiceCell({ resource, column }: { resource: any; col
       const mode = getServerlessServiceMode(resource)
       return (
         <span className={clsx(
-          'inline-flex items-center 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}

package/src/components/resources/renderers/kyverno-cells.tsx

@@ -14,7 +14,7 @@ export function PolicyReportCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getPolicyReportStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -54,7 +54,7 @@ export function KyvernoPolicyCell({ resource, column }: { resource: any; column:
     case 'status': {
       const status = getKyvernoPolicyStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -63,7 +63,7 @@ export function KyvernoPolicyCell({ resource, column }: { resource: any; column:
       const action = getKyvernoPolicyAction(resource)
       return (
         <span className={clsx(
-          'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium',
+          'badge',
           action === 'Enforce' ? 'bg-red-500/20 text-red-400' : 'bg-yellow-500/20 text-yellow-400',
         )}>
           {action}

package/src/components/resources/renderers/prometheus-cells.tsx

@@ -19,7 +19,7 @@ export function ServiceMonitorCell({ resource, column }: { resource: any; column
     case 'status': {
       const status = getServiceMonitorStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -40,7 +40,7 @@ export function PrometheusRuleCell({ resource, column }: { resource: any; column
     case 'status': {
       const status = getPrometheusRuleStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -59,7 +59,7 @@ export function PodMonitorCell({ resource, column }: { resource: any; column: st
     case 'status': {
       const status = getPodMonitorStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center 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/trivy-cells.tsx

@@ -60,7 +60,7 @@ export function ConfigAuditReportCell({ resource, column }: { resource: any; col
     case 'status': {
       const status = getConfigAuditReportStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -96,7 +96,7 @@ export function RbacAssessmentReportCell({ resource, column }: { resource: any;
     case 'status': {
       const status = getRbacAssessmentReportStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -113,7 +113,7 @@ export function ClusterComplianceReportCell({ resource, column }: { resource: an
     case 'status': {
       const status = getClusterComplianceReportStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -142,7 +142,7 @@ export function SbomReportCell({ resource, column }: { resource: any; column: st
     case 'status': {
       const status = getSbomReportStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center 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/velero-cells.tsx

@@ -30,7 +30,7 @@ export function BackupCell({ resource, column }: { resource: any; column: string
     case 'status': {
       const status = getBackupStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -76,7 +76,7 @@ export function RestoreCell({ resource, column }: { resource: any; column: strin
     case 'status': {
       const status = getRestoreStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -110,7 +110,7 @@ export function ScheduleCell({ resource, column }: { resource: any; column: stri
     case 'status': {
       const status = getScheduleStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )
@@ -137,7 +137,7 @@ export function BackupStorageLocationCell({ resource, column }: { resource: any;
     case 'status': {
       const status = getBSLStatus(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', status.color)}>
+        <span className={clsx('badge', status.color)}>
           {status.text}
         </span>
       )

package/src/components/shared/EditableYamlView.tsx

@@ -184,7 +184,7 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
             <button
               onClick={handleSaveEdit}
               disabled={isPending || yamlErrors.length > 0}
-              className="flex items-center gap-1 px-3 py-1.5 text-xs text-white bg-blue-600 hover:bg-blue-700 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+              className="flex items-center gap-1 px-3 py-1.5 text-xs btn-brand rounded disabled:cursor-not-allowed"
             >
               {isPending ? (
                 <RefreshCw className="w-3.5 h-3.5 animate-spin" />

package/src/components/shared/ResourceActionsBar.tsx

@@ -204,7 +204,7 @@ export function ResourceActionsBar({
           {isRunning && canExec && onOpenTerminal && (
             <button
               onClick={handleOpenTerminal}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
             >
               <Terminal className="w-3.5 h-3.5" />
               Terminal
@@ -218,7 +218,7 @@ export function ResourceActionsBar({
             >
               <button
                 onClick={() => handleOpenLogs(containers.length === 1 ? containers[0] : undefined)}
-                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-600 hover:bg-slate-500 rounded-lg transition-colors"
+                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
               >
                 <FileText className="w-3.5 h-3.5" />
                 Logs
@@ -260,7 +260,7 @@ export function ResourceActionsBar({
           {canExec && onOpenNodeTerminal && (
             <button
               onClick={() => onOpenNodeTerminal({ nodeName: resource.name })}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
             >
               <Terminal className="w-3.5 h-3.5" />
               Debug Shell
@@ -329,7 +329,7 @@ export function ResourceActionsBar({
                 name: resource.name,
               })}
               disabled={isRestarting}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-600 hover:bg-slate-500 rounded-lg transition-colors disabled:opacity-50"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
             >
               <RefreshCw className={`w-3.5 h-3.5 ${isRestarting ? 'animate-spin' : ''}`} />
               {isRestarting ? 'Restarting...' : 'Restart'}
@@ -358,7 +358,7 @@ export function ResourceActionsBar({
                 workloadKind: kind,
                 workloadName: resource.name,
               })}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-600 hover:bg-slate-500 rounded-lg transition-colors"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
             >
               <FileText className="w-3.5 h-3.5" />
               Logs
@@ -377,7 +377,7 @@ export function ResourceActionsBar({
                 name: resource.name,
               })}
               disabled={isTriggeringCronJob}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50"
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
             >
               <Play className={`w-3.5 h-3.5 ${isTriggeringCronJob ? 'animate-pulse' : ''}`} />
               {isTriggeringCronJob ? 'Triggering...' : 'Trigger'}
@@ -405,7 +405,7 @@ export function ResourceActionsBar({
                   name: resource.name,
                 })}
                 disabled={isSuspendingCronJob}
-                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-600 hover:bg-slate-500 rounded-lg transition-colors disabled:opacity-50"
+                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
               >
                 <Pause className="w-3.5 h-3.5" />
                 {isSuspendingCronJob ? 'Suspending...' : 'Suspend'}
@@ -455,7 +455,7 @@ export function ResourceActionsBar({
             'Logs command copied',
             e
           )}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-600 hover:bg-slate-500 rounded-lg transition-colors"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
         >
           <FileText className="w-3.5 h-3.5" />
           Logs
@@ -472,8 +472,8 @@ export function ResourceActionsBar({
           className={clsx(
             'flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors',
             showYaml
-              ? 'text-white bg-blue-600 hover:bg-blue-700'
-              : 'text-theme-text-secondary hover:text-theme-text-primary border border-theme-border hover:bg-theme-elevated'
+              ? 'btn-brand'
+              : 'text-theme-text-secondary hover:text-theme-text-primary border border-theme-border-light hover:bg-theme-elevated'
           )}
           title="Toggle YAML view"
         >
@@ -596,7 +596,7 @@ function FluxActions({ resource, data, onReconcile, isReconciling, onSyncWithSou
             name: resource.name,
           })}
           disabled={isReconciling || isSuspended}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
           title={isSuspended ? 'Cannot reconcile while suspended' : 'Trigger reconciliation'}
         >
           <RefreshCw className={`w-3.5 h-3.5 ${isReconciling ? 'animate-spin' : ''}`} />
@@ -644,7 +644,7 @@ function FluxActions({ resource, data, onReconcile, isReconciling, onSyncWithSou
               name: resource.name,
             })}
             disabled={isSuspending}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-600 hover:bg-slate-500 rounded-lg transition-colors disabled:opacity-50"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
           >
             <Pause className="w-3.5 h-3.5" />
             {isSuspending ? 'Suspending...' : 'Suspend'}
@@ -677,7 +677,7 @@ function ArgoActions({ resource, data, onSync, isSyncing, onRefresh, isRefreshin
             name: resource.name,
           })}
           disabled={isSyncing}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand rounded-lg"
           title="Sync application"
         >
           <RefreshCw className={`w-3.5 h-3.5 ${isSyncing ? 'animate-spin' : ''}`} />
@@ -693,7 +693,7 @@ function ArgoActions({ resource, data, onSync, isSyncing, onRefresh, isRefreshin
             hard: false,
           })}
           disabled={isRefreshing}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-600 hover:bg-slate-500 rounded-lg transition-colors disabled:opacity-50"
+          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
           title="Refresh (re-read from git)"
         >
           <RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''}`} />
@@ -709,7 +709,7 @@ function ArgoActions({ resource, data, onSync, isSyncing, onRefresh, isRefreshin
               name: resource.name,
             })}
             disabled={isSuspending}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-600 hover:bg-slate-500 rounded-lg transition-colors disabled:opacity-50"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium btn-brand-muted rounded-lg"
           >
             <Pause className="w-3.5 h-3.5" />
             {isSuspending ? 'Suspending...' : 'Suspend'}
@@ -808,7 +808,7 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
           <History className="w-5 h-5 text-amber-500" />
           <h3 className="text-lg font-semibold text-theme-text-primary">Revision History</h3>
           {diffRevision && currentRevision && (
-            <span className="flex items-center gap-1 ml-2 px-2 py-0.5 text-xs bg-blue-500/15 text-blue-400 rounded">
+            <span className="badge ml-2 bg-blue-500/15 text-blue-400">
               <GitCompare className="w-3 h-3" />
               #{currentRevision.number} vs #{diffRevision}
             </span>
@@ -889,7 +889,7 @@ export function RevisionHistoryDialog({ kind, namespace, name, open, onClose, re
                           </button>
                         )}
                         {rev.isCurrent ? (
-                          <span className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-green-500/20 text-green-400 rounded">
+                          <span className="badge status-healthy">
                             Current
                           </span>
                         ) : confirmRevision === rev.number ? (