From c04f850b1663fe1a5f6460716fcde2fa81fa34df Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 28 Oct 2026 04:45:59 +0100
Subject: [PATCH] fix: use theme colours for folder icons, stars and contact
 form errors instead of fixed blue, amber and pink

---
 components/contacts/contact-form.tsx       | 16 +++++++++-------
 components/contacts/contact-group-form.tsx |  2 +-
 components/files/file-details-panel.tsx    |  2 +-
 components/files/file-icons.tsx            |  2 +-
 components/files/file-picker-dialog.tsx    |  4 ++--
 components/files/file-views.tsx            |  4 ++--
 components/files/files-app.tsx             |  2 +-
 components/files/files-sidebar.tsx         |  2 +-
 8 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/components/contacts/contact-form.tsx b/components/contacts/contact-form.tsx
index 6543febe6..df0b837e5 100644
--- a/components/contacts/contact-form.tsx
+++ b/components/contacts/contact-form.tsx
@@ -698,7 +698,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
       <div className="flex-1 overflow-y-auto">
         <div className="px-6 py-4 max-w-3xl">
           {error && (
-            <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950 px-3 py-2 rounded-lg border border-red-200 dark:border-red-900 mb-4">
+            <div role="alert" className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md mb-4">
               {error}
             </div>
           )}
@@ -716,6 +716,8 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
                 name={previewName || undefined}
                 email={previewEmail || undefined}
                 contactPhoto={previewPhoto}
+                // Nothing typed yet: a neutral circle, not a coloured "?".
+                fallbackColor={previewName || previewEmail ? undefined : "var(--color-muted-foreground)"}
                 size="lg"
                 className="!w-20 !h-20 !text-xl"
               />
@@ -737,7 +739,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
             <div className="flex flex-col gap-1 min-w-0 flex-1">
               <p className="text-xs text-muted-foreground">{t("photo_hint")}</p>
               {photoError && (
-                <p className="text-xs text-red-600 dark:text-red-400">{photoError}</p>
+                <p className="text-xs text-destructive">{photoError}</p>
               )}
               {previewPhoto && (
                 <button
@@ -802,7 +804,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
               <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                 <div>
                   <label className="text-xs text-muted-foreground mb-1 block">
-                    {t("organization")} <span className="text-red-500">*</span>
+                    {t("organization")} <span className="text-destructive">*</span>
                   </label>
                   <Input value={organization} onChange={(e) => setOrganization(e.target.value)} placeholder={t("organization_placeholder")} autoFocus />
                 </div>
@@ -820,13 +822,13 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
                   </div>
                   <div>
                     <label className="text-xs text-muted-foreground mb-1 block">
-                      {t("given_name")} <span className="text-red-500">*</span>
+                      {t("given_name")} <span className="text-destructive">*</span>
                     </label>
                     <Input value={givenName} onChange={(e) => setGivenName(e.target.value)} placeholder={t("given_name")} autoFocus />
                   </div>
                   <div>
                     <label className="text-xs text-muted-foreground mb-1 block">
-                      {t("surname")} <span className="text-red-500">*</span>
+                      {t("surname")} <span className="text-destructive">*</span>
                     </label>
                     <Input value={surname} onChange={(e) => setSurname(e.target.value)} placeholder={t("surname")} />
                   </div>
@@ -869,7 +871,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
                       }}
                       onBlur={() => handleEmailBlur(i, entry.address)}
                       placeholder={t("email_placeholder")}
-                      className={cn("flex-1", emailErrors[i] && "border-red-500 focus:ring-red-500")}
+                      className={cn("flex-1", emailErrors[i] && "border-destructive focus-visible:border-destructive")}
                     />
                     <Select
                       value={entry.context}
@@ -890,7 +892,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
                     )}
                   </div>
                   {emailErrors[i] && (
-                    <p className="text-xs text-red-600 dark:text-red-400 mt-1 ms-1">{emailErrors[i]}</p>
+                    <p className="text-xs text-destructive mt-1 ms-1">{emailErrors[i]}</p>
                   )}
                 </div>
               ))}
