npm package: @insight-services-apac/slidev-theme-insight
Description: Insight Enterprises branded Slidev theme — clean gradients, 26 components, light + dark modes
Author: Insight Services APAC
Latest version: 0.4.0

# slidev-theme-insight

Insight Enterprises branded [Slidev](https://sli.dev) theme — 15 components, 15 layouts, light + dark mode support.

## Install

```bash
npm install -D @insight-services-apac/slidev-theme-insight
```

```yaml
---
theme: @insight-services-apac/slidev-theme-insight
---
```

## Light / Dark Mode

Toggle with the Slidev toolbar or via frontmatter:

```yaml
---
colorSchema: light   # or "dark"
---
```

- **Light mode**: White backgrounds, gradient headings, subtle accents
- **Dark mode**: Deep purple-black canvas, luminous brand accents, auto-inverted logo

## Layouts

| Layout | Description | Key Props |
|--------|-------------|-----------|
| `cover` | Title slide | `background: "gradient" \| "clean" \| CSS` |
| `section` | Section divider | `number`, `background: "gradient" \| "dark" \| "clean"` |
| `default` | Content with gradient strip | `strip`, `variant: 1-5` |
| `two-cols` | Two-column | `strip`, `variant` — slots: `header`, `left`, `right` |
| `three-cols` | Three-column | `strip`, `variant` — slots: `header`, `col1`–`col3` |
| `four-cols` | Four-column | `strip`, `variant` — slots: `header`, `col1`–`col4` |
| `image-right` | Content left, image right | `image` — slot: `image` |
| `image-left` | Image left, content right | `image` — slot: `image` |
| `cards-vertical` | 3-up vertical cards | `strip`, `variant` — slots: `header`, `card1`–`card3` |
| `cards-horizontal` | 4-up horizontal cards | `strip`, `variant` — slots: `header`, `card1`–`card4` |
| `quote` | Testimonial with gradient wash | `strip` |
| `team` | Team member grid | `strip`, `variant` — slot: `header` |
| `fact` | Big stat/number | `strip`, `variant` |
| `swimlane` | Gantt-style timeline (backwards-compat wrapper — prefer `<SwimlaneChart>` component) | `strip`, `variant`, `periods`, `lanes`, `milestones` |
| `end` | Closing/thank-you | `background: "gradient" \| "dark"` |

### Strip Variants

Content layouts support a `variant` prop (1-5) for different gradient accent colours:

| Variant | Colours |
|---------|---------|
| 1 | Cyan to lavender to pink |
| 2 | Lavender to deep purple |
| 3 | Pink to magenta to purple |
| 4 | Purple to magenta to red |
| 5 | Purple to deep purple to black |

### SwimlaneChart Component

A Gantt-style timeline for project plans with lanes, activity bars, and milestone markers. Non-overlapping items share a row; overlapping items stack vertically to show concurrency.

Use the `<SwimlaneChart>` component inline in any layout:

```html
<SwimlaneChart
  :periods="['Week 1', 'Week 2', 'Week 3', 'Week 4']"
  :lanes="[
    { name: 'Design', color: '#582873', items: [
      { label: 'UX Research', start: 0, end: 2 },
      { label: 'Wireframes', start: 2, end: 3.5 },
    ]},
    { name: 'Build', color: '#5990F0', items: [
      { label: 'Sprint 1', start: 2, end: 4 },
    ]},
  ]"
  :milestones="[{ label: 'Go Live', at: 4, color: '#D30C55' }]"
/>
```

A `layout: swimlane` is also available for backwards compatibility (frontmatter-driven props).

**0-based positioning** — a single linear scale for `start`, `end`, and `at`:

| Value | Position |
|-------|----------|
| `0` | Left edge of period 1 |
| `0.5` | Middle of period 1 |
| `1` | Right edge of period 1 |
| `N` | Right edge of period N |

Best with 3–6 lanes and 4–10 periods.

## Components

All components are auto-imported by Slidev:

- `ActionStep` — Numbered action step with description slot
- `Badge` — Category label (solid/outline/subtle variants)
- `BrandBadge` — Top-left badge (e.g. "DEEP DIVE")
- `BrandGradient` — Gradient text wrapper
- `ChevronFlow` — Horizontal process chevrons
- `ConnectorBar` — Gradient bar with labelled items
- `ContentCard` — Card with coloured left accent border
- `InsightFooter` — Logo + confidential text
- `OfferBullet` — Bullet point with optional offer badge
- `PhaseCard` — Phase card (Align/Deliver/Embed style)
- `PillarCard` — Column card for pillar content
- `Pill` — Small coloured tag
- `PracticeRow` — Grid row with column slots
- `QuoteBlock` — Styled quote with attribution
- `SwimlaneChart` — Gantt-style horizontal timeline chart
- `TeamGrid` — Team member grid

## Brand Colours

| Name | Hex | CSS Variable |
|------|-----|-------------|
| Hustle | `#D30C55` | `--insight-hustle` |
| Inspired | `#ED1944` | `--insight-inspired` |
| Harmony | `#D40E8C` | `--insight-harmony` |
| Hunger | `#B01C87` | `--insight-hunger` |
| Heart | `#582873` | `--insight-heart` |
| Vision | `#5990F0` | `--insight-vision` |
| Zeal | `#4EC7EA` | `--insight-zeal` |

## Preview

```bash
npx slidev example.md
```