feat: place all styles in global vars

[emir-karabeg]

Summary

Places all styles in global vars and fixes some styling elements.

Type of Change

• New feature

Testing

Solo testing.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• 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	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 12, 2025 0:42am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR introduces a centralized color system by adding comprehensive CSS variables to globals.css and systematically replacing hardcoded hex colors across 77 component files.

Key Changes:

• Added semantic color tokens (--bg, --surface-*, --text-*, --border-*, --brand-*)
• Added extended palette with --c-* prefix for specific hex values used throughout the codebase
• Updated all component files to use var(--variable-name) instead of hardcoded colors
• Maintained backward compatibility with legacy variables marked as @deprecated
• Updated .cursorrules documentation to reflect new patterns

Concerns:

• Custom instruction c3b5e4b0-6580-4307-83aa-ba28f105b3c4 specifies avoiding globals.css edits unless absolutely necessary - this PR makes extensive changes (400+ lines)
• Inconsistent migration: some new code still uses hardcoded hex colors (e.g., border-[#E5E5E5], bg-[#1F1F1F]) instead of the corresponding CSS variables
• Mixed approach creates potential for confusion about which pattern to follow

Confidence Score: 3/5

• This PR is moderately safe to merge but conflicts with established custom instructions and has incomplete migration
• Score reflects: (1) direct violation of custom instruction to avoid globals.css edits, (2) incomplete migration with mixed hardcoded/variable usage patterns, (3) otherwise clean implementation with proper backward compatibility and no obvious runtime bugs
• Pay close attention to apps/sim/app/globals.css - verify this level of centralization aligns with architectural decisions despite custom instruction

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/globals.css	3/5	Massive addition of CSS variables (semantic tokens and extended palette) to centralize color definitions; violates custom instruction to avoid editing globals.css
apps/sim/components/emcn/components/button/button.tsx	5/5	Replaced hardcoded hex colors with CSS variables for consistency
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/editor.tsx	5/5	Replaced hardcoded colors with CSS variables; commented out unused Crosshair icon and Focus on block feature
apps/sim/.cursorrules	5/5	Updated documentation examples to show CSS variable usage pattern

Sequence Diagram

sequenceDiagram
participant Dev as Developer
participant GC as globals.css
participant Comp as Components (77 files)
participant UI as UI Rendering
Dev->>GC: Add semantic color tokens<br/>(--bg, --surface-*, --text-*, etc.)
Dev->>GC: Add extended palette<br/>(--c-E5E5E5, --c-414141, etc.)
Dev->>GC: Add RGB variants for opacity
loop For each component
Dev->>Comp: Replace hardcoded hex colors
Comp-->>Comp: Update from bg-[#1E1E1E]
Comp-->>Comp: to bg-[var(--surface-1)]
Dev->>Comp: Update dark mode variants
Comp-->>Comp: Update from dark:bg-[#363636]
Comp-->>Comp: to dark:bg-[var(--surface-9)]
end
Dev->>Comp: Update .cursorrules examples
Comp->>GC: Reference CSS variables
GC->>UI: Apply consistent theming
Note over GC,UI: Centralized color management<br/>Single source of truth

Loading

[greptile-apps]

_{74 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}