@skyhook-io/k8s-ui 1.2.4 → 1.3.0

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

@@ -64,7 +64,7 @@ export function RoleRenderer({ data }: RoleRendererProps) {
       <Section title={`Rules (${rules.length})`} icon={Shield} 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">
               {/* API Groups */}
               {rule.apiGroups && rule.apiGroups.length > 0 && (
                 <div className="mb-2">
@@ -73,7 +73,7 @@ export function RoleRenderer({ data }: RoleRendererProps) {
                     {rule.apiGroups.map((group: string, gi: number) => (
                       <span
                         key={gi}
-                        className="px-2 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary"
+                        className="badge bg-theme-elevated text-theme-text-secondary"
                       >
                         {group === '' ? 'core' : group}
                       </span>
@@ -90,7 +90,7 @@ export function RoleRenderer({ data }: RoleRendererProps) {
                     {rule.resources.map((resource: string) => (
                       <span
                         key={resource}
-                        className="px-2 py-0.5 rounded text-xs bg-purple-500/20 text-purple-400"
+                        className="badge bg-purple-500/20 text-purple-400"
                       >
                         {resource}
                       </span>
@@ -108,7 +108,7 @@ export function RoleRenderer({ data }: RoleRendererProps) {
                       <span
                         key={verb}
                         className={clsx(
-                          'px-2 py-0.5 rounded text-xs',
+                          'badge',
                           getVerbColor(verb)
                         )}
                       >
@@ -127,7 +127,7 @@ export function RoleRenderer({ data }: RoleRendererProps) {
                     {rule.resourceNames.map((name: string) => (
                       <span
                         key={name}
-                        className="px-2 py-0.5 rounded text-xs bg-cyan-500/20 text-cyan-400"
+                        className="badge bg-cyan-500/20 text-cyan-400"
                       >
                         {name}
                       </span>
@@ -144,7 +144,7 @@ export function RoleRenderer({ data }: RoleRendererProps) {
                     {rule.nonResourceURLs.map((url: string) => (
                       <span
                         key={url}
-                        className="px-2 py-0.5 rounded text-xs bg-orange-500/20 text-orange-400"
+                        className="badge bg-orange-500/20 text-orange-400"
                       >
                         {url}
                       </span>
@@ -166,14 +166,14 @@ export function RoleRenderer({ data }: RoleRendererProps) {
         <Section title="Aggregation Rule" defaultExpanded>
           <div className="space-y-3">
             {aggregationRule.clusterRoleSelectors.map((selector: any, i: number) => (
-              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+              <div key={i} className="card-inner-lg">
                 <div className="text-xs text-theme-text-tertiary mb-1">Match Labels</div>
                 {selector.matchLabels && Object.keys(selector.matchLabels).length > 0 ? (
                   <div className="flex flex-wrap gap-1">
                     {Object.entries(selector.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>

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

@@ -102,7 +102,7 @@ export function RolloutRenderer({ data }: RolloutRendererProps) {
           <Property
             label="Phase"
             value={
-              <span className={clsx('px-2 py-0.5 rounded text-xs font-medium', phaseColor)}>
+              <span className={clsx('badge', phaseColor)}>
                 {phase}
               </span>
             }

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

@@ -42,7 +42,7 @@ export function RuntimeClassRenderer({ data }: RuntimeClassRendererProps) {
                   {Object.entries(nodeSelector).map(([key, value]) => (
                     <span
                       key={key}
-                      className="px-2 py-0.5 rounded text-xs bg-blue-500/20 text-blue-400"
+                      className="badge status-neutral"
                     >
                       {key}={value as string}
                     </span>
@@ -59,7 +59,7 @@ export function RuntimeClassRenderer({ data }: RuntimeClassRendererProps) {
                     const effect = t.effect ? `: ${t.effect}` : ''
                     const seconds = t.tolerationSeconds != null ? ` (${t.tolerationSeconds}s)` : ''
                     return (
-                      <div key={i} className="bg-theme-elevated/30 rounded p-2 text-xs text-theme-text-secondary">
+                      <div key={i} className="card-inner text-xs text-theme-text-secondary">
                         {parts}{effect}{seconds}
                       </div>
                     )

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

@@ -54,7 +54,7 @@ export function SealedSecretRenderer({ data }: SealedSecretRendererProps) {
             label="Synced"
             value={
               <span className={clsx(
-                'px-2 py-0.5 rounded text-xs font-medium',
+                'badge',
                 isSynced
                   ? 'bg-green-500/20 text-green-400'
                   : isNotSynced
@@ -78,7 +78,7 @@ export function SealedSecretRenderer({ data }: SealedSecretRendererProps) {
             {encryptedKeys.map((key) => (
               <span
                 key={key}
-                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"
               >
                 {key}
               </span>

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

@@ -161,7 +161,7 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
             const canEdit = onSaveSecretValue && !isImmutable && !isBinary
 
             return (
-              <div key={key} className="bg-theme-elevated/30 rounded p-2">
+              <div key={key} className="card-inner">
                 <div className="flex items-center justify-between gap-2">
                   <span className="text-sm text-theme-text-primary truncate">{key}</span>
                   <div className="flex items-center gap-1 shrink-0">
@@ -211,7 +211,7 @@ export function SecretRenderer({ data, certificateInfo, resourceData, onSaveSecr
                       <button
                         onClick={() => setShowSaveConfirm(true)}
                         disabled={isSaving}
-                        className="flex items-center gap-1 px-2.5 py-1 text-xs text-white bg-blue-600 hover:bg-blue-700 rounded transition-colors disabled:opacity-50"
+                        className="flex items-center gap-1 px-2.5 py-1 text-xs btn-brand rounded"
                       >
                         {isSaving ? (
                           <RefreshCw className="w-3 h-3 animate-spin" />
@@ -285,7 +285,7 @@ function CertificateInfoSection({ cert, index, total }: { cert: CertificateInfo;
           <Property label="SANs" value={
             <div className="flex flex-wrap gap-1">
               {cert.sans.map(san => (
-                <span key={san} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+                <span key={san} className="badge bg-theme-elevated text-theme-text-secondary">
                   {san}
                 </span>
               ))}

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

@@ -68,7 +68,7 @@ export function ServiceAccountRenderer({ data }: ServiceAccountRendererProps) {
             {imagePullSecrets.map((secret: any) => (
               <span
                 key={secret.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"
               >
                 {secret.name}
               </span>

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

@@ -30,19 +30,19 @@ export function ServiceMonitorRenderer({ data }: ServiceMonitorRendererProps) {
         <Section title={`Scrape 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/ServiceRenderer.tsx

@@ -67,7 +67,7 @@ export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: Serv
       <Section title="Ports" defaultExpanded>
         <div className="space-y-2">
           {ports.map((port: any, i: number) => (
-            <div key={`${port.port}-${port.protocol || 'TCP'}`} className="bg-theme-elevated/30 rounded p-2 text-sm">
+            <div key={`${port.port}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
               <div className="flex items-center justify-between">
                 <span className="text-theme-text-primary font-medium">{port.name || `port-${i + 1}`}</span>
                 <div className="flex items-center gap-2">

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

@@ -81,7 +81,7 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
                 hostnames.length > 0 ? (
                   <div className="flex flex-wrap gap-1">
                     {hostnames.map((h: string) => (
-                      <span key={h} className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">{h}</span>
+                      <span key={h} className="badge bg-theme-elevated text-theme-text-secondary">{h}</span>
                     ))}
                   </div>
                 ) : (
@@ -113,7 +113,7 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
             const totalWeight = hasWeights ? backendRefs.reduce((sum: number, b: any) => sum + (b.weight ?? 1), 0) : 0
 
             return (
-              <div key={ruleIdx} className="bg-theme-elevated/30 rounded p-2.5">
+              <div key={ruleIdx} className="card-inner">
                 {rules.length > 1 && (
                   <div className="text-xs font-medium text-theme-text-tertiary mb-1.5">
                     Rule {ruleIdx + 1}
@@ -156,7 +156,7 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
               const resolved = conditions.find((c: any) => c.type === 'ResolvedRefs')
 
               return (
-                <div key={`${ref.namespace || ''}-${ref.name}-${idx}`} className="bg-theme-elevated/30 rounded p-2.5">
+                <div key={`${ref.namespace || ''}-${ref.name}-${idx}`} className="card-inner">
                   <div className="text-sm font-medium text-theme-text-primary mb-1.5">
                     {ref.namespace ? `${ref.namespace}/` : ''}{ref.name || 'unknown'}
                     {ref.sectionName ? ` (${ref.sectionName})` : ''}
@@ -164,7 +164,7 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
                   <div className="flex flex-wrap gap-2">
                     {accepted && (
                       <span className={clsx(
-                        'px-2 py-0.5 rounded text-xs font-medium',
+                        'badge',
                         accepted.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
                       )}>
                         {accepted.status === 'True' ? 'Accepted' : 'Not Accepted'}
@@ -172,7 +172,7 @@ export function SimpleRouteRenderer({ data, kind, onNavigate }: SimpleRouteRende
                     )}
                     {resolved && (
                       <span className={clsx(
-                        'px-2 py-0.5 rounded text-xs font-medium',
+                        'badge',
                         resolved.status === 'True' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
                       )}>
                         {resolved.status === 'True' ? 'Refs Resolved' : 'Unresolved Refs'}

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

@@ -69,7 +69,7 @@ export function StorageClassRenderer({ data }: StorageClassRendererProps) {
             {mountOptions.map((option: string) => (
               <span
                 key={option}
-                className="px-2 py-0.5 rounded text-xs bg-blue-500/20 text-blue-400"
+                className="badge status-neutral"
               >
                 {option}
               </span>

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

@@ -77,7 +77,7 @@ export function TraefikIngressRouteRenderer({ data, onNavigate }: TraefikIngress
             const middlewares = route.middlewares || []
 
             return (
-              <div key={i} className="bg-theme-elevated/30 rounded p-3">
+              <div key={i} className="card-inner-lg">
                 {/* Match expression */}
                 <div className="flex items-start gap-2 mb-2">
                   <span className="text-sm font-medium text-theme-text-primary break-all">

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

@@ -96,7 +96,7 @@ export function VPARenderer({ data, onNavigate }: VPARendererProps) {
         <Section title="Recommendations" defaultExpanded>
           <div className="space-y-3">
             {recommendations.map((rec: any) => (
-              <div key={rec.containerName} className="bg-theme-elevated/30 rounded-lg p-3">
+              <div key={rec.containerName} className="card-inner-lg">
                 <div className="text-sm font-medium text-theme-text-primary mb-2">{rec.containerName}</div>
                 <div className="overflow-x-auto">
                   <table className="w-full text-xs">
@@ -144,7 +144,7 @@ export function VPARenderer({ data, onNavigate }: VPARendererProps) {
         <Section title="Resource Policy" defaultExpanded>
           <div className="space-y-3">
             {containerPolicies.map((policy: any, i: number) => (
-              <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-2">
                   <span className="text-sm font-medium text-theme-text-primary">{policy.containerName || '*'}</span>
                   {policy.mode && (

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

@@ -29,7 +29,7 @@ export function VeleroBSLRenderer({ data }: VeleroBSLRendererProps) {
       <Section title="Status" icon={Clock} defaultExpanded>
         <PropertyList>
           <Property label="Phase" value={
-            <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', bslStatus.color)}>
+            <span className={clsx('badge', bslStatus.color)}>
               {bslStatus.text}
             </span>
           } />
@@ -58,7 +58,7 @@ export function VeleroBSLRenderer({ data }: VeleroBSLRendererProps) {
             <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Config</div>
             <div className="flex flex-wrap gap-1">
               {Object.entries(config).map(([k, v]) => (
-                <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                <span key={k} className="badge-sm bg-theme-hover text-theme-text-secondary">
                   {k}: {String(v)}
                 </span>
               ))}

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

@@ -72,7 +72,7 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
       <Section title="Status" icon={Archive} defaultExpanded>
         <PropertyList>
           <Property label="Phase" value={
-            <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', backupStatus.color)}>
+            <span className={clsx('badge', backupStatus.color)}>
               {backupStatus.text}
             </span>
           } />
@@ -116,7 +116,7 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
               <Property label="Included Namespaces" value={
                 <div className="flex flex-wrap gap-1">
                   {includedNamespaces.map((ns: string) => (
-                    <span key={ns} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{ns}</span>
+                    <span key={ns} className="badge-sm bg-theme-hover text-theme-text-secondary">{ns}</span>
                   ))}
                 </div>
               } />
@@ -128,7 +128,7 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
               <Property label="Excluded Namespaces" value={
                 <div className="flex flex-wrap gap-1">
                   {excludedNamespaces.map((ns: string) => (
-                    <span key={ns} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{ns}</span>
+                    <span key={ns} className="badge-sm bg-red-500/10 text-red-400">{ns}</span>
                   ))}
                 </div>
               } />
@@ -137,7 +137,7 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
               <Property label="Included Resources" value={
                 <div className="flex flex-wrap gap-1">
                   {includedResources.map((r: string) => (
-                    <span key={r} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{r}</span>
+                    <span key={r} className="badge-sm bg-theme-hover text-theme-text-secondary">{r}</span>
                   ))}
                 </div>
               } />
@@ -146,7 +146,7 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
               <Property label="Excluded Resources" value={
                 <div className="flex flex-wrap gap-1">
                   {excludedResources.map((r: string) => (
-                    <span key={r} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{r}</span>
+                    <span key={r} className="badge-sm bg-red-500/10 text-red-400">{r}</span>
                   ))}
                 </div>
               } />
@@ -170,7 +170,7 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
             <Property label="Volume Snapshot Locations" value={
               <div className="flex flex-wrap gap-1">
                 {vslLocations.map((loc: string) => (
-                  <span key={loc} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{loc}</span>
+                  <span key={loc} className="badge-sm bg-theme-hover text-theme-text-secondary">{loc}</span>
                 ))}
               </div>
             } />

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

@@ -64,7 +64,7 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
       <Section title="Status" icon={ArchiveRestore} defaultExpanded>
         <PropertyList>
           <Property label="Phase" value={
-            <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', restoreStatus.color)}>
+            <span className={clsx('badge', restoreStatus.color)}>
               {restoreStatus.text}
             </span>
           } />
@@ -108,7 +108,7 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
               <Property label="Included Namespaces" value={
                 <div className="flex flex-wrap gap-1">
                   {includedNamespaces.map((ns: string) => (
-                    <span key={ns} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{ns}</span>
+                    <span key={ns} className="badge-sm bg-theme-hover text-theme-text-secondary">{ns}</span>
                   ))}
                 </div>
               } />
@@ -120,7 +120,7 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
               <Property label="Excluded Namespaces" value={
                 <div className="flex flex-wrap gap-1">
                   {excludedNamespaces.map((ns: string) => (
-                    <span key={ns} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{ns}</span>
+                    <span key={ns} className="badge-sm bg-red-500/10 text-red-400">{ns}</span>
                   ))}
                 </div>
               } />
@@ -129,7 +129,7 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
               <Property label="Included Resources" value={
                 <div className="flex flex-wrap gap-1">
                   {includedResources.map((r: string) => (
-                    <span key={r} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{r}</span>
+                    <span key={r} className="badge-sm bg-theme-hover text-theme-text-secondary">{r}</span>
                   ))}
                 </div>
               } />
@@ -138,7 +138,7 @@ export function VeleroRestoreRenderer({ data }: VeleroRestoreRendererProps) {
               <Property label="Excluded Resources" value={
                 <div className="flex flex-wrap gap-1">
                   {excludedResources.map((r: string) => (
-                    <span key={r} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{r}</span>
+                    <span key={r} className="badge-sm bg-red-500/10 text-red-400">{r}</span>
                   ))}
                 </div>
               } />

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

@@ -49,7 +49,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
       <Section title="Schedule" icon={Clock} defaultExpanded>
         <PropertyList>
           <Property label="Status" value={
-            <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', scheduleStatus.color)}>
+            <span className={clsx('badge', scheduleStatus.color)}>
               {scheduleStatus.text}
             </span>
           } />
@@ -75,7 +75,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
             <Property label="Included Namespaces" value={
               <div className="flex flex-wrap gap-1">
                 {templateIncludedNs.map((ns: string) => (
-                  <span key={ns} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{ns}</span>
+                  <span key={ns} className="badge-sm bg-theme-hover text-theme-text-secondary">{ns}</span>
                 ))}
               </div>
             } />
@@ -87,7 +87,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
             <Property label="Excluded Namespaces" value={
               <div className="flex flex-wrap gap-1">
                 {templateExcludedNs.map((ns: string) => (
-                  <span key={ns} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{ns}</span>
+                  <span key={ns} className="badge-sm bg-red-500/10 text-red-400">{ns}</span>
                 ))}
               </div>
             } />
@@ -96,7 +96,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
             <Property label="Included Resources" value={
               <div className="flex flex-wrap gap-1">
                 {templateIncludedResources.map((r: string) => (
-                  <span key={r} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{r}</span>
+                  <span key={r} className="badge-sm bg-theme-hover text-theme-text-secondary">{r}</span>
                 ))}
               </div>
             } />
@@ -105,7 +105,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
             <Property label="Excluded Resources" value={
               <div className="flex flex-wrap gap-1">
                 {templateExcludedResources.map((r: string) => (
-                  <span key={r} className="px-1.5 py-0.5 bg-red-500/10 rounded text-xs text-red-400">{r}</span>
+                  <span key={r} className="badge-sm bg-red-500/10 text-red-400">{r}</span>
                 ))}
               </div>
             } />
@@ -120,7 +120,7 @@ export function VeleroScheduleRenderer({ data }: VeleroScheduleRendererProps) {
             <Property label="Volume Snapshot Locations" value={
               <div className="flex flex-wrap gap-1">
                 {template.volumeSnapshotLocations.map((loc: string) => (
-                  <span key={loc} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">{loc}</span>
+                  <span key={loc} className="badge-sm bg-theme-hover text-theme-text-secondary">{loc}</span>
                 ))}
               </div>
             } />

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

@@ -23,7 +23,7 @@ export function VeleroVSLRenderer({ data }: VeleroVSLRendererProps) {
             <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1">Config</div>
             <div className="flex flex-wrap gap-1">
               {Object.entries(config).map(([k, v]) => (
-                <span key={k} className="px-1.5 py-0.5 bg-theme-hover rounded text-xs text-theme-text-secondary">
+                <span key={k} className="badge-sm bg-theme-hover text-theme-text-secondary">
                   {k}: {String(v)}
                 </span>
               ))}

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

@@ -43,9 +43,9 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
             label="Failure Policy"
             value={
               hasFailPolicy ? (
-                <span className="px-1.5 py-0.5 rounded text-xs bg-red-500/20 text-red-400">Fail</span>
+                <span className="badge-sm status-unhealthy">Fail</span>
               ) : allIgnore ? (
-                <span className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">Ignore</span>
+                <span className="badge-sm bg-theme-elevated text-theme-text-secondary">Ignore</span>
               ) : (
                 'Mixed'
               )
@@ -69,30 +69,30 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
             const objLabels = wh.objectSelector?.matchLabels
 
             return (
-              <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">{wh.name}</div>
                 <div className="text-xs text-theme-text-secondary mt-0.5">{target}</div>
 
                 {/* Policy badges */}
                 <div className="flex flex-wrap gap-1.5 mt-2">
-                  <span className={clsx('px-1.5 py-0.5 rounded text-xs', 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' ? 'bg-red-500/20 text-red-400' : 'bg-theme-elevated text-theme-text-secondary')}>
                     {wh.failurePolicy || 'Fail'}
                   </span>
                   {wh.sideEffects && (
-                    <span className={clsx('px-1.5 py-0.5 rounded text-xs', getSideEffectsColor(wh.sideEffects))}>
+                    <span className={clsx('badge-sm', getSideEffectsColor(wh.sideEffects))}>
                       {wh.sideEffects}
                     </span>
                   )}
-                  <span className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">
+                  <span className="badge-sm bg-theme-elevated text-theme-text-secondary">
                     {wh.timeoutSeconds ?? 10}s
                   </span>
                   {wh.matchPolicy && (
-                    <span className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">
+                    <span className="badge-sm bg-theme-elevated text-theme-text-secondary">
                       {wh.matchPolicy}
                     </span>
                   )}
                   {isMutating && wh.reinvocationPolicy && (
-                    <span className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">
+                    <span className="badge-sm bg-theme-elevated text-theme-text-secondary">
                       {wh.reinvocationPolicy}
                     </span>
                   )}
@@ -126,7 +126,7 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
                         <div className="text-xs text-theme-text-tertiary mb-1">Namespace Selector</div>
                         <div className="flex flex-wrap gap-1">
                           {Object.entries(nsLabels).map(([k, v]) => (
-                            <span key={k} className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
+                            <span key={k} className="badge-sm bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
                           ))}
                         </div>
                       </div>
@@ -136,7 +136,7 @@ export function WebhookConfigRenderer({ data, isMutating }: WebhookConfigRendere
                         <div className="text-xs text-theme-text-tertiary mb-1">Object Selector</div>
                         <div className="flex flex-wrap gap-1">
                           {Object.entries(objLabels).map(([k, v]) => (
-                            <span key={k} className="px-1.5 py-0.5 rounded text-xs bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
+                            <span key={k} className="badge-sm bg-theme-elevated text-theme-text-secondary">{k}={String(v)}</span>
                           ))}
                         </div>
                       </div>

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

@@ -155,7 +155,7 @@ export function WorkflowRenderer({ data }: WorkflowRendererProps) {
       <Section title="Status" icon={Play}>
         <PropertyList>
           <Property label="Phase" value={
-            <span className={clsx('px-2 py-0.5 rounded text-xs', getPhaseBadgeClass(phase))}>
+            <span className={clsx('badge', getPhaseBadgeClass(phase))}>
               {phase}
             </span>
           } />
@@ -174,7 +174,7 @@ export function WorkflowRenderer({ data }: WorkflowRendererProps) {
         <Section title={`Steps (${steps.length})`} defaultExpanded>
           <div className="space-y-1.5">
             {steps.map(step => (
-              <div key={step.id} className="flex items-center gap-2 text-sm bg-theme-elevated/30 rounded px-3 py-2">
+              <div key={step.id} className="flex items-center gap-2 text-sm card-inner px-3 py-2">
                 <StepStatusIcon phase={step.phase} />
                 <span className="flex-1 text-theme-text-primary">{step.displayName}</span>
                 <span className="text-xs text-theme-text-secondary">{getStepDuration(step) || '-'}</span>

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

@@ -45,7 +45,7 @@ export function WorkflowTemplateRenderer({ data }: WorkflowTemplateRendererProps
               const type = getTemplateType(template)
               const image = getTemplateImage(template)
               return (
-                <div key={template.name} className="bg-theme-elevated/30 rounded px-3 py-2 text-sm">
+                <div key={template.name} className="card-inner px-3 py-2 text-sm">
                   <div className="font-medium text-theme-text-primary">{template.name}</div>
                   <div className="text-xs text-theme-text-secondary mt-0.5">{type}</div>
                   {image && (
@@ -78,7 +78,7 @@ export function WorkflowTemplateRenderer({ data }: WorkflowTemplateRendererProps
             {imagePullSecrets.map((secret: any) => (
               <span
                 key={secret.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"
               >
                 {secret.name}
               </span>

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

@@ -266,7 +266,7 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
           <button
             onClick={handleScale}
             disabled={isScalePending || targetReplicas === (spec.replicas || 0)}
-            className="flex-1 px-3 py-2 text-sm text-white bg-blue-600 hover:bg-blue-500 disabled:bg-blue-600/50 disabled:cursor-not-allowed rounded-lg transition-colors"
+            className="flex-1 px-3 py-2 text-sm btn-brand disabled:cursor-not-allowed rounded-lg"
           >
             {isScalePending ? 'Scaling...' : 'Apply'}
           </button>

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

@@ -25,7 +25,7 @@ export function ArgoApplicationCell({ resource, column }: { resource: any; colum
     case 'sync': {
       const { status, color } = getArgoApplicationSync(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', color)}>
+        <span className={clsx('badge', color)}>
           {status}
         </span>
       )
@@ -33,7 +33,7 @@ export function ArgoApplicationCell({ resource, column }: { resource: any; colum
     case 'health': {
       const { status, color } = getArgoApplicationHealth(resource)
       return (
-        <span className={clsx('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', color)}>
+        <span className={clsx('badge', color)}>
           {status}
         </span>
       )
@@ -76,7 +76,7 @@ export function ArgoApplicationSetCell({ resource, column }: { resource: any; co
     case 'status': {
       const status = getArgoApplicationSetStatus(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>
       )