forked from c-fu/arah2
feat(01-design-tokens-rams-foundation-02): rendered component sheet — all mockup-derived families via token package
- sheet.html: typography specimen (all 13 scale entries), buttons, inputs, chips (CONGESTION / CRASH / BLOCK / POLICE RADAR), telemetry card (SEC-04 // SPEED), maneuver banner, checkbox + two-way toggle - consumes built dist/rams.css only; markup uses component classes, no utility soup; inline SVG icons (no icon-font CDN, D-16); shell consumes --shell-bg/--shell-on-surface slots (D-04) - package.json: sheet script (build + open hint) - real-browser computed-style audit: 41/41 checks render from tokens; woff2 fonts verified loaded
This commit is contained in:
araharah-executor
@@ -0,0 +1,244 @@
|
||||
<!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. Self-hosted typefaces,
|
||||
no CDN fonts (D-16); icons are inline SVG, not icon fonts.
|
||||
-->
|
||||
<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>
|
||||
Reference in New Issue
Block a user