@troshab/slidev-theme-troshab 0.1.0

package/components/Background.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+/**
+ * Background primitive — semantic wrapper for bg slots.
+ * Replaces <div class="bg-primary"></div> and raw ![](image) in bg slots.
+ *
+ * Gradient prop:
+ *   1. Presets (string): "accent" (colorful brand), "subtle" (neutral)
+ *   2. Full control (array): [type, direction, ...colorStops]
+ *      - type: 'linear' | 'radial' | 'conic'
+ *      - direction: CSS direction ('135deg', 'to right', 'circle', 'from 45deg')
+ *      - colorStops: [semanticColor, position] tuples
+ *
+ * Examples:
+ *   gradient="accent"
+ *   :gradient="['linear', '135deg', ['primary', '0%'], ['info', '100%']]"
+ *   :gradient="['radial', 'circle', ['primary', '0%'], ['soft', '100%']]"
+ *   :gradient="['linear', 'to right', ['danger', '0%'], ['warning', '50%'], ['success', '100%']]"
+ */
+
+import { computed, onMounted, ref } from 'vue'
+import type { BgColor } from '../composables/useColors'
+
+type ColorStop = [string, string]
+type GradientArray = [string, string, ...ColorStop[]]
+
+const props = defineProps<{
+  src?: string
+  fit?: 'cover' | 'contain'
+  color?: BgColor
+  gradient?: string | GradientArray
+  bgOverlay?: 'dark' | 'light' | 'none'
+  opacity?: number
+}>()
+
+const colorVarMap: Record<string, string> = {
+  primary: 'var(--color-primary)',
+  success: 'var(--color-success)',
+  warning: 'var(--color-warning)',
+  danger: 'var(--color-danger)',
+  info: 'var(--color-info)',
+  secondary: 'var(--color-secondary)',
+  accent: 'var(--color-accent)',
+  soft: 'var(--color-bg-soft)',
+  muted: 'var(--color-bg-muted)',
+}
+
+function resolveColor(name: string): string {
+  return colorVarMap[name] || name
+}
+
+const gradientStyle = computed(() => {
+  const g = props.gradient
+  if (!g) return undefined
+
+  // String presets
+  if (typeof g === 'string') {
+    if (g === 'accent') return { background: 'var(--gradient-accent)' }
+    if (g === 'subtle') return { background: 'var(--gradient-section)' }
+    return undefined
+  }
+
+  // Array: [type, direction, ...colorStops]
+  if (Array.isArray(g) && g.length >= 3) {
+    const [type, direction, ...stops] = g
+    const cssStops = stops
+      .map((s: ColorStop) => `${resolveColor(s[0])} ${s[1]}`)
+      .join(', ')
+    return { background: `${type}-gradient(${direction}, ${cssStops})` }
+  }
+
+  return undefined
+})
+
+const isVideo = props.src?.match(/\.(mp4|webm|ogg)(\?|$)/i)
+
+// --- Auto luminance detection for gradients ---
+// When gradient is used without bgOverlay, detect luminance at mount
+// and add a hidden marker class so :has() selectors in base.css
+// auto-adjust text color.
+
+const bgEl = ref<HTMLElement | null>(null)
+const luminanceHint = ref<string | null>(null)
+
+function parseRgb(raw: string): [number, number, number] | null {
+  raw = raw.trim()
+  if (raw.startsWith('#')) {
+    const hex = raw.length === 4
+      ? raw[1] + raw[1] + raw[2] + raw[2] + raw[3] + raw[3]
+      : raw.slice(1, 7)
+    return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)]
+  }
+  const m = raw.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+  if (m) return [+m[1], +m[2], +m[3]]
+  return null
+}
+
+function relativeLuminance(r: number, g: number, b: number): number {
+  const [rs, gs, bs] = [r / 255, g / 255, b / 255].map(c =>
+    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4),
+  )
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
+}
+
+function detectLuminance() {
+  // Only for color/gradient backgrounds without explicit bgOverlay or image
+  if (props.bgOverlay || props.src) return
+  if (!props.gradient) return
+
+  const el = bgEl.value
+  if (!el) return
+
+  // Read the resolved background from the rendered element
+  const style = getComputedStyle(el)
+  const bg = style.background || style.backgroundImage || style.backgroundColor || ''
+
+  // Parse all rgb() values from the resolved background
+  const rgbRegex = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/g
+  const luminances: number[] = []
+  let match
+  while ((match = rgbRegex.exec(bg))) {
+    luminances.push(relativeLuminance(+match[1], +match[2], +match[3]))
+  }
+
+  if (luminances.length === 0) return
+
+  // Average luminance across all gradient stops
+  const avg = luminances.reduce((a, b) => a + b, 0) / luminances.length
+  // 0.18 = crossover point where neither black nor white gives 4.5:1
+  // Above 0.18: black text is better (bg-overlay-light)
+  // Below 0.18: white text is better (bg-overlay-dark)
+  luminanceHint.value = avg > 0.18 ? 'bg-overlay-light' : 'bg-overlay-dark'
+}
+
+onMounted(detectLuminance)
+</script>
+
+<template>
+  <div
+    ref="bgEl"
+    class="background-fill"
+    :class="[
+      color ? `bg-${color}` : '',
+    ]"
+    :style="{
+      ...gradientStyle,
+      ...(opacity !== undefined && opacity !== 1 ? { opacity } : {}),
+    }"
+  >
+    <video
+      v-if="src && isVideo"
+      :src="src"
+      autoplay
+      loop
+      muted
+      playsinline
+      :style="{ objectFit: fit || 'cover' }"
+    />
+    <img
+      v-else-if="src"
+      :src="src"
+      alt=""
+      :style="{ objectFit: fit || 'cover' }"
+    />
+    <div
+      v-if="bgOverlay && bgOverlay !== 'none' && src"
+      class="bg-overlay"
+      :class="`bg-overlay-${bgOverlay}`"
+    />
+    <!-- Luminance hint: hidden marker for :has() text color detection -->
+    <span v-if="luminanceHint" :class="luminanceHint" style="display: none" aria-hidden="true" />
+  </div>
+</template>
+
+<style scoped>
+.background-fill {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.background-fill img,
+.background-fill video {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>
+
+<!-- Overlay classes must be global so :has() in base.css can detect them -->
+<style>
+.bg-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.bg-overlay-dark {
+  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-black) 40%, transparent) 0%, color-mix(in srgb, var(--color-black) 60%, transparent) 100%);
+}
+
+.bg-overlay-light {
+  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-white) 70%, transparent) 0%, color-mix(in srgb, var(--color-white) 85%, transparent) 100%);
+}
+</style>

