@digdir/designsystemet 1.0.8 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/dist/bin/config.js +20 -19
  2. package/dist/bin/designsystemet.js +421 -359
  3. package/dist/src/colors/index.d.ts +2 -2
  4. package/dist/src/colors/index.d.ts.map +1 -1
  5. package/dist/src/colors/index.js +143 -143
  6. package/dist/src/colors/theme.d.ts +1 -2
  7. package/dist/src/colors/theme.d.ts.map +1 -1
  8. package/dist/src/config.d.ts.map +1 -1
  9. package/dist/src/config.js +20 -19
  10. package/dist/src/index.js +394 -394
  11. package/dist/src/scripts/createJsonSchema.js +19 -19
  12. package/dist/src/scripts/update-template.d.ts.map +1 -1
  13. package/dist/src/tokens/build.d.ts.map +1 -1
  14. package/dist/src/tokens/build.js +89 -28
  15. package/dist/src/tokens/create/generators/$designsystemet.js +12 -13
  16. package/dist/src/tokens/create/generators/color.js +21 -21
  17. package/dist/src/tokens/create/write.js +13 -14
  18. package/dist/src/tokens/create.d.ts +1 -0
  19. package/dist/src/tokens/create.d.ts.map +1 -1
  20. package/dist/src/tokens/create.js +22 -21
  21. package/dist/src/tokens/format.d.ts.map +1 -1
  22. package/dist/src/tokens/format.js +883 -884
  23. package/dist/src/tokens/index.d.ts +2 -2
  24. package/dist/src/tokens/index.d.ts.map +1 -1
  25. package/dist/src/tokens/index.js +271 -271
  26. package/dist/src/tokens/process/configs/color.d.ts.map +1 -1
  27. package/dist/src/tokens/process/configs/color.js +5 -5
  28. package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -1
  29. package/dist/src/tokens/process/configs/semantic.js +5 -5
  30. package/dist/src/tokens/process/configs/storefront.d.ts.map +1 -1
  31. package/dist/src/tokens/process/configs/storefront.js +1 -1
  32. package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
  33. package/dist/src/tokens/process/configs/typography.js +5 -5
  34. package/dist/src/tokens/process/configs.d.ts.map +1 -1
  35. package/dist/src/tokens/process/configs.js +5 -5
  36. package/dist/src/tokens/process/formats/css/color.js +2 -2
  37. package/dist/src/tokens/process/formats/css/semantic.js +2 -2
  38. package/dist/src/tokens/process/formats/css/typography.js +1 -1
  39. package/dist/src/tokens/process/formats/css.js +5 -5
  40. package/dist/src/tokens/process/formats/js-tokens.js +1 -1
  41. package/dist/src/tokens/process/output/tailwind.d.ts +3 -0
  42. package/dist/src/tokens/process/output/tailwind.d.ts.map +1 -0
  43. package/dist/src/tokens/process/output/tailwind.js +59 -0
  44. package/dist/src/tokens/process/{theme.d.ts → output/theme.d.ts} +2 -2
  45. package/dist/src/tokens/process/output/theme.d.ts.map +1 -0
  46. package/dist/src/tokens/process/{theme.js → output/theme.js} +15 -16
  47. package/dist/src/tokens/process/platform.d.ts +3 -1
  48. package/dist/src/tokens/process/platform.d.ts.map +1 -1
  49. package/dist/src/tokens/process/platform.js +5 -5
  50. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +5 -5
  51. package/dist/src/tokens/types.d.ts +1 -1
  52. package/dist/src/tokens/types.d.ts.map +1 -1
  53. package/dist/src/tokens/utils.d.ts.map +1 -1
  54. package/package.json +12 -13
  55. package/dist/src/tokens/process/theme.d.ts.map +0 -1
@@ -1,6 +1,337 @@
1
1
  // src/tokens/format.ts
2
2
  import * as R20 from "ramda";
3
3
 
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 = {}));
10
+
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"
201
+ },
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"
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"
237
+ },
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
+
4
335
  // src/tokens/create/defaults.ts
5
336
  import * as R from "ramda";
6
337
 
@@ -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;
@@ -1767,648 +2098,484 @@ var color_template_default2 = {
1767
2098
  },
1768
2099
  "text-default": {
1769
2100
  $type: "color",
1770
- $value: "{color.<color>.text-default}"
1771
- },
1772
- "base-default": {
1773
- $type: "color",
1774
- $value: "{color.<color>.base-default}"
1775
- },
1776
- "base-hover": {
1777
- $type: "color",
1778
- $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}"
2101
+ $value: "{color.<color>.text-default}"
1961
2102
  },
