DESIGN.md · PORTABLE MATERIALS
同一条色带先在空气中出现，再穿过玻璃，最后被实体完全遮住。材料、控件与主题都由公共文件提供，下面每段标记可以直接带走。
每个样本都使用 `.hi-*` 公共类；代码默认折叠，复制结果依赖同目录的 TOKENS.css、COMPONENTS.css 与 COMPONENTS.js。
`.hi-page` 可以覆盖完整页面，也可以只包住一个局部 section。主题变量从当前作用域继承，局部红 off 也不会影响外层。
这个 section 有自己的背景与文字色。
<section class="hi-page" data-theme="red-black" data-red="off">
<h2 class="hi-headline-md">局部主题</h2>
<p class="hi-body-sm">内容</p>
</section>承载阅读，不用玻璃。内容面上的按钮保持文字按钮。
正文躺在稳定的内容面上，宽度保持在 38em 以内，层级靠排版和间距建立。
<div class="hi-surface">
<h2 class="hi-headline-md">连续阅读</h2>
<p class="hi-body">正文……</p>
<button class="hi-button" type="button">文字操作</button>
</div>厚度取 token，颜色使用当前主题的 outline。
<hr class="hi-divider">左侧一根发丝线，与发丝线同厚同色；字号跟随组合的排版类，和 `.hi-headline-md` 组合就是大号引文。不画引号饰件、不加底色、不用红与金。
材料与运动照 Apple 的规则做，个性只放在颜色与字体两处。
屏幕是一个小箱庭的玻璃天花板。
<blockquote class="hi-quote hi-body">一段引文。</blockquote>
<blockquote class="hi-quote hi-headline-md">大号引文。</blockquote>正文链接用主文字色加一根发丝下划线，可点靠下划线表达，不靠颜色，悬停时下划线转为主文字色。独立的导航项与操作仍用文字按钮。行内代码只换等宽字体。
素材库的接入方法写在 LIBRARY.md 里；数值只从 DESIGN.md 的 front matter 来，改完跑一次 node tools/tokens.js。
<p class="hi-body">接入方法见 <a class="hi-link" href="LIBRARY.md">LIBRARY.md</a>，改完跑 <code class="hi-code">node tools/tokens.js</code>。</p>控制层默认材料。背后环境的色彩进入玻璃，同时用局部暗背景标记保持白字可读。
保留位置与明度响应。
<div class="hi-glass-regular" data-hi-backdrop="dark">
常规玻璃内容
</div>只放在媒体之上；`data-hi-backdrop="dark|light"` 是显式局部调光提示，不会自动采样任意像素。
亮媒体之上加局部暗调光。
<div class="hi-glass-clear" data-hi-backdrop="light">
媒体之上的通透内容
</div>白主题使用常规玻璃；Red-Black 整块红染色，红 off 后回到无色玻璃。栏内按钮和分段选择共享栏的材料。
<div class="hi-toolbar">
<span>阅读控制</span>
<div class="hi-segmented" role="group" aria-label="阅读模式">
<button class="hi-segmented__item" type="button" aria-pressed="true">章节</button>
<button class="hi-segmented__item" type="button" aria-pressed="false">页面</button>
</div>
<button class="hi-button" type="button">更多</button>
</div>内容面上是文字按钮；控制层上可以使用玻璃按钮。prominent 是集中的红染色主要操作。
另起一行的文字按钮与这段正文左缘对齐。
<button class="hi-button" type="button">文字按钮</button>
<!-- 在内容里另起一行：文字与正文左缘对齐 -->
<button class="hi-button hi-button--flush" type="button">文字按钮</button>
<button class="hi-button hi-button--glass" type="button">玻璃按钮</button>
<button class="hi-button hi-button--prominent" type="button">主要操作</button>一个玻璃承载面，选中块是组内移动的实体片。方向键、Home、End 与 Enter 都可操作。
<div class="hi-segmented" role="group" aria-label="显示密度">
<button class="hi-segmented__item" type="button" aria-pressed="true">舒展</button>
<button class="hi-segmented__item" type="button" aria-pressed="false">紧凑</button>
</div>使用原生 checkbox 与 label；红色只是开启的强调，手柄位置提供形状线索。
<label class="hi-switch-control">
自动保存
<input class="hi-switch" type="checkbox" aria-label="自动保存">
</label>原生 range 保持连续输入；静止手柄为实体，拖动时临时提高材料对比。
<label for="reading-level">阅读亮度</label>
<input class="hi-range" id="reading-level" type="range" min="0" max="100" value="52">实体面配持续可见标签；focus-visible 轮廓保持输入位置清楚。
<label class="hi-field">
<span class="hi-field__label">称呼</span>
<input class="hi-input" type="text" placeholder="输入称呼">
</label>弹出层始终使用常规玻璃厚度；从触发处展开，Escape、外点关闭并把焦点归还触发控件。
<div class="hi-popover-anchor">
<button class="hi-button hi-button--glass" type="button" data-hi-popover-trigger aria-haspopup="menu" aria-expanded="false" aria-controls="reading-menu">打开菜单</button>
<div class="hi-popover" id="reading-menu" role="menu" hidden>
<button class="hi-popover__item" type="button" role="menuitem">复制链接</button>
</div>
</div>一屏一根短金线或一个接点；它承担精细饰件，不包围整张卡片。
一根线与一个接点。
<span class="hi-highlight" aria-hidden="true"></span>
<span class="hi-highlight hi-highlight--dot" aria-hidden="true"></span>栏上的当前项是一颗滤色片，颜色默认取主题红，页面可以用 `--hi-current-color` 换成这一刻的颜色重心。`data-hi-current="fill"` 是全部无色时的薄填充。换 `aria-current` 时滤色片滑过去。
<nav class="hi-toolbar" data-hi-current="lens" aria-label="主导航">
<button class="hi-button" type="button" aria-current="page">浏览</button>
<button class="hi-button" type="button">资料库</button>
</nav>
<!-- 颜色或栏的形状变了之后：HomuraInterface.refreshCurrent(nav) -->台面上的凹槽，深度 `--d` 按级。凹槽里的物件是平的，同一个投影；封面图写在物件的 `--hi-cover` 上。多碟与套装加 `.hi-object--stack`，封面后面错开露出两层薄边。
<div class="hi-recess" style="--d: 2">
<div class="hi-recess__body">
<button class="hi-object" type="button" aria-label="专辑名" style="--hi-cover: url(cover.jpg)">
<span class="hi-object__face"></span>
</button>
<!-- 多碟与套装：class="hi-object hi-object--stack" -->
</div>
<i class="hi-recess__rim" aria-hidden="true"></i>
</div>组合片段只使用公共类，适合直接放进真实页面。
<div class="hi-toolbar">
<span>章节导航</span>
<div class="hi-segmented" role="group" aria-label="章节导航">
<button class="hi-segmented__item" type="button" aria-pressed="true">目录</button>
<button class="hi-segmented__item" type="button" aria-pressed="false">批注</button>
</div>
<button class="hi-button" type="button">完成</button>
</div>内容面保持稳定，阅读正文与它的文字操作保持清楚的归属关系。没有额外浮起的玻璃卡片。
<article class="hi-surface hi-reading">
<h2 class="hi-headline-md">在承载面上阅读</h2>
<p class="hi-body">正文……</p>
<button class="hi-button" type="button">标记为已读</button>
</article><section class="hi-surface hi-settings">
<label class="hi-field">
<span class="hi-field__label">阅读者</span>
<input class="hi-input" type="text" placeholder="你的名字">
</label>
<label class="hi-switch-control">自动保存 <input class="hi-switch" type="checkbox" checked></label>
<label class="hi-field">
<span class="hi-field__label">字号</span>
<input class="hi-range" type="range" min="12" max="24" value="16">
</label>
</section>