# @chainlink/design-system 中文文档

规范地址：https://npmcn.com/package/%40chainlink/design-system/

版本：0\.2\.8
npm 元数据更新时间：2025-01-30T17:23:33.001Z
中文译文更新时间：2026-11-09T17:28:41.632Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40chainlink/design-system
原文对照：https://npmcn.com/package/%40chainlink/design-system/?lang=original

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

- 包体积（解压后）：65.9 kB，37 个文件
- TypeScript 类型：未声明
- 运行依赖：4 个
- 首次发布：2022-06-15T08:36:49.164Z
- 最新版本发布：2024-08-23T11:44:39.962Z
- 近 30 天下载量：2117（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：57（近 12 个月 0 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @chainlink/design-system
```

也可以使用：`pnpm add @chainlink/design-system`、`yarn add @chainlink/design-system`、`bun add @chainlink/design-system`

## README

# 链路实验室设计系统指南.

由Brian Boehlke & Alejandro Larumbe 编著

问题3 2022

**状态 :** 进行中

  

# 目录:

1.  [背景情况](https://npmcn.com/package/%40chainlink/design-system/#readme-background)
2.  [开始](https://npmcn.com/package/%40chainlink/design-system/#readme-getting-started)
3.  [键](https://npmcn.com/package/%40chainlink/design-system/#readme-tokens)
4.  [数值](https://npmcn.com/package/%40chainlink/design-system/#readme-values)
5.  [全局标签样式](https://npmcn.com/package/%40chainlink/design-system/#readme-global-tags)
6.  [类](https://npmcn.com/package/%40chainlink/design-system/#readme-classes)
7.  [模块](https://npmcn.com/package/%40chainlink/design-system/#readme-modules)

  

# 背景情况

截至Q3 2022年,"前端"团队发布公开版"设计系统"作为国家防范机制套件.

此文档是产品设计组和FE团队外部产品中导入包并使用设计系统文件的指南.

## 链路实验室设计系统是什么?

一个样式和组件库作为可再用代码发布,使采用团队在执行中更加高效和一致. 为了让系统为最多的用户工作,样式和类都用CSS文件来写.

  

# 开始

## 安装国家预防机制软件包

设计系统的国家预防机制软件包使任何有兴趣使用这些软件的团队都能使用基本的链路实验室产品设计风格.

-   安装最新版本 : `npm install @chainlink/design-system`
    
-   安装特定版本 : `npm install @chainlink/design-system@[version_number]`
    

## 导入设计系统

要启动, 将设计系统导入您的应用程序的顶层组件 :

```js
require(@chainlink/design-system/global-styles.css)
```

或者说

```js
import '@chainlink/design-system/global-styles.css'
```

在您的应用程序中导入设计系统将应用到 HTML 标记的外框样式,并访问 CSS 变量、 符号和基于类的组件.

  

# 目前可用链路设计系统(CLDS)

图书馆分为不同的组: `Values`, (中文(简体) ), `Tokens`, (中文(简体) ), `Global Tags`, (中文(简体) ), `Classes`,以及 `Modules`每一组都具有不同程度的复杂性.

_举个例子_数字 :

_数值_ 是设计系统中的最低水平变量。 大多数指向硬编码值,如像素,雷姆,百分比,或六分位数等.

```css
--blue-600: #375bd2;
```

_键_ 指定指向单个值的已命名变量.

```css
--color-text-link: var(--blue-600);
```

_类_ 通过将多个声明合并到可以被应用到 HTML 标记的 CSS 类,更复杂.

```css
:where(.heading-600, h1) {
  font-size: 2rem;
  margin-bottom: var(--space-4x);
  letter-spacing: -0.04rem;
}

:where(.paragraph, .paragraph-100, .paragraph-200, .paragraph-300, body, p) {
  font-family: var(--font-family-text);
  line-height: 1.5;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
}
```

导入QQS 自动应用类到某些 _HTML 标记_。 。 。 .

例如,在导入QQS之前:

```jsx
<h1>Chainlink Data Feeds</h1>
<p>Explore the decentralized oracle networks powered by Chainlink</p>
```

![alt text](https://smartcontract.imgix.net/examples/design-system-docs/image8.png?auto=compress%2Cformat)

当设计系统被导入时, 成为了 chainlink 样式 :

![alt text](https://smartcontract.imgix.net/examples/design-system-docs/image1.png?auto=compress%2Cformat)

  

## 键

我们前端apps中使用的语义命名变量和样式 - 例如 _数据_, (中文(简体) ), _福塞兹_,以及 _自动化_\- 协助简化执行工作并减少今后的维修.

CLDS以CSS变量的形式提供符号.

_举个例子_数字 :

```jsx
<div
  style={{
    margin: 'var(--space-4x)',
    backgroundColor: 'var(--color-background-secondary)',
  }}
