Astro design-system showcase

---
/**
 * Live demo for ui-design-system/ui/astro-design-system-showcase.
 *
 * The tokens-css components rendered as specimens, the way a specimen page of
 * the showcase renders the real component. One component takes `state`; the
 * frontmatter exports `states` so the docs host and scripts/check.mjs read the
 * same list (RENDERING.md, sections 2.2 and 2.4). No hydration: everything
 * here is plain markup with `var(--token)` reads, resolved against the page's
 * tokens. On the docs host those are prima.li's values; a client site brings
 * its own, which is the recipe's point.
 *
 * The component bodies beside this file in components/*.astro are the
 * measured site's (alchemy.zuerich alchemy-new/src/components/ at 77291bb,
 * the commit measured_on names): Button, Eyebrow, Section, Navigation, Footer
 * and cards/FeatureCard, with the site's `withBase` and `content.ts` imports
 * replaced by literal props; each header lists its adaptations. They live
 * here until a second Astro row needs them, at which point they move to a
 * workspace package.
 */
import Button from './components/Button.astro';
import Eyebrow from './components/Eyebrow.astro';
import FeatureCard from './components/FeatureCard.astro';
import Footer from './components/Footer.astro';
import Navigation from './components/Navigation.astro';
import Section from './components/Section.astro';
import { wordmark } from './wordmark.ts';

export const states = {
  default: { label: 'Overview: type scale, colour aliases, spacing, radius' },
  actions: { label: 'Button (three variants by two surfaces, disabled, loading), Eyebrow' },
  cards: { label: 'FeatureCard (dot, number, icon; on light and on dark)' },
  navigation: { label: 'Navigation, Section with tone, Footer' },
};

interface Props {
  state: keyof typeof states;
}

const { state } = Astro.props;

/* Sample data: literal, nothing real. */
const brand = 'Musterfirma';
const links = [
  { label: 'Leistungen', href: '/leistungen' },
  { label: 'Referenzen', href: '/referenzen' },
  { label: 'Über uns', href: '/ueber-uns' },
  { label: 'Blog', href: 'https://blog.example', external: true },
];
const cta = { label: 'Kontakt', href: '/kontakt' };
const year = 2026;
/* The site passes logo files; the demo passes a wordmark as an inline SVG (wordmark.ts). */
const logoDark = wordmark(brand, '#1a1420');
const logoLight = wordmark(brand, '#ffffff');
const footerCols = [
  { title: 'Studio', links: [{ label: 'Leistungen', href: '/leistungen' }, { label: 'Referenzen', href: '/referenzen' }, { label: 'Über uns', href: '/ueber-uns' }] },
  { title: 'Kontakt', links: [{ label: 'Termin buchen', href: '/kontakt' }, { label: 'Blog', href: 'https://blog.example', external: true }] },
  { title: 'Rechtliches', links: [{ label: 'Impressum', href: '/impressum' }, { label: 'Datenschutz', href: '/datenschutz' }] },
];
const footerMeta = [{ label: 'Kontakt', href: '/kontakt' }, { label: 'Newsletter', href: '/newsletter' }];

const variants = ['primary', 'secondary', 'tertiary'] as const;
const surfaces = [
  { key: 'light', label: 'On light' },
  { key: 'dark', label: 'On dark' },
] as const;

const type = [
  { cls: 't-display', name: 'display', token: '--fs-display' },
  { cls: 't-h1', name: 'h1', token: '--fs-h1' },
  { cls: 't-h2', name: 'h2', token: '--fs-h2' },
  { cls: 't-h3', name: 'h3', token: '--fs-h3' },
  { cls: 't-h4', name: 'h4', token: '--fs-h4' },
  { cls: 't-body-1', name: 'body-1', token: '--fs-body-1' },
  { cls: 't-body-2', name: 'body-2', token: '--fs-body-2' },
  { cls: 't-caption', name: 'caption', token: '--fs-caption' },
];
const colours = [
  { token: '--bg-page', role: 'page background' },
  { token: '--bg-surface', role: 'raised surface' },
  { token: '--bg-dark', role: 'dark band' },
  { token: '--fg-default', role: 'text' },
  { token: '--fg-muted', role: 'secondary text' },
  { token: '--fg-accent', role: 'accent, links, primary action' },
  { token: '--fg-on-dark', role: 'text on a dark band' },
  { token: '--border-default', role: 'hairline' },
];
const spacing = ['--space-xs', '--space-sm', '--space-md', '--space-lg', '--space-xl', '--space-2xl', '--space-3xl', '--space-4xl', '--space-section'];
const radii = ['--radius-sm', '--radius', '--radius-lg', '--radius-xl'];
---

