Diez 开源项目教程

最新推荐文章于 2025-04-06 09:12:56 发布

娄祺杏Zebediah

最新推荐文章于 2025-04-06 09:12:56 发布

阅读量490

点赞数 19

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00344/article/details/147019885

Diez 开源项目教程

diez The Design Token Framework — Adopt a unified design language across platforms, codebases, and teams 项目地址: https://gitcode.com/gh_mirrors/di/diez

1. 项目介绍

Diez 是一个开源的开发者工具包，用于构建和维护设计令牌（design tokens）的规模化应用。设计令牌是一组定义设计系统属性（如颜色、字体大小、间距等）的数据。Diez 支持将 styles 统一定义在一份文档中，然后编译并在 Swift、Objective-C、Kotlin、Java、TypeScript、JavaScript/JSON、CSS 或 SCSS 等多种编程语言和样式表中使用。

Diez 通过其编译器、框架、提取器和文档生成器等四个组成部分，帮助开发者减少在不同应用和网站中实现一致性视觉身份的成本。

2. 项目快速启动

首先，确保您的系统中已经安装了 Node.js 和 Yarn。然后，按照以下步骤创建并启动一个 Diez 项目：

# 创建一个新的 Diez 项目
yarn create diez

# 进入项目目录
cd my-diez-project

# 安装项目依赖
yarn install

# 编译 TypeScript 代码到目标平台
yarn build

# 运行开发服务器
yarn start

在 my-diez-project 目录中，您将看到一个基本的 Diez 项目结构，您可以开始编辑并添加自己的设计令牌。

3. 应用案例和最佳实践

基本示例

以下是一个基本的设计令牌定义示例：

// tokens.ts
const tokens = {
  // 主要类型和单色资产使用此颜色。
  foregroundColor: Color.hex('#AE0000'),
  // 应谨慎使用此颜色，因为它非常强烈。
  foregroundAccent: Color.hex('#FF0000'),
  //这是我们默认的背景或“画布”颜色。
  backgroundColor: Color.hex('#231020'),
};

编译后，您可以在 iOS 和 Android 的原生包中访问这些令牌，例如：

tokens.foregroundColor;

同时，Diez 也会生成 SCSS 变量，您可以在样式表中这样使用：

#some-element {
  background-color: $tokens-background-color;
}

语义化令牌示例

Diez 强力支持语义化令牌模式，即分离设计令牌的值和其语义用途。以下是一个例子：

// colors.ts
import { Color } from '@diez/prefabs';

export const rawColors = {
  tiger: Color.rgba(241, 93, 74, 1),
  marigold: Color.rgba(255, 172, 57, 1),
  clover: Color.rgba(163, 206, 50, 1),
  cyan: Color.rgba(4, 182, 203, 1),
};

export const semanticColors = {
  foreground: rawColors.tiger,
  foreground50: rawColors.tiger.lighten(0.5),
  background: rawColors.clover,
  background50: rawColors.clover.lighten(0.5),
};

嵌套与复用示例

以下示例展示了如何通过多个 prefab（如 Typograph、Color 和基本类型 number）自然组合来表示复杂的数据层次结构：

// typography.ts
import { Typograph } from '@diez/prefabs';
import { sizes } from './sizes';
import { semanticColors } from './colors';

export const typography = {
  heading1: new Typograph({
    color: semanticColors.foreground,
    font: fonts.PoppinsExtraBold.Regular,
    fontSize: sizes.xxl,
  }),
  heading2: new Typograph({
    color: semanticColors.foreground50,
    font: fonts.PoppinsExtraBold.Regular,
    fontSize: sizes.xl,
  }),
  body: new Typograph({
    color: semanticColors.foreground,
    font: shibuiFonts.Poppins.Regular,
    fontSize: sizes.sm,
  }),
};