@troshab/slidev-theme-troshab 0.1.4 → 0.1.7

package/setup/shiki.ts

@@ -15,9 +15,10 @@ const theme = createCssVariablesTheme({
 })
 
 /**
- * Transformer that adds `data-lang` attribute to <pre> elements.
- * CSS in base.css uses `::before { content: attr(data-lang) }` to render
- * a language label bar above every code block.
+ * Transformer that adds `data-lang` and `data-filename` attributes to <pre>.
+ * CSS in base.css uses:
+ *   ::before { content: attr(data-lang) }     — language label, left
+ *   ::after  { content: attr(data-filename) }  — filename label, right
  */
 const langLabelTransformer: ShikiTransformer = {
   name: 'lang-label',
@@ -26,6 +27,14 @@ const langLabelTransformer: ShikiTransformer = {
     if (lang && lang !== 'text') {
       node.properties['data-lang'] = lang
     }
+    // Parse {filename="..."} from code block meta
+    const meta = this.options.meta?.__raw
+    if (meta) {
+      const match = meta.match(/filename=["']([^"']+)["']/)
+      if (match) {
+        node.properties['data-filename'] = match[1]
+      }
+    }
   },
 }
 

package/styles/base.css

@@ -12,56 +12,17 @@
 @import './colors.css';
 
 /* ============================================
-   1. @font-face — IBM Plex (local)
+   1. @font-face — IBM Plex via @fontsource
+   Provides proper unicode-range subsetting
+   (latin, cyrillic, cyrillic-ext, etc.)
    ============================================ */
 
