@miragon/slidev-toolkit 1.3.0 → 1.5.0

package/components/Card.vue

@@ -10,14 +10,28 @@
  *   3 Karten: blue, teal, green
  *   4 Karten: blue, blue-mid, green-deep, green
  *   <Card title="Deployment" accent="blue">Body …</Card>
+ *
+ * `icon` (optional): eine Iconify-UnoCSS-Klasse (`i-carbon-idea`, `i-ph-cube`, …).
+ * Wird sie gesetzt, erscheint das Icon über dem Titel und trägt dieselbe
+ * Akzentfarbe; ohne `icon` bleibt die Karte wie bisher rein textuell.
+ * Der volle Klassenname muss so im Slide stehen, damit UnoCSS ihn beim
+ * statischen Scan findet und generiert (Brand-Regel: Iconify `i-*`, kein Emoji).
+ *   <Card title="Deployment" accent="blue" icon="i-carbon-rocket">Body …</Card>
+ *
+ * `align` (optional): richtet Icon, Titel und Body aus — `left` (Standard),
+ * `center` oder `right`. Betrifft nur die horizontale Ausrichtung des Inhalts;
+ * Hintergrund, Akzentlogik und alles andere bleiben unverändert.
+ *   <Card title="Deployment" accent="blue" align="center">Body …</Card>
  */
 const props = withDefaults(
   defineProps<{
     title?: string
     accent?: 'blue' | 'blue-mid' | 'teal' | 'green-deep' | 'green-mid' | 'green'
     padding?: 'compact' | 'standard' | 'generous'
+    icon?: string
+    align?: 'left' | 'center' | 'right'
   }>(),
-  { accent: 'blue', padding: 'standard' },
+  { accent: 'blue', padding: 'standard', align: 'left' },
 )
 
 // Die §6.3-Progressions-Stops. Bewusst lokal: der einzige sanktionierte Hex-Ort.
