fix(usage): centralize chart palette tokens

Author: BillLeoutsakosvl346

apps/sim/app/_styles/globals.css

@@ -742,6 +742,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;
@@ -905,6 +912,12 @@ 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;
+
     /* Inverted surface (in dark mode, falls back to standard surfaces) */
     --surface-inverted: #242424;
     --surface-inverted-hover: #363636;

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)'