Solid 设计系统开源项目教程

1. 项目介绍

Solid 设计系统是一个由 Union Investment 开发的开源设计系统，旨在帮助开发者构建一致性和高质量的用户界面。它包含了一系列可复用的组件、工具和最佳实践，以支持快速开发和设计协同。

2. 项目快速启动

环境准备

在开始之前，请确保你已经安装了 Node.js 和 pnpm 包管理器。如果没有安装，可以按照以下步骤进行安装：

# 安装 Node.js
# 请访问 Node.js 官方网站下载并安装最新版本的 Node.js

# 安装 pnpm
npm install -g pnpm

克隆项目

使用以下命令克隆项目到本地：

git clone https://github.com/solid-design-system/solid.git
cd solid

安装依赖

在项目根目录下，运行以下命令安装依赖：

pnpm i

启动开发服务器

安装依赖后，进入 packages/docs 目录，并启动开发服务器：

cd packages/docs
pnpm dev

现在，你应该能在浏览器中访问 http://localhost:3000 来查看 Solid 设计系统的文档和组件。

3. 应用案例和最佳实践

组件使用

Solid 设计系统提供了多种组件，例如按钮、输入框、选择器等。以下是如何在一个项目中使用 Solid 组件的基本示例：

<!-- 引入 Solid CSS -->
<link href="path/to/solid.css" rel="stylesheet">

<!-- 使用 Solid 组件 -->
<button class="solid-button">点击我</button>
<input type="text" class="solid-input">

设计 Tokens 使用

设计 Tokens 是一系列定义了设计系统元素（如颜色、字体、间距等）的变量。以下是如何在项目中使用 Solid 设计 Tokens 的示例：

:root {
  --solid-color-primary: #0055ff;
  --solid-font-size: 16px;
}

.solid-button {
  background-color: var(--solid-color-primary);
  font-size: var(--solid-font-size);
}

主题定制

Solid 设计系统允许你通过主题包来自定义颜色和样式。以下是如何创建自定义主题的示例：

// 引入 Solid Theming
import { createTheme } from '@solid-design-system/theming';

// 创建自定义主题
const customTheme = createTheme({
  colors: {
    primary: '#0055ff',
    secondary: '#ff5500',
  }
});

// 应用自定义主题
document.body.style.setProperty('--solid-theme-colors', customTheme.colors);

4. 典型生态项目

Solid 设计系统的生态系统包括多个相关的包和项目，以下是一些典型的生态项目：

• Solid Components: 包含了 Solid 设计系统的所有组件。
• Solid Tokens: 包含了 Solid 设计系统的所有设计 Tokens。
• Solid Theming: 提供了颜色计算服务，用于定制 Solid 设计系统的主题。
• Solid Docs: 提供了 Solid 设计系统的文档，帮助开发者了解和使用设计系统。

通过这些生态项目，开发者可以更加灵活地使用 Solid 设计系统，创建一致性和高质量的用户界面。