@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.
Files changed (55) hide show
  1. package/dist/bin/config.js +20 -19
  2. package/dist/bin/designsystemet.js +421 -359
  3. package/dist/src/colors/index.d.ts +2 -2
  4. package/dist/src/colors/index.d.ts.map +1 -1
  5. package/dist/src/colors/index.js +143 -143
  6. package/dist/src/colors/theme.d.ts +1 -2
  7. package/dist/src/colors/theme.d.ts.map +1 -1
  8. package/dist/src/config.d.ts.map +1 -1
  9. package/dist/src/config.js +20 -19
  10. package/dist/src/index.js +394 -394
  11. package/dist/src/scripts/createJsonSchema.js +19 -19
  12. package/dist/src/scripts/update-template.d.ts.map +1 -1
  13. package/dist/src/tokens/build.d.ts.map +1 -1
  14. package/dist/src/tokens/build.js +89 -28
  15. package/dist/src/tokens/create/generators/$designsystemet.js +12 -13
  16. package/dist/src/tokens/create/generators/color.js +21 -21
  17. package/dist/src/tokens/create/write.js +13 -14
  18. package/dist/src/tokens/create.d.ts +1 -0
  19. package/dist/src/tokens/create.d.ts.map +1 -1
  20. package/dist/src/tokens/create.js +22 -21
  21. package/dist/src/tokens/format.d.ts.map +1 -1
  22. package/dist/src/tokens/format.js +883 -884
  23. package/dist/src/tokens/index.d.ts +2 -2
  24. package/dist/src/tokens/index.d.ts.map +1 -1
  25. package/dist/src/tokens/index.js +271 -271
  26. package/dist/src/tokens/process/configs/color.d.ts.map +1 -1
  27. package/dist/src/tokens/process/configs/color.js +5 -5
  28. package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -1
  29. package/dist/src/tokens/process/configs/semantic.js +5 -5
  30. package/dist/src/tokens/process/configs/storefront.d.ts.map +1 -1
  31. package/dist/src/tokens/process/configs/storefront.js +1 -1
  32. package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
  33. package/dist/src/tokens/process/configs/typography.js +5 -5
  34. package/dist/src/tokens/process/configs.d.ts.map +1 -1
  35. package/dist/src/tokens/process/configs.js +5 -5
  36. package/dist/src/tokens/process/formats/css/color.js +2 -2
  37. package/dist/src/tokens/process/formats/css/semantic.js +2 -2
  38. package/dist/src/tokens/process/formats/css/typography.js +1 -1
  39. package/dist/src/tokens/process/formats/css.js +5 -5
  40. package/dist/src/tokens/process/formats/js-tokens.js +1 -1
  41. package/dist/src/tokens/process/output/tailwind.d.ts +3 -0
  42. package/dist/src/tokens/process/output/tailwind.d.ts.map +1 -0
  43. package/dist/src/tokens/process/output/tailwind.js +59 -0
  44. package/dist/src/tokens/process/{theme.d.ts → output/theme.d.ts} +2 -2
  45. package/dist/src/tokens/process/output/theme.d.ts.map +1 -0
  46. package/dist/src/tokens/process/{theme.js → output/theme.js} +15 -16
  47. package/dist/src/tokens/process/platform.d.ts +3 -1
  48. package/dist/src/tokens/process/platform.d.ts.map +1 -1
  49. package/dist/src/tokens/process/platform.js +5 -5
  50. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +5 -5
  51. package/dist/src/tokens/types.d.ts +1 -1
  52. package/dist/src/tokens/types.d.ts.map +1 -1
  53. package/dist/src/tokens/utils.d.ts.map +1 -1
  54. package/package.json +12 -13
  55. 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 chalk2 from "chalk";
2569
- import * as R18 from "ramda";
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 R17 from "ramda";
2748
+ import * as R18 from "ramda";
2581
2749
  import StyleDictionary from "style-dictionary";
2582
2750
 
2583
2751
  // src/tokens/utils.ts
