From ef78d224da1b1e29531c912278aed0d803232aa8 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com> Date: Wed, 23 Sep 2026 13:24:18 -0700 Subject: [PATCH 1/2] fix(usage): centralize chart palette tokens --- apps/sim/app/_styles/globals.css | 13 +++++++++++++ .../components/activity-summary.tsx | 9 ++------- .../organization-usage/components/usage-credits.tsx | 5 +---- apps/sim/ee/organization-usage/constants.ts | 10 ---------- 4 files changed, 16 insertions(+), 21 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 78b947eac66..295ce646cd6 100644 --- a/apps/sim/app/_styles/globals.css +++ b/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; diff --git a/apps/sim/ee/organization-usage/components/activity-summary.tsx b/apps/sim/ee/organization-usage/components/activity-summary.tsx index 75376f8e62d..01f7897f668 100644 --- a/apps/sim/ee/organization-usage/components/activity-summary.tsx +++ b/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 ( -
+
{metrics.map((metric) => ( item.id)) return ( -
+
diff --git a/apps/sim/ee/organization-usage/constants.ts b/apps/sim/ee/organization-usage/constants.ts index c28fff3003e..5de74b2dd27 100644 --- a/apps/sim/ee/organization-usage/constants.ts +++ b/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)' From 7dfc3179526ec519cb3ede95e4b3be4ba0eda053 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com> Date: Thu, 24 Sep 2026 15:24:52 -0700 Subject: [PATCH 2/2] Centralize chat and logs status colours and presentation shadow (#8244) Co-authored-by: Bill Leoutsakos --- apps/sim/app/_styles/globals.css | 12 ++++++++++++ .../components/chats-section/chats-section.tsx | 6 ++++-- .../conversation-list-item.tsx | 9 +++++---- .../dashboard/components/status-bar/status-bar.tsx | 8 ++++---- .../[workspaceId]/w/components/sidebar/sidebar.tsx | 6 ++++-- apps/sim/lib/pptx-renderer/core/viewer.ts | 4 ++-- 6 files changed, 31 insertions(+), 14 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 295ce646cd6..adbe81b2c16 100644 --- a/apps/sim/app/_styles/globals.css +++ b/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; diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx index b349e283201..d57410294db 100644 --- a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx +++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx @@ -71,8 +71,10 @@ function ChatRow({ showStatusDot ? (