@troshab/slidev-theme-troshab 0.1.0

package/styles/motion.css

@@ -0,0 +1,486 @@
+/* ============================================
+   slidev-theme-troshab — Motion System
+   ============================================
+
+   Based on IBM Carbon Design Motion Guidelines
+   https://carbondesignsystem.com/elements/motion/overview/
+
+   PRINCIPLES:
+   1. Purposeful — motion guides focus, not distracts
+   2. Responsive — motion gives feedback
+   3. Natural — follows physics, not linear
+   4. Automatic — smart defaults based on content type
+
+   ============================================ */
+
+/* ============================================
+   1. Motion Tokens
+   ============================================ */
+
+:root {
+  /* --- Easing Functions (IBM Carbon) --- */
+  /* Standard: default for most animations */
+  --ease-standard: cubic-bezier(0.2, 0.0, 0.38, 0.9);
+  /* Enter: elements entering the viewport */
+  --ease-enter: cubic-bezier(0.0, 0.0, 0.38, 0.9);
+  /* Exit: elements leaving the viewport */
+  --ease-exit: cubic-bezier(0.2, 0.0, 1.0, 0.9);
+  /* Expressive: for decorative/expressive animations */
+  --ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1.0);
+
+  /* --- Durations (IBM Carbon) --- */
+  --dur-fast-01: 70ms;    /* micro-interactions */
+  --dur-fast-02: 110ms;   /* small UI elements */
+  --dur-moderate-01: 150ms; /* medium complexity */
+  --dur-moderate-02: 240ms; /* opening/closing */
+  --dur-slow-01: 400ms;   /* large movements */
+  --dur-slow-02: 700ms;   /* complex sequences */
+
+  /* --- Exit Timing Modifier (Material Design) --- */
+  /* Exit animations should be ~20% faster than enter */
+  --dur-exit-modifier: 0.8;
+
+  /* --- Movement Distances --- */
+  --shift-xs: 6px;   /* subtle */
+  --shift-sm: 12px;  /* small */
+  --shift-md: 20px;  /* medium */
+  --shift-lg: 28px;  /* large */
+
+  /* --- Scale Values --- */
+  --scale-subtle: 0.985;
+  --scale-moderate: 0.95;
+  --scale-dramatic: 0.9;
+
+  /* --- Default Motion Mode (calm) --- */
+  --motion-duration: var(--dur-moderate-02);
+  --motion-ease: var(--ease-standard);
+  --motion-shift: var(--shift-md);
+  --motion-scale: var(--scale-subtle);
+
+  /* --- Stagger Delays --- */
+  --stagger-base: 50ms;
+}
+
+/* ============================================
+   2. Motion Modes
+   ============================================
+
+   Apply class to slide or container:
+   - (default): calm, minimal motion
+   - .motion-crisp: faster, smaller amplitudes
+   - .motion-expressive: softer, longer durations
+*/
+
+/* Crisp mode — faster, snappier */
+.motion-crisp {
+  --motion-duration: var(--dur-moderate-01);
+  --motion-ease: var(--ease-standard);
+  --motion-shift: var(--shift-sm);
+  --motion-scale: 0.99;
+  --stagger-base: 30ms;
+}
+
+/* Expressive mode — slower, more dramatic */
+.motion-expressive {
+  --motion-duration: var(--dur-slow-01);
+  --motion-ease: var(--ease-expressive);
+  --motion-shift: var(--shift-lg);
+  --motion-scale: var(--scale-moderate);
+  --stagger-base: 70ms;
+}
+
+/* ============================================
+   3. v-click Reveal Styles
+   ============================================
+
+   Default Slidev v-click behavior is fade + subtle rise.
+
+   Apply class to container for different effects:
+   - (default): fade + subtle rise
+   - .reveal-fade: opacity only
+   - .reveal-slide: slide from right
+   - .reveal-pop: scale up
+
+   Automatic detection by content type (no class needed):
+   - Code blocks: fade only (no movement disrupts alignment)
+   - Tables: fade only
+   - Lists: subtle slide from left
+   - Large text (KPIs): pop effect
+   - Blockquotes: fade only
+*/
+
+/* Default v-click: fade + subtle rise */
+.slidev-vclick-target {
+  transition:
+    opacity var(--motion-duration) var(--ease-enter),
+    transform var(--motion-duration) var(--ease-enter);
+}
+
+.slidev-vclick-hidden {
+  opacity: 0;
+  transform: translateY(var(--shift-sm));
+}
+
+/* reveal-fade: opacity only */
+.slidev-layout.reveal-fade .slidev-vclick-hidden,
+.slidev-layout.reveal-fade li.slidev-vclick-hidden,
+.slidev-layout.reveal-fade pre.slidev-vclick-hidden,
+.slidev-layout.reveal-fade .shiki.slidev-vclick-hidden,
+.slidev-layout.reveal-fade table.slidev-vclick-hidden,
+.slidev-layout.reveal-fade blockquote.slidev-vclick-hidden,
+.slidev-layout.reveal-fade img.slidev-vclick-hidden,
+.slidev-layout.reveal-fade svg.slidev-vclick-hidden {
+  opacity: 0;
+  transform: none;
+}
+
+/* reveal-slide: slide from right */
+.slidev-layout.reveal-slide .slidev-vclick-hidden,
+.slidev-layout.reveal-slide li.slidev-vclick-hidden,
+.slidev-layout.reveal-slide pre.slidev-vclick-hidden,
+.slidev-layout.reveal-slide .shiki.slidev-vclick-hidden,
+.slidev-layout.reveal-slide table.slidev-vclick-hidden,
+.slidev-layout.reveal-slide blockquote.slidev-vclick-hidden,
+.slidev-layout.reveal-slide img.slidev-vclick-hidden,
+.slidev-layout.reveal-slide svg.slidev-vclick-hidden {
+  opacity: 0;
+  transform: translateX(var(--motion-shift));
+}
+
+/* reveal-pop: scale up */
+.slidev-layout.reveal-pop .slidev-vclick-hidden,
+.slidev-layout.reveal-pop li.slidev-vclick-hidden,
+.slidev-layout.reveal-pop pre.slidev-vclick-hidden,
+.slidev-layout.reveal-pop .shiki.slidev-vclick-hidden,
+.slidev-layout.reveal-pop table.slidev-vclick-hidden,
+.slidev-layout.reveal-pop blockquote.slidev-vclick-hidden,
+.slidev-layout.reveal-pop img.slidev-vclick-hidden,
+.slidev-layout.reveal-pop svg.slidev-vclick-hidden {
+  opacity: 0;
+  transform: scale(var(--scale-moderate));
+}
+
+/* ============================================
+   3b. Automatic Content-Type Detection
+   ============================================
+
+   Smart v-click reveal based on element type.
+   These override the default rise animation for specific content.
+*/
+
+/* Code blocks: fade only (no movement disrupts alignment) */
+.slidev-layout pre.slidev-vclick-hidden,
+.slidev-layout .shiki.slidev-vclick-hidden,
+.slidev-layout pre .slidev-vclick-hidden,
+.slidev-layout .shiki .slidev-vclick-hidden {
+  transform: none;
+}
+
+/* Tables: fade only (preserves alignment) */
+.slidev-layout table.slidev-vclick-hidden,
+.slidev-layout table .slidev-vclick-hidden {
+  transform: none;
+}
+
+/* Blockquotes: fade only (elegant reveal) */
+.slidev-layout blockquote.slidev-vclick-hidden,
+.slidev-layout blockquote .slidev-vclick-hidden {
+  transform: none;
+}
+
+/* Lists inside v-clicks: subtle slide from left */
+.slidev-layout li.slidev-vclick-hidden {
+  transform: translateX(calc(var(--shift-sm) * -1));
+}
+
+/* Large text (KPIs, metrics): pop effect */
+.slidev-layout .text-4xl.slidev-vclick-hidden,
+.slidev-layout .text-5xl.slidev-vclick-hidden,
+.slidev-layout .text-6xl.slidev-vclick-hidden,
+.slidev-layout .text-7xl.slidev-vclick-hidden,
+.slidev-layout .text-8xl.slidev-vclick-hidden,
+.slidev-layout [class*="font-size-h1"].slidev-vclick-hidden,
+.slidev-layout .fact-value.slidev-vclick-hidden {
+  transform: scale(var(--scale-moderate));
+}
+
+/* Images: fade only */
+.slidev-layout img.slidev-vclick-hidden {
+  transform: none;
+}
+
+/* Diagrams (mermaid, SVG): fade only */
+.slidev-layout .mermaid.slidev-vclick-hidden,
+.slidev-layout svg.slidev-vclick-hidden {
+  transform: none;
+}
+
+/* ============================================
+   3c. List Stagger Pattern
+   ============================================
+
+   Natural stagger for v-clicks on list items.
+   Limited to 6 items (Material Design: avoid "crawling" effect).
+*/
+
+/* Default stagger delays */
+.slidev-layout li.slidev-vclick-target:nth-child(1) { transition-delay: 0ms; }
+.slidev-layout li.slidev-vclick-target:nth-child(2) { transition-delay: var(--stagger-base); }
+.slidev-layout li.slidev-vclick-target:nth-child(3) { transition-delay: calc(var(--stagger-base) * 2); }
+.slidev-layout li.slidev-vclick-target:nth-child(4) { transition-delay: calc(var(--stagger-base) * 3); }
+.slidev-layout li.slidev-vclick-target:nth-child(5) { transition-delay: calc(var(--stagger-base) * 4); }
+.slidev-layout li.slidev-vclick-target:nth-child(6) { transition-delay: calc(var(--stagger-base) * 5); }
+/* Items 7+ get no additional delay to avoid "crawling" */
+.slidev-layout li.slidev-vclick-target:nth-child(n+7) { transition-delay: calc(var(--stagger-base) * 5); }
+
+/* Reset delay when item becomes visible (avoid lingering delay) */
+.slidev-layout li.slidev-vclick-target:not(.slidev-vclick-hidden) {
+  transition-delay: 0ms;
+}
+
+/* ============================================
+   4. Layout Entrance Animations
+   ============================================
+
+   CSS-based entrance animations for key layouts.
+
+   SEMANTIC DIRECTION PHILOSOPHY:
+   - Headings (h1, h2, h3): "fall" from above ↓
+   - Content (single block): "rise" from below ↑
+   - Two columns: slide from sides ← →
+   - Grid (3-4 cols): all items rise from below ↑
+*/
+
+/* --- Fullscreen mode: slide+fade from below, staggered --- */
+.slide-fullscreen .slide-content h1 {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) both;
+}
+
+.slide-fullscreen .slide-content h2 {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 2) both;
+}
+
+.slide-fullscreen .slide-content > *:not(h1):not(h2) {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 4) both;
+}
+
+/* Fullscreen with bg: fade bg first, content slides up after */
+.slide-no-padding .slide-content {
+  animation: entrance-fade var(--dur-moderate-02) var(--ease-enter) both;
+}
+
+.slide-no-padding .slide-content > * {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 4) both;
+}
+
+/* ============================================
+   4b. Columns Mode Entrance Animations
+   ============================================
+
+   SEQUENCE: title (rise) -> subtitle (rise) -> columns
+   - 1/3/4 columns: rise from below, right after title/subtitle
+   - 2 columns: left from left, right from right
+   If no subtitle, columns appear sooner (delay * 2 instead of * 4)
+*/
+
+/* Title: slide+fade from below (first) */
+.slide-title {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) both;
+}
+
+/* Subtitle: slide+fade from below (second) */
+.slide-subtitle {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 2) both;
+}
+
+/* --- Single column: rise from below --- */
+.slide-single {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 4) both;
+}
+
+/* Single col without title+subtitle: faster start */
+.slide-columns > .slide-single:first-child {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) both;
+}
+
+/* Blockquotes in single col: fade only */
+.slide-single > blockquote {
+  animation: entrance-fade var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 4) both;
+}
+
+/* --- 2 columns: slide from sides toward center --- */
+.slide-grid > .slide-col:first-child:nth-last-child(2) {
+  animation: entrance-slide-right var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 4) both;
+}
+
+.slide-grid > .slide-col:last-child:nth-last-child(2) {
+  animation: entrance-slide-left var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 4) both;
+}
+
+/* --- 3+ columns: all rise from below --- */
+.slide-grid > .slide-col:first-child:nth-last-child(n+3),
+.slide-grid > .slide-col:first-child:nth-last-child(n+3) ~ .slide-col {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 4) both;
+}
+
+/* ============================================
+   4c. Split Mode Entrance Animations
+   ============================================
+
+   Split panels: left from left, right from right
+*/
+
+/* Left half slides from left edge */
+.slide-split > *:first-child {
+  animation: entrance-slide-right var(--dur-moderate-02) var(--ease-enter) both;
+}
+
+/* Right half slides from right edge */
+.slide-split > *:last-child:not(:first-child) {
+  animation: entrance-slide-left var(--dur-moderate-02) var(--ease-enter) both;
+}
+
+/* Split bg-only panel: fade */
+.slide-panel-bg-only {
+  animation: entrance-fade var(--dur-moderate-02) var(--ease-enter) both;
+}
+
+/* Split caption overlay: slides up after */
+.slide-caption-overlay {
+  animation: entrance-rise var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 4) both;
+}
+
+/* ============================================
+   5. Keyframe Animations
+   ============================================ */
+
+@keyframes entrance-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Fall from above — for headings */
+@keyframes entrance-fall {
+  from {
+    opacity: 0;
+    transform: translateY(calc(var(--shift-md) * -1));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Rise from below — for content */
+@keyframes entrance-rise {
+  from {
+    opacity: 0;
+    transform: translateY(var(--shift-md));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes entrance-scale {
+  from {
+    opacity: 0;
+    transform: scale(var(--scale-moderate));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Slide from left side (element comes from left) */
+@keyframes entrance-slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(calc(var(--shift-md) * -1));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Slide from right side (element comes from right) */
+@keyframes entrance-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(var(--shift-md));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ============================================
+   6. Utility Classes
+   ============================================ */
+
+/* Delay utilities for staggered animations */
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+.delay-400 { animation-delay: 400ms; }
+.delay-500 { animation-delay: 500ms; }
+
+/* Duration utilities */
+.duration-fast { animation-duration: var(--dur-fast-02); }
+.duration-moderate { animation-duration: var(--dur-moderate-02); }
+.duration-slow { animation-duration: var(--dur-slow-01); }
+
+/* No animation utility */
+.no-animate {
+  animation: none !important;
+  transition: none !important;
+}
+
+/* ============================================
+   7. Reduced Motion Support (WCAG 2.1)
+   ============================================
+
+   Users with vestibular disorders or motion sensitivity
+   can enable "Reduce motion" in their OS settings.
+   This disables all non-essential animations.
+
+   TODO: Uncomment when ready to enable reduced motion support
+*/
+
+/*
+@media (prefers-reduced-motion: reduce) {
+  .slidev-layout *,
+  .slide-fullscreen *,
+  .slide-content *,
+  .slide-columns *,
+  .slide-title,
+  .slide-single,
+  .slide-grid > .slide-col,
+  .slide-panel,
+  .slide-panel-content,
+  .slide-caption-overlay,
+  .slidev-layout .grid > * {
+    animation: none !important;
+    animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
+  }
+
+  .slidev-vclick-target {
+    transition-duration: 0.01ms !important;
+    transition-delay: 0ms !important;
+  }
+
+  .slidev-vclick-hidden {
+    opacity: 0;
+    transform: none !important;
+  }
+}
+*/

package/uno.config.ts

@@ -0,0 +1,67 @@
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+  // Safelist for dynamic classes that UnoCSS can't detect via static analysis
+  safelist: [
+    // Column spans for two-cols layout
+    'col-span-3', 'col-span-4', 'col-span-5', 'col-span-6', 'col-span-7', 'col-span-8', 'col-span-9',
+    // Grid classes
+    'grid', 'grid-cols-12',
+    // Gap classes
+    'gap-0', 'gap-1', 'gap-2', 'gap-4', 'gap-6', 'gap-8',
+    // Alignment classes
+    'items-start', 'items-center', 'items-end',
+  ],
+
+  shortcuts: {
+    // 12-column grid system
+    'grid-cols': 'grid grid-cols-12 gap-4',
+
+    // Column width shortcuts (left column width)
+    'is-3': 'col-span-3',
+    'is-4': 'col-span-4',
+    'is-5': 'col-span-5',
+    'is-6': 'col-span-6',
+    'is-7': 'col-span-7',
+    'is-8': 'col-span-8',
+    'is-9': 'col-span-9',
+
+    // Semantic aliases
+    'is-half': 'col-span-6',
+    'is-one-third': 'col-span-4',
+    'is-two-thirds': 'col-span-8',
+    'is-one-quarter': 'col-span-3',
+    'is-three-quarters': 'col-span-9',
+
+    // Layout utilities
+    'slide-content': 'h-full w-full p-8',
+    'slide-content-full': 'h-full w-full',
+    'flex-center': 'flex items-center justify-center',
+    'flex-col-center': 'flex flex-col items-center justify-center',
+
+    // Text utilities
+    'text-slide-title': 'text-4xl font-bold mb-4',
+    'text-slide-subtitle': 'text-2xl opacity-80',
+    'text-section-title': 'text-5xl font-bold',
+    'text-quote': 'text-3xl italic leading-relaxed',
+    'text-quote-author': 'text-xl opacity-70 mt-4',
+
+    // Note: Block and Theorem component styles are defined in CSS (colors.css + base.css)
+    // to properly use CSS variables for theming. Do not add UnoCSS shortcuts for these.
+  },
+
+  rules: [
+    // Dynamic column spans
+    [/^col-left-(\d+)$/, ([, d]) => ({ 'grid-column': `span ${d}` })],
+    [/^col-right-(\d+)$/, ([, d]) => ({ 'grid-column': `span ${12 - parseInt(d)}` })],
+  ],
+
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['IBM Plex Sans', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['IBM Plex Mono', 'Consolas', 'Monaco', 'monospace'],
+      },
+    },
+  },
+})