1962
- "14": {
2103
+ "base-default": {
1963
2104
  $type: "color",
1964
- $value: "{<theme>.<color>.14}"
2105
+ $value: "{color.<color>.base-default}"
1965
2106
  },
1966
- "15": {
2107
+ "base-hover": {
1967
2108
  $type: "color",
1968
- $value: "{<theme>.<color>.15}"
2109
+ $value: "{color.<color>.base-hover}"
1969
2110
  },
1970
- "16": {
2111
+ "base-active": {
1971
2112
  $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 = {}));
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
+ };
2214
2124
 
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 = {}));
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]
2136
+ ];
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
+ };
2226
2178
 
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 = {}));
2179
+ // src/tokens/create/generators/theme.ts
2180
+ import * as R6 from "ramda";
2240
2181
 
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)
2259
- ];
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"
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}"
2318
2292
  },
2319
- contrast: {
2320
- name: "Contrast",
2321
- selectedTokenSets: {},
2322
- id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
2323
- $figmaCollectionId: "VariableCollectionId:34811:5472",
2324
- $figmaModeId: "34811:2"
2293
+ "14": {
2294
+ $type: "color",
2295
+ $value: "{<theme>.<color>.14}"
2296
+ },
2297
+ "15": {
2298
+ $type: "color",
2299
+ $value: "{<theme>.<color>.15}"
2300
+ },
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.0",
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
+ build: "tsup && pnpm build:types && pnpm build:json-schema",
2452
+ "build:types": "tsc --emitDeclarationOnly --declaration",
2453
+ "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
2454
+ types: "tsc --noEmit",
2455
+ "test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
2456
+ "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
2457
+ "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
2458
+ "test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
2459
+ "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
2460
+ "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
2461
+ "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
2462
+ "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
2463
+ test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
2464
+ "digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
2465
+ "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
2466
+ "update:template": "tsx ./src/scripts/update-template.ts",
2467
+ "update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
2468
+ verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
2469
+ },
2470
+ dependencies: {
2471
+ "@commander-js/extra-typings": "^14.0.0",
2472
+ "@tokens-studio/sd-transforms": "1.3.0",
2473
+ "apca-w3": "^0.1.9",
2474
+ chalk: "^5.4.1",
2475
+ "change-case": "^5.4.4",
2476
+ "chroma-js": "^3.1.2",
2477
+ "colorjs.io": "^0.6.0-alpha.1",
2478
+ commander: "^13.1.0",
2479
+ "fast-glob": "^3.3.3",
2480
+ hsluv: "^1.0.1",
2481
+ "object-hash": "^3.0.0",
2482
+ postcss: "^8.5.5",
2483
+ ramda: "^0.30.1",
2484
+ "style-dictionary": "^4.4.0",
2485
+ zod: "^3.25.64",
2486
+ "zod-validation-error": "^3.5.0"
2487
+ },
2488
+ devDependencies: {
2489
+ "@tokens-studio/types": "0.5.2",
2490
+ "@types/apca-w3": "^0.1.3",
2491
+ "@types/chroma-js": "^3.1.1",
2492
+ "@types/fs-extra": "^11.0.4",
2493
+ "@types/glob": "^8.1.0",
2494
+ "@types/node": "^22.15.31",
2495
+ "@types/object-hash": "^3.0.6",
2496
+ "@types/ramda": "^0.30.2",
2497
+ "fs-extra": "^11.3.0",
2498
+ tslib: "^2.8.1",
2499
+ tsup: "^8.5.0",
2500
+ tsx: "^4.20.3",
2501
+ typescript: "^5.8.3"
2502
+ }
2503
+ };
2504
+
2505
+ // src/tokens/process/output/theme.ts
2506
+ var defaultFileHeader = `build: v${package_default.version}`;
2507
+ var createThemeCSSFiles = ({
2508
+ processedBuilds,
2509
+ fileHeader: fileHeader2 = defaultFileHeader
2510
+ }) => {
2511
+ const groupedByTheme = {};
2512
+ for (const [_, buildResults] of Object.entries(R7.dissoc("types", processedBuilds))) {
2513
+ for (const buildResult of buildResults) {
2514
+ const themeName = buildResult.permutation.theme;
2515
+ const newOutputs = buildResult.formatted;
2516
+ if (R7.isNotEmpty(newOutputs)) {
2517
+ const currentOutputs = groupedByTheme[themeName] ?? [];
2518
+ groupedByTheme[themeName] = R7.concat(currentOutputs, newOutputs);
2519
+ }
2405
2520
  }
2521
+ }
2522
+ const sortOrder = [
2523
+ "color-scheme/light",
2524
+ "typography/secondary",
2525
+ "semantic",
2526
+ "color-scheme/dark",
2527
+ "color-scheme/contrast",
2528
+ "typography/primary",
2529
+ "color/"
2406
2530
  ];
2407
- }
2531
+ const sortByDefinedOrder = R7.sortBy((file) => {
2532
+ const filePath = file.destination || "";
2533
+ const sortIndex = sortOrder.findIndex((sortElement) => {
2534
+ if (sortElement.endsWith("/")) {
2535
+ return filePath.includes(sortElement);
2536
+ }
2537
+ return filePath.includes(`${sortElement}.css`);
2538
+ });
2539
+ if (sortIndex === -1) {
2540
+ console.error(
2541
+ chalk.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
2542
+ );
2543
+ console.log(
2544
+ chalk.dim(
2545
+ `
2546
+ The section will currently be added to the end of the entry file, but the exact
2547
+ order may change due to nondeterminism.`.trim()
2548
+ )
2549
+ );
2550
+ return Infinity;
2551
+ }
2552
+ return sortIndex;
2553
+ });
2554
+ const header = `@charset "UTF-8";
2555
+ /*
2556
+ ${fileHeader2}
2557
+ */
2558
+
2559
+ `;
2560
+ const sortAlphabetically = R7.sort(R7.ascend((x) => x.destination || ""));
2561
+ const pickOutputs = R7.map(R7.view(R7.lensProp("output")));
2562
+ const themeCSSFile = R7.pipe(
2563
+ sortAlphabetically,
2564
+ sortByDefinedOrder,
2565
+ pickOutputs,
2566
+ R7.join("\n"),
2567
+ (content) => header + content
2568
+ );
2569
+ const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
2570
+ destination: `${theme}.css`,
2571
+ output: themeCSSFile(files)
2572
+ }));
2573
+ return themeCSSFiles;
2574
+ };
2408
2575
 
