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
+2
-1
@@ -10,6 +10,7 @@
|
|||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "tailwindcss -i ./src/theme.css -o ./dist/rams.css --minify",
|
"build": "tailwindcss -i ./src/theme.css -o ./dist/rams.css --minify",
|
||||||
"send": "mkdir -p dist/fonts && cp -r fonts/geist fonts/space-grotesk dist/fonts/"
|
"send": "mkdir -p dist/fonts && cp -r fonts/geist fonts/space-grotesk dist/fonts/",
|
||||||
|
"sheet": "npm run build && echo 'open theme/src/sheet.html in browser ( Consumes theme/dist/rams.css )'"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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