@digdir/designsystemet 1.0.8 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/bin/config.d.ts +3 -3
  2. package/dist/bin/config.d.ts.map +1 -1
  3. package/dist/bin/config.js +45 -45
  4. package/dist/bin/designsystemet.js +827 -748
  5. package/dist/config.schema.json +4 -4
  6. package/dist/src/colors/index.d.ts +2 -2
  7. package/dist/src/colors/index.d.ts.map +1 -1
  8. package/dist/src/colors/index.js +143 -143
  9. package/dist/src/colors/theme.d.ts +1 -2
  10. package/dist/src/colors/theme.d.ts.map +1 -1
  11. package/dist/src/config.d.ts +6 -21
  12. package/dist/src/config.d.ts.map +1 -1
  13. package/dist/src/config.js +43 -40
  14. package/dist/src/index.js +418 -430
  15. package/dist/src/scripts/createJsonSchema.js +23 -24
  16. package/dist/src/scripts/update-template.d.ts.map +1 -1
  17. package/dist/src/tokens/build.d.ts +1 -1
  18. package/dist/src/tokens/build.d.ts.map +1 -1
  19. package/dist/src/tokens/build.js +359 -280
  20. package/dist/src/tokens/create/generators/$designsystemet.js +16 -15
  21. package/dist/src/tokens/create/generators/color.js +21 -21
  22. package/dist/src/tokens/create/write.js +17 -16
  23. package/dist/src/tokens/create.d.ts +1 -0
  24. package/dist/src/tokens/create.d.ts.map +1 -1
  25. package/dist/src/tokens/create.js +22 -21
  26. package/dist/src/tokens/format.d.ts.map +1 -1
  27. package/dist/src/tokens/format.js +931 -944
  28. package/dist/src/tokens/index.d.ts +2 -2
  29. package/dist/src/tokens/index.d.ts.map +1 -1
  30. package/dist/src/tokens/index.js +295 -307
  31. package/dist/src/tokens/process/configs/color.d.ts.map +1 -1
  32. package/dist/src/tokens/process/configs/color.js +5 -5
  33. package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -1
  34. package/dist/src/tokens/process/configs/semantic.js +5 -5
  35. package/dist/src/tokens/process/configs/storefront.d.ts.map +1 -1
  36. package/dist/src/tokens/process/configs/storefront.js +1 -1
  37. package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
  38. package/dist/src/tokens/process/configs/typography.js +5 -5
  39. package/dist/src/tokens/process/configs.d.ts.map +1 -1
  40. package/dist/src/tokens/process/configs.js +5 -5
  41. package/dist/src/tokens/process/formats/css/color.js +2 -2
  42. package/dist/src/tokens/process/formats/css/semantic.js +2 -2
  43. package/dist/src/tokens/process/formats/css/typography.js +1 -1
  44. package/dist/src/tokens/process/formats/css.js +5 -5
  45. package/dist/src/tokens/process/formats/js-tokens.js +1 -1
  46. package/dist/src/tokens/process/output/declarations.d.ts +4 -0
  47. package/dist/src/tokens/process/output/declarations.d.ts.map +1 -0
  48. package/dist/src/tokens/process/output/declarations.js +860 -0
  49. package/dist/src/tokens/process/output/tailwind.d.ts +3 -0
  50. package/dist/src/tokens/process/output/tailwind.d.ts.map +1 -0
  51. package/dist/src/tokens/process/output/tailwind.js +59 -0
  52. package/dist/src/tokens/process/{theme.d.ts → output/theme.d.ts} +2 -2
  53. package/dist/src/tokens/process/output/theme.d.ts.map +1 -0
  54. package/dist/src/tokens/process/{theme.js → output/theme.js} +20 -19
  55. package/dist/src/tokens/process/platform.d.ts +8 -4
  56. package/dist/src/tokens/process/platform.d.ts.map +1 -1
  57. package/dist/src/tokens/process/platform.js +27 -56
  58. package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts +1 -0
  59. package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map +1 -1
  60. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +12 -5
  61. package/dist/src/tokens/types.d.ts +1 -1
  62. package/dist/src/tokens/types.d.ts.map +1 -1
  63. package/dist/src/tokens/utils.d.ts.map +1 -1
  64. package/package.json +16 -15
  65. package/dist/src/tokens/process/theme.d.ts.map +0 -1
@@ -1,36 +1,367 @@
1
1
  // src/tokens/format.ts
2
2
  import * as R20 from "ramda";
3
3
 
4
- // src/tokens/create/defaults.ts
5
- import * as R from "ramda";
4
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
5
+ var BoxShadowTypes;
6
+ (function(BoxShadowTypes2) {
7
+ BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
8
+ BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
9
+ })(BoxShadowTypes || (BoxShadowTypes = {}));
6
10
 