2409
2576
  // src/tokens/process/platform.ts
2410
- import chalk2 from "chalk";
2411
- import * as R18 from "ramda";
2577
+ import chalk3 from "chalk";
2578
+ import * as R19 from "ramda";
2412
2579
  import StyleDictionary2 from "style-dictionary";
2413
2580
 
2414
2581
  // src/tokens/types.ts
@@ -2419,30 +2586,30 @@ var colorCategories = {
2419
2586
 
2420
2587
  // src/tokens/process/configs.ts
2421
2588
  import { register } from "@tokens-studio/sd-transforms";
2422
- import * as R17 from "ramda";
2589
+ import * as R18 from "ramda";
2423
2590
  import StyleDictionary from "style-dictionary";
2424
2591
 
2425
2592
  // 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));
2593
+ import * as R8 from "ramda";
2594
+ var mapToLowerCase = R8.map(R8.toLower);
2595
+ var hasAnyTruth = R8.any(R8.equals(true));
2429
2596
  var getType = (token) => (token.$type ?? token.type) || "";
2430
2597
  var getValue = (token) => token.$value ?? token.value;
2431
- var typeEquals = R7.curry(
2598
+ var typeEquals = R8.curry(
2432
2599
  (types, token) => {
2433
- if (R7.isNil(token)) {
2600
+ if (R8.isNil(token)) {
2434
2601
  return false;
2435
2602
  }
2436
- return R7.includes(R7.toLower(getType(token)), R7.map(R7.toLower, Array.isArray(types) ? types : [types]));
2603
+ return R8.includes(R8.toLower(getType(token)), R8.map(R8.toLower, Array.isArray(types) ? types : [types]));
2437
2604
  }
2438
2605
  );
2439
- var pathStartsWithOneOf = R7.curry(
2606
+ var pathStartsWithOneOf = R8.curry(
2440
2607
  (paths, token) => {
2441
- if (R7.isNil(token)) {
2608
+ if (R8.isNil(token)) {
2442
2609
  return false;
2443
2610
  }
2444
2611
  const tokenPath = mapToLowerCase(token.path);
2445
- const matchPathsStartingWith = R7.map((path) => R7.startsWith([path], tokenPath), mapToLowerCase(paths));
2612
+ const matchPathsStartingWith = R8.map((path) => R8.startsWith([path], tokenPath), mapToLowerCase(paths));
2446
2613
  return hasAnyTruth(matchPathsStartingWith);
2447
2614
  }
2448
2615
  );
@@ -2450,7 +2617,7 @@ function isSemanticToken(token) {
2450
2617
  return token.filePath.includes("semantic/");
2451
2618
  }
2452
2619
  function isSemanticColorToken(token, color) {
2453
- return token.filePath.includes("semantic/") && R7.startsWith(["color", color], token.path);
2620
+ return token.filePath.includes("semantic/") && R8.startsWith(["color", color], token.path);
2454
2621
  }
2455
2622
  function isGlobalColorToken(token) {
2456
2623
  return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
@@ -2461,7 +2628,7 @@ function isColorCategoryToken(token, category) {
2461
2628
  (colorCategory2) => isColorCategoryToken(token, colorCategory2)
2462
2629
  );
2463
2630
  }
2464
- return R7.startsWith(["color", category], token.path);
2631
+ return R8.startsWith(["color", category], token.path);
2465
2632
  }
2466
2633
  var isDigit = (s) => /^\d+$/.test(s);
2467
2634
  function traverseObj(obj, fn) {
@@ -2477,7 +2644,7 @@ function traverseObj(obj, fn) {
2477
2644
  return obj;
2478
2645
  }
2479
2646
  function inlineTokens(shouldInline, tokens) {
2480
- const [inlineableTokens, otherTokens] = R7.partition(shouldInline, tokens);
2647
+ const [inlineableTokens, otherTokens] = R8.partition(shouldInline, tokens);
2481
2648
  return otherTokens.map((token) => {
2482
2649
  let transformed = getValue(token.original);
2483
2650
  for (const ref of inlineableTokens) {
@@ -2486,16 +2653,16 @@ function inlineTokens(shouldInline, tokens) {
2486
2653
  transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
2487
2654
  }
2488
2655
  }
2489
- const tokenWithInlinedRefs = R7.set(R7.lensPath(["original", "$value"]), transformed, token);
2656
+ const tokenWithInlinedRefs = R8.set(R8.lensPath(["original", "$value"]), transformed, token);
2490
2657
  return tokenWithInlinedRefs;
2491
2658
  });
2492
2659
  }
2493
2660
 
2494
2661
  // src/tokens/process/configs/color.ts
2495
- import * as R12 from "ramda";
2662
+ import * as R13 from "ramda";
2496
2663
 
2497
2664
  // src/tokens/process/formats/css/color.ts
2498
- import * as R8 from "ramda";
2665
+ import * as R9 from "ramda";
2499
2666
  import { createPropertyFormatter } from "style-dictionary/utils";
2500
2667
  var prefersColorScheme = (colorScheme2, content) => `
2501
2668
  @media (prefers-color-scheme: ${colorScheme2}) {
@@ -2504,7 +2671,7 @@ var prefersColorScheme = (colorScheme2, content) => `
2504
2671
  `;
2505
2672
  var colorScheme = {
2506
2673
  name: "ds/css-colorscheme",
2507
- format: async ({ dictionary, file, options, platform }) => {
2674
+ format: async ({ dictionary, options, platform }) => {
2508
2675
  const { allTokens } = dictionary;
2509
2676
  const { outputReferences, usesDtcg } = options;
2510
2677
  const { selector, colorScheme: colorScheme2, layer } = platform;
@@ -2519,8 +2686,8 @@ var colorScheme = {
2519
2686
  color-scheme: ${colorScheme_};
2520
2687
  ` : "";
2521
2688
  const filteredAllTokens = allTokens.filter(
2522
- R8.allPass([
2523
- R8.anyPass([
2689
+ R9.allPass([
2690
+ R9.anyPass([
2524
2691
  // Include semantic tokens in the output
2525
2692
  isSemanticToken,
2526
2693
  // Include global color tokens
@@ -2536,7 +2703,7 @@ ${formattedTokens}
2536
2703
  ${colorSchemeProperty}}
2537
2704
  `;
2538
2705
  const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
2539
- const body = R8.isNotNil(layer) ? `@layer ${layer} {
2706
+ const body = R9.isNotNil(layer) ? `@layer ${layer} {
2540
2707
  ${selector} ${content} ${autoSelectorContent}
2541
2708
  }
2542
2709
  ` : `${selector} ${content} ${autoSelectorContent}
@@ -2546,10 +2713,10 @@ ${selector} ${content} ${autoSelectorContent}
2546
2713
  };
2547
2714
  var colorCategory = {
2548
2715
  name: "ds/css-colorcategory",
2549
- format: async ({ dictionary, file, options, platform }) => {
2716
+ format: async ({ dictionary, options, platform }) => {
2550
2717
  const { outputReferences, usesDtcg } = options;
2551
2718
  const { selector, layer } = platform;
2552
- const format = R8.compose(
2719
+ const format = R9.compose(
2553
2720
  createPropertyFormatter({
2554
2721
  outputReferences,
2555
2722
  dictionary,
@@ -2570,7 +2737,7 @@ var colorCategory = {
2570
2737
  ${formattedTokens}
2571
2738
  }
2572
2739
  `;
2573
- const body = R8.isNotNil(layer) ? `@layer ${layer} {
2740
+ const body = R9.isNotNil(layer) ? `@layer ${layer} {
2574
2741
  ${selector} ${content}
2575
2742
  }
2576
2743
  ` : `${selector} ${content}
@@ -2580,16 +2747,16 @@ ${selector} ${content}
2580
2747
  };
2581
2748
 
2582
2749
  // src/tokens/process/formats/css/semantic.ts
2583
- import * as R9 from "ramda";
2750
+ import * as R10 from "ramda";
2584
2751
  import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
2585
2752
  var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
2586
2753
  var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
2587
2754
  var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
2588
- var isInlineTokens = R9.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
2755
+ var isInlineTokens = R10.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
2589
2756
  var overrideSizingFormula = (format, token) => {
2590
2757
  const [name, value] = format(token).split(":");
2591
2758
  const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
2592
- const round = `round(down, ${calc}, 0.0625rem)`;
2759
+ const round = `round(down, ${calc}, 1px)`;
2593
2760
  return {
2594
2761
  name,
2595
2762
  round,
@@ -2597,7 +2764,7 @@ var overrideSizingFormula = (format, token) => {
2597
2764
  };
2598
2765
  };
2599
2766
  var formatSizingTokens = (format, tokens) => {
2600
- const { round, calc } = R9.reduce(
2767
+ const { round, calc } = R10.reduce(
2601
2768
  (acc, token) => {
2602
2769
  const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
2603
2770
  return {
@@ -2617,7 +2784,7 @@ ${round.join("\n")}
2617
2784
  };
2618
2785
  var semantic = {
2619
2786
  name: "ds/css-semantic",
2620
- format: async ({ dictionary, file, options, platform }) => {
2787
+ format: async ({ dictionary, options, platform }) => {
2621
2788
  const { outputReferences, usesDtcg } = options;
2622
2789
  const { selector, layer } = platform;
2623
2790
  const format = createPropertyFormatter2({
@@ -2627,17 +2794,17 @@ var semantic = {
2627
2794
  usesDtcg
2628
2795
  });
2629
2796
  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(
2797
+ const filteredTokens = R10.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
2798
+ const [sizingTokens, restTokens] = R10.partition(
2632
2799
  (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
2633
2800
  filteredTokens
2634
2801
  );
2635
- const formattedTokens = [R9.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
2802
+ const formattedTokens = [R10.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
2636
2803
  const content = `{
2637
2804
  ${formattedTokens.join("\n")}
2638
2805
  }
2639
2806
  `;
2640
- const body = R9.isNotNil(layer) ? `@layer ${layer} {
2807
+ const body = R10.isNotNil(layer) ? `@layer ${layer} {
2641
2808
  ${selector} ${content}
2642
2809
  }
2643
2810
  ` : `${selector} ${content}
@@ -2647,15 +2814,15 @@ ${selector} ${content}
2647
2814
  };
2648
2815
 
2649
2816
  // src/tokens/process/formats/css/typography.ts
2650
- import * as R10 from "ramda";
2817
+ import * as R11 from "ramda";
2651
2818
  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"])
2819
+ var typographyFontFamilyPredicate = R11.allPass([
2820
+ R11.pathSatisfies(R11.includes("typography"), ["path"]),
2821
+ R11.pathSatisfies(R11.includes("fontFamily"), ["path"])
2655
2822
  ]);
2656
2823
  var typography = {
2657
2824
  name: "ds/css-typography",
2658
- format: async ({ dictionary, file, options, platform }) => {
2825
+ format: async ({ dictionary, options, platform }) => {
2659
2826
  const { outputReferences, usesDtcg } = options;
2660
2827
  const { selector, layer } = platform;
2661
2828
  const format = createPropertyFormatter3({
@@ -2664,12 +2831,12 @@ var typography = {
2664
2831
  format: "css",
2665
2832
  usesDtcg
2666
2833
  });
2667
- const filteredTokens = R10.reject(typographyFontFamilyPredicate, dictionary.allTokens);
2668
- const formattedTokens = R10.pipe(R10.map(format), R10.join("\n"))(filteredTokens);
2834
+ const filteredTokens = R11.reject(typographyFontFamilyPredicate, dictionary.allTokens);
2835
+ const formattedTokens = R11.pipe(R11.map(format), R11.join("\n"))(filteredTokens);
2669
2836
  const content = selector ? `${selector} {
2670
2837
  ${formattedTokens}
2671
2838
  }` : formattedTokens;
2672
- const body = R10.isNotNil(layer) ? `@layer ${layer} {
2839
+ const body = R11.isNotNil(layer) ? `@layer ${layer} {
2673
2840
  ${content}
2674
2841
  }` : content;
2675
2842
  return body;
@@ -2686,8 +2853,8 @@ var formats = {
2686
2853
 
2687
2854
  // src/tokens/process/transformers.ts
2688
2855
  import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
2689
- import * as R11 from "ramda";
2690
- var isPx = R11.test(/\b\d+px\b/g);
2856
+ import * as R12 from "ramda";
2857
+ var isPx = R12.test(/\b\d+px\b/g);
2691
2858
  var sizeRem = {
2692
2859
  name: "ds/size/toRem",
2693
2860
  type: "value",
@@ -2777,7 +2944,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
2777
2944
  {
2778
2945
  destination: `color-scheme/${colorScheme2}.css`,
2779
2946
  format: formats.colorScheme.name,
2780
- filter: (token) => typeEquals("color", token) && !R12.startsWith(["global"], token.path)
2947
+ filter: (token) => typeEquals("color", token) && !R13.startsWith(["global"], token.path)
2781
2948
  }
2782
2949
  ],
2783
2950
  options: {
@@ -2828,7 +2995,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
2828
2995
  };
2829
2996
 
2830
2997
  // src/tokens/process/configs/semantic.ts
2831
- import * as R13 from "ramda";
2998
+ import * as R14 from "ramda";
2832
2999
  import { outputReferencesFilter } from "style-dictionary/utils";
2833
3000
  var semanticVariables = ({ theme }) => {
2834
3001
  const selector = `:root`;
@@ -2851,8 +3018,8 @@ var semanticVariables = ({ theme }) => {
2851
3018
  destination: `semantic.css`,
2852
3019
  format: formats.semantic.name,
2853
3020
  filter: (token) => {
2854
- const isUwantedToken = R13.anyPass([R13.includes("primitives/global")])(token.filePath);
2855
- const isPrivateToken = R13.includes("_", token.path);
3021
+ const isUwantedToken = R14.anyPass([R14.includes("primitives/global")])(token.filePath);
3022
+ const isPrivateToken = R14.includes("_", token.path);
2856
3023
  const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
2857
3024
  const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
2858
3025
  const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
@@ -2873,20 +3040,20 @@ var semanticVariables = ({ theme }) => {
2873
3040
  };
2874
3041
 
2875
3042
  // src/tokens/process/configs/storefront.ts
2876
- import * as R15 from "ramda";
3043
+ import * as R16 from "ramda";
2877
3044
  import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
2878
3045
 
2879
3046
  // src/tokens/process/formats/js-tokens.ts
2880
- import * as R14 from "ramda";
3047
+ import * as R15 from "ramda";
2881
3048
  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))
3049
+ var groupByType = R15.groupBy((token) => getType(token));
3050
+ var removeUnwatedTokens = R15.pipe(
3051
+ R15.reject((token) => isColorCategoryToken(token)),
3052
+ R15.reject((token) => R15.any((path) => path.startsWith("_"))(token.path))
2886
3053
  );
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);
3054
+ var dissocExtensions = R15.pipe(R15.dissoc("$extensions"), R15.dissocPath(["original", "$extensions"]));
3055
+ var removeUnwatedProps = R15.map((token) => dissocExtensions(token));
3056
+ var toCssVarName = R15.pipe(R15.split(":"), R15.head, R15.trim);
2890
3057
  var jsTokens = {
2891
3058
  name: "ds/js-tokens",
2892
3059
  format: async ({ dictionary, file, options }) => {
@@ -2897,7 +3064,7 @@ var jsTokens = {
2897
3064
  format: "css",
2898
3065
  usesDtcg
2899
3066
  });
2900
- const formatTokens2 = R14.map((token) => {
3067
+ const formatTokens2 = R15.map((token) => {
2901
3068
  if (pathStartsWithOneOf(["size", "_size"], token)) {
2902
3069
  const { calc, name } = overrideSizingFormula(format, token);
2903
3070
  return {
@@ -2911,7 +3078,7 @@ var jsTokens = {
2911
3078
  name: toCssVarName(format(token))
2912
3079
  };
2913
3080
  });
2914
- const processTokens = R14.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
3081
+ const processTokens = R15.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
2915
3082
  const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
2916
3083
  const content = Object.entries(tokens).map(
2917
3084
  ([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
@@ -2936,9 +3103,9 @@ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
2936
3103
  destination: `${colorScheme2}.ts`,
2937
3104
  format: jsTokens.name,
2938
3105
  filter: (token) => {
2939
- if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R15.includes("semantic", token.filePath))
3106
+ if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R16.includes("semantic", token.filePath))
2940
3107
  return false;
2941
- const isSemanticColor = R15.includes("semantic", token.filePath) && typeEquals(["color"], token);
3108
+ const isSemanticColor = R16.includes("semantic", token.filePath) && typeEquals(["color"], token);
2942
3109
  const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
2943
3110
  return isSemanticColor || wantedTypes;
2944
3111
  }
@@ -3004,19 +3171,19 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
3004
3171
  };
3005
3172
 
3006
3173
  // src/tokens/process/utils/getMultidimensionalThemes.ts
3007
- import chalk from "chalk";
3174
+ import chalk2 from "chalk";
3008
3175
  import { kebabCase } from "change-case";
3009
- import * as R16 from "ramda";
3176
+ import * as R17 from "ramda";
3010
3177
  var getMultidimensionalThemes = (processed$themes, dimensions) => {
3011
3178
  const verboseLogging = buildOptions?.verbose;
3012
3179
  const grouped$themes = groupThemes(processed$themes);
3013
3180
  const permutations = permutateThemes(grouped$themes);
3014
3181
  const ALL_DEPENDENT_ON = ["theme"];
3015
- const keys2 = R16.keys(grouped$themes);
3182
+ const keys2 = R17.keys(grouped$themes);
3016
3183
  const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
3017
3184
  if (verboseLogging) {
3018
- console.log(chalk.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
3019
- console.log(chalk.cyan(` (ignoring permutations for ${nonDependentKeys})`));
3185
+ console.log(chalk2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
3186
+ console.log(chalk2.cyan(` (ignoring permutations for ${nonDependentKeys})`));
3020
3187
  }
3021
3188
  return permutations.filter((val) => {
3022
3189
  const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
@@ -3052,7 +3219,7 @@ function groupThemes(themes) {
3052
3219
  }
3053
3220
  return groups;
3054
3221
  }
3055
- var hasUnknownProps = R16.pipe(R16.values, R16.none(R16.equals("unknown")), R16.not);
3222
+ var hasUnknownProps = R17.pipe(R17.values, R17.none(R17.equals("unknown")), R17.not);
3056
3223
  function permutateThemes(groups) {
3057
3224
  const separator = "_";
3058
3225
  const permutations = cartesian(Object.values(groups));
@@ -3062,8 +3229,8 @@ function permutateThemes(groups) {
3062
3229
  const { group, name, selectedTokenSets } = theme;
3063
3230
  let updatedPermutation = acc.permutation;
3064
3231
  if (group) {
3065
- const groupProp = R16.lensProp(group);
3066
- updatedPermutation = R16.set(groupProp, name, updatedPermutation);
3232
+ const groupProp = R17.lensProp(group);
3233
+ updatedPermutation = R17.set(groupProp, name, updatedPermutation);
3067
3234
  }
3068
3235
  const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
3069
3236
  const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
@@ -3147,7 +3314,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
3147
3314
  obj.filePath = tokenSet;
3148
3315
  }
3149
3316
  });
3150
- tokenSource.tokens = R17.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
3317
+ tokenSource.tokens = R18.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
3151
3318
  }
3152
3319
  }
3153
3320
  } else {
@@ -3244,35 +3411,35 @@ async function processPlatform(options) {
3244
3411
  const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
3245
3412
  if (UNSAFE_DEFAULT_COLOR) {
3246
3413
  console.warn(
3247
- chalk2.yellow(
3414
+ chalk3.yellow(
3248
3415
  `
3249
- \u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk2.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
3416
+ \u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk3.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
3250
3417
  )
3251
3418
  );
3252
3419
  }
3253
3420
  const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
3254
3421
  if (UNSAFE_COLOR_GROUPS.length > 0) {
3255
3422
  console.warn(
3256
- chalk2.yellow(
3423
+ chalk3.yellow(
3257
3424
  `
3258
- \u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk2.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
3425
+ \u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk3.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
3259
3426
  )
3260
3427
  );
3261
3428
  }
3262
3429
  const colorGroups = UNSAFE_COLOR_GROUPS.length > 0 ? UNSAFE_COLOR_GROUPS : [colorCategories.main, colorCategories.support].map((c) => `${c}-color`);
3263
3430
  buildOptions = options;
3264
3431
  buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
3265
- const processed$themes = $themes.map(processThemeObject).filter((theme) => R18.not(theme.group === "size" && theme.name !== "medium"));
3432
+ const processed$themes = $themes.map(processThemeObject).filter((theme) => R19.not(theme.group === "size" && theme.name !== "medium"));
3266
3433
  const customColors = getCustomColors(processed$themes, colorGroups);
3267
3434
  if (!buildOptions.defaultColor) {
3268
- const firstMainColor = R18.head(customColors);
3435
+ const firstMainColor = R19.head(customColors);
3269
3436
  buildOptions.defaultColor = firstMainColor;
3270
3437
  }
3271
3438
  if (buildOptions.defaultColor) {
3272
3439
  console.log(`
3273
- \u{1F3A8} Using ${chalk2.blue(buildOptions.defaultColor)} as default color`);
3440
+ \u{1F3A8} Using ${chalk3.blue(buildOptions.defaultColor)} as default color`);
3274
3441
  }
3275
- const buildAndSdConfigs = R18.map((buildConfig) => {
3442
+ const buildAndSdConfigs = R19.map((buildConfig) => {
3276
3443
  const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
3277
3444
  tokensDir,
3278
3445
  tokenSets
@@ -3304,19 +3471,19 @@ async function processPlatform(options) {
3304
3471
  types: [initResult]
3305
3472
  };
3306
3473
  try {
3307
- for (const [buildName, { buildConfig, sdConfigs }] of R18.toPairs(buildAndSdConfigs)) {
3474
+ for (const [buildName, { buildConfig, sdConfigs }] of R19.toPairs(buildAndSdConfigs)) {
3308
3475
  if (!(buildConfig.enabled?.() ?? true)) {
3309
3476
  continue;
3310
3477
  }
3311
3478
  if (sdConfigs.length > 0) {
3312
3479
  console.log(`
3313
- \u{1F371} Building ${chalk2.green(buildConfig.name ?? buildName)}`);
3480
+ \u{1F371} Building ${chalk3.green(buildConfig.name ?? buildName)}`);
3314
3481
  const results = await Promise.all(
3315
3482
  sdConfigs.map(async (sdConfig) => {
3316
3483
  const { config, permutation } = sdConfig;
3317
3484
  const modes = ["theme", ...buildConfig.dimensions];
3318
3485
  const modeMessage = modes.map((x) => permutation[x]).join(" - ");
3319
- const logMessage = R18.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
3486
+ const logMessage = R19.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
3320
3487
  console.log(logMessage);
3321
3488
  const sdOptions = { cache: true };
3322
3489
  const sdExtended = await sd.extend(config);
@@ -3348,7 +3515,7 @@ async function processPlatform(options) {
3348
3515
  }
3349
3516
  async function createColorTypeDeclaration(colors) {
3350
3517
  console.log(`
3351
- \u{1F371} Building ${chalk2.green("type declarations")}`);
3518
+ \u{1F371} Building ${chalk3.green("type declarations")}`);
3352
3519
  const typeDeclaration = `
3353
3520
  import type {} from '@digdir/designsystemet-react/colors';
3354
3521
 
@@ -3361,174 +3528,6 @@ ${colors.map((color) => ` ${color}: never;`).join("\n")}
3361
3528
  return typeDeclaration;
3362
3529
  }
3363
3530
 
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
-
3532
3531
  // src/tokens/format.ts
3533
3532
  var formatTokens = async (options) => {
3534
3533
  const processedBuilds = await processPlatform({