<div class="ds-demo" data-ds-state={state}>
  {state === 'default' && (
    <div class="ds-stack">
      <section class="ds-spec">
        <h3 class="ds-spec-title">Type scale</h3>
        <div class="ds-spec-note">The <code>.t-*</code> classes; every size is one <code>--fs-*</code> token, so a client site changes the scale in one file.</div>
        <div class="ds-type">
          {type.map((t) => (
            <div class="ds-type-row">
              <span class={t.cls}>Alles an einem Ort</span>
              <code>.{t.cls} <span class="ds-dim">var({t.token})</span></code>
            </div>
          ))}
        </div>
      </section>

      <section class="ds-spec">
        <h3 class="ds-spec-title">Colour aliases</h3>
        <div class="ds-spec-note">Components read the aliases, never a raw palette value. The swatch shows the value the host page resolves.</div>
        <div class="ds-swatches">
          {colours.map((c) => (
            <div class="ds-swatch">
              <span class="ds-swatch-chip" style={`background: var(${c.token});`}></span>
              <code>{c.token}</code>
              <span class="ds-dim">{c.role}</span>
            </div>
          ))}
        </div>
      </section>

      <section class="ds-spec">
        <h3 class="ds-spec-title">Spacing</h3>
        <div class="ds-spec-note">The steps, as bars at their own width.</div>
        <div class="ds-bars">
          {spacing.map((s) => (
            <div class="ds-bar-row">
              <code>{s}</code>
              <span class="ds-bar" style={`width: var(${s});`}></span>
            </div>
          ))}
        </div>
      </section>

      <section class="ds-spec">
        <h3 class="ds-spec-title">Radius</h3>
        <div class="ds-radii">
          {radii.map((r) => (
            <div class="ds-radius">
              <span class="ds-radius-chip" style={`border-radius: var(${r});`}></span>
              <code>{r}</code>
            </div>
          ))}
        </div>
      </section>
    </div>
  )}

  {state === 'actions' && (
    <div class="ds-stack">
      <section class="ds-spec">
        <h3 class="ds-spec-title">Button</h3>
        <div class="ds-spec-note">Three variants on two surfaces, the matrix the site's own specimen page draws (<code>components/button.astro</code>). One component renders <code>&lt;a&gt;</code> with <code>href</code> and <code>&lt;button&gt;</code> without; <code>disabled</code> and <code>loading</code> block interaction.</div>
        {surfaces.map((sf) => (
          <div class:list={['ds-surface', { 'ds-surface--dark': sf.key === 'dark' }]}>
            <span class="ds-surface-label">{sf.label}</span>
            <div class="ds-row">
              {variants.map((v) => <Button variant={v} surface={sf.key}>{v[0].toUpperCase() + v.slice(1)}</Button>)}
              <Button variant="primary" surface={sf.key} disabled>Disabled</Button>
              <Button variant="primary" surface={sf.key} loading>Loading</Button>
            </div>
          </div>
        ))}
        <div class="ds-row">
          <Button href="/kontakt" variant="primary">As a link</Button>
          <Button type="submit" variant="secondary">As submit</Button>
          <Button variant="tertiary">
            Weiter
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </Button>
        </div>
        <div class="ds-row ds-row--narrow">
          <Button fullWidth>Full width</Button>
        </div>
      </section>

      <section class="ds-spec">
        <h3 class="ds-spec-title">Eyebrow</h3>
        <div class="ds-spec-note">Sentence case at body size; the tones are <code>default</code>, <code>on-dark</code> and <code>plain</code>.</div>
        <div class="ds-row">
          <Eyebrow>Leistungen</Eyebrow>
          <span class="ds-on-dark"><Eyebrow tone="on-dark">On dark</Eyebrow></span>
          <span class="ds-on-dark"><Eyebrow tone="plain">Plain</Eyebrow></span>
        </div>
      </section>
    </div>
  )}

  {state === 'cards' && (
    <div class="ds-stack">
      <section class="ds-spec">
        <h3 class="ds-spec-title">FeatureCard</h3>
        <div class="ds-spec-note">A bordered surface card with a marker at the top: a dot, a number or an icon. The title takes an <code>&lt;em&gt;</code> for the serif accent.</div>
        <div class="ds-grid" data-gallery-focus="true">
          <FeatureCard marker="dot" title="Beratung" body="Ein erstes Gespräch, in dem wir zuhören und Fragen stellen." />
          <FeatureCard marker="number" number="02" title="Konzept" body="Was gebaut wird, in welcher Reihenfolge, und warum." />
          <FeatureCard marker="icon" title="<em>Umsetzung</em>" body="Die Website, das Formular, die Buchungsseite.">
            <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 17l6-6-6-6M12 19h8"/></svg>
          </FeatureCard>
        </div>
      </section>

      <section class="ds-spec">
        <h3 class="ds-spec-title">On dark</h3>
        <div class="ds-spec-note"><code>surface="dark"</code> inverts to the ink card; the marker and the body copy follow.</div>
        <div class="ds-grid">
          <FeatureCard surface="dark" marker="dot" title="Betrieb" body="Hosting, Updates und ein Ansprechpartner." />
          <FeatureCard surface="dark" marker="number" number="04" title="Mit <em>Zahl</em>" body="Die Nummer als Marker, in Weiss auf der dunklen Karte." />
          <FeatureCard surface="dark" marker="none" title="Ohne Marker">
            <Button variant="secondary" surface="dark">Termin buchen</Button>
          </FeatureCard>
        </div>
      </section>
    </div>
  )}

  {state === 'navigation' && (
    <div class="ds-stack ds-stack--flush">
      <section class="ds-spec ds-spec--flush">
        <h3 class="ds-spec-title ds-spec-title--inset">Navigation, solid mode</h3>
        <div class="ds-spec-note ds-spec-note--inset">The site pins this to the top of every page; the wrapper here contains it. Below 680 px the links fold into the burger.</div>
        <div class="ds-nav-stage">
          <Navigation navMode="solid" logoLight={logoLight} logoDark={logoDark} logoAlt={brand} links={links} ctaLabel={cta.label} ctaHref={cta.href} />
        </div>
      </section>

      <section class="ds-spec ds-spec--flush">
        <h3 class="ds-spec-title ds-spec-title--inset">Section, tone default and dark</h3>
        <Section tone="default" spacing="sm">
          <Eyebrow>Leistungen</Eyebrow>
          <div class="t-h2 ds-section-heading">Ein heller Abschnitt</div>
          <div class="t-body-1 ds-section-copy">Die Section bringt Abstand, Breite und Ton; der Inhalt bringt seine eigenen Farben über die on-dark-Varianten.</div>
        </Section>
        <Section tone="dark" spacing="sm" width="narrow">
          <Eyebrow tone="on-dark">Referenzen</Eyebrow>
          <div class="t-h2 ds-section-heading">Ein dunkler Abschnitt</div>
          <div class="t-body-1 ds-section-copy">Die schmale Breite für einen Abschnitt, der genau eine Sache will.</div>
          <div class="ds-section-actions"><Button variant="secondary" surface="dark">Termin buchen</Button><Button variant="tertiary" surface="dark">Mehr erfahren</Button></div>
        </Section>
      </section>

      <section class="ds-spec ds-spec--flush">
        <h3 class="ds-spec-title ds-spec-title--inset">Footer</h3>
        <Footer brand={brand} logo={logoDark} cols={footerCols} meta={footerMeta} year={year}>
          <svg slot="mark" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="currentColor" d="M24 2l5.5 14.5L44 22l-14.5 5.5L24 42l-5.5-14.5L4 22l14.5-5.5z"/></svg>
        </Footer>
      </section>
    </div>
  )}