-@font-face {
-  font-family: 'IBM Plex Sans';
-  src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Sans';
-  src: url('../fonts/IBMPlexSans-Bold.woff2') format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono';
-  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'IBM Plex Mono';
-  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
+@import '@fontsource/ibm-plex-sans/400.css';
+@import '@fontsource/ibm-plex-sans/500.css';
+@import '@fontsource/ibm-plex-sans/600.css';
+@import '@fontsource/ibm-plex-sans/700.css';
+@import '@fontsource/ibm-plex-mono/400.css';
+@import '@fontsource/ibm-plex-mono/500.css';
 
 /* ============================================
    2. CSS Custom Properties (Typography & Layout)
@@ -91,19 +52,24 @@
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
 
-  /* --- Line Heights (role-based) --- */
-  --line-height-heading: 1.15;    /* tight for 1-2 line headings */
-  --line-height-body: 1.35;       /* slides with short text blocks */
-  --line-height-reading: 1.5;     /* longer paragraphs, BDA recommended */
-  --line-height-list: 1.4;
-  --line-height-code: 1.4;
+  /* --- Line Heights (role-based) ---
+     Chung (2004, Vision Research): optimal 1.25-1.5 for body.
+     Bringhurst "Elements of Typographic Style": headings 1.1-1.25, body 1.3-1.5.
+     Kolers et al. (1981): reading speed U-curve — extremes reduce speed. */
+  --line-height-heading: 1.3;     /* IBM Plex Sans glyph box (1.275) + safety margin */
+  --line-height-body: 1.4;        /* Chung mid — comfortable for slides */
+  --line-height-reading: 1.5;     /* Chung upper — BDA recommended for paragraphs */
+  --line-height-list: 1.4;        /* matches body for consistency */
+  --line-height-code: 1.5;        /* mono needs more room due to fixed glyph width */
 
   /* --- Letter & Word Spacing (dyslexia-friendly) ---
-     Zorzi et al. (2012, PNAS): letter-spacing reduces crowding.
-     BDA 2018: word/letter ratio >= 3.5x. Ours: 4.0x (above minimum). */
-  --letter-spacing-body: 0.02em;
-  --word-spacing-body: 0.08em;
-  --letter-spacing-heading: 0.01em;
+     Zorzi et al. (2012, PNAS 109:11455): letter-spacing +20% reading speed.
+     Pelli et al. (2007): crowding as dyslexic bottleneck → space symbols.
+     BDA 2018: word/letter ratio >= 3.5x. Ours: 4.0x (above minimum).
+     Presentation tradeoff: full BDA (0.12em/0.16em) too wide for large display type. */
+  --letter-spacing-body: 0.025em;        /* slight spacing — Zorzi crowding benefit */
+  --word-spacing-body: 0.1em;            /* word/letter ratio = 4.0x (BDA >= 3.5x) */
+  --letter-spacing-heading: 0.005em;     /* near-neutral — large headlines don't need extra spacing */
 
   /* --- Spacing System (8-point grid) ---
      Based on 8px base unit for visual rhythm.
@@ -133,15 +99,43 @@
   --slide-padding: var(--space-lg);
   --slide-gap: var(--space-sm);
 
-  /* --- Safe-zone for projectors/TV overscan (5% default) --- */
-  --safe-inset-x: 5%;
-  --safe-inset-y: 5%;
+  /* --- Safe-zone for projectors/TV overscan ---
+     SMPTE RP 27.3: 5% action-safe zone. Equal inset on all sides — asymmetric % causes
+     aspect-ratio dependent visual shift. Using rem keeps proportional across canvas sizes. */
+  --safe-inset-x: 3rem;           /* ~94px at 31.347px root */
+  --safe-inset-y: 3rem;           /* equal to x for symmetric safe zone */
 
   /* --- Border Width Tokens (rem-based, scale with canvas) --- */
   --border-thin: 0.0625rem;     /* ≈ 1px at 980 → ~2px at 1920 */
   --border-medium: 0.125rem;    /* ≈ 2px → ~4px */
   --border-thick: 0.1875rem;    /* ≈ 3px → ~6px */
   --border-accent: 0.25rem;     /* ≈ 4px → ~8px */
+
+  /* --- Fine spacing (< 8px, for tight UI elements) --- */
+  --space-3xs: 0.125rem;        /* 2px */
+  --space-2xs: 0.25rem;         /* 4px */
+  --space-xs-fine: 0.375rem;    /* 6px */
+  --space-tight: 0.75rem;       /* 12px — between xs and sm */
+  --space-code-pt: 2.25rem;     /* 36px — code block top padding (for lang label) */
+
+  /* --- Border Radius Tokens --- */
+  --radius-xs: 0.25rem;         /* 4px — inline code */
+  --radius-sm: 0.375rem;        /* 6px — buttons, small cards */
+  --radius-md: 0.5rem;          /* 8px — cards, panels */
+  --radius-pill: 9999px;        /* full pill shape */
+
+  /* --- Transform Compensation ---
+     Padding to compensate for transform: scale() visual overflow beyond layout box.
+     Calculated for scale(1.15) on medium elements (~63px markers).
+     Formula: (scale - 1) * element_size / 2 ≈ 4.7px per side. */
+  --transform-scale-comp: 0.1875rem;  /* 6px — for scale(1.15) on 63px elements */
+
+  /* --- Typography ratios (em-based, font-size relative) --- */
+  --font-size-smaller: 0.8em;           /* for <sup>, <sub>, <small> */
+  --letter-spacing-emphasis: 0.05em;    /* for small uppercase labels */
+  --underline-offset: 0.15em;           /* text-underline-offset */
+  --em-quarter: 0.25em;                 /* list item spacing */
+  --em-half: 1.5em;                     /* indent / nested */
 }
 
 /* ============================================
@@ -177,6 +171,17 @@
   text-align: left;
 }
 
+/* Mixed-font line-box fix: <p>/<li> containing inline <code> mix IBM Plex Sans
+ * and Plex Mono glyph metrics. Mono's effective descent is slightly larger
+ * than Sans at the same font-size, so the line box expands by ~1px — which
+ * rounds up to scrollHeight > clientHeight. Bumping line-height from 1.4 to
+ * 1.45 on these specific paragraphs absorbs the mixed-font rounding without
+ * visible impact on prose-only paragraphs. */
+.slidev-layout p:has(code),
+.slidev-layout li:has(code) {
+  line-height: 1.45;
+}
+
 /* --- Headings --- */
 .slidev-layout h1,
 .slidev-layout h2,
@@ -286,9 +291,9 @@
 }
 
 .slidev-layout pre {
-  border-radius: 0.5rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  border-radius: var(--radius-md);
+  margin-top: var(--space-sm);
+  margin-bottom: var(--space-sm);
   white-space: pre-wrap;
   overflow-wrap: break-word;
 }
@@ -311,11 +316,21 @@
   border: none;
 }
 
