核心契约 · §2
Token
下面每一块都直接引用 var(--名字)，所以换主题时这里会整体变色——这是检查主题调色板最快的地方。
基础色（必填 26）
灰阶
色相阶梯
状态色与遮罩
尺度：间距 / 字号
--space-1..5 = 4 / 8 / 16 / 24 / 32px
--font-sm 13px · 正文小字与表单辅助文字
--font-md 16px · 默认正文
--font-lg 20px · 强调段落
--font-xl 28px · 区块标题
--motion-fast = 100ms，--size-unit = 2px，--radius-sm/md = 0
核心契约 · §3 排版
排版
AUI 没有任何 UA 默认样式，h1 和 div 本身长得一样——下面全部是主题给的样式。
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
正文段落。行内元素：链接、加粗、小字、行内代码、次要文字 .text-muted。
.font-display 用标题字族
.font-sm
.font-lg
.text-left
.text-center
.text-right
.text-success .text-warning .text-danger .text-info
代码块
.t01-ore-theme .button {
min-height: 42px;
border: 3px solid var(--edge);
background: var(--green);
}代码块用原生 <pre><code>；主题可自行决定要不要额外美化它。
核心契约 · §5 布局件
布局
.container / .container-fluid
.container 居中限宽（本页所有分区都在它里面，所以你看到的左右留白就是它）。
.grid 十二列
窄窗口下 .col-3 ~ .col-9 按主题断点塌成整行。
.stack / .cluster / .split
核心契约 · §3 导航
导航
.navbar / .navbar-brand / .navbar-nav
活动项由页面自己维护 .active；导航的文字色与底色由主题决定（亮底主题走 --ink-dark，暗底主题走 --ink）。
.breadcrumb
分隔符由 CSS 生成，标记里只写同级子元素（原来要求必须是 li）。
核心契约 · §3 按钮
按钮
语义变体
尺寸与宽度
.icon-button
.form-button / .page-button
这两个与 .button 共用基底（表单里的提交键、分页键），见「表单」与「数据」分区。
核心契约 · §3 表面
卡片与面板
.card
card-body。子块都是可选的：只写 <div class="card"> 也应该有边框和表面色。
顶部色条
.panel
panel 与 card 同构，留哪个用哪个，随便换。
核心契约 · §3 表单
表单
注意 t00 这个示例主题的焦点框是用 box-shadow 画的（引擎也支持 outline）——点一下输入框，看看这个主题有没有做。
.form-group 基础结构
form-help：辅助说明文字
select 有专用实现：弹出层 + 完整键盘操作
校验态只换边框，错误文案自己写。
.input-group
.choice-list / .choice
.choice 里放原生 input + 文本即可，accent-color 由主题给。
表单提交键
核心契约 · §3 选择控件
选择控件
这一整页全部是纯 CSS 绘制的（引擎没有 attr()，也没有图片资源），而且每个控件都只需要 一个元素。
.switch
状态钩子任选其一即可：.on / [checked] / [aria-checked="true"] / [data-state="on"] / :checked（真 input 时）。
.checkbox / .radio
勾/点都是伪元素画的，不需要图片；用 .on / aria-checked 表示选中。
.slider / .slider-2
一个 --value 同时驱动填充宽度与滑块位置。.slider-plain 是不填充的形态（只有滑块），.slider-value 是右上角的数值胶囊，.slider-scale 是两端标签。
刻度是可选元素（.slider-segment）。
禁用态，以及 .slider-2 分段轨道变体。
核心契约 · §3 数据展示
数据展示
.table-wrap / .table
| 名称 | 类型 | 状态 |
|---|---|---|
| t01-ore | reference | 稳定 |
| t03-claude-square | square | 稳定 |
| t04-claude-round | round | 稳定 |
| t05-curseforge | dark / square | 稳定 |
| t06-modrinth-light | light / rounded | 稳定 |
| t07-modrinth-dark | dark / rounded | 稳定 |
| t08-arwes | cyan / sci-fi | 稳定 |
| t09-arwes-transparent | overlay | 稳定 |
| t12-retro-vintage | retro / vintage | 稳定 |
| t13-vaporwave | neon / vaporwave | 稳定 |
| t14-impressionist-oil | painterly / light | 稳定 |
| t15-mecha | industrial / dark | 稳定 |
这是 三列表格——单元格等分每行，所以列数由标记决定，不需要再覆写 grid-template-columns。（引擎没有表格布局，display: table 也降级，所以行内用 flex。）
.list-group
- 第一项3
- 选中项（.active）ok
- 第三项—
分隔线画在相邻项之间，所以最后一项的边框不再依赖 :last-child——列表里夹别的元素也不会出现多余半条线。
.badge / .tag
.inventory-grid / .slot
纯视觉方格（九列 44px）。真实槽位要用容器系统的 <slot>。
.pagination / .page-button
核心契约 · §3 反馈
反馈
.alert
只有左侧色条，没有图标也没有关闭按钮。
.banner
.progress / .progress-2
填充是伪元素，宽度来自 --value；最后一条是不定态。
.toast（框内演示）
生产环境里 .toast-area 固定在底部居中（column-reverse 堆叠）；这里用内联 position: absolute 关进小框才看得见。色变体：-success / -warning / -danger / -info / -vip / -debug。
.loading-mask / .spinner
遮罩自带转圈（伪元素），所以它可以空着——这是最小标记形态。
独立 .spinner（可与遮罩一起用，也可以放在别处）。
.loading-error-text
核心契约 · §3 结构组件
结构组件
这几个是引擎里"必须有独立元素"的部分：遮罩必须是真元素（宿主背景画在负 z-index 子层之下，伪元素做不成遮罩），气泡里必须是真文本（引擎没有 attr()）。下面把 fixed 定位的组件用内联 position: absolute 关进小框里看。
.dropdown
展开态钩子：.open / [data-state="open"] / :focus-within / details[open]。注意引擎没有 details 的原生展开行为，那条只是样式钩子，属性得自己设。
.tooltip（悬浮查看四个方向）
鼠标悬浮或键盘聚焦按钮时显示对应气泡，移开并失去焦点后隐藏。也可通过 [data-state="open"] 手动展开。
.modal
modal-body。宽度、描边、投影都由主题给。
点遮罩空白处会命中 .modal-dismiss（它是标签，用来做"点外面关闭"）。
.drawer
drawer-body
正文区可滚动。
.sidebar
核心契约 · §5 工具类
工具类
.hidden / .invisible
左边一个 .hidden 元素：你看不到我（display: none，不占位）
一个 .invisible 元素：占位但不可见← 前面留了它的位置
.w-full
间距工具
档位：1 / 2 / 3 / 4 = 4 / 8 / 16 / 24px，与 --space-* 对应。
设置行
MC 选项页的基本形状。最小标记都很小：设置行是「一个容器 + 控件」，菜单和互斥按钮组各自只需要一组同名子元素。
.settings-row / .settings-list
最小标记：容器 + 控件，文字直接写在容器里
.settings-list 里相邻行合并描边，像一列选项
.menu / .menu-item
分隔线 .menu-separator，分组标题 .menu-label；快捷键放 .menu-shortcut 靠 margin-left: auto 贴右；禁用态吃 --disabled-* 且压过 hover。
.segmented（.toggle-group 同款）
选中态：.active / [aria-pressed="true"] / [aria-selected="true"]；禁用行吃 --disabled-background / --disabled-foreground。
折叠面板
.accordion
内容区。收起状态用 display: none；交互自己写——点 header 切 .open 或 [data-state="open"]。
看不见我。
同样收起。
.kv 键值列表
最小标记：.kv-row 里两个子元素（键 + 值），值靠 margin-left: auto 贴右，行间有分隔线。放进卡片、tooltip、抽屉都合适。
.hotbar
9 格快捷栏 = .hotbar + 现成的 .slot。选中格加 .active（白色外环——这个主题用 box-shadow 画），堆叠数量放 .slot-count。
.empty-state
空列表 / 空搜索结果的占位。
.skeleton
扫光用 transform 动画（引擎对 transform 有专用插值，其它属性会跳变），所以不用 background-position。
.code-block
引擎里没有 UA 默认样式，
所以 h1 和 div 视觉上完全一样。共享类 .code-block（pre 或 div 都能用），内部的 code 会退掉行内皮肤。
带标签分隔线
.divider-label
文字直接写在元素里，两侧的线由 ::before / ::after 撑开，不需要额外元素。
.stepper
三个子元素：.stepper-button / .stepper-value / .stepper-button；禁用吃 --disabled-* 且压过 hover。
.tree
缩进用 .tree-group（左内边距 16px），展开加 .open；叶子项不需要 .tree-toggle。收起的分组是 display: none，所以任意层级都不需要 JS 就能画出来。
.stat
.button-group
连体按钮：后继按钮去掉左边框（引擎把负 margin 钳成 0，压边的写法在这里不可行）。
.tabs-vertical
inset 4px 0 --purple），与横向 tab 的顶部指示条对应。可删除标签
尺寸档
尺寸档只改宽度，其余皮肤照旧。默认 520，.modal-lg 760；抽屉对应 .drawer-sm 260 / .drawer-lg 480。
工具条与分裂按钮
.toolbar
一排图标按钮 + .toolbar-separator 分隔，.toolbar-spacer 把后面的按钮推到最右。
.split-button
主按钮 + 右侧窄下拉段；接缝靠去掉主按钮的右边框，不用负边距（引擎会把负 margin 钳成 0）。
步骤条与可关闭标签
.steps / .step
连接线由 .step + .step::before 生成，不依赖 :first-child；状态用 .done / .active。
.tab-close
进度标签 / 加载条 / 稀有度
.progress-label
文字居中压在条上，pointer-events: none，所以点得到底下的条。
.loading-bar
不定态细条，用在面板或页面顶部；扫光同样走 transform 动画。
稀有度颜色
token --rarity-common/-uncommon/-rare/-epic + .text-* 工具类（MC 物品名配色）。