From 119e4f70cba629a7a29c7163c425f0f1ba594ff6 Mon Sep 17 00:00:00 2001
From: krusty-agent <krusty-agent@users.noreply.github.com>
Date: Tue, 10 Feb 2026 04:35:04 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Apply=20warm=20cream/amber=20des?=
 =?UTF-8?q?ign=20system=20across=20all=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Define CSS custom properties for warm cream/amber palette in index.css
- Replace all blue/indigo colors with warm amber/orange alternatives
- Update all priority indicators, buttons, badges, and highlights
- Ensure consistent warm 💩 brand identity throughout the app
- Maintain good contrast and accessibility with warm neutrals
---
 src/components/Attachments.tsx          |  2 +-
 src/components/CalendarView.tsx         |  2 +-
 src/components/ChangeCategoryDialog.tsx |  2 +-
 src/components/ConfirmDialog.tsx        |  2 +-
 src/components/ErrorBoundary.tsx        |  2 +-
 src/components/ItemDetailsModal.tsx     |  2 +-
 src/components/ListCard.tsx             |  2 +-
 src/components/ListItem.tsx             |  6 ++--
 src/components/ProvenanceInfo.tsx       |  4 +--
 src/components/TemplatePickerModal.tsx  |  2 +-
 src/index.css                           | 38 +++++++++++++++++++++++++
 src/pages/JoinList.tsx                  | 26 ++++++++---------
 src/pages/ListView.tsx                  |  4 +--
 src/pages/Profile.tsx                   | 20 ++++++-------
 14 files changed, 76 insertions(+), 38 deletions(-)

