design-preview.html
Rama main · réplica de lectura del repositorio original.
<!DOCTYPE html>
<!--
Design preview · Know Yourself — the skin-trial regression target.
What this is: a static catalog of the active design tokens and the press-*
component grammar, rendered in the light theme, .dark, and html.fresh, on one
page. It links the REAL stylesheets (tokens.css for the structural scale,
src/app/styles/base.css for the active palette, src/app/styles/fresh.css for
the fresh skin, and the press-* component modules), so a screenshot of this
page is a fingerprint of the current skins.
It is NOT part of the app: no route, no build, no Tailwind. Font fidelity is
approximate — production serves Archivo and IBM Plex Mono through next/font;
here we fall back to whatever the OS offers, so compare colors, shapes,
rhythm, and hierarchy, not letterforms.
How to use (see DESIGN.md → Iteration guide):
1. Change tokens in src/app/styles/base.css (:root / .dark).
2. Run node scripts/check-palette-contrast.mjs
3. Screenshot BOTH themes with a FRESH Edge profile (a reused profile
serves cached bytes — byte-identical screenshots are fake renders):
& "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" `
--headless=new --disable-gpu --hide-scrollbars `
--window-size=1440,4200 --virtual-time-budget=8000 `
--user-data-dir="$env:TEMP\pv-edge-fresh" `
--screenshot="preview.png" `
"file:///C:/Users/yuki/quiz-platform/design-preview.html"
4. Diff against the previous screenshot before accepting a skin change.
-->
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>Design preview · 认识你自己</title>
<link rel="stylesheet" href="tokens.css" />
<link rel="stylesheet" href="src/app/styles/base.css" />
<link rel="stylesheet" href="src/app/styles/shell.css" />
<link rel="stylesheet" href="src/app/styles/assessments.css" />
<link rel="stylesheet" href="src/app/styles/quiz.css" />
<link rel="stylesheet" href="src/app/styles/result.css" />
<link rel="stylesheet" href="src/app/styles/journal.css" />
<link rel="stylesheet" href="src/app/styles/home.css" />
<link rel="stylesheet" href="src/app/styles/motion.css" />
<link rel="stylesheet" href="src/app/styles/fresh.css" />
<style>
/* Preview-only scaffolding (pv-*). Never used by the app. */
:root {
--font-archivo: "Archivo", "Segoe UI", sans-serif;
--font-plex-mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
}
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
.pv-theme { padding: 0 0 3.5rem; }
.pv-wrap { width: min(100%, 68rem); margin-inline: auto; padding: 2.5rem clamp(1rem, 3vw, 2.5rem) 0; }
.pv-kicker { margin: 0 0 0.6rem; color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; }
.pv-page-title { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 640; letter-spacing: var(--tracking-display); line-height: 1.15; color: var(--ink); }
.pv-note { margin: 0.8rem 0 0; max-width: 70ch; color: var(--muted-text); font-size: 0.78rem; line-height: 1.75; }
.pv-group { margin-top: 2.4rem; }
.pv-group > h3 { margin: 0 0 0.9rem; font-family: var(--font-display); font-size: var(--text-md); font-weight: 620; letter-spacing: var(--tracking-display); color: var(--ink); }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.pv-swatch { border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--paper-strong); overflow: hidden; }
.pv-swatch-color { height: 3.25rem; }
.pv-swatch-label { padding: 0.45rem 0.6rem; font-size: 0.68rem; line-height: 1.45; color: var(--muted-text); }
.pv-swatch-label code { display: block; margin-top: 0.15rem; font-family: var(--font-code); font-size: 0.58rem; color: var(--ink); word-break: break-all; }
.pv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.pv-stack { display: grid; gap: 1.1rem; }
.pv-h1 { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 640; letter-spacing: var(--tracking-display); line-height: 1.06; color: var(--ink); }
.pv-h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 620; letter-spacing: var(--tracking-display); line-height: 1.2; color: var(--ink); }
.pv-round { margin: 0; font-family: "YouYuan", "幼圆", "Yuanti SC", "Hiragino Maru Gothic ProN", var(--font-display); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; color: var(--ink); }
.pv-body { margin: 0.5rem 0 0; color: var(--muted-text); font-size: var(--text-sm); line-height: 1.75; }
.pv-mono { font-family: var(--font-code); font-size: var(--text-sm); color: var(--ink); }
.pv-label { color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; }
.pv-meter { position: relative; height: 0.9rem; border: 1px solid var(--meter-rule); border-radius: 999px; background: var(--meter-track); max-width: 26rem; }
.pv-meter-fill { position: absolute; inset-block: 0; left: 0; width: 62%; border-radius: 999px; background: var(--meter-fill); }
.pv-meter-needle { position: absolute; top: -0.3rem; bottom: -0.3rem; left: calc(62% - 1px); width: 2px; background: var(--meter-needle); }
.pv-card-scope { display: block !important; padding-top: 0 !important; max-width: 22rem; }
.pv-sep { margin: 2.4rem 0 0; border: 0; border-top: 1px solid var(--line); }
/* Alias re-resolution shim. In the app, .dark sits on <html>, so the
:root aliases in tokens.css (--ink, --line, --meter-*, --shadow-*, …)
re-resolve against the dark palette ON that element. This page puts
.dark on a <section>, where those aliases arrive already frozen to the
light values — so they are re-declared here against the section-local
--color-* tokens. Mirrors tokens.css :root (alias block, shadows, meter).
--surface-contrast/-ink are intentionally absent: they are set directly
by the .dark blocks, which the section already inherits. */
.pv-theme.dark {
--background: var(--color-paper);
--foreground: var(--color-ink);
--paper: var(--color-paper);
--paper-strong: var(--color-paper-strong);
--ink: var(--color-ink);
--night: var(--color-night);
--accent: var(--color-accent);
--muted: var(--color-muted);
--muted-foreground: var(--color-muted-text);
--muted-text: var(--color-muted-text);
--sheet-wash: var(--color-sheet-wash);
--sheet-surface: var(--color-sheet-surface);
--sheet-ink: var(--color-sheet-ink);
--blue-wash: var(--color-blue-wash);
--danger: var(--color-danger);
--accent-wash: color-mix(in oklab, var(--accent) 11%, var(--paper));
--teal: var(--color-teal);
--teal-soft: var(--color-teal-soft);
--signal: var(--color-signal);
--signal-ink: var(--color-signal-ink);
--sky: var(--color-sky);
--topic-self: var(--color-topic-self);
--topic-emotion: var(--color-topic-emotion);
--topic-relationship: var(--color-topic-relationship);
--topic-life: var(--color-topic-life);
--line: color-mix(in oklab, var(--ink) 24%, transparent);
--soft-line: color-mix(in oklab, var(--ink) 17%, transparent);
--sheet-line: color-mix(in oklab, var(--sheet-ink) 22%, transparent);
--border: var(--soft-line);
--ring: var(--accent);
--meter-track: color-mix(in oklab, var(--ink) 7%, transparent);
--meter-rule: color-mix(in oklab, var(--ink) 20%, transparent);
--meter-fill: var(--accent);
--meter-needle: var(--signal);
--shadow-card-hover: 0 1.25rem 2.5rem color-mix(in oklab, var(--color-ink) 14%, transparent);
--shadow-feedback: 0 0.875rem 2rem color-mix(in oklab, var(--color-ink) 17%, transparent);
--shadow-dialog: 0 1.5rem 4rem color-mix(in oklab, var(--color-night) 26%, transparent);
--shadow-soft: 0 1.25rem 2.75rem color-mix(in oklab, var(--color-ink) 11%, transparent);
--shadow-lift: 0 1.75rem 3.5rem color-mix(in oklab, var(--color-ink) 16%, transparent);
}
/* Fresh-skin shim, same trick as .dark: the html.fresh selector cannot
match a section, so the fresh palette (kept in sync with
src/app/styles/fresh.css, which the palette script reads directly) is
re-declared here, together with the :root aliases that otherwise arrive
frozen to the light values. Fresh is a light skin, so the line/meter/
shadow mixes mirror the light ones against the fresh ink. */
.pv-theme.fresh {
--color-paper: oklch(96.8% 0.008 235);
--color-paper-strong: oklch(98.6% 0.004 235);
--color-ink: oklch(27% 0.022 255);
--color-night: oklch(20% 0.01 250);
--color-night-ink: oklch(93% 0.008 235);
--color-accent: oklch(48% 0.11 285);
--color-accent-ink: oklch(99% 0.004 285);
--color-accent-soft: oklch(92% 0.03 285);
--color-teal: oklch(48% 0.05 180);
--color-teal-soft: oklch(94% 0.015 180);
--color-signal: oklch(70% 0.11 280);
--color-signal-ink: oklch(26% 0.06 280);
--color-muted: oklch(94.5% 0.006 235);
--color-muted-text: oklch(44% 0.02 250);
--color-sheet-wash: oklch(93.5% 0.01 235);
--color-sheet-surface: oklch(98.2% 0.005 235);
--color-sheet-ink: oklch(42% 0.025 250);
--color-danger: oklch(50% 0.14 25);
--color-topic-self: oklch(50% 0.09 280);
--color-topic-emotion: oklch(49% 0.08 300);
--color-topic-relationship: oklch(49% 0.06 230);
--color-topic-life: oklch(48% 0.05 170);
--surface-contrast: oklch(26% 0.015 250);
--surface-contrast-ink: oklch(93% 0.008 235);
--background: var(--color-paper);
--foreground: var(--color-ink);
--paper: var(--color-paper);
--paper-strong: var(--color-paper-strong);
--ink: var(--color-ink);
--night: var(--color-night);
--accent: var(--color-accent);
--muted: var(--color-muted);
--muted-foreground: var(--color-muted-text);
--muted-text: var(--color-muted-text);
--sheet-wash: var(--color-sheet-wash);
--sheet-surface: var(--color-sheet-surface);
--sheet-ink: var(--color-sheet-ink);
--blue-wash: var(--color-blue-wash);
--danger: var(--color-danger);
--accent-wash: color-mix(in oklab, var(--accent) 11%, var(--paper));
--teal: var(--color-teal);
--teal-soft: var(--color-teal-soft);
--signal: var(--color-signal);
--signal-ink: var(--color-signal-ink);
--sky: var(--color-sky);
--topic-self: var(--color-topic-self);
--topic-emotion: var(--color-topic-emotion);
--topic-relationship: var(--color-topic-relationship);
--topic-life: var(--color-topic-life);
--line: color-mix(in oklab, var(--ink) 18%, transparent);
--soft-line: color-mix(in oklab, var(--ink) 11%, transparent);
--sheet-line: color-mix(in oklab, var(--sheet-ink) 22%, transparent);
--border: var(--soft-line);
--ring: var(--accent);
--meter-track: color-mix(in oklab, var(--ink) 7%, transparent);
--meter-rule: color-mix(in oklab, var(--ink) 20%, transparent);
--meter-fill: var(--accent);
--meter-needle: var(--signal);
--shadow-card-hover: 0 1.25rem 2.5rem color-mix(in oklab, var(--color-ink) 14%, transparent);
--shadow-feedback: 0 0.875rem 2rem color-mix(in oklab, var(--color-ink) 17%, transparent);
--shadow-dialog: 0 1.5rem 4rem color-mix(in oklab, var(--color-night) 26%, transparent);
--shadow-soft: 0 1.25rem 2.75rem color-mix(in oklab, var(--color-ink) 11%, transparent);
--shadow-lift: 0 1.75rem 3.5rem color-mix(in oklab, var(--color-ink) 16%, transparent);
}
</style>
</head>
<body>
<!-- ───────────────────────── page header (light context) ───────────────────────── -->
<div class="pv-wrap">
<p class="pv-kicker">DESIGN PREVIEW · 回归靶</p>
<h1 class="pv-page-title">认识你自己 · 设计系统目录</h1>
<p class="pv-note">本页直连 tokens.css(结构层)与 src/app/styles/*.css(base 色板、fresh 色板与 press-* 组件语法),下方依次渲染亮色、暗色与 fresh 三套主题。换肤(含 html.fresh)、CSS 蒸馏、token 改动后,用 Edge headless 对本页截图对比(全新 user-data-dir,防缓存假渲染)。字体为系统近似,以色值/形状/节奏对比为准。</p>
</div>
<!-- ───────────────────────── LIGHT theme ───────────────────────── -->
<section class="pv-theme" style="background: var(--color-paper); color: var(--color-ink)">
<div class="pv-wrap">
<p class="pv-kicker">THEME · LIGHT :root</p>
<div id="pv-catalog-body">
<div class="pv-group">
<h3>核心色 Core</h3>
<div class="pv-grid">
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-paper" style="background: var(--color-paper)"></div><div class="pv-swatch-label"><span>paper 纸</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-paper-strong" style="background: var(--color-paper-strong)"></div><div class="pv-swatch-label"><span>paper-strong 纸·厚</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-ink" style="background: var(--color-ink)"></div><div class="pv-swatch-label"><span>ink 墨</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-night" style="background: var(--color-night)"></div><div class="pv-swatch-label"><span>night 夜</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-night-ink" style="background: var(--color-night-ink)"></div><div class="pv-swatch-label"><span>night-ink 夜墨</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-muted-text" style="background: var(--color-muted-text)"></div><div class="pv-swatch-label"><span>muted-text 灰墨</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-muted" style="background: var(--color-muted)"></div><div class="pv-swatch-label"><span>muted 灰面</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-accent" style="background: var(--color-accent)"></div><div class="pv-swatch-label"><span>accent 陶土</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-accent-ink" style="background: var(--color-accent-ink)"></div><div class="pv-swatch-label"><span>accent-ink 陶土上墨</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-accent-soft" style="background: var(--color-accent-soft)"></div><div class="pv-swatch-label"><span>accent-soft 陶土洗</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-teal" style="background: var(--color-teal)"></div><div class="pv-swatch-label"><span>teal 鼠尾草</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-teal-soft" style="background: var(--color-teal-soft)"></div><div class="pv-swatch-label"><span>teal-soft 鼠尾草洗</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-signal" style="background: var(--color-signal)"></div><div class="pv-swatch-label"><span>signal 蜜金</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-signal-ink" style="background: var(--color-signal-ink)"></div><div class="pv-swatch-label"><span>signal-ink 蜜金上墨</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-danger" style="background: var(--color-danger)"></div><div class="pv-swatch-label"><span>danger 危险</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-sheet-wash" style="background: var(--color-sheet-wash)"></div><div class="pv-swatch-label"><span>sheet-wash 稿纸洗</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-sheet-surface" style="background: var(--color-sheet-surface)"></div><div class="pv-swatch-label"><span>sheet-surface 稿纸面</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-sheet-ink" style="background: var(--color-sheet-ink)"></div><div class="pv-swatch-label"><span>sheet-ink 稿纸墨</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--surface-contrast" style="background: var(--surface-contrast)"></div><div class="pv-swatch-label"><span>surface-contrast 反差面</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--surface-contrast-ink" style="background: var(--surface-contrast-ink)"></div><div class="pv-swatch-label"><span>surface-contrast-ink</span><code></code></div></div>
</div>
</div>
<div class="pv-group">
<h3>四个切面 Four topics</h3>
<div class="pv-grid">
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-topic-self" style="background: var(--color-topic-self)"></div><div class="pv-swatch-label"><span>topic-self 自我 · 陶土</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-topic-emotion" style="background: var(--color-topic-emotion)"></div><div class="pv-swatch-label"><span>topic-emotion 情绪 · 炭火</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-topic-relationship" style="background: var(--color-topic-relationship)"></div><div class="pv-swatch-label"><span>topic-relationship 关系 · 蜜土</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--color-topic-life" style="background: var(--color-topic-life)"></div><div class="pv-swatch-label"><span>topic-life 生活 · 鼠尾草</span><code></code></div></div>
</div>
</div>
<div class="pv-group">
<h3>线与刻度 Lines & meter</h3>
<div class="pv-grid">
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--line" style="background: var(--line)"></div><div class="pv-swatch-label"><span>line 界线</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--soft-line" style="background: var(--soft-line)"></div><div class="pv-swatch-label"><span>soft-line 细线</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--meter-track" style="background: var(--meter-track)"></div><div class="pv-swatch-label"><span>meter-track 刻度槽</span><code></code></div></div>
<div class="pv-swatch"><div class="pv-swatch-color" data-token="--meter-fill" style="background: var(--meter-fill)"></div><div class="pv-swatch-label"><span>meter-fill 刻度针</span><code></code></div></div>
</div>
<div class="pv-meter" style="margin-top: 1rem">
<div class="pv-meter-fill"></div>
<div class="pv-meter-needle"></div>
</div>
<p class="pv-body"><span class="pv-mono">62 / 100</span> — 蜜金指针永远表示"你在这里"。</p>
</div>
<div class="pv-group">
<h3>字阶 Typography</h3>
<div class="pv-stack">
<div>
<p class="pv-label">DISPLAY · ARCHIVO 640</p>
<p class="pv-h1">把你的问题递给对的测评</p>
</div>
<div>
<p class="pv-label">SECTION · ARCHIVO 620</p>
<p class="pv-h2">先从性格和倾向开始,看清自己更常使用的反应方式。</p>
</div>
<div>
<p class="pv-label">QUESTION VOICE · 幼圆 500</p>
<p class="pv-round">最近总在问:我到底是什么样的人?</p>
</div>
<div>
<p class="pv-label">BODY · SYSTEM 400</p>
<p class="pv-body">正文样例:测评为读者服务,社区围绕答案生长。段落的度量在 65–75 字符之间,行高保持安静。</p>
</div>
<div>
<p class="pv-label">DATA · PLEX MONO</p>
<p class="pv-mono">score 62 · count 16 · date 2026-09-26 · Q07</p>
</div>
</div>
</div>
<div class="pv-group">
<h3>组件语法 Component grammar</h3>
<div class="pv-stack">
<div class="pv-row">
<a class="press-primary-action">做个测评</a>
<a class="press-secondary-action">看看社区</a>
<div class="press-home-catalog-cta" style="margin-top: 0"><a>全部 16 个测评都在这里 📚</a></div>
</div>
<div>
<p class="pv-label">FACET HEAD · 贴纸徽章(奇偶反向倾斜)</p>
<div class="press-home-facet">
<header class="press-home-facet-head">
<span class="press-home-facet-index" aria-hidden="true">🪞</span>
<div>
<h2>自我认知</h2>
<p>先从性格和倾向开始,看清自己更常使用的反应方式。</p>
</div>
</header>
</div>
<div class="press-home-facet">
<header class="press-home-facet-head">
<span class="press-home-facet-index" aria-hidden="true">⛅</span>
<div>
<h2>情绪与能量</h2>
<p>看见情绪如何流动,也看见你恢复能量的方式。</p>
</div>
</header>
</div>
<p class="press-home-facet-entry">我明明已经很累了,却还在撑着。<span>看看你如何理解、容纳和表达情绪。</span></p>
</div>
<div>
<p class="pv-label">INLINE PILLS · 关系切面</p>
<div class="press-home-facet--inline">
<div class="press-home-facet-inline-row">
<a class="press-home-facet-inline-pill" href="#"><span class="press-home-facet-link-title">依恋风格</span><span class="press-home-facet-link-meta">24 题</span></a>
<a class="press-home-facet-inline-pill" href="#"><span class="press-home-facet-link-title">沟通方式</span><span class="press-home-facet-link-meta">20 题</span></a>
<a class="press-home-facet-inline-pill" href="#"><span class="press-home-facet-link-title">边界感</span><span class="press-home-facet-link-meta">18 题</span></a>
</div>
</div>
</div>
<div>
<p class="pv-label">LINK ROWS · 目录行</p>
<ul class="press-home-facet-links">
<li><a href="#"><span class="press-home-facet-link-title">MBTI 十六型人格</span><span class="press-home-facet-link-meta">93 题 · 15 分钟</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a></li>
<li><a href="#"><span class="press-home-facet-link-title">大五人格</span><span class="press-home-facet-link-meta">50 题 · 12 分钟</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a></li>
</ul>
</div>
<div>
<p class="pv-label">CARD + WASHI TAPE · 锚点卡</p>
<div class="press-home-facet-anchor">
<div class="press-feed-section pv-card-scope">
<article class="community-post">
<h3 style="margin: 0 0 0.4rem; font-family: var(--font-display); font-size: var(--text-md); font-weight: 620; color: var(--ink)">一段被共鸣的分享</h3>
<p class="pv-body" style="margin: 0">"原来不是只有我在深夜里怀疑自己适不适合现在的生活。"</p>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ───────────────────────── DARK theme (catalog cloned from light) ───────────────────────── -->
<section class="pv-theme dark" style="background: var(--color-paper); color: var(--color-ink)">
<div class="pv-wrap" id="pv-catalog-dark">
<p class="pv-kicker">THEME · DARK .dark</p>
</div>
</section>
<!-- ───────────────────────── FRESH theme (catalog cloned from light) ───────────────────────── -->
<section class="pv-theme fresh" style="background: var(--color-paper); color: var(--color-ink)">
<div class="pv-wrap" id="pv-catalog-fresh">
<p class="pv-kicker">THEME · FRESH html.fresh</p>
</div>
</section>
<script>
// The dark and fresh catalogs are exact clones of the light catalog so all
// three themes always show the same set of tokens and components.
const light = document.getElementById("pv-catalog-body");
const darkHost = document.getElementById("pv-catalog-dark");
darkHost.insertAdjacentHTML("beforeend", light.innerHTML);
document.getElementById("pv-catalog-fresh").insertAdjacentHTML("beforeend", light.innerHTML);
// Resolve each swatch's live token value inside its theme context.
for (const el of document.querySelectorAll("[data-token]")) {
const value = getComputedStyle(el).getPropertyValue(el.dataset.token).trim();
const code = el.closest(".pv-swatch")?.querySelector("code");
if (code && value) code.textContent = value;
}
</script>
</body>
</html>