[WEB-5198] chore: consolidate global styles

[anmolsinghbhatia]

Description

Centralize all fonts and global styles into the @plane/tailwind-config package, eliminating style duplication across apps.

Key Changes:

• Centralized fonts: Moved Inter and Material Symbols Rounded fonts to @plane/tailwind-config/fonts/
• Consolidated styles: Created modular CSS structure in @plane/tailwind-config/styles/
• Self-contained package: Copied editor styles to make tailwind-config fully independent
• Clean imports: Updated all apps to use single import from @plane/tailwind-config/global.css
• Tailwind config refactor: Updated the tailwind.config.js file to make it more maintainable.

Tailwind config structure:

Module	Purpose	Key Features
utils.js	Helper functions	convertToRGB(), convertToRGBA()
content.js	Content paths	All file patterns for Tailwind scanning
colors.js	Color system	Custom, sidebar, toast, subscription colors
shadows.js	Shadow utilities	Standard & sidebar shadow scales
spacing.js	Spacing scale	90% scaled padding, margin, gap, space
typography.js	Typography	Font sizes, families, prose config
animations.js	Animations	Toaster & loader keyframes
layout.js	Layout utilities	Z-index hierarchy, breakpoints, heights
plugins.js	Custom plugins	External + custom utilities

Type of Change

• [x] Improvement
• [x] Code refactoring

Summary by CodeRabbit

• Infrastructure
  • Consolidated styling configuration into a centralized package for improved consistency and maintainability across applications.
  • Reorganized CSS modules into logical categories: base styles, components, editor, and themes.
  • Streamlined global stylesheet imports across applications for better code organization.

---

[!NOTE] Consolidates all global fonts/styles and Tailwind config into @plane/tailwind-config, updating apps to import a single shared stylesheet.

