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

由Brian Boehlke & Alejandro Larumbe 编著

问题3 2022

状态 : 进行中

目录:

1. 背景情况
2. 开始
3. 键
4. 数值
5. 全局标签样式
6. 类
7. 模块

背景情况

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

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

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

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

开始

安装国家预防机制软件包

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

• 安装最新版本 : npm install @chainlink/design-system

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

导入设计系统

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

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

或者说

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

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

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

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

举个例子数字 :

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

--blue-600: #375bd2;

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

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

类 通过将多个声明合并到可以被应用到 HTML 标记的 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之前:

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

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

键

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

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

举个例子数字 :

<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>

代币按其拟议用途划分:

• 背景情况 (颜色)
• 边框 (颜色,宽度,弧度,盒形)
• 填充 (SVG图标所用的颜色)
• 阴影 (颜色和盒子-阴影)
• 类型 (颜色)

背景情况

颜色

边框

颜色

内边框作为框阴影

半径

宽度

填充

颜色

阴影

颜色符号

以分层框形式出现的阴影

类型

数值

设计系统的基础值. 这些往往是像素,雷姆,六分位数等硬编码值. 这些值可以使用 var( ) 函数 :

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

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

数值按其用途划分:

• 空间
• 颜色
• 字体

类

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

使用量

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

<div className="container">

此外,一组班级是 applied automatically to certain HTML tags 当导入设计系统时。 (见 实例 上文)

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

• 布局 : 主要

• 类型 : (单位:千美元), (中文(简体) ), 页:1, (中文(简体) ), h3 (韩语), (中文(简体) ), h4 (中文(简体) ), (中文(简体) ), h5 (韩语), (中文(简体) ), 小时6, (中文(简体) ), 页:1, (中文(简体) ), 间距, (中文(简体) ), 按钮, (中文(简体) ), 投入, (中文(简体) ), 选择, (中文(简体) ), 区域, (中文(简体) ), 标签

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

以 QQS 表示使用的类 :

版式

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

• 集装箱

• 纸牌 示例数字 :

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

类型

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

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

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

列出所有打字类 :

模块

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

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

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

或者说

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

模块组件为 模块.cs 文档。 你可以读这个 指南 如果您的应用程序不支持模块.cs文件退出框.

按钮

导入

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

备选案文

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

结构

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

三进制按钮接受 svg 图像 :

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

使用量

<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>

英雄们

导入

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

使用量

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

结构

<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>

使用量

<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>

桌面 :

移动 :

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

<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>

标题横幅

导入

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

结构

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

用法实例

<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>