From 484726a45cd0a68a5dfae66fd928e27bfbcf78bd Mon Sep 17 00:00:00 2001 From: Danny White <3104761+dnywh@users.noreply.github.com> Date: Tue, 7 Jul 2026 14:34:29 +1000 Subject: [PATCH] fix(studio): warning colours broken in light mode after colour migration (#47660) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What kind of change does this PR introduce? UI bug fix ## What is the current behavior? After the colour system migration (#47288), `--warning-default` was removed in light mode in favour of the semantic `--warning` token. Several studio call sites still referenced `hsl(var(--warning-default))`, which resolves to an invalid colour in light mode. This caused warning segments in stacked bar charts (e.g. Realtime on project overview v2) to render black instead of amber, with missing tooltip swatches. The colour appeared to "fix itself" on hover because the dimmed state used `--warning-500`, which is still defined. ## What is the new behaviour? Studio consumers that referenced the removed token now point at tokens that still resolve in light mode. Chart warnings use new app-level `--chart-warning` / `--chart-warning-muted` variables (stepped scale, theme-aware) rather than the removed `--warning-default`. We only update **Studio app consumers** that were still calling the old token: - `LogsBarChart` → `--chart-warning` tokens - `apps/studio/styles/globals.css` → defines those chart tokens + fixes `--sidebar-primary-foreground` - A handful of chart/tooltip call sites in Studio (`EdgeFunctionOverview`, `UnifiedLogs`, etc.) - Table editor dirty cell text → `--warning-600` (still on the stepped scale) ## To test Use a hosted project that already has warnings on project home (e.g. Realtime with a non-zero warnings count). Switch Studio to **light mode**. 1. Open **Project home** (`newHomepageUsageDeltas` flag enabled). 2. Find a service card with warnings in **Project usage**. 3. Confirm warning bar segments are amber/orange (not black), tooltip swatches show amber, and hover does not flip them black. 4. Quick dark mode sanity check. Should look unchanged. ## Summary by CodeRabbit * **Style** * Standardized warning-series and highlight colors across charts, logs, countdown timers, and interface indicators using the shared theme tokens (`--chart-warning` / `--chart-warning-muted`). * Refreshed warning-related theme wiring for both light and dark modes, including sidebar foreground color. * **Bug Fixes** * Updated “dirty” table cell text color to align with the revised warning palette. --- .../EdgeFunctionOverview/EdgeFunctionOverview.utils.ts | 2 +- .../QueryInsightsHealth/QueryInsightsHealth.constants.ts | 2 +- .../components/interfaces/UnifiedLogs/UnifiedLogs.tsx | 2 +- .../components/ui/CountdownTimer/CountdownTimerRadial.tsx | 4 ++-- apps/studio/styles/globals.css | 8 +++++--- apps/studio/styles/grid.css | 2 +- packages/ui-patterns/src/LogsBarChart/index.tsx | 4 ++-- 7 files changed, 13 insertions(+), 11 deletions(-) diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.utils.ts b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.utils.ts index dfe484ea94c..ffbb70eba1c 100644 --- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.utils.ts +++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.utils.ts @@ -87,7 +87,7 @@ export const INVOCATION_CHART_CONFIG = { }, warning_count: { label: 'Warnings', - color: 'hsl(var(--warning-default))', + color: 'var(--chart-warning)', }, error_count: { label: 'Errors', diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsightsHealth/QueryInsightsHealth.constants.ts b/apps/studio/components/interfaces/QueryInsights/QueryInsightsHealth/QueryInsightsHealth.constants.ts index 923420cc27c..45ebd92413d 100644 --- a/apps/studio/components/interfaces/QueryInsights/QueryInsightsHealth/QueryInsightsHealth.constants.ts +++ b/apps/studio/components/interfaces/QueryInsights/QueryInsightsHealth/QueryInsightsHealth.constants.ts @@ -19,6 +19,6 @@ export const HEALTH_LEVELS: Record export const HEALTH_COLORS: Record = { healthy: 'hsl(var(--brand-default))', - warning: 'hsl(var(--warning-default))', + warning: 'var(--warning)', critical: 'hsl(var(--destructive-default))', } diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx index ebbb41527bb..c927d36fe83 100644 --- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx +++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx @@ -73,7 +73,7 @@ export const CHART_CONFIG = { }, warning: { label: , - color: 'hsl(var(--warning-default))', + color: 'var(--chart-warning)', }, error: { label: , diff --git a/apps/studio/components/ui/CountdownTimer/CountdownTimerRadial.tsx b/apps/studio/components/ui/CountdownTimer/CountdownTimerRadial.tsx index dc91a0ebc9a..93f4040f042 100644 --- a/apps/studio/components/ui/CountdownTimer/CountdownTimerRadial.tsx +++ b/apps/studio/components/ui/CountdownTimer/CountdownTimerRadial.tsx @@ -8,11 +8,11 @@ interface CountdownTimerRadialProps { const chartConfig = { timeRemaining: { label: 'timeRemaining', - color: 'hsl(var(--warning-default))', + color: 'var(--warning)', }, hand: { label: 'hand', - color: 'hsl(var(--warning-default))', + color: 'var(--warning)', }, } satisfies ChartConfig diff --git a/apps/studio/styles/globals.css b/apps/studio/styles/globals.css index 2cc285f33ee..3b9726e0460 100644 --- a/apps/studio/styles/globals.css +++ b/apps/studio/styles/globals.css @@ -144,12 +144,13 @@ --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --chart-blue: 217 91% 60%; - --chart-warning: hsl(var(--warning-default)); + --chart-warning: hsl(var(--warning-500)); + --chart-warning-muted: hsl(var(--warning-400)); --chart-destructive: hsl(var(--destructive-default)); --sidebar-background: var(--background-dash-sidebar); --sidebar-foreground: var(--foreground-default); --sidebar-primary: var(--foreground-default); - --sidebar-primary-foreground: hsl(var(--warning-default)); + --sidebar-primary-foreground: var(--warning); --sidebar-accent: var(--background-selection); --sidebar-accent-foreground: var(--foreground-default); --sidebar-border: var(--border-default); @@ -166,11 +167,12 @@ --chart-5: 340 75% 55%; --chart-blue: 217 91% 65%; --chart-warning: hsl(var(--warning-default)); + --chart-warning-muted: hsl(var(--warning-500)); --chart-destructive: hsl(var(--destructive-default)); --sidebar-background: var(--background-dash-sidebar); --sidebar-foreground: var(--foreground-default); --sidebar-primary: var(--foreground-default); - --sidebar-primary-foreground: hsl(var(--warning-default)); + --sidebar-primary-foreground: var(--warning); --sidebar-accent: var(--background-selection); --sidebar-accent-foreground: var(--foreground-default); --sidebar-border: var(--border-default); diff --git a/apps/studio/styles/grid.css b/apps/studio/styles/grid.css index ba38d053d2b..ff580c1fa2f 100644 --- a/apps/studio/styles/grid.css +++ b/apps/studio/styles/grid.css @@ -47,7 +47,7 @@ /* Cell with unsaved changes - warning (amber) background/text color */ .rdg-cell.rdg-cell--dirty { background-color: hsl(var(--warning-300) / 0.75); - color: hsl(var(--warning-default)); + color: hsl(var(--warning-600)); } /* Row pending addition - green background, green text */ diff --git a/packages/ui-patterns/src/LogsBarChart/index.tsx b/packages/ui-patterns/src/LogsBarChart/index.tsx index 8747b3839fb..e8c2e005a6d 100644 --- a/packages/ui-patterns/src/LogsBarChart/index.tsx +++ b/packages/ui-patterns/src/LogsBarChart/index.tsx @@ -13,8 +13,8 @@ const CHART_COLORS = { GREEN_2: 'hsl(var(--brand-500))', RED_1: 'hsl(var(--destructive-default))', RED_2: 'hsl(var(--destructive-500))', - YELLOW_1: 'hsl(var(--warning-default))', - YELLOW_2: 'hsl(var(--warning-500))', + YELLOW_1: 'var(--chart-warning)', + YELLOW_2: 'var(--chart-warning-muted)', } type LogsBarChartDatum = {