improvement(ui): centralize product colours in global CSS

[BillLeoutsakosvl346]

Summary

• Replace local product colours with shared definitions in globals.css, including presence avatars, Variables/Secrets tiles, table selections, document highlighting/search, diff controls and streaming shimmer.
• Preserve exact colours where possible; reuse the existing selection, amber, blue, orange and neutral palette for the approved near matches. Pin the remaining palette values in globals so runtime collaborator colours always resolve.
• Preserve selection opacity and send resolved colours in collaboration awareness for compatibility with older clients. Layout, sizing and interactions stay unchanged.

Type of Change

• Other: UI colour consolidation

Testing

• All workspace type checks, lint and 47 repository audits pass, including import resolution and API validation.
• 63 focused colour/collaboration tests pass, including CSS-variable alpha and resolved awareness colours for older clients.
• Browser comparisons cover all nine treatments in light and dark themes. Screenshots in the comments are isolated component/style fixtures using application CSS, not authenticated end-to-end product captures.
• External conformance scan leaves four dynamic-colour reports (--caret-color and the shimmer rest-colour fallback), reviewed against their shared token sources. Audit tools and images are outside this diff.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs	Skipped		Sep 21, 2026 8:10pm UTC

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge, with no actionable correctness, security, or repository-rule violations identified.

Summary

This PR centralizes product and collaborator colors in the global CSS theme while retaining compatibility with peers that require resolved awareness colors.

• Adds statically emitted runtime color tokens for collaborator identities and new utility classes.
• Migrates presence, table selection, editor highlighting, diff controls, preview tiles, and shimmer styling to shared tokens.
• Extends collaborator alpha handling to CSS variables and resolves local awareness colors before publication to older clients.
• Adds focused tests for identity-slot stability, CSS-variable opacity, legacy hexadecimal colors, and collaboration publication.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Global[Global CSS color tokens] --> Palette[getUserColor identity palette]
  Global --> UI[Presence, tables, preview, diff and shimmer UI]
  Palette --> Local[Local editor collaborator]
  Local --> Resolve[Resolve CSS variable at editor mount]
  Resolve --> Awareness[Yjs awareness payload]
  Awareness --> Peer[Remote peer caret and selection]
  Palette --> Alpha[withAlpha color-mix]
  Alpha --> UI

Loading

_{Reviews (1) · Last reviewed commit: "improvement(ui): centralize product colo..."}

[cubic-dev-ai]

No issues found across 12 files

Confidence score: 5/5

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

_{Re-trigger cubic}

[BillLeoutsakosvl346]

Before / after: all nine colour treatments

Base e07e7babb8 → 26aeedc61b. Each image shows before on the left, after on the right, with light and dark themes at matching scales. Small controls include labelled enlarged crops of the original screenshots.

These are isolated component/style fixtures using application CSS, with synthetic data. They cover the changed appearance, rather than an authenticated end-to-end session. Presence avatars, collaborator carets and shimmer render their actual implementations; the other samples apply the source classes/styles in a focused fixture. No layouts or interactions were redesigned.

1. Collaborator overflow avatar

Exact existing gray.

2. Variables tile

Exact original purple, now defined in globals.

3. Secrets tile

Exact original gray, now defined in globals.

4. Table selection tint

Existing selection blue at 6%, now adapts to theme.

5. Authored document highlight

Existing amber-400 at 40%.

6. Shared collaborator palette

Same six identity slots; blue and orange use close existing colours. Other shades retain their sRGB values.

7. Active document search match

Exact black from globals.

8. Accept changes border

Exact black/white alpha borders.

9. Streaming text shimmer

Shared body/gray tones; sweep and reduced-motion behavior unchanged.