Box盒子

最基础的容器：一个可以换标签的元素，带表面色阶、圆角、内描边、顶部高光和内边距这几个和设计令牌直接对应的属性。其余样式照常用 className / style。

示例

不用阴影分层：越靠上的层越亮。白色系的块描浅边，浮起来的描深边，大块容器加顶部高光。

well

surface

card

raised

Box

highlight

里面装的是另一个圆角容器时，内边距 = 外圆角 − 内圆角。

内层卡片

窄屏内边距 12，md 起 24，lg 起左右 40。

属性	类型	默认值	说明
`as`	`ElementType`	`'div'`	渲染成哪个元素。
`surface`	`'bg' \| 'surface' \| 'card' \| 'raised' \| 'well'`	—	表面色阶：bg 画布 → surface 面板 → card 卡片 → raised 浮起；well 为凹槽。同时把文字色设为 --ok-text。
`radius`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 'full'`	—	圆角档位，对应 --ok-r-1..6；full 为全圆。
`border`	`boolean \| 'strong'`	`false`	1px 内描边：true 用 --ok-line，strong 用 --ok-line-2。
`highlight`	`boolean`	`false`	顶部 1.5px 高光，只给大块容器。
`padding`	`Responsive<Space>`	—	四边内边距（间距档位）。
`paddingX`	`Responsive<Space>`	—	左右内边距，优先于 padding。
`paddingY`	`Responsive<Space>`	—	上下内边距，优先于 padding。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。

Space 是间距档位：0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16，对应 --ok-s-*（档位 × 4px）。需要现成的卡片、面板时优先用 Card、Surface，它们的圆角和内边距已经配好。