@bcc-code/deign-tokens (英语)

BCC设计系统的设计标志. 为 CSS 、 Tailwind v4 和 PrimeVue 提供颜色、打字、间隔和组件主题,并有光/暗模式支持.

安装

npm install @bcc-code/design-tokens

文档

关于使用说明、组成部分准则和实例,见文件全文:

开发者.bcc.no/bcc设计

快速链接

• 开始 - 安装和设置
• 基金会 - 指针、颜色、印刷、间隔
• 构成部分 - PrimeVue 组件样式

添加组件键

当设计者通过 Figma 添加或更新 PrimeVue 组件符号时:

1. 从图像导出 - 组成部分标志土地 tokens/aura/component.json
2. 添加主题覆盖( 建议) - 对于轻/暗区分,在两者中增加部分 tokens/aura/component/light.json 财务报告和审定财务报表 tokens/aura/component/dark.json。没有这些内容,该部分将在两个主题中使用相同的符号.
3. 运行构建 —— 说 pnpm build
4. 检查警告 ——该构件会警告组件缺少主题覆盖

组件符号自动取自 component.json ——无手动清单保存.

对于特定BCC的布局/大小覆盖(不是来自Figma),将其添加到 MANUAL_COMPONENT_OVERRIDES 内 export-tokens/constants.js。 。 。 .

仓库结构

生成的文件夹

• tokens/ 由 Figma 符号导出( 设计中的真理来源).
• build/ 是通过运行构建脚本生成的(pnpm build 编号 : node export-tokens/build.js) (中文(简体) ).
• 不要手动编辑文件 build/;转而再生.

export-tokens/

• export-tokens/build.js
  主建管弦乐. 运行验证,构建符号输出,合并主题文件,生成类型,并生成PrimeVue Cfig.

  • 能编辑吗 ? 对,用于改变构建流程或增加新产出.

• export-tokens/constants.js
  路径的中央配置,令牌组列表,Tailwind映射/用途,已知的例外,以及手动组件的覆盖.

  • 能编辑吗 ? 对。这是在添加令牌组、映射或BCC手册覆盖时需要更新的主要文件.

• export-tokens/sd-formats.js
  注册自定义样式词典会转换/格式(JS有 refs, CSS变量, Tailwind 公用事业).

  • 能编辑吗 ? 对,如果需要更改输出格式行为.

• export-tokens/primevue-config.js
  生成 build/primevue/config.js 从已建的符号 + Aura 预设(@primeuix/themes/aura)并应用了超逻辑/验证.

  • 能编辑吗 ? 对,用于 PrimeVue 映射/分辨率逻辑变化.

• export-tokens/validation.js
  验证光/暗符号对称性,并警告缺少组件主题覆盖.

  • 能编辑吗 ? 对,当调整验证规则.

• export-tokens/bcc-build.js
  合并创建 tokens.css 财务报告和审定财务报表 tailwind.css 产生的光/暗产出.

  • 能编辑吗 ? 对如果合并产出战略需要改变.

• export-tokens/type-gen.js
  生成 .d.ts cSS文件的模块声明.

  • 能编辑吗 ? 对,用于修改已公布的类别声明.

许可证

麻省理工学院