# Design System - Backlog Labels

## Overview
Small pill-shaped labels used in the backlog to indicate task status. Features the signature Orange→Pink→Blue ripple effect on hover for consistency with the button system. These are non-interactive labels (not buttons) but still have hover feedback.

---

## Label Specs

### Dimensions

| Property | Value |
|----------|-------|
| Min Width | auto |
| Height | 28px |
| Padding | 4px 12px |
| Border Radius | 20px (pill shape) |

### Colors (Orange/Pink/Blue System)

| Variant | Background | Text |
|---------|------------|------|
| Default (To Do) | #E5E5E5 (Gray 200) | #404040 (Gray 700) |
| In Progress | #FFEDD5 (Orange 100) | #C2410C (Orange 700) |
| Done | #DBEAFE (Blue 100) | #1D4ED8 (Blue 700) |
| Blocked | #FCE7F3 (Pink 100) | #BE185D (Pink 700) |

### Typography

| Property | Value |
|----------|-------|
| Font Family | Space Grotesk |
| Font Size | 16px |
| Font Weight | 300 (Light) |
| Letter Spacing | -0.2px |
| Line Height | normal |
| Text Align | center |

---

## Code Reference

### HTML Structure

```html
<div class="backlog-label">
  <div class="ripple-grid"></div>
  <span class="label-content">To Do</span>
</div>
```

### CSS

```css
/* Backlog Label */
.backlog-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #E5E5E5; /* Gray 200 */
  overflow: hidden;
  cursor: default;
}

.backlog-label .ripple-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  z-index: 1;
  overflow: hidden;
  border-radius: 20px;
}

.label-content {
  position: relative;
  z-index: 2;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.2px;
  color: #404040; /* Gray 700 */
  white-space: nowrap;
}

/* Color Variants - Orange/Pink/Blue System */
.backlog-label.in-progress {
  background: #FFEDD5; /* Orange 100 */
}

.backlog-label.in-progress .label-content {
  color: #C2410C; /* Orange 700 */
}

.backlog-label.done {
  background: #DBEAFE; /* Blue 100 */
}

.backlog-label.done .label-content {
  color: #1D4ED8; /* Blue 700 */
}

.backlog-label.blocked {
  background: #FCE7F3; /* Pink 100 */
}

.backlog-label.blocked .label-content {
  color: #BE185D; /* Pink 700 */
}
```

---

## Ripple Effect

The label uses the same ripple effect as buttons for hover feedback.

### CSS

```css
.ripple-cell {
  background-color: rgba(0, 0, 0, 0.02);
  border: 0.5px solid rgba(0, 0, 0, 0.03);
  opacity: 0.5;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ripple-cell.ripple-active {
  animation: cellRipple var(--duration, 150ms) ease-out var(--delay, 0ms);
}

@keyframes cellRipple {
  0% {
    background-color: rgba(251, 146, 60, 0.85);
    opacity: 1;
  }
  40% {
    background-color: rgba(244, 114, 182, 0.75);
    opacity: 1;
  }
  70% {
    background-color: rgba(147, 197, 253, 0.6);
    opacity: 0.9;
  }
  100% {
    background-color: rgba(0, 0, 0, 0.02);
    opacity: 0.5;
  }
}
```

### JavaScript

```javascript
function setupLabelRipple(label) {
  const grid = label.querySelector('.ripple-grid');
  const cellSize = 6;
  const width = label.offsetWidth;
  const height = label.offsetHeight;
  const cols = Math.ceil(width / cellSize);
  const rows = Math.ceil(height / cellSize);

  grid.style.gridTemplateColumns = `repeat(${cols}, ${cellSize}px)`;
  grid.style.gridTemplateRows = `repeat(${rows}, ${cellSize}px)`;

  const cells = [];
  for (let i = 0; i < rows * cols; i++) {
    const cell = document.createElement('div');
    cell.className = 'ripple-cell';
    cell.dataset.row = Math.floor(i / cols);
    cell.dataset.col = i % cols;
    grid.appendChild(cell);
    cells.push(cell);
  }

  function triggerRipple(targetRow, targetCol) {
    cells.forEach((cell, idx) => {
      const row = Math.floor(idx / cols);
      const col = idx % cols;
      const distance = Math.hypot(targetRow - row, targetCol - col);
      const delay = distance * 15;
      const duration = 120 + distance * 20;

      cell.classList.remove('ripple-active');
      void cell.offsetWidth;

      cell.style.setProperty('--delay', `${delay}ms`);
      cell.style.setProperty('--duration', `${duration}ms`);
      cell.classList.add('ripple-active');

      setTimeout(() => {
        cell.classList.remove('ripple-active');
      }, delay + duration);
    });
  }

  let lastRippleTime = 0;
  label.addEventListener('mouseenter', (e) => {
    const now = Date.now();
    if (now - lastRippleTime > 300) {
      const rect = grid.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      triggerRipple(Math.floor(y / cellSize), Math.floor(x / cellSize));
      lastRippleTime = now;
    }
  });
}

// Initialize all labels
document.querySelectorAll('.backlog-label').forEach(setupLabelRipple);
```

---

## Design Tokens

### Colors (Orange/Pink/Blue System)

| Token | Value | Usage |
|-------|-------|-------|
| `--label-bg-default` | #E5E5E5 (Gray 200) | To Do background |
| `--label-text-default` | #404040 (Gray 700) | To Do text |
| `--label-bg-progress` | #FFEDD5 (Orange 100) | In Progress background |
| `--label-text-progress` | #C2410C (Orange 700) | In Progress text |
| `--label-bg-done` | #DBEAFE (Blue 100) | Done background |
| `--label-text-done` | #1D4ED8 (Blue 700) | Done text |
| `--label-bg-blocked` | #FCE7F3 (Pink 100) | Blocked background |
| `--label-text-blocked` | #BE185D (Pink 700) | Blocked text |

### Typography

| Token | Value |
|-------|-------|
| `--label-font-size` | 16px |
| `--label-font-weight` | 300 |
| `--label-letter-spacing` | -0.2px |

### Spacing

| Token | Value |
|-------|-------|
| `--label-padding-y` | 4px |
| `--label-padding-x` | 12px |
| `--label-border-radius` | 20px |
| `--label-height` | 28px |

---

## Usage

| Status | Class | Example Text |
|--------|-------|--------------|
| To Do | `.backlog-label` | To Do |
| In Progress | `.backlog-label.in-progress` | In Progress |
| Done | `.backlog-label.done` | Done |
| Blocked | `.backlog-label.blocked` | Blocked |

---

## Prototype
`backlog-labels-prototype/index.html`