@usetheo/ui 0.13.2 → 0.15.0

package/dist/slide/themes/layouts.css

@@ -1,143 +0,0 @@
-/*
- * Slide layouts (rich-content plan T2.2).
- *
- * Selectors are scoped by `[data-theo-slide-layout]` on the outer `<section>`.
- * Themes (`default`, `violet-forge`) @import this file so layouts work across
- * the design system without duplication.
- *
- * Each layout uses CSS grid for placement. `default` is a no-op so existing
- * slides remain pixel-identical. The 7 layouts cover the 80% case for tech
- * presentations: title hero, dual columns, image-prose, code-output, chapter
- * dividers. Custom layouts require consumer CSS overriding the data-attr
- * selector.
- */
-
-/* Default — vertical flow (no grid). Preserves existing slide rendering. */
-.theo-slide[data-theo-slide-layout="default"] {
-  /* no-op */
-}
-
-/* Title — centered hero. Used for cover slides and section dividers. */
-.theo-slide[data-theo-slide-layout="title"] {
-  display: grid;
-  place-items: center;
-  text-align: center;
-}
-.theo-slide[data-theo-slide-layout="title"] h1 {
-  font-size: 2.8em;
-  letter-spacing: -0.02em;
-}
-.theo-slide[data-theo-slide-layout="title"] h2 {
-  font-size: 1.6em;
-  font-weight: 500;
-  color: color-mix(in srgb, currentColor 70%, transparent);
-}
-
-/* Two-column — equal split. First child block goes left, rest stack right. */
-.theo-slide[data-theo-slide-layout="two-column"] {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
-  align-items: start;
-}
-.theo-slide[data-theo-slide-layout="two-column"] > * {
-  min-width: 0;
-}
-
-/* Image-right — text left (1.5fr), image right (1fr). */
-.theo-slide[data-theo-slide-layout="image-right"] {
-  display: grid;
-  grid-template-columns: 1.5fr 1fr;
-  gap: 32px;
-  align-items: center;
-}
-.theo-slide[data-theo-slide-layout="image-right"] img {
-  grid-column: 2;
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  justify-self: end;
-}
-
-/* Image-left — mirror of image-right. */
-.theo-slide[data-theo-slide-layout="image-left"] {
-  display: grid;
-  grid-template-columns: 1fr 1.5fr;
-  gap: 32px;
-  align-items: center;
-}
-.theo-slide[data-theo-slide-layout="image-left"] img {
-  grid-column: 1;
-  grid-row: 1;
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-}
-
-/* Code-output — code block left (slightly wider), prose right. */
-.theo-slide[data-theo-slide-layout="code-output"] {
-  display: grid;
-  grid-template-columns: 1.2fr 1fr;
-  gap: 24px;
-  align-items: start;
-}
-.theo-slide[data-theo-slide-layout="code-output"] pre {
-  margin: 0;
-}
-
-/* Section — full-bleed chapter divider with tinted backdrop. */
-.theo-slide[data-theo-slide-layout="section"] {
-  display: grid;
-  place-items: center;
-  text-align: center;
-  background: color-mix(in srgb, currentColor 10%, transparent);
-}
-.theo-slide[data-theo-slide-layout="section"] h1 {
-  font-size: 3.6em;
-  letter-spacing: -0.03em;
-  margin: 0;
-}
-.theo-slide[data-theo-slide-layout="section"] p {
-  font-size: 1.1em;
-  color: color-mix(in srgb, currentColor 65%, transparent);
-}
-
-/* ─────────────────────────────────────────────────────────────────
- * Header / Footer / Pagination overlays (rich-content T5.1).
- * Plain text divs absolute-positioned in the canvas. They don't push
- * content; they sit ON TOP. Sized in slide units (28px base).
- * ───────────────────────────────────────────────────────────────── */
-.theo-slide .theo-slide-header {
-  position: absolute;
-  top: 16px;
-  left: 32px;
-  right: 32px;
-  font-size: 0.6em;
-  opacity: 0.7;
-  pointer-events: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.theo-slide .theo-slide-footer {
-  position: absolute;
-  bottom: 16px;
-  left: 32px;
-  right: 96px;
-  font-size: 0.6em;
-  opacity: 0.7;
-  text-align: center;
-  pointer-events: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.theo-slide .theo-slide-paginate {
-  position: absolute;
-  bottom: 16px;
-  right: 32px;
-  font-size: 0.55em;
-  opacity: 0.5;
-  font-variant-numeric: tabular-nums;
-  pointer-events: none;
-}

package/dist/slide/themes/violet-forge.css

@@ -1,256 +0,0 @@
-/*
- * Slide primitive — `violet-forge` theme.
- *
- * Branded variant: same inherit-first foundation as the `default` theme, but
- * with a Violet Forge accent (links, code backgrounds, blockquote bar)
- * blended with `currentColor` via `color-mix()`. The brand hue stays
- * recognizable across light and dark surfaces because the accent is mixed
- * with the inherited foreground.
- */
-
-@import "./layouts.css";
-
-.theo-slide[data-theo-slide-theme="violet-forge"] {
-  --theo-slide-canvas-width: 1280px;
-  --theo-slide-canvas-height: 720px;
-  --theo-slide-padding: 64px;
-  --theo-slide-font-base: 28px;
-  --theo-slide-font-family: var(
-    --vf-font-family-sans,
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    sans-serif
-  );
-  --theo-slide-font-mono: var(--vf-font-family-mono, ui-monospace, "JetBrains Mono", monospace);
-
-  /* Violet accent — the brand hue. Used for relative mixing so it adapts
-     to light/dark surfaces (mixed with `currentColor`). */
-  --theo-slide-accent: #a855f7;
-
-  /* Derived tints — relative to inherited `currentColor` so they auto-flip
-     when the parent surface flips. */
-  --theo-slide-color-muted: color-mix(in srgb, currentColor 60%, transparent);
-  --theo-slide-color-tint-strong: color-mix(in srgb, var(--theo-slide-accent) 15%, transparent);
-  --theo-slide-color-tint-weak: color-mix(in srgb, var(--theo-slide-accent) 7%, transparent);
-  --theo-slide-color-border: color-mix(in srgb, var(--theo-slide-accent) 30%, transparent);
-  --theo-slide-color-link: color-mix(in srgb, var(--theo-slide-accent) 70%, currentColor);
-  --theo-slide-color-blockquote-bar: color-mix(in srgb, var(--theo-slide-accent) 60%, currentColor);
-
-  color: inherit;
-  background: transparent;
-  font-family: var(--theo-slide-font-family);
-  font-size: var(--theo-slide-font-base);
-  line-height: 1.5;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] h1,
-.theo-slide[data-theo-slide-theme="violet-forge"] h2,
-.theo-slide[data-theo-slide-theme="violet-forge"] h3,
-.theo-slide[data-theo-slide-theme="violet-forge"] h4,
-.theo-slide[data-theo-slide-theme="violet-forge"] h5,
-.theo-slide[data-theo-slide-theme="violet-forge"] h6 {
-  color: inherit;
-  line-height: 1.2;
-  margin: 0 0 0.5em 0;
-  font-weight: 600;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] h1 {
-  font-size: 1.8em;
-  letter-spacing: -0.02em;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] h2 {
-  font-size: 1.4em;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] h3 {
-  font-size: 1.2em;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] h4 {
-  font-size: 1.05em;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] h5 {
-  font-size: 1em;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] h6 {
-  font-size: 0.9em;
-  color: var(--theo-slide-color-muted);
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] p {
-  margin: 0 0 0.75em 0;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] ul,
-.theo-slide[data-theo-slide-theme="violet-forge"] ol {
-  margin: 0 0 0.75em 0;
-  padding-left: 1.5em;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] li {
-  margin: 0.25em 0;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] blockquote {
-  margin: 0 0 0.75em 0;
-  padding: 0.25em 0.75em;
-  border-left: 4px solid var(--theo-slide-color-blockquote-bar);
-  color: var(--theo-slide-color-muted);
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] a {
-  color: var(--theo-slide-color-link);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  font-weight: 600;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] code {
-  font-family: var(--theo-slide-font-mono);
-  font-size: 0.9em;
-  padding: 0.1em 0.4em;
-  border-radius: 4px;
-  background: var(--theo-slide-color-tint-strong);
-  color: inherit;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] pre {
-  font-family: var(--theo-slide-font-mono);
-  background: var(--theo-slide-color-tint-strong);
-  color: inherit;
-  padding: 0.75em 1em;
-  border-radius: 8px;
-  overflow: auto;
-  font-size: 0.85em;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] pre code {
-  padding: 0;
-  background: transparent;
-  font-size: inherit;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] hr {
-  border: none;
-  border-top: 1px solid var(--theo-slide-color-border);
-  margin: 1em 0;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] table {
-  border-collapse: collapse;
-  margin: 0 0 0.75em 0;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] th,
-.theo-slide[data-theo-slide-theme="violet-forge"] td {
-  border: 1px solid var(--theo-slide-color-border);
-  padding: 0.4em 0.75em;
-  text-align: left;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] thead th {
-  background: var(--theo-slide-color-tint-weak);
-  font-weight: 600;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] tbody tr:nth-child(even) td {
-  background: var(--theo-slide-color-tint-weak);
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 6px;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] em {
-  font-style: italic;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] strong {
-  font-weight: 600;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] del {
-  text-decoration: line-through;
-  color: var(--theo-slide-color-muted);
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] kbd {
-  font-family: var(--theo-slide-font-mono);
-  font-size: 0.85em;
-  padding: 0.1em 0.4em;
-  border: 1px solid var(--theo-slide-color-border);
-  border-radius: 4px;
-  background: var(--theo-slide-color-tint-weak);
-}
-
-/* ─────────────────────────────────────────────────────────────────
- * GFM alerts (rich-content T1.2) — Violet Forge palette.
- * Same structure as `default`; only the accent colors differ
- * so callouts feel native to the design system.
- * ───────────────────────────────────────────────────────────────── */
-.theo-slide[data-theo-slide-theme="violet-forge"] aside.theo-slide-alert {
-  margin: 0 0 0.75em 0;
-  padding: 0.75em 1em;
-  border-left: 4px solid currentColor;
-  border-radius: 0.4em;
-  background: color-mix(in srgb, currentColor 8%, transparent);
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] aside.theo-slide-alert::before {
-  display: block;
-  margin-bottom: 0.35em;
-  font-weight: 600;
-  font-size: 0.9em;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] aside.theo-slide-alert > :first-child {
-  margin-top: 0;
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] aside.theo-slide-alert > :last-child {
-  margin-bottom: 0;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="note"] {
-  border-color: #6366f1;
-  background: color-mix(in srgb, #6366f1 12%, transparent);
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="note"]::before {
-  content: "ⓘ Note";
-  color: #6366f1;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="tip"] {
-  border-color: #22d3ee;
-  background: color-mix(in srgb, #22d3ee 12%, transparent);
-}
-.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="tip"]::before {
-  content: "✓ Tip";
-  color: #22d3ee;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="important"] {
-  border-color: #c084fc;
-  background: color-mix(in srgb, #c084fc 12%, transparent);
-}
-.theo-slide[data-theo-slide-theme="violet-forge"]
-  aside[data-theo-slide-alert-type="important"]::before {
-  content: "★ Important";
-  color: #c084fc;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="warning"] {
-  border-color: #facc15;
-  background: color-mix(in srgb, #facc15 12%, transparent);
-}
-.theo-slide[data-theo-slide-theme="violet-forge"]
-  aside[data-theo-slide-alert-type="warning"]::before {
-  content: "⚠ Warning";
-  color: #facc15;
-}
-
-.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="caution"] {
-  border-color: #f87171;
-  background: color-mix(in srgb, #f87171 12%, transparent);
-}
-.theo-slide[data-theo-slide-theme="violet-forge"]
-  aside[data-theo-slide-alert-type="caution"]::before {
-  content: "✗ Caution";
-  color: #f87171;
-}

package/dist/slide-deck/index.css

@@ -1,52 +0,0 @@
-/* src/components/composites/slide-deck/transitions.css */
-.theo-slide-deck-slide-frame {
-  --theo-slide-deck-transition-duration: 250ms;
-  position: absolute;
-  inset: 0;
-}
-.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=fade] > [data-theo-slide-deck-slide-state=incoming] {
-  animation: theo-slide-deck-fade-in var(--theo-slide-deck-transition-duration) ease-out;
-}
-@keyframes theo-slide-deck-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=slide][data-theo-slide-deck-direction=next] > [data-theo-slide-deck-slide-state=incoming] {
-  animation: theo-slide-deck-slide-in-right var(--theo-slide-deck-transition-duration) ease-out;
-}
-.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=slide][data-theo-slide-deck-direction=prev] > [data-theo-slide-deck-slide-state=incoming] {
-  animation: theo-slide-deck-slide-in-left var(--theo-slide-deck-transition-duration) ease-out;
-}
-@keyframes theo-slide-deck-slide-in-right {
-  from {
-    transform: translateX(30%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes theo-slide-deck-slide-in-left {
-  from {
-    transform: translateX(-30%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .theo-slide-deck-slide-frame,
-  .theo-slide-deck-slide-frame * {
-    animation-duration: 0ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0ms !important;
-  }
-}
-/*# sourceMappingURL=index.css.map */

package/dist/slide-deck/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/composites/slide-deck/transitions.css"],"sourcesContent":["/*\n * Slide deck transitions (ADR D8).\n *\n * Three presets via the `data-theo-slide-deck-transition` attribute on the\n * deck root: \"none\" | \"fade\" | \"slide\".\n *\n * Active transition direction is signaled via `data-theo-slide-deck-direction`\n * (\"none\" | \"next\" | \"prev\"). CSS animations are 250ms, GPU-accelerated.\n *\n * Respects `prefers-reduced-motion: reduce` — all durations collapse to 0ms,\n * effectively becoming \"none\" regardless of the prop.\n */\n\n.theo-slide-deck-slide-frame {\n  --theo-slide-deck-transition-duration: 250ms;\n  position: absolute;\n  inset: 0;\n}\n\n/* fade preset */\n.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=\"fade\"]\n  > [data-theo-slide-deck-slide-state=\"incoming\"] {\n  animation: theo-slide-deck-fade-in var(--theo-slide-deck-transition-duration) ease-out;\n}\n\n@keyframes theo-slide-deck-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* slide preset */\n.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=\"slide\"][data-theo-slide-deck-direction=\"next\"]\n  > [data-theo-slide-deck-slide-state=\"incoming\"] {\n  animation: theo-slide-deck-slide-in-right var(--theo-slide-deck-transition-duration) ease-out;\n}\n\n.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=\"slide\"][data-theo-slide-deck-direction=\"prev\"]\n  > [data-theo-slide-deck-slide-state=\"incoming\"] {\n  animation: theo-slide-deck-slide-in-left var(--theo-slide-deck-transition-duration) ease-out;\n}\n\n@keyframes theo-slide-deck-slide-in-right {\n  from {\n    transform: translateX(30%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes theo-slide-deck-slide-in-left {\n  from {\n    transform: translateX(-30%);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .theo-slide-deck-slide-frame,\n  .theo-slide-deck-slide-frame * {\n    animation-duration: 0ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0ms !important;\n  }\n}\n"],"mappings":";AAaA,CAAC;AACC,yCAAuC;AACvC,YAAU;AACV,SAAO;AACT;AAGA,CAPC,2BAO2B,CAAC,sCAC3B,EAAE,CAAC;AACH,aAAW,wBAAwB,IAAI,uCAAuC;AAChF;AAEA,WAHa;AAIX;AACE,aAAS;AACX;AACA;AACE,aAAS;AACX;AACF;AAGA,CAtBC,2BAsB2B,CAAC,sCAAwC,CAAC,qCACpE,EAAE,CAAC;AACH,aAAW,+BAA+B,IAAI,uCAAuC;AACvF;AAEA,CA3BC,2BA2B2B,CAAC,sCAAwC,CAAC,qCACpE,EAAE,CAAC;AACH,aAAW,8BAA8B,IAAI,uCAAuC;AACtF;AAEA,WARa;AASX;AACE,eAAW,WAAW;AACtB,aAAS;AACX;AACA;AACE,eAAW,WAAW;AACtB,aAAS;AACX;AACF;AAEA,WAda;AAeX;AACE,eAAW,WAAW;AACtB,aAAS;AACX;AACA;AACE,eAAW,WAAW;AACtB,aAAS;AACX;AACF;AAEA,QAAO,wBAAyB;AAC9B,GAvDD;AAAA,EAwDC,CAxDD,4BAwD8B;AAC3B,wBAAoB;AACpB,+BAA2B;AAC3B,yBAAqB;AACvB;AACF;","names":[]}