Centralize chat and logs status colours and presentation shadow

Author: Bill Leoutsakos

apps/sim/app/_styles/globals.css

@@ -433,6 +433,15 @@
   --auth-primary-btn-hover-border: #e0e0e0;
   --auth-primary-btn-hover-text: #000000;
 
+  /* Chat navigation and log history keep their existing state colours. */
+  --chat-status-active: var(--color-yellow-500);
+  --logs-status-success: color-mix(in oklab, var(--color-emerald-400) 90%, transparent);
+  --logs-status-warning: color-mix(in oklab, var(--color-amber-400) 90%, transparent);
+  --logs-status-error: color-mix(in oklab, var(--color-red-400) 90%, transparent);
+
+  /* The rendered presentation sheet uses this same shadow in both viewer modes. */
+  --shadow-presentation-slide: 0 2px 8px rgba(0, 0, 0, 0.15);
+
   /* z-index scale. The toast/notification stack is ambient: it sits above page
      content but BELOW the modal and the transient poppers (menus, selects,
      popovers, tooltips), so an open modal or dropdown menu is never occluded by
@@ -800,6 +809,7 @@ html[data-sim-desktop-title-bar="inset"]
     --error-emphasis: #b91c1c;
     --caution: #f59e0b;
     --success: #22c55e;
+    --logs-status-empty: color-mix(in oklab, var(--color-gray-300) 60%, transparent);
 
     /* Brand extended */
     --brand-knowledge: #00b0b0;
@@ -918,6 +928,8 @@ html[data-sim-desktop-title-bar="inset"]
     --usage-agent: var(--color-violet-500);
     --usage-other: #8a8a8a;
 
+    --logs-status-empty: color-mix(in oklab, var(--color-gray-500) 40%, transparent);
+
     /* Inverted surface (in dark mode, falls back to standard surfaces) */
     --surface-inverted: #242424;
     --surface-inverted-hover: #363636;

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx

@@ -71,8 +71,10 @@ function ChatRow({
           showStatusDot ? (
             <span
               aria-hidden='true'
-              className='size-[6px] rounded-full'
-              style={{ backgroundColor: chat.isActive ? '#EAB308' : 'var(--brand-accent)' }}
+              className={cn(
+                'size-[6px] rounded-full',
+                chat.isActive ? 'bg-[var(--chat-status-active)]' : 'bg-[var(--brand-accent)]'
+              )}
             />
           ) : chat.isPinned ? (
             <Pin aria-hidden='true' className='size-[12px] text-[var(--text-icon)]' />

apps/sim/app/workspace/[workspaceId]/components/conversation-list-item/conversation-list-item.tsx

@@ -27,10 +27,11 @@ export function ConversationListItem({
       {showStatusDot && (
         <span
           aria-hidden='true'
-          className={cn('size-[6px] shrink-0 rounded-full', statusIndicatorClassName)}
-          style={{
-            backgroundColor: isActive ? '#EAB308' : 'var(--brand-accent)',
-          }}
+          className={cn(
+            'size-[6px] shrink-0 rounded-full',
+            isActive ? 'bg-[var(--chat-status-active)]' : 'bg-[var(--brand-accent)]',
+            statusIndicatorClassName
+          )}
         />
       )}
       {actions && <div className='ml-auto flex shrink-0 items-center'>{actions}</div>}

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx

@@ -66,16 +66,16 @@ function StatusBarInner({
           let color: string
           let hoverBrightness: string
           if (!segment.hasExecutions) {
-            color = 'bg-gray-300/60 dark:bg-gray-500/40'
+            color = 'bg-[var(--logs-status-empty)]'
             hoverBrightness = 'hover-hover:brightness-200'
           } else if (segment.successRate === 100) {
-            color = 'bg-emerald-400/90'
+            color = 'bg-[var(--logs-status-success)]'
             hoverBrightness = 'hover-hover:brightness-106'
           } else if (segment.successRate >= 95) {
-            color = 'bg-amber-400/90'
+            color = 'bg-[var(--logs-status-warning)]'
             hoverBrightness = 'hover-hover:brightness-106'
           } else {
-            color = 'bg-red-400/90'
+            color = 'bg-[var(--logs-status-error)]'
             hoverBrightness = 'hover-hover:brightness-106'
           }
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -280,8 +280,10 @@ const SidebarChatItem = memo(function SidebarChatItem({
               showStatusDot ? (
                 <span
                   aria-hidden='true'
-                  className='size-[6px] rounded-full'
-                  style={{ backgroundColor: isActive ? '#EAB308' : 'var(--brand-accent)' }}
+                  className={cn(
+                    'size-[6px] rounded-full',
+                    isActive ? 'bg-[var(--chat-status-active)]' : 'bg-[var(--brand-accent)]'
+                  )}
                 />
               ) : isPinned ? (
                 <Pin aria-hidden='true' className='size-[12px] text-[var(--text-icon)]' />

apps/sim/lib/pptx-renderer/core/viewer.ts

@@ -614,7 +614,7 @@ export class PptxViewer extends EventTarget {
     Object.assign(wrapper.style, {
       width: `${displayWidth}px`,
       height: `${displayHeight}px`,
-      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+      boxShadow: 'var(--shadow-presentation-slide)',
       overflow: 'hidden',
       position: 'relative',
       background: 'var(--white)',
@@ -866,7 +866,7 @@ export class PptxViewer extends EventTarget {
       margin: '0 auto',
       overflow: 'hidden',
       position: 'relative',
-      boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+      boxShadow: 'var(--shadow-presentation-slide)',
     })
 
     try {