From 3256906f9ef7511fa482d44a500fdb40acb5f2f6 Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sat, 20 Jun 2026 19:12:50 +0200
Subject: [PATCH] refactor: migrate status callout banners to
 status-subtle/border tokens

---
 client/src/components/Auth/LoginForm.tsx                  | 2 +-
 client/src/components/Auth/Registration.tsx               | 2 +-
 client/src/components/Nav/Settings/Section.tsx            | 2 +-
 client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx   | 4 ++--
 client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx | 2 +-
 client/src/components/Skills/forms/CreateSkillForm.tsx    | 2 +-
 client/src/components/Skills/forms/SkillForm.tsx          | 4 ++--
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx
index 7892efa664..f4ebad56e2 100644
--- a/client/src/components/Auth/LoginForm.tsx
+++ b/client/src/components/Auth/LoginForm.tsx
@@ -76,7 +76,7 @@ const LoginForm: React.FC<TLoginFormProps> = ({ onSubmit, startupConfig, error,
   return (
     <>
       {showResendLink && (
-        <div className="mt-2 rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-text-secondary">
+        <div className="mt-2 rounded-md border border-status-success-border bg-status-success-subtle px-3 py-2 text-sm text-text-secondary">
           {localize('com_auth_email_verification_resend_prompt')}
           <button
             type="button"
diff --git a/client/src/components/Auth/Registration.tsx b/client/src/components/Auth/Registration.tsx
index 33df63dd66..1726e6907a 100644
--- a/client/src/components/Auth/Registration.tsx
+++ b/client/src/components/Auth/Registration.tsx
@@ -133,7 +133,7 @@ const Registration: React.FC = () => {
       )}
       {registerUser.isSuccess && countdown > 0 && (
         <div
-          className="rounded-md border border-green-500 bg-green-500/10 px-3 py-2 text-sm text-text-secondary"
+          className="rounded-md border border-status-success-border bg-status-success-subtle px-3 py-2 text-sm text-text-secondary"
           role="alert"
         >
           {localize(
diff --git a/client/src/components/Nav/Settings/Section.tsx b/client/src/components/Nav/Settings/Section.tsx
index 192d5396ef..ddf0c4f36b 100644
--- a/client/src/components/Nav/Settings/Section.tsx
+++ b/client/src/components/Nav/Settings/Section.tsx
@@ -21,7 +21,7 @@ export default function Section({ heading, danger, children }: SectionProps) {
       <div
         className={cn(
           'divide-y divide-border-light overflow-hidden rounded-xl border text-sm text-text-primary',
-          danger ? 'border-red-500/30' : 'border-border-light',
+          danger ? 'border-status-error-border' : 'border-border-light',
         )}
       >
         {children}
diff --git a/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx b/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx
index ff8a5718f8..f0e0092a24 100644
--- a/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx
+++ b/client/src/components/Nav/SettingsTabs/ApiKeys/Item.tsx
@@ -23,12 +23,12 @@ export default function Item({ apiKey }: ItemProps) {
         <div className="flex items-center gap-2">
           <span className="truncate font-medium text-text-primary">{apiKey.name}</span>
           {status?.state === 'expired' && (
-            <span className="shrink-0 rounded-full border border-red-500/20 bg-red-500/10 px-2 py-0.5 text-xs font-medium text-red-600 dark:text-red-400">
+            <span className="shrink-0 rounded-full border border-status-error-border bg-status-error-subtle px-2 py-0.5 text-xs font-medium text-status-error">
               {localize('com_ui_api_key_expired')}
             </span>
           )}
           {status?.state === 'expiring' && (
-            <span className="shrink-0 rounded-full border border-amber-500/20 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-500">
+            <span className="shrink-0 rounded-full border border-status-warning-border bg-status-warning-subtle px-2 py-0.5 text-xs font-medium text-status-warning">
               {status.days === 1
                 ? localize('com_ui_api_key_expires_in_day')
                 : localize('com_ui_api_key_expires_in_days', { 0: status.days })}
diff --git a/client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx b/client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx
index 9352e7252a..9815c7773f 100644
--- a/client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx
+++ b/client/src/components/Nav/SettingsTabs/ApiKeys/Reveal.tsx
@@ -17,7 +17,7 @@ export default function Reveal({ createdKey, onDone }: RevealProps) {
 
   return (
     <div className="min-w-0 space-y-4">
-      <div className="flex gap-2.5 rounded-lg border border-amber-500/20 bg-amber-500/10 p-3">
+      <div className="flex gap-2.5 rounded-lg border border-status-warning-border bg-status-warning-subtle p-3">
         <TriangleAlert
           className="mt-0.5 h-4 w-4 shrink-0 text-text-warning"
           aria-hidden="true"
diff --git a/client/src/components/Skills/forms/CreateSkillForm.tsx b/client/src/components/Skills/forms/CreateSkillForm.tsx
index 0a882cf843..296efe97c4 100644
--- a/client/src/components/Skills/forms/CreateSkillForm.tsx
+++ b/client/src/components/Skills/forms/CreateSkillForm.tsx
@@ -261,7 +261,7 @@ export default function CreateSkillForm({
           {createSkill.error != null && (
             <div
               role="alert"
-              className="flex items-start gap-2 rounded-md border border-red-500/40 bg-red-500/5 p-3 text-sm text-text-destructive"
+              className="flex items-start gap-2 rounded-md border border-status-error-border bg-status-error-subtle p-3 text-sm text-text-destructive"
             >
               <AlertTriangle className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
               <span>{localize('com_ui_skill_create_error')}</span>
diff --git a/client/src/components/Skills/forms/SkillForm.tsx b/client/src/components/Skills/forms/SkillForm.tsx
index d92c45490e..f89bc33450 100644
--- a/client/src/components/Skills/forms/SkillForm.tsx
+++ b/client/src/components/Skills/forms/SkillForm.tsx
@@ -240,7 +240,7 @@ export default function SkillForm({ skillId }: SkillFormProps) {
         {readOnly && (
           <div
             role="note"
-            className="mt-4 flex items-start gap-2 rounded-md border border-amber-500/40 bg-amber-500/5 p-3 text-sm text-amber-600 dark:text-amber-400"
+            className="mt-4 flex items-start gap-2 rounded-md border border-status-warning-border bg-status-warning-subtle p-3 text-sm text-status-warning"
           >
             <Info className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
             <span>{localize('com_ui_skill_no_edit_permission')}</span>
@@ -250,7 +250,7 @@ export default function SkillForm({ skillId }: SkillFormProps) {
         {warnings && warnings.length > 0 && (
           <div
             role="alert"
-            className="mt-4 flex flex-col gap-1 rounded-md border border-amber-500/40 bg-amber-500/5 p-3 text-sm text-amber-600 dark:text-amber-400"
+            className="mt-4 flex flex-col gap-1 rounded-md border border-status-warning-border bg-status-warning-subtle p-3 text-sm text-status-warning"
           >
             <div className="flex items-center gap-2 font-semibold">
               <AlertTriangle className="size-4" aria-hidden="true" />