@digdir/designsystemet 1.0.8 → 1.1.0
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.js +20 -19
- package/dist/bin/designsystemet.js +421 -359
- package/dist/src/colors/index.d.ts +2 -2
- package/dist/src/colors/index.d.ts.map +1 -1
- package/dist/src/colors/index.js +143 -143
- package/dist/src/colors/theme.d.ts +1 -2
- package/dist/src/colors/theme.d.ts.map +1 -1
- package/dist/src/config.d.ts.map +1 -1
- package/dist/src/config.js +20 -19
- package/dist/src/index.js +394 -394
- package/dist/src/scripts/createJsonSchema.js +19 -19
- package/dist/src/scripts/update-template.d.ts.map +1 -1
- package/dist/src/tokens/build.d.ts.map +1 -1
- package/dist/src/tokens/build.js +89 -28
- package/dist/src/tokens/create/generators/$designsystemet.js +12 -13
- package/dist/src/tokens/create/generators/color.js +21 -21
- package/dist/src/tokens/create/write.js +13 -14
- package/dist/src/tokens/create.d.ts +1 -0
- package/dist/src/tokens/create.d.ts.map +1 -1
- package/dist/src/tokens/create.js +22 -21
- package/dist/src/tokens/format.d.ts.map +1 -1
- package/dist/src/tokens/format.js +883 -884
- package/dist/src/tokens/index.d.ts +2 -2
- package/dist/src/tokens/index.d.ts.map +1 -1
- package/dist/src/tokens/index.js +271 -271
- package/dist/src/tokens/process/configs/color.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/color.js +5 -5
- package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/semantic.js +5 -5
- package/dist/src/tokens/process/configs/storefront.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/storefront.js +1 -1
- package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/typography.js +5 -5
- package/dist/src/tokens/process/configs.d.ts.map +1 -1
- package/dist/src/tokens/process/configs.js +5 -5
- package/dist/src/tokens/process/formats/css/color.js +2 -2
- package/dist/src/tokens/process/formats/css/semantic.js +2 -2
- package/dist/src/tokens/process/formats/css/typography.js +1 -1
- package/dist/src/tokens/process/formats/css.js +5 -5
- package/dist/src/tokens/process/formats/js-tokens.js +1 -1
- package/dist/src/tokens/process/output/tailwind.d.ts +3 -0
- package/dist/src/tokens/process/output/tailwind.d.ts.map +1 -0
- package/dist/src/tokens/process/output/tailwind.js +59 -0
- package/dist/src/tokens/process/{theme.d.ts → output/theme.d.ts} +2 -2
- package/dist/src/tokens/process/output/theme.d.ts.map +1 -0
- package/dist/src/tokens/process/{theme.js → output/theme.js} +15 -16
- package/dist/src/tokens/process/platform.d.ts +3 -1
- package/dist/src/tokens/process/platform.d.ts.map +1 -1
- package/dist/src/tokens/process/platform.js +5 -5
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +5 -5
- package/dist/src/tokens/types.d.ts +1 -1
- package/dist/src/tokens/types.d.ts.map +1 -1
- package/dist/src/tokens/utils.d.ts.map +1 -1
- package/package.json +12 -13
- package/dist/src/tokens/process/theme.d.ts.map +0 -1
package/dist/src/index.js
CHANGED
|
@@ -1,146 +1,3 @@
|
|
|
1
|
-
// src/colors/utils.ts
|
|
2
|
-
import chroma from "chroma-js";
|
|
3
|
-
import Colorjs from "colorjs.io";
|
|
4
|
-
import { Hsluv } from "hsluv";
|
|
5
|
-
var hexToCssHsl = (hex, valuesOnly = false) => {
|
|
6
|
-
const [h, s, l] = chroma(hex).hsl();
|
|
7
|
-
const hRounded = Math.round(h);
|
|
8
|
-
const sRounded = Math.round(s * 100);
|
|
9
|
-
const lRounded = Math.round(l * 100);
|
|
10
|
-
const cssString = `${hRounded},${sRounded}%,${lRounded}%`;
|
|
11
|
-
return valuesOnly ? cssString : `hsl(${cssString})`;
|
|
12
|
-
};
|
|
13
|
-
var hexToHSL = (hex) => {
|
|
14
|
-
const [h, s, l] = chroma(hex).hsl();
|
|
15
|
-
return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
|
|
16
|
-
};
|
|
17
|
-
var hexToHsluv = (hex) => {
|
|
18
|
-
const conv = new Hsluv();
|
|
19
|
-
conv.hex = hex;
|
|
20
|
-
conv.hexToHsluv();
|
|
21
|
-
return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
|
|
22
|
-
};
|
|
23
|
-
var hslArrToCss = (HSL) => {
|
|
24
|
-
return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
|
|
25
|
-
};
|
|
26
|
-
var HSLToHex = (h, s, l) => {
|
|
27
|
-
return chroma.hsl(h, s / 100, l / 100).hex();
|
|
28
|
-
};
|
|
29
|
-
var hexToRgb = (hex, type = "255") => {
|
|
30
|
-
const rgb = chroma(hex).rgb();
|
|
31
|
-
return {
|
|
32
|
-
r: type === "255" ? rgb[0] : rgb[0] / 255,
|
|
33
|
-
g: type === "255" ? rgb[1] : rgb[1] / 255,
|
|
34
|
-
b: type === "255" ? rgb[2] : rgb[2] / 255
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
var getContrastFromHex = (color1, color2) => {
|
|
38
|
-
const lum1 = chroma(color1).luminance();
|
|
39
|
-
const lum2 = chroma(color2).luminance();
|
|
40
|
-
return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
|
|
41
|
-
};
|
|
42
|
-
var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
|
|
43
|
-
const conv = new Hsluv();
|
|
44
|
-
conv.hex = mainColor;
|
|
45
|
-
conv.hexToHsluv();
|
|
46
|
-
conv.hsluv_l = lightness;
|
|
47
|
-
conv.hsluvToHex();
|
|
48
|
-
const lightMainColor = conv.hex;
|
|
49
|
-
const lum1 = chroma(lightMainColor).luminance();
|
|
50
|
-
const lum2 = chroma(backgroundColor).luminance();
|
|
51
|
-
const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
|
|
52
|
-
return ratio;
|
|
53
|
-
};
|
|
54
|
-
var areColorsContrasting = (color1, color2, type = "aa") => {
|
|
55
|
-
const contrast = getContrastFromHex(color1, color2);
|
|
56
|
-
if (contrast !== null) {
|
|
57
|
-
if (type === "aaa") {
|
|
58
|
-
return contrast >= 7;
|
|
59
|
-
}
|
|
60
|
-
if (type === "aa") {
|
|
61
|
-
return contrast >= 4.5;
|
|
62
|
-
}
|
|
63
|
-
return contrast >= 3;
|
|
64
|
-
}
|
|
65
|
-
return false;
|
|
66
|
-
};
|
|
67
|
-
var isHexColor = (hex) => {
|
|
68
|
-
return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
|
|
69
|
-
};
|
|
70
|
-
var getLuminanceFromLightness = (lightness) => {
|
|
71
|
-
const conv = new Hsluv();
|
|
72
|
-
conv.hsluv_l = lightness;
|
|
73
|
-
conv.hsluvToHex();
|
|
74
|
-
return chroma(conv.hex).luminance();
|
|
75
|
-
};
|
|
76
|
-
var getLuminanceFromColor = (color) => {
|
|
77
|
-
return chroma(color).luminance();
|
|
78
|
-
};
|
|
79
|
-
var getLightnessFromHex = (hex) => {
|
|
80
|
-
const conv = new Hsluv();
|
|
81
|
-
conv.hex = hex;
|
|
82
|
-
conv.hexToHsluv();
|
|
83
|
-
return conv.hsluv_l;
|
|
84
|
-
};
|
|
85
|
-
var canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
|
|
86
|
-
const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
|
|
87
|
-
const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
|
|
88
|
-
const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
|
|
89
|
-
const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
|
|
90
|
-
if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
|
|
91
|
-
return true;
|
|
92
|
-
}
|
|
93
|
-
if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
|
|
94
|
-
return true;
|
|
95
|
-
}
|
|
96
|
-
return false;
|
|
97
|
-
};
|
|
98
|
-
var convertToHex = (color) => {
|
|
99
|
-
if (!color) {
|
|
100
|
-
return "#000000";
|
|
101
|
-
}
|
|
102
|
-
if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
|
|
103
|
-
return color;
|
|
104
|
-
}
|
|
105
|
-
return chroma(color).hex();
|
|
106
|
-
};
|
|
107
|
-
var rgbToHex = (rgb) => {
|
|
108
|
-
return `#${[rgb.r, rgb.g, rgb.b].map((x) => {
|
|
109
|
-
const hex = Math.round(x * 255).toString(16);
|
|
110
|
-
return hex.length === 1 ? "0" + hex : hex;
|
|
111
|
-
}).join("")}`;
|
|
112
|
-
};
|
|
113
|
-
var convertColor = (cssColor, format) => {
|
|
114
|
-
const color = new Colorjs(cssColor);
|
|
115
|
-
switch (format) {
|
|
116
|
-
case "rgb":
|
|
117
|
-
case "rgba":
|
|
118
|
-
return color.toString({
|
|
119
|
-
format: {
|
|
120
|
-
name: format,
|
|
121
|
-
coords: ["<number>[0, 255]", "<number>[0, 255]", "<number>[0, 255]"]
|
|
122
|
-
},
|
|
123
|
-
precision: 3
|
|
124
|
-
});
|
|
125
|
-
case "hex":
|
|
126
|
-
return color.toString({ format, precision: 3 });
|
|
127
|
-
case "hct":
|
|
128
|
-
return color.to(format).toString({
|
|
129
|
-
format: {
|
|
130
|
-
name: format,
|
|
131
|
-
coords: ["<number>", "<number>", "<number>"]
|
|
132
|
-
},
|
|
133
|
-
precision: 3
|
|
134
|
-
});
|
|
135
|
-
default:
|
|
136
|
-
return color.to(format).toString({ precision: 3 });
|
|
137
|
-
}
|
|
138
|
-
};
|
|
139
|
-
|
|
140
|
-
// src/colors/theme.ts
|
|
141
|
-
import chroma2 from "chroma-js";
|
|
142
|
-
import * as R2 from "ramda";
|
|
143
|
-
|
|
144
1
|
// src/colors/colorMetadata.ts
|
|
145
2
|
import * as R from "ramda";
|
|
146
3
|
var baseColors = {
|
|
@@ -397,6 +254,149 @@ var getColorMetadataByNumber = (number) => {
|
|
|
397
254
|
return colorMetadataByNumber[number];
|
|
398
255
|
};
|
|
399
256
|
|
|
257
|
+
// src/colors/theme.ts
|
|
258
|
+
import chroma2 from "chroma-js";
|
|
259
|
+
import * as R2 from "ramda";
|
|
260
|
+
|
|
261
|
+
// src/colors/utils.ts
|
|
262
|
+
import chroma from "chroma-js";
|
|
263
|
+
import Colorjs from "colorjs.io";
|
|
264
|
+
import { Hsluv } from "hsluv";
|
|
265
|
+
var hexToCssHsl = (hex, valuesOnly = false) => {
|
|
266
|
+
const [h, s, l] = chroma(hex).hsl();
|
|
267
|
+
const hRounded = Math.round(h);
|
|
268
|
+
const sRounded = Math.round(s * 100);
|
|
269
|
+
const lRounded = Math.round(l * 100);
|
|
270
|
+
const cssString = `${hRounded},${sRounded}%,${lRounded}%`;
|
|
271
|
+
return valuesOnly ? cssString : `hsl(${cssString})`;
|
|
272
|
+
};
|
|
273
|
+
var hexToHSL = (hex) => {
|
|
274
|
+
const [h, s, l] = chroma(hex).hsl();
|
|
275
|
+
return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
|
|
276
|
+
};
|
|
277
|
+
var hexToHsluv = (hex) => {
|
|
278
|
+
const conv = new Hsluv();
|
|
279
|
+
conv.hex = hex;
|
|
280
|
+
conv.hexToHsluv();
|
|
281
|
+
return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
|
|
282
|
+
};
|
|
283
|
+
var hslArrToCss = (HSL) => {
|
|
284
|
+
return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
|
|
285
|
+
};
|
|
286
|
+
var HSLToHex = (h, s, l) => {
|
|
287
|
+
return chroma.hsl(h, s / 100, l / 100).hex();
|
|
288
|
+
};
|
|
289
|
+
var hexToRgb = (hex, type = "255") => {
|
|
290
|
+
const rgb = chroma(hex).rgb();
|
|
291
|
+
return {
|
|
292
|
+
r: type === "255" ? rgb[0] : rgb[0] / 255,
|
|
293
|
+
g: type === "255" ? rgb[1] : rgb[1] / 255,
|
|
294
|
+
b: type === "255" ? rgb[2] : rgb[2] / 255
|
|
295
|
+
};
|
|
296
|
+
};
|
|
297
|
+
var getContrastFromHex = (color1, color2) => {
|
|
298
|
+
const lum1 = chroma(color1).luminance();
|
|
299
|
+
const lum2 = chroma(color2).luminance();
|
|
300
|
+
return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
|
|
301
|
+
};
|
|
302
|
+
var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
|
|
303
|
+
const conv = new Hsluv();
|
|
304
|
+
conv.hex = mainColor;
|
|
305
|
+
conv.hexToHsluv();
|
|
306
|
+
conv.hsluv_l = lightness;
|
|
307
|
+
conv.hsluvToHex();
|
|
308
|
+
const lightMainColor = conv.hex;
|
|
309
|
+
const lum1 = chroma(lightMainColor).luminance();
|
|
310
|
+
const lum2 = chroma(backgroundColor).luminance();
|
|
311
|
+
const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
|
|
312
|
+
return ratio;
|
|
313
|
+
};
|
|
314
|
+
var areColorsContrasting = (color1, color2, type = "aa") => {
|
|
315
|
+
const contrast = getContrastFromHex(color1, color2);
|
|
316
|
+
if (contrast !== null) {
|
|
317
|
+
if (type === "aaa") {
|
|
318
|
+
return contrast >= 7;
|
|
319
|
+
}
|
|
320
|
+
if (type === "aa") {
|
|
321
|
+
return contrast >= 4.5;
|
|
322
|
+
}
|
|
323
|
+
return contrast >= 3;
|
|
324
|
+
}
|
|
325
|
+
return false;
|
|
326
|
+
};
|
|
327
|
+
var isHexColor = (hex) => {
|
|
328
|
+
return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
|
|
329
|
+
};
|
|
330
|
+
var getLuminanceFromLightness = (lightness) => {
|
|
331
|
+
const conv = new Hsluv();
|
|
332
|
+
conv.hsluv_l = lightness;
|
|
333
|
+
conv.hsluvToHex();
|
|
334
|
+
return chroma(conv.hex).luminance();
|
|
335
|
+
};
|
|
336
|
+
var getLuminanceFromColor = (color) => {
|
|
337
|
+
return chroma(color).luminance();
|
|
338
|
+
};
|
|
339
|
+
var getLightnessFromHex = (hex) => {
|
|
340
|
+
const conv = new Hsluv();
|
|
341
|
+
conv.hex = hex;
|
|
342
|
+
conv.hexToHsluv();
|
|
343
|
+
return conv.hsluv_l;
|
|
344
|
+
};
|
|
345
|
+
var canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
|
|
346
|
+
const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
|
|
347
|
+
const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
|
|
348
|
+
const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
|
|
349
|
+
const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
|
|
350
|
+
if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
|
|
351
|
+
return true;
|
|
352
|
+
}
|
|
353
|
+
if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
|
|
354
|
+
return true;
|
|
355
|
+
}
|
|
356
|
+
return false;
|
|
357
|
+
};
|
|
358
|
+
var convertToHex = (color) => {
|
|
359
|
+
if (!color) {
|
|
360
|
+
return "#000000";
|
|
361
|
+
}
|
|
362
|
+
if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
|
|
363
|
+
return color;
|
|
364
|
+
}
|
|
365
|
+
return chroma(color).hex();
|
|
366
|
+
};
|
|
367
|
+
var rgbToHex = (rgb) => {
|
|
368
|
+
return `#${[rgb.r, rgb.g, rgb.b].map((x) => {
|
|
369
|
+
const hex = Math.round(x * 255).toString(16);
|
|
370
|
+
return hex.length === 1 ? "0" + hex : hex;
|
|
371
|
+
}).join("")}`;
|
|
372
|
+
};
|
|
373
|
+
var convertColor = (cssColor, format) => {
|
|
374
|
+
const color = new Colorjs(cssColor);
|
|
375
|
+
switch (format) {
|
|
376
|
+
case "rgb":
|
|
377
|
+
case "rgba":
|
|
378
|
+
return color.toString({
|
|
379
|
+
format: {
|
|
380
|
+
name: format,
|
|
381
|
+
coords: ["<number>[0, 255]", "<number>[0, 255]", "<number>[0, 255]"]
|
|
382
|
+
},
|
|
383
|
+
precision: 3
|
|
384
|
+
});
|
|
385
|
+
case "hex":
|
|
386
|
+
return color.toString({ format, precision: 3 });
|
|
387
|
+
case "hct":
|
|
388
|
+
return color.to(format).toString({
|
|
389
|
+
format: {
|
|
390
|
+
name: format,
|
|
391
|
+
coords: ["<number>", "<number>", "<number>"]
|
|
392
|
+
},
|
|
393
|
+
precision: 3
|
|
394
|
+
});
|
|
395
|
+
default:
|
|
396
|
+
return color.to(format).toString({ precision: 3 });
|
|
397
|
+
}
|
|
398
|
+
};
|
|
399
|
+
|
|
400
400
|
// src/colors/theme.ts
|
|
401
401
|
var RESERVED_COLORS = [
|
|
402
402
|
"neutral",
|
|
@@ -2186,6 +2186,7 @@ var generateTypography = (themeName, { fontFamily }) => {
|
|
|
2186
2186
|
var cliOptions = {
|
|
2187
2187
|
outDir: "out-dir",
|
|
2188
2188
|
clean: "clean",
|
|
2189
|
+
tailwind: "tailwind",
|
|
2189
2190
|
theme: {
|
|
2190
2191
|
colors: {
|
|
2191
2192
|
main: "main-colors",
|
|
@@ -2562,11 +2563,178 @@ function generateTypographyGroup(themes) {
|
|
|
2562
2563
|
group: "Typography"
|
|
2563
2564
|
}
|
|
2564
2565
|
];
|
|
2565
|
-
}
|
|
2566
|
+
}
|
|
2567
|
+
|
|
2568
|
+
// src/tokens/process/output/theme.ts
|
|
2569
|
+
import chalk from "chalk";
|
|
2570
|
+
import * as R7 from "ramda";
|
|
2571
|
+
|
|
2572
|
+
// package.json
|
|
2573
|
+
var package_default = {
|
|
2574
|
+
name: "@digdir/designsystemet",
|
|
2575
|
+
version: "1.1.0",
|
|
2576
|
+
description: "CLI for Designsystemet",
|
|
2577
|
+
author: "Designsystemet team",
|
|
2578
|
+
engines: {
|
|
2579
|
+
node: ">=22.16.0"
|
|
2580
|
+
},
|
|
2581
|
+
repository: {
|
|
2582
|
+
type: "git",
|
|
2583
|
+
url: "git+https://github.com/digdir/designsystemet.git"
|
|
2584
|
+
},
|
|
2585
|
+
homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
|
|
2586
|
+
license: "MIT",
|
|
2587
|
+
type: "module",
|
|
2588
|
+
main: "./dist/src/index.js",
|
|
2589
|
+
files: [
|
|
2590
|
+
"./dist/**",
|
|
2591
|
+
"./configs/**"
|
|
2592
|
+
],
|
|
2593
|
+
bin: "dist/bin/designsystemet.js",
|
|
2594
|
+
exports: {
|
|
2595
|
+
".": {
|
|
2596
|
+
import: "./dist/src/index.js"
|
|
2597
|
+
},
|
|
2598
|
+
"./color": {
|
|
2599
|
+
import: "./dist/src/colors/index.js"
|
|
2600
|
+
},
|
|
2601
|
+
"./tokens": {
|
|
2602
|
+
import: "./dist/src/tokens/index.js"
|
|
2603
|
+
}
|
|
2604
|
+
},
|
|
2605
|
+
publishConfig: {
|
|
2606
|
+
access: "public"
|
|
2607
|
+
},
|
|
2608
|
+
scripts: {
|
|
2609
|
+
designsystemet: "tsx ./bin/designsystemet.ts",
|
|
2610
|
+
build: "tsup && pnpm build:types && pnpm build:json-schema",
|
|
2611
|
+
"build:types": "tsc --emitDeclarationOnly --declaration",
|
|
2612
|
+
"build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
|
|
2613
|
+
types: "tsc --noEmit",
|
|
2614
|
+
"test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
|
|
2615
|
+
"test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
|
|
2616
|
+
"test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
|
|
2617
|
+
"test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
|
|
2618
|
+
"test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
|
|
2619
|
+
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
2620
|
+
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
2621
|
+
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
2622
|
+
test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
2623
|
+
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
2624
|
+
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
2625
|
+
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
2626
|
+
"update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
|
|
2627
|
+
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
2628
|
+
},
|
|
2629
|
+
dependencies: {
|
|
2630
|
+
"@commander-js/extra-typings": "^14.0.0",
|
|
2631
|
+
"@tokens-studio/sd-transforms": "1.3.0",
|
|
2632
|
+
"apca-w3": "^0.1.9",
|
|
2633
|
+
chalk: "^5.4.1",
|
|
2634
|
+
"change-case": "^5.4.4",
|
|
2635
|
+
"chroma-js": "^3.1.2",
|
|
2636
|
+
"colorjs.io": "^0.6.0-alpha.1",
|
|
2637
|
+
commander: "^13.1.0",
|
|
2638
|
+
"fast-glob": "^3.3.3",
|
|
2639
|
+
hsluv: "^1.0.1",
|
|
2640
|
+
"object-hash": "^3.0.0",
|
|
2641
|
+
postcss: "^8.5.5",
|
|
2642
|
+
ramda: "^0.30.1",
|
|
2643
|
+
"style-dictionary": "^4.4.0",
|
|
2644
|
+
zod: "^3.25.64",
|
|
2645
|
+
"zod-validation-error": "^3.5.0"
|
|
2646
|
+
},
|
|
2647
|
+
devDependencies: {
|
|
2648
|
+
"@tokens-studio/types": "0.5.2",
|
|
2649
|
+
"@types/apca-w3": "^0.1.3",
|
|
2650
|
+
"@types/chroma-js": "^3.1.1",
|
|
2651
|
+
"@types/fs-extra": "^11.0.4",
|
|
2652
|
+
"@types/glob": "^8.1.0",
|
|
2653
|
+
"@types/node": "^22.15.31",
|
|
2654
|
+
"@types/object-hash": "^3.0.6",
|
|
2655
|
+
"@types/ramda": "^0.30.2",
|
|
2656
|
+
"fs-extra": "^11.3.0",
|
|
2657
|
+
tslib: "^2.8.1",
|
|
2658
|
+
tsup: "^8.5.0",
|
|
2659
|
+
tsx: "^4.20.3",
|
|
2660
|
+
typescript: "^5.8.3"
|
|
2661
|
+
}
|
|
2662
|
+
};
|
|
2663
|
+
|
|
2664
|
+
// src/tokens/process/output/theme.ts
|
|
2665
|
+
var defaultFileHeader = `build: v${package_default.version}`;
|
|
2666
|
+
var createThemeCSSFiles = ({
|
|
2667
|
+
processedBuilds,
|
|
2668
|
+
fileHeader: fileHeader2 = defaultFileHeader
|
|
2669
|
+
}) => {
|
|
2670
|
+
const groupedByTheme = {};
|
|
2671
|
+
for (const [_, buildResults] of Object.entries(R7.dissoc("types", processedBuilds))) {
|
|
2672
|
+
for (const buildResult of buildResults) {
|
|
2673
|
+
const themeName = buildResult.permutation.theme;
|
|
2674
|
+
const newOutputs = buildResult.formatted;
|
|
2675
|
+
if (R7.isNotEmpty(newOutputs)) {
|
|
2676
|
+
const currentOutputs = groupedByTheme[themeName] ?? [];
|
|
2677
|
+
groupedByTheme[themeName] = R7.concat(currentOutputs, newOutputs);
|
|
2678
|
+
}
|
|
2679
|
+
}
|
|
2680
|
+
}
|
|
2681
|
+
const sortOrder = [
|
|
2682
|
+
"color-scheme/light",
|
|
2683
|
+
"typography/secondary",
|
|
2684
|
+
"semantic",
|
|
2685
|
+
"color-scheme/dark",
|
|
2686
|
+
"color-scheme/contrast",
|
|
2687
|
+
"typography/primary",
|
|
2688
|
+
"color/"
|
|
2689
|
+
];
|
|
2690
|
+
const sortByDefinedOrder = R7.sortBy((file) => {
|
|
2691
|
+
const filePath = file.destination || "";
|
|
2692
|
+
const sortIndex = sortOrder.findIndex((sortElement) => {
|
|
2693
|
+
if (sortElement.endsWith("/")) {
|
|
2694
|
+
return filePath.includes(sortElement);
|
|
2695
|
+
}
|
|
2696
|
+
return filePath.includes(`${sortElement}.css`);
|
|
2697
|
+
});
|
|
2698
|
+
if (sortIndex === -1) {
|
|
2699
|
+
console.error(
|
|
2700
|
+
chalk.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
|
|
2701
|
+
);
|
|
2702
|
+
console.log(
|
|
2703
|
+
chalk.dim(
|
|
2704
|
+
`
|
|
2705
|
+
The section will currently be added to the end of the entry file, but the exact
|
|
2706
|
+
order may change due to nondeterminism.`.trim()
|
|
2707
|
+
)
|
|
2708
|
+
);
|
|
2709
|
+
return Infinity;
|
|
2710
|
+
}
|
|
2711
|
+
return sortIndex;
|
|
2712
|
+
});
|
|
2713
|
+
const header = `@charset "UTF-8";
|
|
2714
|
+
/*
|
|
2715
|
+
${fileHeader2}
|
|
2716
|
+
*/
|
|
2717
|
+
|
|
2718
|
+
`;
|
|
2719
|
+
const sortAlphabetically = R7.sort(R7.ascend((x) => x.destination || ""));
|
|
2720
|
+
const pickOutputs = R7.map(R7.view(R7.lensProp("output")));
|
|
2721
|
+
const themeCSSFile = R7.pipe(
|
|
2722
|
+
sortAlphabetically,
|
|
2723
|
+
sortByDefinedOrder,
|
|
2724
|
+
pickOutputs,
|
|
2725
|
+
R7.join("\n"),
|
|
2726
|
+
(content) => header + content
|
|
2727
|
+
);
|
|
2728
|
+
const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
|
|
2729
|
+
destination: `${theme}.css`,
|
|
2730
|
+
output: themeCSSFile(files)
|
|
2731
|
+
}));
|
|
2732
|
+
return themeCSSFiles;
|
|
2733
|
+
};
|
|
2566
2734
|
|
|
2567
2735
|
// src/tokens/process/platform.ts
|
|
2568
|
-
import
|
|
2569
|
-
import * as
|
|
2736
|
+
import chalk3 from "chalk";
|
|
2737
|
+
import * as R19 from "ramda";
|
|
2570
2738
|
import StyleDictionary2 from "style-dictionary";
|
|
2571
2739
|
|
|
2572
2740
|
// src/tokens/types.ts
|
|
@@ -2577,30 +2745,30 @@ var colorCategories = {
|
|
|
2577
2745
|
|
|
2578
2746
|
// src/tokens/process/configs.ts
|
|
2579
2747
|
import { register } from "@tokens-studio/sd-transforms";
|
|
2580
|
-
import * as
|
|
2748
|
+
import * as R18 from "ramda";
|
|
2581
2749
|
import StyleDictionary from "style-dictionary";
|
|
2582
2750
|
|
|
2583
2751
|
// src/tokens/utils.ts
|
|
2584
|
-
import * as
|
|
2585
|
-
var mapToLowerCase =
|
|
2586
|
-
var hasAnyTruth =
|
|
2752
|
+
import * as R8 from "ramda";
|
|
2753
|
+
var mapToLowerCase = R8.map(R8.toLower);
|
|
2754
|
+
var hasAnyTruth = R8.any(R8.equals(true));
|
|
2587
2755
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
2588
2756
|
var getValue = (token) => token.$value ?? token.value;
|
|
2589
|
-
var typeEquals =
|
|
2757
|
+
var typeEquals = R8.curry(
|
|
2590
2758
|
(types, token) => {
|
|
2591
|
-
if (
|
|
2759
|
+
if (R8.isNil(token)) {
|
|
2592
2760
|
return false;
|
|
2593
2761
|
}
|
|
2594
|
-
return
|
|
2762
|
+
return R8.includes(R8.toLower(getType(token)), R8.map(R8.toLower, Array.isArray(types) ? types : [types]));
|
|
2595
2763
|
}
|
|
2596
2764
|
);
|
|
2597
|
-
var pathStartsWithOneOf =
|
|
2765
|
+
var pathStartsWithOneOf = R8.curry(
|
|
2598
2766
|
(paths, token) => {
|
|
2599
|
-
if (
|
|
2767
|
+
if (R8.isNil(token)) {
|
|
2600
2768
|
return false;
|
|
2601
2769
|
}
|
|
2602
2770
|
const tokenPath = mapToLowerCase(token.path);
|
|
2603
|
-
const matchPathsStartingWith =
|
|
2771
|
+
const matchPathsStartingWith = R8.map((path) => R8.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
2604
2772
|
return hasAnyTruth(matchPathsStartingWith);
|
|
2605
2773
|
}
|
|
2606
2774
|
);
|
|
@@ -2608,7 +2776,7 @@ function isSemanticToken(token) {
|
|
|
2608
2776
|
return token.filePath.includes("semantic/");
|
|
2609
2777
|
}
|
|
2610
2778
|
function isSemanticColorToken(token, color) {
|
|
2611
|
-
return token.filePath.includes("semantic/") &&
|
|
2779
|
+
return token.filePath.includes("semantic/") && R8.startsWith(["color", color], token.path);
|
|
2612
2780
|
}
|
|
2613
2781
|
function isGlobalColorToken(token) {
|
|
2614
2782
|
return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
|
|
@@ -2619,7 +2787,7 @@ function isColorCategoryToken(token, category) {
|
|
|
2619
2787
|
(colorCategory2) => isColorCategoryToken(token, colorCategory2)
|
|
2620
2788
|
);
|
|
2621
2789
|
}
|
|
2622
|
-
return
|
|
2790
|
+
return R8.startsWith(["color", category], token.path);
|
|
2623
2791
|
}
|
|
2624
2792
|
var isDigit = (s) => /^\d+$/.test(s);
|
|
2625
2793
|
function traverseObj(obj, fn) {
|
|
@@ -2635,7 +2803,7 @@ function traverseObj(obj, fn) {
|
|
|
2635
2803
|
return obj;
|
|
2636
2804
|
}
|
|
2637
2805
|
function inlineTokens(shouldInline, tokens) {
|
|
2638
|
-
const [inlineableTokens, otherTokens] =
|
|
2806
|
+
const [inlineableTokens, otherTokens] = R8.partition(shouldInline, tokens);
|
|
2639
2807
|
return otherTokens.map((token) => {
|
|
2640
2808
|
let transformed = getValue(token.original);
|
|
2641
2809
|
for (const ref of inlineableTokens) {
|
|
@@ -2644,16 +2812,16 @@ function inlineTokens(shouldInline, tokens) {
|
|
|
2644
2812
|
transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
|
|
2645
2813
|
}
|
|
2646
2814
|
}
|
|
2647
|
-
const tokenWithInlinedRefs =
|
|
2815
|
+
const tokenWithInlinedRefs = R8.set(R8.lensPath(["original", "$value"]), transformed, token);
|
|
2648
2816
|
return tokenWithInlinedRefs;
|
|
2649
2817
|
});
|
|
2650
2818
|
}
|
|
2651
2819
|
|
|
2652
2820
|
// src/tokens/process/configs/color.ts
|
|
2653
|
-
import * as
|
|
2821
|
+
import * as R13 from "ramda";
|
|
2654
2822
|
|
|
2655
2823
|
// src/tokens/process/formats/css/color.ts
|
|
2656
|
-
import * as
|
|
2824
|
+
import * as R9 from "ramda";
|
|
2657
2825
|
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
2658
2826
|
var prefersColorScheme = (colorScheme2, content) => `
|
|
2659
2827
|
@media (prefers-color-scheme: ${colorScheme2}) {
|
|
@@ -2662,7 +2830,7 @@ var prefersColorScheme = (colorScheme2, content) => `
|
|
|
2662
2830
|
`;
|
|
2663
2831
|
var colorScheme = {
|
|
2664
2832
|
name: "ds/css-colorscheme",
|
|
2665
|
-
format: async ({ dictionary,
|
|
2833
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2666
2834
|
const { allTokens } = dictionary;
|
|
2667
2835
|
const { outputReferences, usesDtcg } = options;
|
|
2668
2836
|
const { selector, colorScheme: colorScheme2, layer } = platform;
|
|
@@ -2677,8 +2845,8 @@ var colorScheme = {
|
|
|
2677
2845
|
color-scheme: ${colorScheme_};
|
|
2678
2846
|
` : "";
|
|
2679
2847
|
const filteredAllTokens = allTokens.filter(
|
|
2680
|
-
|
|
2681
|
-
|
|
2848
|
+
R9.allPass([
|
|
2849
|
+
R9.anyPass([
|
|
2682
2850
|
// Include semantic tokens in the output
|
|
2683
2851
|
isSemanticToken,
|
|
2684
2852
|
// Include global color tokens
|
|
@@ -2694,7 +2862,7 @@ ${formattedTokens}
|
|
|
2694
2862
|
${colorSchemeProperty}}
|
|
2695
2863
|
`;
|
|
2696
2864
|
const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
|
|
2697
|
-
const body =
|
|
2865
|
+
const body = R9.isNotNil(layer) ? `@layer ${layer} {
|
|
2698
2866
|
${selector} ${content} ${autoSelectorContent}
|
|
2699
2867
|
}
|
|
2700
2868
|
` : `${selector} ${content} ${autoSelectorContent}
|
|
@@ -2704,10 +2872,10 @@ ${selector} ${content} ${autoSelectorContent}
|
|
|
2704
2872
|
};
|
|
2705
2873
|
var colorCategory = {
|
|
2706
2874
|
name: "ds/css-colorcategory",
|
|
2707
|
-
format: async ({ dictionary,
|
|
2875
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2708
2876
|
const { outputReferences, usesDtcg } = options;
|
|
2709
2877
|
const { selector, layer } = platform;
|
|
2710
|
-
const format =
|
|
2878
|
+
const format = R9.compose(
|
|
2711
2879
|
createPropertyFormatter({
|
|
2712
2880
|
outputReferences,
|
|
2713
2881
|
dictionary,
|
|
@@ -2728,7 +2896,7 @@ var colorCategory = {
|
|
|
2728
2896
|
${formattedTokens}
|
|
2729
2897
|
}
|
|
2730
2898
|
`;
|
|
2731
|
-
const body =
|
|
2899
|
+
const body = R9.isNotNil(layer) ? `@layer ${layer} {
|
|
2732
2900
|
${selector} ${content}
|
|
2733
2901
|
}
|
|
2734
2902
|
` : `${selector} ${content}
|
|
@@ -2738,16 +2906,16 @@ ${selector} ${content}
|
|
|
2738
2906
|
};
|
|
2739
2907
|
|
|
2740
2908
|
// src/tokens/process/formats/css/semantic.ts
|
|
2741
|
-
import * as
|
|
2909
|
+
import * as R10 from "ramda";
|
|
2742
2910
|
import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
|
|
2743
2911
|
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
2744
2912
|
var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
|
|
2745
2913
|
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
2746
|
-
var isInlineTokens =
|
|
2914
|
+
var isInlineTokens = R10.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
2747
2915
|
var overrideSizingFormula = (format, token) => {
|
|
2748
2916
|
const [name, value] = format(token).split(":");
|
|
2749
2917
|
const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
|
|
2750
|
-
const round = `round(down, ${calc},
|
|
2918
|
+
const round = `round(down, ${calc}, 1px)`;
|
|
2751
2919
|
return {
|
|
2752
2920
|
name,
|
|
2753
2921
|
round,
|
|
@@ -2755,7 +2923,7 @@ var overrideSizingFormula = (format, token) => {
|
|
|
2755
2923
|
};
|
|
2756
2924
|
};
|
|
2757
2925
|
var formatSizingTokens = (format, tokens) => {
|
|
2758
|
-
const { round, calc } =
|
|
2926
|
+
const { round, calc } = R10.reduce(
|
|
2759
2927
|
(acc, token) => {
|
|
2760
2928
|
const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
|
|
2761
2929
|
return {
|
|
@@ -2775,7 +2943,7 @@ ${round.join("\n")}
|
|
|
2775
2943
|
};
|
|
2776
2944
|
var semantic = {
|
|
2777
2945
|
name: "ds/css-semantic",
|
|
2778
|
-
format: async ({ dictionary,
|
|
2946
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2779
2947
|
const { outputReferences, usesDtcg } = options;
|
|
2780
2948
|
const { selector, layer } = platform;
|
|
2781
2949
|
const format = createPropertyFormatter2({
|
|
@@ -2785,17 +2953,17 @@ var semantic = {
|
|
|
2785
2953
|
usesDtcg
|
|
2786
2954
|
});
|
|
2787
2955
|
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
2788
|
-
const filteredTokens =
|
|
2789
|
-
const [sizingTokens, restTokens] =
|
|
2956
|
+
const filteredTokens = R10.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
|
|
2957
|
+
const [sizingTokens, restTokens] = R10.partition(
|
|
2790
2958
|
(t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
|
|
2791
2959
|
filteredTokens
|
|
2792
2960
|
);
|
|
2793
|
-
const formattedTokens = [
|
|
2961
|
+
const formattedTokens = [R10.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
|
|
2794
2962
|
const content = `{
|
|
2795
2963
|
${formattedTokens.join("\n")}
|
|
2796
2964
|
}
|
|
2797
2965
|
`;
|
|
2798
|
-
const body =
|
|
2966
|
+
const body = R10.isNotNil(layer) ? `@layer ${layer} {
|
|
2799
2967
|
${selector} ${content}
|
|
2800
2968
|
}
|
|
2801
2969
|
` : `${selector} ${content}
|
|
@@ -2805,15 +2973,15 @@ ${selector} ${content}
|
|
|
2805
2973
|
};
|
|
2806
2974
|
|
|
2807
2975
|
// src/tokens/process/formats/css/typography.ts
|
|
2808
|
-
import * as
|
|
2976
|
+
import * as R11 from "ramda";
|
|
2809
2977
|
import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
|
|
2810
|
-
var typographyFontFamilyPredicate =
|
|
2811
|
-
|
|
2812
|
-
|
|
2978
|
+
var typographyFontFamilyPredicate = R11.allPass([
|
|
2979
|
+
R11.pathSatisfies(R11.includes("typography"), ["path"]),
|
|
2980
|
+
R11.pathSatisfies(R11.includes("fontFamily"), ["path"])
|
|
2813
2981
|
]);
|
|
2814
2982
|
var typography = {
|
|
2815
2983
|
name: "ds/css-typography",
|
|
2816
|
-
format: async ({ dictionary,
|
|
2984
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2817
2985
|
const { outputReferences, usesDtcg } = options;
|
|
2818
2986
|
const { selector, layer } = platform;
|
|
2819
2987
|
const format = createPropertyFormatter3({
|
|
@@ -2822,12 +2990,12 @@ var typography = {
|
|
|
2822
2990
|
format: "css",
|
|
2823
2991
|
usesDtcg
|
|
2824
2992
|
});
|
|
2825
|
-
const filteredTokens =
|
|
2826
|
-
const formattedTokens =
|
|
2993
|
+
const filteredTokens = R11.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
2994
|
+
const formattedTokens = R11.pipe(R11.map(format), R11.join("\n"))(filteredTokens);
|
|
2827
2995
|
const content = selector ? `${selector} {
|
|
2828
2996
|
${formattedTokens}
|
|
2829
2997
|
}` : formattedTokens;
|
|
2830
|
-
const body =
|
|
2998
|
+
const body = R11.isNotNil(layer) ? `@layer ${layer} {
|
|
2831
2999
|
${content}
|
|
2832
3000
|
}` : content;
|
|
2833
3001
|
return body;
|
|
@@ -2844,8 +3012,8 @@ var formats = {
|
|
|
2844
3012
|
|
|
2845
3013
|
// src/tokens/process/transformers.ts
|
|
2846
3014
|
import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
|
|
2847
|
-
import * as
|
|
2848
|
-
var isPx =
|
|
3015
|
+
import * as R12 from "ramda";
|
|
3016
|
+
var isPx = R12.test(/\b\d+px\b/g);
|
|
2849
3017
|
var sizeRem = {
|
|
2850
3018
|
name: "ds/size/toRem",
|
|
2851
3019
|
type: "value",
|
|
@@ -2935,7 +3103,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
|
|
|
2935
3103
|
{
|
|
2936
3104
|
destination: `color-scheme/${colorScheme2}.css`,
|
|
2937
3105
|
format: formats.colorScheme.name,
|
|
2938
|
-
filter: (token) => typeEquals("color", token) && !
|
|
3106
|
+
filter: (token) => typeEquals("color", token) && !R13.startsWith(["global"], token.path)
|
|
2939
3107
|
}
|
|
2940
3108
|
],
|
|
2941
3109
|
options: {
|
|
@@ -2986,7 +3154,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
|
|
|
2986
3154
|
};
|
|
2987
3155
|
|
|
2988
3156
|
// src/tokens/process/configs/semantic.ts
|
|
2989
|
-
import * as
|
|
3157
|
+
import * as R14 from "ramda";
|
|
2990
3158
|
import { outputReferencesFilter } from "style-dictionary/utils";
|
|
2991
3159
|
var semanticVariables = ({ theme }) => {
|
|
2992
3160
|
const selector = `:root`;
|
|
@@ -3009,8 +3177,8 @@ var semanticVariables = ({ theme }) => {
|
|
|
3009
3177
|
destination: `semantic.css`,
|
|
3010
3178
|
format: formats.semantic.name,
|
|
3011
3179
|
filter: (token) => {
|
|
3012
|
-
const isUwantedToken =
|
|
3013
|
-
const isPrivateToken =
|
|
3180
|
+
const isUwantedToken = R14.anyPass([R14.includes("primitives/global")])(token.filePath);
|
|
3181
|
+
const isPrivateToken = R14.includes("_", token.path);
|
|
3014
3182
|
const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
|
|
3015
3183
|
const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
|
|
3016
3184
|
const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
|
|
@@ -3031,20 +3199,20 @@ var semanticVariables = ({ theme }) => {
|
|
|
3031
3199
|
};
|
|
3032
3200
|
|
|
3033
3201
|
// src/tokens/process/configs/storefront.ts
|
|
3034
|
-
import * as
|
|
3202
|
+
import * as R16 from "ramda";
|
|
3035
3203
|
import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
|
|
3036
3204
|
|
|
3037
3205
|
// src/tokens/process/formats/js-tokens.ts
|
|
3038
|
-
import * as
|
|
3206
|
+
import * as R15 from "ramda";
|
|
3039
3207
|
import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
|
|
3040
|
-
var groupByType =
|
|
3041
|
-
var removeUnwatedTokens =
|
|
3042
|
-
|
|
3043
|
-
|
|
3208
|
+
var groupByType = R15.groupBy((token) => getType(token));
|
|
3209
|
+
var removeUnwatedTokens = R15.pipe(
|
|
3210
|
+
R15.reject((token) => isColorCategoryToken(token)),
|
|
3211
|
+
R15.reject((token) => R15.any((path) => path.startsWith("_"))(token.path))
|
|
3044
3212
|
);
|
|
3045
|
-
var dissocExtensions =
|
|
3046
|
-
var removeUnwatedProps =
|
|
3047
|
-
var toCssVarName =
|
|
3213
|
+
var dissocExtensions = R15.pipe(R15.dissoc("$extensions"), R15.dissocPath(["original", "$extensions"]));
|
|
3214
|
+
var removeUnwatedProps = R15.map((token) => dissocExtensions(token));
|
|
3215
|
+
var toCssVarName = R15.pipe(R15.split(":"), R15.head, R15.trim);
|
|
3048
3216
|
var jsTokens = {
|
|
3049
3217
|
name: "ds/js-tokens",
|
|
3050
3218
|
format: async ({ dictionary, file, options }) => {
|
|
@@ -3055,7 +3223,7 @@ var jsTokens = {
|
|
|
3055
3223
|
format: "css",
|
|
3056
3224
|
usesDtcg
|
|
3057
3225
|
});
|
|
3058
|
-
const formatTokens2 =
|
|
3226
|
+
const formatTokens2 = R15.map((token) => {
|
|
3059
3227
|
if (pathStartsWithOneOf(["size", "_size"], token)) {
|
|
3060
3228
|
const { calc, name } = overrideSizingFormula(format, token);
|
|
3061
3229
|
return {
|
|
@@ -3069,7 +3237,7 @@ var jsTokens = {
|
|
|
3069
3237
|
name: toCssVarName(format(token))
|
|
3070
3238
|
};
|
|
3071
3239
|
});
|
|
3072
|
-
const processTokens =
|
|
3240
|
+
const processTokens = R15.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
|
|
3073
3241
|
const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
|
|
3074
3242
|
const content = Object.entries(tokens).map(
|
|
3075
3243
|
([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
|
|
@@ -3094,9 +3262,9 @@ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
|
|
|
3094
3262
|
destination: `${colorScheme2}.ts`,
|
|
3095
3263
|
format: jsTokens.name,
|
|
3096
3264
|
filter: (token) => {
|
|
3097
|
-
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !
|
|
3265
|
+
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R16.includes("semantic", token.filePath))
|
|
3098
3266
|
return false;
|
|
3099
|
-
const isSemanticColor =
|
|
3267
|
+
const isSemanticColor = R16.includes("semantic", token.filePath) && typeEquals(["color"], token);
|
|
3100
3268
|
const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
|
|
3101
3269
|
return isSemanticColor || wantedTypes;
|
|
3102
3270
|
}
|
|
@@ -3162,19 +3330,19 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
3162
3330
|
};
|
|
3163
3331
|
|
|
3164
3332
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3165
|
-
import
|
|
3333
|
+
import chalk2 from "chalk";
|
|
3166
3334
|
import { kebabCase } from "change-case";
|
|
3167
|
-
import * as
|
|
3335
|
+
import * as R17 from "ramda";
|
|
3168
3336
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
3169
3337
|
const verboseLogging = buildOptions?.verbose;
|
|
3170
3338
|
const grouped$themes = groupThemes(processed$themes);
|
|
3171
3339
|
const permutations = permutateThemes(grouped$themes);
|
|
3172
3340
|
const ALL_DEPENDENT_ON = ["theme"];
|
|
3173
|
-
const keys2 =
|
|
3341
|
+
const keys2 = R17.keys(grouped$themes);
|
|
3174
3342
|
const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
|
|
3175
3343
|
if (verboseLogging) {
|
|
3176
|
-
console.log(
|
|
3177
|
-
console.log(
|
|
3344
|
+
console.log(chalk2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
|
|
3345
|
+
console.log(chalk2.cyan(` (ignoring permutations for ${nonDependentKeys})`));
|
|
3178
3346
|
}
|
|
3179
3347
|
return permutations.filter((val) => {
|
|
3180
3348
|
const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
|
|
@@ -3210,7 +3378,7 @@ function groupThemes(themes) {
|
|
|
3210
3378
|
}
|
|
3211
3379
|
return groups;
|
|
3212
3380
|
}
|
|
3213
|
-
var hasUnknownProps =
|
|
3381
|
+
var hasUnknownProps = R17.pipe(R17.values, R17.none(R17.equals("unknown")), R17.not);
|
|
3214
3382
|
function permutateThemes(groups) {
|
|
3215
3383
|
const separator = "_";
|
|
3216
3384
|
const permutations = cartesian(Object.values(groups));
|
|
@@ -3220,8 +3388,8 @@ function permutateThemes(groups) {
|
|
|
3220
3388
|
const { group, name, selectedTokenSets } = theme;
|
|
3221
3389
|
let updatedPermutation = acc.permutation;
|
|
3222
3390
|
if (group) {
|
|
3223
|
-
const groupProp =
|
|
3224
|
-
updatedPermutation =
|
|
3391
|
+
const groupProp = R17.lensProp(group);
|
|
3392
|
+
updatedPermutation = R17.set(groupProp, name, updatedPermutation);
|
|
3225
3393
|
}
|
|
3226
3394
|
const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
|
|
3227
3395
|
const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
|
|
@@ -3305,7 +3473,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
|
|
|
3305
3473
|
obj.filePath = tokenSet;
|
|
3306
3474
|
}
|
|
3307
3475
|
});
|
|
3308
|
-
tokenSource.tokens =
|
|
3476
|
+
tokenSource.tokens = R18.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
|
|
3309
3477
|
}
|
|
3310
3478
|
}
|
|
3311
3479
|
} else {
|
|
@@ -3402,35 +3570,35 @@ async function processPlatform(options) {
|
|
|
3402
3570
|
const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
|
|
3403
3571
|
if (UNSAFE_DEFAULT_COLOR) {
|
|
3404
3572
|
console.warn(
|
|
3405
|
-
|
|
3573
|
+
chalk3.yellow(
|
|
3406
3574
|
`
|
|
3407
|
-
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${
|
|
3575
|
+
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk3.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
|
|
3408
3576
|
)
|
|
3409
3577
|
);
|
|
3410
3578
|
}
|
|
3411
3579
|
const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
|
|
3412
3580
|
if (UNSAFE_COLOR_GROUPS.length > 0) {
|
|
3413
3581
|
console.warn(
|
|
3414
|
-
|
|
3582
|
+
chalk3.yellow(
|
|
3415
3583
|
`
|
|
3416
|
-
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${
|
|
3584
|
+
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk3.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
|
|
3417
3585
|
)
|
|
3418
3586
|
);
|
|
3419
3587
|
}
|
|
3420
3588
|
const colorGroups = UNSAFE_COLOR_GROUPS.length > 0 ? UNSAFE_COLOR_GROUPS : [colorCategories.main, colorCategories.support].map((c) => `${c}-color`);
|
|
3421
3589
|
buildOptions = options;
|
|
3422
3590
|
buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
|
|
3423
|
-
const processed$themes = $themes.map(processThemeObject).filter((theme) =>
|
|
3591
|
+
const processed$themes = $themes.map(processThemeObject).filter((theme) => R19.not(theme.group === "size" && theme.name !== "medium"));
|
|
3424
3592
|
const customColors = getCustomColors(processed$themes, colorGroups);
|
|
3425
3593
|
if (!buildOptions.defaultColor) {
|
|
3426
|
-
const firstMainColor =
|
|
3594
|
+
const firstMainColor = R19.head(customColors);
|
|
3427
3595
|
buildOptions.defaultColor = firstMainColor;
|
|
3428
3596
|
}
|
|
3429
3597
|
if (buildOptions.defaultColor) {
|
|
3430
3598
|
console.log(`
|
|
3431
|
-
\u{1F3A8} Using ${
|
|
3599
|
+
\u{1F3A8} Using ${chalk3.blue(buildOptions.defaultColor)} as default color`);
|
|
3432
3600
|
}
|
|
3433
|
-
const buildAndSdConfigs =
|
|
3601
|
+
const buildAndSdConfigs = R19.map((buildConfig) => {
|
|
3434
3602
|
const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
|
|
3435
3603
|
tokensDir,
|
|
3436
3604
|
tokenSets
|
|
@@ -3462,19 +3630,19 @@ async function processPlatform(options) {
|
|
|
3462
3630
|
types: [initResult]
|
|
3463
3631
|
};
|
|
3464
3632
|
try {
|
|
3465
|
-
for (const [buildName, { buildConfig, sdConfigs }] of
|
|
3633
|
+
for (const [buildName, { buildConfig, sdConfigs }] of R19.toPairs(buildAndSdConfigs)) {
|
|
3466
3634
|
if (!(buildConfig.enabled?.() ?? true)) {
|
|
3467
3635
|
continue;
|
|
3468
3636
|
}
|
|
3469
3637
|
if (sdConfigs.length > 0) {
|
|
3470
3638
|
console.log(`
|
|
3471
|
-
\u{1F371} Building ${
|
|
3639
|
+
\u{1F371} Building ${chalk3.green(buildConfig.name ?? buildName)}`);
|
|
3472
3640
|
const results = await Promise.all(
|
|
3473
3641
|
sdConfigs.map(async (sdConfig) => {
|
|
3474
3642
|
const { config, permutation } = sdConfig;
|
|
3475
3643
|
const modes = ["theme", ...buildConfig.dimensions];
|
|
3476
3644
|
const modeMessage = modes.map((x) => permutation[x]).join(" - ");
|
|
3477
|
-
const logMessage =
|
|
3645
|
+
const logMessage = R19.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
|
|
3478
3646
|
console.log(logMessage);
|
|
3479
3647
|
const sdOptions = { cache: true };
|
|
3480
3648
|
const sdExtended = await sd.extend(config);
|
|
@@ -3506,7 +3674,7 @@ async function processPlatform(options) {
|
|
|
3506
3674
|
}
|
|
3507
3675
|
async function createColorTypeDeclaration(colors) {
|
|
3508
3676
|
console.log(`
|
|
3509
|
-
\u{1F371} Building ${
|
|
3677
|
+
\u{1F371} Building ${chalk3.green("type declarations")}`);
|
|
3510
3678
|
const typeDeclaration = `
|
|
3511
3679
|
import type {} from '@digdir/designsystemet-react/colors';
|
|
3512
3680
|
|
|
@@ -3519,174 +3687,6 @@ ${colors.map((color) => ` ${color}: never;`).join("\n")}
|
|
|
3519
3687
|
return typeDeclaration;
|
|
3520
3688
|
}
|
|
3521
3689
|
|
|
3522
|
-
// src/tokens/process/theme.ts
|
|
3523
|
-
import * as R19 from "ramda";
|
|
3524
|
-
import chalk3 from "chalk";
|
|
3525
|
-
|
|
3526
|
-
// package.json
|
|
3527
|
-
var package_default = {
|
|
3528
|
-
name: "@digdir/designsystemet",
|
|
3529
|
-
version: "1.0.8",
|
|
3530
|
-
description: "CLI for Designsystemet",
|
|
3531
|
-
author: "Designsystemet team",
|
|
3532
|
-
engines: {
|
|
3533
|
-
node: ">=22.16.0"
|
|
3534
|
-
},
|
|
3535
|
-
repository: {
|
|
3536
|
-
type: "git",
|
|
3537
|
-
url: "git+https://github.com/digdir/designsystemet.git"
|
|
3538
|
-
},
|
|
3539
|
-
homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
|
|
3540
|
-
license: "MIT",
|
|
3541
|
-
type: "module",
|
|
3542
|
-
main: "./dist/src/index.js",
|
|
3543
|
-
files: [
|
|
3544
|
-
"./dist/**",
|
|
3545
|
-
"./configs/**"
|
|
3546
|
-
],
|
|
3547
|
-
bin: "dist/bin/designsystemet.js",
|
|
3548
|
-
exports: {
|
|
3549
|
-
".": {
|
|
3550
|
-
import: "./dist/src/index.js"
|
|
3551
|
-
},
|
|
3552
|
-
"./color": {
|
|
3553
|
-
import: "./dist/src/colors/index.js"
|
|
3554
|
-
},
|
|
3555
|
-
"./tokens": {
|
|
3556
|
-
import: "./dist/src/tokens/index.js"
|
|
3557
|
-
}
|
|
3558
|
-
},
|
|
3559
|
-
publishConfig: {
|
|
3560
|
-
access: "public"
|
|
3561
|
-
},
|
|
3562
|
-
scripts: {
|
|
3563
|
-
designsystemet: "tsx ./bin/designsystemet.ts",
|
|
3564
|
-
"build:tokens": "pnpm run designsystemet tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
|
|
3565
|
-
"build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
|
|
3566
|
-
build: "tsup && pnpm build:types && pnpm build:json-schema",
|
|
3567
|
-
"build:types": "tsc --emitDeclarationOnly --declaration",
|
|
3568
|
-
"build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
|
|
3569
|
-
types: "tsc --noEmit",
|
|
3570
|
-
"test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
|
|
3571
|
-
"test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
|
|
3572
|
-
"test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
|
|
3573
|
-
"test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
|
|
3574
|
-
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
3575
|
-
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
3576
|
-
test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
3577
|
-
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
3578
|
-
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
3579
|
-
"update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
|
|
3580
|
-
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
3581
|
-
},
|
|
3582
|
-
dependencies: {
|
|
3583
|
-
"@commander-js/extra-typings": "^13.1.0",
|
|
3584
|
-
"@tokens-studio/sd-transforms": "1.3.0",
|
|
3585
|
-
"apca-w3": "^0.1.9",
|
|
3586
|
-
chalk: "^5.4.1",
|
|
3587
|
-
"change-case": "^5.4.4",
|
|
3588
|
-
"chroma-js": "^3.1.2",
|
|
3589
|
-
"colorjs.io": "^0.6.0-alpha.1",
|
|
3590
|
-
commander: "^13.1.0",
|
|
3591
|
-
"fast-glob": "^3.3.3",
|
|
3592
|
-
hsluv: "^1.0.1",
|
|
3593
|
-
"object-hash": "^3.0.0",
|
|
3594
|
-
postcss: "^8.5.3",
|
|
3595
|
-
ramda: "^0.30.1",
|
|
3596
|
-
"style-dictionary": "^4.4.0",
|
|
3597
|
-
zod: "^3.25.30",
|
|
3598
|
-
"zod-validation-error": "^3.4.1"
|
|
3599
|
-
},
|
|
3600
|
-
devDependencies: {
|
|
3601
|
-
"@tokens-studio/types": "0.5.2",
|
|
3602
|
-
"@types/apca-w3": "^0.1.3",
|
|
3603
|
-
"@types/chroma-js": "^3.1.1",
|
|
3604
|
-
"@types/fs-extra": "^11.0.4",
|
|
3605
|
-
"@types/glob": "^8.1.0",
|
|
3606
|
-
"@types/jscodeshift": "^0.12.0",
|
|
3607
|
-
"@types/node": "^22.15.21",
|
|
3608
|
-
"@types/object-hash": "^3.0.6",
|
|
3609
|
-
"@types/ramda": "^0.30.2",
|
|
3610
|
-
"fs-extra": "^11.3.0",
|
|
3611
|
-
"ts-toolbelt": "^9.6.0",
|
|
3612
|
-
tslib: "^2.8.1",
|
|
3613
|
-
tsup: "^8.5.0",
|
|
3614
|
-
tsx: "^4.19.4",
|
|
3615
|
-
typescript: "^5.8.3"
|
|
3616
|
-
}
|
|
3617
|
-
};
|
|
3618
|
-
|
|
3619
|
-
// src/tokens/process/theme.ts
|
|
3620
|
-
var defaultFileHeader = `build: v${package_default.version}`;
|
|
3621
|
-
var createThemeCSSFiles = ({
|
|
3622
|
-
processedBuilds,
|
|
3623
|
-
fileHeader: fileHeader2 = defaultFileHeader
|
|
3624
|
-
}) => {
|
|
3625
|
-
const groupedByTheme = {};
|
|
3626
|
-
for (const [_, buildResults] of Object.entries(R19.dissoc("types", processedBuilds))) {
|
|
3627
|
-
for (const buildResult of buildResults) {
|
|
3628
|
-
const themeName = buildResult.permutation.theme;
|
|
3629
|
-
const newOutputs = buildResult.formatted;
|
|
3630
|
-
if (R19.isNotEmpty(newOutputs)) {
|
|
3631
|
-
const currentOutputs = groupedByTheme[themeName] ?? [];
|
|
3632
|
-
groupedByTheme[themeName] = R19.concat(currentOutputs, newOutputs);
|
|
3633
|
-
}
|
|
3634
|
-
}
|
|
3635
|
-
}
|
|
3636
|
-
const sortOrder = [
|
|
3637
|
-
"color-scheme/light",
|
|
3638
|
-
"typography/secondary",
|
|
3639
|
-
"semantic",
|
|
3640
|
-
"color-scheme/dark",
|
|
3641
|
-
"color-scheme/contrast",
|
|
3642
|
-
"typography/primary",
|
|
3643
|
-
"color/"
|
|
3644
|
-
];
|
|
3645
|
-
const sortByDefinedOrder = R19.sortBy((file) => {
|
|
3646
|
-
const filePath = file.destination || "";
|
|
3647
|
-
const sortIndex = sortOrder.findIndex((sortElement) => {
|
|
3648
|
-
if (sortElement.endsWith("/")) {
|
|
3649
|
-
return filePath.includes(sortElement);
|
|
3650
|
-
}
|
|
3651
|
-
return filePath.includes(`${sortElement}.css`);
|
|
3652
|
-
});
|
|
3653
|
-
if (sortIndex === -1) {
|
|
3654
|
-
console.error(
|
|
3655
|
-
chalk3.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
|
|
3656
|
-
);
|
|
3657
|
-
console.log(
|
|
3658
|
-
chalk3.dim(
|
|
3659
|
-
`
|
|
3660
|
-
The section will currently be added to the end of the entry file, but the exact
|
|
3661
|
-
order may change due to nondeterminism.`.trim()
|
|
3662
|
-
)
|
|
3663
|
-
);
|
|
3664
|
-
return Infinity;
|
|
3665
|
-
}
|
|
3666
|
-
return sortIndex;
|
|
3667
|
-
});
|
|
3668
|
-
const header = `@charset "UTF-8";
|
|
3669
|
-
/*
|
|
3670
|
-
${fileHeader2}
|
|
3671
|
-
*/
|
|
3672
|
-
|
|
3673
|
-
`;
|
|
3674
|
-
const sortAlphabetically = R19.sort(R19.ascend((x) => x.destination || ""));
|
|
3675
|
-
const pickOutputs = R19.map(R19.view(R19.lensProp("output")));
|
|
3676
|
-
const themeCSSFile = R19.pipe(
|
|
3677
|
-
sortAlphabetically,
|
|
3678
|
-
sortByDefinedOrder,
|
|
3679
|
-
pickOutputs,
|
|
3680
|
-
R19.join("\n"),
|
|
3681
|
-
(content) => header + content
|
|
3682
|
-
);
|
|
3683
|
-
const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
|
|
3684
|
-
destination: `${theme}.css`,
|
|
3685
|
-
output: themeCSSFile(files)
|
|
3686
|
-
}));
|
|
3687
|
-
return themeCSSFiles;
|
|
3688
|
-
};
|
|
3689
|
-
|
|
3690
3690
|
// src/tokens/format.ts
|
|
3691
3691
|
var formatTokens = async (options) => {
|
|
3692
3692
|
const processedBuilds = await processPlatform({
|