@manojkmfsi/monodog 1.1.37 → 1.1.39

package/monodog-dashboard/src/theme/INTEGRATION.md

@@ -1,381 +0,0 @@
-# Theme Integration with Tailwind CSS
-
-This document explains how the monodog theme system is integrated with Tailwind CSS through centralized configuration.
-
-## Architecture Overview
-
-The theme system uses a centralized configuration approach where:
-
-1. **Theme Definition**: All design tokens are defined in `src/theme/index.ts`
-2. **Tailwind Integration**: `tailwind.config.js` imports and uses the theme configuration
-3. **Component Styles**: `src/index.css` provides component classes based on the theme
-4. **Type Safety**: TypeScript ensures consistency across the entire system
-
-## File Structure
-
-```
-apps/dashboard/
-├── tailwind.config.js          # Imports theme configuration
-├── src/
-│   ├── index.css               # Component styles using theme
-│   └── theme/
-│       ├── index.ts            # ✨ Central theme configuration
-│       ├── examples.tsx        # Theme showcase
-│       ├── migration-guide.md  # Migration instructions
-│       ├── README.md           # Theme documentation
-│       └── INTEGRATION.md      # This file
-```
-
-## Integration Implementation
-
-### 1. Central Theme Configuration (`src/theme/index.ts`)
-
-```typescript
-export const colors = {
-  primary: {
-    /* Blue spectrum */
-  },
-  secondary: {
-    /* Green spectrum */
-  },
-  accent: {
-    /* Yellow spectrum */
-  },
-  neutral: {
-    /* Gray spectrum */
-  },
-} as const;
-
-export const semanticColors = {
-  success: colors.secondary,
-  warning: colors.accent,
-  error: {
-    /* Red spectrum */
-  },
-  info: {
-    /* Light blue spectrum */
-  },
-} as const;
-
-export const typography = {
-  fonts: {
-    sans: ['Inter', 'system-ui' /* ... */],
-    display: ['Inter', 'system-ui' /* ... */],
-    mono: ['"JetBrains Mono"', '"Fira Code"' /* ... */],
-  },
-  // ... sizes, weights
-} as const;
-
-// Export everything as a unified theme object
-export const theme = {
-  colors,
-  semanticColors,
-  typography,
-  shadows,
-  borderRadius,
-  // ... other design tokens
-} as const;
-```
-
-### 2. Tailwind Configuration (`tailwind.config.js`)
-
-```javascript
-import { theme } from './src/theme/index.js';
-
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      // Import colors from centralized theme
-      colors: {
-        primary: theme.colors.primary,
-        secondary: theme.colors.secondary,
-        accent: theme.colors.accent,
-        neutral: theme.colors.neutral,
-        success: theme.semanticColors.success,
-        warning: theme.semanticColors.warning,
-        error: theme.semanticColors.error,
-        info: theme.semanticColors.info,
-      },
-
-      // Import typography from centralized theme
-      fontFamily: {
-        sans: theme.typography.fonts.sans,
-        display: theme.typography.fonts.display,
-        mono: theme.typography.fonts.mono,
-      },
-
-      // Import design tokens from centralized theme
-      borderRadius: {
-        xl: theme.borderRadius.xl,
-        '2xl': theme.borderRadius['2xl'],
-        '3xl': theme.borderRadius['3xl'],
-      },
-
-      boxShadow: {
-        soft: theme.shadows.soft,
-        medium: theme.shadows.medium,
-        large: theme.shadows.large,
-      },
-
-      // Additional Tailwind-specific configuration
-      animation: {
-        /* ... */
-      },
-      keyframes: {
-        /* ... */
-      },
-      zIndex: {
-        /* ... */
-      },
-    },
-  },
-  plugins: [],
-};
-```
-
-### 3. Component Styles (`src/index.css`)
-
-```css
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .btn-primary {
-    @apply bg-primary-600 text-white px-4 py-2 rounded-lg font-medium 
-           hover:bg-primary-700 focus:ring-2 focus:ring-primary-500 
-           transition-colors duration-200;
-  }
-
-  .btn-secondary {
-    @apply bg-secondary-600 text-white px-4 py-2 rounded-lg font-medium 
-           hover:bg-secondary-700 focus:ring-2 focus:ring-secondary-500 
-           transition-colors duration-200;
-  }
-
-  /* ... other component styles */
-}
-```
-
-## Benefits of This Architecture
-
-### 1. Single Source of Truth
-
-- All design tokens are defined in one place (`src/theme/index.ts`)
-- Changes propagate automatically to Tailwind and components
-- No duplication of color values or design tokens
-
-### 2. Type Safety
-
-- TypeScript ensures consistency across the system
-- Compile-time validation of theme usage
-- Autocomplete for design tokens in IDE
-
-### 3. Maintainability
-
-- Easy to update colors, fonts, or spacing
-- Centralized theme modifications
-- Clear dependency chain
-
-### 4. Flexibility
-
-- Easy to create theme variants (dark mode, brand variants)
-- Programmatic theme generation
-- Runtime theme switching capabilities
-
-### 5. Developer Experience
-
-- Clear documentation and examples
-- Consistent API across components
-- Easy onboarding for new developers
-
-## Usage Examples
-
-### Using Theme in Components
-
-```tsx
-import { theme } from '../theme';
-
-// Access design tokens programmatically
-const buttonStyle = {
-  backgroundColor: theme.colors.primary[600],
-  borderRadius: theme.borderRadius.lg,
-  fontFamily: theme.typography.fonts.sans.join(', '),
-};
-
-// Or use Tailwind classes (recommended)
-<button className="btn-primary">Click me</button>;
-```
-
-### Using Theme in Utilities
-
-```typescript
-import { theme } from '../theme';
-
-// Create dynamic styles based on theme
-const getStatusColor = (status: string) => {
-  switch (status) {
-    case 'success':
-      return theme.semanticColors.success[600];
-    case 'warning':
-      return theme.semanticColors.warning[600];
-    case 'error':
-      return theme.semanticColors.error[600];
-    default:
-      return theme.colors.neutral[600];
-  }
-};
-```
-
-## Theme Updates
-
-### Adding New Colors
-
-1. **Update theme configuration**:
-
-```typescript
-// src/theme/index.ts
-export const colors = {
-  // ... existing colors
-  tertiary: {
-    50: '#...',
-    // ... full spectrum
-    950: '#...',
-  },
-} as const;
-```
-
-2. **Update Tailwind configuration**:
-
-```javascript
-// tailwind.config.js
-colors: {
-  // ... existing colors
-  tertiary: theme.colors.tertiary,
-},
-```
-
-3. **Create component classes** (if needed):
-
-```css
-/* src/index.css */
-.btn-tertiary {
-  @apply bg-tertiary-600 text-white px-4 py-2 rounded-lg font-medium 
-         hover:bg-tertiary-700 focus:ring-2 focus:ring-tertiary-500 
-         transition-colors duration-200;
-}
-```
-
-### Theme Variants
-
-The architecture supports multiple theme variants:
-
-```typescript
-// src/theme/variants/dark.ts
-export const darkTheme = {
-  ...theme,
-  colors: {
-    ...theme.colors,
-    neutral: {
-      // Inverted neutral colors for dark mode
-      50: '#030712',
-      100: '#111827',
-      // ...
-      950: '#f9fafb',
-    },
-  },
-};
-```
-
-## Migration from Hardcoded Values
-
-### Before
-
-```tsx
-<button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
-  Submit
-</button>
-```
-
-### After
-
-```tsx
-<button className="btn-primary">Submit</button>
-```
-
-The centralized theme system provides:
-
-- **95% reduction** in repeated style declarations
-- **100% consistency** in design token usage
-- **Zero duplication** of color and spacing values
-- **Easy maintenance** through single configuration point
-
-## Build Integration
-
-### TypeScript Compilation
-
-```json
-// tsconfig.json
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true
-  }
-}
-```
-
-### Vite Configuration
-
-The theme works seamlessly with Vite's build system:
-
-- ES modules for tree shaking
-- TypeScript for type safety
-- Hot reload for development
-
-## Performance Considerations
-
-### Bundle Size
-
-- Theme object is tree-shaken during build
-- Only used design tokens are included
-- No runtime overhead for unused values
-
-### CSS Generation
-
-- Tailwind's purge removes unused classes
-- Component classes are always included
-- Optimal CSS bundle size
-
-## Future Enhancements
-
-### Planned Features
-
-1. **Dynamic Theme Switching**: Runtime theme changes
-2. **Theme Generator**: Automated theme creation tools
-3. **Design Token Export**: JSON/CSS custom properties
-4. **Figma Integration**: Sync with design system
-
-### Extension Points
-
-```typescript
-// Easy to extend with new design tokens
-export const theme = {
-  // ... existing tokens
-  customTokens: {
-    gradients: {
-      /* ... */
-    },
-    patterns: {
-      /* ... */
-    },
-    illustrations: {
-      /* ... */
-    },
-  },
-} as const;
-```
-
-This centralized theme architecture provides a robust foundation for maintaining design consistency while enabling flexibility and growth for the monodog dashboard system.

package/monodog-dashboard/src/theme/README.md

@@ -1,239 +0,0 @@
-# monodog Dashboard Theme System
-
-This document outlines the comprehensive theme system implemented for the monodog dashboard application.
-
-## Overview
-
-The theme system provides a consistent design language across the entire dashboard with carefully crafted color palettes, typography, spacing, and component styles.
-
-## Color Palette
-
-### Primary Colors (Blue Spectrum)
-
-- **Usage**: Main actions, links, active navigation states, primary buttons
-- **Base Color**: `#3b82f6` (primary-500)
-- **Button Color**: `#2563eb` (primary-600)
-- **Hover Color**: `#1d4ed8` (primary-700)
-
-### Secondary Colors (Green Spectrum)
-
-- **Usage**: Success states, positive actions, secondary buttons
-- **Base Color**: `#22c55e` (secondary-500)
-- **Button Color**: `#16a34a` (secondary-600)
-- **Hover Color**: `#15803d` (secondary-700)
-
-### Accent Colors (Yellow Spectrum)
-
-- **Usage**: Warnings, highlights, attention-grabbing elements
-- **Base Color**: `#eab308` (accent-500)
-- **Warning Color**: `#ca8a04` (accent-600)
-- **Hover Color**: `#a16207` (accent-700)
-
-### Semantic Colors
-
-- **Success**: Green spectrum (same as secondary)
-- **Warning**: Yellow spectrum (same as accent)
-- **Error**: Red spectrum (`#ef4444` base)
-- **Info**: Light blue spectrum (`#0ea5e9` base)
-
-### Neutral Colors
-
-- **Usage**: Text, backgrounds, borders, subtle elements
-- **Range**: From `#f9fafb` (neutral-50) to `#030712` (neutral-950)
-
-## Typography
-
-### Font Families
-
-- **Primary**: Inter (Google Fonts)
-- **Display**: Inter (for headings)
-- **Monospace**: JetBrains Mono (for code)
-
-### Font Sizes
-
-- **xs**: 12px / 16px line height
-- **sm**: 14px / 20px line height
-- **base**: 16px / 24px line height
-- **lg**: 18px / 28px line height
-- **xl**: 20px / 28px line height
-- **2xl**: 24px / 32px line height
-- **3xl**: 30px / 36px line height
-- **4xl**: 36px / 40px line height
-
-### Font Weights
-
-- **Light**: 300
-- **Normal**: 400
-- **Medium**: 500 (default for most UI text)
-- **Semibold**: 600 (headings)
-- **Bold**: 700
-
-## Component Classes
-
-### Buttons
-
-```css
-.btn-primary     /* Primary blue button */
-.btn-secondary   /* Secondary green button */
-.btn-outline     /* Outlined button */
-.btn-ghost       /* Minimal button */
-.btn-success     /* Success state button */
-.btn-warning     /* Warning state button */
-.btn-error       /* Error state button */
-```
-
-### Input Fields
-
-```css
-.input-base      /* Standard input styling */
-.input-error     /* Error state input */
-.input-success   /* Success state input */
-```
-
-### Cards
-
-```css
-.card            /* Basic card with soft shadow */
-.card-elevated   /* Card with medium shadow */
-.card-interactive /* Interactive card with hover effects */
-```
-
-### Status Badges
-
-```css
-.badge-success   /* Green success badge */
-.badge-warning   /* Yellow warning badge */
-.badge-error     /* Red error badge */
-.badge-info      /* Blue info badge */
-.badge-neutral   /* Gray neutral badge */
-```
-
-### Navigation
-
-```css
-.nav-link        /* Base navigation link */
-.nav-link-active /* Active navigation state */
-.nav-link-inactive /* Inactive navigation state */
-```
-
-### Typography Classes
-
-```css
-.text-heading    /* Main headings */
-.text-subheading /* Subheadings */
-.text-body       /* Body text */
-.text-caption    /* Small caption text */
-.text-code       /* Monospace code text */
-```
-
-## Spacing System
-
-The spacing system follows a consistent scale:
-
-- **4px increments**: 1, 2, 3, 4, 5, 6
-- **8px increments**: 8, 10, 12, 16, 20, 24, 32
-
-## Shadows
-
-Three levels of elevation:
-
-- **Soft**: Subtle shadow for basic cards
-- **Medium**: Moderate shadow for elevated components
-- **Large**: Strong shadow for modals and overlays
-
-## Border Radius
-
-- **Base**: 4px for small elements
-- **lg**: 8px for buttons and inputs
-- **xl**: 12px for cards
-- **2xl**: 16px for large cards
-- **3xl**: 24px for hero elements
-
-## Usage Guidelines
-
-### Color Usage
-
-1. **Primary Blue**: Use for main call-to-action buttons, active navigation, and primary interactive elements
-2. **Secondary Green**: Use for success states, positive actions, and secondary buttons
-3. **Accent Yellow**: Use sparingly for warnings and important highlights
-4. **Neutral Gray**: Use for text, backgrounds, and subtle UI elements
-
-### Button Hierarchy
-
-1. **Primary**: Most important action on the page
-2. **Secondary**: Important but not primary actions
-3. **Outline**: Alternative actions
-4. **Ghost**: Minimal actions like "Cancel"
-
-### Typography Hierarchy
-
-1. **Headings**: Use `text-heading` with appropriate size
-2. **Subheadings**: Use `text-subheading`
-3. **Body Text**: Use `text-body`
-4. **Captions**: Use `text-caption`
-
-### Spacing Guidelines
-
-- Use consistent spacing between elements
-- Prefer the spacing scale over arbitrary values
-- Use larger spacing for section breaks
-- Use smaller spacing for related elements
-
-## Accessibility
-
-The theme system includes:
-
-- **WCAG AA compliant** color contrasts
-- **Focus rings** for keyboard navigation
-- **Semantic colors** for status communication
-- **Readable typography** with appropriate line heights
-
-## Dark Mode Support
-
-The current theme is designed for light mode. Dark mode support can be added by:
-
-1. Creating dark variants of the color palette
-2. Using CSS custom properties for theme switching
-3. Adding dark mode classes to components
-
-## Migration from Existing Code
-
-To migrate existing components:
-
-1. Replace hardcoded colors with theme classes
-2. Use component classes instead of utility combinations
-3. Update typography to use theme classes
-4. Standardize spacing using the theme scale
-
-## Examples
-
-### Before (Hardcoded)
-
-```tsx
-<button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
-  Submit
-</button>
-```
-
-### After (Theme Classes)
-
-```tsx
-<button className="btn-primary">Submit</button>
-```
-
-### Status Badge Example
-
-```tsx
-<span className="badge-success">Active</span>
-```
-
-### Card Example
-
-```tsx
-<div className="card p-6">
-  <h3 className="text-heading text-xl mb-4">Card Title</h3>
-  <p className="text-body">Card content goes here.</p>
-</div>
-```
-
-This theme system ensures consistency, maintainability, and a professional appearance across the entire monodog dashboard application.