1 个不稳定版本
0.1.0 | 2024 年 2 月 17 日 |
---|
#1362 在 编码
在 figtok 中使用
53KB
1K SLoC
Figtok/令牌
该软件包负责定义用于定义设计令牌的核心结构,以及我们用于存储、检索和将令牌序列化为 CSS 的结构。
TokenDefinition
TokenDefinition 结构通过 serde 构建。我们的原始数据将直接反序列化到 TokenDefinition<T>
,具体取决于令牌的底层类型。到目前为止,我们有三种
- 标准
- 组合
- 阴影
标准令牌 是简单的对象,其值是一个存储在 String
下的 token.value
的 String
。
组合令牌 是对象,其值是一个嵌套的 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