主要观点:作者是直觉型的人,擅长将空白页变为实用的东西,不擅长变为美观的东西。多年前开始构建“设计系统”,曾对 Tailwind 有偏见后爱上 UnoCSS。注意到设计与开发在颜色值沟通上的容量不匹配,提出不应将上下文规则展平为令牌列表,而应将其编码为系统工具中的规则,如使用“-lighten”和“-darken”工具类来表达颜色状态变化,通过重新设计类工具的工作方式实现,并利用 Uno 的完全可定制性。还介绍了一些相关的技巧和现象,如“魔法”颜色令牌、超级继承(子元素可继承父元素的颜色等属性)、阴影相关的应用等,但此系统也有隐式继承、设计可访问性、依赖工具类等风险,作者的最终目标是将关心的颜色令牌数量减少到 4 种。
关键信息:
- 作者是直觉型,擅长构建实用东西。
- 构建“设计系统”,从对 Tailwind 偏见到爱 UnoCSS。
- 指出设计与开发在颜色值沟通上的问题及解决办法。
- 介绍“-lighten”和“-darken”工具类及实现方式。
- 阐述相关技巧如“魔法”颜色令牌、超级继承等。
- 提及系统的风险如隐式继承、设计可访问性等。
重要细节:
- 颜色令牌系统常是扁平化层次结构,易导致翻译错误。
- 工具类组合可表达各种颜色状态,且颜色状态规则可自动适应。
- 实现过程中利用 Uno 的可定制性,通过中间属性避免循环赋值。
- 需禁用“--v-xxx-altered”属性的继承。
- 超级继承可让子元素继承父元素的属性。
- 系统存在隐式继承可能导致意外行为等风险。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。