Styling and astro refactor of reveal

src/components/markdoc/blocks/general/Reveal.astro

@@ -5,7 +5,15 @@ const { summary = 'Spoiler' } = Astro.props
 ---
 
 <details class="reveal">
-  <summary class="reveal__summary">{summary}</summary>
+  <summary class="reveal__summary">
+    <span class="reveal__kind dark">Spoiler</span>
+
+    <span class="reveal__head">
+      <span class="reveal__title">{summary}</span>
+      <span class="reveal__action">Reveal</span>
+    </span>
+  </summary>
+
   <div class="reveal__body">
     <slot />
   </div>

src/layouts/BaseLayout.astro

@@ -43,7 +43,7 @@ const previewUrl = preview ? new URL(preview.src, Astro.site) : undefined
     <Font cssVariable="--font-julia-mono" preload />
     <Font cssVariable="--font-unigrim" />
     <style is:inline>
-      @layer reset, tokens, base, components, utilities;
+      @layer reset, tokens, base, components.prose, components.blocks, utilities;
     </style>
   </head>
   <body class="ui">

src/styles/base/primitives.css

@@ -184,6 +184,7 @@
     --slot-prose-gap: var(--size-6);
     --slot-prose-bar: var(--size-8);
     --slot-callout-cell: 8.5rem;
+    --slot-box-cell: 8.5rem;
 
     /* ═══ MOTION ═══ */
     --motion-fast: 150ms; /* state change: hover, focus, press */

src/styles/components/callout.css

@@ -1,10 +1,10 @@
-@layer components {
+@layer components.blocks {
   .callout {
     @mixin my var(--space-9);
     counter-increment: box;
 
     display: grid;
-    grid-template-columns: var(--slot-callout-cell) minmax(0, 1fr);
+    grid-template-columns: var(--slot-box-cell) minmax(0, 1fr);
 
     border: var(--border-card) solid var(--color-border-strong);
 
@@ -59,12 +59,6 @@
     }
   }
 
-  .callout--example {
-    & .callout__kind {
-      background-color: var(--color-surface-elevated-3);
-    }
-  }
-
   .callout--optional {
     border-width: var(--border-hairline);
     background-color: transparent;

src/styles/components/index.css

@@ -2,3 +2,4 @@
 @import url("quote.css");
 @import url("lead.css");
 @import url("callout.css");
+@import url("reveal.css");

src/styles/components/lead.css

@@ -1,4 +1,4 @@
-@layer components {
+@layer components.blocks {
   .lead {
     --prose-line: 1lh;
 

src/styles/components/prose.css

@@ -4,7 +4,7 @@
   syntax: "<length>";
 }
 
-@layer components {
+@layer components.prose {
   .prose {
     @mixin typo_body;
 

src/styles/components/quote.css

@@ -1,4 +1,4 @@
-@layer components {
+@layer components.blocks {
   .quote {
     @mixin my var(--space-11);
     @mixin py var(--space-9);

src/styles/components/reveal.css

@@ -0,0 +1,110 @@
+@layer components.blocks {
+  .reveal {
+    @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);
+  }
+
+  .reveal__summary {
+    cursor: pointer;
+
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+    align-items: center;
+
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:focus-visible {
+      @mixin focus-ring;
+    }
+  }
+
+  .reveal__kind {
+    @mixin typo_label;
+    @mixin py var(--size-6);
+    @mixin px var(--size-7);
+
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    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);
+  }
+
+  .reveal__kind::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);
+  }
+
+  .reveal__head {
+    @mixin py var(--size-6);
+    @mixin px var(--size-8);
+
+    display: flex;
+    gap: var(--size-8);
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .reveal__title {
+    @mixin typo_heading-4;
+
+    font-size: var(--type-0);
+  }
+
+  .reveal__action {
+    @mixin typo_label;
+
+    font-size: var(--type--2);
+    color: var(--color-text-quiet);
+    white-space: nowrap;
+
+    &::after {
+      content: " ⟫";
+    }
+  }
+
+  .reveal[open] .reveal__action {
+    visibility: hidden;
+  }
+
+  .reveal__body {
+    @mixin py var(--size-6);
+    @mixin px var(--size-8);
+
+    grid-column: 2;
+
+    & > :first-child {
+      margin-block-start: var(--size-0);
+    }
+
+    & > :last-child {
+      margin-block-end: var(--size-0);
+    }
+  }
+
+  .reveal::details-content {
+    grid-column: 2;
+  }
+}