尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
OpenDesign Token:开源设计系统的终极变量解决方案,一站式管理6大项目主题
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),仅供参考
RELATED

相关推荐

解密深蓝词库转换:3步突破输入法迁移壁垒的技术实战

解密深蓝词库转换:3步突破输入法迁移壁垒的技术实战

解密深蓝词库转换:3步突破输入法迁移壁垒的技术实战 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 你是否曾为更换输入法时词库无法迁移而苦恼&#xff…

📅 2026/9/8 8:42:47
9.9万元人形机器人真实落地:消费级运动控制与家庭交互实践

9.9万元人形机器人真实落地:消费级运动控制与家庭交互实践

1. 项目概述:当9.9万元的人形机器人走进真实生活现场“9.9万的人形机器人,200多名消费者的真实体验”——这个标题一出来,朋友圈和科技社群就炸了。不是因为价格多震撼(毕竟波士顿动力Atlas动辄上千万),而是…

📅 2026/9/8 14:44:08
Marge-bot 项目演进路线图:未来功能展望和社区贡献指南

Marge-bot 项目演进路线图:未来功能展望和社区贡献指南

Marge-bot 项目演进路线图:未来功能展望和社区贡献指南 【免费下载链接】marge-bot A merge-bot for GitLab 项目地址: https://gitcode.com/gh_mirrors/ma/marge-bot Marge-bot是一个专为GitLab设计的智能合并机器人🤖,它自动维护代码…

📅 2026/7/25 16:30:41
MORE NEWS

更多资讯

📰

HyperFrames v0.7.89:缓存目录的 Watch 过滤与项目签名隔离——预览刷新循环的根治方案

HyperFrames v0.7.89:缓存目录的 Watch 过滤与项目签名隔离——预览刷新循环的根治方案 【免费下载链接】hyperframes Write HTML. Render video. Built for agents. 项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes HyperFrames v0.7.89&…

📰

Sourcetrail 代码可视化工具教程:三步画出陌生代码库的符号关系图

Sourcetrail 代码可视化工具教程:三步画出陌生代码库的符号关系图 【免费下载链接】Sourcetrail Sourcetrail - free and open-source interactive source explorer 项目地址: https://gitcode.com/GitHub_Trending/so/Sourcetrail Sourcetrail 是一款免费开…

📰

ML-For-Beginners 聚类模块实战:用 K-Means 与数据可视化分析尼日利亚音乐品味

ML-For-Beginners 聚类模块实战:用 K-Means 与数据可视化分析尼日利亚音乐品味 【免费下载链接】ML-For-Beginners 12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all 项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners …

📰

SpringBoot+Vue考务报名系统设计与实现全解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

Pretext:用语义化写作搞定长文档多格式排版引擎

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

Hermes Python:面向生产的Agent运行时契约框架

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