# Design System - Component States

## Overview

Component states provide visual feedback about interactivity and status. States use the signature ripple animation system with Orange→Pink→Blue colors to create consistent, recognizable feedback patterns.

---

## State Types

| State | Description | Visual Treatment |
|-------|-------------|------------------|
| **Default** | Resting state | No animation, base styling |
| **Hover** | Mouse over | Orange→Pink→Blue ripple outward |
| **Focus** | Keyboard focus | Orange→Pink→Blue pulsing ring |
| **Active** | Being pressed | Orange→Pink→Blue ripple inward |
| **Disabled** | Not interactive | 50% opacity, no animations |
| **Loading** | Processing | Orange→Pink→Blue gradient flow |
| **Error** | Invalid/failed | Red border pulse |
| **Success** | Completed | Orange→Pink→Blue gradient sweep |

---

## Color Tokens

```css
:root {
  /* State Colors */
  --state-default: transparent;
  --state-hover: rgba(251, 146, 60, 0.15);      /* Orange tint */
  --state-focus: rgba(147, 197, 253, 0.3);       /* Blue tint */
  --state-active: rgba(244, 114, 182, 0.2);      /* Pink tint */
  --state-disabled: rgba(0, 0, 0, 0.05);

  /* Feedback Colors */
  --state-error: rgba(239, 68, 68, 0.15);        /* Red tint */
  --state-error-solid: #EF4444;
  --state-success: rgba(34, 197, 94, 0.15);      /* Green tint */
  --state-success-solid: #22C55E;
  --state-warning: rgba(251, 146, 60, 0.15);     /* Orange tint */
  --state-warning-solid: #FB923C;

  /* Ripple Colors */
  --ripple-orange: #FB923C;
  --ripple-pink: #F472B6;
  --ripple-blue: #93C5FD;
}
```

---

## Ripple State System

Each state uses the brand colors (Orange→Pink→Blue) for visual consistency:

