@digdir/designsystemet 1.3.0 → 1.5.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 (61) hide show
  1. package/configs/digdir.config.json +4 -0
  2. package/dist/bin/designsystemet.js +488 -166
  3. package/dist/global-Y35YADVH.json +100 -0
  4. package/dist/src/index.js +527 -203
  5. package/dist/src/scripts/update-preview-tokens.js +478 -128
  6. package/dist/src/tokens/build.js +429 -111
  7. package/dist/src/tokens/create/defaults.js +27 -23
  8. package/dist/src/tokens/create/generators/$designsystemet.js +6 -6
  9. package/dist/src/tokens/create/write.js +6 -6
  10. package/dist/src/tokens/create.js +27 -23
  11. package/dist/src/tokens/format.js +527 -203
  12. package/dist/src/tokens/index.js +527 -203
  13. package/dist/src/tokens/process/configs/color.js +366 -66
  14. package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -1
  15. package/dist/src/tokens/process/configs/semantic.js +368 -68
  16. package/dist/src/tokens/process/configs/shared.js +9 -2
  17. package/dist/src/tokens/process/configs/size-mode.d.ts +3 -0
  18. package/dist/src/tokens/process/configs/size-mode.d.ts.map +1 -0
  19. package/dist/src/tokens/process/configs/size-mode.js +1067 -0
  20. package/dist/src/tokens/process/configs/size.d.ts +3 -0
  21. package/dist/src/tokens/process/configs/size.d.ts.map +1 -0
  22. package/dist/src/tokens/process/configs/size.js +1069 -0
  23. package/dist/src/tokens/process/configs/type-scale.d.ts +3 -0
  24. package/dist/src/tokens/process/configs/type-scale.d.ts.map +1 -0
  25. package/dist/src/tokens/process/configs/type-scale.js +1067 -0
  26. package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
  27. package/dist/src/tokens/process/configs/typography.js +364 -64
  28. package/dist/src/tokens/process/configs.d.ts +3 -0
  29. package/dist/src/tokens/process/configs.d.ts.map +1 -1
  30. package/dist/src/tokens/process/configs.js +373 -71
  31. package/dist/src/tokens/process/formats/css/color.js +381 -79
  32. package/dist/src/tokens/process/formats/css/semantic.d.ts +0 -14
  33. package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -1
  34. package/dist/src/tokens/process/formats/css/semantic.js +407 -109
  35. package/dist/src/tokens/process/formats/css/size-mode.d.ts +4 -0
  36. package/dist/src/tokens/process/formats/css/size-mode.d.ts.map +1 -0
  37. package/dist/src/tokens/process/formats/css/size-mode.js +1068 -0
  38. package/dist/src/tokens/process/formats/css/size.d.ts +17 -0
  39. package/dist/src/tokens/process/formats/css/size.d.ts.map +1 -0
  40. package/dist/src/tokens/process/formats/css/size.js +1069 -0
  41. package/dist/src/tokens/process/formats/css/type-scale.d.ts +3 -0
  42. package/dist/src/tokens/process/formats/css/type-scale.d.ts.map +1 -0
  43. package/dist/src/tokens/process/formats/css/type-scale.js +1069 -0
  44. package/dist/src/tokens/process/formats/css/typography.js +365 -63
  45. package/dist/src/tokens/process/formats/css.d.ts +3 -0
  46. package/dist/src/tokens/process/formats/css.d.ts.map +1 -1
  47. package/dist/src/tokens/process/formats/css.js +364 -64
  48. package/dist/src/tokens/process/output/declarations.js +376 -74
  49. package/dist/src/tokens/process/output/theme.d.ts.map +1 -1
  50. package/dist/src/tokens/process/output/theme.js +63 -14
  51. package/dist/src/tokens/process/platform.d.ts +16 -0
  52. package/dist/src/tokens/process/platform.d.ts.map +1 -1
  53. package/dist/src/tokens/process/platform.js +402 -95
  54. package/dist/src/tokens/process/transformers.js +9 -2
  55. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +373 -71
  56. package/dist/src/tokens/template/design-tokens/primitives/modes/size/global.js +1 -1
  57. package/dist/src/tokens/utils.d.ts +4 -1
  58. package/dist/src/tokens/utils.d.ts.map +1 -1
  59. package/dist/src/tokens/utils.js +24 -1
  60. package/package.json +6 -6
  61. package/dist/global-XVXVBKM6.json +0 -96