package/components/Callout.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+/**
+ * Callout component - admonition/alert boxes
+ *
+ * Usage:
+ * <Callout type="info" title="Note">Content here</Callout>
+ * <Callout type="warning">Warning text</Callout>
+ * <Callout type="tip">Pro tip!</Callout>
+ * <Callout type="danger">Be careful</Callout>
+ */
+
+defineProps<{
+  type?: 'info' | 'tip' | 'warning' | 'danger' | 'note'
+  title?: string
+}>()
+</script>
+
+<template>
+  <div class="callout" :class="`callout-${type || 'info'}`">
+    <div class="callout-header" v-if="title">
+      <span class="callout-icon">
+        <svg v-if="type === 'tip'" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19 4.47 3 5.74V17a1 1 0 001 1h6a1 1 0 001-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.87-3.13-7-7-7zm2 14H10v-1h4v1zm0-2H10v-1h4v1zm1.03-3.27l-.7.49V12h-4.56v-.78l-.7-.49C8.27 9.65 7.5 8.38 7.5 9c0-2.48 2.02-4.5 4.5-4.5s4.5 2.02 4.5 4.5c0 1.38-.77 2.65-1.97 3.73z"/>
+        </svg>
+        <svg v-else-if="type === 'warning'" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+        </svg>
+        <svg v-else-if="type === 'danger'" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+        </svg>
+        <svg v-else viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
+        </svg>
+      </span>
+      <span class="callout-title">{{ title }}</span>
+    </div>
+    <div class="callout-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.callout {
+  padding: 1rem 1rem 1rem 1.25rem;
+  margin-block: 1rem;
+  background-color: var(--color-bg-soft);
+  border-left: 4px solid var(--color-info);
+  border-radius: 0 0.375rem 0.375rem 0;
+}
+
+.callout-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-weight: var(--font-weight-semibold);
+}
+
+.callout-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.callout-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.callout-title {
+  font-size: var(--font-size-base);
+}
+
+.callout-content {
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-body);
+}
+
+.callout-content p:first-child {
+  margin-top: 0;
+}
+
+.callout-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* Type variants */
+.callout-info {
+  border-left-color: var(--color-info);
+}
+
+.callout-info .callout-icon,
+.callout-info .callout-title {
+  color: var(--color-info);
+}
+
+.callout-tip {
+  border-left-color: var(--color-success);
+}
+
+.callout-tip .callout-icon,
+.callout-tip .callout-title {
+  color: var(--color-success);
+}
+
+.callout-warning {
+  border-left-color: var(--color-warning);
+}
+
+.callout-warning .callout-icon,
+.callout-warning .callout-title {
+  color: var(--color-warning);
+}
+
+.callout-danger {
+  border-left-color: var(--color-danger);
+}
+
+.callout-danger .callout-icon,
+.callout-danger .callout-title {
+  color: var(--color-danger);
+}
+
+.callout-note {
+  border-left-color: var(--color-primary);
+}
+
+.callout-note .callout-icon,
+.callout-note .callout-title {
+  color: var(--color-primary);
+}
+</style>

