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

发布时间:2026/9/20 21:42:12
颜色常量模块化设计: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开源鸿蒙跨平台社区

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询