@digdir/designsystemet 1.1.3 → 1.1.5

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 (41) hide show
  1. package/dist/bin/designsystemet.js +130 -186
  2. package/dist/src/index.js +88 -145
  3. package/dist/src/scripts/update-preview-tokens.d.ts +3 -0
  4. package/dist/src/scripts/update-preview-tokens.d.ts.map +1 -0
  5. package/dist/src/scripts/update-preview-tokens.js +3446 -0
  6. package/dist/src/tokens/build.d.ts +1 -1
  7. package/dist/src/tokens/build.d.ts.map +1 -1
  8. package/dist/src/tokens/build.js +98 -154
  9. package/dist/src/tokens/create/generators/$designsystemet.js +6 -6
  10. package/dist/src/tokens/create/write.js +6 -6
  11. package/dist/src/tokens/format.d.ts +1 -1
  12. package/dist/src/tokens/format.d.ts.map +1 -1
  13. package/dist/src/tokens/format.js +88 -145
  14. package/dist/src/tokens/index.js +88 -145
  15. package/dist/src/tokens/process/configs/color.js +234 -293
  16. package/dist/src/tokens/process/configs/semantic.js +509 -113
  17. package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
  18. package/dist/src/tokens/process/configs/typography.js +504 -110
  19. package/dist/src/tokens/process/configs.d.ts +0 -1
  20. package/dist/src/tokens/process/configs.d.ts.map +1 -1
  21. package/dist/src/tokens/process/configs.js +231 -290
  22. package/dist/src/tokens/process/formats/css/color.d.ts.map +1 -1
  23. package/dist/src/tokens/process/formats/css/color.js +644 -12
  24. package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -1
  25. package/dist/src/tokens/process/formats/css/semantic.js +679 -23
  26. package/dist/src/tokens/process/formats/css/typography.d.ts.map +1 -1
  27. package/dist/src/tokens/process/formats/css/typography.js +741 -8
  28. package/dist/src/tokens/process/formats/css.js +549 -38
  29. package/dist/src/tokens/process/output/declarations.js +60 -121
  30. package/dist/src/tokens/process/output/theme.js +6 -6
  31. package/dist/src/tokens/process/platform.d.ts +9 -4
  32. package/dist/src/tokens/process/platform.d.ts.map +1 -1
  33. package/dist/src/tokens/process/platform.js +76 -133
  34. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +62 -123
  35. package/package.json +6 -6
  36. package/dist/src/tokens/process/configs/storefront.d.ts +0 -3
  37. package/dist/src/tokens/process/configs/storefront.d.ts.map +0 -1
  38. package/dist/src/tokens/process/configs/storefront.js +0 -234
  39. package/dist/src/tokens/process/formats/js-tokens.d.ts +0 -6
  40. package/dist/src/tokens/process/formats/js-tokens.d.ts.map +0 -1
  41. package/dist/src/tokens/process/formats/js-tokens.js +0 -123
@@ -164,11 +164,11 @@ var TypographyValues;
164
164
  // src/tokens/process/utils/getMultidimensionalThemes.ts
165
165
  import chalk2 from "chalk";
166
166
  import { kebabCase } from "change-case";
167
- import * as R12 from "ramda";
167
+ import * as R10 from "ramda";
168
168
 
169
169
  // src/tokens/process/platform.ts
170
170
  import chalk from "chalk";
171
- import * as R11 from "ramda";
171
+ import * as R9 from "ramda";
172
172
  import StyleDictionary2 from "style-dictionary";
173
173
 
174
174
  // src/tokens/types.ts
@@ -179,7 +179,7 @@ var colorCategories = {
179
179
 
180
180
  // src/tokens/process/configs.ts
181
181
  import { register } from "@tokens-studio/sd-transforms";
182
- import * as R10 from "ramda";
182
+ import * as R8 from "ramda";
183
183
  import StyleDictionary from "style-dictionary";
184
184
 
185
185
  // src/tokens/utils.ts
@@ -278,7 +278,11 @@ var colorScheme = {
278
278
  (t) => !isColorCategoryToken(t)
279
279
  ])
280
280
  );
