OpenDesign Token完整指南：从安装到实战的10个核心技巧

OpenDesign Token完整指南从安装到实战的10个核心技巧【免费下载链接】opendesign-tokenThe repository of OpenDesign token项目地址: https://gitcode.com/openeuler/opendesign-token前往项目官网免费下载https://ar.openeuler.org/ar/OpenDesign Token是openEuler社区推出的设计系统令牌库提供多套主题令牌、响应式设计变量和字体配置方案帮助开发者快速构建统一风格的界面。本文将通过10个核心技巧带您从安装到实战全面掌握OpenDesign Token的使用方法。一、快速安装3种方式5分钟上手OpenDesign Token支持npm和pnpm两种包管理工具选择任意一种即可完成安装# 使用npm安装 npm i opensig/opendesign-token # 使用pnpm安装 pnpm add opensig/opendesign-token安装完成后您可以在项目的node_modules/opensig/opendesign-token目录下找到所有令牌文件和资源。二、主题切换一键实现明暗模式OpenDesign Token提供了灵活的主题切换功能通过导入不同的令牌文件和设置HTML属性即可实现// 导入浅色主题 import opensig/opendesign-token/themes/e.light.token.css; // 导入深色主题 import opensig/opendesign-token/themes/e.dark.token.css;在根容器通常是html或body标签添加data-o-theme属性控制主题!-- 浅色模式 -- html>// 引入全部字体 import opensig/opendesign-token/fonts/css; // 或单独引入特定字重如常规400 import opensig/opendesign-token/fonts/sc-regular/font.min.css;通过变量应用到元素body { font-family: var(--o-font_family); font-weight: var(--o-font_weight-regular); /* 400 */ } h1 { font-weight: var(--o-font_weight-semibold); /* 600 */ }四、响应式变量自动适配不同屏幕引入任意皮肤令牌后响应式变量--o-r-*会自动生效无需额外配置。这些变量会根据视口宽度在不同断点自动切换取值/* 响应式字号 */ .title { font-size: var(--o-r-font_size-5); } /* 响应式间距 */ .card { padding: var(--o-r-space-4); }响应式变量的数据源来自tokens/responsive-token.json字号、行高、间距tokens/grid-token.json栅格系统五、栅格系统12列布局轻松实现OpenDesign Token内置栅格系统通过栅格变量可以快速实现响应式布局.container { display: grid; grid-template-columns: var(--o-r-grid-3) var(--o-r-grid-6) var(--o-r-grid-3); gap: var(--o-r-space-4); } .sidebar { width: var(--o-r-grid-3); /* 占据3栅格 */ } .main-content { width: var(--o-r-grid-9); /* 占据9栅格 */ }六、变量使用掌握核心CSS变量OpenDesign Token提供了丰富的CSS变量涵盖颜色、字体、间距等方面。常用变量示例变量名示例值说明--o-font_familyHarmonyOS Sans, HarmonyOS Sans SC, Inter, ...常规字体族--o-color-main1#0052D9主色调1--o-space-416px基础间距--o-r-font_size-520px(移动端) /24px(桌面端)响应式字号七、字体权重7档字重灵活搭配OpenDesign Token支持7档字重满足不同场景的排版需求--o-font_weight-thin: 250--o-font_weight-light: 300--o-font_weight-regular: 400正文常用--o-font_weight-medium: 500--o-font_weight-semibold: 600标题常用--o-font_weight-bold: 700--o-font_weight-black: 900八、主题定制修改令牌文件实现个性化如果默认主题不能满足需求可以通过修改令牌文件实现定制找到对应主题的令牌文件如packages/opendesign-token/configs/openEuler.token.config.ts修改配置文件中的变量值然后重新构建项目。九、常见问题解决使用中的痛点字体不生效确保已正确引入字体文件并且通过var(--o-font_family)使用字体族。响应式变量没变化检查是否已引入皮肤令牌文件响应式变量需要依赖皮肤令牌才能生效。主题切换无效确认data-o-theme属性已正确添加到根容器且值为light或x-dark。十、实战案例构建响应式卡片组件下面是一个使用OpenDesign Token构建的响应式卡片组件示例div classcard>git clone https://gitcode.com/openeuler/opendesign-token更多详细信息请参考项目中的文档opendesign-token 详细文档opendesign-token 变更日志【免费下载链接】opendesign-tokenThe repository of OpenDesign token项目地址: https://gitcode.com/openeuler/opendesign-token创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考