颜色常量模块化设计:Color Tokens 体系

📅 2026/7/19 7:00:41
颜色常量模块化设计:Color Tokens 体系
前言“海风日记“通过Colors.ets集中管理所有颜色常量建立了完整的 Color Tokens 体系确保全项目颜色风格统一。本文将从源码出发深入讲解颜色模块化设计的实现。一、Color Tokens 体系// Colors.ets — 完整的颜色令牌体系 // 主色 export const COLOR_PRIMARY #F5A623 export const COLOR_PRIMARY_LIGHT #FFBE45 export const COLOR_PRIMARY_DEEP #D4900A // 背景 export const COLOR_BG_PAGE #FAFAF7 export const COLOR_CARD_BG #FFFEF9 export const COLOR_PAPER_BG #FFF9F0 // 文字 export const COLOR_TEXT_MAIN #2D2926 export const COLOR_TEXT_SECONDARY #9B8F84 export const COLOR_TEXT_HINT #BEB8B2 export const COLOR_TEXT_WEAK #C8C0B8 // 品牌辅助色 export const COLOR_AMBER #C8956A export const COLOR_AMBER_DARK #C8800A // 分隔线/边框 export const COLOR_DIVIDER #F0EAE0 export const COLOR_BORDER rgba(200,180,140,0.18) // 头部渐变 export const COLOR_HEADER_TOP #FFD4A0 export const COLOR_HEADER_MID #FFE8C8 export const COLOR_HEADER_BOTTOM #FAFAF7 // 情绪色 export const COLOR_MOOD_SUNNY #F5A623 export const COLOR_MOOD_CALM #7ECAAE export const COLOR_MOOD_PONDER #A67EC0 export const COLOR_MOOD_LOW #8BAFD6 export const COLOR_MOOD_SAD #B0A8C8 // Tab export const COLOR_TAB_ACTIVE #F5A623 export const COLOR_TAB_INACTIVE #C0BAB4 // 阴影 export const COLOR_CARD_SHADOW #19A0783C export const COLOR_SHADOW_LIGHT rgba(160,120,60,0.06) // 功能色 export const COLOR_WHITE #FFFFFF export const COLOR_DANGER #D06060 export const COLOR_SUCCESS #4CAF50 export const COLOR_MASK rgba(0,0,0,0.40)二、Dimension 尺寸规范// Dimensions.ets — 尺寸间距令牌 export const PAGE_PADDING 16 export const CARD_RADIUS 16 export const BTN_RADIUS_FULL 999 export const FONT_BODY 16 export const FONT_DATE_HERO 80 export const TAB_BAR_HEIGHT 83 export const NAV_BAR_HEIGHT 44三、hilog 日志系统import { hilog } from kit.PerformanceAnalysisKit const TAG EntryAbility const DOMAIN 0xFF00 hilog.info(DOMAIN, TAG, 应用启动) hilog.error(DOMAIN, TAG, 错误: ${JSON.stringify(err)})四、总结本文通过“海风日记“的颜色和尺寸规范深入讲解了模块化设计系统的实现Color Tokens完整的颜色体系Dimension Tokens尺寸间距规范hilog 日志性能分析如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Colors.ets 源码Dimensions.ets 源码hilog 日志文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区