+/* Slidev wraps code blocks in .slidev-code-wrapper (block, no BFC). Inner
+ * <pre> inherits 1rem top/bottom margin from the .slidev-layout pre rule
+ * (~31px at canvas font-size). When wrapper is a flex item (slide-col-body),
+ * those margins do not collapse with siblings or out of the flex container,
+ * inflating body height beyond column clientHeight. Zero margin inside the
+ * wrapper; outer spacing is handled by the wrapper itself. */
+.slidev-code-wrapper pre {
+  margin: 0;
+}
+
 /* Language label bar above code blocks (via Shiki transformer data-lang attribute) */
 .slidev-layout pre[data-lang] {
   position: relative;
   /* Override Slidev's --slidev-code-padding (applied with !important) to make room for the label */
-  --slidev-code-padding: 2.25rem 0.5rem 0.5rem 0.5rem;
+  --slidev-code-padding: var(--space-code-pt) 0.5rem 0.5rem 0.5rem;
 }
 
 .slidev-layout pre[data-lang]::before {
@@ -324,7 +339,7 @@
   top: 0;
   left: 0;
   right: 0;
-  padding: 0.25rem 0.75rem;
+  padding: var(--space-2xs) 0.75rem;
   font-family: var(--font-mono);
   font-size: 0.8em;
   font-weight: var(--font-weight-medium);
@@ -333,15 +348,29 @@
   color: var(--color-text-tertiary);
   border-bottom: var(--border-thin) solid var(--color-border);
   background: var(--shiki-color-background, var(--color-bg-muted));
-  border-radius: 0.5rem 0.5rem 0 0;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+/* Filename label (right side of header bar) — via {filename="..."} in code fence meta */
+.slidev-layout pre[data-filename]::after {
+  content: attr(data-filename);
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: var(--space-2xs) 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.8em;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-muted);
+  opacity: 0.7;
 }
 
 .slidev-layout code {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-  border-radius: 0.25rem;
+  padding-left: var(--space-xs-fine);
+  padding-right: var(--space-xs-fine);
+  padding-top: var(--space-3xs);
+  padding-bottom: var(--space-3xs);
+  border-radius: var(--radius-xs);
   background-color: var(--color-bg-muted);
 }
 
@@ -356,18 +385,18 @@
 
 .slidev-layout table {
   width: 100%;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-top: var(--space-sm);
+  margin-bottom: var(--space-sm);
   border-collapse: collapse;
   font-variant-numeric: tabular-nums;
 }
 
 .slidev-layout th,
 .slidev-layout td {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-left: var(--space-sm);
+  padding-right: var(--space-sm);
+  padding-top: var(--space-xs);
+  padding-bottom: var(--space-xs);
   border: var(--border-thin) solid var(--color-border);
   text-align: left;
 }
@@ -382,9 +411,9 @@
    ============================================ */
 
 .slidev-layout blockquote {
-  padding-left: 1rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  padding-left: var(--space-sm);
+  margin-top: var(--space-sm);
+  margin-bottom: var(--space-sm);
   border-left: var(--border-accent) solid var(--color-border-strong);
   color: var(--color-text-secondary);
   font-style: normal; /* No italic for readability */
@@ -603,10 +632,17 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  overflow: auto;
   min-height: 0;
 }
 
+/* Prevent last-child margin from leaking into scrollHeight (margin-collapse artifact) */
+.slide-single > *:last-child,
+.slide-panel-content > *:last-child,
+.slide-col > *:last-child,
+.slide-col-body > *:last-child {
+  margin-bottom: 0;
+}
+
 .slide-grid {
   display: flex;
   flex: 1;
@@ -614,7 +650,6 @@
 }
 
 .slide-col {
-  overflow: hidden;
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -640,13 +675,13 @@
 }
 
 /* Per-column backgrounds */
-.slide-col-bg-soft { background: var(--color-bg-soft); border-radius: 0.5rem; padding: 1rem; }
-.slide-col-bg-muted { background: var(--color-bg-muted); border-radius: 0.5rem; padding: 1rem; }
-.slide-col-bg-primary { background: var(--color-primary); color: var(--color-primary-foreground); border-radius: 0.5rem; padding: 1rem; }
-.slide-col-bg-success { background: var(--color-success); color: var(--color-success-foreground); border-radius: 0.5rem; padding: 1rem; }
-.slide-col-bg-warning { background: var(--color-warning); color: var(--color-warning-foreground); border-radius: 0.5rem; padding: 1rem; }
-.slide-col-bg-danger { background: var(--color-danger); color: var(--color-danger-foreground); border-radius: 0.5rem; padding: 1rem; }
-.slide-col-bg-info { background: var(--color-info); color: var(--color-info-foreground); border-radius: 0.5rem; padding: 1rem; }
+.slide-col-bg-soft { background: var(--color-bg-soft); border-radius: var(--radius-md); padding: var(--space-sm); }
+.slide-col-bg-muted { background: var(--color-bg-muted); border-radius: var(--radius-md); padding: var(--space-sm); }
+.slide-col-bg-primary { background: var(--color-primary); color: var(--color-primary-foreground); border-radius: var(--radius-md); padding: var(--space-sm); }
+.slide-col-bg-success { background: var(--color-success); color: var(--color-success-foreground); border-radius: var(--radius-md); padding: var(--space-sm); }
+.slide-col-bg-warning { background: var(--color-warning); color: var(--color-warning-foreground); border-radius: var(--radius-md); padding: var(--space-sm); }
+.slide-col-bg-danger { background: var(--color-danger); color: var(--color-danger-foreground); border-radius: var(--radius-md); padding: var(--space-sm); }
+.slide-col-bg-info { background: var(--color-info); color: var(--color-info-foreground); border-radius: var(--radius-md); padding: var(--space-sm); }
 
 .slide-col-bg-primary h1, .slide-col-bg-primary h2, .slide-col-bg-primary h3,
 .slide-col-bg-success h1, .slide-col-bg-success h2, .slide-col-bg-success h3,
