# IBL AI Base Styles

Pre-configured CSS design system for consistent theming across all IBL AI applications.

## Installation

If using the published package:

```bash
npm install @iblai/web-containers
```

## Usage

### In Next.js

Import in your root layout or global CSS file:

```typescript
// app/layout.tsx or app/globals.css
import '@iblai/web-containers/styles/base.css';
```

### In React (CRA, Vite, etc.)

Import in your main entry file:

```typescript
// src/index.tsx or src/App.tsx
import '@iblai/web-containers/styles/base.css';
```

### In CSS Files

```css
/* src/styles/globals.css */
@import '@iblai/web-containers/styles/base.css';
```

## CSS Variables

All design tokens are available as CSS variables:

### Colors

```css
var(--primary-color)        /* #0058cc */
var(--primary-light)        /* #00b0ef */
var(--primary-dark)         /* #004499 */
var(--accent-color)         /* #f6f8fe */
var(--accent-color-2)       /* #f5f8ff */
```

### Text Colors

```css
var(--text-primary)         /* #616a76 */
var(--text-secondary)       /* #717985 */
var(--text-muted)           /* #9ca3af */
```

### Backgrounds

```css
var(--background)           /* #ffffff */
var(--sidebar-bg)           /* #fafbfc */
var(--card-bg)              /* #ffffff */
var(--input-bg)             /* #f9fafb */
```

### Interactive States

```css
var(--hover-bg)             /* #f3f4f6 */
var(--active-bg)            /* var(--accent-color) */
var(--button-hover)         /* var(--primary-light) */
```

### Status Colors

```css
var(--success-color)        /* #10b981 */
var(--warning-color)        /* #f59e0b */
var(--error-color)          /* #ef4444 */
var(--info-color)           /* #3b82f6 */
```

### Gradients

```css
var(--gradient-bg)          /* linear-gradient(135deg, #00b0ef, #0058cc) */
```

## Utility Classes

### Background Classes

```html
<div class="bg-primary">Primary background</div>
<div class="bg-accent">Accent background</div>
<div class="bg-gradient-brand">Gradient background</div>
<div class="bg-avatar">Avatar background</div>
```

### Text Classes

```html
<p class="text-text-primary">Primary text</p>
<p class="text-text-secondary">Secondary text</p>
<p class="text-brand-gradient">Gradient text</p>
<a class="text-link">Link text</a>
```

### Border Classes

```html
<div class="border-color">Default border</div>
<div class="border-primary">Primary border</div>
```

### Component Classes

#### Buttons

```html
<!-- Primary button -->
<button class="btn btn-primary">Primary</button>

<!-- Secondary button -->
<button class="btn btn-secondary">Secondary</button>

<!-- Ghost button -->
<button class="btn btn-ghost">Ghost</button>
```

#### Inputs

```html
<input type="text" class="input" placeholder="Enter text..." />
```

#### Cards

```html
<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</div>
```

#### Badges

```html
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
```

#### Avatars

```html
<div class="avatar" style="width: 40px; height: 40px;">
  JD
</div>
```

#### Links

```html
<a href="#" class="link">Click here</a>
```

### Spacing & Layout

```css
/* Spacing variables */
var(--spacing-xs)    /* 4px */
var(--spacing-sm)    /* 8px */
var(--spacing-md)    /* 16px */
var(--spacing-lg)    /* 24px */
var(--spacing-xl)    /* 32px */
var(--spacing-2xl)   /* 48px */

/* Border radius */
var(--radius-sm)     /* 4px */
var(--radius-md)     /* 6px */
var(--radius-lg)     /* 8px */
var(--radius-xl)     /* 12px */
var(--radius-2xl)    /* 16px */
var(--radius-full)   /* 9999px */
```

### Shadows

```html
<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
```

### Border Radius

```html
<div class="rounded-sm">Small radius</div>
<div class="rounded-md">Medium radius</div>
<div class="rounded-lg">Large radius</div>
<div class="rounded-full">Fully rounded</div>
```

## Chat-Specific Utilities

Special classes for chat interfaces:

```html
<!-- Chat input -->
<input type="text" class="chat-input" placeholder="Type a message..." />

<!-- Chat buttons -->
<button class="chat-button-primary">Send</button>
<button class="chat-button-secondary">Cancel</button>

<!-- Chat tabs -->
<div class="chat-tab-active">Active Tab</div>
<div class="chat-tab-inactive">Inactive Tab</div>
```

## Examples

### Complete Button Component

```html
<button class="btn btn-primary shadow-md rounded-lg">
  Click Me
</button>
```

### Card with Gradient Header

```html
<div class="card shadow-lg">
  <div class="bg-gradient-brand rounded-lg" style="padding: 1rem; margin: -1rem -1rem 1rem -1rem;">
    <h2 style="color: white;">Gradient Header</h2>
  </div>
  <p class="text-text-secondary">Card content here</p>
</div>
```

### Input with Label

```html
<div>
  <label class="text-text-primary" style="display: block; margin-bottom: 0.5rem;">
    Email
  </label>
  <input type="email" class="input" placeholder="you@example.com" />
</div>
```

### Status Badges

```html
<div style="display: flex; gap: 0.5rem;">
  <span class="badge badge-success">Active</span>
  <span class="badge badge-warning">Pending</span>
  <span class="badge badge-error">Error</span>
  <span class="badge badge-info">Info</span>
</div>
```

## Customization

You can override any CSS variable in your own stylesheet:

```css
:root {
  --primary-color: #your-color;
  --accent-color: #your-accent;
  /* Override any other variables */
}
```

## Dark Mode Support

Basic dark mode support is included. Enable it by adding the `dark-mode` class to your root element:

```html
<html class="dark-mode">
  <!-- Your app -->
</html>
```

## Browser Support

- Chrome/Edge: Latest 2 versions
- Firefox: Latest 2 versions
- Safari: Latest 2 versions

## Tailwind CSS Integration

This package does **not** ship pre-built Tailwind utility CSS. The web-containers components use Tailwind utility classes (e.g., `lg:grid-cols-2`, `md:flex`, `hidden`), but those classes are generated by the **consuming app's** Tailwind instance.

### How it works

1. `@iblai/iblai-js` copies the compiled web-containers JS to `dist/web-containers/source/`
2. Consuming apps add a `@source` directive (Tailwind v4) or `content` path (v3) pointing to that directory
3. The consuming app's single Tailwind instance scans both its own code and the SDK source, generating one unified set of utilities

This avoids CSS cascade conflicts that occur when two separate Tailwind builds produce overlapping `@layer utilities` blocks.

See the [iblai-js README](../../iblai-js/README.md#styling-setup-tailwind-css) for consumer setup instructions.

## Contributing

To modify the base styles:

1. Edit `/packages/web-containers/src/styles/base.css`
2. Test in mentor, skills, or your SPA
3. Rebuild the package: `pnpm build`
4. Submit a PR with your changes

## License

MIT
