-
Notifications
You must be signed in to change notification settings - Fork 0
/
config.js
101 lines (93 loc) · 2.38 KB
/
config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
const StyleDictionary = require("style-dictionary");
StyleDictionary.registerTransform({
type: `attribute`,
name: `lk/attribute/sizingToSize`,
matcher: (token) => {
return (
token.type === "sizing" ||
token.type === "spacing" ||
token.type === "borderRadius" ||
token.type === "lineHeights" ||
token.type === "fontSizes"
);
},
transformer: (token) => {
// token.value will be resolved and transformed at this point
token.type = "size";
},
});
const pxToRem = function (size) {
return size / 16 + "rem";
};
StyleDictionary.registerTransform({
type: `attribute`,
name: `lk/size/pxToRem`,
matcher: (token) => {
return token.type === "size";
},
transformer: (token) => {
// token.value will be resolved and transformed at this point
token.value = pxToRem(token.value);
},
});
StyleDictionary.registerTransform({
type: `value`,
name: `lk/dropShadow`,
matcher: (token) => {
return token.type === "boxShadow";
},
transformer: (token) => {
// token.value will be resolved and transformed at this point
const values = [];
token.value.forEach((shadow) => {
values.push(
`${shadow.type === "innerShadow" ? "inner" : ""} ${shadow.x}px ${
shadow.y
}px ${shadow.spread}px ${shadow.color}`
);
});
return values.join(", ");
},
});
StyleDictionary.registerTransform({
type: `value`,
name: `lk/typography`,
matcher: (token) => {
return token.type === "typography";
},
transformer: (token) => {
// token.value will be resolved and transformed at this point
return `${token.value.fontWeight === "Regular" ? "400" : "500"} ${pxToRem(
token.value.fontSize
)}/${pxToRem(token.value.lineHeight)} "${token.value.fontFamily}"`;
},
});
StyleDictionary.registerTransform({
type: `attribute`,
name: `lk/dump`,
transformer: (token) => {
// token.value will be resolved and transformed at this point
console.log(token);
},
});
module.exports = {
source: ["tokens/style-dic-tokens.json"],
platforms: {
css: {
transforms: [
"lk/attribute/sizingToSize",
"attribute/cti",
"name/cti/camel",
"lk/size/pxToRem",
"lk/dropShadow",
"lk/typography",
],
files: [
{
format: "css/variables",
destination: "tokens/tokens.css",
},
],
},
},
};