@@ -32,7 +46,8 @@ const ACCENTS: Record<string, string> = {
 </script>
 
 <template>
-  <div class="mg-card" :class="`mg-card--${props.padding}`">
+  <div class="mg-card" :class="[`mg-card--${props.padding}`, `mg-card--align-${props.align}`]">
+    <span v-if="icon" class="mg-card__icon" :class="icon" :style="{ color: ACCENTS[props.accent] }" aria-hidden="true"></span>
     <h3 v-if="title" class="mg-card__title" :style="{ color: ACCENTS[props.accent] }">{{ title }}</h3>
     <div class="mg-card__body"><slot /></div>
   </div>
@@ -53,6 +68,16 @@ const ACCENTS: Record<string, string> = {
 .mg-card--compact { padding: 1rem; display: flex; flex-direction: column; }
 .mg-card--standard { padding: 1.25rem; }
 .mg-card--generous { padding: 1.5rem; }
+.mg-card--align-center { text-align: center; }
+.mg-card--align-right { text-align: right; }
+.mg-card--align-center .mg-card__icon { margin-left: auto; margin-right: auto; }
+.mg-card--align-right .mg-card__icon { margin-left: auto; }
+
+.mg-card__icon {
+  display: block;
+  font-size: 1.6rem;
+  margin-bottom: 0.6rem;
+}
 .mg-card__title {
   margin: 0;
   font-weight: 700;
@@ -65,6 +90,17 @@ const ACCENTS: Record<string, string> = {
   line-height: 1.55;
   color: #4b5563;
 }
+/* Wrapping the body in blank lines (required for inline Markdown — `code`, **bold**,
+   links — to render inside the slot; see the slides skill) makes Markdown emit a
+   <p>. Left alone it would inherit Slidev's larger prose paragraph size and default
+   margins, so a block-form card would look different from a tight one. Normalise it:
+   inherit the card body size, no outer margins, even spacing between paragraphs. */
+.mg-card__body :deep(p) {
+  margin: 0;
+  font-size: inherit;
+  line-height: inherit;
+}
+.mg-card__body :deep(p + p) { margin-top: 0.6em; }
 .mg-card--compact .mg-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
 /* A trailing diagram (<Figure src>) docks at the card bottom, so the image sits at
    the same position in every card of a stretched grid regardless of text length. */

package/components/CardGrid.vue

@@ -42,5 +42,6 @@ const GAPS: Record<string, string> = {
   gap: var(--mg-gap);
   align-items: stretch;
   margin-top: 0.5rem;
+  margin-bottom: 1rem;
 }
 </style>

package/components/SplitView.vue

@@ -62,6 +62,7 @@ const columns = computed(() => {
 .mg-split {
   display: grid;
   margin-top: 0.5rem;
+  margin-bottom: 1rem;
 }
 /* min-width:0 verhindert, dass breite Grafiken die Spalte über fr sprengen. */
 .mg-split__visual,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Miragon Slidev toolkit: the brand theme, the layout archetypes, the reusable components (Card, CardGrid, StepList, Figure, SplitView) and the BrandMeshBackground animation. Single source of design truth, consumed by the reference deck in this repo.",
   "keywords": [
     "slidev-theme",

package/styles/code.css

@@ -31,3 +31,20 @@
   color: var(--miragon-text-muted);
   font-size: 0.8rem;
 }
+
+/* Inline code (`like this`) — a small on-brand chip in Geist Mono. Without this
+   rule inline code falls back to Slidev/UnoCSS defaults (a lavender pill in a
+   generic mono face). `:not(pre) > code` matches only inline spans, never the
+   <code> inside a Shiki fence (that lives under <pre>), so fences keep their
+   frame above. Applies everywhere the same way, including inside <Card> bodies.
+   NOTE: for inline code to render at all inside a component (<Card>, …), the
+   body must be wrapped in blank lines — see the slides skill. */
+:not(pre) > code {
+  font-family: var(--miragon-font-mono);
+  font-size: 0.85em;
+  color: var(--miragon-blue-dark);
+  background: var(--miragon-blue-light);
+  border: 1px solid #e5e7eb;
+  border-radius: 0.35rem;
+  padding: 0.1em 0.35em;
+}

package/styles/index.css

@@ -7,6 +7,7 @@
 @import './theme.css';
 @import './fonts.css';
 @import './code.css';
+@import './table.css';
 
 /* Brand typography: Geist for everything, Geist Mono for code. Set on the app
    root so it cascades into every layout; redirect Slidev's code-font variable

package/styles/table.css

@@ -0,0 +1,62 @@
+/* Tables — Miragon CI frame for native Markdown tables.
+ *
+ * A Markdown table (`| a | b |`) is plain markdown, so it needs no component and
+ * keeps the slide source clean (it passes the no-raw-html check). This file gives
+ * every rendered `<table>` the same white-card treatment the <Card> component and
+ * code fences use: white surface, thin grey border, soft blue brand shadow,
+ * rounded corners. Header text stays BLACK (the heading rule); the single
+ * restrained accent is the blue rule under the header row. Body text is Geist
+ * Mono, matching the "Geist Mono for code and tables" CI invariant.
+ *
+ * Anchor: `#slideshow` is the single container that wraps EVERY slide page
+ * (`#slideshow > .slidev-page > <layout root>`), so this reaches tables in every
+ * layout — including the custom ones (`content`, `compare`, …) whose root is NOT
+ * `.slidev-layout`. Slidev's own defaults live on `.slidev-layout table`
+ * (specificity 0,1,1); anchoring on the `#slideshow` id (1,0,1) wins the cascade
+ * regardless of load order, without needing `!important`. Column alignment
+ * (`:---`, `---:`, `:--:`) is emitted by markdown-it as an inline `text-align`
+ * style, so it keeps working on top of these rules with no extra selectors.
+ *
+ * Colours come from theme.css; the only literal hex are the shared border/row
+ * neutrals already used across the toolkit (see code.css).
+ */
+
+#slideshow table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: auto;
+  margin: 0.5rem 0 1.25rem;
+  font-family: var(--miragon-font-mono);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  background: var(--miragon-white);
+  border: 1px solid #e5e7eb;
+  border-radius: 0.6rem;
+  overflow: hidden;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.06);
+}
+
+/* Header row: black label, restrained blue accent rule underneath. */
+#slideshow thead th {
+  color: var(--miragon-text-primary);
+  font-weight: 700;
+  background: var(--miragon-blue-light);
+  border-bottom: 2px solid var(--miragon-blue);
+}
+
+#slideshow th,
+#slideshow td {
+  padding: 0.55rem 1.1rem;
+  text-align: left;
+  color: var(--miragon-text-secondary);
+  border-bottom: 1px solid #eef1f5;
+  vertical-align: top;
+}
+
+/* Subtle zebra striping for scannability; last row carries no divider. */
+#slideshow tbody tr:nth-child(even) td {
+  background: var(--miragon-gray-light);
+}
+#slideshow tbody tr:last-child td {
+  border-bottom: none;
+}