feat: add transition-colors to interactive elements, replace remaining hardcoded grays in ObjectGrid and LayoutRenderer

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

ROADMAP.md

@@ -786,24 +786,30 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 > All items from the UI consistency optimization (Issue #749) have been implemented.
 
 **Global Theme & Design Tokens:**
-- [x] Hardcoded gray colors in `GridField.tsx` and `ReportRenderer.tsx` replaced with theme tokens (`text-muted-foreground`, `bg-muted`, `border-border`)
+- [x] Hardcoded gray colors in `GridField.tsx`, `ReportRenderer.tsx`, and `ObjectGrid.tsx` replaced with theme tokens (`text-muted-foreground`, `bg-muted`, `border-border`, `border-foreground`)
 - [x] Global font-family (`Inter`, ui-sans-serif, system-ui) injected in `index.css` `:root`
 - [x] `--config-panel-width: 280px` CSS custom property added for unified config panel sizing
 - [x] Border radius standardized to `rounded-lg` across report/grid components
+- [x] `transition-colors duration-150` added to all interactive elements (toolbar buttons, tab bar, sidebar menu buttons)
+- [x] `LayoutRenderer.tsx` outer shell `bg-slate-50/50 dark:bg-zinc-950` replaced with `bg-background` theme token
 
 **Sidebar Navigation:**
 - [x] `SidebarMenuButton` active state enhanced with 3px left indicator bar via `before:` pseudo-element
+- [x] `SidebarMenuButton` transition expanded to include `color, background-color` with `duration-150`
 - [x] `SidebarGroupLabel` visual separator added (`border-t border-border/30 pt-3 mt-2`)
 - [x] Collapsed-mode tooltip support in `SidebarNav` via `tooltip={item.title}` prop
+- [ ] `LayoutRenderer.tsx` hand-written sidebar → `SidebarNav` unification (deferred: requires extending SidebarNav to support nested menus, logo, version footer)
 
 **ListView Toolbar:**
 - [x] Search changed from expandable button to always-visible inline `<Input>` (`w-48`)
 - [x] Activated state (`bg-primary/10 border border-primary/20`) added to Filter/Sort/Group/Color buttons when active
 - [x] Toolbar overflow improved with `overflow-x-auto` for responsive behavior
+- [x] `transition-colors duration-150` added to all toolbar buttons
 
 **ObjectGrid Cell Renderers:**
 - [x] `formatRelativeDate()` function added for relative time display ("Today", "2 days ago", "Yesterday")
 - [x] DataTable/VirtualGrid header styling unified: `text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 bg-muted/30`
+- [x] Remaining hardcoded gray colors in ObjectGrid loading spinner and status badge fallback replaced with theme tokens
 
 **ConfigPanelRenderer:**
 - [x] `<Separator>` added between sections for visual clarity
@@ -812,6 +818,7 @@ The `FlowDesigner` is a canvas-based flow editor that bridges the gap between th
 **View Tab Bar:**
 - [x] Tab spacing tightened (`gap-0.5`, `px-3 py-1.5`)
 - [x] Active tab indicator changed to bottom border (`border-b-2 border-primary font-medium text-foreground`)
+- [x] `transition-colors duration-150` added to tab buttons
 
 ### P2.5 PWA & Offline (Real Sync)
 

packages/components/src/ui/sidebar.tsx

@@ -708,8 +708,8 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     }
     return (
       <div className="p-4 sm:p-8 text-center">
-        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
-        <p className="mt-2 text-sm text-gray-600">Loading grid...</p>
+        <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-foreground"></div>
+        <p className="mt-2 text-sm text-muted-foreground">Loading grid...</p>
       </div>
     );
   }
@@ -909,7 +909,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
         return 'bg-indigo-100 text-indigo-800 border-indigo-300';
       if (v.includes('prospecting') || v.includes('new') || v.includes('open'))
         return 'bg-purple-100 text-purple-800 border-purple-300';
-      return 'bg-gray-100 text-gray-800 border-gray-300';
+      return 'bg-muted text-muted-foreground border-border';
     };
 
     // Left border color for card accent based on stage

