[Set Up] [FE] Set Up Global Tailwind/CSS Styles Based on App Style Theme

[liya-oz]

The main idea behind this task is that styles are unified and not hard coded especially things related to colors/fonts.

result: instead of using #dbeafe to reference a color in the component. I can use a variable primary-color or custom tailwind class/color that make it.
Hardcoded: text-red-500
Globalized: text-error

Below is a very long and maybe not accurate AI explanation that you can get an idea from or just ignore and do your own research.

[Muatasim-Aswad]

AI description:

Based on the project structure and technology stack, here's a comprehensive task description for adding global style configuration:

Task: Implement Global Style Configuration System

Overview

Add a comprehensive global style configuration system to standardize design tokens, themes, and styling patterns across the Easy Fixer web application. This will ensure consistency, maintainability, and scalability of the UI components.

Scope

This task focuses on the web application (apps/web/) which uses Next.js 15, React 19, and Tailwind CSS 4.

Requirements

1. Design System Foundation

• Design Tokens: Create a centralized configuration for colors, typography, spacing, breakpoints, shadows, and animations
• Theme System: Implement light/dark theme support with CSS custom properties
• Component Variants: Define consistent styling patterns for common component states (hover, focus, disabled, etc.)

2. Tailwind CSS Configuration

• Custom Configuration: Extend the existing Tailwind CSS 4 setup with project-specific design tokens
• Utility Classes: Create custom utility classes for frequently used patterns
• Component Classes: Define reusable component-level CSS classes
• Responsive Design: Configure consistent breakpoints and responsive utilities

3. Global Stylesheets

• CSS Reset/Normalize: Implement a consistent baseline across browsers
• Typography Scales: Define heading hierarchies, body text, and specialty text styles
• Layout Utilities: Create consistent spacing, grid, and flexbox patterns
• Animation Library: Set up micro-interactions and transition patterns

4. Theme Management

• Theme Provider: Implement a React context for theme switching
• CSS Custom Properties: Use CSS variables for dynamic theme switching
• Persistence: Save user theme preferences in localStorage
• System Preference Detection: Respect user's OS theme preference

5. Developer Experience

• TypeScript Support: Type definitions for theme tokens and styling utilities
• Documentation: Style guide with examples of all design tokens and components
• Linting: ESLint rules for consistent CSS class usage
• Storybook Integration (if applicable): Document styling patterns

Technical Implementation

File Structure

apps/web/src/
├── styles/
│   ├── globals.css          # Global styles and CSS reset
│   ├── themes.css           # Theme definitions and CSS variables
│   ├── components.css       # Global component styles
│   └── utilities.css        # Custom utility classes
├── lib/
│   ├── theme/
│   │   ├── provider.tsx     # Theme context provider
│   │   ├── hooks.ts         # useTheme and related hooks
│   │   └── types.ts         # Theme-related TypeScript types
│   └── styles/
│       ├── tokens.ts        # Design token definitions
│       └── utils.ts         # Style utility functions
├── components/
│   └── ui/                  # Base UI components using the style system
└── app/
    └── layout.tsx           # Import global styles and theme provider

Configuration Files

• tailwind.config.js: Extended configuration with custom design tokens
• postcss.config.js: PostCSS plugins for Tailwind CSS 4
• .eslintrc.js: CSS-related linting rules

Deliverables

1. Design Token System

   • Complete set of design tokens (colors, typography, spacing, etc.)
   • TypeScript definitions for all tokens
   • Documentation of the token naming convention

2. Theme Implementation

   • Light and dark theme variants
   • Theme switching functionality
   • CSS custom properties for dynamic theming

3. Tailwind Configuration

   • Extended Tailwind config with custom tokens
   • Custom utility classes
   • Component-level CSS classes

4. Global Stylesheets

   • CSS reset and normalization
   • Typography system
   • Base component styles

5. Developer Tools

   • Theme provider and hooks
   • TypeScript support
   • Style guide documentation
   • ESLint configuration for CSS

Acceptance Criteria

• Design tokens are centrally defined and easily maintainable
• Light/dark theme switching works seamlessly
• All existing components integrate with the new style system
• Tailwind CSS configuration extends properly with custom tokens
• TypeScript provides full type safety for styling utilities
• Performance impact is minimal (no runtime CSS generation)
• Documentation clearly explains the style system usage
• ESLint enforces consistent CSS class usage
• Theme preferences persist across browser sessions
• System respects user's OS theme preference on first visit

Priority

High - This foundational work will impact all future UI development and should be completed before building additional components.

Estimated Effort

2-3 days for a senior developer, including documentation and testing.

Dependencies

• Existing Tailwind CSS 4 setup
• Next.js 15 app router structure
• React 19 features (if using new hook patterns)

Notes

• Ensure backward compatibility with existing styles
• Consider accessibility requirements (contrast ratios, focus states)
• Plan for future design system expansion
• Test across different browsers and devices
• Follow the project's feature-first architecture principles