OpenDesign Skills 设计令牌实战：6大主题 CSS 变量体系详解

OpenDesign Skills 设计令牌实战：6大主题 CSS 变量体系详解

【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills

前往项目官网免费下载：https://ar.openeuler.org/ar/

在现代前端开发中，设计系统的一致性和可维护性至关重要。OpenDesign Skills 提供了完整的设计令牌（Design Tokens）体系，通过6大主题的CSS变量系统，帮助开发者构建统一、美观且响应式的用户界面。这套设计令牌体系不仅支持openEuler社区，还适配了Ascend、Kunpeng、Mindspore、openGauss和openUBMC等多个开源社区，为不同品牌风格提供了统一的样式解决方案。

什么是OpenDesign设计令牌？

设计令牌是设计系统的核心构建块，它们将设计决策（如颜色、间距、字体大小等）转化为可复用的代码变量。OpenDesign设计令牌体系以--o-为前缀，提供了一套完整的CSS变量系统，涵盖了从颜色、间距、圆角到字体、阴影、动画等所有视觉属性。

🎨 六大主题体系

OpenDesign设计令牌最强大的特性之一就是支持6套独立的主题体系，每套主题都针对不同的开源社区品牌进行了专门优化：

每个社区项目在初始化时选定一套主题，之后只需在浅色/深色模式之间切换即可。这种设计确保了品牌一致性，同时减少了样式维护的复杂度。

🚀 快速开始：安装与使用

要使用OpenDesign设计令牌，首先需要安装对应的主题包：

// 以openEuler主题为例 import '@opensig/opendesign-token/themes/e.token.css'

运行时切换浅色/深色模式非常简单：

// 切换到浅色模式 document.documentElement.setAttribute('data-o-theme', 'e.light') // 切换到深色模式 document.documentElement.setAttribute('data-o-theme', 'e.dark')

🎯 核心设计令牌详解

1. 语义颜色Token（推荐使用）

语义颜色Token是设计令牌的核心，它们根据功能而非具体颜色值命名，确保在不同主题下都能保持一致的视觉效果：

/* 主色系 - 用于品牌色和主要操作 */ background-color: var(--o-color-primary1); color: var(--o-color-primary2); /* 功能色 - 用于状态反馈 */ .success-color { color: var(--o-color-success1); } .warning-color { color: var(--o-color-warning1); } .danger-color { color: var(--o-color-danger1); } /* 文字颜色 - 根据重要性分级 */ .title { color: var(--o-color-info1); } /* 一级文字/标题 */ .content { color: var(--o-color-info2); } /* 二级文字/正文 */ .hint { color: var(--o-color-info3); } /* 三级文字/辅助 */ .disabled { color: var(--o-color-info4); } /* 四级文字/禁用 */ /* 背景填充色 */ .page-bg { background-color: var(--o-color-fill1); } .card-bg { background-color: var(--o-color-fill2); } /* 最常用 */ .nested-bg { background-color: var(--o-color-fill3); }

重要提醒：避免使用不存在的bg*命名（如--o-color-bg1），正确使用fill*系列Token。

2. 响应式Token（页面级首选）

响应式Token以--o-r-为前缀，能够根据视口宽度自动适配，是构建响应式布局的首选：

/* 响应式字号和行高 */ .title { font-size: var(--o-r-font_size-h3); line-height: var(--o-r-line_height-h3); } /* 响应式间距 */ .section { padding: var(--o-r-gap-6) var(--o-r-gap-4); margin-bottom: var(--o-r-gap-5); }

断点系统：

• Phone(≤840px)：手机、平板竖屏
• Pad(841-1200px)：平板横屏
• Laptop(1201-1680px)：笔记本
• Desktop(>1680px)：桌面大屏

3. 栅格系统Token（页面级模块布局）

栅格系统是页面布局的核心，提供24列响应式栅格，支持6个断点：

/* 使用栅格列宽变量 */ .column-6 { width: var(--o-r-grid-6); } .column-8 { width: var(--o-r-grid-8); } /* 并排元素间距使用水槽 */ .row { display: flex; gap: 0 var(--o-r-grid-column-gutter); } /* 楼层栅格适配 */ .floor { width: var(--o-r-grid-section-width); margin: 0 auto; }

栅格容器：直接使用.o-r-grid-container类即可获得完整的栅格布局支持。

4. 间距Token（静态值）

静态间距Token适用于不随视口变化的固定间距场景：

/* 组件内部固定间距 */ .icon-text-gap { gap: var(--o-gap-1); } /* 4px - 最小间距 */ .component-inner { gap: var(--o-gap-2); } /* 8px - 小间距 */ .related-items { gap: var(--o-gap-3); } /* 12px - 中小间距 */ .default-padding { padding: var(--o-gap-4); } /* 16px - 常规间距（最常用） */ .section-spacing { margin: var(--o-gap-6); } /* 32px - 大间距 */

5. 圆角Token（主题相关）

