Theme

All CSS and SCSS files in the Raaghu Design System now use raaghu-react-themes as the single source of truth for all theme-related values.

📊 Integration Statistics

• 📁 Total Components: 60 RDS components
• 🎨 SCSS Files Created: 60 component stylesheets
• 🔧 Files Updated: 41 components updated to use theme variables
• 🏷️ Theme Variables: 348 theme variable usages across all components
• 📚 Documentation Files: 6 comprehensive documentation files created

🎯 What Was Achieved

1. Complete CSS/SCSS Architecture ✅

• Every component has its corresponding SCSS file with consistent naming
• File structure: rds-{component}/rds-{component}.scss
• BEM methodology with RDS prefixes: .rds-{component}__element--modifier

2. Centralized Theme System ✅

• Created custom-properties.scss with 150+ design tokens
• All components now use CSS custom properties from themes
• Single point of contact for all styling values
• Easy theme switching (light, dark)

3. Automated Tooling ✅

• generate-scss.js - Auto-generates SCSS files for new components
• update-theme-variables.js - Auto-updates components to use theme variables
• Consistent patterns and conventions across all files

🎨 Theme Integration Examples

Before Integration (Hardcoded Values)

.rds-button {
  background-color: #1976d2;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

After Integration (Theme Variables) ✨

.rds-button {
  background-color: var(--rds-button-primary-bg);
  padding: var(--rds-spacing-sm) var(--rds-spacing-md);
  border-radius: var(--rds-border-radius-sm);
  transition: all var(--rds-transition-base);
}

🔗 Single Point of Contact Flow

graph TD
    A[raaghu-react-themes/src/styles/] --> B[variables/color-variables.scss]
    A --> C[themes/light.scss]
    A --> D[themes/dark.scss]
    A --> F[custom-properties.scss]

    F --> G[CSS Custom Properties]
    G --> H[All RDS Components]

    H --> I[rds-button.scss]
    H --> J[rds-card.scss]
    H --> K[rds-alert.scss]
    H --> L[... 57 more components]

🛠️ Developer Experience

Import Theme in Your App

import '@waiin/raaghu-react/raaghu-react-themes/src/styles/themes/light.scss';

Use Theme Variables in Components

.my-component {
  // Colors
  background-color: var(--rds-background-paper);
  color: var(--rds-text-primary);
  border: 1px solid var(--rds-border-default);

  // Spacing
  padding: var(--rds-spacing-md);

  // Typography
  font-family: var(--rds-font-family-base);
  font-size: var(--rds-font-size-md);

  // Effects
  box-shadow: var(--rds-elevation-2);
  transition: all var(--rds-transition-base);
}

Switch Themes Easily

// Light theme
import 'raaghu-react-themes/src/styles/themes/light.scss';

// Dark theme
import 'raaghu-react-themes/src/styles/themes/dark.scss';

📈 Benefits Achieved

✅ Consistency

All components use the same color palette, spacing scale, typography, and interaction patterns.

✅ Maintainability

Change a color or spacing value in one place, see it reflected across all 60+ components.

✅ Theme Switching

Seamlessly switch between light and dark themes without rebuilding.

✅ Developer Productivity

Clear, semantic variable names make development faster and more intuitive.

✅ Performance

CSS custom properties enable efficient runtime theme changes.

✅ Scalability

Easy to add new components, themes, and design tokens following established patterns.