Refactored ArticleHeader

src/styles/components/blocks/callout.css

@@ -0,0 +1,84 @@
+@layer components.blocks {
+  .callout {
+    @mixin my var(--space-9);
+    counter-increment: box;
+
+    display: grid;
+    grid-template-columns: var(--slot-box-cell) minmax(0, 1fr);
+
+    border: var(--border-card) solid var(--color-border-strong);
+
+    background-color: var(--color-surface-elevated-1);
+    box-shadow: var(--shadow-card);
+  }
+
+  .callout__kind {
+    @mixin typo_label;
+    @mixin ma var(--size-0);
+    @mixin py var(--size-6);
+    @mixin px var(--size-7);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    border-inline-end: var(--border-card) solid var(--color-border-strong);
+
+    color: var(--color-text-primary);
+
+    background-color: var(--color-surface-base);
+
+    &::after {
+      content: "Box " counter(sec, upper-roman) "." counter(box);
+
+      font-family: var(--font-mono);
+      font-size: var(--type--3);
+      font-weight: var(--font-weight-body);
+      color: var(--color-text-quarternary);
+    }
+  }
+
+  .callout__title {
+    @mixin typo_heading-4;
+    @mixin mt var(--size-0);
+    @mixin mb var(--size-5);
+
+    font-size: var(--type-0);
+  }
+
+  .callout__body {
+    @mixin py var(--size-6);
+    @mixin px var(--size-8);
+
+    & > :first-child {
+      margin-block-start: var(--size-0);
+    }
+
+    & > :last-child {
+      margin-block-end: var(--size-0);
+    }
+  }
+
+  .callout--optional {
+    border-width: var(--border-hairline);
+    background-color: transparent;
+    box-shadow: none;
+
+    & .callout__kind {
+      border-inline-end: var(--border-hairline) solid var(--color-border-normal);
+      color: var(--color-text-primary);
+      background-color: transparent;
+
+      &::after {
+        color: var(--color-text-quiet);
+      }
+    }
+
+    & .callout__title {
+      @mixin typo_label;
+
+      font-size: var(--type--2);
+      color: var(--color-text-quiet);
+    }
+  }
+}