arah2/theme/src/sheet.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ARAHARAH — Telemetry Rams Component Sheet</title>
  <!--
    Component sheet (D-03): the rendered proof that every Rams
    component derives from the token package. Consumes the built
    stylesheet only — utilities are never used in this markup;
    the component classes are the API, and brand tokens such as
    --color-signal-orange resolve inside dist/rams.css. Self-
    hosted typefaces, no CDN fonts (D-16); icons are inline SVG.
  -->
  <link rel="stylesheet" href="../dist/rams.css">
  <style>
    /*
     * Page shell — sheet layout only, not component API.
     * Every value is a token reference. The shell consumes the
     * Telegram light/dark slots (D-04): components stay
     * Rams-constant; only this page's background and base ink
     * re-theme with the OS scheme.
     */
    body {
      background: var(--shell-bg);
      color: var(--shell-on-surface);
      font: var(--type-body-md);
      letter-spacing: var(--type-body-md-tracking);
      padding: var(--spacing-margin);
    }
    main {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-space-lg);
    }
    main > section {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-space-sm);
    }
    /* Sheet furniture reuses the card-header plate pattern; its
     * ink rides the shell slots so the register stays legible
     * under both Telegram schemes. The .card demo below keeps
     * the pure component styling. */
    main > section > h2.card-header {
      color: var(--shell-on-surface);
      border-bottom-color: var(--shell-on-surface);
    }
    .masthead {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-space-xs);
    }
    .specimen-row {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-space-xs);
    }
    .component-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--spacing-space-sm);
    }
    .input-stack {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-space-sm);
    }
    .checkbox-row {
      display: flex;
      align-items: center;
      gap: var(--spacing-space-sm);
    }
  </style>
