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套独立的主题体系每套主题都针对不同的开源社区品牌进行了专门优化主题前缀品牌色特点适用社区openEulereKlein Blue品牌蓝openEuler开源社区AscendaAscend品牌色昇腾计算社区KunpengkKunpeng品牌色鲲鹏计算社区MindsporemVivid Blue鲜蓝MindSpore深度学习框架社区openGaussgPurple紫色openGauss数据库社区openUBMCuAzure Blue天蓝openUBMC社区每个社区项目在初始化时选定一套主题之后只需在浅色/深色模式之间切换即可。这种设计确保了品牌一致性同时减少了样式维护的复杂度。 快速开始安装与使用要使用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颜色映射流程识别颜色类型功能色、文字色、品牌色查找对应Token使用通用色值反查表或主题特定参考表替换硬编码值将#002FA7替换为var(--o-color-primary1)间距映射流程判断使用场景页面级间距使用响应式Token组件内部使用静态Token匹配最接近值将16px替换为var(--o-r-gap-4)考虑响应式小屏幕下响应式Token会自动缩小栅格布局映射读取画板宽度确定当前断点计算列宽使用栅格公式或对照表应用栅格变量使用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大主题的支持、完整的响应式系统、以及从设计到代码的无缝映射开发者可以保持品牌一致性不同社区使用统一的Token体系实现响应式设计自动适配不同屏幕尺寸提高开发效率减少样式硬编码提高可维护性支持主题切换轻松实现浅色/深色模式切换优化协作流程设计师和开发者使用同一套设计语言无论你是为openEuler、Ascend、Kunpeng还是其他开源社区开发应用OpenDesign设计令牌都能帮助你构建专业、一致且响应式的用户界面。开始使用这些CSS变量让你的前端开发更加高效和规范【免费下载链接】opendesign-skillsThe repository of OpenDesign Skills项目地址: https://gitcode.com/openeuler/opendesign-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考