package/components/Card.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+/**
+ * Card component - individual card for CardGrid
+ *
+ * Usage:
+ * <Card title="Fast" icon="ph-lightning-fill">Description text</Card>
+ * <Card title="Secure">Description without icon</Card>
+ */
+
+import { computed } from 'vue'
+
+const props = defineProps<{
+  title: string
+  icon?: string
+}>()
+
+const isPhosphorIcon = computed(() => props.icon?.startsWith('ph-'))
+</script>
+
+<template>
+  <div class="card">
+    <div class="card-icon" v-if="icon">
+      <Icon v-if="isPhosphorIcon" :name="icon" size="lg" />
+      <span v-else>{{ icon }}</span>
+    </div>
+    <h4 class="card-title">{{ title }}</h4>
+    <div class="card-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.card {
+  padding: 1.25rem;
+  background-color: var(--color-bg-soft);
+  border-radius: 0.5rem;
+  border: 1px solid var(--color-border);
+  transition:
+    border-color var(--dur-fast-02) var(--ease-standard),
+    box-shadow var(--dur-fast-02) var(--ease-standard);
+}
+
+.card:hover {
+  border-color: var(--color-border-strong);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 5%, transparent);
+}
+
+.dark .card:hover {
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 20%, transparent);
+}
+
+.card-icon {
+  font-size: 2rem;
+  margin-bottom: 0.75rem;
+  line-height: 1;
+}
+
+.card-title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  margin: 0 0 0.5rem 0;
+  color: var(--color-text);
+}
+
+.card-content {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-body);
+}
+
+.card-content p {
+  margin: 0;
+}
+</style>

package/components/CardGrid.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * CardGrid component - responsive grid layout for Card components
+ *
+ * Usage:
+ * <CardGrid cols="2">
+ *   <Card title="Fast" icon="🚀">Description</Card>
+ *   <Card title="Secure" icon="🔒">Description</Card>
+ * </CardGrid>
+ *
+ * <CardGrid cols="3">
+ *   <Card title="A">...</Card>
+ *   <Card title="B">...</Card>
+ *   <Card title="C">...</Card>
+ * </CardGrid>
+ */
+
+defineProps<{
+  cols?: '2' | '3' | '4'
+  gap?: 'sm' | 'md' | 'lg'
+}>()
+</script>
+
+<template>
+  <div
+    class="card-grid"
+    :class="[
+      `card-grid-cols-${cols || '2'}`,
+      `card-grid-gap-${gap || 'md'}`
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+.card-grid {
+  display: grid;
+  margin-block: 1rem;
+}
+
+/* Column variants */
+.card-grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.card-grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.card-grid-cols-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+/* Gap variants */
+.card-grid-gap-sm {
+  gap: var(--space-sm);
+}
+
+.card-grid-gap-md {
+  gap: var(--space-md);
+}
+
+.card-grid-gap-lg {
+  gap: var(--space-lg);
+}
+</style>

package/components/CaseStudy.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * CaseStudy widget — sections with colored left borders.
+ *
+ * <CaseStudy :sections="[
+ *   { title: 'Challenge', content: '...', color: 'danger' },
+ *   { title: 'Solution', content: '...', color: 'primary' },
+ *   { title: 'Result', content: '...', color: 'success' }
+ * ]" />
+ */
+
+import type { SemanticColor } from '../composables/useColors'
+import { semanticColorVar } from '../composables/useColors'
+
+defineProps<{
+  sections: Array<{
+    title: string
+    content: string
+    color?: SemanticColor
+  }>
+}>()
+</script>
+
+<template>
+  <div class="case-study">
+    <div
+      v-for="(section, i) in sections"
+      :key="i"
+      class="case-study-section"
+      :style="{ '--section-color': semanticColorVar[section.color || 'primary'] }"
+    >
+      <h3 class="case-study-title">{{ section.title }}</h3>
+      <p class="case-study-content">{{ section.content }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.case-study {
+  display: flex;
+  gap: var(--space-sm);
+  margin-top: var(--space-lg);
+}
+
+.case-study-section {
+  flex: 1;
+  background: var(--color-bg-soft);
+  border-radius: 0.5rem;
+  padding: var(--space-sm);
+  border-left: 4px solid var(--section-color);
+}
+
+.case-study-title {
+  margin: 0 0 var(--space-xs);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  padding-left: var(--space-xs);
+}
+
+.case-study-content {
+  font-size: var(--font-size-small);
+  color: var(--color-text-secondary);
+  margin: 0;
+  max-width: none;
+}
+</style>