281
- const formattedTokens = filteredAllTokens.map(format).join("\n");
281
+ const formattedMap = filteredAllTokens.map((token) => ({
282
+ token,
283
+ formatted: format(token)
284
+ }));
285
+ const formattedTokens = formattedMap.map(R2.view(R2.lensProp("formatted"))).join("\n");
282
286
  const content = `{
283
287
  ${formattedTokens}
284
288
  ${colorSchemeProperty}}
@@ -296,7 +300,8 @@ var colorCategory = {
296
300
  name: "ds/css-colorcategory",
297
301
  format: async ({ dictionary, options, platform }) => {
298
302
  const { outputReferences, usesDtcg } = options;
299
- const { selector, layer } = platform;
303
+ const { selector, layer, files } = platform;
304
+ const destination = files?.[0]?.destination;
300
305
  const format = R2.compose(
301
306
  createPropertyFormatter({
302
307
  outputReferences,
@@ -313,7 +318,12 @@ var colorCategory = {
313
318
  }
314
319
  })
315
320
  );
316
- const formattedTokens = dictionary.allTokens.map(format).join("\n");
321
+ const formattedMap = dictionary.allTokens.map((token) => ({
322
+ token,
323
+ formatted: format(token)
324
+ }));
325
+ buildOptions.buildTokenFormats[destination] = formattedMap;
326
+ const formattedTokens = formattedMap.map(R2.view(R2.lensProp("formatted"))).join("\n");
317
327
  const content = `{
318
328
  ${formattedTokens}
319
329
  }
@@ -344,30 +354,30 @@ var overrideSizingFormula = (format, token) => {
344
354
  calc
345
355
  };
346
356
  };