@@ -1,6 +1,6 @@
1
1
  // src/tokens/process/configs.ts
2
2
  import { register } from "@tokens-studio/sd-transforms";
3
- import * as R10 from "ramda";
3
+ import * as R15 from "ramda";
4
4
  import StyleDictionary2 from "style-dictionary";
5
5
 
6
6
  // src/tokens/utils.ts
@@ -31,7 +31,10 @@ var pathStartsWithOneOf = R.curry(
31
31
  return false;
32
32
  }
33
33
  const tokenPath = mapToLowerCase(token.path);
34
- const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
34
+ const matchPathsStartingWith = R.map((pathOrString) => {
35
+ const path = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
36
+ return R.startsWith(mapToLowerCase(path), tokenPath);
37
+ }, paths);
35
38
  return hasAnyTruth(matchPathsStartingWith);
36
39
  }
37
40
  );
@@ -55,11 +58,11 @@ function isColorCategoryToken(token, category) {
55
58
  var isDigit = (s) => /^\d+$/.test(s);
56
59
  function traverseObj(obj, fn) {
57
60
  for (const key in obj) {
58
- const prop = obj[key];
59
- if (prop != null) {
60
- fn.apply(null, [obj, key, prop]);
61
- if (typeof prop === "object") {
62
- traverseObj(prop, fn);
61
+ const prop4 = obj[key];
62
+ if (prop4 != null) {
63
+ fn.apply(null, [obj, key, prop4]);
64
+ if (typeof prop4 === "object") {
65
+ traverseObj(prop4, fn);
63
66
  }
64
67
  }
65
68
  }
@@ -79,9 +82,26 @@ function inlineTokens(shouldInline, tokens) {
79
82
  return tokenWithInlinedRefs;
80
83
  });
81
84
  }
85
+ var sizeMap = {
86
+ xsmall: "xs",
87
+ small: "sm",
88
+ medium: "md",
89
+ large: "lg",
90
+ xlarge: "xl"
91
+ };
92
+ function shortSizeName(size2) {
93
+ return sizeMap[size2] ?? size2;
94
+ }
95
+ var sizeComparator = (size2) => {
96
+ const sortIndex = Object.entries(sizeMap).findIndex(([key, val]) => key === size2 || val === size2);
97
+ return sortIndex ?? 0;
98
+ };
99
+ function orderBySize(sizes) {
100
+ return R.sortBy(sizeComparator, sizes);
101
+ }
82
102
 
83
103
  // src/tokens/process/configs/color.ts
84
- import * as R8 from "ramda";
104
+ import * as R11 from "ramda";
85
105
 
86
106
  // src/tokens/process/formats/css/color.ts
87
107
  import * as R4 from "ramda";
@@ -357,6 +377,9 @@ var buildOptions = {
357
377
  var sd = new StyleDictionary();
358
378
  var buildConfigs = {
359
379
  typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
380
+ sizeMode: { getConfig: configs.sizeModeVariables, dimensions: ["size"] },
381
+ size: { getConfig: configs.sizeVariables, dimensions: ["semantic"] },
382
+ typeScale: { getConfig: configs.typeScaleVariables, dimensions: ["semantic"] },
360
383
  "color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
361
384
  "main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
362
385
  "support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
@@ -442,10 +465,10 @@ ${selector} ${content} ${autoSelectorContent}
442
465
  };
443
466
  var colorCategory = {
444
467
  name: "ds/css-colorcategory",
445
- format: async ({ dictionary, options, platform }) => {
468
+ format: async ({ dictionary, file, options, platform }) => {
446
469
  const { outputReferences, usesDtcg } = options;
447
- const { selector, layer, files } = platform;
448
- const destination = files?.[0]?.destination;
470
+ const { selector, layer } = platform;
471
+ const destination = file.destination;
449
472
  const format = R4.compose(
450
473
  createPropertyFormatter({
451
474
  outputReferences,
@@ -482,6 +505,10 @@ ${selector} ${content}
482
505
  };
483
506
 
484
507
  // src/tokens/process/formats/css/semantic.ts
508
+ import * as R6 from "ramda";
509
+ import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
510
+
511
+ // src/tokens/process/formats/css/size.ts
485
512
  import * as R5 from "ramda";
486
513
  import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
487
514
  var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
@@ -489,12 +516,20 @@ var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.pa
489
516
  var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
490
517
  var isInlineTokens = R5.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
491
518
  var overrideSizingFormula = (format, token) => {
492
- const [name, value] = format(token).split(":");
493
- const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
494
- const round = `round(down, ${calc}, 1px)`;
519
+ const [name, value] = format(token).replace(/;$/, "").split(": ");
520
+ let calc;
521
+ let round;
522
+ if (token.path[1] === "unit") {
523
+ calc = `calc(1rem * ${value})`;
524
+ } else if (value.startsWith("floor")) {
525
+ calc = value.replace(/^floor\((.*)\)$/, "calc($1)");
526
+ round = `round(down, ${calc}, 1px)`;
527
+ } else {
528
+ calc = value.includes("*") ? `calc(${value})` : value;
529
+ }
495
530
  return {
496
531
  name,
497
- round,
532
+ round: round ?? calc,
498
533
  calc
499
534
  };
500
535
  };
@@ -510,18 +545,21 @@ var formatSizingTokens = (format, tokens) => R5.reduce(
510
545
  { tokens: [], round: [], calc: [] },
511
546
  tokens
512
547
  );
513
- var sizingTemplate = ({ round, calc }) => `
548
+ var sizingTemplate = ({ round, calc }) => {
549
+ const usesRounding = round.filter((val, i) => val !== calc[i]);
550
+ return `
514
551
  ${calc.join("\n")}
515
552
 
516
553
  @supports (width: round(down, .1em, 1px)) {
517
- ${round.join("\n")}
554
+ ${usesRounding.join("\n ")}
518
555
  }`;
519
- var semantic = {
520
- name: "ds/css-semantic",
521
- format: async ({ dictionary, options, platform }) => {
556
+ };
557
+ var size = {
558
+ name: "ds/css-size",
559
+ format: async ({ dictionary, file, options, platform }) => {
522
560
  const { outputReferences, usesDtcg } = options;
523
- const { selector, layer, files } = platform;
524
- const destination = files?.[0]?.destination;
561
+ const { selector, layer } = platform;
562
+ const destination = file.destination;
525
563
  const format = createPropertyFormatter2({
526
564
  outputReferences,
527
565
  dictionary,
@@ -529,9 +567,9 @@ var semantic = {
529
567
  usesDtcg
530
568
  });
531
569
  const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
532
- const filteredTokens = R5.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
570
+ const filteredTokens = R5.reject((token) => R5.equals(["_size", "mode-font-size"], token.path), tokens);
533
571
  const [sizingTokens, restTokens] = R5.partition(
534
- (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
572
+ (t) => pathStartsWithOneOf(["_size"], t) && (isDigit(t.path[1]) || t.path[1] === "unit"),
535
573
  filteredTokens
536
574
  );
537
575
  const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
@@ -544,64 +582,56 @@ var semantic = {
544
582
  formatted: t
545
583
  }));
546
584
  buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
547
- const sizingSnippet = sizingTemplate(formattedSizingTokens);
548
- const formattedTokens = formattedMap.map(R5.view(R5.lensProp("formatted"))).concat(sizingSnippet);
549
- const content = `{
585
+ const formattedTokens = [formattedMap.map(R5.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
586
+ const content = `${selector} {
550
587
  ${formattedTokens.join("\n")}
551
588
  }
552
589
  `;
553
590
  const body = R5.isNotNil(layer) ? `@layer ${layer} {
554
- ${selector} ${content}
591
+ ${content}
555
592
  }
556
- ` : `${selector} ${content}
593
+ ` : `${content}
557
594
  `;
558
595
  return body;
559
596
  }
560
597
  };
561
598
 
562
- // src/tokens/process/formats/css/typography.ts
563
- import * as R6 from "ramda";
564
- import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
565
- var typographyFontFamilyPredicate = R6.allPass([
566
- R6.pathSatisfies(R6.includes("typography"), ["path"]),
567
- R6.pathSatisfies(R6.includes("fontFamily"), ["path"])
568
- ]);
569
- var typography = {
570
- name: "ds/css-typography",
571
- format: async ({ dictionary, options, platform }) => {
599
+ // src/tokens/process/formats/css/semantic.ts
600
+ var semantic = {
601
+ name: "ds/css-semantic",
602
+ format: async ({ dictionary, file, options, platform }) => {
572
603
  const { outputReferences, usesDtcg } = options;
573
- const { selector, layer, files } = platform;
574
- const destination = files?.[0]?.destination;
604
+ const { selector, layer } = platform;
605
+ const destination = file.destination;
575
606
  const format = createPropertyFormatter3({
576
607
  outputReferences,
577
608
  dictionary,
578
609
  format: "css",
579
610
  usesDtcg
580
611
  });
581
- const filteredTokens = R6.reject(typographyFontFamilyPredicate, dictionary.allTokens);
582
- const formattedMap = filteredTokens.map((token) => ({
612
+ const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
613
+ const formattedMap = tokens.map((token) => ({
583
614
  token,
584
615
  formatted: format(token)
585
616
  }));
586
617
  buildOptions.buildTokenFormats[destination] = formattedMap;
587
- const formattedTokens = formattedMap.map(R6.view(R6.lensProp("formatted"))).join("\n");
588
- const content = selector ? `${selector} {
618
+ const formattedTokens = formattedMap.map(R6.prop("formatted")).join("\n");
619
+ const content = `${selector} {
589
620
  ${formattedTokens}
590
- }` : formattedTokens;
621
+ }
622
+ `;
591
623
  const body = R6.isNotNil(layer) ? `@layer ${layer} {
592
624
  ${content}
593
- }` : content;
625
+ }
626
+ ` : `${content}
627
+ `;
594
628
  return body;
595
629
  }
596
630
  };
597
631
 
598
- // src/tokens/process/formats/css.ts
599
- var formats = {
600
- colorScheme,
601
- colorCategory,
602
- semantic,
603
- typography
604
- };
632
+ // src/tokens/process/formats/css/size-mode.ts
633
+ import * as R8 from "ramda";
634
+ import { createPropertyFormatter as createPropertyFormatter4 } from "style-dictionary/utils";
605
635
 
606
636
  // src/tokens/process/transformers.ts
607
637
  import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
@@ -613,18 +643,22 @@ var sizeRem = {
613
643
  transitive: true,
614
644
  filter: (token) => {
615
645
  const hasWantedType = typeEquals(["dimension", "fontsize"], token);
616
- const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
646
+ const hasWantedPath = pathStartsWithOneOf([
647
+ "border-radius",
648
+ "font-size"
649
+ /*, ['_size', 'mode-font-size']*/
650
+ ], token);
617
651
  return hasWantedType && hasWantedPath;
618
652
  },
619
653
  transform: (token, config) => {
620
654
  const value = getValue(token);
621
655
  if (isPx(value)) {
622
656
  const baseFont = config.basePxFontSize || 16;
623
- const size = parseInt(value, 10);
624
- if (size === 0) {
657
+ const size2 = parseInt(value, 10);
658
+ if (size2 === 0) {
625
659
  return "0";
626
660
  }
627
- return `${size / baseFont}rem`;
661
+ return `${size2 / baseFont}rem`;
628
662
  }
629
663
  return value;
630
664
  }
@@ -675,6 +709,154 @@ var dsTransformers = [
675
709
  "shadow/css/shorthand"
676
710
  ];
677
711
 
712
+ // src/tokens/process/formats/css/size-mode.ts
713
+ var formatBaseSizeToken = (size2) => (token) => ({
714
+ ...token,
715
+ originalName: token.name,
716
+ name: `${token.name}--${shortSizeName(size2)}`,
717
+ $value: token.$value / basePxFontSize
718
+ });
719
+ var sizeMode = {
720
+ name: "ds/css-size-mode",
721
+ format: async ({ dictionary, file, options, platform }) => {
722
+ const { outputReferences, usesDtcg } = options;
723
+ const { selector, layer, size: size2 } = platform;
724
+ const destination = file.destination;
725
+ const format = createPropertyFormatter4({
726
+ outputReferences,
727
+ dictionary,
728
+ format: "css",
729
+ usesDtcg
730
+ });
731
+ const sizeSpecificTokens = dictionary.allTokens.map(formatBaseSizeToken(size2));
732
+ const sizeSpecificVariables = sizeSpecificTokens.map(format).join("\n");
733
+ const formattedMap = sizeSpecificTokens.map((token) => ({
734
+ token,
735
+ formatted: format({
736
+ ...token,
737
+ // Remove the `--<size>` suffix for the token listing, since that is the only token we actually use
738
+ name: token.originalName
739
+ })
740
+ }));
741
+ buildOptions.buildTokenFormats[destination] = formattedMap;
742
+ const content = `${selector} /* ${size2} */ {
743
+ ${sizeSpecificVariables}
744
+ }`;
745
+ const body = wrapInLayer(content, layer);
746
+ const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName);
747
+ const defaultSize = shortSizeName(buildOptions?.defaultSize ?? "");
748
+ const sizingToggles = `:root, [data-size] {
749
+ --ds-size: var(--ds-size--${defaultSize});
750
+ ${sizes.map((size3) => ` --ds-size--${size3}: var(--ds-size,);`).join("\n")}
751
+ --ds-size-mode-font-size:
752
+ ${sizes.map((size3) => ` var(--ds-size--${size3}, var(--ds-size-mode-font-size--${size3}))`).join("\n")};
753
+ }`;
754
+ const sizingHelpers = sizes.map((size3) => `[data-size='${size3}'] { --ds-size: var(--ds-size--${size3}); }`).join("\n");
755
+ const sharedContent = `${sizingToggles}
756
+
757
+ ${sizingHelpers}`;
758
+ const sharedBody = shortSizeName(size2) === R8.last(sizes) ? `
759
+ ${wrapInLayer(sharedContent, layer)}` : "";
760
+ return body + sharedBody;
761
+ }
762
+ };
763
+ function wrapInLayer(content, layer) {
764
+ return R8.isNotNil(layer) ? `@layer ${layer} {
765
+ ${content}
766
+ }
767
+ ` : `${content}
768
+ `;
769
+ }
770
+
771
+ // src/tokens/process/formats/css/typography.ts
772
+ import * as R9 from "ramda";
773
+ import { createPropertyFormatter as createPropertyFormatter5 } from "style-dictionary/utils";
774
+ var typographyFontFamilyPredicate = R9.allPass([
775
+ R9.pathSatisfies(R9.includes("typography"), ["path"]),
776
+ R9.pathSatisfies(R9.includes("fontFamily"), ["path"])
777
+ ]);
778
+ var typography = {
779
+ name: "ds/css-typography",
780
+ format: async ({ dictionary, file, options, platform }) => {
781
+ const { outputReferences, usesDtcg } = options;
782
+ const { selector, layer } = platform;
783
+ const destination = file.destination;
784
+ const format = createPropertyFormatter5({
785
+ outputReferences,
786
+ dictionary,
787
+ format: "css",
788
+ usesDtcg
789
+ });
790
+ const filteredTokens = R9.reject(typographyFontFamilyPredicate, dictionary.allTokens);
791
+ const formattedMap = filteredTokens.map((token) => ({
792
+ token,
793
+ formatted: format(token)
794
+ }));
795
+ buildOptions.buildTokenFormats[destination] = formattedMap;
796
+ const formattedTokens = formattedMap.map(R9.view(R9.lensProp("formatted"))).join("\n");
797
+ const content = selector ? `${selector} {
798
+ ${formattedTokens}
799
+ }` : formattedTokens;
800
+ const body = R9.isNotNil(layer) ? `@layer ${layer} {
801
+ ${content}
802
+ }` : content;
803
+ return body;
804
+ }
805
+ };
806
+
807
+ // src/tokens/process/formats/css/type-scale.ts
808
+ import * as R10 from "ramda";
809
+ import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
810
+ var typographyFontFamilyPredicate2 = R10.allPass([
811
+ R10.pathSatisfies(R10.includes("typography"), ["path"]),
812
+ R10.pathSatisfies(R10.includes("fontFamily"), ["path"])
813
+ ]);
814
+ function formatTypographySizeToken(token) {
815
+ return { ...token, $value: `calc(${token.$value} * var(--_ds-font-size-factor))` };
816
+ }
817
+ var typeScale = {
818
+ name: "ds/css-type-scale",
819
+ format: async ({ dictionary, file, options, platform }) => {
820
+ const { outputReferences, usesDtcg } = options;
821
+ const { selector, layer } = platform;
822
+ const destination = file.destination;
823
+ const format = createPropertyFormatter6({
824
+ outputReferences,
825
+ dictionary,
826
+ format: "css",
827
+ usesDtcg
828
+ });
829
+ const filteredTokens = R10.reject(typographyFontFamilyPredicate2, dictionary.allTokens);
830
+ const tokens = R10.map(formatTypographySizeToken, filteredTokens);
831
+ const formattedMap = tokens.map((token) => ({
832
+ token,
833
+ formatted: format(token)
834
+ }));
835
+ buildOptions.buildTokenFormats[destination] = formattedMap;
836
+ const formattedTokens = formattedMap.map(R10.prop("formatted")).join("\n");
837
+ const sizeFactor = ` --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
838
+ const content = `${selector} {
839
+ ${sizeFactor}
840
+ ${formattedTokens}
841
+ }`;
842
+ const body = R10.isNotNil(layer) ? `@layer ${layer} {
843
+ ${content}
844
+ }` : content;
845
+ return body;
846
+ }
847
+ };
848
+
849
+ // src/tokens/process/formats/css.ts
850
+ var formats = {
851
+ colorScheme,
852
+ colorCategory,
853
+ semantic,
854
+ sizeMode,
855
+ size,
856
+ typography,
857
+ typeScale
858
+ };
859
+
678
860
  // src/tokens/process/configs/color.ts
679
861
  var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) => {
680
862
  const selector = `${colorScheme2 === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme2}"]`;
@@ -696,7 +878,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
696
878
  {
697
879
  destination: `color-scheme/${colorScheme2}.css`,
698
880
  format: formats.colorScheme.name,
699
- filter: (token) => typeEquals("color", token) && !R8.startsWith(["global"], token.path)
881
+ filter: (token) => typeEquals("color", token) && !R11.startsWith(["global"], token.path)
700
882
  }
701
883
  ],
702
884
  options: {
@@ -747,7 +929,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
747
929
  };
748
930
 
749
931
  // src/tokens/process/configs/semantic.ts
750
- import * as R9 from "ramda";
932
+ import * as R12 from "ramda";
751
933
  import { outputReferencesFilter } from "style-dictionary/utils";
752
934
  var semanticVariables = ({ theme }) => {
753
935
  const selector = `:root`;
@@ -770,9 +952,12 @@ var semanticVariables = ({ theme }) => {
770
952
  destination: `semantic.css`,
771
953
  format: formats.semantic.name,
772
954
  filter: (token) => {
773
- const isUwantedToken = R9.anyPass([R9.includes("primitives/global")])(token.filePath);
774
- const isPrivateToken = R9.includes("_", token.path);
775
- const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
955
+ const isUwantedToken = R12.anyPass([R12.includes("primitives/global")])(token.filePath);
956
+ const isPrivateToken = R12.includes("_", token.path);
957
+ const unwantedPaths = pathStartsWithOneOf(
958
+ ["size", "_size", "font-size", "line-height", "letter-spacing"],
959
+ token
960
+ );
776
961
  const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
777
962
  const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
778
963
  return unwantedTokens;
@@ -782,9 +967,126 @@ var semanticVariables = ({ theme }) => {
782
967
  options: {
783
968
  outputReferences: (token, options) => {
784
969
  const include = pathStartsWithOneOf(["border-radius"], token);
785
- const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
786
- return (include || isWantedSize) && outputReferencesFilter(token, options);
970
+ return include && outputReferencesFilter(token, options);
971
+ }
972
+ }
973
+ }
974
+ }
975
+ };
976
+ };
977
+
978
+ // src/tokens/process/configs/size.ts
979
+ import * as R13 from "ramda";
980
+ import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
981
+ var sizeVariables = ({ theme }) => {
982
+ const selector = `:root, [data-size]`;
983
+ const layer = `ds.theme.size`;
984
+ return {
985
+ preprocessors: ["tokens-studio"],
986
+ platforms: {
987
+ css: {
988
+ // custom
989
+ theme,
990
+ basePxFontSize,
991
+ selector,
992
+ layer,
993
+ //
994
+ prefix,
995
+ buildPath: `${theme}/`,
996
+ transforms: dsTransformers,
997
+ files: [
998
+ {
999
+ destination: `size.css`,
1000
+ format: formats.size.name,
1001
+ filter: (token) => {
1002
+ const isUwantedToken = R13.anyPass([R13.includes("primitives/global")])(token.filePath);
1003
+ const isPrivateToken = R13.includes("_", token.path);
1004
+ return pathStartsWithOneOf(["size", "_size"], token) && !(isUwantedToken || isPrivateToken);
1005
+ }
1006
+ }
1007
+ ],
1008
+ options: {
1009
+ outputReferences: (token, options) => {
1010
+ const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && (isDigit(token.path[1]) || token.path[1] === "unit");
1011
+ return isWantedSize && outputReferencesFilter2(token, options);
1012
+ }
1013
+ }
1014
+ }
1015
+ }
1016
+ };
1017
+ };
1018
+
1019
+ // src/tokens/process/configs/size-mode.ts
1020
+ import * as R14 from "ramda";
1021
+ var sizeModeVariables = ({ theme, size: size2 }) => {
1022
+ const selector = `:root`;
1023
+ const layer = `ds.theme.size-mode`;
1024
+ return {
1025
+ preprocessors: ["tokens-studio"],
1026
+ platforms: {
1027
+ css: {
1028
+ // custom
1029
+ size: size2,
1030
+ theme,
1031
+ basePxFontSize,
1032
+ selector,
1033
+ layer,
1034
+ //
1035
+ prefix,
1036
+ buildPath: `${theme}/`,
1037
+ transforms: dsTransformers,
1038
+ files: [
1039
+ {
1040
+ destination: `size-mode/${size2}.css`,
1041
+ format: formats.sizeMode.name,
1042
+ filter: (token) => {
1043
+ return R14.equals(["_size", "mode-font-size"], token.path);
1044
+ }
1045
+ }
1046
+ ]
1047
+ }
1048
+ }
1049
+ };
1050
+ };
1051
+
1052
+ // src/tokens/process/configs/type-scale.ts
1053
+ var typeScaleVariables = ({ theme, size: size2 }) => {
1054
+ const selector = ":root, [data-size]";
1055
+ const layer = `ds.theme.type-scale`;
1056
+ return {
1057
+ usesDtcg: true,
1058
+ preprocessors: ["tokens-studio"],
1059
+ expand: {
1060
+ include: ["typography"]
1061
+ },
1062
+ platforms: {
1063
+ css: {
1064
+ prefix,
1065
+ selector,
1066
+ layer,
1067
+ buildPath: `${theme}/`,
1068
+ basePxFontSize,
1069
+ transforms: [
1070
+ "name/kebab",
1071
+ "ts/size/px",
1072
+ sizeRem.name,
1073
+ "ts/size/lineheight",
1074
+ "ts/typography/fontWeight",
1075
+ typographyName.name
1076
+ ],
1077
+ files: [
1078
+ {
1079
+ destination: `type-scale.css`,
1080
+ format: formats.typeScale.name,
1081
+ filter: (token) => {
1082
+ const included = typeEquals(["typography", "dimension", "fontsize"], token);
1083
+ if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
1084
+ return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "border-width", "border-radius"], token) && (pathStartsWithOneOf(["font-size"], token) || token.path.includes("fontSize"));
1085
+ }
787
1086
  }
1087
+ ],
1088
+ options: {
1089
+ outputReferences: (token) => pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize")
788
1090
  }
789
1091
  }
790
1092
  }
@@ -825,12 +1127,9 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
825
1127
  destination: `typography/${typography2}.css`,
826
1128
  format: formats.typography.name,
827
1129
  filter: (token) => {
828
- const included = typeEquals(
829
- ["typography", "fontweight", "fontFamily", "lineHeight", "dimension", "font", "fontsize"],
830
- token
831
- );
1130
+ const included = typeEquals(["fontweight", "fontFamily", "lineHeight", "dimension"], token);
832
1131
  if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
833
- return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token);
1132
+ return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token) && !(pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize"));
834
1133
  }
835
1134
  }
836
1135
  ]
@@ -857,7 +1156,10 @@ var configs = {
857
1156
  dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
858
1157
  warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
859
1158
  infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
1159
+ sizeModeVariables,
1160
+ sizeVariables,
860
1161
  typographyVariables,
1162
+ typeScaleVariables,
861
1163
  semanticVariables
862
1164
  };
863
1165
  var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
@@ -874,7 +1176,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
874
1176
  obj.filePath = tokenSet;
875
1177
  }
876
1178
  });
877
- tokenSource.tokens = R10.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
1179
+ tokenSource.tokens = R15.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
878
1180
  }
879
1181
  }
880
1182
  } else {