packages/plugin-grid/src/ObjectGrid.tsx

@@ -1019,7 +1019,7 @@ export const ListView: React.FC<ListViewProps> = ({
                 variant="ghost"
                 size="sm"
                 className={cn(
-                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs",
+                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150",
                   hiddenFields.size > 0 && "text-primary"
                 )}
               >
@@ -1078,7 +1078,7 @@ export const ListView: React.FC<ListViewProps> = ({
                 variant="ghost"
                 size="sm"
                 className={cn(
-                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs",
+                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150",
                   hasFilters && "bg-primary/10 border border-primary/20 text-primary"
                 )}
               >
@@ -1117,7 +1117,7 @@ export const ListView: React.FC<ListViewProps> = ({
                 variant="ghost"
                 size="sm"
                 className={cn(
-                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs",
+                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150",
                   groupingConfig && "bg-primary/10 border border-primary/20 text-primary"
                 )}
               >
@@ -1177,7 +1177,7 @@ export const ListView: React.FC<ListViewProps> = ({
                 variant="ghost"
                 size="sm"
                 className={cn(
-                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs",
+                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150",
                   currentSort.length > 0 && "bg-primary/10 border border-primary/20 text-primary"
                 )}
               >
@@ -1216,7 +1216,7 @@ export const ListView: React.FC<ListViewProps> = ({
                 variant="ghost"
                 size="sm"
                 className={cn(
-                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs",
+                  "h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150",
                   rowColorConfig && "bg-primary/10 border border-primary/20 text-primary"
                 )}
               >
@@ -1281,7 +1281,7 @@ export const ListView: React.FC<ListViewProps> = ({
                 <Button
                   variant="ghost"
                   size="sm"
-                  className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+                  className="h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150"
                 >
                   <Download className="h-3.5 w-3.5 mr-1.5" />
                   <span className="hidden sm:inline">Export</span>
@@ -1311,7 +1311,7 @@ export const ListView: React.FC<ListViewProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+              className="h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150"
               title={`Sharing: ${schema.sharing?.visibility || schema.sharing?.type || 'private'}`}
               data-testid="share-button"
             >
@@ -1325,7 +1325,7 @@ export const ListView: React.FC<ListViewProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+              className="h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150"
               onClick={() => window.print()}
               data-testid="print-button"
             >
@@ -1342,7 +1342,7 @@ export const ListView: React.FC<ListViewProps> = ({
             <Button
               variant="ghost"
               size="sm"
-              className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+              className="h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150"
               data-testid="add-record-button"
               onClick={() => props.onAddRecord?.()}
             >
@@ -1456,7 +1456,7 @@ export const ListView: React.FC<ListViewProps> = ({
           <Button
             variant="ghost"
             size="sm"
-            className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+            className="h-7 px-2 text-muted-foreground hover:text-primary text-xs transition-colors duration-150"
             data-testid="add-record-button"
             onClick={() => props.onAddRecord?.()}
           >

packages/plugin-list/src/ListView.tsx

@@ -100,7 +100,7 @@ export const TabBar: React.FC<TabBarProps> = ({
             variant="ghost"
             size="sm"
             className={cn(
-              "h-7 px-3 py-1.5 text-xs rounded-none",
+              "h-7 px-3 py-1.5 text-xs rounded-none transition-colors duration-150",
               isActive
                 ? "border-b-2 border-primary font-medium text-foreground"
                 : "text-muted-foreground hover:text-foreground"

packages/plugin-list/src/components/TabBar.tsx

@@ -150,7 +150,7 @@ export const LayoutRenderer = ({ app, children, currentPath, onNavigate }: Layou
   const LogoIcon = app.logo && !app.logo.includes('/') && !app.logo.includes('.') ? getIcon(app.logo) : null;
 
   return (
-    <div className={`flex min-h-screen w-full bg-slate-50/50 dark:bg-zinc-950 ${app.className || ''}`}>
+    <div className={`flex min-h-screen w-full bg-background ${app.className || ''}`}>
       {/* Sidebar - Only if configured */}
       {layout === 'sidebar' && (
         <aside