OpenDesign Token社区贡献指南：如何为开源设计系统添加新主题

OpenDesign Token社区贡献指南如何为开源设计系统添加新主题【免费下载链接】opendesign-tokenThe repository of OpenDesign token项目地址: https://gitcode.com/openeuler/opendesign-token前往项目官网免费下载https://ar.openeuler.org/ar/OpenDesign Token是一个强大的开源设计系统变量库它为开发者提供了一套完整的设计令牌Design Tokens解决方案。本文将详细介绍如何为OpenDesign Token贡献新主题帮助您快速上手并为开源设计系统添砖加瓦为什么需要添加新主题OpenDesign Token目前已经支持多个社区主题包括openEuler、Ascend、Kunpeng、MindSpore等。每个主题都包含完整的浅色和深色模式为不同的开源项目提供了统一的设计语言。添加新主题可以让更多的开源项目受益于标准化的设计系统确保界面一致性和开发效率。准备工作了解OpenDesign Token架构在开始贡献之前让我们先了解一下OpenDesign Token的基本架构核心文件结构packages/opendesign-token/ ├── configs/ # 主题配置文件 │ ├── ascend.token.config.ts │ ├── kunpeng.token.config.ts │ ├── openEuler.token.config.ts │ └── ... ├── tokens/ # 主题数据文件 │ ├── ascend-token.json │ ├── kunpeng-token.json │ ├── openeuler-token.json │ └── ... ├── themes/ # 生成的CSS主题文件 ├── fonts/ # 鸿蒙字体文件 └── scripts/ # 构建脚本主题生成流程配置定义在configs/目录中创建主题配置文件数据准备在tokens/目录中创建JSON主题数据构建生成运行构建脚本生成CSS主题文件集成测试在测试项目中验证主题效果第一步创建主题配置文件每个主题都需要一个配置文件来定义其基本属性。让我们以创建一个名为mytheme的新主题为例配置文件示例创建文件packages/opendesign-token/configs/mytheme.token.config.tsexport default { prefix: --o-, output: ../themes/, themeMap: [ { valueKey: light, name: m.light, }, { valueKey: dark, name: m.dark, }, ], codeSnippetsFile: ../code-snippets/m.token.code-snippets, defaultTheme: light, defaultThemeName: m, tokenFile: [../tokens/mytheme-token.json], };配置参数说明prefixCSS变量前缀默认为--o-themeMap定义主题的浅色和深色模式defaultThemeName主题简称如eopenEuler, aAscend, mmythemetokenFile指向对应的JSON数据文件第二步设计主题JSON数据主题数据文件定义了具体的颜色、尺寸、间距等设计令牌。创建packages/opendesign-token/tokens/mytheme-token.json基础结构示例{ white: { name: 白色, type: palette, typeName: 色盘, value: [ { key: white, value: { light: 255, 255, 255, dark: 255, 255, 255 } } ] }, brand: { name: 品牌色, type: palette, typeName: 色盘, value: [ { key: brand-1, value: { light: 235, 241, 250, dark: 14, 26, 69 } }, { key: brand-2, value: { light: 206, 219, 245, dark: 18, 34, 87 } } ] } }设计原则颜色系统定义完整的调色板包括品牌色、中性色、功能色等深浅模式为每个颜色值提供浅色和深色版本语义化命名使用有意义的名称如brand-primary、text-primary等层级关系建立清晰的色彩层级关系第三步添加构建脚本在packages/opendesign-token/package.json中添加构建命令{ scripts: { build:mytheme: open-scripts gen:token --config ./configs/mytheme.token.config.ts, build:all: pnpm build:a pnpm build:k pnpm build:e pnpm build:g pnpm build:u pnpm build:m pnpm build:mytheme node ./scripts/inject-responsive.js } }第四步生成主题文件运行构建命令生成CSS主题文件cd packages/opendesign-token pnpm build:mytheme这将生成两个CSS文件themes/m.light.token.css- 浅色主题themes/m.dark.token.css- 深色主题第五步测试新主题在测试项目中验证新主题的效果安装依赖# 在项目根目录 pnpm install构建所有主题# 构建所有主题包括新添加的mytheme pnpm build:all在测试项目中使用// 引入浅色主题 import opensig/opendesign-token/themes/m.light.token.css; // 引入深色主题 import opensig/opendesign-token/themes/m.dark.token.css; // 通过data-o-theme属性切换主题 document.documentElement.setAttribute(data-o-theme, m.light);最佳实践与注意事项1. 色彩对比度确保浅色和深色模式都有足够的对比度符合WCAG 2.1 AA标准。2. 语义化设计使用语义化的变量名称而不是具体的颜色值例如--o-color-primary而不是--o-color-blue-500--o-color-background而不是--o-color-gray-1003. 响应式设计OpenDesign Token内置了响应式变量系统新主题会自动继承这些特性--o-r-font_size-*- 响应式字体大小--o-r-gap-*- 响应式间距--o-r-grid-*- 响应式栅格系统4. 字体集成OpenDesign Token默认使用鸿蒙字体HarmonyOS Sans确保新主题与字体系统兼容/* 自动应用的字体变量 */ :root { font-family: var(--o-font_family); font-weight: var(--o-font_weight-regular); }贡献流程总结Fork仓库在gitcode上fork opendesign-token 仓库创建分支基于master分支创建新分支如feat/add-mytheme添加配置在configs/目录创建主题配置文件设计数据在tokens/目录创建JSON主题数据更新脚本在package.json中添加构建命令本地测试运行构建命令并测试主题效果提交PR提交Pull Request并等待代码审查持续维护响应社区反馈持续优化主题设计常见问题解答Q: 主题名称有什么规范A: 主题名称建议使用2-3个字母的缩写如e- openEulera- Ascendm- mythemeQ: 如何确保主题质量A: 建议参考现有主题的设计模式使用设计工具验证色彩对比度在不同设备上测试响应式效果邀请社区成员进行视觉评审Q: 主题需要包含哪些基本颜色A: 至少应包含品牌色brand colors中性色neutral colors功能色functional colors文本色text colors背景色background colors加入社区贡献OpenDesign Token是一个活跃的开源项目欢迎所有开发者参与贡献通过添加新主题您不仅能为开源设计系统做出贡献还能让更多的项目受益于标准化的设计语言。记住每一个优秀的主题设计都可能成为下一个开源项目的设计标准立即开始您的贡献之旅为开源设计系统增添新的色彩【免费下载链接】opendesign-tokenThe repository of OpenDesign token项目地址: https://gitcode.com/openeuler/opendesign-token创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考