# Tailwind Design Pro

A universal tailwind design system with multi-theme support and CSS custom properties for seamless theme switching.

## Features

-   **Multi-Theme System**: 5 pre-built themes (Default, Airbnb, Slack, GitHub, Spotify)
-   **CSS Custom Properties**: Theme-aware styling with CSS variables
-   **Dark/Light Mode**: Automatic theme switching with persistent preferences
-   **Component Library**: Pre-built UI components with theme integration
-   **Responsive Design**: Mobile-first approach with consistent breakpoints
-   **Accessibility**: WCAG compliant color contrasts and focus states

## Quick Start

### 1. Install the package

```bash
npm install @admin-layout/tailwind-design-pro
```

### 2. Import the CSS

```typescript
// In your main CSS file or entry point
import '@admin-layout/tailwind-design-pro/src/styles/index.css';
```

### 3. Configure Tailwind

```typescript
// tailwind.config.ts
import { themeConfig } from '@admin-layout/tailwind-design-pro';

export default {
    content: ['./src/**/*.{js,jsx,ts,tsx}', '../../packages/**/*.{js,jsx,ts,tsx}'],
    theme: {
        extend: themeConfig,
    },
    darkMode: 'class',
    plugins: [],
};
```

### 4. Set up Theme Provider

```tsx
import { ThemeProviderTailwind } from '@admin-layout/tailwind-ui';

const App = () => {
    const settings = {
        theme: 'default', // 'default', 'airbnb', 'slack', 'github', 'spotify'
        navTheme: 'light', // 'light' or 'dark'
        primaryColor: '#000000',
        fontFamily: 'Inter, sans-serif',
    };

    return (
        <ThemeProviderTailwind settings={settings} actor={actor}>
            <YourApp />
        </ThemeProviderTailwind>
    );
};
```

## Available Themes

### 1. Default Theme

-   Clean, professional design
-   Neutral color palette
-   Perfect for business applications

### 2. Airbnb Theme

-   Warm, welcoming colors
-   Red accent colors
-   Great for hospitality and travel apps

### 3. Slack Theme

-   Purple-based design
-   Modern, collaborative feel
-   Ideal for team communication tools

### 4. GitHub Theme

-   Dark, developer-friendly
-   High contrast design
-   Perfect for developer tools

### 5. Spotify Theme

-   Green accent colors
-   Music and entertainment focused
-   Great for media applications

## Theme-Aware CSS Classes

The design system provides theme-aware CSS classes that automatically adapt to the current theme:

### Background Colors

```css
.bg-background          /* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
/* Main background */
.bg-card               /* Card background */
.bg-popover            /* Popover background */
.bg-muted              /* Muted background */
.bg-accent; /* Accent background */
```

### Text Colors

```css
.text-foreground        /* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
/* Primary text */
.text-muted-foreground  /* Secondary text */
.text-primary           /* Primary brand color */
.text-secondary         /* Secondary brand color */
.text-accent; /* Accent color */
```

### Semantic Colors

```css
.text-success           /* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
/* Success text */
.text-warning           /* Warning text */
.text-error             /* Error text */
.text-info              /* Info text */
.bg-success             /* Success background */
.bg-warning             /* Warning background */
.bg-error               /* Error background */
.bg-info; /* Info background */
```

### Component Classes

```css
.themed-button          /* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
/* Theme-aware button */
.themed-card            /* Theme-aware card */
.themed-input           /* Theme-aware input */
.themed-modal           /* Theme-aware modal */
.themed-dropdown        /* Theme-aware dropdown */
.themed-sidebar; /* Theme-aware sidebar */
```

### Interactive Classes

```css
.interactive-hover      /* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
/* Hover effects */
.focus-themed           /* Focus states */
.rounded-themed         /* Theme-aware border radius */
.shadow-themed-sm       /* Theme-aware shadows */
.shadow-themed-md
.shadow-themed-lg
.shadow-themed-xl;
```

## Using Theme-Aware Components

### Basic Usage

```tsx
import { Button, Card, CardContent, CardHeader, CardTitle } from '@admin-layout/tailwind-ui';

const MyComponent = () => {
    return (
        <div className="bg-background text-foreground p-6">
            <Card className="themed-card">
                <CardHeader>
                    <CardTitle className="text-foreground">Card Title</CardTitle>
                </CardHeader>
                <CardContent>
                    <p className="text-muted-foreground">Card content</p>
                    <Button className="themed-button interactive-hover">Click Me</Button>
                </CardContent>
            </Card>
        </div>
    );
};
```

### Form Components

