@troshab/slidev-theme-troshab 0.1.0

package/example_slides/079-fancyarrow-demo.md

@@ -0,0 +1,23 @@
+---
+layout: slide
+---
+
+## <span v-mark.underline.orange="0">FancyArrow</span> Demo
+
+<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4rem; padding: 0 4rem;">
+  <div data-id="idea" style="padding: 1.5rem 2.5rem; border: 2px solid var(--color-primary); border-radius: 12px; text-align: center;">
+    <Icon name="ph-lightbulb-fill" color="warning" size="lg" />
+    <StyledText tag="p" bold><span v-mark.highlight.yellow="0" style="color: var(--color-drac-bg-900)">Idea</span></StyledText>
+  </div>
+  <div data-id="code" style="padding: 1.5rem 2.5rem; border: 2px solid var(--color-success); border-radius: 12px; text-align: center;">
+    <Icon name="ph-code-fill" color="success" size="lg" />
+    <StyledText tag="p" bold><span v-mark.highlight.green="0" style="color: var(--color-drac-bg-900)">Code</span></StyledText>
+  </div>
+  <div data-id="ship" style="padding: 1.5rem 2.5rem; border: 2px solid var(--color-info); border-radius: 12px; text-align: center;">
+    <Icon name="ph-rocket-launch-fill" color="info" size="lg" />
+    <StyledText tag="p" bold><span v-mark.highlight.cyan="0" style="color: var(--color-drac-bg-900)">Ship</span></StyledText>
+  </div>
+</div>
+
+<FancyArrow from="[data-id=idea]@right" to="[data-id=code]@left" color="var(--color-primary)" :width="2" arc="0.3" :roughness="2" :duration="500" />
+<FancyArrow from="[data-id=code]@right" to="[data-id=ship]@left" color="var(--color-success)" :width="2" arc="0.3" :roughness="2" :duration="500" :delay="500" />

package/example_slides/080-section-theme.md

@@ -0,0 +1,14 @@
+---
+layout: slide
+mode: fullscreen
+transition: fade
+---
+
+::bg::
+<Background :gradient="'subtle'" />
+
+::default::
+
+# Theme Features
+
+Colors, typography, motion, and accessibility

package/example_slides/081-color-architecture.md

@@ -0,0 +1,22 @@
+---
+layout: slide
+cols: 2
+---
+
+## Color Architecture
+
+::col1::
+
+### 3-Layer System
+
+- **Palette** - 11 families x 11 OKLCH shades
+- **Semantic** - meaning (`--color-primary`)
+- **Usage** - components use semantic only
+
+::col2::
+
+### Dracula / Alucard
+
+**Dark:** drac-bg-900, drac-fg-50, cyan-300 primary
+
+**Light:** alu-bg-50, drac-fg-900, purple-700 primary

package/example_slides/082-semantic-text-colors.md

@@ -0,0 +1,25 @@
+---
+layout: slide
+cols: 2
+---
+
+## Semantic Text Colors
+
+::col1::
+
+<StyledText color="primary">Primary</StyledText>
+<StyledText color="success">Success</StyledText>
+<StyledText color="warning">Warning</StyledText>
+<StyledText color="danger">Danger</StyledText>
+<StyledText color="info">Info</StyledText>
+<StyledText color="accent">Accent</StyledText>
+
+::col2::
+
+### Hierarchy
+
+Primary text - highest contrast
+
+<StyledText color="secondary">Secondary - supporting</StyledText>
+
+<StyledText color="tertiary" size="small">Tertiary - captions</StyledText>

package/example_slides/083-typography.md

@@ -0,0 +1,16 @@
+---
+layout: slide
+---
+
+# Typography
+
+## Heading 2 (43px)
+
+**Bold** for emphasis. *Italic* for titles/terms only.
+
+Body text 24px, `code` 18px (IBM Plex Mono).
+
+- Line height: 1.35 / Letter spacing: 0.02em
+- BDA-compliant word spacing: 0.07em (3.5x ratio)
+
+<StyledText size="small" color="tertiary">Sizes: h1 (57px), h2 (43px), base (24px), small (18px)</StyledText>

package/example_slides/084-typography-rationale.md

@@ -0,0 +1,22 @@
+---
+layout: slide
+cols: 2
+---
+
+# Why IBM Plex?
+
+::col1::
+
+### Readability
+
+- **Open-source** Sans + Mono family
+- **Large x-height** for small sizes
+- **Clear letterforms**, projector-tested
+
+::col2::
+
+### Dyslexia-Friendly
+
+- Distinct b/d/p/q shapes
+- Weight 400+ (no thin/light)
+- BDA spacing, left-aligned only

package/example_slides/085-icons.md

@@ -0,0 +1,24 @@
+---
+layout: slide
+cols: 2
+---
+
+# Phosphor Icons
+
+::col1::
+
+### Sizes
+
+<Icon name="ph-star" size="sm" /> sm <Icon name="ph-star" size="md" /> md <Icon name="ph-star" size="lg" /> lg <Icon name="ph-star" size="xl" /> xl
+
+### Weights
+
+<Icon name="ph-heart" size="lg" /> regular <Icon name="ph-heart-bold" size="lg" /> bold <Icon name="ph-heart-fill" size="lg" /> fill
+
+::col2::
+
+### Colors
+
+<Icon name="ph-check-circle-fill" size="lg" color="success" /> <Icon name="ph-warning-fill" size="lg" color="warning" /> <Icon name="ph-x-circle-fill" size="lg" color="danger" /> <Icon name="ph-info-fill" size="lg" color="info" />
+
+`<Icon name="ph-github-logo" />`