圆角值因主题而异，提供了内容和控件两套圆角系统：

/* 内容圆角 - 用于卡片、容器等 */ .card { border-radius: var(--o-radius-m); } /* 中等圆角 */ .panel { border-radius: var(--o-radius-xl); } /* 超大圆角 */ /* 控件圆角 - 用于按钮、输入框等组件 */ .button { border-radius: var(--o-radius_control-m); } .input { border-radius: var(--o-radius_control-s); }

注意：不同主题的圆角值可能不同，例如openEuler主题所有圆角均为4px（接近直角风格），而Mindspore主题则更圆润。

6. 字体Token（静态值）

提供完整的字体大小和行高系统：

/* 静态字体大小 */ .display1 { font-size: var(--o-font_size-display1); } /* 56px - 一级数据展示 */ .h1 { font-size: var(--o-font_size-h1); } /* 32px - 一级标题 */ .text1 { font-size: var(--o-font_size-text1); } /* 16px - 常规正文（最常用） */ .tip1 { font-size: var(--o-font_size-tip1); } /* 14px - 提示文本 */ /* 配套行高 */ .display1 { line-height: var(--o-line_height-display1); } /* 80px */ .h1 { line-height: var(--o-line_height-h1); } /* 44px */

7. 阴影和动画Token

/* 阴影系统 */ .card { box-shadow: var(--o-shadow-1); } /* 卡片、小弹窗、楼层阴影 */ .card:hover { box-shadow: var(--o-shadow-2); } /* 卡片悬浮阴影 */ .modal { box-shadow: var(--o-shadow-3); } /* 大弹窗、抽屉阴影 */ /* 动画系统 */ .transition { transition: all var(--o-duration-m1) var(--o-easing-standard); }

🔄 设计稿到代码的映射实战

当从Pixso设计稿生成代码时，需要将设计稿中的视觉属性映射到对应的CSS Token：

颜色映射流程

1. 识别颜色类型：功能色、文字色、品牌色
2. 查找对应Token：使用通用色值反查表或主题特定参考表
3. 替换硬编码值：将#002FA7替换为var(--o-color-primary1)

间距映射流程

1. 判断使用场景：页面级间距使用响应式Token，组件内部使用静态Token
2. 匹配最接近值：将16px替换为var(--o-r-gap-4)
3. 考虑响应式：小屏幕下响应式Token会自动缩小

栅格布局映射

1. 读取画板宽度：确定当前断点
2. 计算列宽：使用栅格公式或对照表
3. 应用栅格变量：使用var(--o-r-grid-N)代替固定宽度

📊 最佳实践与常见错误

✅ 推荐做法

/* 正确的Token使用 */ .card { background-color: var(--o-color-fill2); border-radius: var(--o-radius-m); padding: var(--o-r-gap-4); box-shadow: var(--o-shadow-1); } .title { font-size: var(--o-r-font_size-h3); line-height: var(--o-r-line_height-h3); color: var(--o-color-info1); } .section-gap { padding: var(--o-r-gap-6) var(--o-r-gap-4); }

❌ 常见错误

/* 错误1：使用调色板Token而非语义Token */ .card { background-color: rgb(var(--o-white)); /* ❌ 应使用var(--o-color-fill2) */ } /* 错误2：硬编码值 */ .title { font-size: 22px; /* ❌ 应使用var(--o-r-font_size-h3) */ line-height: 30px; /* ❌ 应使用var(--o-r-line_height-h3) */ } /* 错误3：使用不存在的Token */ .card { background-color: var(--o-color-bg1); /* ❌ bg1不存在，应使用fill2 */ }

🛠️ 实用工具与资源

OpenDesign Skills项目提供了完整的资源支持：

• 主题参考文档：每个主题都有详细的参考文件，包含完整的Token列表和色值反查表
• 设计稿映射指南：帮助设计师将Pixso设计稿属性映射到对应的CSS Token
• 响应式断点系统：完整的4断点响应式支持
• 表单布局规范：多列表单的栅格布局规则

通过skills/opendesign-tokens/SKILL.md可以获取完整的设计令牌指南，包含所有主题的详细说明和使用示例。

🎉 总结

OpenDesign设计令牌体系为前端开发提供了强大而灵活的样式解决方案。通过6大主题的支持、完整的响应式系统、以及从设计到代码的无缝映射，开发者可以：

1. 保持品牌一致性：不同社区使用统一的Token体系
2. 实现响应式设计：自动适配不同屏幕尺寸
3. 提高开发效率：减少样式硬编码，提高可维护性
4. 支持主题切换：轻松实现浅色/深色模式切换
5. 优化协作流程：设计师和开发者使用同一套设计语言

无论你是为openEuler、Ascend、Kunpeng还是其他开源社区开发应用，OpenDesign设计令牌都能帮助你构建专业、一致且响应式的用户界面。开始使用这些CSS变量，让你的前端开发更加高效和规范！

【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills