项目

色调与绘制

在教学中

布局由示例提供：此处为斜线 padding 方框与三个条目之间的 gap。

使用于 布局系统指南.

用法与接口

DemoItem 会渲染 div.ui-item，这是最小尺寸为 3rem、内容居中的浮起图块。tone（neutral、blue、violet、amber、green、red）映射到 data-tone；variant（soft、solid、outline、ghost）映射到 data-variant。图块上的 utilities 决定尺寸与布局。

<Demo>  <div className="flex gap-sm">    <DemoItem>Context</DemoItem>    <DemoItem tone="blue">Subject</DemoItem>  </div></Demo>

<div class="ui-item">Context</div><div class="ui-item" data-tone="blue">Subject</div><div class="ui-item" data-tone="violet" data-variant="outline">Compare</div>

背景语境使用 neutral，主体使用 blue，比较对象使用 violet；每种色调都应通过图例或标签说明。图块是不可交互的 div，操作应使用原生按钮或链接。