@sps-woodland /令牌
SPS林地设计系统设计令牌
什么是设计标记？
设计令牌是设计系统的基本要素。它们是设计决策的记录——字体大小、间距值、边框半径等——以人类和机器都可读的格式记录。它们是生成可消费工件的唯一来源，例如CSS类、设计工具的调色板或用于移动应用程序开发的XML文件。
这个包是如何工作的
令牌源文件位于 src/tokens 目录中。为了从中生成消耗品，我们使用了一个叫做 风格的字典，由亚马逊开发。Style Dictionary配置位于包的根目录， config.js。Style Dictionary自带许多可以生成的内置格式，您也可以轻松添加自己的格式。在 src/formats 您将找到我们创建的自定义格式。
Style Dictionary还有一个“转换”的概念，它适用于标记值。例如，您可能希望在源文件中使用十六进制定义颜色，但在生成的消耗品中输出hsla格式。每种格式都有一组默认的转换。在我们的例子中，我们正在修改我们使用的自定义转换组，将源中的大小值作为像素处理，并将其转换为输出中的rem。 (默认是将大小标记的值视为rem并简单地附加 "rem" 为它们提供输出。)
此外，我们还有 香草精洒 其中没有生成定义它们的文件，但是该文件导入了一个生成的文件，该文件在对象中包含令牌，该对象的形状根据洒定义的需要进行了定制。
这意味着构建过程按照特定顺序遵循一系列阶段：
- 运行
style-dictionary build从令牌源文件生成文件。非typescript输出进入lib从git中排除，TS输出到src并且是忠诚的。 - 运行
vite build提供的TypeScript导出src/index.ts成lib. - 运行
tsc使用标记只发出要生成的声明.d.ts文件lib对于使用TypeScript的消费者来说。
格式
JavaScript /打印稿
对于JS/TS代码，我们导出一个简单的令牌值对象，以及它的TypeScript类型。
import { tokens } from "@sps-woodland/tokens";
console.log(tokens.size.spacing.lg); // "2rem"
CSS
提供了两个CSS文件：一个文件将令牌声明为 CSS自定义属性另一个定义了实用程序类来应用它们。实用程序类是使用自定义属性定义的，因此如果希望使用这些属性，则必须包含这两个文件。
// in index.tsx or App.tsx for your application
import "@sps-woodland/tokens/lib/css/tokens.css";
import "@sps-woodland/tokens/lib/css/utils.css";
/* usage in CSS */
.some-element {
color: var(--color-blue-medium);
}
// usage in JSX
<div className="mt-sm type-body-md">...</div>
可用的实用程序类
- 的颜色,
.COLOR-VARIANT,如。.purple-dark或者.grey-medium-light - 背景颜色，如
.bg-COLOR-VARIANT,如。.bg-blue-light - bootstrap风格的边距和间距类，如
.PREFIX-SIZE,在那里PREFIX要么是m保证金或p用于填充，可选后跟t/b/l/r上/下/左/右或x/y对于x（左+右）/y（上+下）。例如:.my-sm= margin- y, small （margin-top和margin-bottom的间距较小）.p-md= padding medium（中等间距的填充）.ml-xs=左边距，特别小
- 字体粗细(
.fw-normal和.fw-bold） - 字体大小+行高组合，例如：
.type-body-md对于中等体型，.type-title-lg适用于大标题字体等。 - 字体大小和行高，例如：
.fs-body-sm对于小字体，.lh-title-sm对于小标题行高度等。
香草精
SPS未来UI样式的工具是 香草精，因此我们提供我们的设计令牌为 洒.
要使它们工作，你需要在你的索引或主应用组件中导入与它们一起的CSS文件：
import "@sps-woodland/tokens/lib/vanilla-extract/style.css";
然后，在你的 .css.ts 文件，你可以导入我们的sprinkles，并根据上面的sprinkles文档链接使用它们。
import { style } from "@vanilla-extract/css";
import { sprinkles, rem } from "@sps-woodland/tokens";
export const fooClass = sprinkles({
color: "blue-medium",
marginTop: "md",
});
// or with additional custom styles - again, see the vanilla-extract docs
export const barClass = style([
sprinkles({
color: "red-dark",
type: "title-xl",
}),
/* We also export this utility function for your custom style
* definitions in vanilla-extract. It will find all the pixel values
* within and convert them to rem. */
rem({
maxWidth: "200px",
}),
]);
萨斯
Sass的消耗品本质上与CSS相同。有一个文件是用于令牌的Sass变量，还有一个文件是使用这些变量定义的实用程序类。
// in your root scss file
@import "@sps-woodland/tokens/lib/scss/tokens";
@import "@sps-woodland/tokens/lib/scss/utils";