</head>
<body>
  <main>
    <!-- Masthead -->
    <header class="masthead">
      <p class="text-label-sm">ARAHARAH // TELEMETRY RAMS</p>
      <h1 class="text-display-lg">COMPONENT SHEET</h1>
      <p class="text-body-md">Every component below is styled exclusively by the token package — colors, spacing, and typography all resolve from theme tokens. No hard-coded values, no CDN fonts, zero rounded corners.</p>
    </header>

    <!-- 1 — Typography specimen -->
    <section>
      <h2 class="card-header">
        <span class="text-label-sm">TYPOGRAPHY SPECIMEN</span>
        <span class="card-ref">SEC-00 // LEGIBILITY</span>
      </h2>
      <div class="specimen-row">
        <span class="text-label-sm">DISPLAY-LG</span>
        <p class="text-display-lg">TELEMETRY RAMS</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">DISPLAY-LG-MOBILE</span>
        <p class="text-display-lg-mobile">TELEMETRY RAMS</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">HEADLINE-LG</span>
        <p class="text-headline-lg">ACTIVE ROUTE GUIDANCE</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">HEADLINE-LG-MOBILE</span>
        <p class="text-headline-lg-mobile">250 M</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">HEADLINE-MD</span>
        <p class="text-headline-md">TURN RIGHT ONTO BISMARCKSTRASSE</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">HEADLINE-SM</span>
        <p class="text-headline-sm">[ACCIDENT] A100 SOUTHBOUND KM 14.2</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">BODY-LG</span>
        <p class="text-body-lg">Reported via /accident by @klaus_b. Two vehicles involved, middle lane blocked.</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">BODY-MD</span>
        <p class="text-body-md">Unexpected road closure between Unter den Linden and Leipziger Str. Alternate via Wilhelmstrasse.</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">BODY-SM</span>
        <p class="text-body-sm">Points credited automatically when peer nodes or OSM validation confirms road status.</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">LABEL-LG</span>
        <p class="text-label-lg">REROUTE VIA TELEGRAM BOT</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">LABEL-MD</span>
        <p class="text-label-md">CONGESTION IN 1.4 KM — SLOWDOWN (+3 MIN)</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">LABEL-SM</span>
        <p class="text-label-sm">SEC-STACK // EXEC</p>
      </div>
      <div class="specimen-row">
        <span class="text-label-sm">TELEMETRY-NUM</span>
        <p class="text-telemetry-num">18:42</p>
      </div>
    </section>

    <!-- 2 — Buttons -->
    <section>
      <h2 class="card-header">
        <span class="text-label-sm">BUTTONS</span>
        <span class="card-ref">SEC-01 // TRIGGER</span>
      </h2>
      <div class="component-row">
        <button type="button" class="btn-primary">COMMENCE ROUTE</button>
        <button type="button" class="btn-primary">CONFIRM HAZARD</button>
        <button type="button" class="btn-secondary">ALTERNATIVES</button>
        <button type="button" class="btn-secondary">CALIBRATE</button>
      </div>
    </section>

    <!-- 3 — Inputs -->
    <section>
      <h2 class="card-header">
        <span class="text-label-sm">INPUTS</span>
        <span class="card-ref">SEC-02 // FRAME</span>
      </h2>
      <div class="input-stack">
        <input type="text" class="input-field" placeholder="Enter street, postal code, or /osm tag...">
        <input type="text" class="input-field" placeholder="Type /traffic, /hazard, or inline query...">
      </div>
    </section>

    <!-- 4 — Chips / badges -->
    <section>
      <h2 class="card-header">
        <span class="text-label-sm">CHIPS / BADGES</span>
        <span class="card-ref">SEC-03 // EVENT</span>
      </h2>
      <div class="component-row">
        <span class="chip-traffic">CONGESTION</span>
        <span class="chip-hazard">CRASH / BLOCK</span>
        <span class="chip-safe">POLICE RADAR</span>
      </div>
    </section>

    <!-- 5 — Telemetry card -->
    <section>
      <h2 class="card-header">
        <span class="text-label-sm">TELEMETRY CARD</span>
        <span class="card-ref">SEC-04 // MODULE</span>
      </h2>
      <article class="card">
        <header class="card-header">
          <span class="text-label-sm">VELOCITY</span>
          <span class="card-ref">SEC-04 // SPEED</span>
        </header>
        <div class="card-content">
          <span class="text-telemetry-num">54</span>
          <span class="text-label-md">KM/H</span>
        </div>
      </article>
    </section>

    <!-- 6 — Maneuver banner -->
    <section>
      <h2 class="card-header">
        <span class="text-label-sm">MANEUVER BANNER</span>
        <span class="card-ref">SEC-05 // HUD</span>
      </h2>
      <div class="maneuver-banner">
        <svg class="maneuver-arrow" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true">
          <path d="M8 28V16H22"></path>
          <path d="M14 8L22 16L14 24"></path>
        </svg>
        <div>
          <p class="text-label-sm">NEXT MANEUVER // T-01</p>
          <p class="text-headline-md">TURN RIGHT ONTO BISMARCKSTRASSE</p>
        </div>
        <p class="text-telemetry-num">250 M</p>
      </div>
    </section>

    <!-- 7 — Checkboxes & toggle -->
    <section>
      <h2 class="card-header">
        <span class="text-label-sm">CHECKBOXES / TOGGLE</span>
        <span class="card-ref">SEC-06 // SWITCH</span>
      </h2>
      <div class="component-row">
        <label class="checkbox-row">
          <input type="checkbox" class="checkbox" checked>
          <span class="text-label-md">AVOID TOLLS</span>
        </label>
        <label class="checkbox-row">
          <input type="checkbox" class="checkbox">
          <span class="text-label-md">OPT-IN TELEMETRY</span>
        </label>
      </div>
      <div class="toggle" role="group" aria-label="Dispatch mode">
        <button type="button" class="toggle-option" aria-pressed="false">OFF</button>
        <button type="button" class="toggle-option" aria-pressed="true">ON</button>
      </div>
    </section>
  </main>
</body>
</html>