refactor(ui): centralize status colours and slide shadow

[BillLeoutsakosvl346]

Summary

• Source the chat active-status dot and logs status colours from exact globals.css tokens.
• Give the repeated PPTX slide shadow one global recipe without changing its rendered value.
• Preserve existing light/dark appearances and status thresholds.

Base and design review

Targets the live usage-palette head ef78d224 (#8211). The local diff checker 3.10.6 reports seven central-definition items for the intentional global token additions and zero new colour-assignment violations. A prior false positive on box-shadow: var(--shadow-presentation-slide) was corrected and tested in the separate local tooling checkout; that tooling change is not in this product PR. Raw design results remain visible.

Validation

• Twenty-three focused tests, app type check with this branch's own dependencies, Biome, and diff whitespace check passed.
• Matched before/after captures have identical computed styles and pixel channels in light/dark at 16px and 20px root text. Evidence is outside the product checkout.
• Independent source review checked exact palette values, mixing mode, and visual parity.
• Comparable full scans and both bot reviews are pending; keep this PR unmerged until all checks and threads are complete.

Visual comparison

Representative matched captures from the local source-derived fixture. Before uses this PR’s base; after uses this PR’s head. Full light/dark and root-size matrices are retained outside the product branch.

Light · 16px root text · default

Before	After

Dark · 20px root text · default

Before	After

[BillLeoutsakosvl346]

@greptile review this PR

[BillLeoutsakosvl346]

@cubic-dev-ai review this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Skipped		Sep 24, 2026 6:53pm UTC

[cubic-dev-ai]

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge based on this review; no outstanding finding remains.

Summary

This PR centralizes existing chat-status colours, log-status colours, and the presentation-slide shadow in CSS tokens, then updates their consumers. The previous review SHA is the current head, so there are no changes since that review and no new findings to report.

_{Reviews (2) · Last reviewed commit: "Centralize chat and logs status colours ..."}

[cubic-dev-ai]

No issues found across 6 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}

[cubic-dev-ai]

1 issue found across 6 files

Confidence score: 4/5

• In apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx, the active-status dot may not resolve to its intended color because --color-yellow-500 is declared only inside @theme inline; define the referenced color token where it is available to :root or use a reliably defined token.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx">

<violation number="1" location="apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx:285">
P2: The active-status dot now renders via `var(--chat-status-active)`, but that token is defined in `:root` as `var(--color-yellow-500)`, and `--color-yellow-500: #eab308` is declared only inside `@theme inline` (globals.css lines 62–176). Per the codebase's own comment at globals.css lines 53–59, `@theme inline` substitutes values into utilities instead of declaring `--color-*` on `:root`, and Tailwind v4 does not emit those variables at runtime. So `var(--color-yellow-500)` is unresolved in the `:root` declaration, `--chat-status-active` computes as guaranteed-invalid, and `background-color: var(--chat-status-active)` falls back to `transparent` — the active dot that was `#EAB308` renders invisible. Define the token with a value that exists at runtime, e.g. `--chat-status-active: #eab308;` in globals.css, or declare the palette as real `:root` custom properties instead of `@theme inline` variables.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[BillLeoutsakosvl346]

@greptile review this PR

[BillLeoutsakosvl346]

@cubic-dev-ai review this PR

[cubic-dev-ai]

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

No issues found across 6 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

_{Re-trigger cubic}