@brignano/design

中文文档
0.5.0发布于 2026/10/31MIT零依赖构建来源已验证

布里尼亚诺表面共享设计系统-颜色,类型,空间,形状,运动。

中文使用文档
文档目录6 节
  1. 它的形状
  2. 使用它
  3. 预览
  4. 为代理
  5. 状态
  6. 释放

@brignano /设计

共享设计系统的每一个布里尼亚诺表面 brignano.io, life, homelab, driftwood,以及接下来发生的一切。

文件它是什么?
DESIGN.md从这里开始。 规则是,三层颜色,两层,类型,动作。
DECISIONS.md为什么这些值是这样的。药物不良反应。
tokens.css颜色,类型,空间,形状,运动的单一真理来源。
tokens.chart.css经过验证的数据分类调色板。
product-page.css产品营销页面的结构:标题、论文主角、编号故事、结束语。设计。md§13;骷髅 previews/product-page.html.
previews/活样本。在浏览器中打开一个以查看令牌的呈现。

它的形状

三层,所以没有一种颜色有两种作用:

  • --mark ——身份。落叶松琥珀。在轨迹和字母组合上墨水。从来没有控制过。
  • --i-* ——给养。钴。链接,按钮,焦点,选择。语义上的惰性。
  • --success / --attention / --danger ——国家。传统的色调,总是有一个图标和一个单词。

独特性存在于标记中;常规存在于控制层。

使用它

npm install @brignano/design
@import '@brignano/design/tokens.css';
@import '@brignano/design/tokens.chart.css'; /* only if the surface has charts */

光和暗跟随操作系统,直到有东西设置 data-theme="light" 或者 "dark" ——在 <html> 对于整个页面,或任何元素的主题 (设计部分。md§11)。每种颜色都是单一的 light-dark() 声明,这是 需要从2024年中期或以后的浏览器。

工具层是默认的。一个营销表面选择与 class="tier-marketing" 在 <html>,这将解锁显示面并打开 类型的规模。各层的颜色是相同的。

预览

previews/ 每个区域保存一个页面——颜色、字体、标高、控件、反馈、图表、 的地位。每个渲染它的主题两次,一次在观众的主题,一次在一个 被迫黑暗的地面,所以两者之间的漂移显示没有切换任何东西。 没有构建步骤:打开文件。

每个预览都以卡片标记打开:

<!-- @dsCard group="Foundations" -->

第一行是什么 claude.ai /设计 设计系统项目读到 建立其卡片索引- group 成为设计系统中的节标题 窗格。这些标记是注释,所以当页面打开时,它们不需要花费任何费用 本地。

与此类项目的同步将保持此布局 - - - - - - tokens.css 在项目中 根, previews/ 比它低一层。 _preview.css 用 @import '../tokens.css' 与其携带自己的副本,不如因为一秒 令牌的副本是此回购存在的目的。交易是这样的 父引用是承重的:将上传的bundle和每一个都扁平化 预览呈现无样式。

为代理

读 DESIGN.md 在造型之前。使用代币。 永远不要硬编码一个十六进制 外 tokens.css -文字在主题改变后会默默存在,这就是为什么 life几个月来,他的状态药丸在暗模式下呈浅灰色。

状态

0.x,而且是故意这样做的。 brignano.io 消耗; life, homelab 和 driftwood 还没有。令牌 的名字 可当那些土地还在移动的时候,还有一个 0.x Range很清楚地说明了这一点——加一个插入符号 0.x 把未成年人钉住,所以 ^0.1.1 不会 默默拿着破名的方式 ^1.1.0 会。 1.0.0 被切断的时候 名字是不会变的,不是约会的时候。

版本跟踪 令牌而不是管道。只更改的版本 打包或文档是一个补丁;次要项为第一个版本保留,其中 有些东西看起来确实不一样。

释放

标签是触发器。 .github/workflows/publish.yml 发布到NPM上 v* 标签,检查后与标签一致 package.json - NPM版本是 不可变的,所以不匹配在永久之前被捕获。

npm version minor   # bumps package.json, commits, tags
git push --follow-tags

发布是由CI完成的,而不是在笔记本电脑上。这里没有任何npm令牌 不应该有一个——运行者交换它的OIDC身份 通过NPM获取短暂的凭证 信任的出版,这也是 产生来源证明。笔记本电脑没有这样的身份。

这个工作流叫做 publish.yml 在每个发布包的repo中, 这并不是装点门面。 npm的可信发布者表单采用这个工作流 文件名作为OIDC索赔的一部分,并提供 publish.yml 作为它的例子。任何 其他名称是一个值,你必须记住正确的,从GitHub方面,而 在NPM端填写表格。弄错了就失败了 ENEEDAUTH ——npm 拒绝交换, npm publish 回归到象征性的真实,没有 令牌——既不命名工作流,也不命名不匹配项。匹配工具 违约比每次都做对要便宜。

设置一个新包:create .github/workflows/publish.yml 从这个, 然后添加可信的出版商npmjs.com -出版商GitHub行动,组织 和repo,工作流文件名 publish.yml, 环境名称,因为 这些工作流声明no environment:. 在第一个标记之前配置它,或者 第一次发布就像这次一样失败了。

版本与发布记录

@brignano/design 共发布 8 个版本,首次发布于 2026/08/24;过去 12 个月发布了 8 个版本。最新版本附带 npm provenance 构建来源证明,可追溯到公开的 CI 构建记录。

版本发布日期距今
0.5.0latest2026/10/312 天前
0.4.02026/10/313 天前
0.3.12026/10/268 天前
0.3.02026/10/268 天前
0.2.02026/10/1321 天前
0.1.22026/08/242 个月前

关于 @brignano/design 的常见问题

@brignano/design 是什么?

布里尼亚诺表面共享设计系统-颜色,类型,空间,形状,运动。

如何安装 @brignano/design?

在项目目录运行 npm install @brignano/design,或使用 pnpm add / yarn add / bun add。

@brignano/design 支持 TypeScript 吗?

该包的 package.json 没有声明类型入口。需要类型提示时,可以在 npm 上查找社区维护的 @types/brignano__design 是否存在。

@brignano/design 可以商用吗?

@brignano/design 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。

@brignano/design 还在维护吗?

最新版本 0.5.0 发布于 2026/10/31(2 天前);至今共发布 8 个版本,其中过去 12 个月发布了 8 个;首次发布于 2026/08/24。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。