Token CSS 项目使用教程

1. 项目的目录结构及介绍

Token CSS 项目的目录结构如下：

tokencss/
├── .changeset/
├── .github/
│   └── workflows/
├── .vscode/
├── demo/
├── packages/
├── .gitignore
├── .npmrc
├── LICENSE
├── README.md
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

• .changeset/: 存储项目的变更记录。
• .github/workflows/: 存储GitHub Actions的工作流程文件，用于自动化项目的构建、测试等流程。
• .vscode/: 存储Visual Studio Code的配置文件。
• demo/: 存储示例代码和演示文件。
• packages/: 存储项目的主要代码和模块。
• .gitignore: 指定Git忽略的文件和目录。
• .npmrc: npm的配置文件。
• LICENSE: 项目的许可证文件。
• README.md: 项目的说明文件。
• package.json: 定义了项目的元数据，依赖关系和脚本等。
• pnpm-lock.yaml: pnpm的锁定文件，确保依赖的一致性。
• pnpm-workspace.yaml: pnpm的工作空间配置文件。

2. 项目的启动文件介绍

项目的启动主要通过package.json中的脚本实现。以下是package.json中的部分内容：

"scripts": {
  "astro": "astro",
  "astro add": "astro add",
  "start": "astro start",
  "build": "astro build",
  "preview": "astro preview"
}

• astro: 运行Astro相关命令。
• astro add: 添加Astro的插件或依赖。
• start: 启动本地开发服务器。
• build: 构建项目，用于生产环境。
• preview: 预览构建结果。

要启动项目，你可以在项目根目录下运行以下命令：

npm start

或者如果你使用的是yarn：

yarn start

3. 项目的配置文件介绍

项目的配置主要通过token.config.json文件进行。该文件定义了各种设计令牌（tokens），例如颜色、空间、大小、半径、阴影、字体、字体大小、字体权重、行高和字母间距等。

以下是一个token.config.json的简化示例：

{
  "$schema": "https://tokencss.com/schema@0.0.1",
  "extends": ["@tokencss/core/preset"],
  "color": {
    "gray": {
      "0": {"value": "#f8f9fa"},
      "1": {"value": "#f1f3f5"},
      // 更多颜色定义...
    }
  },
  // 更多令牌定义...
}

在这个文件中，你可以定义自己的设计令牌或者扩展预定义的令牌集合。这些令牌可以在CSS中使用，以保持样式的一致性和可维护性。