Custom Theme

Aurora Glass UI Kit

这是一套彻底重做的基础组件体系。核心目标是更干净的视觉层级、 更稳定的交互语义,以及可以快速扩展的主题能力。

Foundation Tokens

  • Toneneutral / brand / danger / inverse
  • Variantsolid / soft / ghost / outline
  • Sizesm / md / lg

Quick Actions

Core Primitives

基础组件覆盖布局、操作、状态反馈三个层面。每个例子都给出最小可复用写法。

Buttons & Intent

通过 `tone` 和 `variant` 表达语义,不再依赖零散颜色类名。

<Button tone="brand">Publish</Button>
<Button tone="neutral" variant="soft">Save Draft</Button>
<Button tone="danger" variant="outline">Delete</Button>
<Button tone="inverse">Preview</Button>

Card Composition

卡片负责信息分组,Chip 负责状态标签,组合后即可快速形成内容面板。

Article Status

DraftReviewBlockedPublished
<Card tone="neutral">
  <CardBody>
    <Chip value="Review" tone="brand" />
  </CardBody>
</Card>

Actions, Tooltip, Loading

图标按钮用于高频操作,Tooltip 提供上下文,Spinner 负责异步反馈。

<Tooltip content="GitHub">
  <IconButton tone="neutral" aria-label="github">
    <Github className="size-5" />
  </IconButton>
</Tooltip>

Alert Feedback

<Alert open tone="danger">
  Save failed. Please check your network and retry.
</Alert>