347
- var formatSizingTokens = (format, tokens) => {
348
- const { round, calc } = R3.reduce(
349
- (acc, token) => {
350
- const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
351
- return {
352
- round: [...acc.round, `${name}: ${round2};`],
353
- calc: [...acc.calc, `${name}: ${calc2};`]
354
- };
355
- },
356
- { round: [], calc: [] },
357
- tokens
358
- );
359
- return `
357
+ var formatSizingTokens = (format, tokens) => R3.reduce(
358
+ (acc, token) => {
359
+ const { round, calc, name } = overrideSizingFormula(format, token);
360
+ return {
361
+ tokens: [...acc.tokens, token],
362
+ round: [...acc.round, `${name}: ${round};`],
363
+ calc: [...acc.calc, `${name}: ${calc};`]
364
+ };
365
+ },
366
+ { tokens: [], round: [], calc: [] },
367
+ tokens
368
+ );
369
+ var sizingTemplate = ({ round, calc }) => `
360
370
  ${calc.join("\n")}
361
371
 
362
372
  @supports (width: round(down, .1em, 1px)) {
363
373
  ${round.join("\n")}
364
374
  }`;
365
- };
366
375
  var semantic = {
367
376
  name: "ds/css-semantic",
368
377
  format: async ({ dictionary, options, platform }) => {
369
378
  const { outputReferences, usesDtcg } = options;
370
- const { selector, layer } = platform;
379
+ const { selector, layer, files } = platform;
380
+ const destination = files?.[0]?.destination;
371
381
  const format = createPropertyFormatter2({
372
382
  outputReferences,
373
383
  dictionary,
@@ -380,7 +390,18 @@ var semantic = {
380
390
  (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
381
391
  filteredTokens
382
392
  );
383
- const formattedTokens = [R3.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
393
+ const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
394
+ const formattedMap = restTokens.map((token) => ({
395
+ token,
396
+ formatted: format(token)
397
+ }));
398
+ const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
399
+ token: formattedSizingTokens.tokens[i],
400
+ formatted: t
401
+ }));
402
+ buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
403
+ const sizingSnippet = sizingTemplate(formattedSizingTokens);
404
+ const formattedTokens = formattedMap.map(R3.view(R3.lensProp("formatted"))).concat(sizingSnippet);
384
405
  const content = `{
385
406
  ${formattedTokens.join("\n")}
386
407
  }
@@ -405,7 +426,8 @@ var typography = {
405
426
  name: "ds/css-typography",
406
427
  format: async ({ dictionary, options, platform }) => {
407
428
  const { outputReferences, usesDtcg } = options;
408
- const { selector, layer } = platform;
429
+ const { selector, layer, files } = platform;
430
+ const destination = files?.[0]?.destination;
409
431
  const format = createPropertyFormatter3({
410
432
  outputReferences,
411
433
  dictionary,
@@ -413,7 +435,12 @@ var typography = {
413
435
  usesDtcg
414
436
  });
415
437
  const filteredTokens = R4.reject(typographyFontFamilyPredicate, dictionary.allTokens);
416
- const formattedTokens = R4.pipe(R4.map(format), R4.join("\n"))(filteredTokens);
438
+ const formattedMap = filteredTokens.map((token) => ({
439
+ token,
440
+ formatted: format(token)
441
+ }));
442
+ buildOptions.buildTokenFormats[destination] = formattedMap;
443
+ const formattedTokens = formattedMap.map(R4.view(R4.lensProp("formatted"))).join("\n");
417
444
  const content = selector ? `${selector} {
418
445
  ${formattedTokens}
419
446
  }` : formattedTokens;
@@ -620,90 +647,6 @@ var semanticVariables = ({ theme }) => {
620
647
  };
621
648
  };
622
649
 
623
- // src/tokens/process/configs/storefront.ts
624
- import * as R9 from "ramda";
625
- import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
626
-
627
- // src/tokens/process/formats/js-tokens.ts
628
- import * as R8 from "ramda";
629
- import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
630
- var groupByType = R8.groupBy((token) => getType(token));
631
- var removeUnwatedTokens = R8.pipe(
632
- R8.reject((token) => isColorCategoryToken(token)),
633
- R8.reject((token) => R8.any((path) => path.startsWith("_"))(token.path))
634
- );
635
- var dissocExtensions = R8.pipe(R8.dissoc("$extensions"), R8.dissocPath(["original", "$extensions"]));
636
- var removeUnwatedProps = R8.map((token) => dissocExtensions(token));
637
- var toCssVarName = R8.pipe(R8.split(":"), R8.head, R8.trim);
638
- var jsTokens = {
639
- name: "ds/js-tokens",
640
- format: async ({ dictionary, file, options }) => {
641
- const { usesDtcg, outputReferences } = options;
642
- const format = createPropertyFormatter4({
643
- outputReferences,
644
- dictionary,
645
- format: "css",
646
- usesDtcg
647
- });
648
- const formatTokens = R8.map((token) => {
649
- if (pathStartsWithOneOf(["size", "_size"], token)) {
650
- const { calc, name } = overrideSizingFormula(format, token);
651
- return {
652
- ...token,
653
- name: name.trim(),
654
- $value: calc.trim()
655
- };
656
- }
657
- return {
658
- ...token,
659
- name: toCssVarName(format(token))
660
- };
661
- });
662
- const processTokens = R8.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
663
- const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
664
- const content = Object.entries(tokens).map(
665
- ([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
666
- `
667
- ).join("\n");
668
- return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
669
- }
670
- };
671
-
672
- // src/tokens/process/configs/storefront.ts
673
- var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
674
- return {
675
- preprocessors: ["tokens-studio"],
676
- platforms: {
677
- ts: {
678
- prefix,
679
- basePxFontSize,
680
- transforms: dsTransformers,
681
- buildPath: `${theme}/`,
682
- files: [
683
- {
684
- destination: `${colorScheme2}.ts`,
685
- format: jsTokens.name,
686
- filter: (token) => {
687
- if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R9.includes("semantic", token.filePath))
688
- return false;
689
- const isSemanticColor = R9.includes("semantic", token.filePath) && typeEquals(["color"], token);
690
- const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
691
- return isSemanticColor || wantedTypes;
692
- }
693
- }
694
- ],
695
- options: {
696
- outputReferences: (token, options) => {
697
- const include = pathStartsWithOneOf(["border-radius"], token);
698
- const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
699
- return (include || isWantedSize) && outputReferencesFilter2(token, options);
700
- }
701
- }
702
- }
703
- }
704
- };
705
- };
706
-
707
650
  // src/tokens/process/configs/typography.ts
708
651
  import { expandTypesMap } from "@tokens-studio/sd-transforms";
709
652
  var typographyVariables = ({ theme, typography: typography2 }) => {
@@ -730,6 +673,7 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
730
673
  sizeRem.name,
731
674
  "ts/size/lineheight",
732
675
  "ts/typography/fontWeight",
676
+ "ts/size/css/letterspacing",
733
677
  typographyName.name
734
678
  ],
735
679
  files: [
@@ -757,7 +701,6 @@ StyleDictionary.registerTransform(sizeRem);
757
701
  StyleDictionary.registerTransform(typographyName);
758
702
  StyleDictionary.registerTransform(resolveMath);
759
703
  StyleDictionary.registerTransform(unitless);
760
- StyleDictionary.registerFormat(jsTokens);
761
704
  for (const format of Object.values(formats)) {
762
705
  StyleDictionary.registerFormat(format);
763
706
  }
@@ -771,12 +714,15 @@ var configs = {
771
714
  warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
772
715
  infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
773
716
  typographyVariables,
774
- semanticVariables,
775
- typescriptTokens
717
+ semanticVariables
776
718
  };
777
719
 
778
720
  // src/tokens/process/platform.ts
779
- var buildOptions;
721
+ var buildOptions = {
722
+ verbose: false,
723
+ processed$themes: [],
724
+ buildTokenFormats: {}
725
+ };
780
726
  var sd = new StyleDictionary2();
781
727
  var buildConfigs = {
782
728
  typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
@@ -809,13 +755,6 @@ var buildConfigs = {
809
755
  log: ({ permutation: { theme } }) => `${theme} - info`
810
756
  },
811
757
  semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
812
- // storefront: {
813
- // name: 'Storefront preview tokens',
814
- // getConfig: configs.typescriptTokens,
815
- // dimensions: ['color-scheme'],
816
- // options: { outPath: path.resolve('../../apps/storefront/tokens') },
817
- // enabled: () => buildOptions?.preview ?? false,
818
- // },
819
758
  };
820
759
 
821
760
  // src/tokens/process/utils/getMultidimensionalThemes.ts
@@ -824,7 +763,7 @@ var getMultidimensionalThemes = (processed$themes, dimensions) => {
824
763
  const grouped$themes = groupThemes(processed$themes);
825
764
  const permutations = permutateThemes(grouped$themes);
826
765
  const ALL_DEPENDENT_ON = ["theme"];
827
- const keys2 = R12.keys(grouped$themes);
766
+ const keys2 = R10.keys(grouped$themes);
828
767
  const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
829
768
  if (verboseLogging) {
830
769
  console.log(chalk2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
@@ -864,7 +803,7 @@ function groupThemes(themes) {
864
803
  }
865
804
  return groups;
866
805
  }
867
- var hasUnknownProps = R12.pipe(R12.values, R12.none(R12.equals("unknown")), R12.not);
806
+ var hasUnknownProps = R10.pipe(R10.values, R10.none(R10.equals("unknown")), R10.not);
868
807
  function permutateThemes(groups) {
869
808
  const separator = "_";
870
809
  const permutations = cartesian(Object.values(groups));
@@ -874,8 +813,8 @@ function permutateThemes(groups) {
874
813
  const { group, name, selectedTokenSets } = theme;
875
814
  let updatedPermutation = acc.permutation;
876
815
  if (group) {
877
- const groupProp = R12.lensProp(group);
878
- updatedPermutation = R12.set(groupProp, name, updatedPermutation);
816
+ const groupProp = R10.lensProp(group);
817
+ updatedPermutation = R10.set(groupProp, name, updatedPermutation);
879
818
  }
880
819
  const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
881
820
  const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet",
3
- "version": "1.1.3",
3
+ "version": "1.1.5",
4
4
  "description": "CLI for Designsystemet",
5
5
  "author": "Designsystemet team",
6
6
  "engines": {
7
- "node": ">=22.16.0"
7
+ "node": ">=22.17.0"
8
8
  },
9
9
  "repository": {
10
10
  "type": "git",
@@ -47,8 +47,8 @@
47
47
  "object-hash": "^3.0.0",
48
48
  "postcss": "^8.5.6",
49
49
  "ramda": "^0.31.3",
50
- "style-dictionary": "^5.0.0",
51
- "zod": "^3.25.67",
50
+ "style-dictionary": "^5.0.1",
51
+ "zod": "^3.25.74",
52
52
  "zod-validation-error": "^3.5.2"
53
53
  },
54
54
  "devDependencies": {
@@ -56,8 +56,7 @@
56
56
  "@types/apca-w3": "^0.1.3",
57
57
  "@types/chroma-js": "^3.1.1",
58
58
  "@types/fs-extra": "^11.0.4",
59
- "@types/glob": "^8.1.0",
60
- "@types/node": "^22.15.32",
59
+ "@types/node": "^22.16.0",
61
60
  "@types/object-hash": "^3.0.6",
62
61
  "@types/ramda": "^0.30.2",
63
62
  "fs-extra": "^11.3.0",
@@ -86,6 +85,7 @@
86
85
  "digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
87
86
  "digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
88
87
  "update:template": "tsx ./src/scripts/update-template.ts",
88
+ "update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
89
89
  "update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
90
90
  "verify": "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
91
91
  }
@@ -1,3 +0,0 @@
1
- import { type GetStyleDictionaryConfig } from './shared.js';
2
- export declare const typescriptTokens: GetStyleDictionaryConfig;
3
- //# sourceMappingURL=storefront.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"storefront.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/storefront.ts"],"names":[],"mappings":"AAMA,OAAO,EAAkC,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpG,eAAO,MAAM,gBAAgB,EAAE,wBAqC9B,CAAC"}
@@ -1,234 +0,0 @@
1
- // src/tokens/process/configs/storefront.ts
2
- import * as R5 from "ramda";
3
- import { outputReferencesFilter } from "style-dictionary/utils";
4
-
5
- // src/tokens/utils.ts
6
- import * as R from "ramda";
7
-
8
- // src/tokens/types.ts
9
- var colorCategories = {
10
- main: "main",
11
- support: "support"
12
- };
13
-
14
- // src/tokens/utils.ts
15
- var mapToLowerCase = R.map(R.toLower);
16
- var hasAnyTruth = R.any(R.equals(true));
17
- var getType = (token) => (token.$type ?? token.type) || "";
18
- var getValue = (token) => token.$value ?? token.value;
19
- var typeEquals = R.curry(
20
- (types, token) => {
21
- if (R.isNil(token)) {
22
- return false;
23
- }
24
- return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
25
- }
26
- );
27
- var pathStartsWithOneOf = R.curry(
28
- (paths, token) => {
29
- if (R.isNil(token)) {
30
- return false;
31
- }
32
- const tokenPath = mapToLowerCase(token.path);
33
- const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
34
- return hasAnyTruth(matchPathsStartingWith);
35
- }
36
- );
37
- function isColorCategoryToken(token, category) {
38
- if (!category) {
39
- return Object.keys(colorCategories).some(
40
- (colorCategory) => isColorCategoryToken(token, colorCategory)
41
- );
42
- }
43
- return R.startsWith(["color", category], token.path);
44
- }
45
- var isDigit = (s) => /^\d+$/.test(s);
46
- function inlineTokens(shouldInline, tokens) {
47
- const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
48
- return otherTokens.map((token) => {
49
- let transformed = getValue(token.original);
50
- for (const ref of inlineableTokens) {
51
- const refName = ref.path.join(".");
52
- if (typeof transformed === "string") {
53
- transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
54
- }
55
- }
56
- const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
57
- return tokenWithInlinedRefs;
58
- });
59
- }
60
-
61
- // src/tokens/process/formats/js-tokens.ts
62
- import * as R3 from "ramda";
63
- import { createPropertyFormatter as createPropertyFormatter2, fileHeader } from "style-dictionary/utils";
64
-
65
- // src/tokens/process/formats/css/semantic.ts
66
- import * as R2 from "ramda";
67
- import { createPropertyFormatter } from "style-dictionary/utils";
68
- var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
69
- var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
70
- var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
71
- var isInlineTokens = R2.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
72
- var overrideSizingFormula = (format, token) => {
73
- const [name, value] = format(token).split(":");
74
- const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
75
- const round = `round(down, ${calc}, 1px)`;
76
- return {
77
- name,
78
- round,
79
- calc
80
- };
81
- };
82
-
83
- // src/tokens/process/formats/js-tokens.ts
84
- var groupByType = R3.groupBy((token) => getType(token));
85
- var removeUnwatedTokens = R3.pipe(
86
- R3.reject((token) => isColorCategoryToken(token)),
87
- R3.reject((token) => R3.any((path) => path.startsWith("_"))(token.path))
88
- );
89
- var dissocExtensions = R3.pipe(R3.dissoc("$extensions"), R3.dissocPath(["original", "$extensions"]));
90
- var removeUnwatedProps = R3.map((token) => dissocExtensions(token));
91
- var toCssVarName = R3.pipe(R3.split(":"), R3.head, R3.trim);
92
- var jsTokens = {
93
- name: "ds/js-tokens",
94
- format: async ({ dictionary, file, options }) => {
95
- const { usesDtcg, outputReferences } = options;
96
- const format = createPropertyFormatter2({
97
- outputReferences,
98
- dictionary,
99
- format: "css",
100
- usesDtcg
101
- });
102
- const formatTokens = R3.map((token) => {
103
- if (pathStartsWithOneOf(["size", "_size"], token)) {
104
- const { calc, name } = overrideSizingFormula(format, token);
105
- return {
106
- ...token,
107
- name: name.trim(),
108
- $value: calc.trim()
109
- };
110
- }
111
- return {
112
- ...token,
113
- name: toCssVarName(format(token))
114
- };
115
- });
116
- const processTokens = R3.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
117
- const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
118
- const content = Object.entries(tokens).map(
119
- ([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
120
- `
121
- ).join("\n");
122
- return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
123
- }
124
- };
125
-
126
- // src/tokens/process/transformers.ts
127
- import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
128
- import * as R4 from "ramda";
129
- var isPx = R4.test(/\b\d+px\b/g);
130
- var sizeRem = {
131
- name: "ds/size/toRem",
132
- type: "value",
133
- transitive: true,
134
- filter: (token) => {
135
- const hasWantedType = typeEquals(["dimension", "fontsize"], token);
136
- const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
137
- return hasWantedType && hasWantedPath;
138
- },
139
- transform: (token, config) => {
140
- const value = getValue(token);
141
- if (isPx(value)) {
142
- const baseFont = config.basePxFontSize || 16;
143
- const size = parseInt(value);
144
- if (size === 0) {
145
- return "0";
146
- }
147
- return `${size / baseFont}rem`;
148
- }
149
- return value;
150
- }
151
- };
152
- var typographyName = {
153
- name: "name/typography",
154
- type: "name",
155
- transitive: true,
156
- // expanded tokens have different type so we match on path instead
157
- filter: (token) => pathStartsWithOneOf(["typography"], token),
158
- transform: (token) => {
159
- return token.name.replace("-typography", "");
160
- }
161
- };
162
- var resolveMath = {
163
- name: "ds/resolveMath",
164
- type: "value",
165
- transitive: true,
166
- filter: (token) => {
167
- const isValidValue = ["string", "object"].includes(typeof getValue(token));
168
- const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
169
- return isValidValue && isTokenOfInterest;
170
- },
171
- transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
172
- };
173
- var unitless = {
174
- name: "ds/unitless",
175
- type: "value",
176
- transitive: true,
177
- filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
178
- transform: (token) => parseInt(getValue(token))
179
- };
180
-
181
- // src/tokens/process/configs/shared.ts
182
- var prefix = "ds";
183
- var basePxFontSize = 16;
184
- var dsTransformers = [
185
- "name/kebab",
186
- resolveMath.name,
187
- "ts/size/px",
188
- sizeRem.name,
189
- unitless.name,
190
- "ts/typography/fontWeight",
191
- typographyName.name,
192
- "ts/color/modifiers",
193
- "ts/color/css/hexrgba",
194
- "ts/size/lineheight",
195
- "shadow/css/shorthand"
196
- ];
197
-
198
- // src/tokens/process/configs/storefront.ts
199
- var typescriptTokens = ({ "color-scheme": colorScheme, theme }) => {
200
- return {
201
- preprocessors: ["tokens-studio"],
202
- platforms: {
203
- ts: {
204
- prefix,
205
- basePxFontSize,
206
- transforms: dsTransformers,
207
- buildPath: `${theme}/`,
208
- files: [
209
- {
210
- destination: `${colorScheme}.ts`,
211
- format: jsTokens.name,
212
- filter: (token) => {
213
- if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R5.includes("semantic", token.filePath))
214
- return false;
215
- const isSemanticColor = R5.includes("semantic", token.filePath) && typeEquals(["color"], token);
216
- const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
217
- return isSemanticColor || wantedTypes;
218
- }
219
- }
220
- ],
221
- options: {
222
- outputReferences: (token, options) => {
223
- const include = pathStartsWithOneOf(["border-radius"], token);
224
- const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
225
- return (include || isWantedSize) && outputReferencesFilter(token, options);
226
- }
227
- }
228
- }
229
- }
230
- };
231
- };
232
- export {
233
- typescriptTokens
234
- };
@@ -1,6 +0,0 @@
1
- import type { Format } from 'style-dictionary/types';
2
- /**
3
- * Format for displaying tokens in storefront
4
- */
5
- export declare const jsTokens: Format;
6
- //# sourceMappingURL=js-tokens.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"js-tokens.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/formats/js-tokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAoBvE;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MAuCtB,CAAC"}