diff --git a/components/contacts/contact-group-form.tsx b/components/contacts/contact-group-form.tsx
index d0699dc41..faf41feff 100644
--- a/components/contacts/contact-group-form.tsx
+++ b/components/contacts/contact-group-form.tsx
@@ -94,7 +94,7 @@ export function ContactGroupForm({
 
       <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
         {error && (
-          <div className="text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950 px-3 py-2 rounded">
+          <div role="alert" className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md">
             {error}
           </div>
         )}
diff --git a/components/files/file-details-panel.tsx b/components/files/file-details-panel.tsx
index 863355553..c8e98a0a5 100644
--- a/components/files/file-details-panel.tsx
+++ b/components/files/file-details-panel.tsx
@@ -82,7 +82,7 @@ export function FileDetailsPanel({
         <div className="aspect-[4/3] rounded-lg bg-muted/50 flex items-center justify-center">
           {selection.length > 1
             ? <Files className="w-14 h-14 text-muted-foreground" />
-            : <FolderOpen className="w-14 h-14 text-blue-500" />}
+            : <FolderOpen className="w-14 h-14 text-primary" />}
         </div>
         <div>
           <p className="font-medium break-words">
diff --git a/components/files/file-icons.tsx b/components/files/file-icons.tsx
index 23d8d10b8..3a3ca7fd6 100644
--- a/components/files/file-icons.tsx
+++ b/components/files/file-icons.tsx
@@ -156,5 +156,5 @@ export function getSymlinkIcon(size: FileIconSize, label: string) {
 }
 
 export function getFolderIcon(size: FileIconSize, colored = true) {
-  return <Folder className={`${ICON_SIZE_CLASSES[size]} shrink-0 ${colored ? "text-blue-500" : "text-muted-foreground"}`} />;
+  return <Folder className={`${ICON_SIZE_CLASSES[size]} shrink-0 ${colored ? "text-primary" : "text-muted-foreground"}`} />;
 }
diff --git a/components/files/file-picker-dialog.tsx b/components/files/file-picker-dialog.tsx
index b62bdf16f..55a94e275 100644
--- a/components/files/file-picker-dialog.tsx
+++ b/components/files/file-picker-dialog.tsx
@@ -210,7 +210,7 @@ export function FilePickerDialog({ client, onClose, onPick }: FilePickerDialogPr
         {here === null && !needle && sharedRoots.length > 0 && folderRow(
           SHARED_WITH_ME,
           t("shared_with_me"),
-          <Users className="w-5 h-5 shrink-0 text-blue-500" />,
+          <Users className="w-5 h-5 shrink-0 text-primary" />,
           () => openFolder(SHARED_WITH_ME, t("shared_with_me")),
         )}
         {entries.map((node) =>
@@ -218,7 +218,7 @@ export function FilePickerDialog({ client, onClose, onPick }: FilePickerDialogPr
             ? folderRow(
                 node.id,
                 node.name,
-                <Folder className="w-5 h-5 shrink-0 text-blue-500" />,
+                <Folder className="w-5 h-5 shrink-0 text-primary" />,
                 () => openFolder(node.id, node.name),
                 sharedBy(node),
               )
diff --git a/components/files/file-views.tsx b/components/files/file-views.tsx
index 2a6c2176d..f3d23336d 100644
--- a/components/files/file-views.tsx
+++ b/components/files/file-views.tsx
@@ -264,7 +264,7 @@ function FileListRow({ resource, isSelected, isFocused, isDropTarget, isCut, isS
             >
               {resource.name}
             </button>
-            {isStarred && <Star className="w-3.5 h-3.5 shrink-0 text-amber-500 fill-current" aria-label={t("favorites")} />}
+            {isStarred && <Star className="w-3.5 h-3.5 shrink-0 text-amber-400 fill-amber-400" aria-label={t("favorites")} />}
             <ShareBadge resource={resource} t={t} />
           </div>
           {touch && (
@@ -416,7 +416,7 @@ function FolderTile({ resource, isSelected, isFocused, isDropTarget, isCut, isSt
       >
         {resource.name}
       </button>
-      {isStarred && <Star className="w-3.5 h-3.5 shrink-0 text-amber-500 fill-current" aria-label={t("favorites")} />}
+      {isStarred && <Star className="w-3.5 h-3.5 shrink-0 text-amber-400 fill-amber-400" aria-label={t("favorites")} />}
       <ShareBadge resource={resource} t={t} />
       <IconButton
         data-item-action
diff --git a/components/files/files-app.tsx b/components/files/files-app.tsx
index 2f424473f..ff7ad78fd 100644
--- a/components/files/files-app.tsx
+++ b/components/files/files-app.tsx
@@ -800,7 +800,7 @@ export function FilesApp({ linkSegments: routeSegments }: FilesAppProps = {}) {
               {!filesEnabled ? (
                 <div className="flex items-center justify-center h-full">
                   <div className="max-w-lg text-center space-y-3 px-4">
-                    <AlertTriangle className="w-10 h-10 text-yellow-500 mx-auto" />
+                    <AlertTriangle className="w-10 h-10 text-amber-600 dark:text-amber-400 mx-auto" />
                     <p className="text-sm font-medium">{t("disabled_title")}</p>
                     <p className="text-xs text-muted-foreground">{t("disabled_description")}</p>
                   </div>
diff --git a/components/files/files-sidebar.tsx b/components/files/files-sidebar.tsx
index bc1d73df2..afb61f00a 100644
--- a/components/files/files-sidebar.tsx
+++ b/components/files/files-sidebar.tsx
@@ -343,7 +343,7 @@ export function FilesSidebar({
                 style={{ ...ROW_STYLE, paddingInlineStart: "26px" }}
                 title={path}
               >
-                <Star className="w-4 h-4 shrink-0 text-amber-500 fill-current" />
+                <Star className="w-4 h-4 shrink-0 text-amber-400 fill-amber-400" />
                 <span className="truncate">{path === "/" ? t("my_files") : path.split("/").pop()}</span>
               </button>
             ))}