• Shared styling package (@plane/tailwind-config):
  • Modular Tailwind config: Split into colors, spacing, shadows, animations, typography, content, layout, plugins, and utils.
  • Global CSS: global.css now imports fonts, base resets, components (emoji picker, Power-K, day picker), themes (light/dark), utilities, and full editor styles (ProseMirror, tables, drag-drop, HLJS).
  • Build config: Adds postcss-import and resolver in postcss.config.js for @plane/* imports.
• Apps:
  • Replace per-app globals with @plane/tailwind-config/global.css in apps/admin, apps/space, and apps/web.
  • Remove redundant local style imports (e.g., emoji/day-picker) now covered by the shared stylesheet.

^{Written by Cursor Bugbot for commit 2c615bc850f09a0173a5d6ff2508e40d49f8c4f5. This will update automatically on new commits. Configure here.}

[makeplane[bot]]

Linked to Plane Work Item(s)

• [WEB-5198] Consolidate global styles

This comment was auto-generated by Plane

[coderabbitai[bot]]

[!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

The changes consolidate styling configuration and CSS into a centralized @plane/tailwind-config package. Local globals.css files across multiple apps are replaced with a single import. Tailwind configuration is refactored from inline definitions into modular configuration files. New theme, component, and editor CSS modules are added to the tailwind-config package, along with PostCSS import plugin support for namespace-aware module resolution.

Changes

Cohort / File(s)	Summary
Layout Import Updates apps/admin/app/layout.tsx, apps/space/app/layout.tsx, apps/web/app/layout.tsx	Updated global CSS import paths from local @/styles/globals.css to centralized @plane/tailwind-config/global.css
Removed Local Global Styles apps/admin/styles/globals.css, apps/space/styles/globals.css, apps/web/styles/globals.css, packages/ui/styles/globals.css	Deleted all local global CSS files containing theme definitions, resets, scrollbar styling, animations, and utility classes
Web App Layout Cleanup apps/web/app/(all)/layout.tsx	Removed three stylesheet imports: power-k.css, emoji.css, and react-day-picker styles
Tailwind Config Package Updates packages/tailwind-config/global.css, packages/tailwind-config/package.json, packages/tailwind-config/postcss.config.js	Updated global.css to minimal setup; added postcss-import dependency; configured postcss plugin with @plane/ namespace resolver
Base Styles packages/tailwind-config/styles/base/reset.css, packages/tailwind-config/styles/base/scrollbar.css, packages/tailwind-config/styles/base/typography.css	Added universal reset, custom scrollbar variants, and typography utilities including new font sizes and lineclamp
Component Styles packages/tailwind-config/styles/components/emoji-picker.css, packages/tailwind-config/styles/components/spinner.css, packages/tailwind-config/styles/components/tags-input.css, packages/tailwind-config/styles/components/utility-classes.css	Added component-specific styling including emoji picker search, animated spinner loader, tags input UI, and comprehensive utility animations and helper classes
Theme Configuration packages/tailwind-config/styles/themes/variables.css, packages/tailwind-config/styles/themes/light.css, packages/tailwind-config/styles/themes/dark.css, packages/tailwind-config/styles/themes/editor-colors.css	Added centralized CSS custom property tokens for colors, shadows, and theme-specific overrides for light and dark themes
Editor Styles packages/tailwind-config/styles/editor/variables.css, packages/tailwind-config/styles/editor/editor.css, packages/tailwind-config/styles/editor/table.css, packages/tailwind-config/styles/editor/github-dark.css, packages/tailwind-config/styles/editor/drag-drop.css, packages/tailwind-config/styles/editor/tailwind.css, packages/tailwind-config/styles/editor/index.css	Added comprehensive ProseMirror editor styling including base editor layout, table UI, drag-drop interactions, syntax highlighting, and editor-specific variables
Font and Style Index packages/tailwind-config/styles/fonts.css, packages/tailwind-config/styles/index.css	Added font-face declarations for Inter and Material Symbols; created central CSS import hub aggregating all style modules
Tailwind Modular Config packages/tailwind-config/config/animations.js, packages/tailwind-config/config/colors.js, packages/tailwind-config/config/content.js, packages/tailwind-config/config/layout.js, packages/tailwind-config/config/plugins.js, packages/tailwind-config/config/shadows.js, packages/tailwind-config/config/spacing.js, packages/tailwind-config/config/typography.js, packages/tailwind-config/config/utils.js	Created modular Tailwind configuration system with animations, colors, content globs, layout (z-index, screens, heights), plugins (animate, typography, container-queries), shadows, spacing, typography, and color conversion utilities
Main Tailwind Config packages/tailwind-config/tailwind.config.js	Refactored to import modular configuration modules and wire them into theme.extend instead of inline definitions

Sequence Diagram(s)

sequenceDiagram
    participant App as App (admin/space/web)
    participant Layout as layout.tsx
    participant TailwindConfig as @plane/tailwind-config
    participant Index as styles/index.css
    participant Base as styles/base/*
    participant Themes as styles/themes/*
    participant Editor as styles/editor/*
    
    App->>Layout: Request styling
    Layout->>TailwindConfig: Import global.css
    TailwindConfig->>Index: Load central index.css
    Index->>Base: Import reset, typography, scrollbar
    Index->>Themes: Import variables, light, dark, editor-colors
    Index->>Editor: Import editor styles (editor.css, table, drag-drop, etc.)
    Base-->>TailwindConfig: Provide base resets & utilities
    Themes-->>TailwindConfig: Provide theme tokens & color variables
    Editor-->>TailwindConfig: Provide editor-specific styling
    TailwindConfig-->>Layout: Resolved stylesheet
    Layout-->>App: Styled content

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Areas requiring extra attention:

• CSS variable token completeness: Verify that all color, shadow, and spacing tokens migrated from local globals.css files are now defined in the centralized theme files. Check for missing tokens that could break theme functionality.
• PostCSS plugin configuration: Review the custom resolve() function in postcss.config.js to ensure @plane/* namespace imports are correctly resolved and don't introduce circular dependencies.
• Editor styling migration: The editor styles are substantial and spread across multiple new files. Verify that all ProseMirror-specific selectors, drag-drop interactions, and table styling rules function correctly in the new modular structure.
• App-specific style removals: Confirm that removed imports from apps/web/app/(all)/layout.tsx (power-k.css, emoji.css, react-day-picker) don't introduce visual regressions; verify these styles are now provided by the centralized config.
• Tailwind config module wiring: Validate that all imports in the refactored tailwind.config.js are correctly wired into theme.extend and that the modular structure produces the same output as the previous inline configuration.
• Content glob patterns: Check the updated content globs in config/content.js to ensure all relevant template files are scanned for Tailwind class usage, especially for external packages.

🐰 Styles once scattered far and wide,
Now bundled in one place to hide,
With tailwind config modularized clean,
The prettiest refactor ever seen!
Themes and tokens dance in harmony,
A stylesheet symphony! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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 pull request title "[WEB-5198] chore: consolidate global styles" clearly and directly summarizes the primary objective of this changeset. The title accurately reflects the core purpose: consolidating and centralizing global styles and fonts from multiple apps into the @plane/tailwind-config package. The language is concise, specific, and immediately conveys the main change without unnecessary details, emojis, or vague terminology. A teammate scanning the commit history would quickly understand that this PR centralizes styling configuration.
Description Check	✅ Passed	The pull request description is comprehensive and substantially exceeds the template requirements for a refactoring-focused change. It includes a detailed "Description" section explaining the consolidation strategy with five key change categories, a properly marked "Type of Change" section with both "Improvement" and "Code refactoring" selected, and a detailed table documenting the new Tailwind config module structure. While the "Test Scenarios" and "References" sections are not explicitly included, they are non-critical for this type of architectural refactoring PR. The description provides sufficient context about what was changed, how it was organized, and why the changes matter for code maintainability.

✨ Finishing touches

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch chore-consolidate-global-styles

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d5d0e72ab88a5e92f0e4e54369413ff471c30745 and 2c615bc850f09a0173a5d6ff2508e40d49f8c4f5.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (1)

• packages/tailwind-config/styles/index.css (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/tailwind-config/styles/index.css

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Cursor Bugbot
• GitHub Check: Analyze (javascript)
• GitHub Check: Build and lint web apps

---

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.}

[lifeiscontent]

We should refactor all key frame animations to tailwind config