### Hover Ripple
- Colors: Orange (#FB923C) → Pink (#F472B6) → Blue (#93C5FD)
- Direction: Center outward
- Duration: 25ms interval, max radius 15
- Behavior: Cells activate from center point with color cycling

### Focus Ripple
- Colors: Orange (#FB923C) → Pink (#F472B6) → Blue (#93C5FD)
- Direction: Ring pulse around element
- Duration: 2s loop
- Behavior: Box-shadow cycles through brand colors

### Active Ripple
- Colors: Orange (#FB923C) → Pink (#F472B6) → Blue (#93C5FD)
- Direction: Inward compression
- Duration: 25ms interval
- Behavior: Ripple moves inward toward center

### Loading Gradient
- Colors: Orange (#FB923C) → Pink (#F472B6) → Blue (#93C5FD)
- Direction: Left to right sweep
- Duration: 1.5s loop
- Behavior: Gradient flows across element

### Success Sweep
- Colors: Orange (#FB923C) → Pink (#F472B6) → Blue (#93C5FD)
- Direction: Expanding outward
- Duration: 2s loop
- Behavior: Gradient expands from center

### Error Ripple
- Color: Red (#EF4444)
- Direction: Border pulse
- Duration: 1.5s loop
- Behavior: Border pulses red (semantic color preserved)

---

## Button States

### HTML Structure

```html
<!-- Default -->
<button class="btn btn-primary">
  <span class="btn-ripple"></span>
  <span class="btn-text">Button</span>
</button>

<!-- With state class -->
<button class="btn btn-primary state-hover">...</button>
<button class="btn btn-primary state-focus">...</button>
<button class="btn btn-primary state-active">...</button>
<button class="btn btn-primary state-disabled" disabled>...</button>
<button class="btn btn-primary state-loading">...</button>
<button class="btn btn-primary state-error">...</button>
<button class="btn btn-primary state-success">...</button>
```

### State Specifications

| State | Background | Border | Text | Animation |
|-------|------------|--------|------|-----------|
| Default | #1A1A2E | none | white | none |
| Hover | #2A2A3E | none | white | Orange ripple |
| Focus | #1A1A2E | 2px blue | white | Blue pulse |
| Active | #0A0A1E | none | white | Pink inward |
| Disabled | #1A1A2E | none | white 50% | none |
| Loading | #1A1A2E | none | white | Gradient flow |
| Error | #1A1A2E | 2px red | white | Red pulse |
| Success | #1A1A2E | 2px green | white | Green sweep |

---

## Input States

### HTML Structure

```html
<!-- Default -->
<div class="input-wrapper">
  <div class="input-ripple"></div>
  <input type="text" class="form-input" placeholder="Enter text">
</div>

<!-- With state class -->
<div class="input-wrapper state-focus">...</div>
<div class="input-wrapper state-error">...</div>
<div class="input-wrapper state-success">...</div>
<div class="input-wrapper state-disabled">...</div>
```

### State Specifications

| State | Background | Border | Animation |
|-------|------------|--------|-----------|
| Default | white | #E5E5E5 | none |
| Hover | white | #D4D4D4 | Orange cells |
| Focus | white | #93C5FD | Blue pulse |
| Disabled | #F5F5F5 | #E5E5E5 | none |
| Error | #FEF2F2 | #EF4444 | Red pulse |
| Success | #F0FDF4 | #22C55E | Green sweep |

---

## Card States

### HTML Structure

```html
<div class="card state-default">
  <div class="card-ripple"></div>
  <div class="card-content">...</div>
</div>
```

### State Specifications

| State | Shadow | Border | Animation |
|-------|--------|--------|-----------|
| Default | sm | #E5E5E5 | none |
| Hover | md | #E5E5E5 | Orange ripple |
| Focus | md | #93C5FD | Blue ring |
| Active | sm | #F472B6 | Pink compress |
| Selected | md | #FB923C | Orange border |
| Disabled | none | #E5E5E5 | 50% opacity |

---

## Checkbox/Radio States

### State Specifications

| State | Box | Check/Dot | Animation |
|-------|-----|-----------|-----------|
| Default | white border | hidden | none |
| Hover | orange tint | hidden | Ripple |
| Focus | blue ring | hidden | Pulse |
| Checked | gradient fill | white | Ripple burst |
| Disabled | gray bg | gray | none |
| Error | red border | hidden | Red pulse |

---

## Toggle States

### State Specifications

| State | Track | Thumb | Animation |
|-------|-------|-------|-----------|
| Off | #E5E5E5 | white | none |
| Off + Hover | #D4D4D4 | white | Thumb glow |
| On | gradient | white | Slide + ripple |
| On + Hover | gradient | white | Track pulse |
| Disabled | #F0F0F0 | #E5E5E5 | none |

---

## Implementation Pattern

### Ripple Grid System

Each component uses a grid-based ripple system:

```css
.component-ripple {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), 1fr);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
  pointer-events: none;
  overflow: hidden;
}

.ripple-cell {
  background: transparent;
  transition: background 150ms ease;
}

.ripple-cell.active {
  background: var(--ripple-color, var(--ripple-orange));
}
```

### State Classes

```css
/* Hover state */
.state-hover .ripple-cell {
  --ripple-color: var(--ripple-orange);
}

/* Focus state */
.state-focus {
  outline: 2px solid var(--ripple-blue);
  outline-offset: 2px;
}

/* Active state */
.state-active .ripple-cell {
  --ripple-color: var(--ripple-pink);
}

/* Error state */
.state-error {
  border-color: var(--state-error-solid);
}

.state-error .ripple-cell {
  --ripple-color: var(--state-error-solid);
}

/* Success state */
.state-success {
  border-color: var(--state-success-solid);
}

.state-success .ripple-cell {
  --ripple-color: var(--state-success-solid);
}

/* Disabled state */
.state-disabled {
  opacity: 0.5;
  pointer-events: none;
}
```

---

## Animation Timing

| Animation | Duration | Easing | Colors |
|-----------|----------|--------|--------|
| Hover ripple | 25ms interval | ease-out | Orange→Pink→Blue |
| Focus pulse | 2s loop | ease-in-out | Orange→Pink→Blue |
| Active ripple | 25ms interval | ease | Orange→Pink→Blue |
| Error pulse | 1.5s loop | ease | Red (#EF4444) |
| Success sweep | 2s loop | ease-out | Orange→Pink→Blue |
| Loading flow | 1.5s loop | linear | Orange→Pink→Blue |

---

## Accessibility

- All states must have sufficient color contrast (4.5:1 minimum)
- Focus states must be clearly visible for keyboard navigation
- Error states must not rely on color alone (include icons/text)
- Disabled states should indicate non-interactivity clearly
- Respect `prefers-reduced-motion` for all animations

```css
@media (prefers-reduced-motion: reduce) {
  .ripple-cell,
  .state-focus,
  .state-error,
  .state-success {
    animation: none;
    transition: none;
  }
}
```

---

## Prototype

`states-prototype/index.html`