Token CSS配置详解：创建自定义设计系统的完整指南

Token CSS配置详解：创建自定义设计系统的完整指南

【免费下载链接】tokencss项目地址: https://gitcode.com/gh_mirrors/to/tokencss

Token CSS是一款功能强大的工具，帮助开发者轻松创建和管理自定义设计系统。通过token.config.json配置文件，你可以定义颜色、间距、字体等设计标记，实现项目样式的统一管理和高效维护。本指南将详细介绍Token CSS的配置方法，让你快速掌握自定义设计系统的创建技巧。

快速开始：Token CSS的基础配置

要使用Token CSS，首先需要创建一个token.config.json配置文件。最简单的方式是继承官方预设，在此基础上进行自定义：

{ "extends": ["@tokencss/core/preset"] }

这个配置文件位于项目根目录下，通过extends属性引入官方预设，让你立即获得一套完整的设计标记系统。官方预设包含了丰富的设计标记，如颜色、间距、字体等，满足大多数项目的基本需求。

深入了解：官方预设的结构与内容

官方预设的token.config.json文件位于packages/core/preset/token.config.json，包含了多个设计标记类别，每个类别下又有详细的标记定义。让我们逐一了解这些核心类别：

颜色系统：打造统一的色彩方案

颜色是设计系统的核心元素之一，Token CSS的官方预设提供了全面的颜色定义：

"color": { "type": "color", "gray": { "0": { "value": "#f8f9fa" }, "1": { "value": "#f1f3f5" }, // ... 一直到 gray.9 }, "red": { /* 红色系列定义 */ }, "blue": { /* 蓝色系列定义 */ }, // ... 其他颜色系列 }

每个颜色系列从0到9定义了不同深度的颜色值，0为最浅，9为最深。这种命名方式让开发者可以直观地选择合适的颜色深度，确保整个项目的色彩一致性。

间距系统：构建有序的布局空间

间距系统是实现页面布局一致性的关键，Token CSS提供了灵活的间距定义：

"space": { "type": "dimension", "extensions": { "com.tokencss.scale": "space" }, "2xs": { "value": ".25rem" }, "xs": { "value": ".5rem" }, "sm": { "value": "1rem" }, // ... 一直到 10xl }

从2xs到10xl的间距定义，覆盖了从微小内边距到大型外边距的各种需求，使用rem单位确保在不同设备上的一致性。

排版系统：建立清晰的文字层级

排版系统决定了页面的可读性和信息层级，Token CSS预设包含了完整的排版定义：

"font-size": { "type": "dimension", "xs": { "value": "0.75rem" }, "sm": { "value": "0.875rem" }, "default": { "value": "1rem" }, // ... 一直到 9xl }, "font-weight": { "type": "number", "thin": { "value": 100 }, "normal": { "value": 400 }, "bold": { "value": 700 }, // ... 其他字重定义 }, "line-height": { "type": "number", "none": { "value": 1 }, "tight": { "value": 1.25 }, "normal": { "value": 1.5 }, // ... 其他行高定义 }

从字体大小、字重到行高，全面的排版定义帮助你建立清晰的文字层级结构，提升页面可读性。

其他核心设计标记

除了上述核心类别，官方预设还包含了许多其他重要的设计标记：

• radius：定义圆角半径，从none到full，满足不同元素的圆角需求
• shadow：提供多种阴影效果，从sm到2xl，以及none选项
• font：定义字体族，包括sans、serif和mono三大类
• easing：提供多种动画缓动函数，如sine、cubic、back等
• media：定义响应式断点，如sm、md、lg等

这些设计标记共同构成了一个完整的设计系统，为你的项目提供一致的视觉语言。

自定义配置：打造专属设计系统

虽然官方预设已经很全面，但每个项目都有其独特的设计需求。Token CSS允许你通过扩展和覆盖预设来创建专属的设计系统。

扩展预设：添加自定义标记

你可以在继承官方预设的基础上，添加自己的设计标记：

{ "extends": ["@tokencss/core/preset"], "color": { "brand": { "primary": { "value": "#4F46E5" }, "secondary": { "value": "#10B981" } } }, "space": { "custom": { "value": "2.5rem" } } }

这个配置在官方预设的基础上添加了品牌颜色和自定义间距，既保留了预设的优势，又满足了项目的特定需求。

覆盖预设：修改现有标记

如果需要修改预设中的标记值，只需在配置中重新定义即可：

{ "extends": ["@tokencss/core/preset"], "color": { "blue": { "5": { "value": "#3B82F6" } } }, "font-size": { "xl": { "value": "1.375rem" } } }

这种方式让你可以微调预设，使其更符合项目的设计语言，同时保留大部分预设值，减少重复工作。

实际应用：在项目中使用设计标记

配置好token.config.json后，你就可以在项目中使用这些设计标记了。Token CSS提供了多种集成方式，适用于不同的构建工具和框架。

在CSS中使用

通过PostCSS插件，你可以在CSS中直接使用设计标记：

.button { background-color: token(color.blue.5); padding: token(space.sm) token(space.md); border-radius: token(radius.default); font-size: token(font-size.lg); }

在JavaScript/TypeScript中使用

通过核心库，你可以在JavaScript或TypeScript中访问设计标记：

import { tokens } from '@tokencss/core'; console.log(tokens.color.blue[5].value); // 输出蓝色5号值 console.log(tokens.space.sm.value); // 输出小号间距值

框架集成

Token CSS还提供了针对不同框架的集成方案，如：

• Astro集成：packages/astro/
• Vite集成：packages/vite/
• VSCode扩展：packages/vscode/

这些集成方案让你可以在特定框架中更便捷地使用设计标记，提升开发效率。

最佳实践：高效管理设计系统

保持配置文件的整洁

随着项目的发展，设计标记可能会越来越多。建议按类别组织配置文件，保持结构清晰：

{ "extends": ["@tokencss/core/preset"], "color": { /* 颜色相关标记 */ }, "space": { /* 间距相关标记 */ }, "typography": { /* 排版相关标记 */ }, // ... 其他类别 }

版本控制设计标记

将token.config.json纳入版本控制，记录设计标记的变更历史。这有助于团队协作和设计系统的演进管理。

定期审计和优化

定期审查设计标记的使用情况，移除未使用的标记，优化冗余定义，保持设计系统的精简和高效。

总结：开启设计系统之旅

Token CSS通过简单而强大的配置方式，让创建和管理设计系统变得轻松愉快。无论你是在构建小型项目还是大型应用，Token CSS都能帮助你实现样式的统一管理，提升开发效率和设计质量。

现在，你已经掌握了Token CSS的配置方法，是时候开始创建自己的设计系统了！只需创建一个token.config.json文件，继承官方预设，然后根据项目需求进行自定义，即可快速拥有一套专业的设计系统。

祝你在设计系统的创建之旅中取得成功！

【免费下载链接】tokencss项目地址: https://gitcode.com/gh_mirrors/to/tokencss