@miragon/slidev-toolkit 1.4.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.4.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;
+}