>
  <h1>Chainlink Data Feeds</h1>
  <p>Explore the decentralized oracle networks powered by Chainlink</p>
</div>
```

![alt text](https://smartcontract.imgix.net/examples/design-system-docs/image4.png?auto=compress%2Cformat)

  

代币按其拟议用途划分:

-   [背景情况](https://npmcn.com/package/%40chainlink/design-system/tokens/background.css) (颜色)
-   [边框](https://npmcn.com/package/%40chainlink/design-system/tokens/border.css) (颜色,宽度,弧度,盒形)
-   [填充](https://npmcn.com/package/%40chainlink/design-system/tokens/fill.css) (SVG图标所用的颜色)
-   [阴影](https://npmcn.com/package/%40chainlink/design-system/tokens/shadow.css) (颜色和盒子-阴影)
-   [类型](https://npmcn.com/package/%40chainlink/design-system/tokens/typography.css) (颜色)

  

### 背景情况

**颜色**

| 名称 | 预定用途 |
| --- | --- |
| \-- 彩色背景小学 | 机构背景 |
| \-- 彩色背景中学 | 节背景 |
| \-- 颜色背景反射 | 提醒错误背景 |
| \-- 彩色背景相间 | 横幅背景 |
| \-- 颜色背景警告 | 警告背景 |
| \-- 颜色背景- 成功 | 提醒成功背景 |
| \-- 颜色背景信息 | 提醒突出显示背景 |
| \-- 颜色背景残疾 | 禁用按钮背景( C) |

  

### 边框

**颜色**

| 名称 | 预定用途 |
| --- | --- |
| \-- 颜色- 主要边框 | 纸牌, 平铺 |
| \-- 颜色- 边框- 中学 | 下放, 菜单, 在组合边框和阴影时使用 -- sshadow-mid |
| \-- 颜色- 边界相接 | 屏蔽边框 |
| \-- 颜色- 边界互动 | 输入控制边框休眠状态( C) |
| \-- 颜色- 边框- 交互式焦点 | UI 聚焦边框 |
| \-- 颜色- 边界- 交互式- 交叉 | 输入控制边框徘徊状态( C) |
| \--color- 边框- 交互式受压 | 输入控制边框按下状态( C) |
| \--color-border-interactive-error - 颜色-边界交互-错误 | 交互式卡按下状态 |
| \--color- 边界残疾 | 禁用按钮控制边框( C) |
| \--color- 边界分隔符 | 水平规则 |

**内边框作为框阴影**

| 名称 | 预定用途 |
| --- | --- |
| \-- 主要边界 | 纸牌, 平铺 |
| \- 边境中学 | 下放, 菜单, 在组合边框和阴影时使用 -- sshadow-mid |
| \-- 边界互动 | 输入控制边框休眠状态( C) |

**半径**

| 名称 | 预定用途 |
| --- | --- |
| \- 主要边界辐射 | 输入, 按钮 |
| \- 边境无线电中学 | 纸牌 |
| \-- 边界 -- -- 雷达重置 | 边界重设 |
| \- 边界光圈 | 圆形图标按钮 |

**宽度**

| 名称 | 预定用途 |
| --- | --- |
| \-- 接线- 接线- 主要 | 投入 |
| \-- -- 边界-宽-中学 | 按钮 |
| \-- 边界- 宽- 重置 | 边界重设 |

  

### 填充

**颜色**

| 名称 | 预定用途 |
| --- | --- |
| \-- 彩色填充成功 | 成功图标填充和提醒 |
| \-- 彩色填充过量 | 错误图标填充和提醒 |
| \-- 彩色填充警告 | 警告图标填充和提醒 |
| \-- 颜色填充- info | 信息图标填充和提醒 |

  

### 阴影

**颜色符号**

| 名称 | 预定用途 |
| --- | --- |
| 阴影- 颜色主 | 小学和中学的阴影 |
| \-- 阴影- 颜色- 二级 | 灰色背景的阴影 |
| \-- 阴影- 颜色相接 | 暗影/相片背景的阴影 |

**以分层框形式出现的阴影**

| 名称 | 预定用途 |
| --- | --- |
| \-- 阴影- 低 | 平铺、 工具提示 |
| \-- 阴影中 | 土司、菜单、侧面板 |
| \-- 阴影高 | 模式 |
| \- 影子低中学 | 不同背景颜色的阴影选项 |
| 影子中学 |  |
| \- 影子中学 |  |

  

### **类型**

| 名称 | 预定用途 |
| --- | --- |
| \-- 颜色文本主 | 文本正文 |
| \-- 彩色文本- 二级 | 关于次要背景的文本 |
| \-- 彩色文本标题 | 标题文本 |
| \-- 颜色文本错误 | 错误状态文本 |
| \-- 颜色文本警告 | 警告文本 |
| \-- --color-text- 成功 | 成功文本 |
| \--color-text-info 颜色文本 | 提醒文本 |
| \-- --color-text-contrast 相册 | 封条文本 |
| \-- 颜色文本链接 | 链接文本 |
| \-- 彩色文本链接- hover | 链接文本徘徊 |
| \--color-text-link-活性 | 按下链接文本 |
| \--color-text-已损坏 | 禁用文本 |
| \-- 颜色文本占位符 | 窗体占位符文本 |
| \-- 颜色文本值 | 格式值文本 |
| \-- 颜色文本标签 | 格式标签文本 |

  

## 数值

设计系统的基础值. 这些往往是像素,雷姆,六分位数等硬编码值. 这些值可以使用 [var( )](https://developer.mozilla.org/en-US/docs/Web/CSS/var) 函数 :

```css
.example {
  padding: var(--space-2x);
  background-color: var(--orange-200);
}
```

`PRO TIP` - 旨在将符号作为第一个选项,如果符号不存在,则返回到低等值.

  

数值按其用途划分:

-   [空间](https://npmcn.com/package/%40chainlink/design-system/values/space.css)
-   [颜色](https://npmcn.com/package/%40chainlink/design-system/values/colors.css)
-   [字体](https://npmcn.com/package/%40chainlink/design-system/values/font.css)

  

## 类

可被应用到 HTML 标签中的类来利用产品设计团队的风格. 这些类别在导入设计系统时也包括在内.

### 使用量

要使用,请在 HTML 标签中添加相关的类(不需要额外的导入) . _举个例子_数字 :

```jsx
<div className="container">
```

此外,一组班级是 `applied automatically to certain HTML tags` 当导入设计系统时。 (见 [实例](https://npmcn.com/package/%40chainlink/design-system/#readme-global-tag-example) 上文)

  

### **自动样式的标签列表**数字 :

-   **布局 :** _主要_
    
-   **类型 :** _(单位:千美元)_, (中文(简体) ), _页:1_, (中文(简体) ), _h3 (韩语)_, (中文(简体) ), _h4 (中文(简体) )_, (中文(简体) ), _h5 (韩语)_, (中文(简体) ), _小时6_, (中文(简体) ), _页:1_, (中文(简体) ), _间距_, (中文(简体) ), _按钮_, (中文(简体) ), _投入_, (中文(简体) ), _选择_, (中文(简体) ), _区域_, (中文(简体) ), _标签_
    

  

`PRO Tip` - 说吧 _类_ 如有需要,可采用另一种方式推翻 _类_ 或 CSS 样式到 HTML 标签.

  

以 QQS 表示使用的类 :

### [**版式**](https://npmcn.com/package/%40chainlink/design-system/components/layout.css)

顶级类以匹配链路链接产品(即自动化,VRF等)的页面布局.

-   **集装箱**
    
-   **纸牌** _示例_数字 :
    

```jsx
<div className="card">
  <h4>Chainlink Data Feeds</h4>
  <p>Explore the decentralized oracle networks powered by Chainlink</p>