diff --git a/src/components/Attachments.tsx b/src/components/Attachments.tsx
index 2e872c3..1f20f24 100644
--- a/src/components/Attachments.tsx
+++ b/src/components/Attachments.tsx
@@ -288,7 +288,7 @@ export function Attachments({ itemId, userDid, legacyDid, canEdit }: Attachments
           <button
             onClick={handleCameraCapture}
             disabled={isUploading}
-            className="flex items-center justify-center gap-2 flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm transition-colors disabled:opacity-50"
+            className="flex items-center justify-center gap-2 flex-1 px-3 py-2 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 text-white rounded-lg text-sm transition-all disabled:opacity-50"
           >
             {isUploading ? (
               <>
diff --git a/src/components/CalendarView.tsx b/src/components/CalendarView.tsx
index d632ec0..7302f41 100644
--- a/src/components/CalendarView.tsx
+++ b/src/components/CalendarView.tsx
@@ -192,7 +192,7 @@ export function CalendarView({ listId, onItemClick }: CalendarViewProps) {
                         ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400"
                         : item.priority === "medium"
                         ? "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400"
-                        : "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
+                        : "bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-400"
                     }`}
                   >
                     {item.name}
diff --git a/src/components/ChangeCategoryDialog.tsx b/src/components/ChangeCategoryDialog.tsx
index 88efff2..f0959aa 100644
--- a/src/components/ChangeCategoryDialog.tsx
+++ b/src/components/ChangeCategoryDialog.tsx
@@ -73,7 +73,7 @@ export function ChangeCategoryDialog({
             type="button"
             onClick={handleSave}
             disabled={saving}
-            className="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+            className="px-4 py-2 text-sm text-white bg-gradient-to-r from-amber-600 to-orange-500 rounded-lg hover:from-amber-500 hover:to-orange-400 disabled:opacity-50 transition-all"
           >
             {saving ? "Saving..." : "Save"}
           </button>
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index 030dc34..edb857f 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -47,7 +47,7 @@ export function ConfirmDialog({
   const confirmButtonClasses =
     confirmVariant === "danger"
       ? "bg-red-600 text-white hover:bg-red-700"
-      : "bg-blue-600 text-white hover:bg-blue-700";
+      : "bg-gradient-to-r from-amber-600 to-orange-500 text-white hover:from-amber-500 hover:to-orange-400 transition-all";
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index ca73fb4..b5d8426 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -39,7 +39,7 @@ export class ErrorBoundary extends Component<Props, State> {
             <div className="flex gap-2 justify-center">
               <button
                 onClick={() => window.location.reload()}
-                className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+                className="bg-gradient-to-r from-amber-500 to-orange-500 text-white px-4 py-2 rounded hover:from-amber-400 hover:to-orange-400 transition-all"
               >
                 Reload Page
               </button>
diff --git a/src/components/ItemDetailsModal.tsx b/src/components/ItemDetailsModal.tsx
index 33866d9..573e05d 100644
--- a/src/components/ItemDetailsModal.tsx
+++ b/src/components/ItemDetailsModal.tsx
@@ -30,7 +30,7 @@ type Priority = "high" | "medium" | "low" | "";
 const PRIORITY_COLORS = {
   high: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-300 dark:border-red-700",
   medium: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border-yellow-300 dark:border-yellow-700",
-  low: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border-blue-300 dark:border-blue-700",
+  low: "bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-400 border-amber-300 dark:border-amber-700",
 };
 
 export function ItemDetailsModal({
diff --git a/src/components/ListCard.tsx b/src/components/ListCard.tsx
index e9d072d..bb61d9f 100644
--- a/src/components/ListCard.tsx
+++ b/src/components/ListCard.tsx
@@ -69,7 +69,7 @@ export const ListCard = memo(function ListCard({ list, currentUserDid, showOwner
               </h3>
             </div>
             {!isOwner && (
-              <span className="flex-shrink-0 inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-800">
+              <span className="flex-shrink-0 inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 text-amber-700 dark:text-amber-400 border border-amber-200 dark:border-amber-800">
                 <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                 </svg>
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
index e9b8970..aad0567 100644
--- a/src/components/ListItem.tsx
+++ b/src/components/ListItem.tsx
@@ -204,7 +204,7 @@ export const ListItem = memo(function ListItem({
           : ""
       } ${
         isFocused && !isSelected
-          ? "bg-blue-50 dark:bg-blue-900/20 ring-2 ring-blue-400 dark:ring-blue-600"
+          ? "bg-amber-50 dark:bg-amber-900/20 ring-2 ring-amber-300 dark:ring-amber-700"
           : ""
       } ${
         isSelectMode
@@ -330,7 +330,7 @@ export const ListItem = memo(function ListItem({
               className={`flex-shrink-0 w-2 h-2 rounded-full ${
                 item.priority === "high" ? "bg-red-500" :
                 item.priority === "medium" ? "bg-yellow-500" :
-                "bg-blue-500"
+                "bg-amber-500"
               }`}
               role="img"
               aria-label={`${item.priority} priority`}
@@ -347,7 +347,7 @@ export const ListItem = memo(function ListItem({
           </p>
           {/* Indicators for extras */}
           {item.url && (
-            <span className="text-blue-500 flex-shrink-0 inline-flex items-center text-xs leading-none" role="img" aria-label="Has link">
+            <span className="text-amber-600 flex-shrink-0 inline-flex items-center text-xs leading-none" role="img" aria-label="Has link">
               🔗
               <span className="sr-only">Link attached</span>
             </span>
diff --git a/src/components/ProvenanceInfo.tsx b/src/components/ProvenanceInfo.tsx
index 4135e0b..377fa56 100644
--- a/src/components/ProvenanceInfo.tsx
+++ b/src/components/ProvenanceInfo.tsx
@@ -229,8 +229,8 @@ function AnchorStatusBadge({ status }: { status: "pending" | "inscribed" | "conf
       label: "Pending",
     },
     inscribed: {
-      bg: "bg-blue-100 dark:bg-blue-900/30",
-      text: "text-blue-700 dark:text-blue-400",
+      bg: "bg-amber-100 dark:bg-amber-900/30",
+      text: "text-amber-800 dark:text-amber-400",
       icon: "📝",
       label: "Inscribed",
     },
diff --git a/src/components/TemplatePickerModal.tsx b/src/components/TemplatePickerModal.tsx
index bd1daf0..262dcdd 100644
--- a/src/components/TemplatePickerModal.tsx
+++ b/src/components/TemplatePickerModal.tsx
@@ -241,7 +241,7 @@ export function TemplatePickerModal({ onClose, onCreateBlank }: TemplatePickerMo
                       <span className={`text-xs px-1.5 py-0.5 rounded ${
                         item.priority === 'high' ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' :
                         item.priority === 'medium' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' :
-                        'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                        'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400'
                       }`}>
                         {item.priority}
                       </span>
diff --git a/src/index.css b/src/index.css
index f453e33..660beab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,6 +9,44 @@
   --safe-area-bottom: env(safe-area-inset-bottom, 0px);
   --safe-area-left: env(safe-area-inset-left, 0px);
   --safe-area-right: env(safe-area-inset-right, 0px);
+
+  /* Warm Cream/Amber Design System - 💩 Brand Colors */
+  /* Backgrounds - Cream tones */
+  --cream-50: #fffcf5;
+  --cream-100: #fef8ed;
+  --cream-200: #fcefd5;
+  --cream-300: #fae5bd;
+  
+  /* Amber Accents - Primary interactive colors */
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --amber-900: #78350f;
+  
+  /* Warm Neutrals - Replacing grays */
+  --warm-50: #fafaf9;
+  --warm-100: #f5f5f4;
+  --warm-200: #e7e5e4;
+  --warm-300: #d6d3d1;
+  --warm-400: #a8a29e;
+  --warm-500: #78716c;
+  --warm-600: #57534e;
+  --warm-700: #44403c;
+  --warm-800: #292524;
+  --warm-900: #1c1917;
+  
+  /* Semantic colors using warm palette */
+  --bg-primary: var(--cream-50);
+  --bg-secondary: var(--cream-100);
+  --bg-tertiary: var(--cream-200);
+  --text-primary: var(--warm-900);
+  --text-secondary: var(--warm-700);
+  --text-tertiary: var(--warm-600);
+  --border-color: var(--cream-300);
+  --accent-primary: var(--amber-600);
+  --accent-hover: var(--amber-500);
 }
 
 /* Apply to the main layout */
diff --git a/src/pages/JoinList.tsx b/src/pages/JoinList.tsx
index f8a739c..2263366 100644
--- a/src/pages/JoinList.tsx
+++ b/src/pages/JoinList.tsx
@@ -43,9 +43,9 @@ export function JoinList() {
   // Show login if not authenticated (but don't unmount during loading to preserve OTP state)
   if (!isAuthenticated) {
     return (
-      <div className="min-h-screen bg-gray-50">
+      <div className="min-h-screen bg-amber-50">
         <Login embedded />
-        <div className="text-center text-gray-500 -mt-4 pb-8">
+        <div className="text-center text-amber-700 -mt-4 pb-8">
           Sign in to join this list.
         </div>
       </div>
@@ -56,7 +56,7 @@ export function JoinList() {
   if (isUserLoading || validation === undefined) {
     return (
       <div className="text-center py-12">
-        <div className="text-gray-500">Validating invite...</div>
+        <div className="text-amber-700">Validating invite...</div>
       </div>
     );
   }
@@ -64,11 +64,11 @@ export function JoinList() {
   // Invalid invite
   if (!validation.valid) {
     return (
-      <div className="max-w-md mx-auto text-center py-12 bg-white rounded-lg shadow p-6">
+      <div className="max-w-md mx-auto text-center py-12 bg-cream-50 rounded-lg shadow p-6">
         <div className="text-red-500 text-5xl mb-4">:(</div>
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">Invalid Invite</h2>
-        <p className="text-gray-500 mb-4">{validation.error}</p>
-        <Link to="/" className="text-blue-600 hover:text-blue-700">
+        <h2 className="text-xl font-semibold text-amber-900 mb-2">Invalid Invite</h2>
+        <p className="text-amber-700 mb-4">{validation.error}</p>
+        <Link to="/" className="text-amber-600 hover:text-amber-700 font-medium">
           Go to your lists
         </Link>
       </div>
@@ -100,17 +100,17 @@ export function JoinList() {
   };
 
   return (
-    <div className="max-w-md mx-auto text-center py-12 bg-white rounded-lg shadow p-6">
+    <div className="max-w-md mx-auto text-center py-12 bg-cream-50 rounded-lg shadow-lg shadow-amber-200/50 p-6">
       {/* Debug: Show DID being used */}
-      <div className="mb-4 p-2 bg-gray-100 rounded text-xs font-mono text-left">
+      <div className="mb-4 p-2 bg-amber-50 rounded text-xs font-mono text-left">
         <div>Your DID: {did ?? "null"}</div>
       </div>
 
       <div className="text-5xl mb-4">+</div>
-      <h2 className="text-xl font-semibold text-gray-900 mb-2">
+      <h2 className="text-xl font-semibold text-amber-900 mb-2">
         You're invited to join "{validation.listName}"
       </h2>
-      <p className="text-gray-500 mb-6">
+      <p className="text-amber-700 mb-6">
         Accept this invite to start collaborating on the list.
       </p>
 
@@ -121,14 +121,14 @@ export function JoinList() {
       <div className="flex gap-3 justify-center">
         <Link
           to="/"
-          className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md font-medium hover:bg-gray-200"
+          className="px-4 py-2 text-amber-800 bg-amber-100 rounded-md font-medium hover:bg-amber-200"
         >
           Cancel
         </Link>
         <button
           onClick={handleJoin}
           disabled={isJoining}
-          className="px-6 py-2 bg-blue-600 text-white rounded-md font-medium hover:bg-blue-700 disabled:opacity-50"
+          className="px-6 py-2 bg-gradient-to-r from-amber-600 to-orange-500 text-white rounded-md font-medium hover:from-amber-500 hover:to-orange-400 disabled:opacity-50 transition-all"
         >
           {isJoining ? "Joining..." : "Join List"}
         </button>
diff --git a/src/pages/ListView.tsx b/src/pages/ListView.tsx
index 8563239..cfc7082 100644
--- a/src/pages/ListView.tsx
+++ b/src/pages/ListView.tsx
@@ -857,7 +857,7 @@ export function ListView() {
                   {/* Aisle section header — highlights when dragging over */}
                   <div className={`flex items-center gap-2 px-3 py-2 rounded-t-xl border-b transition-colors duration-150 ${
                     dragOverAisleId === aisle.id && groceryTouchDrag.state.draggedId
-                      ? "bg-gradient-to-r from-blue-100 to-indigo-100 dark:from-blue-900/40 dark:to-indigo-900/40 border-blue-300 dark:border-blue-600 ring-2 ring-blue-300 dark:ring-blue-600"
+                      ? "bg-gradient-to-r from-amber-100 to-orange-100 dark:from-amber-900/40 dark:to-orange-900/40 border-amber-400 dark:border-amber-600 ring-2 ring-amber-400 dark:ring-amber-600"
                       : "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-gray-700 dark:to-gray-750 border-amber-100 dark:border-gray-600"
                   }`}>
                     <span className="text-lg">{aisle.emoji}</span>
@@ -944,7 +944,7 @@ export function ListView() {
                             setShowAddAisle(false);
                           }
                         }}
-                        className="text-sm font-medium text-blue-600 dark:text-blue-400 px-2 py-1"
+                        className="text-sm font-medium text-amber-700 dark:text-amber-400 px-2 py-1 hover:text-amber-800 dark:hover:text-amber-300"
                       >
                         Add
                       </button>
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 3050cc7..f48dff8 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -141,20 +141,20 @@ export function Profile() {
               </p>
             </div>
             
-            <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 text-center">
-              <p className="text-3xl font-bold text-blue-600 dark:text-blue-400">
+            <div className="bg-orange-50 dark:bg-orange-900/20 rounded-xl p-4 text-center">
+              <p className="text-3xl font-bold text-orange-600 dark:text-orange-400">
                 {completedItems}
               </p>
-              <p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
+              <p className="text-sm text-orange-700 dark:text-orange-300 mt-1">
                 Items Done
               </p>
             </div>
             
-            <div className="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-4 text-center">
-              <p className="text-3xl font-bold text-purple-600 dark:text-purple-400">
+            <div className="bg-amber-50 dark:bg-amber-900/20 rounded-xl p-4 text-center border border-amber-200 dark:border-amber-800">
+              <p className="text-3xl font-bold text-amber-700 dark:text-amber-400">
                 {completionRate}%
               </p>
-              <p className="text-sm text-purple-700 dark:text-purple-300 mt-1">
+              <p className="text-sm text-amber-800 dark:text-amber-300 mt-1">
                 Completion Rate
               </p>
             </div>
@@ -224,9 +224,9 @@ export function Profile() {
         
         {completionRate < 80 && completionRate >= 50 && (
           <div className="px-6 pb-6">
-            <div className="bg-gradient-to-r from-blue-100 to-indigo-100 dark:from-blue-900/30 dark:to-indigo-900/30 rounded-xl p-4 text-center">
+            <div className="bg-gradient-to-r from-amber-100 to-orange-100 dark:from-amber-900/30 dark:to-orange-900/30 rounded-xl p-4 text-center">
               <p className="text-2xl mb-2">💪</p>
-              <p className="font-medium text-blue-800 dark:text-blue-200">
+              <p className="font-medium text-amber-800 dark:text-amber-200">
                 Great progress! Keep up the momentum!
               </p>
             </div>
@@ -235,9 +235,9 @@ export function Profile() {
         
         {completionRate < 50 && totalItems > 0 && (
           <div className="px-6 pb-6">
-            <div className="bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-xl p-4 text-center">
+            <div className="bg-gradient-to-r from-orange-100 to-amber-100 dark:from-orange-900/30 dark:to-amber-900/30 rounded-xl p-4 text-center">
               <p className="text-2xl mb-2">🚀</p>
-              <p className="font-medium text-purple-800 dark:text-purple-200">
+              <p className="font-medium text-orange-800 dark:text-orange-200">
                 You've got this! Every item counts!
               </p>
             </div>