```tsx
const FormExample = () => {
    return (
        <form className="space-y-4">
            <div>
                <label className="text-foreground font-medium">Email</label>
                <input type="email" className="w-full themed-input focus-themed" placeholder="Enter your email" />
            </div>
            <Button type="submit" className="themed-button">
                Submit
            </Button>
        </form>
    );
};
```

### Theme Switching

```tsx
import { useTheme } from '@admin-layout/tailwind-ui';

const ThemeSwitcher = () => {
    const { theme, mode, toggleMode, setTheme, setMode } = useTheme();

    return (
        <div className="space-x-2">
            <Button
                onClick={() => setTheme('airbnb')}
                className={theme === 'airbnb' ? 'themed-button' : 'bg-muted text-foreground'}
            >
                Airbnb
            </Button>
            <Button
                onClick={() => setTheme('slack')}
                className={theme === 'slack' ? 'themed-button' : 'bg-muted text-foreground'}
            >
                Slack
            </Button>
            <Button onClick={toggleDarkMode}>{mode === 'dark' ? 'Light' : 'Dark'} Mode</Button>
        </div>
    );
};
```

## CSS Custom Properties

The design system uses CSS custom properties for dynamic theming:

### Color Variables

```css
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
}
```

### Theme-Specific Variables

Each theme has its own set of variables:

```css
[data-theme='airbnb'] {
    --primary: 0 100% 60%;
    --background: 0 0% 100%;
    /* ... other theme-specific variables */
}
```

## Best Practices

### 1. Use Theme-Aware Classes

```tsx
// ✅ Good - Theme-aware
<div className="bg-background text-foreground">
    <Button className="themed-button">Click</Button>
</div>

// ❌ Avoid - Hardcoded colors
<div className="bg-white text-black">
    <Button className="bg-blue-500 text-white">Click</Button>
</div>
```

### 2. Leverage Semantic Colors

```tsx
// ✅ Good - Semantic meaning
<div className="text-success">Success message</div>
<div className="text-error">Error message</div>

// ❌ Avoid - Hardcoded colors
<div className="text-green-500">Success message</div>
<div className="text-red-500">Error message</div>
```

### 3. Use Interactive Classes

```tsx
// ✅ Good - Built-in interactions
<Button className="themed-button interactive-hover">
    Hover me
</Button>

// ❌ Avoid - Custom hover states
<Button className="themed-button hover:scale-105 hover:shadow-lg">
    Hover me
</Button>
```

### 4. Responsive Design

```tsx
// ✅ Good - Responsive with theme
<div className="bg-background p-4 md:p-6 lg:p-8">
    <Card className="themed-card">
        <CardContent className="p-4 md:p-6">Content</CardContent>
    </Card>
</div>
```

## Migration Guide

### From Inline Styles to CSS Classes

**Before:**

```tsx
const { theme, isDarkMode } = useTheme();
const textColor = isDarkMode ? theme.colors.text.dark.primary : theme.colors.text.light.primary;

<div style={{ color: textColor, backgroundColor: theme.colors.background.light }}>Content</div>;
```

**After:**

```tsx
<div className="bg-background text-foreground">Content</div>
```

### From Custom Components to Theme-Aware Components

**Before:**

```tsx
<button
    style={{
        backgroundColor: theme.components.buttons.primary.background,
        color: theme.components.buttons.primary.text,
        borderRadius: theme.components.buttons.primary.borderRadius,
    }}
>
    Button
</button>
```

**After:**

```tsx
<Button className="themed-button">Button</Button>
```

## Troubleshooting

### Theme Not Applying

1. Ensure CSS is imported: `import '@admin-layout/tailwind-design-pro/src/styles/index.css'`
2. Check that `ThemeProviderTailwind` wraps your app
3. Verify theme name is valid: `'default'`, `'airbnb'`, `'slack'`, `'github'`, `'spotify'`

### Dark Mode Not Working

1. Check `navTheme` setting: `'light'` or `'dark'`
2. Ensure `darkMode: 'class'` in Tailwind config
3. Verify CSS custom properties are being applied

### Components Not Styled

1. Use theme-aware classes: `themed-button`, `themed-card`, etc.
2. Import components from `@admin-layout/tailwind-ui`
3. Check that CSS custom properties are loaded

## Contributing

When contributing to the theme system:

1. **Follow the CSS Custom Properties pattern**
2. **Use semantic color names**
3. **Test across all themes**
4. **Ensure accessibility compliance**
5. **Update documentation for new features**

## Examples

See the demo applications for complete examples:

-   `packages-modules/demo/tailwind-browser` - Tailwind examples
-   `packages-modules/demo/chakra-browser` - Chakra UI examples