70 lines
3.7 KiB
Plaintext
70 lines
3.7 KiB
Plaintext
#load "../lib/app.uce"
|
|
|
|
RENDER(Request& context)
|
|
{
|
|
starter_boot(context);
|
|
context.call["starter"]["page_title"] = "Theme Preview";
|
|
starter_register_css("views/themes.css", context);
|
|
String current_theme_key = context.cfg.get_by_path("theme/key").to_string();
|
|
String theme_label = first(context.cfg.get_by_path("theme/label").to_string(), current_theme_key);
|
|
String theme_mode = context.cfg.get_by_path("theme/mode").to_string();
|
|
StringMap theme_params;
|
|
theme_params["theme"] = current_theme_key;
|
|
|
|
<>
|
|
<div class="theme-preview-shell">
|
|
<section class="theme-preview-hero">
|
|
<span class="theme-preview-kicker">Starter Theme Preview</span>
|
|
<h1><?= theme_label ?></h1>
|
|
<p>This route renders the same neutral content inside each theme so downstream projects can compare layout, typography, color tokens, and chrome.</p>
|
|
<div class="theme-preview-actions">
|
|
<a class="btn" href="<?= starter_link("themes", theme_params, context) ?>">Back to Gallery</a>
|
|
<a class="btn btn-secondary" href="<?= starter_link("", theme_params, context) ?>">Open Home in This Theme</a>
|
|
</div>
|
|
</section>
|
|
<section class="theme-preview-grid">
|
|
<div class="theme-preview-card">
|
|
<h2>Tokens at a Glance</h2>
|
|
<div class="theme-preview-stat-grid">
|
|
<div class="theme-preview-stat"><span>Current Theme</span><strong><?= theme_label ?></strong></div>
|
|
<div class="theme-preview-stat"><span>Mode</span><strong><?= theme_mode ?></strong></div>
|
|
<div class="theme-preview-stat"><span>Preview Route</span><strong>theme-preview</strong></div>
|
|
</div>
|
|
<div class="theme-preview-swatches">
|
|
<span style="background: var(--primary);">Primary</span>
|
|
<span style="background: var(--secondary);">Secondary</span>
|
|
<span style="background: var(--accent);">Accent</span>
|
|
<span style="background: var(--surface-elevated, var(--surface)); color: var(--text-primary); border: 1px solid var(--border);">Surface</span>
|
|
</div>
|
|
</div>
|
|
<div class="theme-preview-card">
|
|
<h2>System Message States</h2>
|
|
<div class="banner success">Success state keeps contrast and border semantics intact.</div>
|
|
<div class="banner warning">Warning state checks how the theme handles warm accents and muted text.</div>
|
|
<div class="banner error">Error state shows whether danger colors stay legible over each surface.</div>
|
|
</div>
|
|
<div class="theme-preview-card">
|
|
<h2>Form Controls</h2>
|
|
<form class="theme-preview-form">
|
|
<div><label for="preview-project">Project Name</label><input id="preview-project" name="project" type="text" placeholder="Starter backport playground" /></div>
|
|
<div><label for="preview-owner">Owner</label><input id="preview-owner" name="owner" type="email" placeholder="team@example.com" /></div>
|
|
<div><label for="preview-goal">Notes</label><textarea id="preview-goal" name="goal" rows="4" placeholder="Describe the kind of product this theme should support."></textarea></div>
|
|
<div class="theme-preview-actions"><button type="button" class="btn">Primary Action</button><button type="button" class="btn btn-outline">Secondary Action</button></div>
|
|
</form>
|
|
</div>
|
|
<div class="theme-preview-card">
|
|
<h2>Dense Content Block</h2>
|
|
<table>
|
|
<thead><tr><th>Area</th><th>Expectation</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Navigation</td><td>Should remain readable when menus get long.</td><td>Verified</td></tr>
|
|
<tr><td>Cards</td><td>Should keep spacing and hierarchy on both desktop and mobile.</td><td>Verified</td></tr>
|
|
<tr><td>Embeds</td><td>Should render cleanly inside the gallery iframe.</td><td>Verified</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</>
|
|
}
|