@@ -655,7 +690,7 @@
 .slide-col-bg-info h1, .slide-col-bg-info h2, .slide-col-bg-info h3 { color: inherit; }
 
 /* Per-column border */
-.slide-col-border { border: var(--border-thin) solid var(--color-border); border-radius: 0.5rem; padding: 1rem; }
+.slide-col-border { border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm); }
 
 /* --- 7c. Split Mode --- */
 .slide-split {
@@ -672,7 +707,6 @@
 
 .slide-panel {
   position: relative;
-  overflow: hidden;
 }
 
 .slide-panel-bg-only {
@@ -687,7 +721,6 @@
 
 .slide-panel-content {
   padding: var(--safe-inset-y) var(--safe-inset-x);
-  overflow: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -721,6 +754,15 @@
   margin-right: calc(var(--safe-inset-x) * -1);
 }
 
+/* When footer is present, reduce bottom padding to reclaim space */
+.slidev-layout:has(.slide-footer) {
+  padding-bottom: 0;
+}
+/* Split panels: reduce bottom padding when footer takes over that space */
+.slide-split:has(.slide-footer) .slide-panel-content {
+  padding-bottom: 1%;
+}
+
 /* ============================================
    8. Component Styles
    ============================================ */
@@ -729,17 +771,17 @@
 .tags-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  gap: var(--space-xs);
+  margin-top: var(--space-sm);
+  margin-bottom: var(--space-sm);
 }
 
 .tag {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-  border-radius: 9999px;
+  padding-left: var(--space-tight);
+  padding-right: var(--space-tight);
+  padding-top: var(--space-2xs);
+  padding-bottom: var(--space-2xs);
+  border-radius: var(--radius-pill);
   font-size: var(--font-size-small);
   background-color: var(--color-primary-soft);
   color: var(--color-primary);
@@ -748,8 +790,8 @@
 /* Button components */
 .btn {
   display: inline-block;
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
+  padding: var(--space-xs) 1rem;
+  border-radius: var(--radius-sm);
   font-weight: var(--font-weight-medium);
   text-decoration: none;
   cursor: pointer;
@@ -838,7 +880,7 @@ a.btn-secondary:hover {
   position: absolute;
   inset: 5% 5%;
   border: var(--border-thick) dashed var(--color-danger);
-  border-radius: 0.5rem;
+  border-radius: var(--radius-md);
   pointer-events: none;
 }
 
@@ -864,9 +906,9 @@ a.btn-secondary:hover {
 /* Enhanced blockquote callout base style */
 .slidev-layout blockquote:has(p:first-child strong:first-child) {
   border-left-width: var(--border-accent);
-  padding: 1rem 1rem 1rem 1.25rem;
+  padding: var(--space-sm) 1rem 1rem 1.25rem;
   background-color: var(--color-bg-soft);
-  border-radius: 0 0.375rem 0.375rem 0;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
 /* Semantic callout classes — apply to blockquote */
@@ -901,7 +943,7 @@ a.btn-secondary:hover {
 
 /* Ensure focus is not obscured */
 .slidev-layout :focus-visible {
-  scroll-padding: 1rem;
+  scroll-padding: var(--space-sm);
 }
 
 /* (Old layout sections 12-27 removed - replaced by section 7 above) */
@@ -954,19 +996,19 @@ a.btn-secondary:hover {
 
 /* Ensure thought bubble circles are not clipped in overflow: auto containers */
 .bubble-thought.bubble-bottom {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--space-md);
 }
 
 .bubble-thought.bubble-top {
-  margin-top: 1.5rem;
+  margin-top: var(--space-md);
 }
 
 .bubble-thought.bubble-left {
-  margin-left: 2rem;
+  margin-left: var(--space-lg);
 }
 
 .bubble-thought.bubble-right {
-  margin-right: 2rem;
+  margin-right: var(--space-lg);
 }
 
 /* ============================================
@@ -974,7 +1016,7 @@ a.btn-secondary:hover {
    ============================================ */
 
 .device-mockup-placeholder {
-  padding: 2rem;
+  padding: var(--space-lg);
   text-align: center;
 }
 

package/styles/motion.css

@@ -313,7 +313,7 @@
   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) {
+.slide-grid > .slide-col:nth-child(2):last-child {
   animation: entrance-slide-left var(--dur-moderate-02) var(--ease-enter) calc(var(--stagger-base) * 4) both;
 }