docs/demos/native-appearance-slice1.html
Ref: Size: 6.1 KiB History
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Native appearance · slice 1</title>
<style>
:root { color-scheme: dark; --ink:#f3e8d0; --muted:#c4aa8d; --bg:#211b1a; --panel:#2b211f; --panel-2:#342824; --teal:#2f6f70; --teal-soft:#496f68; --amber:#d8a84e; --line:#76594b; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 78% 0,#3b2922 0,transparent 42%),var(--bg); color:var(--ink); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { width:min(1080px,calc(100% - 40px)); margin:0 auto; padding:58px 0 52px; }
.eyebrow { color:var(--amber); font-size:.76rem; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
h1 { max-width:760px; margin:10px 0 14px; font-size:clamp(2.2rem,6vw,4.5rem); line-height:1.02; letter-spacing:-.055em; }
.lede { max-width:690px; margin:0 0 30px; color:var(--muted); font-size:1.15rem; }
.status { display:inline-flex; align-items:center; gap:9px; padding:8px 13px; border:1px solid #8b6a4d; border-radius:999px; background:#372821; color:#ffd995; font-size:.86rem; }
.status i { width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px #d8a84e22; }
.video-card { margin:42px 0 0; padding:14px; border:1px solid #76594b99; border-radius:20px; background:#171313aa; box-shadow:0 22px 70px #09070766; }
video { display:block; width:100%; height:auto; aspect-ratio:1100/700; border-radius:12px; background:#100d0d; }
figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:13px 4px 1px; color:var(--muted); font-size:.9rem; }
a { color:#a8d6c6; text-underline-offset:3px; }
section { margin-top:52px; }
h2 { margin:0 0 16px; font-size:1.45rem; letter-spacing:-.02em; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
article { padding:21px; border:1px solid #76594b66; border-radius:14px; background:linear-gradient(145deg,#342824cc,#2b211fcc); }
article h3 { margin:0 0 7px; font-size:1rem; color:#ffe6b6; }
article p { margin:0; color:var(--muted); }
.review { border-left:3px solid var(--amber); padding:4px 0 4px 17px; color:#ead9bd; }
.review p { margin:0; }
table { width:100%; border-collapse:collapse; color:var(--muted); font-size:.93rem; }
th,td { padding:11px 10px; border-bottom:1px solid #76594b55; text-align:left; vertical-align:top; }
th { color:#ffe6b6; font-weight:650; }
footer { margin-top:52px; color:#9d8775; font-size:.82rem; }
@media (max-width:650px) { main { width:min(100% - 26px,1080px); padding-top:36px; } .grid { grid-template-columns:1fr; } figcaption { display:block; } figcaption span { display:block; margin-top:5px; } }
</style>
</head>
<body>
<main>
<div class="eyebrow">muxg · native appearance</div>
<h1>A warmer theme for muxg</h1>
<p class="lede">Slice 1 gives the native client a single, reusable appearance model and a cohesive hardcoded trial theme. The short recording shows the actual application running in isolated headless Sway.</p>
<div class="status"><i aria-hidden="true"></i>Recorded demo approved</div>
<figure class="video-card">
<video controls playsinline preload="metadata" poster="preview.png" width="1100" height="700" aria-label="Native appearance slice 1 demo">
<source src="demo.mp4" type="video/mp4">
Your browser cannot play this video. <a href="demo.mp4">Download the demo video</a>.
</video>
<figcaption><span>27.2 seconds · 1100 × 700 · NVIDIA · isolated headless Sway at 200%</span><span>No audio · no cuts · <a href="demo.mp4">direct video</a></span></figcaption>
</figure>
<section>
<h2>What this slice achieves</h2>
<div class="grid">
<article><h3>One source of appearance</h3><p>Native colors now come from a reusable Theme. The warm trial uses cream text, a dark brown background, muted teal focus, amber bell feedback, and a warm divider.</p></article>
<article><h3>Terminal color semantics</h3><p>Legacy defaults remain named for the later config slice. Default colors, all 256 indexed entries, inverse rendering, and explicit RGB colors keep their intended semantics.</p></article>
<article><h3>Chrome covered</h3><p>Focused and unfocused headers, cursor, dividers, picker and recovery rows, empty workspace, modal selection, and bell headers use the shared theme.</p></article>
<article><h3>Scope held steady</h3><p>There is no config, font change, hot reload, or text selection in this slice. The existing popup selection remains the only selection behavior.</p></article>
</div>
</section>
<section>
<h2>What to review</h2>
<div class="review"><p>The user approved the recorded appearance demo: “I approve the demo! Looks good.” The teal focus colour is intentional. The next slice will add config and fonts, including Nerd Font Mono, then Ghostty theme-file loading. Ligatures remain a later discussion.</p></div>
</section>
<section>
<h2>Validation</h2>
<table>
<thead><tr><th>Area</th><th>Result</th></tr></thead>
<tbody>
<tr><td>Repository checks</td><td>CI, check, native unit tests, and e2e pass.</td></tr>
<tr><td>Appearance and scale</td><td>NVIDIA appearance and scale checks pass.</td></tr>
<tr><td>Stress</td><td>Unresolved: matched theme run 1 frame p99 18.923 ms passed; run 2 frame p99 20.884 ms failed the 20 ms threshold. Baselines passed at 19.904 ms and 19.935 ms. Input stayed within 250 ms.</td></tr>
</tbody>
</table>
<p style="margin:14px 0 0;color:#9d8775;font-size:.88rem">The comparisons did not establish a consistent theme regression. The NVIDIA stress gate remains unresolved because a run exceeded the budget. An AMD headless comparison is not NVIDIA acceptance evidence.</p>
</section>
<footer>Native appearance slice 1 · review artifact · source commit 31bd57fd</footer>
</main>
</body>
</html>