# Theme System - SOLID Principles Refactor

This document describes the refactored theme system that follows SOLID principles for better maintainability, extensibility, and testability.

## Architecture Overview

The theme system has been refactored from a monolithic class into a modular, extensible architecture:

```
theme/
├── interfaces/           # Type definitions (abstractions)
│   ├── ITheme.ts
│   ├── IColorSystem.ts
│   ├── ISpacingSystem.ts
│   ├── ITypographySystem.ts
│   └── IScreenSystem.ts
├── systems/             # Concrete implementations
│   ├── ColorSystem.ts
│   ├── SpacingSystem.ts
│   ├── TypographySystem.ts
│   └── ScreenSystem.ts
├── utils/               # Utility functions
│   ├── ColorUtils.ts
│   └── ViewportUtils.ts
├── examples/            # Usage examples
│   └── ThemeUsageExamples.ts
├── ThemeFactory.ts      # Factory for creating themes
└── index.ts            # Main entry point
```

## SOLID Principles Implementation

### 1. Single Responsibility Principle (SRP)

- **ColorSystem**: Only handles color definitions
- **SpacingSystem**: Only handles spacing values
- **TypographySystem**: Only handles typography settings
- **ScreenSystem**: Only handles responsive breakpoints
- **ColorUtils**: Only handles color-related utilities
- **ViewportUtils**: Only handles viewport-related utilities

### 2. Open/Closed Principle (OCP)

- The system is open for extension but closed for modification
- New color systems, spacing systems, etc. can be created by implementing the respective interfaces
- No need to modify existing code when adding new themes

### 3. Liskov Substitution Principle (LSP)

- All implementations can be substituted for their interfaces
- Custom color systems can replace the default ColorSystem without breaking functionality

### 4. Interface Segregation Principle (ISP)

- Interfaces are focused and specific
- Clients only depend on the interfaces they actually use
- No fat interfaces that force unnecessary dependencies

### 5. Dependency Inversion Principle (DIP)

- High-level modules depend on abstractions (interfaces)
- Low-level modules implement these abstractions
- Factory pattern enables dependency injection

## Usage Examples

### Basic Usage (Backward Compatible)

```typescript
import Theme from './theme';

// Old way (still works)
const primaryColor = Theme.colors.blue;
const spacing = Theme.paddings.medium;

// New way (recommended)
const theme = Theme.instance;
const newPrimaryColor = theme.colors.blue;
const newSpacing = theme.spacing.medium;
```

### Creating Custom Themes

```typescript
import {ThemeFactory, ColorSystem, SpacingSystem, TypographySystem, ScreenSystem} from './theme';

// Create a custom color system
class DarkColorSystem extends ColorSystem {
  readonly white = '#1a1a1a';
  readonly black = '#ffffff';
  // ... override other colors
}

// Create custom theme
const darkTheme = ThemeFactory.createCustomTheme(new DarkColorSystem(), new SpacingSystem(), new TypographySystem(), new ScreenSystem());

// Apply the theme
Theme.setTheme(darkTheme);
```

### Using in React Components

```typescript
import Theme from './theme';

function MyComponent() {
  const theme = Theme.instance;

  return (
    <div style={{
      backgroundColor: theme.colors.primaryBackground,
      color: theme.colors.white,
      padding: theme.spacing.medium,
      fontFamily: theme.typography.primaryFont
    }}>
      Content
    </div>
  );
}
```

## API Reference

### Theme Class

```typescript
class Theme {
  // Get the current theme instance
  static get instance(): ITheme;

  // Set a custom theme
  static setTheme(theme: ITheme): void;

  // Reset to default theme
  static resetToDefault(): void;

  // Backward compatibility
  static get colors(): IColorSystem;
  static get paddings(): ISpacingSystem;
  static get theme(): ITheme;
}
```

### ThemeFactory

```typescript
class ThemeFactory {
  // Create default theme
  static createDefaultTheme(): ITheme;

  // Create custom theme
  static createCustomTheme(
    colorSystem: IColorSystem,
    spacingSystem: IExtendedSpacingSystem,
    typographySystem: ITypographySystem,
    screenSystem: IScreenSystem
  ): ITheme;
}
```

### Utility Functions

```typescript
// Color utilities
ColorUtils.hexToRgba(hex: string, opacityPercentage: number): string | null;

// Viewport utilities
ViewportUtils.pxToVw(screenWidthInPixels: number, elementSizeInPixels: number): string;
```

## Migration Guide

### From Old Theme System

The refactored system maintains backward compatibility. Existing code will continue to work:

```typescript
// This still works
const color = Theme.colors.blue;
const padding = Theme.paddings.medium;
const themeConfig = Theme.theme;

// But this is recommended
const theme = Theme.instance;
const color = theme.colors.blue;
const padding = theme.spacing.medium;
```

### Benefits of Migration

1. **Better Performance**: Lazy loading and singleton pattern
2. **Extensibility**: Easy to create custom themes
3. **Testability**: Each component can be tested in isolation
4. **Maintainability**: Clear separation of concerns
5. **Type Safety**: Strong typing with interfaces

## Best Practices

1. **Use the new API**: Prefer `Theme.instance` over static properties
2. **Create custom themes**: Use the factory pattern for theme variations
3. **Implement interfaces**: When extending, implement the appropriate interfaces
4. **Use utility classes**: Leverage ColorUtils and ViewportUtils for common operations
5. **Test in isolation**: Each system can be unit tested independently

## Performance Considerations

The refactored system prioritizes performance through:

- **Singleton Pattern**: Single theme instance across the application
- **Lazy Loading**: Theme is created only when first accessed
- **Immutable Properties**: Readonly properties prevent accidental mutations
- **Efficient Factory**: Minimal overhead in theme creation

This architecture ensures the theme system is both performant and maintainable while following industry best practices for object-oriented design.