package/example_slides/086-tables.md

@@ -0,0 +1,14 @@
+---
+layout: slide
+---
+
+# Tables
+
+| Framework | Bundle | Performance | Learning | Ecosystem |
+|-----------|--------|-------------|----------|-----------|
+| React | ~42kb | 4/5 | Medium | Huge |
+| Vue | ~33kb | 4/5 | Easy | Large |
+| Svelte | ~1.6kb | 5/5 | Easy | Growing |
+| Solid | ~7kb | 5/5 | Medium | Growing |
+
+Markdown tables are auto-styled with theme colors, borders, and hover effects.

package/example_slides/087-code-blocks.md

@@ -0,0 +1,18 @@
+---
+layout: slide
+---
+
+## Code Blocks
+
+Shiki highlighting with Dracula/Alucard tokens
+
+```typescript {1,3-4}
+interface User {
+  id: string;
+  role: 'admin' | 'user';
+}
+async function fetchUsers(): Promise<User[]> {
+  const res = await fetch('/api/users');
+  return res.json();
+}
+```

package/example_slides/088-motion-modes.md

@@ -0,0 +1,35 @@
+---
+layout: slide
+cols: 3
+gap: '4'
+---
+
+# Motion Modes
+
+::col1::
+
+<Card title="Calm (default)" icon="ph-wave-sine">
+
+240ms, 20px shift. Standard presentations.
+
+</Card>
+
+::col2::
+
+<Card title="Crisp" icon="ph-lightning">
+
+150ms, 12px shift. Technical demos.
+
+</Card>
+
+::col3::
+
+<Card title="Expressive" icon="ph-sparkle">
+
+400ms, 28px shift. Creative storytelling.
+
+</Card>
+
+::footer::
+
+Apply via frontmatter: `class: motion-crisp` or `class: motion-expressive`

package/example_slides/089-slide-transitions.md

@@ -0,0 +1,31 @@
+---
+layout: slide
+cols: 2
+---
+
+# Slide Transitions
+
+::col1::
+
+### Available
+
+- `slide-left` - page turn (default)
+- `slide-right` - reverse page turn
+- `slide-up` - vertical
+- `slide-down` - vertical reverse
+- `fade` - crossfade
+- `none` - instant
+
+::col2::
+
+### Usage
+
+```yaml
+# Global (first slide)
+transition: slide-left
+
+# Per-slide override
+transition: fade
+```
+
+Set `transition: fade` on section headers for smooth breaks between sections.

package/example_slides/090-v-click-reveals.md

@@ -0,0 +1,40 @@
+---
+layout: slide
+cols: 2
+gap: '4'
+class: reveal-fade
+---
+
+# v-click Reveal Styles
+
+::col1::
+
+<v-click>
+
+**Default** - Fade + subtle rise
+
+</v-click>
+
+<v-click>
+
+**reveal-fade** - Opacity only (this slide)
+
+</v-click>
+
+::col2::
+
+<v-click>
+
+**reveal-slide** - Slide from right
+
+</v-click>
+
+<v-click>
+
+**reveal-pop** - Scale up
+
+</v-click>
+
+::footer::
+
+Apply via frontmatter: `class: reveal-fade` / `reveal-slide` / `reveal-pop`

package/example_slides/091-accessibility.md

@@ -0,0 +1,27 @@
+---
+layout: slide
+cols: 2
+---
+
+## Accessibility
+
+::col1::
+
+### WCAG Compliance
+
+- **AA contrast** (4.5:1+) all text
+- **AAA target** (7:1) primary text
+- **Non-text** (3:1+) borders, UI
+- **Focus visible** - 3px outline
+- **Reduced motion** (planned)
+
+::col2::
+
+### BDA-Friendly
+
+- IBM Plex: distinct letterforms
+- No thin/light weights
+- Left-aligned, never justified
+- Word spacing 0.08em
+- Letter spacing 0.02em
+- Off-white/off-black backgrounds

package/example_slides/092-safe-zone.md

@@ -0,0 +1,17 @@
+---
+layout: slide
+mode: fullscreen
+---
+
+::bg::
+<Background color="primary" />
+
+::default::
+
+# Safe Zone
+
+5% padding on all sides protects content from projector/TV overscan.
+
+`--safe-inset-x` and `--safe-inset-y` CSS variables.
+
+Use `padding: false` in fullscreen mode for true edge-to-edge content.

package/example_slides/093-questions.md

@@ -0,0 +1,8 @@
+---
+layout: slide
+mode: fullscreen
+transition: fade
+---
+
+<StyledText tag="h1" align="center">Questions?</StyledText>
+<StyledText align="center" color="secondary">github.com/troshab/slidev-theme-troshab</StyledText>

package/example_white.md

@@ -0,0 +1,10 @@
+---
+theme: ./
+title: slidev-theme-troshab Demo (Light)
+info: |
+  ## slidev-theme-troshab
+  Complete theme showcase — all layouts, components, and features
+colorSchema: light
+transition: slide-left
+src: ./example_content.md
+---