</div>

<style>
  /* The specimen chrome: labels and grids around the components. Every value
     is a token read, so the chrome follows the host page like the components do.
     Notes and headings are div and h3, not p and h2: the docs host's shell
     styles p, h1 and h2 inside the frame at a specificity a scoped class here
     cannot beat, and the frame's reset undoes that to `inherit` (prima.li
     src/index-site/demo-frame.css says why). */
  .ds-demo {
    font-family: var(--font-body);
    color: var(--fg-default);
    background: var(--bg-page);
  }
  .ds-stack { display: flex; flex-direction: column; gap: var(--space-2xl); padding: var(--space-xl); }
  .ds-stack--flush { padding: var(--space-xl) 0; }
  .ds-spec { display: flex; flex-direction: column; gap: var(--space-md); }
  .ds-spec-title { margin: 0; font-size: var(--fs-overline); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-muted); }
  .ds-spec-title--inset { padding: 0 var(--space-xl); }
  .ds-spec-note--inset { padding: 0 var(--space-xl); }
  .ds-spec-note { margin: 0; font-size: var(--fs-body-2); color: var(--fg-muted); max-width: var(--content-narrow); }
  .ds-spec code { font-family: var(--work-mono, ui-monospace, monospace); font-size: var(--fs-caption); }
  .ds-dim { color: var(--fg-muted); }
  .ds-gap { height: var(--space-lg); }

  .ds-type { display: flex; flex-direction: column; gap: var(--space-md); }
  .ds-type-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md); border-bottom: 1px solid var(--border-default); padding-bottom: var(--space-sm); }

  .ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-md); }
  .ds-swatch { display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--fs-caption); }
  .ds-swatch-chip { display: block; height: 56px; border-radius: var(--radius); border: 1px solid var(--border-default); }

  .ds-bars { display: flex; flex-direction: column; gap: var(--space-sm); }
  .ds-bar-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: var(--space-md); }
  .ds-bar { display: block; height: 12px; background: var(--fg-accent); border-radius: var(--radius-sm); }

  .ds-radii { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
  .ds-radius { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
  .ds-radius-chip { display: block; width: 64px; height: 64px; background: var(--fg-accent); }

  .ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
  .ds-row--narrow { max-width: 320px; }
  .ds-on-dark { display: inline-block; background: var(--bg-dark); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
  .ds-surface { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius); border: 1px solid var(--border-default); }
  .ds-surface--dark { background: var(--bg-dark); color: var(--fg-on-dark); border-color: transparent; }
  .ds-surface-label { font-size: var(--fs-caption); color: var(--fg-muted); }
  .ds-surface--dark .ds-surface-label { color: var(--fg-on-dark); opacity: 0.6; }

  /* The site's Navigation is position: fixed; layout containment makes this
     box its containing block, so it pins to the top of the stage and not of
     the docs page. The height is the nav's own: the 40px logo plus the
     component's vertical padding. */
  .ds-nav-stage { position: relative; contain: layout paint; min-height: calc(40px + 2 * var(--space-lg)); background: var(--bg-page); }
  .ds-section-heading { margin: var(--space-sm) 0 var(--space-xs); color: inherit; }
  .ds-section-copy { margin: 0; max-width: var(--content-narrow); color: inherit; opacity: 0.85; }
  .ds-section-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }

  .ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-lg); }
