@ bysages/ 核心
By Sages Elements的视觉核心:设计系统唯一的风格层,主题引擎和照明引擎——框架-可知性,被每个包装包所消耗.
特征
- 🎨 唯一的视觉层 ——每个组件的样式表都住在这里,本地CSS范围由
[data-scope][data-part],所以一个样式表服务 React, Vue, Solid, 和斯维尔特 - 🌗 主题引擎 —— 说
applyTheme()驱动轻/暗,重音色素 (清华 / celadon / zhusha),对比级,密度级,和场景预设,均以文档根上的数据表示 - 💡 照明引擎 高地、颜料出血和指向光线,计算成CSS变量(
setLight, (中文(简体) ),attachDynamicLight; 组件样式只消耗光 (qq- 光为阴影) - 🖋️ 墨水波纹 ——新闻反馈通过,从指针出出出出出色素,从根入出并可调取每个元素
- 🧩 样式注入 —— 说
injectComponentStyle()进口时每个家族的样式表 由头标值守护 所以SSR构建内线样式 绝不重复输入 - 🗂 图标登记册 —— 说
@bysages/core/icons解析包装从中取出的一些格言@bysages/icons并揭露他们通过getIcon(); 白名单以外的任何东西都是直接命名的导入
安装
# pnpm
pnpm add @bysages/core @bysages/tokens
# npm
npm install @bysages/core @bysages/tokens
# yarn
yarn add @bysages/core @bysages/tokens
# bun
bun add @bysages/core @bysages/tokens
快速启动
装入已编译的令牌,主题文档,组件样式随包件一起到达:
import "@bysages/tokens/css";
import { applyTheme, attachDynamicLight } from "@bysages/core";
applyTheme({ mode: "system", accent: "ink", density: "default" });
attachDynamicLight();
建筑
@bysages/tokens DTCG source → CSS custom properties
↓
@bysages/core theme engine · lighting engine · per-component styles
↓
wrappers Vue · React · Solid · Svelte — thin adapters over headless machines
核心没有相互作用;它只能使光亮。 包装器带无头状态机器, 核心服饰.