refactor: tailwind config inline variables

[aaryan610]

Description

This PR refactors the tailwind config file to properly implement inline theme variables and make a clear distinction between primitive and semantic tokens.

Type of Change

• [x] Code refactoring

Summary by CodeRabbit

• Style
  • Standardized UI colors: replaced many hard-coded red/green utilities with semantic danger/success tokens for buttons, badges, icons, error/validation text, toolbars, modals, charts, and badges; adjusted typography weights in a few places for consistency.
• Refactor
  • Consolidated theming into a root-based, semantic, data-theme driven token system with expanded light/dark/high‑contrast profiles.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

[!WARNING]

Rate limit exceeded

@aaryan610 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 18 minutes and 53 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between f0f99d77998cc8d2efc0a3d6535dbcf4aca45594 and 86f65873af7a33120f099116159b3ce1d318710d.

📒 Files selected for processing (7)

• apps/space/core/components/issues/peek-overview/layout.tsx
• apps/web/core/components/home/root.tsx
• apps/web/core/components/inbox/content/inbox-issue-header.tsx
• apps/web/core/components/integration/github/root.tsx
• apps/web/core/components/integration/jira/root.tsx
• packages/tailwind-config/variables.css
• packages/utils/src/theme/theme-application.ts

[!NOTE]

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Large, cross-repo migration of styling and design tokens: renames and remappings from legacy color utilities (red/green/alpha tokens) to new semantic theme tokens (danger-/success-/neutral-/alpha- families), CSS variable reorganization, and localized typography/class selector tweaks; no exported API signature or control-flow changes detected.

Changes

Cohort / File(s)	Summary
Theming core packages/tailwind-config/variables.css, packages/utils/src/theme/theme-application.ts, packages/utils/src/theme/constants.ts	Central refactor: replace legacy CSS custom properties with semantic tokens (e.g., --neutral-*, --txt-*, --bg-*, --alpha-*), add data-theme blocks, update apply/clear variable keys, and freeze EDITOR_COLORS_LIGHT with as const.
Global token consumers (bulk replacements) packages/constants/..., packages/ui/src/..., packages/propel/src/..., packages/*/src/**/*, apps/**/core/components/**	Mass replace literal Tailwind color classes with semantic tokens (e.g., text-red-500 → text-danger-primary, text-green-500 → text-success-primary, border-red-500 → border-danger-strong, bg-green-500/20 → bg-success-primary). Mostly presentational changes across many components and helpers.
Editor — custom-image toolbar & modals packages/editor/src/core/extensions/custom-image/components/*	Normalize toolbar/modal visuals: swap alpha-based tokens for explicit translucent white/black classes (text-white/60, bg-black/80, bg-black/90), update icon/disabled states and overlay classes; no logic changes.
Propel primitives & design system packages/propel/src/avatar/avatar.tsx, packages/propel/src/banner/*, packages/propel/src/badge/*, packages/propel/src/button/*, packages/propel/src/pill/*, packages/propel/src/*stories.tsx	Update default Avatar.Fallback colors and component variant mappings to new semantic tokens (-primary, -strong, -subtle), plus story updates to reflect token renames.
App-level UI tweaks apps/web/..., apps/space/..., apps/admin/..., apps/web/app/...	Hundreds of UI components updated to new semantic tokens and a few typography/class selector adjustments (e.g., text-14 → text-body-sm-medium, *:fill-... → [&_svg]:fill-...). Changes are styling-only.
Stories & examples packages/**/stories.tsx, packages/propel/src/*stories.tsx, packages/propel/src/design-system/*	Storybook/story examples updated to use semantic tokens and reflect visual changes; some story args/className adjusted.
Small UX/behavioral CSS tweaks apps/web/core/components/analytics/*, apps/web/core/components/issues/*, apps/web/core/components/pages/*	Localized class changes affecting badges, radar chart series color, tooltip typography, and small layout classes; visual-only updates.
Manifests / package refs package.json mentions across diff	Package manifest references present in diffs; no API/export signature changes introduced.

Sequence Diagram(s)

(omitted — changes are styling/token renames and do not introduce new multi-component control flow)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• makeplane/plane#8372 — Large-scope CSS/class/token replacements across many of the same UI components and files; strong code-level overlap.

Suggested reviewers

• JayashTripathy
• anmolsinghbhatia

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 10.34% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'refactor: tailwind config inline variables' clearly and specifically describes the main change of refactoring the Tailwind configuration to implement inline theme variables.
Description check	✅ Passed	The description addresses the core purpose but lacks test scenarios and references sections required by the template; however, the provided information is substantive rather than vague.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}