</div>
```

![alt text](https://smartcontract.imgix.net/examples/design-system-docs/image7.png?auto=compress%2Cformat)

  

### [**类型**](https://npmcn.com/package/%40chainlink/design-system/components/typography.css)

与产品设计组的文字风格相匹配的 CSS 类 Figma.

-   通过导入 QQS, Typology 组件文件将为所有标题、 段落和跨度指定样式
-   要覆盖或应用类到其他 HTML 标记中, 请在标记中添加类
    -   这将提供标签:字体家庭、字体重量、颜色和行高
    -   如果需要更改字体重,请使用内线样式.

```jsx
<h2 className="heading-600" style={{ marginBottom: 'var(--space-12x)' }}>
  Example
</h2>
```

列出所有打字类 :

| 名称 | 预期用途 QQ | 自动应用到: |
| --- | --- | --- |
| 显示- 400 | 销售头和标题 |  |
| 显示- 500 |  |  |
| 显示- 600 |  |  |
| 标题-100 | 标题和标题 | 小时6 |
| 标题-200 |  | h5 (韩语) |
| 标题-300 |  | h4 (中文(简体) ) |
| 标题-400 |  | h3 (韩语) |
| 标题-500 |  | 页:1 |
| 标题-600 |  | (单位:千美元) |
| 第100段) | 多行文本块(2+行) |  |
| 页:1 |  | 车身,p |
| 段 次 页 次 |  |  |
| 文本- 100 | 单行案文(1行) |  |
| 文本 - 200 |  | 间距 |
| 文本 - 300 |  |  |
| 标签 | 表格标签、表头 |  |

  

## 模块

更复杂的组件依赖于标记分级,可能具有变体. 模块组件具有响应性.

为了使用,导入每个组件:

```js
const component = require('@chainlink/design-system/component.module.css')
```

或者说

```js
import component from '@chainlink/design-system/component.module.css'
```

模块组件为 [模块.cs](https://css-tricks.com/css-modules-part-1-need/) 文档。 你可以读这个 [指南](https://css-tricks.com/css-modules-part-2-getting-started/) 如果您的应用程序不支持模块.cs文件退出框.

  

### 按钮

**导入**

```js
import button from '@chainlink/design-system/button.module.css'
```

**备选案文**

-   小学
-   中学
-   高等教育
-   标签
-   重设

**结构**

```js
<button href="#" className={button.variant}>
  Button label
