OpenDesign Token开源设计系统的终极变量解决方案一站式管理6大项目主题【免费下载链接】opendesign-tokenThe repository of OpenDesign token项目地址: https://gitcode.com/openeuler/opendesign-token前往项目官网免费下载https://ar.openeuler.org/ar/OpenDesign Token 是一个强大的开源设计系统变量解决方案它为开发者和设计师提供了一站式管理6大项目主题的能力。通过集中化的设计令牌管理该项目能够帮助团队轻松维护和统一多个项目的视觉风格极大提升设计效率和一致性。 什么是设计令牌Design Token设计令牌是设计系统的核心构建块它们以结构化的方式存储设计决策如颜色、字体、间距和尺寸等。OpenDesign Token 将这些设计决策转化为可重用的代码变量确保在不同平台和项目中保持一致的视觉体验。OpenDesign Token 项目标志代表开源设计系统的创新与协作精神 核心功能一站式管理6大项目主题OpenDesign Token 支持六大项目主题的集中管理包括openEuler针对开源操作系统的设计主题Kunpeng面向鲲鹏处理器平台的设计风格Ascend为昇腾AI芯片打造的视觉系统MindSpore适配深度学习框架的设计语言openGauss数据库产品的专业设计规范openUbmc面向统一基板管理控制器的界面设计每个主题都有其专用的配置文件如openEuler.token.config.ts和kunpeng.token.config.ts位于项目的packages/opendesign-token/configs/目录下。这些配置文件定义了各主题的独特设计变量使主题切换变得简单高效。 简单三步快速集成到项目中1️⃣ 安装依赖使用 npm 或 pnpm 快速安装 OpenDesign Token 包npm i opensig/opendesign-token # 或 pnpm add opensig/opendesign-token2️⃣ 引入主题文件选择需要的主题导入对应的令牌文件// 引入默认主题 import opensig/opendesign-token/themes/e.token.css; // 如需支持明暗模式切换 import opensig/opendesign-token/themes/e.light.token.css; import opensig/opendesign-token/themes/e.dark.token.css;通过在根容器通常是 html 或 body 标签添加data-o-theme[light|x-dark]属性可以轻松实现明暗模式的切换。3️⃣ 使用设计变量引入主题后即可在 CSS 中使用设计变量/* 使用颜色变量 */ .element { background-color: var(--o-color-main1); color: var(--o-color-text1); } /* 使用间距变量 */ .container { padding: var(--o-space-4); margin-bottom: var(--o-space-2); } 响应式设计自动适配不同屏幕尺寸OpenDesign Token 内置了强大的响应式设计支持。引入任意主题令牌后响应式变量--o-r-*会自动生效无需额外导入。这些变量会根据视口宽度在不同断点自动切换取值。响应式设计的数据源来自tokens/responsive-token.json定义字号、行高和间距的响应式变化tokens/grid-token.json提供栅格系统的响应式配置 丰富字体支持鸿蒙字体族全面集成项目包含了完整的鸿蒙字体族支持多种字重和样式包括常规、中等、半粗体、粗体和细体等。字体文件位于packages/opendesign-token/fonts/目录下可通过以下方式引入// 引入所有字体 import opensig/opendesign-token/fonts/css; // 或单独引入特定字重 import opensig/opendesign-token/fonts/sc-regular/font.min.css; // 常规字重字体相关变量定义在皮肤令牌文件中引入主题后即可使用var(--o-font-family)等变量来应用字体样式。 开始使用 OpenDesign Token要开始使用 OpenDesign Token首先克隆项目仓库git clone https://gitcode.com/openeuler/opendesign-token详细的使用说明和 API 文档请参考项目中的 README.md 文件。对于版本更新和变更记录可以查看 ReleaseNote.md。 为什么选择 OpenDesign Token集中管理一站式管理多个项目主题减少重复工作一致性保障确保跨平台和项目的设计一致性灵活性高支持明暗模式切换适应不同使用场景响应式设计内置响应式变量轻松适配各种屏幕尺寸易于集成简单几步即可集成到现有项目中开源免费基于开源协议可自由使用和修改OpenDesign Token 为开源项目提供了专业的设计系统解决方案无论是小型应用还是大型平台都能从中受益。立即尝试体验设计系统带来的效率提升【免费下载链接】opendesign-tokenThe repository of OpenDesign token项目地址: https://gitcode.com/openeuler/opendesign-token创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考