7
- // src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
8
- var globals_default = {
9
- "border-width": {
10
- "1": {
11
- $type: "borderWidth",
12
- $value: "1px"
11
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
12
+ var ColorModifierTypes;
13
+ (function(ColorModifierTypes2) {
14
+ ColorModifierTypes2["LIGHTEN"] = "lighten";
15
+ ColorModifierTypes2["DARKEN"] = "darken";
16
+ ColorModifierTypes2["MIX"] = "mix";
17
+ ColorModifierTypes2["ALPHA"] = "alpha";
18
+ })(ColorModifierTypes || (ColorModifierTypes = {}));
19
+
20
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
21
+ var ColorSpaceTypes;
22
+ (function(ColorSpaceTypes2) {
23
+ ColorSpaceTypes2["LCH"] = "lch";
24
+ ColorSpaceTypes2["SRGB"] = "srgb";
25
+ ColorSpaceTypes2["P3"] = "p3";
26
+ ColorSpaceTypes2["HSL"] = "hsl";
27
+ })(ColorSpaceTypes || (ColorSpaceTypes = {}));
28
+
29
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
30
+ var Properties;
31
+ (function(Properties2) {
32
+ Properties2["sizing"] = "sizing";
33
+ Properties2["height"] = "height";
34
+ Properties2["width"] = "width";
35
+ Properties2["spacing"] = "spacing";
36
+ Properties2["verticalPadding"] = "verticalPadding";
37
+ Properties2["horizontalPadding"] = "horizontalPadding";
38
+ Properties2["paddingTop"] = "paddingTop";
39
+ Properties2["paddingRight"] = "paddingRight";
40
+ Properties2["paddingBottom"] = "paddingBottom";
41
+ Properties2["paddingLeft"] = "paddingLeft";
42
+ Properties2["itemSpacing"] = "itemSpacing";
43
+ Properties2["fill"] = "fill";
44
+ Properties2["backgroundBlur"] = "backgroundBlur";
45
+ Properties2["border"] = "border";
46
+ Properties2["borderTop"] = "borderTop";
47
+ Properties2["borderRight"] = "borderRight";
48
+ Properties2["borderBottom"] = "borderBottom";
49
+ Properties2["borderLeft"] = "borderLeft";
50
+ Properties2["borderColor"] = "borderColor";
51
+ Properties2["borderRadius"] = "borderRadius";
52
+ Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
53
+ Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
54
+ Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
55
+ Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
56
+ Properties2["borderWidth"] = "borderWidth";
57
+ Properties2["borderWidthTop"] = "borderWidthTop";
58
+ Properties2["borderWidthRight"] = "borderWidthRight";
59
+ Properties2["borderWidthBottom"] = "borderWidthBottom";
60
+ Properties2["borderWidthLeft"] = "borderWidthLeft";
61
+ Properties2["boxShadow"] = "boxShadow";
62
+ Properties2["opacity"] = "opacity";
63
+ Properties2["fontFamilies"] = "fontFamilies";
64
+ Properties2["fontWeights"] = "fontWeights";
65
+ Properties2["fontSizes"] = "fontSizes";
66
+ Properties2["lineHeights"] = "lineHeights";
67
+ Properties2["typography"] = "typography";
68
+ Properties2["composition"] = "composition";
69
+ Properties2["letterSpacing"] = "letterSpacing";
70
+ Properties2["paragraphSpacing"] = "paragraphSpacing";
71
+ Properties2["textCase"] = "textCase";
72
+ Properties2["dimension"] = "dimension";
73
+ Properties2["textDecoration"] = "textDecoration";
74
+ Properties2["asset"] = "asset";
75
+ Properties2["tokenValue"] = "tokenValue";
76
+ Properties2["value"] = "value";
77
+ Properties2["tokenName"] = "tokenName";
78
+ Properties2["description"] = "description";
79
+ })(Properties || (Properties = {}));
80
+
81
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
82
+ var TokenSetStatus;
83
+ (function(TokenSetStatus2) {
84
+ TokenSetStatus2["DISABLED"] = "disabled";
85
+ TokenSetStatus2["SOURCE"] = "source";
86
+ TokenSetStatus2["ENABLED"] = "enabled";
87
+ })(TokenSetStatus || (TokenSetStatus = {}));
88
+
89
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
90
+ var TokenTypes;
91
+ (function(TokenTypes2) {
92
+ TokenTypes2["OTHER"] = "other";
93
+ TokenTypes2["COLOR"] = "color";
94
+ TokenTypes2["BORDER_RADIUS"] = "borderRadius";
95
+ TokenTypes2["SIZING"] = "sizing";
96
+ TokenTypes2["SPACING"] = "spacing";
97
+ TokenTypes2["TEXT"] = "text";
98
+ TokenTypes2["TYPOGRAPHY"] = "typography";
99
+ TokenTypes2["OPACITY"] = "opacity";
100
+ TokenTypes2["BORDER_WIDTH"] = "borderWidth";
101
+ TokenTypes2["STROKE_STYLE"] = "strokeStyle";
102
+ TokenTypes2["BOX_SHADOW"] = "boxShadow";
103
+ TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
104
+ TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
105
+ TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
106
+ TokenTypes2["FONT_SIZES"] = "fontSizes";
107
+ TokenTypes2["LETTER_SPACING"] = "letterSpacing";
108
+ TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
109
+ TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
110
+ TokenTypes2["TEXT_DECORATION"] = "textDecoration";
111
+ TokenTypes2["TEXT_CASE"] = "textCase";
112
+ TokenTypes2["COMPOSITION"] = "composition";
113
+ TokenTypes2["DIMENSION"] = "dimension";
114
+ TokenTypes2["BORDER"] = "border";
115
+ TokenTypes2["ASSET"] = "asset";
116
+ TokenTypes2["BOOLEAN"] = "boolean";
117
+ TokenTypes2["NUMBER"] = "number";
118
+ })(TokenTypes || (TokenTypes = {}));
119
+
120
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
121
+ var BorderValues;
122
+ (function(BorderValues2) {
123
+ BorderValues2["BORDER_COLOR"] = "color";
124
+ BorderValues2["BORDER_WIDTH"] = "width";
125
+ BorderValues2["BORDER_STYLE"] = "style";
126
+ })(BorderValues || (BorderValues = {}));
127
+
128
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
129
+ var StrokeStyleValues;
130
+ (function(StrokeStyleValues2) {
131
+ StrokeStyleValues2["SOLID"] = "solid";
132
+ StrokeStyleValues2["DASHED"] = "dashed";
133
+ StrokeStyleValues2["DOTTED"] = "dotted";
134
+ StrokeStyleValues2["DOUBLE"] = "double";
135
+ StrokeStyleValues2["GROOVE"] = "groove";
136
+ StrokeStyleValues2["RIDGE"] = "ridge";
137
+ StrokeStyleValues2["OUTSET"] = "outset";
138
+ StrokeStyleValues2["INSET"] = "inset";
139
+ })(StrokeStyleValues || (StrokeStyleValues = {}));
140
+
141
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
142
+ var BoxShadowValues;
143
+ (function(BoxShadowValues2) {
144
+ BoxShadowValues2["TYPE"] = "type";
145
+ BoxShadowValues2["COLOR"] = "color";
146
+ BoxShadowValues2["X"] = "x";
147
+ BoxShadowValues2["Y"] = "y";
148
+ BoxShadowValues2["BLUR"] = "blur";
149
+ BoxShadowValues2["SPREAD"] = "spread";
150
+ BoxShadowValues2["BLEND_MODE"] = "blendMode";
151
+ })(BoxShadowValues || (BoxShadowValues = {}));
152
+
153
+ // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
154
+ var TypographyValues;
155
+ (function(TypographyValues2) {
156
+ TypographyValues2["FONT_FAMILY"] = "fontFamily";
157
+ TypographyValues2["FONT_WEIGHT"] = "fontWeight";
158
+ TypographyValues2["LINE_HEIGHT"] = "lineHeight";
159
+ TypographyValues2["FONT_SIZE"] = "fontSize";
160
+ TypographyValues2["LETTER_SPACING"] = "letterSpacing";
161
+ TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
162
+ TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
163
+ TypographyValues2["TEXT_DECORATION"] = "textDecoration";
164
+ TypographyValues2["TEXT_CASE"] = "textCase";
165
+ })(TypographyValues || (TypographyValues = {}));
166
+
167
+ // src/tokens/create/generators/$themes.ts
168
+ var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
169
+ async function createHash(text, algo = "SHA-1") {
170
+ const crypto = globalThis.crypto;
171
+ return Array.from(
172
+ new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
173
+ (byte) => byte.toString(16).padStart(2, "0")
174
+ ).join("");
175
+ }
176
+ async function generate$Themes(colorSchemes, themes, colors) {
177
+ return [
178
+ ...generateSizeGroup(),
179
+ ...await generateThemesGroup(themes),
180
+ ...generateTypographyGroup(themes),
181
+ ...generateColorSchemesGroup(colorSchemes, themes),
182
+ generateSemanticGroup(),
183
+ ...await generateColorGroup("main", colors),
184
+ ...await generateColorGroup("support", colors)
185
+ ];
186
+ }
187
+ function generateSizeGroup() {
188
+ return [
189
+ {
190
+ id: "8b2c8cc86611a34b135cb22948666779361fd729",
191
+ name: "medium",
192
+ $figmaStyleReferences: {},
193
+ selectedTokenSets: {
194
+ "primitives/modes/size/medium": TokenSetStatus.SOURCE,
195
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
196
+ "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
197
+ },
198
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
199
+ $figmaModeId: "41630:1",
200
+ group: "Size"
13
201
  },
14
- "3": {
15
- $type: "borderWidth",
16
- $value: "3px"
202
+ {
203
+ id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
204
+ name: "large",
205
+ $figmaStyleReferences: {},
206
+ selectedTokenSets: {
207
+ "primitives/modes/size/large": TokenSetStatus.SOURCE,
208
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
209
+ "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
210
+ },
211
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
212
+ $figmaModeId: "41630:2",
213
+ group: "Size"
214
+ },
215
+ {
216
+ id: "fb11567729c298ca37c9da4e3a27716a23480824",
217
+ name: "small",
218
+ $figmaStyleReferences: {},
219
+ selectedTokenSets: {
220
+ "primitives/modes/size/small": TokenSetStatus.SOURCE,
221
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
222
+ "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
223
+ },
224
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
225
+ $figmaModeId: "41630:3",
226
+ group: "Size"
17
227
  }
228
+ ];
229
+ }
230
+ var colorSchemeDefaults = {
231
+ light: {
232
+ name: "Light",
233
+ selectedTokenSets: {},
234
+ id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
235
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
236
+ $figmaModeId: "34811:0"
18
237
  },
19
- shadow: {
20
- "100": {
21
- $type: "boxShadow",
22
- $value: [
23
- {
24
- color: "rgba(0,0,0,0.16)",
25
- x: "0",
26
- y: "0",
27
- blur: "1",
28
- spread: "0"
29
- },
30
- {
31
- x: "0",
32
- y: "1",
33
- blur: "2",
238
+ dark: {
239
+ name: "Dark",
240
+ selectedTokenSets: {},
241
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
242
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
243
+ $figmaModeId: "34811:1"
244
+ },
245
+ contrast: {
246
+ name: "Contrast",
247
+ selectedTokenSets: {},
248
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
249
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
250
+ $figmaModeId: "34811:2"
251
+ }
252
+ };
253
+ function generateColorSchemesGroup(colorSchemes, themes) {
254
+ return colorSchemes.map(
255
+ (scheme) => ({
256
+ ...colorSchemeDefaults[scheme],
257
+ selectedTokenSets: Object.fromEntries([
258
+ [`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
259
+ ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
260
+ ]),
261
+ group: "Color scheme"
262
+ })
263
+ );
264
+ }
265
+ async function generateThemesGroup(themes) {
266
+ return Promise.all(
267
+ themes.map(
268
+ async (theme, index) => ({
269
+ id: await createHash(theme),
270
+ $figmaCollectionId: "VariableCollectionId:36528:61712",
271
+ $figmaModeId: `40960:${index + 6}`,
272
+ // Start on 6 in Token Studio and Community file for some reason
273
+ name: theme,
274
+ selectedTokenSets: {
275
+ [`themes/${theme}`]: TokenSetStatus.ENABLED
276
+ },
277
+ group: "Theme"
278
+ })
279
+ )
280
+ );
281
+ }
282
+ function generateSemanticGroup() {
283
+ return {
284
+ id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
285
+ name: "Semantic",
286
+ selectedTokenSets: {
287
+ "semantic/style": TokenSetStatus.ENABLED,
288
+ "semantic/color": TokenSetStatus.ENABLED,
289
+ "primitives/globals": TokenSetStatus.SOURCE
290
+ },
291
+ $figmaCollectionId: "VariableCollectionId:34811:5976",
292
+ $figmaModeId: "34811:5",
293
+ group: "Semantic"
294
+ };
295
+ }
296
+ async function generateColorGroup(group, colors) {
297
+ return Promise.all(
298
+ Object.entries(colors[group]).map(
299
+ async ([color]) => ({
300
+ id: await createHash(`${group}-${color}`),
301
+ name: color,
302
+ selectedTokenSets: {
303
+ [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
304
+ },
305
+ group: `${capitalize(group)} color`
306
+ })
307
+ )
308
+ );
309
+ }
310
+ function generateTypographyGroup(themes) {
311
+ return [
312
+ {
313
+ id: "368d753fcac4455f289500eaa42e70dc0a03522f",
314
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
315
+ $figmaModeId: "36248:2",
316
+ name: "Primary",
317
+ selectedTokenSets: Object.fromEntries(
318
+ themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
319
+ ),
320
+ group: "Typography"
321
+ },
322
+ {
323
+ id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
324
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
325
+ $figmaModeId: "36248:3",
326
+ name: "Secondary",
327
+ selectedTokenSets: Object.fromEntries(
328
+ themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
329
+ ),
330
+ group: "Typography"
331
+ }
332
+ ];
333
+ }
334
+
335
+ // src/tokens/create/defaults.ts
336
+ import * as R from "ramda";
337
+
338
+ // src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
339
+ var globals_default = {
340
+ "border-width": {
341
+ "1": {
342
+ $type: "borderWidth",
343
+ $value: "1px"
344
+ },
345
+ "3": {
346
+ $type: "borderWidth",
347
+ $value: "3px"
348
+ }
349
+ },
350
+ shadow: {
351
+ "100": {
352
+ $type: "boxShadow",
353
+ $value: [
354
+ {
355
+ color: "rgba(0,0,0,0.16)",
356
+ x: "0",
357
+ y: "0",
358
+ blur: "1",
359
+ spread: "0"
360
+ },
361
+ {
362
+ x: "0",
363
+ y: "1",
364
+ blur: "2",
34
365
  spread: "0",
35
366
  color: "rgba(0,0,0,0.12)"
36
367
  }
@@ -995,27 +1326,6 @@ var getDefaultToken = (tokenPath) => {
995
1326
  // src/tokens/create/generators/color.ts
996
1327
  import * as R4 from "ramda";
997
1328
 
998
- // src/colors/utils.ts
999
- import chroma from "chroma-js";
1000
- import Colorjs from "colorjs.io";
1001
- import { Hsluv } from "hsluv";
1002
- var getLuminanceFromLightness = (lightness) => {
1003
- const conv = new Hsluv();
1004
- conv.hsluv_l = lightness;
1005
- conv.hsluvToHex();
1006
- return chroma(conv.hex).luminance();
1007
- };
1008
- var getLightnessFromHex = (hex) => {
1009
- const conv = new Hsluv();
1010
- conv.hex = hex;
1011
- conv.hexToHsluv();
1012
- return conv.hsluv_l;
1013
- };
1014
-
1015
- // src/colors/theme.ts
1016
- import chroma2 from "chroma-js";
1017
- import * as R3 from "ramda";
1018
-
1019
1329
  // src/colors/colorMetadata.ts
1020
1330
  import * as R2 from "ramda";
1021
1331
  var baseColors = {
@@ -1269,6 +1579,27 @@ var colorMetadata = {
1269
1579
  };
1270
1580
  var colorMetadataByNumber = R2.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
1271
1581
 
1582
+ // src/colors/theme.ts
1583
+ import chroma2 from "chroma-js";
1584
+ import * as R3 from "ramda";
1585
+
1586
+ // src/colors/utils.ts
1587
+ import chroma from "chroma-js";
1588
+ import Colorjs from "colorjs.io";
1589
+ import { Hsluv } from "hsluv";
1590
+ var getLuminanceFromLightness = (lightness) => {
1591
+ const conv = new Hsluv();
1592
+ conv.hsluv_l = lightness;
1593
+ conv.hsluvToHex();
1594
+ return chroma(conv.hex).luminance();
1595
+ };
1596
+ var getLightnessFromHex = (hex) => {
1597
+ const conv = new Hsluv();
1598
+ conv.hex = hex;
1599
+ conv.hexToHsluv();
1600
+ return conv.hsluv_l;
1601
+ };
1602
+
1272
1603
  // src/colors/theme.ts
1273
1604
  var generateColorScale = (color, colorScheme2) => {
1274
1605
  let interpolationColor = color;
@@ -1776,639 +2107,477 @@ var color_template_default2 = {
1776
2107
  "base-hover": {
1777
2108
  $type: "color",
1778
2109
  $value: "{color.<color>.base-hover}"
1779
- },
1780
- "base-active": {
1781
- $type: "color",
1782
- $value: "{color.<color>.base-active}"
1783
- },
1784
- "base-contrast-subtle": {
1785
- $type: "color",
1786
- $value: "{color.<color>.base-contrast-subtle}"
1787
- },
1788
- "base-contrast-default": {
1789
- $type: "color",
1790
- $value: "{color.<color>.base-contrast-default}"
1791
- }
1792
- };
1793
-
1794
- // src/tokens/create/generators/semantic.ts
1795
- var generateSemantic = (colors) => {
1796
- const mainColorNames = Object.keys(colors.main);
1797
- const supportColorNames = Object.keys(colors.support);
1798
- const modes = {
1799
- "main-color": {},
1800
- "support-color": {}
1801
- };
1802
- const categories = [
1803
- ["main-color", mainColorNames],
1804
- ["support-color", supportColorNames]
1805
- ];
1806
- for (const [colorCategory2, colorNames] of categories) {
1807
- for (const colorName of colorNames) {
1808
- const category = colorCategory2.replace("-color", "");
1809
- const customColorTokens = {
1810
- color: {
1811
- [category]: JSON.parse(
1812
- JSON.stringify(
1813
- color_template_default2,
1814
- (key, value) => {
1815
- if (key === "$value") {
1816
- return value.replace("<color>", colorName);
1817
- }
1818
- return value;
1819
- },
1820
- 2
1821
- )
1822
- )
1823
- }
1824
- };
1825
- modes[colorCategory2][colorName] = customColorTokens;
1826
- }
1827
- }
1828
- const customColors = [...mainColorNames, "neutral", ...supportColorNames];
1829
- const semanticColorTokens = customColors.map(
1830
- (colorName) => [
1831
- colorName,
1832
- R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
1833
- ]
1834
- );
1835
- const color = {
1836
- ...color_base_template_default,
1837
- color: {
1838
- ...Object.fromEntries(semanticColorTokens),
1839
- ...color_base_template_default.color
1840
- }
1841
- };
1842
- return {
1843
- modes,
1844
- color
1845
- };
1846
- };
1847
-
1848
- // src/tokens/create/generators/theme.ts
1849
- import * as R6 from "ramda";
1850
-
1851
- // src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
1852
- var theme_base_template_default = {
1853
- color: {},
1854
- "font-family": {
1855
- $type: "fontFamilies",
1856
- $value: "{<theme>.font-family}"
1857
- },
1858
- "font-weight": {
1859
- medium: {
1860
- $type: "fontWeights",
1861
- $value: "{<theme>.font-weight.medium}"
1862
- },
1863
- semibold: {
1864
- $type: "fontWeights",
1865
- $value: "{<theme>.font-weight.semibold}"
1866
- },
1867
- regular: {
1868
- $type: "fontWeights",
1869
- $value: "{<theme>.font-weight.regular}"
1870
- }
1871
- },
1872
- "border-radius": {
1873
- "1": {
1874
- $type: "dimension",
1875
- $value: "min({border-radius.base}*0.5,{border-radius.scale})"
1876
- },
1877
- "2": {
1878
- $type: "dimension",
1879
- $value: "min({border-radius.base},{border-radius.scale}*2)"
1880
- },
1881
- "3": {
1882
- $type: "dimension",
1883
- $value: "min({border-radius.base}*2,{border-radius.scale}*5)"
1884
- },
1885
- "4": {
1886
- $type: "dimension",
1887
- $value: "min({border-radius.base}*3,{border-radius.scale}*7)"
1888
- },
1889
- "5": {
1890
- $type: "dimension",
1891
- $value: "{border-radius.base}"
1892
- },
1893
- "6": {
1894
- $type: "dimension",
1895
- $value: "9999"
1896
- },
1897
- base: {
1898
- $type: "dimension",
1899
- $value: "4"
1900
- },
1901
- scale: {
1902
- $type: "dimension",
1903
- $value: "4"
1904
- }
1905
- }
1906
- };
1907
-
1908
- // src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
1909
- var theme_template_default = {
1910
- "1": {
1911
- $type: "color",
1912
- $value: "{<theme>.<color>.1}"
1913
- },
1914
- "2": {
1915
- $type: "color",
1916
- $value: "{<theme>.<color>.2}"
1917
- },
1918
- "3": {
1919
- $type: "color",
1920
- $value: "{<theme>.<color>.3}"
1921
- },
1922
- "4": {
1923
- $type: "color",
1924
- $value: "{<theme>.<color>.4}"
1925
- },
1926
- "5": {
1927
- $type: "color",
1928
- $value: "{<theme>.<color>.5}"
1929
- },
1930
- "6": {
1931
- $type: "color",
1932
- $value: "{<theme>.<color>.6}"
1933
- },
1934
- "7": {
1935
- $type: "color",
1936
- $value: "{<theme>.<color>.7}"
1937
- },
1938
- "8": {
1939
- $type: "color",
1940
- $value: "{<theme>.<color>.8}"
1941
- },
1942
- "9": {
1943
- $type: "color",
1944
- $value: "{<theme>.<color>.9}"
1945
- },
1946
- "10": {
1947
- $type: "color",
1948
- $value: "{<theme>.<color>.10}"
1949
- },
1950
- "11": {
1951
- $type: "color",
1952
- $value: "{<theme>.<color>.11}"
1953
- },
1954
- "12": {
1955
- $type: "color",
1956
- $value: "{<theme>.<color>.12}"
1957
- },
1958
- "13": {
1959
- $type: "color",
1960
- $value: "{<theme>.<color>.13}"
1961
- },
1962
- "14": {
1963
- $type: "color",
1964
- $value: "{<theme>.<color>.14}"
1965
- },
1966
- "15": {
1967
- $type: "color",
1968
- $value: "{<theme>.<color>.15}"
1969
- },
1970
- "16": {
1971
- $type: "color",
1972
- $value: "{<theme>.<color>.16}"
1973
- }
1974
- };
1975
-
1976
- // src/tokens/create/generators/theme.ts
1977
- var generateTheme = (colors, themeName, borderRadius) => {
1978
- const mainColorNames = Object.keys(colors.main);
1979
- const supportColorNames = Object.keys(colors.support);
1980
- const customColors = [...mainColorNames, "neutral", ...supportColorNames];
1981
- const themeColorTokens = Object.fromEntries(
1982
- customColors.map(
1983
- (colorName) => [
1984
- colorName,
1985
- R6.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
1986
- ]
1987
- )
1988
- );
1989
- const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
1990
- const themeFile = {
1991
- color: {
1992
- ...themeColorTokens,
1993
- ...themeBaseFileColor
1994
- },
1995
- ...remainingThemeFile
1996
- };
1997
- const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
1998
- const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
1999
- const token = JSON.parse(
2000
- JSON.stringify(
2001
- updatedThemeFile,
2002
- (key, value) => {
2003
- if (key === "$value") {
2004
- return value.replace("<theme>", themeName);
2005
- }
2006
- return value;
2007
- },
2008
- 2
2009
- )
2010
- );
2011
- return token;
2012
- };
2013
-
2014
- // src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
2015
- var typography_template_default = {
2016
- "<theme>": {
2017
- "font-family": {
2018
- $type: "fontFamilies",
2019
- $value: "<font-family>"
2020
- },
2021
- "font-weight": {
2022
- medium: {
2023
- $type: "fontWeights",
2024
- $value: "Medium"
2025
- },
2026
- semibold: {
2027
- $type: "fontWeights",
2028
- $value: "Semi bold"
2029
- },
2030
- regular: {
2031
- $type: "fontWeights",
2032
- $value: "Regular"
2033
- }
2034
- }
2035
- }
2036
- };
2037
-
2038
- // src/tokens/create/generators/typography.ts
2039
- var generateTypography = (themeName, { fontFamily }) => {
2040
- return JSON.parse(
2041
- JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
2042
- );
2043
- };
2044
-
2045
- // src/tokens/create.ts
2046
- var createTokens = async (opts) => {
2047
- const { colors, typography: typography2, name, borderRadius } = opts;
2048
- const colorSchemes = ["light", "dark"];
2049
- const semantic2 = generateSemantic(colors);
2050
- const tokenSets = new Map([
2051
- ...getDefaultTokens([
2052
- "primitives/globals",
2053
- "primitives/modes/size/small",
2054
- "primitives/modes/size/medium",
2055
- "primitives/modes/size/large",
2056
- "primitives/modes/size/global",
2057
- "primitives/modes/typography/size/small",
2058
- "primitives/modes/typography/size/medium",
2059
- "primitives/modes/typography/size/large"
2060
- ]),
2061
- [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
2062
- [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
2063
- ...colorSchemes.flatMap((scheme) => [
2064
- [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
2065
- [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors)]
2066
- ]),
2067
- [`themes/${name}`, generateTheme(colors, name, borderRadius)],
2068
- ["semantic/color", semantic2.color],
2069
- // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
2070
- ...Object.entries(semantic2.modes).flatMap(
2071
- ([mode, colors2]) => Object.entries(colors2).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
2072
- ),
2073
- getDefaultToken("semantic/style")
2074
- ]);
2075
- return { tokenSets };
2076
- };
2077
-
2078
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
2079
- var BoxShadowTypes;
2080
- (function(BoxShadowTypes2) {
2081
- BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
2082
- BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
2083
- })(BoxShadowTypes || (BoxShadowTypes = {}));
2084
-
2085
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
2086
- var ColorModifierTypes;
2087
- (function(ColorModifierTypes2) {
2088
- ColorModifierTypes2["LIGHTEN"] = "lighten";
2089
- ColorModifierTypes2["DARKEN"] = "darken";
2090
- ColorModifierTypes2["MIX"] = "mix";
2091
- ColorModifierTypes2["ALPHA"] = "alpha";
2092
- })(ColorModifierTypes || (ColorModifierTypes = {}));
2093
-
2094
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
2095
- var ColorSpaceTypes;
2096
- (function(ColorSpaceTypes2) {
2097
- ColorSpaceTypes2["LCH"] = "lch";
2098
- ColorSpaceTypes2["SRGB"] = "srgb";
2099
- ColorSpaceTypes2["P3"] = "p3";
2100
- ColorSpaceTypes2["HSL"] = "hsl";
2101
- })(ColorSpaceTypes || (ColorSpaceTypes = {}));
2102
-
2103
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
2104
- var Properties;
2105
- (function(Properties2) {
2106
- Properties2["sizing"] = "sizing";
2107
- Properties2["height"] = "height";
2108
- Properties2["width"] = "width";
2109
- Properties2["spacing"] = "spacing";
2110
- Properties2["verticalPadding"] = "verticalPadding";
2111
- Properties2["horizontalPadding"] = "horizontalPadding";
2112
- Properties2["paddingTop"] = "paddingTop";
2113
- Properties2["paddingRight"] = "paddingRight";
2114
- Properties2["paddingBottom"] = "paddingBottom";
2115
- Properties2["paddingLeft"] = "paddingLeft";
2116
- Properties2["itemSpacing"] = "itemSpacing";
2117
- Properties2["fill"] = "fill";
2118
- Properties2["backgroundBlur"] = "backgroundBlur";
2119
- Properties2["border"] = "border";
2120
- Properties2["borderTop"] = "borderTop";
2121
- Properties2["borderRight"] = "borderRight";
2122
- Properties2["borderBottom"] = "borderBottom";
2123
- Properties2["borderLeft"] = "borderLeft";
2124
- Properties2["borderColor"] = "borderColor";
2125
- Properties2["borderRadius"] = "borderRadius";
2126
- Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
2127
- Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
2128
- Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
2129
- Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
2130
- Properties2["borderWidth"] = "borderWidth";
2131
- Properties2["borderWidthTop"] = "borderWidthTop";
2132
- Properties2["borderWidthRight"] = "borderWidthRight";
2133
- Properties2["borderWidthBottom"] = "borderWidthBottom";
2134
- Properties2["borderWidthLeft"] = "borderWidthLeft";
2135
- Properties2["boxShadow"] = "boxShadow";
2136
- Properties2["opacity"] = "opacity";
2137
- Properties2["fontFamilies"] = "fontFamilies";
2138
- Properties2["fontWeights"] = "fontWeights";
2139
- Properties2["fontSizes"] = "fontSizes";
2140
- Properties2["lineHeights"] = "lineHeights";
2141
- Properties2["typography"] = "typography";
2142
- Properties2["composition"] = "composition";
2143
- Properties2["letterSpacing"] = "letterSpacing";
2144
- Properties2["paragraphSpacing"] = "paragraphSpacing";
2145
- Properties2["textCase"] = "textCase";
2146
- Properties2["dimension"] = "dimension";
2147
- Properties2["textDecoration"] = "textDecoration";
2148
- Properties2["asset"] = "asset";
2149
- Properties2["tokenValue"] = "tokenValue";
2150
- Properties2["value"] = "value";
2151
- Properties2["tokenName"] = "tokenName";
2152
- Properties2["description"] = "description";
2153
- })(Properties || (Properties = {}));
2154
-
2155
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
2156
- var TokenSetStatus;
2157
- (function(TokenSetStatus2) {
2158
- TokenSetStatus2["DISABLED"] = "disabled";
2159
- TokenSetStatus2["SOURCE"] = "source";
2160
- TokenSetStatus2["ENABLED"] = "enabled";
2161
- })(TokenSetStatus || (TokenSetStatus = {}));
2162
-
2163
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
2164
- var TokenTypes;
2165
- (function(TokenTypes2) {
2166
- TokenTypes2["OTHER"] = "other";
2167
- TokenTypes2["COLOR"] = "color";
2168
- TokenTypes2["BORDER_RADIUS"] = "borderRadius";
2169
- TokenTypes2["SIZING"] = "sizing";
2170
- TokenTypes2["SPACING"] = "spacing";
2171
- TokenTypes2["TEXT"] = "text";
2172
- TokenTypes2["TYPOGRAPHY"] = "typography";
2173
- TokenTypes2["OPACITY"] = "opacity";
2174
- TokenTypes2["BORDER_WIDTH"] = "borderWidth";
2175
- TokenTypes2["STROKE_STYLE"] = "strokeStyle";
2176
- TokenTypes2["BOX_SHADOW"] = "boxShadow";
2177
- TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
2178
- TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
2179
- TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
2180
- TokenTypes2["FONT_SIZES"] = "fontSizes";
2181
- TokenTypes2["LETTER_SPACING"] = "letterSpacing";
2182
- TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
2183
- TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
2184
- TokenTypes2["TEXT_DECORATION"] = "textDecoration";
2185
- TokenTypes2["TEXT_CASE"] = "textCase";
2186
- TokenTypes2["COMPOSITION"] = "composition";
2187
- TokenTypes2["DIMENSION"] = "dimension";
2188
- TokenTypes2["BORDER"] = "border";
2189
- TokenTypes2["ASSET"] = "asset";
2190
- TokenTypes2["BOOLEAN"] = "boolean";
2191
- TokenTypes2["NUMBER"] = "number";
2192
- })(TokenTypes || (TokenTypes = {}));
2193
-
2194
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
2195
- var BorderValues;
2196
- (function(BorderValues2) {
2197
- BorderValues2["BORDER_COLOR"] = "color";
2198
- BorderValues2["BORDER_WIDTH"] = "width";
2199
- BorderValues2["BORDER_STYLE"] = "style";
2200
- })(BorderValues || (BorderValues = {}));
2201
-
2202
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
2203
- var StrokeStyleValues;
2204
- (function(StrokeStyleValues2) {
2205
- StrokeStyleValues2["SOLID"] = "solid";
2206
- StrokeStyleValues2["DASHED"] = "dashed";
2207
- StrokeStyleValues2["DOTTED"] = "dotted";
2208
- StrokeStyleValues2["DOUBLE"] = "double";
2209
- StrokeStyleValues2["GROOVE"] = "groove";
2210
- StrokeStyleValues2["RIDGE"] = "ridge";
2211
- StrokeStyleValues2["OUTSET"] = "outset";
2212
- StrokeStyleValues2["INSET"] = "inset";
2213
- })(StrokeStyleValues || (StrokeStyleValues = {}));
2214
-
2215
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
2216
- var BoxShadowValues;
2217
- (function(BoxShadowValues2) {
2218
- BoxShadowValues2["TYPE"] = "type";
2219
- BoxShadowValues2["COLOR"] = "color";
2220
- BoxShadowValues2["X"] = "x";
2221
- BoxShadowValues2["Y"] = "y";
2222
- BoxShadowValues2["BLUR"] = "blur";
2223
- BoxShadowValues2["SPREAD"] = "spread";
2224
- BoxShadowValues2["BLEND_MODE"] = "blendMode";
2225
- })(BoxShadowValues || (BoxShadowValues = {}));
2226
-
2227
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
2228
- var TypographyValues;
2229
- (function(TypographyValues2) {
2230
- TypographyValues2["FONT_FAMILY"] = "fontFamily";
2231
- TypographyValues2["FONT_WEIGHT"] = "fontWeight";
2232
- TypographyValues2["LINE_HEIGHT"] = "lineHeight";
2233
- TypographyValues2["FONT_SIZE"] = "fontSize";
2234
- TypographyValues2["LETTER_SPACING"] = "letterSpacing";
2235
- TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
2236
- TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
2237
- TypographyValues2["TEXT_DECORATION"] = "textDecoration";
2238
- TypographyValues2["TEXT_CASE"] = "textCase";
2239
- })(TypographyValues || (TypographyValues = {}));
2110
+ },
2111
+ "base-active": {
2112
+ $type: "color",
2113
+ $value: "{color.<color>.base-active}"
2114
+ },
2115
+ "base-contrast-subtle": {
2116
+ $type: "color",
2117
+ $value: "{color.<color>.base-contrast-subtle}"
2118
+ },
2119
+ "base-contrast-default": {
2120
+ $type: "color",
2121
+ $value: "{color.<color>.base-contrast-default}"
2122
+ }
2123
+ };
2240
2124
 
2241
- // src/tokens/create/generators/$themes.ts
2242
- var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
2243
- async function createHash(text, algo = "SHA-1") {
2244
- const crypto = globalThis.crypto;
2245
- return Array.from(
2246
- new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
2247
- (byte) => byte.toString(16).padStart(2, "0")
2248
- ).join("");
2249
- }
2250
- async function generate$Themes(colorSchemes, themes, colors) {
2251
- return [
2252
- ...generateSizeGroup(),
2253
- ...await generateThemesGroup(themes),
2254
- ...generateTypographyGroup(themes),
2255
- ...generateColorSchemesGroup(colorSchemes, themes),
2256
- generateSemanticGroup(),
2257
- ...await generateColorGroup("main", colors),
2258
- ...await generateColorGroup("support", colors)
2125
+ // src/tokens/create/generators/semantic.ts
2126
+ var generateSemantic = (colors) => {
2127
+ const mainColorNames = Object.keys(colors.main);
2128
+ const supportColorNames = Object.keys(colors.support);
2129
+ const modes = {
2130
+ "main-color": {},
2131
+ "support-color": {}
2132
+ };
2133
+ const categories = [
2134
+ ["main-color", mainColorNames],
2135
+ ["support-color", supportColorNames]
2259
2136
  ];
2260
- }
2261
- function generateSizeGroup() {
2262
- return [
2263
- {
2264
- id: "8b2c8cc86611a34b135cb22948666779361fd729",
2265
- name: "medium",
2266
- $figmaStyleReferences: {},
2267
- selectedTokenSets: {
2268
- "primitives/modes/size/medium": TokenSetStatus.SOURCE,
2269
- "primitives/modes/size/global": TokenSetStatus.ENABLED,
2270
- "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
2271
- },
2272
- $figmaCollectionId: "VariableCollectionId:36248:20757",
2273
- $figmaModeId: "41630:1",
2274
- group: "Size"
2137
+ for (const [colorCategory2, colorNames] of categories) {
2138
+ for (const colorName of colorNames) {
2139
+ const category = colorCategory2.replace("-color", "");
2140
+ const customColorTokens = {
2141
+ color: {
2142
+ [category]: JSON.parse(
2143
+ JSON.stringify(
2144
+ color_template_default2,
2145
+ (key, value) => {
2146
+ if (key === "$value") {
2147
+ return value.replace("<color>", colorName);
2148
+ }
2149
+ return value;
2150
+ },
2151
+ 2
2152
+ )
2153
+ )
2154
+ }
2155
+ };
2156
+ modes[colorCategory2][colorName] = customColorTokens;
2157
+ }
2158
+ }
2159
+ const customColors = [...mainColorNames, "neutral", ...supportColorNames];
2160
+ const semanticColorTokens = customColors.map(
2161
+ (colorName) => [
2162
+ colorName,
2163
+ R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
2164
+ ]
2165
+ );
2166
+ const color = {
2167
+ ...color_base_template_default,
2168
+ color: {
2169
+ ...Object.fromEntries(semanticColorTokens),
2170
+ ...color_base_template_default.color
2171
+ }
2172
+ };
2173
+ return {
2174
+ modes,
2175
+ color
2176
+ };
2177
+ };
2178
+
2179
+ // src/tokens/create/generators/theme.ts
2180
+ import * as R6 from "ramda";
2181
+
2182
+ // src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
2183
+ var theme_base_template_default = {
2184
+ color: {},
2185
+ "font-family": {
2186
+ $type: "fontFamilies",
2187
+ $value: "{<theme>.font-family}"
2188
+ },
2189
+ "font-weight": {
2190
+ medium: {
2191
+ $type: "fontWeights",
2192
+ $value: "{<theme>.font-weight.medium}"
2275
2193
  },
2276
- {
2277
- id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
2278
- name: "large",
2279
- $figmaStyleReferences: {},
2280
- selectedTokenSets: {
2281
- "primitives/modes/size/large": TokenSetStatus.SOURCE,
2282
- "primitives/modes/size/global": TokenSetStatus.ENABLED,
2283
- "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
2284
- },
2285
- $figmaCollectionId: "VariableCollectionId:36248:20757",
2286
- $figmaModeId: "41630:2",
2287
- group: "Size"
2194
+ semibold: {
2195
+ $type: "fontWeights",
2196
+ $value: "{<theme>.font-weight.semibold}"
2288
2197
  },
2289
- {
2290
- id: "fb11567729c298ca37c9da4e3a27716a23480824",
2291
- name: "small",
2292
- $figmaStyleReferences: {},
2293
- selectedTokenSets: {
2294
- "primitives/modes/size/small": TokenSetStatus.SOURCE,
2295
- "primitives/modes/size/global": TokenSetStatus.ENABLED,
2296
- "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
2297
- },
2298
- $figmaCollectionId: "VariableCollectionId:36248:20757",
2299
- $figmaModeId: "41630:3",
2300
- group: "Size"
2198
+ regular: {
2199
+ $type: "fontWeights",
2200
+ $value: "{<theme>.font-weight.regular}"
2301
2201
  }
2302
- ];
2303
- }
2304
- var colorSchemeDefaults = {
2305
- light: {
2306
- name: "Light",
2307
- selectedTokenSets: {},
2308
- id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
2309
- $figmaCollectionId: "VariableCollectionId:34811:5472",
2310
- $figmaModeId: "34811:0"
2311
2202
  },
2312
- dark: {
2313
- name: "Dark",
2314
- selectedTokenSets: {},
2315
- id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
2316
- $figmaCollectionId: "VariableCollectionId:34811:5472",
2317
- $figmaModeId: "34811:1"
2203
+ "border-radius": {
2204
+ "1": {
2205
+ $type: "dimension",
2206
+ $value: "min({border-radius.base}*0.5,{border-radius.scale})"
2207
+ },
2208
+ "2": {
2209
+ $type: "dimension",
2210
+ $value: "min({border-radius.base},{border-radius.scale}*2)"
2211
+ },
2212
+ "3": {
2213
+ $type: "dimension",
2214
+ $value: "min({border-radius.base}*2,{border-radius.scale}*5)"
2215
+ },
2216
+ "4": {
2217
+ $type: "dimension",
2218
+ $value: "min({border-radius.base}*3,{border-radius.scale}*7)"
2219
+ },
2220
+ "5": {
2221
+ $type: "dimension",
2222
+ $value: "{border-radius.base}"
2223
+ },
2224
+ "6": {
2225
+ $type: "dimension",
2226
+ $value: "9999"
2227
+ },
2228
+ base: {
2229
+ $type: "dimension",
2230
+ $value: "4"
2231
+ },
2232
+ scale: {
2233
+ $type: "dimension",
2234
+ $value: "4"
2235
+ }
2236
+ }
2237
+ };
2238
+
2239
+ // src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
2240
+ var theme_template_default = {
2241
+ "1": {
2242
+ $type: "color",
2243
+ $value: "{<theme>.<color>.1}"
2244
+ },
2245
+ "2": {
2246
+ $type: "color",
2247
+ $value: "{<theme>.<color>.2}"
2248
+ },
2249
+ "3": {
2250
+ $type: "color",
2251
+ $value: "{<theme>.<color>.3}"
2252
+ },
2253
+ "4": {
2254
+ $type: "color",
2255
+ $value: "{<theme>.<color>.4}"
2256
+ },
2257
+ "5": {
2258
+ $type: "color",
2259
+ $value: "{<theme>.<color>.5}"
2260
+ },
2261
+ "6": {
2262
+ $type: "color",
2263
+ $value: "{<theme>.<color>.6}"
2264
+ },
2265
+ "7": {
2266
+ $type: "color",
2267
+ $value: "{<theme>.<color>.7}"
2268
+ },
2269
+ "8": {
2270
+ $type: "color",
2271
+ $value: "{<theme>.<color>.8}"
2272
+ },
2273
+ "9": {
2274
+ $type: "color",
2275
+ $value: "{<theme>.<color>.9}"
2276
+ },
2277
+ "10": {
2278
+ $type: "color",
2279
+ $value: "{<theme>.<color>.10}"
2280
+ },
2281
+ "11": {
2282
+ $type: "color",
2283
+ $value: "{<theme>.<color>.11}"
2284
+ },
2285
+ "12": {
2286
+ $type: "color",
2287
+ $value: "{<theme>.<color>.12}"
2288
+ },
2289
+ "13": {
2290
+ $type: "color",
2291
+ $value: "{<theme>.<color>.13}"
2292
+ },
2293
+ "14": {
2294
+ $type: "color",
2295
+ $value: "{<theme>.<color>.14}"
2296
+ },
2297
+ "15": {
2298
+ $type: "color",
2299
+ $value: "{<theme>.<color>.15}"
2318
2300
  },
2319
- contrast: {
2320
- name: "Contrast",
2321
- selectedTokenSets: {},
2322
- id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
2323
- $figmaCollectionId: "VariableCollectionId:34811:5472",
2324
- $figmaModeId: "34811:2"
2301
+ "16": {
2302
+ $type: "color",
2303
+ $value: "{<theme>.<color>.16}"
2325
2304
  }
2326
2305
  };
2327
- function generateColorSchemesGroup(colorSchemes, themes) {
2328
- return colorSchemes.map(
2329
- (scheme) => ({
2330
- ...colorSchemeDefaults[scheme],
2331
- selectedTokenSets: Object.fromEntries([
2332
- [`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
2333
- ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
2334
- ]),
2335
- group: "Color scheme"
2336
- })
2337
- );
2338
- }
2339
- async function generateThemesGroup(themes) {
2340
- return Promise.all(
2341
- themes.map(
2342
- async (theme, index) => ({
2343
- id: await createHash(theme),
2344
- $figmaCollectionId: "VariableCollectionId:36528:61712",
2345
- $figmaModeId: `40960:${index + 6}`,
2346
- // Start on 6 in Token Studio and Community file for some reason
2347
- name: theme,
2348
- selectedTokenSets: {
2349
- [`themes/${theme}`]: TokenSetStatus.ENABLED
2350
- },
2351
- group: "Theme"
2352
- })
2306
+
2307
+ // src/tokens/create/generators/theme.ts
2308
+ var generateTheme = (colors, themeName, borderRadius) => {
2309
+ const mainColorNames = Object.keys(colors.main);
2310
+ const supportColorNames = Object.keys(colors.support);
2311
+ const customColors = [...mainColorNames, "neutral", ...supportColorNames];
2312
+ const themeColorTokens = Object.fromEntries(
2313
+ customColors.map(
2314
+ (colorName) => [
2315
+ colorName,
2316
+ R6.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
2317
+ ]
2353
2318
  )
2354
2319
  );
2355
- }
2356
- function generateSemanticGroup() {
2357
- return {
2358
- id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
2359
- name: "Semantic",
2360
- selectedTokenSets: {
2361
- "semantic/style": TokenSetStatus.ENABLED,
2362
- "semantic/color": TokenSetStatus.ENABLED,
2363
- "primitives/globals": TokenSetStatus.SOURCE
2320
+ const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
2321
+ const themeFile = {
2322
+ color: {
2323
+ ...themeColorTokens,
2324
+ ...themeBaseFileColor
2364
2325
  },
2365
- $figmaCollectionId: "VariableCollectionId:34811:5976",
2366
- $figmaModeId: "34811:5",
2367
- group: "Semantic"
2326
+ ...remainingThemeFile
2368
2327
  };
2369
- }
2370
- async function generateColorGroup(group, colors) {
2371
- return Promise.all(
2372
- Object.entries(colors[group]).map(
2373
- async ([color]) => ({
2374
- id: await createHash(`${group}-${color}`),
2375
- name: color,
2376
- selectedTokenSets: {
2377
- [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
2378
- },
2379
- group: `${capitalize(group)} color`
2380
- })
2328
+ const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
2329
+ const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
2330
+ const token = JSON.parse(
2331
+ JSON.stringify(
2332
+ updatedThemeFile,
2333
+ (key, value) => {
2334
+ if (key === "$value") {
2335
+ return value.replace("<theme>", themeName);
2336
+ }
2337
+ return value;
2338
+ },
2339
+ 2
2381
2340
  )
2382
2341
  );
2383
- }
2384
- function generateTypographyGroup(themes) {
2385
- return [
2386
- {
2387
- id: "368d753fcac4455f289500eaa42e70dc0a03522f",
2388
- $figmaCollectionId: "VariableCollectionId:36248:20769",
2389
- $figmaModeId: "36248:2",
2390
- name: "Primary",
2391
- selectedTokenSets: Object.fromEntries(
2392
- themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
2393
- ),
2394
- group: "Typography"
2342
+ return token;
2343
+ };
2344
+
2345
+ // src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
2346
+ var typography_template_default = {
2347
+ "<theme>": {
2348
+ "font-family": {
2349
+ $type: "fontFamilies",
2350
+ $value: "<font-family>"
2395
2351
  },
2396
- {
2397
- id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
2398
- $figmaCollectionId: "VariableCollectionId:36248:20769",
2399
- $figmaModeId: "36248:3",
2400
- name: "Secondary",
2401
- selectedTokenSets: Object.fromEntries(
2402
- themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
2403
- ),
2404
- group: "Typography"
2352
+ "font-weight": {
2353
+ medium: {
2354
+ $type: "fontWeights",
2355
+ $value: "Medium"
2356
+ },
2357
+ semibold: {
2358
+ $type: "fontWeights",
2359
+ $value: "Semi bold"
2360
+ },
2361
+ regular: {
2362
+ $type: "fontWeights",
2363
+ $value: "Regular"
2364
+ }
2365
+ }
2366
+ }
2367
+ };
2368
+
2369
+ // src/tokens/create/generators/typography.ts
2370
+ var generateTypography = (themeName, { fontFamily }) => {
2371
+ return JSON.parse(
2372
+ JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
2373
+ );
2374
+ };
2375
+
2376
+ // src/tokens/create.ts
2377
+ var createTokens = async (opts) => {
2378
+ const { colors, typography: typography2, name, borderRadius } = opts;
2379
+ const colorSchemes = ["light", "dark"];
2380
+ const semantic2 = generateSemantic(colors);
2381
+ const tokenSets = new Map([
2382
+ ...getDefaultTokens([
2383
+ "primitives/globals",
2384
+ "primitives/modes/size/small",
2385
+ "primitives/modes/size/medium",
2386
+ "primitives/modes/size/large",
2387
+ "primitives/modes/size/global",
2388
+ "primitives/modes/typography/size/small",
2389
+ "primitives/modes/typography/size/medium",
2390
+ "primitives/modes/typography/size/large"
2391
+ ]),
2392
+ [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
2393
+ [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
2394
+ ...colorSchemes.flatMap((scheme) => [
2395
+ [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
2396
+ [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors)]
2397
+ ]),
2398
+ [`themes/${name}`, generateTheme(colors, name, borderRadius)],
2399
+ ["semantic/color", semantic2.color],
2400
+ // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
2401
+ ...Object.entries(semantic2.modes).flatMap(
2402
+ ([mode, colors2]) => Object.entries(colors2).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
2403
+ ),
2404
+ getDefaultToken("semantic/style")
2405
+ ]);
2406
+ return { tokenSets };
2407
+ };
2408
+
2409
+ // src/tokens/process/output/theme.ts
2410
+ import chalk from "chalk";
2411
+ import * as R7 from "ramda";
2412
+
2413
+ // package.json
2414
+ var package_default = {
2415
+ name: "@digdir/designsystemet",
2416
+ version: "1.1.1",
2417
+ description: "CLI for Designsystemet",
2418
+ author: "Designsystemet team",
2419
+ engines: {
2420
+ node: ">=22.16.0"
2421
+ },
2422
+ repository: {
2423
+ type: "git",
2424
+ url: "git+https://github.com/digdir/designsystemet.git"
2425
+ },
2426
+ homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
2427
+ license: "MIT",
2428
+ type: "module",
2429
+ main: "./dist/src/index.js",
2430
+ files: [
2431
+ "./dist/**",
2432
+ "./configs/**"
2433
+ ],
2434
+ bin: "dist/bin/designsystemet.js",
2435
+ exports: {
2436
+ ".": {
2437
+ import: "./dist/src/index.js"
2438
+ },
2439
+ "./color": {
2440
+ import: "./dist/src/colors/index.js"
2441
+ },
2442
+ "./tokens": {
2443
+ import: "./dist/src/tokens/index.js"
2444
+ }
2445
+ },
2446
+ publishConfig: {
2447
+ access: "public"
2448
+ },
2449
+ scripts: {
2450
+ designsystemet: "tsx ./bin/designsystemet.ts",
2451
+ "designsystemet:inspect": "tsx --inspect-brk ./bin/designsystemet.ts",
2452
+ build: "tsup && pnpm build:types && pnpm build:json-schema",
2453
+ "build:types": "tsc --emitDeclarationOnly --declaration",
2454
+ "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
2455
+ types: "tsc --noEmit",
2456
+ "test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
2457
+ "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
2458
+ "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
2459
+ "test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
2460
+ "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
2461
+ "test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
2462
+ "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
2463
+ "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
2464
+ "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
2465
+ test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
2466
+ "digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
2467
+ "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
2468
+ "update:template": "tsx ./src/scripts/update-template.ts",
2469
+ "update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
2470
+ verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
2471
+ },
2472
+ dependencies: {
2473
+ "@commander-js/extra-typings": "^14.0.0",
2474
+ "@tokens-studio/sd-transforms": "1.3.0",
2475
+ "apca-w3": "^0.1.9",
2476
+ chalk: "^5.4.1",
2477
+ "change-case": "^5.4.4",
2478
+ "chroma-js": "^3.1.2",
2479
+ "colorjs.io": "^0.6.0-alpha.1",
2480
+ commander: "^14.0.0",
2481
+ "fast-glob": "^3.3.3",
2482
+ hsluv: "^1.0.1",
2483
+ "object-hash": "^3.0.0",
2484
+ postcss: "^8.5.6",
2485
+ ramda: "^0.30.1",
2486
+ "style-dictionary": "^5.0.0",
2487
+ zod: "^3.25.67",
2488
+ "zod-validation-error": "^3.5.2"
2489
+ },
2490
+ devDependencies: {
2491
+ "@tokens-studio/types": "0.5.2",
2492
+ "@types/apca-w3": "^0.1.3",
2493
+ "@types/chroma-js": "^3.1.1",
2494
+ "@types/fs-extra": "^11.0.4",
2495
+ "@types/glob": "^8.1.0",
2496
+ "@types/node": "^22.15.32",
2497
+ "@types/object-hash": "^3.0.6",
2498
+ "@types/ramda": "^0.30.2",
2499
+ "fs-extra": "^11.3.0",
2500
+ tslib: "^2.8.1",
2501
+ tsup: "^8.5.0",
2502
+ tsx: "^4.20.3",
2503
+ typescript: "^5.8.3"
2504
+ }
2505
+ };
2506
+
2507
+ // src/tokens/process/output/theme.ts
2508
+ var defaultFileHeader = `build: v${package_default.version}`;
2509
+ var createThemeCSSFiles = ({
2510
+ processedBuilds,
2511
+ fileHeader: fileHeader2 = defaultFileHeader
2512
+ }) => {
2513
+ const groupedByTheme = {};
2514
+ for (const [_, buildResults] of Object.entries(processedBuilds)) {
2515
+ for (const buildResult of buildResults) {
2516
+ const themeName = buildResult.permutation.theme;
2517
+ const newOutputs = buildResult.formatted;
2518
+ if (R7.isNotEmpty(newOutputs)) {
2519
+ const currentOutputs = groupedByTheme[themeName] ?? [];
2520
+ groupedByTheme[themeName] = R7.concat(currentOutputs, newOutputs);
2521
+ }
2405
2522
  }
2523
+ }
2524
+ const sortOrder = [
2525
+ "color-scheme/light",
2526
+ "typography/secondary",
2527
+ "semantic",
2528
+ "color-scheme/dark",
2529
+ "color-scheme/contrast",
2530
+ "typography/primary",
2531
+ "color/"
2406
2532
  ];
2407
- }
2533
+ const sortByDefinedOrder = R7.sortBy((file) => {
2534
+ const filePath = file.destination || "";
2535
+ const sortIndex = sortOrder.findIndex((sortElement) => {
2536
+ if (sortElement.endsWith("/")) {
2537
+ return filePath.includes(sortElement);
2538
+ }
2539
+ return filePath.includes(`${sortElement}.css`);
2540
+ });
2541
+ if (sortIndex === -1) {
2542
+ console.error(
2543
+ chalk.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
2544
+ );
2545
+ console.log(
2546
+ chalk.dim(
2547
+ `
2548
+ The section will currently be added to the end of the entry file, but the exact
2549
+ order may change due to nondeterminism.`.trim()
2550
+ )
2551
+ );
2552
+ return Infinity;
2553
+ }
2554
+ return sortIndex;
2555
+ });
2556
+ const header = `@charset "UTF-8";
2557
+ /*
2558
+ ${fileHeader2}
2559
+ */
2560
+
2561
+ `;
2562
+ const sortAlphabetically = R7.sort(R7.ascend((x) => x.destination || ""));
2563
+ const pickOutputs = R7.map(R7.view(R7.lensProp("output")));
2564
+ const themeCSSFile = R7.pipe(
2565
+ sortAlphabetically,
2566
+ sortByDefinedOrder,
2567
+ pickOutputs,
2568
+ R7.join("\n"),
2569
+ (content) => header + content
2570
+ );
2571
+ const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
2572
+ destination: `${theme}.css`,
2573
+ output: themeCSSFile(files)
2574
+ }));
2575
+ return themeCSSFiles;
2576
+ };
2408
2577
 
2409
2578
  // src/tokens/process/platform.ts
2410
- import chalk2 from "chalk";
2411
- import * as R18 from "ramda";
2579
+ import chalk3 from "chalk";
2580
+ import * as R19 from "ramda";
2412
2581
  import StyleDictionary2 from "style-dictionary";
2413
2582
 
2414
2583
  // src/tokens/types.ts
@@ -2419,30 +2588,30 @@ var colorCategories = {
2419
2588
 
2420
2589
  // src/tokens/process/configs.ts
2421
2590
  import { register } from "@tokens-studio/sd-transforms";
2422
- import * as R17 from "ramda";
2591
+ import * as R18 from "ramda";
2423
2592
  import StyleDictionary from "style-dictionary";
2424
2593
 
2425
2594
  // src/tokens/utils.ts
2426
- import * as R7 from "ramda";
2427
- var mapToLowerCase = R7.map(R7.toLower);
2428
- var hasAnyTruth = R7.any(R7.equals(true));
2595
+ import * as R8 from "ramda";
2596
+ var mapToLowerCase = R8.map(R8.toLower);
2597
+ var hasAnyTruth = R8.any(R8.equals(true));
2429
2598
  var getType = (token) => (token.$type ?? token.type) || "";
2430
2599
  var getValue = (token) => token.$value ?? token.value;
2431
- var typeEquals = R7.curry(
2600
+ var typeEquals = R8.curry(
2432
2601
  (types, token) => {
2433
- if (R7.isNil(token)) {
2602
+ if (R8.isNil(token)) {
2434
2603
  return false;
2435
2604
  }
2436
- return R7.includes(R7.toLower(getType(token)), R7.map(R7.toLower, Array.isArray(types) ? types : [types]));
2605
+ return R8.includes(R8.toLower(getType(token)), R8.map(R8.toLower, Array.isArray(types) ? types : [types]));
2437
2606
  }
2438
2607
  );
2439
- var pathStartsWithOneOf = R7.curry(
2608
+ var pathStartsWithOneOf = R8.curry(
2440
2609
  (paths, token) => {
2441
- if (R7.isNil(token)) {
2610
+ if (R8.isNil(token)) {
2442
2611
  return false;
2443
2612
  }
2444
2613
  const tokenPath = mapToLowerCase(token.path);
2445
- const matchPathsStartingWith = R7.map((path) => R7.startsWith([path], tokenPath), mapToLowerCase(paths));
2614
+ const matchPathsStartingWith = R8.map((path) => R8.startsWith([path], tokenPath), mapToLowerCase(paths));
2446
2615
  return hasAnyTruth(matchPathsStartingWith);
2447
2616
  }
2448
2617
  );
@@ -2450,7 +2619,7 @@ function isSemanticToken(token) {
2450
2619
  return token.filePath.includes("semantic/");
2451
2620
  }
2452
2621
  function isSemanticColorToken(token, color) {
2453
- return token.filePath.includes("semantic/") && R7.startsWith(["color", color], token.path);
2622
+ return token.filePath.includes("semantic/") && R8.startsWith(["color", color], token.path);
2454
2623
  }
2455
2624
  function isGlobalColorToken(token) {
2456
2625
  return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
@@ -2461,7 +2630,7 @@ function isColorCategoryToken(token, category) {
2461
2630
  (colorCategory2) => isColorCategoryToken(token, colorCategory2)
2462
2631
  );
2463
2632
  }
2464
- return R7.startsWith(["color", category], token.path);
2633
+ return R8.startsWith(["color", category], token.path);
2465
2634
  }
2466
2635
  var isDigit = (s) => /^\d+$/.test(s);
2467
2636
  function traverseObj(obj, fn) {
@@ -2477,7 +2646,7 @@ function traverseObj(obj, fn) {
2477
2646
  return obj;
2478
2647
  }
2479
2648
  function inlineTokens(shouldInline, tokens) {
2480
- const [inlineableTokens, otherTokens] = R7.partition(shouldInline, tokens);
2649
+ const [inlineableTokens, otherTokens] = R8.partition(shouldInline, tokens);
2481
2650
  return otherTokens.map((token) => {
2482
2651
  let transformed = getValue(token.original);
2483
2652
  for (const ref of inlineableTokens) {
@@ -2486,16 +2655,16 @@ function inlineTokens(shouldInline, tokens) {
2486
2655
  transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
2487
2656
  }
2488
2657
  }
2489
- const tokenWithInlinedRefs = R7.set(R7.lensPath(["original", "$value"]), transformed, token);
2658
+ const tokenWithInlinedRefs = R8.set(R8.lensPath(["original", "$value"]), transformed, token);
2490
2659
  return tokenWithInlinedRefs;
2491
2660
  });
2492
2661
  }
2493
2662
 
2494
2663
  // src/tokens/process/configs/color.ts
2495
- import * as R12 from "ramda";
2664
+ import * as R13 from "ramda";
2496
2665
 
2497
2666
  // src/tokens/process/formats/css/color.ts
2498
- import * as R8 from "ramda";
2667
+ import * as R9 from "ramda";
2499
2668
  import { createPropertyFormatter } from "style-dictionary/utils";
2500
2669
  var prefersColorScheme = (colorScheme2, content) => `
2501
2670
  @media (prefers-color-scheme: ${colorScheme2}) {
@@ -2504,7 +2673,7 @@ var prefersColorScheme = (colorScheme2, content) => `
2504
2673
  `;
2505
2674
  var colorScheme = {
2506
2675
  name: "ds/css-colorscheme",
2507
- format: async ({ dictionary, file, options, platform }) => {
2676
+ format: async ({ dictionary, options, platform }) => {
2508
2677
  const { allTokens } = dictionary;
2509
2678
  const { outputReferences, usesDtcg } = options;
2510
2679
  const { selector, colorScheme: colorScheme2, layer } = platform;
@@ -2519,8 +2688,8 @@ var colorScheme = {
2519
2688
  color-scheme: ${colorScheme_};
2520
2689
  ` : "";
2521
2690
  const filteredAllTokens = allTokens.filter(
2522
- R8.allPass([
2523
- R8.anyPass([
2691
+ R9.allPass([
2692
+ R9.anyPass([
2524
2693
  // Include semantic tokens in the output
2525
2694
  isSemanticToken,
2526
2695
  // Include global color tokens
@@ -2536,7 +2705,7 @@ ${formattedTokens}
2536
2705
  ${colorSchemeProperty}}
2537
2706
  `;
2538
2707
  const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
2539
- const body = R8.isNotNil(layer) ? `@layer ${layer} {
2708
+ const body = R9.isNotNil(layer) ? `@layer ${layer} {
2540
2709
  ${selector} ${content} ${autoSelectorContent}
2541
2710
  }
2542
2711
  ` : `${selector} ${content} ${autoSelectorContent}
@@ -2546,10 +2715,10 @@ ${selector} ${content} ${autoSelectorContent}
2546
2715
  };
2547
2716
  var colorCategory = {
2548
2717
  name: "ds/css-colorcategory",
2549
- format: async ({ dictionary, file, options, platform }) => {
2718
+ format: async ({ dictionary, options, platform }) => {
2550
2719
  const { outputReferences, usesDtcg } = options;
2551
2720
  const { selector, layer } = platform;
2552
- const format = R8.compose(
2721
+ const format = R9.compose(
2553
2722
  createPropertyFormatter({
2554
2723
  outputReferences,
2555
2724
  dictionary,
@@ -2570,7 +2739,7 @@ var colorCategory = {
2570
2739
  ${formattedTokens}
2571
2740
  }
2572
2741
  `;
2573
- const body = R8.isNotNil(layer) ? `@layer ${layer} {
2742
+ const body = R9.isNotNil(layer) ? `@layer ${layer} {
2574
2743
  ${selector} ${content}
2575
2744
  }
2576
2745
  ` : `${selector} ${content}
@@ -2580,16 +2749,16 @@ ${selector} ${content}
2580
2749
  };
2581
2750
 
2582
2751
  // src/tokens/process/formats/css/semantic.ts
2583
- import * as R9 from "ramda";
2752
+ import * as R10 from "ramda";
2584
2753
  import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
2585
2754
  var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
2586
2755
  var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
2587
2756
  var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
2588
- var isInlineTokens = R9.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
2757
+ var isInlineTokens = R10.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
2589
2758
  var overrideSizingFormula = (format, token) => {
2590
2759
  const [name, value] = format(token).split(":");
2591
2760
  const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
2592
- const round = `round(down, ${calc}, 0.0625rem)`;
2761
+ const round = `round(down, ${calc}, 1px)`;
2593
2762
  return {
2594
2763
  name,
2595
2764
  round,
@@ -2597,7 +2766,7 @@ var overrideSizingFormula = (format, token) => {
2597
2766
  };
2598
2767
  };
2599
2768
  var formatSizingTokens = (format, tokens) => {
2600
- const { round, calc } = R9.reduce(
2769
+ const { round, calc } = R10.reduce(
2601
2770
  (acc, token) => {
2602
2771
  const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
2603
2772
  return {
@@ -2617,7 +2786,7 @@ ${round.join("\n")}
2617
2786
  };
2618
2787
  var semantic = {
2619
2788
  name: "ds/css-semantic",
2620
- format: async ({ dictionary, file, options, platform }) => {
2789
+ format: async ({ dictionary, options, platform }) => {
2621
2790
  const { outputReferences, usesDtcg } = options;
2622
2791
  const { selector, layer } = platform;
2623
2792
  const format = createPropertyFormatter2({
@@ -2627,17 +2796,17 @@ var semantic = {
2627
2796
  usesDtcg
2628
2797
  });
2629
2798
  const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
2630
- const filteredTokens = R9.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
2631
- const [sizingTokens, restTokens] = R9.partition(
2799
+ const filteredTokens = R10.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
2800
+ const [sizingTokens, restTokens] = R10.partition(
2632
2801
  (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
2633
2802
  filteredTokens
2634
2803
  );
2635
- const formattedTokens = [R9.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
2804
+ const formattedTokens = [R10.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
2636
2805
  const content = `{
2637
2806
  ${formattedTokens.join("\n")}
2638
2807
  }
2639
2808
  `;
2640
- const body = R9.isNotNil(layer) ? `@layer ${layer} {
2809
+ const body = R10.isNotNil(layer) ? `@layer ${layer} {
2641
2810
  ${selector} ${content}
2642
2811
  }
2643
2812
  ` : `${selector} ${content}
@@ -2647,15 +2816,15 @@ ${selector} ${content}
2647
2816
  };
2648
2817
 
2649
2818
  // src/tokens/process/formats/css/typography.ts
2650
- import * as R10 from "ramda";
2819
+ import * as R11 from "ramda";
2651
2820
  import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
2652
- var typographyFontFamilyPredicate = R10.allPass([
2653
- R10.pathSatisfies(R10.includes("typography"), ["path"]),
2654
- R10.pathSatisfies(R10.includes("fontFamily"), ["path"])
2821
+ var typographyFontFamilyPredicate = R11.allPass([
2822
+ R11.pathSatisfies(R11.includes("typography"), ["path"]),
2823
+ R11.pathSatisfies(R11.includes("fontFamily"), ["path"])
2655
2824
  ]);
2656
2825
  var typography = {
2657
2826
  name: "ds/css-typography",
2658
- format: async ({ dictionary, file, options, platform }) => {
2827
+ format: async ({ dictionary, options, platform }) => {
2659
2828
  const { outputReferences, usesDtcg } = options;
2660
2829
  const { selector, layer } = platform;
2661
2830
  const format = createPropertyFormatter3({
@@ -2664,12 +2833,12 @@ var typography = {
2664
2833
  format: "css",
2665
2834
  usesDtcg
2666
2835
  });
2667
- const filteredTokens = R10.reject(typographyFontFamilyPredicate, dictionary.allTokens);
2668
- const formattedTokens = R10.pipe(R10.map(format), R10.join("\n"))(filteredTokens);
2836
+ const filteredTokens = R11.reject(typographyFontFamilyPredicate, dictionary.allTokens);
2837
+ const formattedTokens = R11.pipe(R11.map(format), R11.join("\n"))(filteredTokens);
2669
2838
  const content = selector ? `${selector} {
2670
2839
  ${formattedTokens}
2671
2840
  }` : formattedTokens;
2672
- const body = R10.isNotNil(layer) ? `@layer ${layer} {
2841
+ const body = R11.isNotNil(layer) ? `@layer ${layer} {
2673
2842
  ${content}
2674
2843
  }` : content;
2675
2844
  return body;
@@ -2686,8 +2855,8 @@ var formats = {
2686
2855
 
2687
2856
  // src/tokens/process/transformers.ts
2688
2857
  import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
2689
- import * as R11 from "ramda";
2690
- var isPx = R11.test(/\b\d+px\b/g);
2858
+ import * as R12 from "ramda";
2859
+ var isPx = R12.test(/\b\d+px\b/g);
2691
2860
  var sizeRem = {
2692
2861
  name: "ds/size/toRem",
2693
2862
  type: "value",
@@ -2777,7 +2946,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
2777
2946
  {
2778
2947
  destination: `color-scheme/${colorScheme2}.css`,
2779
2948
  format: formats.colorScheme.name,
2780
- filter: (token) => typeEquals("color", token) && !R12.startsWith(["global"], token.path)
2949
+ filter: (token) => typeEquals("color", token) && !R13.startsWith(["global"], token.path)
2781
2950
  }
2782
2951
  ],
2783
2952
  options: {
@@ -2828,7 +2997,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
2828
2997
  };
2829
2998
 
2830
2999
  // src/tokens/process/configs/semantic.ts
2831
- import * as R13 from "ramda";
3000
+ import * as R14 from "ramda";
2832
3001
  import { outputReferencesFilter } from "style-dictionary/utils";
2833
3002
  var semanticVariables = ({ theme }) => {
2834
3003
  const selector = `:root`;
@@ -2851,8 +3020,8 @@ var semanticVariables = ({ theme }) => {
2851
3020
  destination: `semantic.css`,
2852
3021
  format: formats.semantic.name,
2853
3022
  filter: (token) => {
2854
- const isUwantedToken = R13.anyPass([R13.includes("primitives/global")])(token.filePath);
2855
- const isPrivateToken = R13.includes("_", token.path);
3023
+ const isUwantedToken = R14.anyPass([R14.includes("primitives/global")])(token.filePath);
3024
+ const isPrivateToken = R14.includes("_", token.path);
2856
3025
  const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
2857
3026
  const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
2858
3027
  const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
@@ -2873,20 +3042,20 @@ var semanticVariables = ({ theme }) => {
2873
3042
  };
2874
3043
 
2875
3044
  // src/tokens/process/configs/storefront.ts
2876
- import * as R15 from "ramda";
3045
+ import * as R16 from "ramda";
2877
3046
  import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
2878
3047
 
2879
3048
  // src/tokens/process/formats/js-tokens.ts
2880
- import * as R14 from "ramda";
3049
+ import * as R15 from "ramda";
2881
3050
  import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
2882
- var groupByType = R14.groupBy((token) => getType(token));
2883
- var removeUnwatedTokens = R14.pipe(
2884
- R14.reject((token) => isColorCategoryToken(token)),
2885
- R14.reject((token) => R14.any((path) => path.startsWith("_"))(token.path))
3051
+ var groupByType = R15.groupBy((token) => getType(token));
3052
+ var removeUnwatedTokens = R15.pipe(
3053
+ R15.reject((token) => isColorCategoryToken(token)),
3054
+ R15.reject((token) => R15.any((path) => path.startsWith("_"))(token.path))
2886
3055
  );
2887
- var dissocExtensions = R14.pipe(R14.dissoc("$extensions"), R14.dissocPath(["original", "$extensions"]));
2888
- var removeUnwatedProps = R14.map((token) => dissocExtensions(token));
2889
- var toCssVarName = R14.pipe(R14.split(":"), R14.head, R14.trim);
3056
+ var dissocExtensions = R15.pipe(R15.dissoc("$extensions"), R15.dissocPath(["original", "$extensions"]));
3057
+ var removeUnwatedProps = R15.map((token) => dissocExtensions(token));
3058
+ var toCssVarName = R15.pipe(R15.split(":"), R15.head, R15.trim);
2890
3059
  var jsTokens = {
2891
3060
  name: "ds/js-tokens",
2892
3061
  format: async ({ dictionary, file, options }) => {
@@ -2897,7 +3066,7 @@ var jsTokens = {
2897
3066
  format: "css",
2898
3067
  usesDtcg
2899
3068
  });
2900
- const formatTokens2 = R14.map((token) => {
3069
+ const formatTokens2 = R15.map((token) => {
2901
3070
  if (pathStartsWithOneOf(["size", "_size"], token)) {
2902
3071
  const { calc, name } = overrideSizingFormula(format, token);
2903
3072
  return {
@@ -2911,7 +3080,7 @@ var jsTokens = {
2911
3080
  name: toCssVarName(format(token))
2912
3081
  };
2913
3082
  });
2914
- const processTokens = R14.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
3083
+ const processTokens = R15.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
2915
3084
  const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
2916
3085
  const content = Object.entries(tokens).map(
2917
3086
  ([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
@@ -2936,9 +3105,9 @@ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
2936
3105
  destination: `${colorScheme2}.ts`,
2937
3106
  format: jsTokens.name,
2938
3107
  filter: (token) => {
2939
- if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R15.includes("semantic", token.filePath))
3108
+ if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R16.includes("semantic", token.filePath))
2940
3109
  return false;
2941
- const isSemanticColor = R15.includes("semantic", token.filePath) && typeEquals(["color"], token);
3110
+ const isSemanticColor = R16.includes("semantic", token.filePath) && typeEquals(["color"], token);
2942
3111
  const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
2943
3112
  return isSemanticColor || wantedTypes;
2944
3113
  }
@@ -3004,19 +3173,19 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
3004
3173
  };
3005
3174
 
3006
3175
  // src/tokens/process/utils/getMultidimensionalThemes.ts
3007
- import chalk from "chalk";
3176
+ import chalk2 from "chalk";
3008
3177
  import { kebabCase } from "change-case";
3009
- import * as R16 from "ramda";
3178
+ import * as R17 from "ramda";
3010
3179
  var getMultidimensionalThemes = (processed$themes, dimensions) => {
3011
3180
  const verboseLogging = buildOptions?.verbose;
3012
3181
  const grouped$themes = groupThemes(processed$themes);
3013
3182
  const permutations = permutateThemes(grouped$themes);
3014
3183
  const ALL_DEPENDENT_ON = ["theme"];
3015
- const keys2 = R16.keys(grouped$themes);
3184
+ const keys2 = R17.keys(grouped$themes);
3016
3185
  const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
3017
3186
  if (verboseLogging) {
3018
- console.log(chalk.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
3019
- console.log(chalk.cyan(` (ignoring permutations for ${nonDependentKeys})`));
3187
+ console.log(chalk2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
3188
+ console.log(chalk2.cyan(` (ignoring permutations for ${nonDependentKeys})`));
3020
3189
  }
3021
3190
  return permutations.filter((val) => {
3022
3191
  const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
@@ -3052,7 +3221,7 @@ function groupThemes(themes) {
3052
3221
  }
3053
3222
  return groups;
3054
3223
  }
3055
- var hasUnknownProps = R16.pipe(R16.values, R16.none(R16.equals("unknown")), R16.not);
3224
+ var hasUnknownProps = R17.pipe(R17.values, R17.none(R17.equals("unknown")), R17.not);
3056
3225
  function permutateThemes(groups) {
3057
3226
  const separator = "_";
3058
3227
  const permutations = cartesian(Object.values(groups));
@@ -3062,8 +3231,8 @@ function permutateThemes(groups) {
3062
3231
  const { group, name, selectedTokenSets } = theme;
3063
3232
  let updatedPermutation = acc.permutation;
3064
3233
  if (group) {
3065
- const groupProp = R16.lensProp(group);
3066
- updatedPermutation = R16.set(groupProp, name, updatedPermutation);
3234
+ const groupProp = R17.lensProp(group);
3235
+ updatedPermutation = R17.set(groupProp, name, updatedPermutation);
3067
3236
  }
3068
3237
  const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
3069
3238
  const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -3109,6 +3278,12 @@ function filterTokenSets(tokensets) {
3109
3278
  function cartesian(a) {
3110
3279
  return a.reduce((a2, b) => a2.flatMap((d) => b.map((e) => [d, e].flat())));
3111
3280
  }
3281
+ var getCustomColors = (processed$themes, colorGroups) => processed$themes.filter((x) => {
3282
+ if (!x.group) {
3283
+ return false;
3284
+ }
3285
+ return colorGroups.includes(x.group);
3286
+ }).map((x) => x.name);
3112
3287
 
3113
3288
  // src/tokens/process/configs.ts
3114
3289
  void register(StyleDictionary, { withSDBuiltins: false });
@@ -3147,7 +3322,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
3147
3322
  obj.filePath = tokenSet;
3148
3323
  }
3149
3324
  });
3150
- tokenSource.tokens = R17.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
3325
+ tokenSource.tokens = R18.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
3151
3326
  }
3152
3327
  }
3153
3328
  } else {
@@ -3191,12 +3366,6 @@ var initResult = {
3191
3366
  };
3192
3367
  var buildOptions;
3193
3368
  var sd = new StyleDictionary2();
3194
- var getCustomColors = (processed$themes, colorGroups) => processed$themes.filter((x) => {
3195
- if (!x.group) {
3196
- return false;
3197
- }
3198
- return colorGroups.includes(x.group);
3199
- }).map((x) => x.name);
3200
3369
  var buildConfigs = {
3201
3370
  typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
3202
3371
  "color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
@@ -3237,46 +3406,54 @@ var buildConfigs = {
3237
3406
  // },
3238
3407
  };
3239
3408
  async function processPlatform(options) {
3240
- const { type, $themes } = options;
3409
+ const { type, processed$themes } = options;
3241
3410
  const platform = "css";
3242
3411
  const tokenSets = type === "format" ? options.tokenSets : void 0;
3243
3412
  const tokensDir = type === "build" ? options.tokensDir : void 0;
3244
3413
  const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
3245
3414
  if (UNSAFE_DEFAULT_COLOR) {
3246
3415
  console.warn(
3247
- chalk2.yellow(
3416
+ chalk3.yellow(
3248
3417
  `
3249
- \u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk2.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
3418
+ \u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk3.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
3250
3419
  )
3251
3420
  );
3252
3421
  }
3253
3422
  const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
3254
3423
  if (UNSAFE_COLOR_GROUPS.length > 0) {
3255
3424
  console.warn(
3256
- chalk2.yellow(
3425
+ chalk3.yellow(
3257
3426
  `
3258
- \u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk2.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
3427
+ \u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk3.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
3259
3428
  )
3260
3429
  );
3261
3430
  }
3262
3431
  const colorGroups = UNSAFE_COLOR_GROUPS.length > 0 ? UNSAFE_COLOR_GROUPS : [colorCategories.main, colorCategories.support].map((c) => `${c}-color`);
3263
3432
  buildOptions = options;
3264
3433
  buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
3265
- const processed$themes = $themes.map(processThemeObject).filter((theme) => R18.not(theme.group === "size" && theme.name !== "medium"));
3266
- const customColors = getCustomColors(processed$themes, colorGroups);
3434
+ buildOptions.colorGroups = colorGroups;
3435
+ const filteredProcessed$themes = processed$themes.filter(
3436
+ (theme) => R19.not(theme.group === "size" && theme.name !== "medium")
3437
+ );
3438
+ const customColors = getCustomColors(filteredProcessed$themes, colorGroups);
3267
3439
  if (!buildOptions.defaultColor) {
3268
- const firstMainColor = R18.head(customColors);
3440
+ const firstMainColor = R19.head(customColors);
3269
3441
  buildOptions.defaultColor = firstMainColor;
3270
3442
  }
3271
3443
  if (buildOptions.defaultColor) {
3272
3444
  console.log(`
3273
- \u{1F3A8} Using ${chalk2.blue(buildOptions.defaultColor)} as default color`);
3445
+ \u{1F3A8} Using ${chalk3.blue(buildOptions.defaultColor)} as default color`);
3274
3446
  }
3275
- const buildAndSdConfigs = R18.map((buildConfig) => {
3276
- const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
3277
- tokensDir,
3278
- tokenSets
3279
- });
3447
+ const buildAndSdConfigs = R19.map((buildConfig) => {
3448
+ const sdConfigs = getConfigsForThemeDimensions(
3449
+ buildConfig.getConfig,
3450
+ filteredProcessed$themes,
3451
+ buildConfig.dimensions,
3452
+ {
3453
+ tokensDir,
3454
+ tokenSets
3455
+ }
3456
+ );
3280
3457
  const unknownConfigs = buildConfig.dimensions.map(
3281
3458
  (dimension) => sdConfigs.filter((x) => x.permutation[dimension] === "unknown")
3282
3459
  );
@@ -3300,23 +3477,22 @@ async function processPlatform(options) {
3300
3477
  "warning-color": [initResult],
3301
3478
  "info-color": [initResult],
3302
3479
  semantic: [initResult],
3303
- typography: [initResult],
3304
- types: [initResult]
3480
+ typography: [initResult]
3305
3481
  };
3306
3482
  try {
3307
- for (const [buildName, { buildConfig, sdConfigs }] of R18.toPairs(buildAndSdConfigs)) {
3483
+ for (const [buildName, { buildConfig, sdConfigs }] of R19.toPairs(buildAndSdConfigs)) {
3308
3484
  if (!(buildConfig.enabled?.() ?? true)) {
3309
3485
  continue;
3310
3486
  }
3311
3487
  if (sdConfigs.length > 0) {
3312
3488
  console.log(`
3313
- \u{1F371} Building ${chalk2.green(buildConfig.name ?? buildName)}`);
3489
+ \u{1F371} Building ${chalk3.green(buildConfig.name ?? buildName)}`);
3314
3490
  const results = await Promise.all(
3315
3491
  sdConfigs.map(async (sdConfig) => {
3316
3492
  const { config, permutation } = sdConfig;
3317
3493
  const modes = ["theme", ...buildConfig.dimensions];
3318
3494
  const modeMessage = modes.map((x) => permutation[x]).join(" - ");
3319
- const logMessage = R18.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
3495
+ const logMessage = R19.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
3320
3496
  console.log(logMessage);
3321
3497
  const sdOptions = { cache: true };
3322
3498
  const sdExtended = await sd.extend(config);
@@ -3336,198 +3512,8 @@ async function processPlatform(options) {
3336
3512
  }
3337
3513
  throw err;
3338
3514
  }
3339
- const colorsFileName = "colors.d.ts";
3340
- const reactColorTypes = await createColorTypeDeclaration(customColors);
3341
- processedBuilds.types = [
3342
- {
3343
- ...initResult,
3344
- formatted: [{ output: reactColorTypes, destination: colorsFileName }]
3345
- }
3346
- ];
3347
3515
  return processedBuilds;
3348
3516
  }
3349
- async function createColorTypeDeclaration(colors) {
3350
- console.log(`
3351
- \u{1F371} Building ${chalk2.green("type declarations")}`);
3352
- const typeDeclaration = `
3353
- import type {} from '@digdir/designsystemet-react/colors';
3354
-
3355
- declare module '@digdir/designsystemet-react/colors' {
3356
- export interface MainAndSupportColors {
3357
- ${colors.map((color) => ` ${color}: never;`).join("\n")}
3358
- }
3359
- }
3360
- `.trimStart();
3361
- return typeDeclaration;
3362
- }
3363
-
3364
- // src/tokens/process/theme.ts
3365
- import * as R19 from "ramda";
3366
- import chalk3 from "chalk";
3367
-
3368
- // package.json
3369
- var package_default = {
3370
- name: "@digdir/designsystemet",
3371
- version: "1.0.8",
3372
- description: "CLI for Designsystemet",
3373
- author: "Designsystemet team",
3374
- engines: {
3375
- node: ">=22.16.0"
3376
- },
3377
- repository: {
3378
- type: "git",
3379
- url: "git+https://github.com/digdir/designsystemet.git"
3380
- },
3381
- homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
3382
- license: "MIT",
3383
- type: "module",
3384
- main: "./dist/src/index.js",
3385
- files: [
3386
- "./dist/**",
3387
- "./configs/**"
3388
- ],
3389
- bin: "dist/bin/designsystemet.js",
3390
- exports: {
3391
- ".": {
3392
- import: "./dist/src/index.js"
3393
- },
3394
- "./color": {
3395
- import: "./dist/src/colors/index.js"
3396
- },
3397
- "./tokens": {
3398
- import: "./dist/src/tokens/index.js"
3399
- }
3400
- },
3401
- publishConfig: {
3402
- access: "public"
3403
- },
3404
- scripts: {
3405
- designsystemet: "tsx ./bin/designsystemet.ts",
3406
- "build:tokens": "pnpm run designsystemet tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
3407
- "build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
3408
- build: "tsup && pnpm build:types && pnpm build:json-schema",
3409
- "build:types": "tsc --emitDeclarationOnly --declaration",
3410
- "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
3411
- types: "tsc --noEmit",
3412
- "test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
3413
- "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
3414
- "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
3415
- "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
3416
- "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
3417
- "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
3418
- test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
3419
- "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
3420
- "update:template": "tsx ./src/scripts/update-template.ts",
3421
- "update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
3422
- verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
3423
- },
3424
- dependencies: {
3425
- "@commander-js/extra-typings": "^13.1.0",
3426
- "@tokens-studio/sd-transforms": "1.3.0",
3427
- "apca-w3": "^0.1.9",
3428
- chalk: "^5.4.1",
3429
- "change-case": "^5.4.4",
3430
- "chroma-js": "^3.1.2",
3431
- "colorjs.io": "^0.6.0-alpha.1",
3432
- commander: "^13.1.0",
3433
- "fast-glob": "^3.3.3",
3434
- hsluv: "^1.0.1",
3435
- "object-hash": "^3.0.0",
3436
- postcss: "^8.5.3",
3437
- ramda: "^0.30.1",
3438
- "style-dictionary": "^4.4.0",
3439
- zod: "^3.25.30",
3440
- "zod-validation-error": "^3.4.1"
3441
- },
3442
- devDependencies: {
3443
- "@tokens-studio/types": "0.5.2",
3444
- "@types/apca-w3": "^0.1.3",
3445
- "@types/chroma-js": "^3.1.1",
3446
- "@types/fs-extra": "^11.0.4",
3447
- "@types/glob": "^8.1.0",
3448
- "@types/jscodeshift": "^0.12.0",
3449
- "@types/node": "^22.15.21",
3450
- "@types/object-hash": "^3.0.6",
3451
- "@types/ramda": "^0.30.2",
3452
- "fs-extra": "^11.3.0",
3453
- "ts-toolbelt": "^9.6.0",
3454
- tslib: "^2.8.1",
3455
- tsup: "^8.5.0",
3456
- tsx: "^4.19.4",
3457
- typescript: "^5.8.3"
3458
- }
3459
- };
3460
-
3461
- // src/tokens/process/theme.ts
3462
- var defaultFileHeader = `build: v${package_default.version}`;
3463
- var createThemeCSSFiles = ({
3464
- processedBuilds,
3465
- fileHeader: fileHeader2 = defaultFileHeader
3466
- }) => {
3467
- const groupedByTheme = {};
3468
- for (const [_, buildResults] of Object.entries(R19.dissoc("types", processedBuilds))) {
3469
- for (const buildResult of buildResults) {
3470
- const themeName = buildResult.permutation.theme;
3471
- const newOutputs = buildResult.formatted;
3472
- if (R19.isNotEmpty(newOutputs)) {
3473
- const currentOutputs = groupedByTheme[themeName] ?? [];
3474
- groupedByTheme[themeName] = R19.concat(currentOutputs, newOutputs);
3475
- }
3476
- }
3477
- }
3478
- const sortOrder = [
3479
- "color-scheme/light",
3480
- "typography/secondary",
3481
- "semantic",
3482
- "color-scheme/dark",
3483
- "color-scheme/contrast",
3484
- "typography/primary",
3485
- "color/"
3486
- ];
3487
- const sortByDefinedOrder = R19.sortBy((file) => {
3488
- const filePath = file.destination || "";
3489
- const sortIndex = sortOrder.findIndex((sortElement) => {
3490
- if (sortElement.endsWith("/")) {
3491
- return filePath.includes(sortElement);
3492
- }
3493
- return filePath.includes(`${sortElement}.css`);
3494
- });
3495
- if (sortIndex === -1) {
3496
- console.error(
3497
- chalk3.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
3498
- );
3499
- console.log(
3500
- chalk3.dim(
3501
- `
3502
- The section will currently be added to the end of the entry file, but the exact
3503
- order may change due to nondeterminism.`.trim()
3504
- )
3505
- );
3506
- return Infinity;
3507
- }
3508
- return sortIndex;
3509
- });
3510
- const header = `@charset "UTF-8";
3511
- /*
3512
- ${fileHeader2}
3513
- */
3514
-
3515
- `;
3516
- const sortAlphabetically = R19.sort(R19.ascend((x) => x.destination || ""));
3517
- const pickOutputs = R19.map(R19.view(R19.lensProp("output")));
3518
- const themeCSSFile = R19.pipe(
3519
- sortAlphabetically,
3520
- sortByDefinedOrder,
3521
- pickOutputs,
3522
- R19.join("\n"),
3523
- (content) => header + content
3524
- );
3525
- const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
3526
- destination: `${theme}.css`,
3527
- output: themeCSSFile(files)
3528
- }));
3529
- return themeCSSFiles;
3530
- };
3531
3517
 
3532
3518
  // src/tokens/format.ts
3533
3519
  var formatTokens = async (options) => {
@@ -3540,9 +3526,10 @@ var formatTokens = async (options) => {
3540
3526
  var formatTheme = async (themeConfig) => {
3541
3527
  const { tokenSets } = await createTokens(themeConfig);
3542
3528
  const $themes = await generate$Themes(["dark", "light"], [themeConfig.name], themeConfig.colors);
3529
+ const processed$themes = $themes.map(processThemeObject);
3543
3530
  const processedBuilds = await formatTokens({
3544
3531
  tokenSets,
3545
- $themes,
3532
+ processed$themes,
3546
3533
  verbose: false,
3547
3534
  preview: false
3548
3535
  });