feat: add Callout component with 5 types, semantic HTML, and design tokens

2026-05-26 23:01:09 +00:00
parent 3fd814256e
commit 25fd0ea9fe
2 changed files with 204 additions and 0 deletions
@@ -0,0 +1,62 @@
+---
+interface Props {
+  type?: 'note' | 'pattern' | 'antipattern' | 'warning' | 'tip';
+}
+
+const { type = 'note' } = Astro.props;
+
+const config: Record<string, { borderColor: string; labelColor: string; label: string }> = {
+  note: { borderColor: 'var(--border-default)', labelColor: 'var(--text-secondary)', label: 'Note' },
+  pattern: { borderColor: 'var(--accent-primary)', labelColor: 'var(--accent-primary)', label: 'Pattern' },
+  antipattern: { borderColor: 'var(--error-border)', labelColor: 'var(--error-text)', label: 'Anti-pattern' },
+  warning: { borderColor: 'var(--warning-border)', labelColor: 'var(--warning-text)', label: 'Warning' },
+  tip: { borderColor: 'var(--accent-secondary)', labelColor: 'var(--accent-secondary)', label: 'Tip' },
+};
+
+const { borderColor, labelColor, label } = config[type];
+---
+
+<aside class="callout" role="note" aria-label={`${label} callout`} style={`border-left-color: ${borderColor};`}>
+  <span class="callout-label" aria-hidden="true" style={`color: ${labelColor};`}>{label}</span>
+  <div class="callout-body"><slot /></div>
+</aside>
+
+<style>
+  .callout {
+    max-width: var(--width-prose);
+    background-color: var(--surface-inset);
+    border: 1px solid var(--border-subtle);
+    border-left: 3px solid;
+    border-radius: var(--rounded-lg);
+    padding: var(--space-3);
+    margin-top: var(--space-4);
+    margin-bottom: var(--space-4);
+  }
+
+  .callout-label {
+    display: block;
+    font-family: var(--font-structure);
+    font-size: var(--type-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    line-height: var(--leading-normal);
+    margin-bottom: var(--space-1);
+  }
+
+  .callout-body {
+    font-family: var(--font-prose);
+    font-size: var(--type-base);
+    font-weight: 400;
+    line-height: var(--leading-prose);
+    color: var(--text-primary);
+  }
+
+  .callout-body :global(p) {
+    margin-bottom: var(--space-3);
+  }
+
+  .callout-body :global(p:last-child) {
+    margin-bottom: 0;
+  }
+</style>