# @brignano/design 中文文档

规范地址：https://npmcn.com/package/%40brignano/design/

版本：0\.5\.0
npm 元数据更新时间：2026-10-31T15:50:25.691Z
中文译文更新时间：2026-10-31T17:33:06.335Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40brignano/design
原文对照：https://npmcn.com/package/%40brignano/design/?lang=original
项目主页：https://github.com/brignano/design#readme
源码仓库：https://github.com/brignano/design

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：83.2 kB，9 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2026-08-24T04:14:14.037Z
- 最新版本发布：2026-10-31T15:50:25.360Z
- 已发布版本数：8（近 12 个月 8 个）

## 中文简介

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

## 安装

```sh
npm install @brignano/design
```

也可以使用：`pnpm add @brignano/design`、`yarn add @brignano/design`、`bun add @brignano/design`

## README

# @brignano /设计

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

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

## 它的形状

三层，所以没有一种颜色有两种作用：

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

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

## 使用它

```sh
npm install @brignano/design
```

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

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

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

第一行是什么 [claude.ai /设计](https://claude.ai/design) 设计系统项目读到 建立其卡片索引- `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版本是 不可变的，所以不匹配在永久之前被捕获。

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

发布是由CI完成的，而不是在笔记本电脑上。这里没有任何npm令牌 不应该有一个——运行者交换它的OIDC身份 通过NPM获取短暂的凭证 [信任的出版](https://docs.npmjs.com/trusted-publishers/)，这也是 产生来源证明。笔记本电脑没有这样的身份。

**这个工作流叫做 `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 是什么？

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

### 如何安装 @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 和提交记录判断。