fix(usage): centralize chart palette tokens

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
@@ -742,6 +751,13 @@ html[data-sim-desktop-title-bar="inset"]
     --selection-muted: #1a5cf647;
     --warning: #ea580c;
 
+    /* Organization usage chart fills, shared by bars, legends, and tooltips. */
+    --usage-chat: #1f9d63;
+    --usage-enrichment: #c026d3;
+    --usage-knowledge: #0e9f9f;
+    --usage-agent: var(--brand-agent);
+    --usage-other: var(--text-secondary);
+
     /* Inverted surface (dark chrome on light page, e.g. tag dropdown) */
     --surface-inverted: #1b1b1b;
     --surface-inverted-hover: #363636;
@@ -793,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;
@@ -905,6 +922,14 @@ html[data-sim-desktop-title-bar="inset"]
     --selection-muted: #4b83f759;
     --warning: #ff6600;
 
+    /* Dark chart fills keep their existing contrast on dark surfaces. */
+    --usage-chat: var(--brand-accent-hover);
+    --usage-enrichment: #d946ef;
+    --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/ee/organization-usage/components/activity-summary.tsx

@@ -7,17 +7,12 @@ import {
   ChartFrame,
   ChartLegend,
   type ChartLegendItem,
-  cn,
   DashboardMetric,
   formatChartLatency,
 } from '@sim/emcn'
 import type { OrganizationActivitySummary } from '@/lib/api/contracts/organization-activity'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
-import {
-  USAGE_CHAT_COLOR,
-  USAGE_OTHER_COLOR,
-  USAGE_PALETTE_CLASS,
-} from '@/ee/organization-usage/constants'
+import { USAGE_CHAT_COLOR, USAGE_OTHER_COLOR } from '@/ee/organization-usage/constants'
 import { useLegendHighlight } from '@/ee/organization-usage/hooks/use-legend-highlight'
 import { useOrganizationActivitySummary } from '@/hooks/queries/organization-activity'
 import type { OrganizationUsageWindowKey } from '@/hooks/queries/utils/organization-usage-keys'
@@ -119,7 +114,7 @@ export function ActivitySummary({ summary, loading, error, onRetry }: ActivitySu
   const chartState = { loading, error: error ? "Couldn't load activity." : undefined, onRetry }
 
   return (
-    <div className={cn('flex flex-col gap-5', USAGE_PALETTE_CLASS)}>
+    <div className='flex flex-col gap-5'>
       <div className='grid grid-cols-[repeat(auto-fit,minmax(min(120px,100%),1fr))] gap-4'>
         {metrics.map((metric) => (
           <DashboardMetric

apps/sim/ee/organization-usage/components/usage-credits.tsx

@@ -13,7 +13,6 @@ import {
 } from '@sim/emcn'
 import type { OrganizationUsageOverview } from '@/lib/api/contracts/organization-usage'
 import {
-  USAGE_PALETTE_CLASS,
   USAGE_SOURCE_CATEGORIES,
   USAGE_SOURCE_CATEGORY,
   type UsageSourceCategoryId,
@@ -111,9 +110,7 @@ export function UsageCredits({
   const highlight = useLegendHighlight(legend.map((item) => item.id))
 
   return (
-    <div
-      className={cn('flex flex-col gap-4', USAGE_PALETTE_CLASS, isPlaceholderData && 'opacity-50')}
-    >
+    <div className={cn('flex flex-col gap-4', isPlaceholderData && 'opacity-50')}>
       <div className='flex flex-col gap-1.5'>
         <div className='flex h-7 items-baseline gap-2 whitespace-nowrap'>
           <span className='text-[var(--text-body)] text-lg tabular-nums'>

apps/sim/ee/organization-usage/constants.ts

@@ -95,16 +95,6 @@ export const EXPANDED_ROW_COUNT = ORGANIZATION_USAGE_BREAKDOWN_MAX_LIMIT
 export const DEFAULT_USAGE_PRESET = '30d' as const
 export const DEFAULT_USAGE_TAB = USAGE_OVERVIEW_TAB
 
-/**
- * The Insights chart palette, declared on each chart's root so a layer, its legend
- * dot, and its tooltip swatch resolve to one color. Each hue is its source's color
- * elsewhere in the app — Sim green for Chat, the Enrichment block's purple, the
- * Knowledge block's teal, the agent violet — stepped to the lightness a filled mark
- * needs in each mode; badge text tokens are too pale in dark mode to fill a bar.
- */
-export const USAGE_PALETTE_CLASS =
-  '[--usage-chat:#1f9d63] [--usage-enrichment:#c026d3] [--usage-knowledge:#0e9f9f] [--usage-agent:#6f3dfa] [--usage-other:var(--text-secondary)] dark:[--usage-chat:#2dac72] dark:[--usage-enrichment:#d946ef] dark:[--usage-agent:#8b5cf6] dark:[--usage-other:#8a8a8a]'
-
 /** Sim Chat's color, shared by its credit layer and the chat-runs chart. */
 export const USAGE_CHAT_COLOR = 'var(--usage-chat)'
 

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 {