</style>

/design-system                      (index; reads dsComponents, dsGroups)
  DsLayout (title, description, active)
    Base (the site's layout: navMode="solid", no floating card)
      div.dsl
        aside.dsl-side [data-lenis-prevent]
          a.dsl-home "Design System"
          nav.dsl-nav
            ul.dsl-toplist   Overview, Principles
            div.dsl-group    "Foundations" > li x dsFoundations (Colour, Typography, Spacing, Layout, Radius & shadow, Icons)
            div.dsl-group x dsGroups (Actions, Forms, Indicators, Cards, Layout, Blocks, Pages, Documents, Social Media, Email)
              li x top-level component (documented -> link; else "soon", aria-disabled)
                ul.dsl-sub x children (parent: slug), shown only while that component or a child is active
        main.dsl-main
          <slot />
            header.ov-hero      eyebrow, h1 "The design system.", lede, "65 of 78 components documented"
            section.ov-cards    Foundations card, Principles card
            section.ov-index    h2 "Components", one .ov-group per dsGroup, .ov-cmp tile per component (Doc | soon badge)
/design-system/components/<slug>    (one page per documented component)
  DsLayout > ComponentDoc (group, Stable | WIP, name, "Source <file>")
    Specimen (label, bg canvas | dark, code, pad, center) around the REAL component
    Matrix (surfaces x states) . StateChart (default, hover, active, focus, disabled forced)
    ResponsivePreview | ViewportPreview (six breakpoints, true width, scaled to fit) | SocialPreview | EmailClientPreview
    PropsTable (rows: name, type, default, note)
/design-system/foundations/<slug>   colour, typography, spacing, layout, radius-shadow, icons
/design-system/frame/<name>         chrome-less fixed-size renders for iframes and screenshots (69 files)