@digdir/designsystemet 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bin/config.d.ts +3 -3
- package/dist/bin/config.d.ts.map +1 -1
- package/dist/bin/config.js +26 -27
- package/dist/bin/designsystemet.js +393 -376
- package/dist/config.schema.json +4 -4
- package/dist/src/config.d.ts +6 -21
- package/dist/src/config.d.ts.map +1 -1
- package/dist/src/config.js +24 -22
- package/dist/src/index.js +34 -46
- package/dist/src/scripts/createJsonSchema.js +5 -6
- package/dist/src/tokens/build.d.ts +1 -1
- package/dist/src/tokens/build.d.ts.map +1 -1
- package/dist/src/tokens/build.js +349 -331
- package/dist/src/tokens/create/generators/$designsystemet.js +9 -7
- package/dist/src/tokens/create/write.js +9 -7
- package/dist/src/tokens/format.d.ts.map +1 -1
- package/dist/src/tokens/format.js +34 -46
- package/dist/src/tokens/index.js +34 -46
- package/dist/src/tokens/process/output/declarations.d.ts +4 -0
- package/dist/src/tokens/process/output/declarations.d.ts.map +1 -0
- package/dist/src/tokens/process/output/declarations.js +860 -0
- package/dist/src/tokens/process/output/theme.js +10 -8
- package/dist/src/tokens/process/platform.d.ts +5 -3
- package/dist/src/tokens/process/platform.d.ts.map +1 -1
- package/dist/src/tokens/process/platform.js +22 -51
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts +1 -0
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map +1 -1
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +7 -0
- package/package.json +9 -7
|
@@ -0,0 +1,860 @@
|
|
|
1
|
+
// src/tokens/process/output/declarations.ts
|
|
2
|
+
import chalk3 from "chalk";
|
|
3
|
+
|
|
4
|
+
// src/tokens/process/platform.ts
|
|
5
|
+
import chalk2 from "chalk";
|
|
6
|
+
import * as R12 from "ramda";
|
|
7
|
+
import StyleDictionary2 from "style-dictionary";
|
|
8
|
+
|
|
9
|
+
// src/tokens/types.ts
|
|
10
|
+
var colorCategories = {
|
|
11
|
+
main: "main",
|
|
12
|
+
support: "support"
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
// src/tokens/process/configs.ts
|
|
16
|
+
import { register } from "@tokens-studio/sd-transforms";
|
|
17
|
+
import * as R11 from "ramda";
|
|
18
|
+
import StyleDictionary from "style-dictionary";
|
|
19
|
+
|
|
20
|
+
// src/tokens/utils.ts
|
|
21
|
+
import * as R from "ramda";
|
|
22
|
+
var mapToLowerCase = R.map(R.toLower);
|
|
23
|
+
var hasAnyTruth = R.any(R.equals(true));
|
|
24
|
+
var getType = (token) => (token.$type ?? token.type) || "";
|
|
25
|
+
var getValue = (token) => token.$value ?? token.value;
|
|
26
|
+
var typeEquals = R.curry(
|
|
27
|
+
(types, token) => {
|
|
28
|
+
if (R.isNil(token)) {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
var pathStartsWithOneOf = R.curry(
|
|
35
|
+
(paths, token) => {
|
|
36
|
+
if (R.isNil(token)) {
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
40
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
41
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
function isSemanticToken(token) {
|
|
45
|
+
return token.filePath.includes("semantic/");
|
|
46
|
+
}
|
|
47
|
+
function isSemanticColorToken(token, color) {
|
|
48
|
+
return token.filePath.includes("semantic/") && R.startsWith(["color", color], token.path);
|
|
49
|
+
}
|
|
50
|
+
function isGlobalColorToken(token) {
|
|
51
|
+
return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
|
|
52
|
+
}
|
|
53
|
+
function isColorCategoryToken(token, category) {
|
|
54
|
+
if (!category) {
|
|
55
|
+
return Object.keys(colorCategories).some(
|
|
56
|
+
(colorCategory2) => isColorCategoryToken(token, colorCategory2)
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
return R.startsWith(["color", category], token.path);
|
|
60
|
+
}
|
|
61
|
+
var isDigit = (s) => /^\d+$/.test(s);
|
|
62
|
+
function inlineTokens(shouldInline, tokens) {
|
|
63
|
+
const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
|
|
64
|
+
return otherTokens.map((token) => {
|
|
65
|
+
let transformed = getValue(token.original);
|
|
66
|
+
for (const ref of inlineableTokens) {
|
|
67
|
+
const refName = ref.path.join(".");
|
|
68
|
+
if (typeof transformed === "string") {
|
|
69
|
+
transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
|
|
73
|
+
return tokenWithInlinedRefs;
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// src/tokens/process/configs/color.ts
|
|
78
|
+
import * as R6 from "ramda";
|
|
79
|
+
|
|
80
|
+
// src/tokens/process/formats/css/color.ts
|
|
81
|
+
import * as R2 from "ramda";
|
|
82
|
+
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
83
|
+
var prefersColorScheme = (colorScheme2, content) => `
|
|
84
|
+
@media (prefers-color-scheme: ${colorScheme2}) {
|
|
85
|
+
[data-color-scheme="auto"] ${content}
|
|
86
|
+
}
|
|
87
|
+
`;
|
|
88
|
+
var colorScheme = {
|
|
89
|
+
name: "ds/css-colorscheme",
|
|
90
|
+
format: async ({ dictionary, options, platform }) => {
|
|
91
|
+
const { allTokens } = dictionary;
|
|
92
|
+
const { outputReferences, usesDtcg } = options;
|
|
93
|
+
const { selector, colorScheme: colorScheme2, layer } = platform;
|
|
94
|
+
const colorScheme_ = colorScheme2;
|
|
95
|
+
const format = createPropertyFormatter({
|
|
96
|
+
outputReferences,
|
|
97
|
+
dictionary,
|
|
98
|
+
format: "css",
|
|
99
|
+
usesDtcg
|
|
100
|
+
});
|
|
101
|
+
const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
|
|
102
|
+
color-scheme: ${colorScheme_};
|
|
103
|
+
` : "";
|
|
104
|
+
const filteredAllTokens = allTokens.filter(
|
|
105
|
+
R2.allPass([
|
|
106
|
+
R2.anyPass([
|
|
107
|
+
// Include semantic tokens in the output
|
|
108
|
+
isSemanticToken,
|
|
109
|
+
// Include global color tokens
|
|
110
|
+
isGlobalColorToken
|
|
111
|
+
]),
|
|
112
|
+
// Don't include color category tokens -- they are exported separately
|
|
113
|
+
(t) => !isColorCategoryToken(t)
|
|
114
|
+
])
|
|
115
|
+
);
|
|
116
|
+
const formattedTokens = filteredAllTokens.map(format).join("\n");
|
|
117
|
+
const content = `{
|
|
118
|
+
${formattedTokens}
|
|
119
|
+
${colorSchemeProperty}}
|
|
120
|
+
`;
|
|
121
|
+
const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
|
|
122
|
+
const body = R2.isNotNil(layer) ? `@layer ${layer} {
|
|
123
|
+
${selector} ${content} ${autoSelectorContent}
|
|
124
|
+
}
|
|
125
|
+
` : `${selector} ${content} ${autoSelectorContent}
|
|
126
|
+
`;
|
|
127
|
+
return body;
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
var colorCategory = {
|
|
131
|
+
name: "ds/css-colorcategory",
|
|
132
|
+
format: async ({ dictionary, options, platform }) => {
|
|
133
|
+
const { outputReferences, usesDtcg } = options;
|
|
134
|
+
const { selector, layer } = platform;
|
|
135
|
+
const format = R2.compose(
|
|
136
|
+
createPropertyFormatter({
|
|
137
|
+
outputReferences,
|
|
138
|
+
dictionary,
|
|
139
|
+
format: "css",
|
|
140
|
+
usesDtcg
|
|
141
|
+
}),
|
|
142
|
+
(token) => ({
|
|
143
|
+
...token,
|
|
144
|
+
name: token.name.replace(/color-\w+-/, "color-"),
|
|
145
|
+
original: {
|
|
146
|
+
...token.original,
|
|
147
|
+
$value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
|
|
148
|
+
}
|
|
149
|
+
})
|
|
150
|
+
);
|
|
151
|
+
const formattedTokens = dictionary.allTokens.map(format).join("\n");
|
|
152
|
+
const content = `{
|
|
153
|
+
${formattedTokens}
|
|
154
|
+
}
|
|
155
|
+
`;
|
|
156
|
+
const body = R2.isNotNil(layer) ? `@layer ${layer} {
|
|
157
|
+
${selector} ${content}
|
|
158
|
+
}
|
|
159
|
+
` : `${selector} ${content}
|
|
160
|
+
`;
|
|
161
|
+
return body;
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
// src/tokens/process/formats/css/semantic.ts
|
|
166
|
+
import * as R3 from "ramda";
|
|
167
|
+
import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
|
|
168
|
+
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
169
|
+
var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
|
|
170
|
+
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
171
|
+
var isInlineTokens = R3.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
172
|
+
var overrideSizingFormula = (format, token) => {
|
|
173
|
+
const [name, value] = format(token).split(":");
|
|
174
|
+
const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
|
|
175
|
+
const round = `round(down, ${calc}, 1px)`;
|
|
176
|
+
return {
|
|
177
|
+
name,
|
|
178
|
+
round,
|
|
179
|
+
calc
|
|
180
|
+
};
|
|
181
|
+
};
|
|
182
|
+
var formatSizingTokens = (format, tokens) => {
|
|
183
|
+
const { round, calc } = R3.reduce(
|
|
184
|
+
(acc, token) => {
|
|
185
|
+
const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
|
|
186
|
+
return {
|
|
187
|
+
round: [...acc.round, `${name}: ${round2};`],
|
|
188
|
+
calc: [...acc.calc, `${name}: ${calc2};`]
|
|
189
|
+
};
|
|
190
|
+
},
|
|
191
|
+
{ round: [], calc: [] },
|
|
192
|
+
tokens
|
|
193
|
+
);
|
|
194
|
+
return `
|
|
195
|
+
${calc.join("\n")}
|
|
196
|
+
|
|
197
|
+
@supports (width: round(down, .1em, 1px)) {
|
|
198
|
+
${round.join("\n")}
|
|
199
|
+
}`;
|
|
200
|
+
};
|
|
201
|
+
var semantic = {
|
|
202
|
+
name: "ds/css-semantic",
|
|
203
|
+
format: async ({ dictionary, options, platform }) => {
|
|
204
|
+
const { outputReferences, usesDtcg } = options;
|
|
205
|
+
const { selector, layer } = platform;
|
|
206
|
+
const format = createPropertyFormatter2({
|
|
207
|
+
outputReferences,
|
|
208
|
+
dictionary,
|
|
209
|
+
format: "css",
|
|
210
|
+
usesDtcg
|
|
211
|
+
});
|
|
212
|
+
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
213
|
+
const filteredTokens = R3.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
|
|
214
|
+
const [sizingTokens, restTokens] = R3.partition(
|
|
215
|
+
(t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
|
|
216
|
+
filteredTokens
|
|
217
|
+
);
|
|
218
|
+
const formattedTokens = [R3.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
|
|
219
|
+
const content = `{
|
|
220
|
+
${formattedTokens.join("\n")}
|
|
221
|
+
}
|
|
222
|
+
`;
|
|
223
|
+
const body = R3.isNotNil(layer) ? `@layer ${layer} {
|
|
224
|
+
${selector} ${content}
|
|
225
|
+
}
|
|
226
|
+
` : `${selector} ${content}
|
|
227
|
+
`;
|
|
228
|
+
return body;
|
|
229
|
+
}
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
// src/tokens/process/formats/css/typography.ts
|
|
233
|
+
import * as R4 from "ramda";
|
|
234
|
+
import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
|
|
235
|
+
var typographyFontFamilyPredicate = R4.allPass([
|
|
236
|
+
R4.pathSatisfies(R4.includes("typography"), ["path"]),
|
|
237
|
+
R4.pathSatisfies(R4.includes("fontFamily"), ["path"])
|
|
238
|
+
]);
|
|
239
|
+
var typography = {
|
|
240
|
+
name: "ds/css-typography",
|
|
241
|
+
format: async ({ dictionary, options, platform }) => {
|
|
242
|
+
const { outputReferences, usesDtcg } = options;
|
|
243
|
+
const { selector, layer } = platform;
|
|
244
|
+
const format = createPropertyFormatter3({
|
|
245
|
+
outputReferences,
|
|
246
|
+
dictionary,
|
|
247
|
+
format: "css",
|
|
248
|
+
usesDtcg
|
|
249
|
+
});
|
|
250
|
+
const filteredTokens = R4.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
251
|
+
const formattedTokens = R4.pipe(R4.map(format), R4.join("\n"))(filteredTokens);
|
|
252
|
+
const content = selector ? `${selector} {
|
|
253
|
+
${formattedTokens}
|
|
254
|
+
}` : formattedTokens;
|
|
255
|
+
const body = R4.isNotNil(layer) ? `@layer ${layer} {
|
|
256
|
+
${content}
|
|
257
|
+
}` : content;
|
|
258
|
+
return body;
|
|
259
|
+
}
|
|
260
|
+
};
|
|
261
|
+
|
|
262
|
+
// src/tokens/process/formats/css.ts
|
|
263
|
+
var formats = {
|
|
264
|
+
colorScheme,
|
|
265
|
+
colorCategory,
|
|
266
|
+
semantic,
|
|
267
|
+
typography
|
|
268
|
+
};
|
|
269
|
+
|
|
270
|
+
// src/tokens/process/transformers.ts
|
|
271
|
+
import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
|
|
272
|
+
import * as R5 from "ramda";
|
|
273
|
+
var isPx = R5.test(/\b\d+px\b/g);
|
|
274
|
+
var sizeRem = {
|
|
275
|
+
name: "ds/size/toRem",
|
|
276
|
+
type: "value",
|
|
277
|
+
transitive: true,
|
|
278
|
+
filter: (token) => {
|
|
279
|
+
const hasWantedType = typeEquals(["dimension", "fontsize"], token);
|
|
280
|
+
const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
|
|
281
|
+
return hasWantedType && hasWantedPath;
|
|
282
|
+
},
|
|
283
|
+
transform: (token, config) => {
|
|
284
|
+
const value = getValue(token);
|
|
285
|
+
if (isPx(value)) {
|
|
286
|
+
const baseFont = config.basePxFontSize || 16;
|
|
287
|
+
const size = parseInt(value);
|
|
288
|
+
if (size === 0) {
|
|
289
|
+
return "0";
|
|
290
|
+
}
|
|
291
|
+
return `${size / baseFont}rem`;
|
|
292
|
+
}
|
|
293
|
+
return value;
|
|
294
|
+
}
|
|
295
|
+
};
|
|
296
|
+
var typographyName = {
|
|
297
|
+
name: "name/typography",
|
|
298
|
+
type: "name",
|
|
299
|
+
transitive: true,
|
|
300
|
+
// expanded tokens have different type so we match on path instead
|
|
301
|
+
filter: (token) => pathStartsWithOneOf(["typography"], token),
|
|
302
|
+
transform: (token) => {
|
|
303
|
+
return token.name.replace("-typography", "");
|
|
304
|
+
}
|
|
305
|
+
};
|
|
306
|
+
var resolveMath = {
|
|
307
|
+
name: "ds/resolveMath",
|
|
308
|
+
type: "value",
|
|
309
|
+
transitive: true,
|
|
310
|
+
filter: (token) => {
|
|
311
|
+
const isValidValue = ["string", "object"].includes(typeof getValue(token));
|
|
312
|
+
const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
|
|
313
|
+
return isValidValue && isTokenOfInterest;
|
|
314
|
+
},
|
|
315
|
+
transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
|
|
316
|
+
};
|
|
317
|
+
var unitless = {
|
|
318
|
+
name: "ds/unitless",
|
|
319
|
+
type: "value",
|
|
320
|
+
transitive: true,
|
|
321
|
+
filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
|
|
322
|
+
transform: (token) => parseInt(getValue(token))
|
|
323
|
+
};
|
|
324
|
+
|
|
325
|
+
// src/tokens/process/configs/shared.ts
|
|
326
|
+
var prefix = "ds";
|
|
327
|
+
var basePxFontSize = 16;
|
|
328
|
+
var dsTransformers = [
|
|
329
|
+
"name/kebab",
|
|
330
|
+
resolveMath.name,
|
|
331
|
+
"ts/size/px",
|
|
332
|
+
sizeRem.name,
|
|
333
|
+
unitless.name,
|
|
334
|
+
"ts/typography/fontWeight",
|
|
335
|
+
typographyName.name,
|
|
336
|
+
"ts/color/modifiers",
|
|
337
|
+
"ts/color/css/hexrgba",
|
|
338
|
+
"ts/size/lineheight",
|
|
339
|
+
"shadow/css/shorthand"
|
|
340
|
+
];
|
|
341
|
+
|
|
342
|
+
// src/tokens/process/configs/color.ts
|
|
343
|
+
var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) => {
|
|
344
|
+
const selector = `${colorScheme2 === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme2}"]`;
|
|
345
|
+
const layer = `ds.theme.color-scheme.${colorScheme2}`;
|
|
346
|
+
return {
|
|
347
|
+
preprocessors: ["tokens-studio"],
|
|
348
|
+
platforms: {
|
|
349
|
+
css: {
|
|
350
|
+
// custom
|
|
351
|
+
colorScheme: colorScheme2,
|
|
352
|
+
theme,
|
|
353
|
+
selector,
|
|
354
|
+
layer,
|
|
355
|
+
//
|
|
356
|
+
prefix,
|
|
357
|
+
buildPath: `${theme}/`,
|
|
358
|
+
transforms: dsTransformers,
|
|
359
|
+
files: [
|
|
360
|
+
{
|
|
361
|
+
destination: `color-scheme/${colorScheme2}.css`,
|
|
362
|
+
format: formats.colorScheme.name,
|
|
363
|
+
filter: (token) => typeEquals("color", token) && !R6.startsWith(["global"], token.path)
|
|
364
|
+
}
|
|
365
|
+
],
|
|
366
|
+
options: {
|
|
367
|
+
outputReferences: false
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
}
|
|
371
|
+
};
|
|
372
|
+
};
|
|
373
|
+
var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, ...permutation }) => {
|
|
374
|
+
const category = opts.category;
|
|
375
|
+
const color = category === "builtin" ? opts.color : permutation[`${category}-color`];
|
|
376
|
+
if (!color) {
|
|
377
|
+
throw new Error(
|
|
378
|
+
category === "builtin" ? `Missing color for built-in color ${opts.color}` : `Missing color for category ${category}`
|
|
379
|
+
);
|
|
380
|
+
}
|
|
381
|
+
const layer = `ds.theme.color`;
|
|
382
|
+
const isRootColor = color === buildOptions?.defaultColor;
|
|
383
|
+
const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
|
|
384
|
+
const config = {
|
|
385
|
+
preprocessors: ["tokens-studio"],
|
|
386
|
+
platforms: {
|
|
387
|
+
css: {
|
|
388
|
+
// custom
|
|
389
|
+
colorScheme: colorScheme2,
|
|
390
|
+
theme,
|
|
391
|
+
selector,
|
|
392
|
+
layer,
|
|
393
|
+
//
|
|
394
|
+
prefix,
|
|
395
|
+
buildPath: `${theme}/`,
|
|
396
|
+
transforms: dsTransformers,
|
|
397
|
+
files: [
|
|
398
|
+
{
|
|
399
|
+
destination: `color/${color}.css`,
|
|
400
|
+
format: formats.colorCategory.name,
|
|
401
|
+
filter: (token) => category === "builtin" ? isSemanticColorToken(token, color) : isColorCategoryToken(token, category)
|
|
402
|
+
}
|
|
403
|
+
],
|
|
404
|
+
options: {
|
|
405
|
+
outputReferences: true
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
};
|
|
410
|
+
return config;
|
|
411
|
+
};
|
|
412
|
+
|
|
413
|
+
// src/tokens/process/configs/semantic.ts
|
|
414
|
+
import * as R7 from "ramda";
|
|
415
|
+
import { outputReferencesFilter } from "style-dictionary/utils";
|
|
416
|
+
var semanticVariables = ({ theme }) => {
|
|
417
|
+
const selector = `:root`;
|
|
418
|
+
const layer = `ds.theme.semantic`;
|
|
419
|
+
return {
|
|
420
|
+
preprocessors: ["tokens-studio"],
|
|
421
|
+
platforms: {
|
|
422
|
+
css: {
|
|
423
|
+
// custom
|
|
424
|
+
theme,
|
|
425
|
+
basePxFontSize,
|
|
426
|
+
selector,
|
|
427
|
+
layer,
|
|
428
|
+
//
|
|
429
|
+
prefix,
|
|
430
|
+
buildPath: `${theme}/`,
|
|
431
|
+
transforms: dsTransformers,
|
|
432
|
+
files: [
|
|
433
|
+
{
|
|
434
|
+
destination: `semantic.css`,
|
|
435
|
+
format: formats.semantic.name,
|
|
436
|
+
filter: (token) => {
|
|
437
|
+
const isUwantedToken = R7.anyPass([R7.includes("primitives/global")])(token.filePath);
|
|
438
|
+
const isPrivateToken = R7.includes("_", token.path);
|
|
439
|
+
const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
|
|
440
|
+
const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
|
|
441
|
+
const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
|
|
442
|
+
return unwantedTokens;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
],
|
|
446
|
+
options: {
|
|
447
|
+
outputReferences: (token, options) => {
|
|
448
|
+
const include = pathStartsWithOneOf(["border-radius"], token);
|
|
449
|
+
const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
|
|
450
|
+
return (include || isWantedSize) && outputReferencesFilter(token, options);
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
};
|
|
456
|
+
};
|
|
457
|
+
|
|
458
|
+
// src/tokens/process/configs/storefront.ts
|
|
459
|
+
import * as R9 from "ramda";
|
|
460
|
+
import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
|
|
461
|
+
|
|
462
|
+
// src/tokens/process/formats/js-tokens.ts
|
|
463
|
+
import * as R8 from "ramda";
|
|
464
|
+
import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
|
|
465
|
+
var groupByType = R8.groupBy((token) => getType(token));
|
|
466
|
+
var removeUnwatedTokens = R8.pipe(
|
|
467
|
+
R8.reject((token) => isColorCategoryToken(token)),
|
|
468
|
+
R8.reject((token) => R8.any((path) => path.startsWith("_"))(token.path))
|
|
469
|
+
);
|
|
470
|
+
var dissocExtensions = R8.pipe(R8.dissoc("$extensions"), R8.dissocPath(["original", "$extensions"]));
|
|
471
|
+
var removeUnwatedProps = R8.map((token) => dissocExtensions(token));
|
|
472
|
+
var toCssVarName = R8.pipe(R8.split(":"), R8.head, R8.trim);
|
|
473
|
+
var jsTokens = {
|
|
474
|
+
name: "ds/js-tokens",
|
|
475
|
+
format: async ({ dictionary, file, options }) => {
|
|
476
|
+
const { usesDtcg, outputReferences } = options;
|
|
477
|
+
const format = createPropertyFormatter4({
|
|
478
|
+
outputReferences,
|
|
479
|
+
dictionary,
|
|
480
|
+
format: "css",
|
|
481
|
+
usesDtcg
|
|
482
|
+
});
|
|
483
|
+
const formatTokens = R8.map((token) => {
|
|
484
|
+
if (pathStartsWithOneOf(["size", "_size"], token)) {
|
|
485
|
+
const { calc, name } = overrideSizingFormula(format, token);
|
|
486
|
+
return {
|
|
487
|
+
...token,
|
|
488
|
+
name: name.trim(),
|
|
489
|
+
$value: calc.trim()
|
|
490
|
+
};
|
|
491
|
+
}
|
|
492
|
+
return {
|
|
493
|
+
...token,
|
|
494
|
+
name: toCssVarName(format(token))
|
|
495
|
+
};
|
|
496
|
+
});
|
|
497
|
+
const processTokens = R8.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
|
|
498
|
+
const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
|
|
499
|
+
const content = Object.entries(tokens).map(
|
|
500
|
+
([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
|
|
501
|
+
`
|
|
502
|
+
).join("\n");
|
|
503
|
+
return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
|
|
504
|
+
}
|
|
505
|
+
};
|
|
506
|
+
|
|
507
|
+
// src/tokens/process/configs/storefront.ts
|
|
508
|
+
var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
|
|
509
|
+
return {
|
|
510
|
+
preprocessors: ["tokens-studio"],
|
|
511
|
+
platforms: {
|
|
512
|
+
ts: {
|
|
513
|
+
prefix,
|
|
514
|
+
basePxFontSize,
|
|
515
|
+
transforms: dsTransformers,
|
|
516
|
+
buildPath: `${theme}/`,
|
|
517
|
+
files: [
|
|
518
|
+
{
|
|
519
|
+
destination: `${colorScheme2}.ts`,
|
|
520
|
+
format: jsTokens.name,
|
|
521
|
+
filter: (token) => {
|
|
522
|
+
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R9.includes("semantic", token.filePath))
|
|
523
|
+
return false;
|
|
524
|
+
const isSemanticColor = R9.includes("semantic", token.filePath) && typeEquals(["color"], token);
|
|
525
|
+
const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
|
|
526
|
+
return isSemanticColor || wantedTypes;
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
],
|
|
530
|
+
options: {
|
|
531
|
+
outputReferences: (token, options) => {
|
|
532
|
+
const include = pathStartsWithOneOf(["border-radius"], token);
|
|
533
|
+
const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
|
|
534
|
+
return (include || isWantedSize) && outputReferencesFilter2(token, options);
|
|
535
|
+
}
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
}
|
|
539
|
+
};
|
|
540
|
+
};
|
|
541
|
+
|
|
542
|
+
// src/tokens/process/configs/typography.ts
|
|
543
|
+
import { expandTypesMap } from "@tokens-studio/sd-transforms";
|
|
544
|
+
var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
545
|
+
const selector = `${typography2 === "primary" ? ":root, " : ""}[data-typography="${typography2}"]`;
|
|
546
|
+
const layer = `ds.theme.typography.${typography2}`;
|
|
547
|
+
return {
|
|
548
|
+
usesDtcg: true,
|
|
549
|
+
preprocessors: ["tokens-studio"],
|
|
550
|
+
expand: {
|
|
551
|
+
include: ["typography"],
|
|
552
|
+
typesMap: { ...expandTypesMap, typography: { ...expandTypesMap.typography, letterSpacing: "dimension" } }
|
|
553
|
+
},
|
|
554
|
+
platforms: {
|
|
555
|
+
css: {
|
|
556
|
+
prefix,
|
|
557
|
+
typography: typography2,
|
|
558
|
+
selector,
|
|
559
|
+
layer,
|
|
560
|
+
buildPath: `${theme}/`,
|
|
561
|
+
basePxFontSize,
|
|
562
|
+
transforms: [
|
|
563
|
+
"name/kebab",
|
|
564
|
+
"ts/size/px",
|
|
565
|
+
sizeRem.name,
|
|
566
|
+
"ts/size/lineheight",
|
|
567
|
+
"ts/typography/fontWeight",
|
|
568
|
+
typographyName.name
|
|
569
|
+
],
|
|
570
|
+
files: [
|
|
571
|
+
{
|
|
572
|
+
destination: `typography/${typography2}.css`,
|
|
573
|
+
format: formats.typography.name,
|
|
574
|
+
filter: (token) => {
|
|
575
|
+
const included = typeEquals(
|
|
576
|
+
["typography", "fontweight", "fontFamily", "lineHeight", "dimension", "font", "fontsize"],
|
|
577
|
+
token
|
|
578
|
+
);
|
|
579
|
+
if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
|
|
580
|
+
return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token);
|
|
581
|
+
}
|
|
582
|
+
}
|
|
583
|
+
]
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
};
|
|
587
|
+
};
|
|
588
|
+
|
|
589
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
|
|
590
|
+
var BoxShadowTypes;
|
|
591
|
+
(function(BoxShadowTypes2) {
|
|
592
|
+
BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
|
|
593
|
+
BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
|
|
594
|
+
})(BoxShadowTypes || (BoxShadowTypes = {}));
|
|
595
|
+
|
|
596
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
|
|
597
|
+
var ColorModifierTypes;
|
|
598
|
+
(function(ColorModifierTypes2) {
|
|
599
|
+
ColorModifierTypes2["LIGHTEN"] = "lighten";
|
|
600
|
+
ColorModifierTypes2["DARKEN"] = "darken";
|
|
601
|
+
ColorModifierTypes2["MIX"] = "mix";
|
|
602
|
+
ColorModifierTypes2["ALPHA"] = "alpha";
|
|
603
|
+
})(ColorModifierTypes || (ColorModifierTypes = {}));
|
|
604
|
+
|
|
605
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
|
|
606
|
+
var ColorSpaceTypes;
|
|
607
|
+
(function(ColorSpaceTypes2) {
|
|
608
|
+
ColorSpaceTypes2["LCH"] = "lch";
|
|
609
|
+
ColorSpaceTypes2["SRGB"] = "srgb";
|
|
610
|
+
ColorSpaceTypes2["P3"] = "p3";
|
|
611
|
+
ColorSpaceTypes2["HSL"] = "hsl";
|
|
612
|
+
})(ColorSpaceTypes || (ColorSpaceTypes = {}));
|
|
613
|
+
|
|
614
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
|
|
615
|
+
var Properties;
|
|
616
|
+
(function(Properties2) {
|
|
617
|
+
Properties2["sizing"] = "sizing";
|
|
618
|
+
Properties2["height"] = "height";
|
|
619
|
+
Properties2["width"] = "width";
|
|
620
|
+
Properties2["spacing"] = "spacing";
|
|
621
|
+
Properties2["verticalPadding"] = "verticalPadding";
|
|
622
|
+
Properties2["horizontalPadding"] = "horizontalPadding";
|
|
623
|
+
Properties2["paddingTop"] = "paddingTop";
|
|
624
|
+
Properties2["paddingRight"] = "paddingRight";
|
|
625
|
+
Properties2["paddingBottom"] = "paddingBottom";
|
|
626
|
+
Properties2["paddingLeft"] = "paddingLeft";
|
|
627
|
+
Properties2["itemSpacing"] = "itemSpacing";
|
|
628
|
+
Properties2["fill"] = "fill";
|
|
629
|
+
Properties2["backgroundBlur"] = "backgroundBlur";
|
|
630
|
+
Properties2["border"] = "border";
|
|
631
|
+
Properties2["borderTop"] = "borderTop";
|
|
632
|
+
Properties2["borderRight"] = "borderRight";
|
|
633
|
+
Properties2["borderBottom"] = "borderBottom";
|
|
634
|
+
Properties2["borderLeft"] = "borderLeft";
|
|
635
|
+
Properties2["borderColor"] = "borderColor";
|
|
636
|
+
Properties2["borderRadius"] = "borderRadius";
|
|
637
|
+
Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
|
|
638
|
+
Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
|
|
639
|
+
Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
|
|
640
|
+
Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
|
|
641
|
+
Properties2["borderWidth"] = "borderWidth";
|
|
642
|
+
Properties2["borderWidthTop"] = "borderWidthTop";
|
|
643
|
+
Properties2["borderWidthRight"] = "borderWidthRight";
|
|
644
|
+
Properties2["borderWidthBottom"] = "borderWidthBottom";
|
|
645
|
+
Properties2["borderWidthLeft"] = "borderWidthLeft";
|
|
646
|
+
Properties2["boxShadow"] = "boxShadow";
|
|
647
|
+
Properties2["opacity"] = "opacity";
|
|
648
|
+
Properties2["fontFamilies"] = "fontFamilies";
|
|
649
|
+
Properties2["fontWeights"] = "fontWeights";
|
|
650
|
+
Properties2["fontSizes"] = "fontSizes";
|
|
651
|
+
Properties2["lineHeights"] = "lineHeights";
|
|
652
|
+
Properties2["typography"] = "typography";
|
|
653
|
+
Properties2["composition"] = "composition";
|
|
654
|
+
Properties2["letterSpacing"] = "letterSpacing";
|
|
655
|
+
Properties2["paragraphSpacing"] = "paragraphSpacing";
|
|
656
|
+
Properties2["textCase"] = "textCase";
|
|
657
|
+
Properties2["dimension"] = "dimension";
|
|
658
|
+
Properties2["textDecoration"] = "textDecoration";
|
|
659
|
+
Properties2["asset"] = "asset";
|
|
660
|
+
Properties2["tokenValue"] = "tokenValue";
|
|
661
|
+
Properties2["value"] = "value";
|
|
662
|
+
Properties2["tokenName"] = "tokenName";
|
|
663
|
+
Properties2["description"] = "description";
|
|
664
|
+
})(Properties || (Properties = {}));
|
|
665
|
+
|
|
666
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
|
|
667
|
+
var TokenSetStatus;
|
|
668
|
+
(function(TokenSetStatus2) {
|
|
669
|
+
TokenSetStatus2["DISABLED"] = "disabled";
|
|
670
|
+
TokenSetStatus2["SOURCE"] = "source";
|
|
671
|
+
TokenSetStatus2["ENABLED"] = "enabled";
|
|
672
|
+
})(TokenSetStatus || (TokenSetStatus = {}));
|
|
673
|
+
|
|
674
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
|
|
675
|
+
var TokenTypes;
|
|
676
|
+
(function(TokenTypes2) {
|
|
677
|
+
TokenTypes2["OTHER"] = "other";
|
|
678
|
+
TokenTypes2["COLOR"] = "color";
|
|
679
|
+
TokenTypes2["BORDER_RADIUS"] = "borderRadius";
|
|
680
|
+
TokenTypes2["SIZING"] = "sizing";
|
|
681
|
+
TokenTypes2["SPACING"] = "spacing";
|
|
682
|
+
TokenTypes2["TEXT"] = "text";
|
|
683
|
+
TokenTypes2["TYPOGRAPHY"] = "typography";
|
|
684
|
+
TokenTypes2["OPACITY"] = "opacity";
|
|
685
|
+
TokenTypes2["BORDER_WIDTH"] = "borderWidth";
|
|
686
|
+
TokenTypes2["STROKE_STYLE"] = "strokeStyle";
|
|
687
|
+
TokenTypes2["BOX_SHADOW"] = "boxShadow";
|
|
688
|
+
TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
|
|
689
|
+
TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
|
|
690
|
+
TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
|
|
691
|
+
TokenTypes2["FONT_SIZES"] = "fontSizes";
|
|
692
|
+
TokenTypes2["LETTER_SPACING"] = "letterSpacing";
|
|
693
|
+
TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
|
|
694
|
+
TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
|
|
695
|
+
TokenTypes2["TEXT_DECORATION"] = "textDecoration";
|
|
696
|
+
TokenTypes2["TEXT_CASE"] = "textCase";
|
|
697
|
+
TokenTypes2["COMPOSITION"] = "composition";
|
|
698
|
+
TokenTypes2["DIMENSION"] = "dimension";
|
|
699
|
+
TokenTypes2["BORDER"] = "border";
|
|
700
|
+
TokenTypes2["ASSET"] = "asset";
|
|
701
|
+
TokenTypes2["BOOLEAN"] = "boolean";
|
|
702
|
+
TokenTypes2["NUMBER"] = "number";
|
|
703
|
+
})(TokenTypes || (TokenTypes = {}));
|
|
704
|
+
|
|
705
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
|
|
706
|
+
var BorderValues;
|
|
707
|
+
(function(BorderValues2) {
|
|
708
|
+
BorderValues2["BORDER_COLOR"] = "color";
|
|
709
|
+
BorderValues2["BORDER_WIDTH"] = "width";
|
|
710
|
+
BorderValues2["BORDER_STYLE"] = "style";
|
|
711
|
+
})(BorderValues || (BorderValues = {}));
|
|
712
|
+
|
|
713
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
|
|
714
|
+
var StrokeStyleValues;
|
|
715
|
+
(function(StrokeStyleValues2) {
|
|
716
|
+
StrokeStyleValues2["SOLID"] = "solid";
|
|
717
|
+
StrokeStyleValues2["DASHED"] = "dashed";
|
|
718
|
+
StrokeStyleValues2["DOTTED"] = "dotted";
|
|
719
|
+
StrokeStyleValues2["DOUBLE"] = "double";
|
|
720
|
+
StrokeStyleValues2["GROOVE"] = "groove";
|
|
721
|
+
StrokeStyleValues2["RIDGE"] = "ridge";
|
|
722
|
+
StrokeStyleValues2["OUTSET"] = "outset";
|
|
723
|
+
StrokeStyleValues2["INSET"] = "inset";
|
|
724
|
+
})(StrokeStyleValues || (StrokeStyleValues = {}));
|
|
725
|
+
|
|
726
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
|
|
727
|
+
var BoxShadowValues;
|
|
728
|
+
(function(BoxShadowValues2) {
|
|
729
|
+
BoxShadowValues2["TYPE"] = "type";
|
|
730
|
+
BoxShadowValues2["COLOR"] = "color";
|
|
731
|
+
BoxShadowValues2["X"] = "x";
|
|
732
|
+
BoxShadowValues2["Y"] = "y";
|
|
733
|
+
BoxShadowValues2["BLUR"] = "blur";
|
|
734
|
+
BoxShadowValues2["SPREAD"] = "spread";
|
|
735
|
+
BoxShadowValues2["BLEND_MODE"] = "blendMode";
|
|
736
|
+
})(BoxShadowValues || (BoxShadowValues = {}));
|
|
737
|
+
|
|
738
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
|
|
739
|
+
var TypographyValues;
|
|
740
|
+
(function(TypographyValues2) {
|
|
741
|
+
TypographyValues2["FONT_FAMILY"] = "fontFamily";
|
|
742
|
+
TypographyValues2["FONT_WEIGHT"] = "fontWeight";
|
|
743
|
+
TypographyValues2["LINE_HEIGHT"] = "lineHeight";
|
|
744
|
+
TypographyValues2["FONT_SIZE"] = "fontSize";
|
|
745
|
+
TypographyValues2["LETTER_SPACING"] = "letterSpacing";
|
|
746
|
+
TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
|
|
747
|
+
TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
|
|
748
|
+
TypographyValues2["TEXT_DECORATION"] = "textDecoration";
|
|
749
|
+
TypographyValues2["TEXT_CASE"] = "textCase";
|
|
750
|
+
})(TypographyValues || (TypographyValues = {}));
|
|
751
|
+
|
|
752
|
+
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
753
|
+
import chalk from "chalk";
|
|
754
|
+
import { kebabCase } from "change-case";
|
|
755
|
+
import * as R10 from "ramda";
|
|
756
|
+
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
757
|
+
var hasUnknownProps = R10.pipe(R10.values, R10.none(R10.equals("unknown")), R10.not);
|
|
758
|
+
var getCustomColors = (processed$themes, colorGroups) => processed$themes.filter((x) => {
|
|
759
|
+
if (!x.group) {
|
|
760
|
+
return false;
|
|
761
|
+
}
|
|
762
|
+
return colorGroups.includes(x.group);
|
|
763
|
+
}).map((x) => x.name);
|
|
764
|
+
|
|
765
|
+
// src/tokens/process/configs.ts
|
|
766
|
+
void register(StyleDictionary, { withSDBuiltins: false });
|
|
767
|
+
StyleDictionary.registerTransform(sizeRem);
|
|
768
|
+
StyleDictionary.registerTransform(typographyName);
|
|
769
|
+
StyleDictionary.registerTransform(resolveMath);
|
|
770
|
+
StyleDictionary.registerTransform(unitless);
|
|
771
|
+
StyleDictionary.registerFormat(jsTokens);
|
|
772
|
+
for (const format of Object.values(formats)) {
|
|
773
|
+
StyleDictionary.registerFormat(format);
|
|
774
|
+
}
|
|
775
|
+
var configs = {
|
|
776
|
+
colorSchemeVariables,
|
|
777
|
+
mainColorVariables: colorCategoryVariables({ category: "main" }),
|
|
778
|
+
supportColorVariables: colorCategoryVariables({ category: "support" }),
|
|
779
|
+
neutralColorVariables: colorCategoryVariables({ category: "builtin", color: "neutral" }),
|
|
780
|
+
successColorVariables: colorCategoryVariables({ category: "builtin", color: "success" }),
|
|
781
|
+
dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
|
|
782
|
+
warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
|
|
783
|
+
infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
|
|
784
|
+
typographyVariables,
|
|
785
|
+
semanticVariables,
|
|
786
|
+
typescriptTokens
|
|
787
|
+
};
|
|
788
|
+
|
|
789
|
+
// src/tokens/process/platform.ts
|
|
790
|
+
var buildOptions;
|
|
791
|
+
var sd = new StyleDictionary2();
|
|
792
|
+
var buildConfigs = {
|
|
793
|
+
typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
|
|
794
|
+
"color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
|
|
795
|
+
"main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
|
|
796
|
+
"support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
|
|
797
|
+
"neutral-color": {
|
|
798
|
+
getConfig: configs.neutralColorVariables,
|
|
799
|
+
dimensions: ["semantic"],
|
|
800
|
+
log: ({ permutation: { theme } }) => `${theme} - neutral`
|
|
801
|
+
},
|
|
802
|
+
"success-color": {
|
|
803
|
+
getConfig: configs.successColorVariables,
|
|
804
|
+
dimensions: ["semantic"],
|
|
805
|
+
log: ({ permutation: { theme } }) => `${theme} - success`
|
|
806
|
+
},
|
|
807
|
+
"danger-color": {
|
|
808
|
+
getConfig: configs.dangerColorVariables,
|
|
809
|
+
dimensions: ["semantic"],
|
|
810
|
+
log: ({ permutation: { theme } }) => `${theme} - danger`
|
|
811
|
+
},
|
|
812
|
+
"warning-color": {
|
|
813
|
+
getConfig: configs.warningColorVariables,
|
|
814
|
+
dimensions: ["semantic"],
|
|
815
|
+
log: ({ permutation: { theme } }) => `${theme} - warning`
|
|
816
|
+
},
|
|
817
|
+
"info-color": {
|
|
818
|
+
getConfig: configs.infoColorVariables,
|
|
819
|
+
dimensions: ["semantic"],
|
|
820
|
+
log: ({ permutation: { theme } }) => `${theme} - info`
|
|
821
|
+
},
|
|
822
|
+
semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
|
|
823
|
+
// storefront: {
|
|
824
|
+
// name: 'Storefront preview tokens',
|
|
825
|
+
// getConfig: configs.typescriptTokens,
|
|
826
|
+
// dimensions: ['color-scheme'],
|
|
827
|
+
// options: { outPath: path.resolve('../../apps/storefront/tokens') },
|
|
828
|
+
// enabled: () => buildOptions?.preview ?? false,
|
|
829
|
+
// },
|
|
830
|
+
};
|
|
831
|
+
|
|
832
|
+
// src/tokens/process/output/declarations.ts
|
|
833
|
+
var createTypeDeclarationFiles = (processed$themes) => {
|
|
834
|
+
const colorGroups = buildOptions?.colorGroups || [];
|
|
835
|
+
const customColors = getCustomColors(processed$themes, colorGroups);
|
|
836
|
+
const typeDeclaration = createColorTypeDeclaration(customColors);
|
|
837
|
+
return [
|
|
838
|
+
{
|
|
839
|
+
output: typeDeclaration,
|
|
840
|
+
destination: "colors.d.ts"
|
|
841
|
+
}
|
|
842
|
+
];
|
|
843
|
+
};
|
|
844
|
+
function createColorTypeDeclaration(colors) {
|
|
845
|
+
console.log(`
|
|
846
|
+
\u{1F371} Building ${chalk3.green("type declarations")}`);
|
|
847
|
+
const typeDeclaration = `
|
|
848
|
+
import type {} from '@digdir/designsystemet-react/colors';
|
|
849
|
+
|
|
850
|
+
declare module '@digdir/designsystemet-react/colors' {
|
|
851
|
+
export interface MainAndSupportColors {
|
|
852
|
+
${colors.map((color) => ` ${color}: never;`).join("\n")}
|
|
853
|
+
}
|
|
854
|
+
}
|
|
855
|
+
`.trimStart();
|
|
856
|
+
return typeDeclaration;
|
|
857
|
+
}
|
|
858
|
+
export {
|
|
859
|
+
createTypeDeclarationFiles
|
|
860
|
+
};
|