自适应、简化的设计系统颜色

主要观点:作者是直觉型的人,擅长将空白页变为实用的东西,不擅长变为美观的东西。多年前开始构建“设计系统”,曾对 Tailwind 有偏见后爱上 UnoCSS。注意到设计与开发在颜色值沟通上的容量不匹配,提出不应将上下文规则展平为令牌列表,而应将其编码为系统工具中的规则,如使用“-lighten”和“-darken”工具类来表达颜色状态变化,通过重新设计类工具的工作方式实现,并利用 Uno 的完全可定制性。还介绍了一些相关的技巧和现象,如“魔法”颜色令牌、超级继承(子元素可继承父元素的颜色等属性)、阴影相关的应用等,但此系统也有隐式继承、设计可访问性、依赖工具类等风险,作者的最终目标是将关心的颜色令牌数量减少到 4 种。

关键信息:

  • 作者是直觉型,擅长构建实用东西。
  • 构建“设计系统”,从对 Tailwind 偏见到爱 UnoCSS。
  • 指出设计与开发在颜色值沟通上的问题及解决办法。
  • 介绍“-lighten”和“-darken”工具类及实现方式。
  • 阐述相关技巧如“魔法”颜色令牌、超级继承等。
  • 提及系统的风险如隐式继承、设计可访问性等。

重要细节:

  • 颜色令牌系统常是扁平化层次结构,易导致翻译错误。
  • 工具类组合可表达各种颜色状态,且颜色状态规则可自动适应。
  • 实现过程中利用 Uno 的可定制性,通过中间属性避免循环赋值。
  • 需禁用“--v-xxx-altered”属性的继承。
  • 超级继承可让子元素继承父元素的属性。
  • 系统存在隐式继承可能导致意外行为等风险。
阅读 13
0 条评论