#token #design #serialization #css #reference #shadow #figtok

figtok_tokens

处理 Figtok 不同令牌类型的实用工具

1 个不稳定版本

0.1.0 2024 年 2 月 17 日

#1362编码


figtok 中使用

MIT 许可证

53KB
1K SLoC

Figtok/令牌

该软件包负责定义用于定义设计令牌的核心结构,以及我们用于存储、检索和将令牌序列化为 CSS 的结构。

TokenDefinition

TokenDefinition 结构通过 serde 构建。我们的原始数据将直接反序列化到 TokenDefinition<T>,具体取决于令牌的底层类型。到目前为止,我们有三种

  • 标准
  • 组合
  • 阴影

标准令牌 是简单的对象,其值是一个存储在 String 下的 token.valueString

组合令牌 是对象,其值是一个嵌套的 serde::Value。这些嵌套值可以包含任意数量的 CSS 属性,应该一次性应用(即作为单个令牌,但包含多个样式属性)——由于这个原因,我们以略不同的方式序列化它们,生成一个 CSS 类定义而不是 CSS 变量,以便实现应用可以一次性应用所有样式。这也允许内部值引用其他令牌。在序列化时,每个内部值都被视为类似标准令牌,其中我们展开对其他令牌的任何引用。

阴影令牌 定义方式与组合令牌类似,其中值是一个嵌套的对象——然而,由于阴影存在预定义的内属性集,它们一起创建一个 box-shadow: [X] [Y] [BLUR] [SPREAD] [COLOR] 因此,我们以类似于组合令牌的方式反序列化,但以更类似于标准令牌的方式序列化,使用阴影令牌的内部属性生成单个值。

Token

Token枚举负责在TokenDefinition<T>之上提供通用的API。

Token枚举存储了一个TokenDefinition<T>,并暴露了一些getter来检索令牌的属性。当我们遍历令牌集进行序列化时,可以使用这些getter来检索名称、类型等,还可以检索值——使用额外的魔法,当获取Token.value()而不是直接访问TokenDefinition<T>.value时,figtok会丰富值以展开对其他令牌的引用。

TokenSet

TokenSet是一个简单的存储机制,用于将我们定义在一起的令牌保持在一起。这些集合可以全部序列化为单独的文件,或者,如果使用Figma Token Studio的主题功能,当Figtok遍历主题时,它将只包括与该主题相关的令牌集。

TokenStore

TokenStore是一个由FigTok自身实现的trait,它添加了检索令牌并丰富其值的功能。实现的结构可以以任何方式存储这些令牌,只要实现了上述方法以创建与上述结构体和系统的兼容性。

TODO

  • 恢复JSON序列化?

依赖

~3.5–5.5MB
~99K SLoC