@ bysages/ tokens

由"圣贤元素"的设计标志—— 技术合作组 源用样式词典编译为 CSS 自定义属性和类型Script 类型。 系统中唯一允许的视觉值来源.

特征

• 🎨 两级 ——组件实际消耗的原始活字(原始调色板,类型坡道,间隔)和语义符号(地表梯子,墨水,边框,高地,运动)
• 🌗 主题维度作为数据 ——轻/暗模式,矿坑口音(清华/celadon/zhusha),固定语义颜色(bamboo/ochre/cinnabar/超海洋),4个密度级,对比级,场景预设
• 💡 发光意识高地 ——从 --bs-light-x 编号 : --bs-light-reach 部件,从不复制,所以光源也是变量
• 📦 三项产出 - 编译的样式表(@bysages/tokens/css,符号树作为数据(.语义层作为JS(./styles(中文(简体) )
• 🔤 有声音的打字法 ——"歌词"标题,"hei-sans"UI染色体,CJK标签跟踪——为"中国×西方"注册的双轨堆

安装

# pnpm
pnpm add @bysages/tokens

# npm
npm install @bysages/tokens

# yarn
yarn add @bysages/tokens

# bun
bun add @bysages/tokens

快速启动

将编译的样式表一次导入到 app root 上 – 每个符号块作为 CSS 自定义属性 :root数字 :

import "@bysages/tokens/css";

然后在任何地方消费标志物——这是合同中的每个组件样式如下:

.card {
  background: var(--bs-color-surface-2);
  border: 1px solid var(--bs-color-border);
  border-radius: var(--bs-radius-lg);
  box-shadow: var(--bs-elevation-1);
  padding: var(--bs-space-4);
}

重建

符号在构建时编译( I)node scripts/build.mjs(三); pnpm dev 在软件包根表和再编译中。 单列的消费者读取汇编 dist,所以在这里重建 之前,他们的改变 取出新的符号.

许可证

• 麻省理工学院 © 圣贤们