简介

Elements 是 By Sages 的 UI 组件库，为 React、Vue、Solid、Svelte 提供同一套 140 余个组件族——按钮、对话框、数据表格、AI 对话界面等。四个框架背后是同一套设计系统：温纸底色、墨色优先的操作、方的控件与圆的器物。

#特性

• 交互与外观分离。 状态、键盘、ARIA、定位交给成熟的无头状态机；所有视觉决策集中在唯一的样式层。换一套外观，不用动任何行为。
• 属性即主题。 明暗、主题颜料、十三种场景、四档密度、对比度档位，全部是根元素上的属性：data-theme、data-accent、data-scene、data-density、data-contrast。不分叉组件，没有单独的暗色样式表。
• 一套解剖，四个框架。 每个组件在各框架渲染出相同的部件，带有稳定的 data-scope / data-part 属性；一份样式服务四个框架，测试和工具按属性选中部件，不依赖类名。
• 值来自令牌。 颜色、间距、圆角、投影、动效全部解析自 --bs-* CSS 变量。改一个变量，就是改一个决策。
• 全龄可用的默认值。 三档控件高度（28 / 32 / 36 px）、四档密度、高对比档位，以及面向政务和大龄用户的场景。

#先看一眼

<script setup lang="ts">
import { Button } from "@bysages/vue";
</script>

<template>
  <Button variant="solid" tone="ink">发布</Button>
</template>

到安装看你的框架怎么接入，到主题看 applyTheme 的全部能力。

#包