</button>
```

三进制按钮接受 svg 图像 :

```js
<button className={button.tertiary}>
  <svg />
  Button label
</button>
```

**使用量**

```js

<button href="#" className={button.primary}>
    Primary
</button>

<a href="#" className={button.secondary}>
    Secondary
</a>

<button className={button.tertiary}>
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M8 0C6.41775..." fill="currentColor" />
  </svg>
 Tertiary
</button>

<button className={button.tag}>Tag</button>

<li className={button.reset}>Reset</li>
```

  

![alt text](https://smartcontract.imgix.net/examples/design-system-docs/image2.png?auto=compress%2Cformat)

  

### **英雄们**

**导入**

```js
import hero from '@chainlink/design-system/hero.module.css'
```

**使用量**

把英雄放进去 组件母元素中的容器类.

**结构**

```jsx
<section className={hero.container}>
  <h1>
    Hero Title
    {/* Optional */}
    <button className={button.primary}>Actions button</button>
  </h1>
  {/* Optional */}
  <p>Description</p>
  {/* Optional. May be a button or a. */}
  <button className={button.primary}>Button 1</button>
  {/* Optional. May be a button or a. */}
  <a href="#" className={button.secondary}>
    Button 2
  </a>
</section>
```

**使用量**

```jsx
<section className={hero.container}>
  <h1>
    Chainlink Verifiable Randomness Function
    <button className={button.primary}>Actions</button>
  </h1>
  <p>
    Chainlink VRF provides cryptographically secure randomness for your smart
    contracts.
  </p>
  <button className={button.primary}>Create Subscription</button>
  <a
    href="https://docs.chain.link/docs/chainlink-vrf/"
    className={button.secondary}
  >
    Go to the docs
  </a>
</section>
```

桌面 :

![alt text](https://smartcontract.imgix.net/examples/design-system-docs/image5.png?auto=compress%2Cformat)

移动 :

![alt text](https://smartcontract.imgix.net/examples/design-system-docs/image6.png?auto=compress%2Cformat)

一个被剥去的"英雄"的版本可能是这样的:

```tsx
<section className={hero.container}>
  <h1>Chainlink Verifiable Randomness Function</h1>
  <p>
    Chainlink VRF provides cryptographically secure randomness for your smart
    contracts.
  </p>
  <a
    href="https://docs.chain.link/docs/chainlink-vrf/"
    className={button.secondary}
  >
    Go to the docs
  </a>
</section>
```

![alt text](https://smartcontract.imgix.net/examples/design-system-docs/image3.png?auto=compress%2Cformat)

  

### **标题横幅**

**导入**

```js
import headerbanner from '@chainlink/design-system/headerbanner.module.css'
```

**结构**

```jsx
<div className={headerbanner.container}>
  {/* Optional*/}
  <div className={headerbanner.count}>
    <span>NEW</span>
  </div>
  <p>
    Description
    {/* Optional*/}
    <a href="#">Link Text</a>
  </p>
</div>
```

**用法实例**

```jsx
<div className={headerbanner.container}>
  <div className={headerbanner.count}>
    <span>NEW</span>
  </div>
  <p>
    Join the global Web3 community at SmartCon 2022.{' '}
    <a href="https://smartcon.chain.link/?utm_medium=referral&utm_source=data-chain-link&utm_campaign=FY22Q3-smartcon-2022">
      Learn more
    </a>
  </p>
</div>
```

![alt text](https://smartcontract.imgix.net/examples/design-system-docs/image9.png?auto=compress%2Cformat)

## 常见问题

### 如何安装 @chainlink/design-system？

在项目目录运行 npm install @chainlink/design-system，或使用 pnpm add / yarn add / bun add。

### @chainlink/design-system 支持 TypeScript 吗？

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

### @chainlink/design-system 可以商用吗？

@chainlink/design-system 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @chainlink/design-system 的下载量有多少？

根据 npm 官方下载统计，@chainlink/design-system 在 2026/10/10 – 2026/11/08 这 30 天内被下载 2,117 次，日均约 71 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @chainlink/design-system 还在维护吗？

最新版本 0\.2\.8 发布于 2024/08/23（2 年前）；至今共发布 57 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/06/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。