2584
- import * as R7 from "ramda";
2585
- var mapToLowerCase = R7.map(R7.toLower);
2586
- var hasAnyTruth = R7.any(R7.equals(true));
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 = R7.curry(
2757
+ var typeEquals = R8.curry(
2590
2758
  (types, token) => {
2591
- if (R7.isNil(token)) {
2759
+ if (R8.isNil(token)) {
2592
2760
  return false;
2593
2761
  }
2594
- return R7.includes(R7.toLower(getType(token)), R7.map(R7.toLower, Array.isArray(types) ? types : [types]));
2762
+ return R8.includes(R8.toLower(getType(token)), R8.map(R8.toLower, Array.isArray(types) ? types : [types]));
2595
2763
  }
2596
2764
  );
2597
- var pathStartsWithOneOf = R7.curry(
2765
+ var pathStartsWithOneOf = R8.curry(
2598
2766
  (paths, token) => {
2599
- if (R7.isNil(token)) {
2767
+ if (R8.isNil(token)) {
2600
2768
  return false;
2601
2769
  }
2602
2770
  const tokenPath = mapToLowerCase(token.path);
2603
- const matchPathsStartingWith = R7.map((path) => R7.startsWith([path], tokenPath), mapToLowerCase(paths));
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/") && R7.startsWith(["color", color], token.path);
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 R7.startsWith(["color", category], token.path);
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] = R7.partition(shouldInline, tokens);
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 = R7.set(R7.lensPath(["original", "$value"]), transformed, token);
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 R12 from "ramda";
2821
+ import * as R13 from "ramda";
2654
2822
 
2655
2823
  // src/tokens/process/formats/css/color.ts
2656
- import * as R8 from "ramda";
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, file, options, platform }) => {
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
- R8.allPass([
2681
- R8.anyPass([
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 = R8.isNotNil(layer) ? `@layer ${layer} {
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, file, options, platform }) => {
2875
+ format: async ({ dictionary, options, platform }) => {
2708
2876
  const { outputReferences, usesDtcg } = options;
2709
2877
  const { selector, layer } = platform;
2710
- const format = R8.compose(
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 = R8.isNotNil(layer) ? `@layer ${layer} {
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 R9 from "ramda";
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 = R9.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
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}, 0.0625rem)`;
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 } = R9.reduce(
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, file, options, platform }) => {
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 = R9.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
2789
- const [sizingTokens, restTokens] = R9.partition(
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 = [R9.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
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 = R9.isNotNil(layer) ? `@layer ${layer} {
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 R10 from "ramda";
2976
+ import * as R11 from "ramda";
2809
2977
  import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
2810
- var typographyFontFamilyPredicate = R10.allPass([
2811
- R10.pathSatisfies(R10.includes("typography"), ["path"]),
2812
- R10.pathSatisfies(R10.includes("fontFamily"), ["path"])
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, file, options, platform }) => {
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 = R10.reject(typographyFontFamilyPredicate, dictionary.allTokens);
2826
- const formattedTokens = R10.pipe(R10.map(format), R10.join("\n"))(filteredTokens);
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 = R10.isNotNil(layer) ? `@layer ${layer} {
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 R11 from "ramda";
2848
- var isPx = R11.test(/\b\d+px\b/g);
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) && !R12.startsWith(["global"], token.path)
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 R13 from "ramda";
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 = R13.anyPass([R13.includes("primitives/global")])(token.filePath);
3013
- const isPrivateToken = R13.includes("_", token.path);
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 R15 from "ramda";
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 R14 from "ramda";
3206
+ import * as R15 from "ramda";
3039
3207
  import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
3040
- var groupByType = R14.groupBy((token) => getType(token));
3041
- var removeUnwatedTokens = R14.pipe(
3042
- R14.reject((token) => isColorCategoryToken(token)),
3043
- R14.reject((token) => R14.any((path) => path.startsWith("_"))(token.path))
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 = R14.pipe(R14.dissoc("$extensions"), R14.dissocPath(["original", "$extensions"]));
3046
- var removeUnwatedProps = R14.map((token) => dissocExtensions(token));
3047
- var toCssVarName = R14.pipe(R14.split(":"), R14.head, R14.trim);
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 = R14.map((token) => {
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 = R14.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
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) && !R15.includes("semantic", token.filePath))
3265
+ if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R16.includes("semantic", token.filePath))
3098
3266
  return false;
3099
- const isSemanticColor = R15.includes("semantic", token.filePath) && typeEquals(["color"], token);
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 chalk from "chalk";
3333
+ import chalk2 from "chalk";
3166
3334
  import { kebabCase } from "change-case";
3167
- import * as R16 from "ramda";
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 = R16.keys(grouped$themes);
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(chalk.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
3177
- console.log(chalk.cyan(` (ignoring permutations for ${nonDependentKeys})`));
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 = R16.pipe(R16.values, R16.none(R16.equals("unknown")), R16.not);
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 = R16.lensProp(group);
3224
- updatedPermutation = R16.set(groupProp, name, 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 = R17.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
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
- chalk2.yellow(
3573
+ chalk3.yellow(
3406
3574
  `
3407
- \u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk2.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
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
- chalk2.yellow(
3582
+ chalk3.yellow(
3415
3583
  `
3416
- \u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk2.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
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) => R18.not(theme.group === "size" && theme.name !== "medium"));
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 = R18.head(customColors);
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 ${chalk2.blue(buildOptions.defaultColor)} as default color`);
3599
+ \u{1F3A8} Using ${chalk3.blue(buildOptions.defaultColor)} as default color`);
3432
3600
  }
3433
- const buildAndSdConfigs = R18.map((buildConfig) => {
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 R18.toPairs(buildAndSdConfigs)) {
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 ${chalk2.green(buildConfig.name ?? buildName)}`);
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 = R18.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
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 ${chalk2.green("type declarations")}`);
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({